edit form component

KhudaDad414 · Oct 10, 2023 · 730c9a3 · 730c9a3
1 parent d2ae2e3
commit 730c9a3
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 27 deletions.
diff --git a/apps/design-system/.storybook/preview.js b/apps/design-system/.storybook/preview.js
@@ -3,6 +3,19 @@ import '../src/styles/tailwind.output.css'
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
+  backgrounds: {
+    default: 'dark',
+    values: [
+      {
+        name: 'dark',
+        value: "#0F172A"
+      },
+      {
+        name: 'light',
+        value: "#e2e8f0"
+      },
+    ],
+  },
   controls: {
     matchers: {
       color: /(background|color)$/i,

diff --git a/apps/design-system/src/components/Form.stories.tsx b/apps/design-system/src/components/Form.stories.tsx
@@ -1,12 +1,12 @@
 import type { Meta } from "@storybook/react"
 import {
-  DescriptionWithLabel,
+  TextArea,
   Field,
   Form,
   FormGroup,
   FormSection,
   IconButton,
-  Input,
+  TextInput,
   Label,
   SelectDropdown,
 } from "@asyncapi/studio-ui"
@@ -15,11 +15,7 @@ import { AddIcon, TrashIcon } from "@asyncapi/studio-ui/icons"
 const meta: Meta<typeof Form> = {
   component: Form,
   parameters: {
-    layout: "fullscreen",
-    backgrounds: {
-      default: "dark",
-      values: [{ name: "dark", value: "#0F172A" }],
-    },
+    layout: "fullscreen"
   },
 }
 
@@ -42,42 +38,50 @@ export const Default = () => (
     summary="Type a short summary description..."
     description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris"
   >
+  <div className="flex flex-col gap-4">
+    <Field name="summary">
+      <TextArea placeholder="Type a short summary description..." rows={1}/>
+    </Field>
+    <Field name="description">
+      <TextArea rows={5} value='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris' placeholder={'Type a description...'}/>
+    </Field>
+  </div>
     <FormSection title="Connection Details">
       <div className="flex gap-3">
         <Field name="protocol" label="Protocol">
           <SelectDropdown options={singleSelectOptions} placeholder="Select a protocol..." />
         </Field>
-        <Field name="Email" label="email" className="grow">
-          <Input placeholder="Enter your email" />
+        <Field name="host" label="Host" className="grow">
+          <TextInput value='kafka.in.mycompany.com:{port}/production' placeholder="" className='w-full' />
         </Field>
       </div>
       <div className="flex gap-3">
         <Field className="grow" label="Schema Registry URL" name={"schema"}>
-          <Input value="https://registry.mycompay.com" placeholder="" />
+          <TextInput value="https://registry.mycompay.com" placeholder="" />
         </Field>
         <Field className="grow" label="Schema Registry Vendor" name={"vendor"}>
-          <Input value="Confluent" placeholder="" />
+          <TextInput value="Confluent" placeholder="" />
         </Field>
       </div>
       <Label label={"Security"} />
       <FormGroup>
         <div className="flex flex-col gap-3">
           <div className="flex gap-3">
             <SelectDropdown options={[{ label: "User/Password", value: "user/password" }]} value="user/password" />
-            <Input placeholder="Type something here..." className="grow" />
+            <TextInput placeholder="Type something here..." className="grow" />
             <TrashIcon className="w-6 h-6 text-gray-500" />
           </div>
-          <Input placeholder="Type something here..." />
+          <TextInput placeholder="Type something here..." />
         </div>
       </FormGroup>
       <FormGroup>
         <div className="flex flex-col gap-3">
           <div className="flex gap-3">
             <SelectDropdown options={[{ label: "User/Password", value: "user/password" }]} value="user/password" />
-            <Input placeholder="Type something here..." className="grow" />
+            <TextInput placeholder="Type something here..." className="grow" />
             <TrashIcon className="w-6 h-6 text-gray-500" />
           </div>
-          <Input placeholder="Type something here..." />
+          <TextInput placeholder="Type something here..." />
         </div>
       </FormGroup>
       <IconButton text="Add Security Requirements" icon={AddIcon} />
@@ -87,12 +91,11 @@ export const Default = () => (
     </FormSection>
     <FormSection title="External Documentation">
       <Field name="url" label="URL">
-        <Input placeholder="https://www.mycompany.com/private/docs/production-kafka-broker" />
+        <TextInput placeholder="https://www.mycompany.com/private/docs/production-kafka-broker" />
+      </Field>
+      <Field name="description" label='Description'>
+        <TextArea value='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna,' placeholder='' />
       </Field>
-      <DescriptionWithLabel
-        label="Description"
-        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna,"
-      />
     </FormSection>
   </Form>
 )
diff --git a/apps/design-system/src/styles/tailwind.output.css b/apps/design-system/src/styles/tailwind.output.css
@@ -583,3 +583,79 @@ video {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
+
+.mx-3 {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
diff --git a/apps/design-system/tailwind.config.js b/apps/design-system/tailwind.config.js
@@ -1,6 +1,6 @@
 const sharedConfig = require('tailwind-config/tailwind.config.js');
 
 module.exports = {
-  content: ['./components/**/*.tsx'],
+  content: ['./src/**/*.tsx'],
   presets: [sharedConfig],
 };
diff --git a/packages/ui/components/Form/Fields/Field.tsx b/packages/ui/components/Form/Fields/Field.tsx
@@ -5,17 +5,19 @@ import * as RadixForm from '@radix-ui/react-form'
 type FieldProps = {
   name: string
   className?: string
-  label: string
+  label?: string
   tooltip?: string
   children: React.ReactNode
 }
 
 export const Field: React.FunctionComponent<FieldProps> = ({ label, tooltip, children, className, name }) => {
   return (
     <RadixForm.Field name={name} className={`flex flex-col gap-2 ${className}`}>
+      { label &&
       <RadixForm.Label asChild>
         <Label label={label} tooltip={tooltip} />
       </RadixForm.Label>
+      }
       <RadixForm.Control asChild>{children}</RadixForm.Control>
     </RadixForm.Field>
   )

diff --git a/packages/ui/components/Form/Form.tsx b/packages/ui/components/Form/Form.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import * as RadixForm from '@radix-ui/react-form'
-import { Description } from './Labels/Description'
 
 export type FormProps = {
   className?: string
@@ -9,16 +8,14 @@ export type FormProps = {
   description?: string
   children?: React.ReactNode
 }
-export const Form = ({ className, title, summary, description, children }: FormProps) => (
+export const Form = ({ className, title, children }: FormProps) => (
   <RadixForm.Root className={`m-8 ${className}`}>
     <div className="flex flex-col gap-4">
       {title && (
-        <h2 className="text-transparent bg-gradient-to-l from-gray-100 via-gray-300 capitalize to-gray-100 bg-clip-text text-[32px] leading-8 font-semibold text-gray-200">
+        <h2 className="mb-4 text-transparent bg-gradient-to-l from-gray-100 via-gray-300 capitalize to-gray-100 bg-clip-text text-[32px] leading-8 font-semibold text-gray-200">
           {title}
         </h2>
       )}
-      {summary && <p className="text-sm leading-4 italic font-normal text-gray-400">{summary}</p>}
-      {description && <Description text={description} />}
     </div>
     <div>{children}</div>
   </RadixForm.Root>