Add Form component (#773)

Co-authored-by: samz <[email protected]>

.changeset/few-parrots-shout.md

@@ -0,0 +1,5 @@
+---
+"@asyncapi/studio-ui": minor
+---
+
+Add Form component.

.changeset/rare-donuts-vanish.md

@@ -0,0 +1,5 @@
+---
+"@asyncapi/studio-ui": minor
+---
+
+Added TextArea component.

.changeset/silly-jobs-do.md

@@ -0,0 +1,5 @@
+---
+"@asyncapi/studio-ui": minor
+---
+
+Add Dropdown component.

.changeset/young-hounds-occur.md

@@ -0,0 +1,5 @@
+---
+"@asyncapi/studio-ui": minor
+---
+
+Add TextInput component.

.gitignore

@@ -6,3 +6,4 @@ build
 dist
 .turbo
 .env
+apps/design-system/src/styles/tailwind.output.css

apps/design-system/.gitignore

@@ -26,4 +26,4 @@ storybook-static
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*

apps/design-system/.storybook/preview.js

@@ -1,17 +1,25 @@
 import '@asyncapi/studio-ui/styles.css'
+import '../src/styles/tailwind.output.css'
 
 export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
   backgrounds: {
+    default: 'dark',
     values: [
-      { name: 'light', value: '#ffffff' },
-      { name: 'dark', value: '#0F172A' },
+      {
+        name: 'dark',
+        value: "#0F172A"
+      },
+      {
+        name: 'light',
+        value: "#e2e8f0"
+      },
     ],
   },
-  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+}

apps/design-system/package.json

@@ -10,6 +10,7 @@
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
     "@tippyjs/react": "^4.2.6",
+    "concurrently": "^8.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
@@ -20,7 +21,9 @@
     "generate:assets": "echo \"No assets to configure\"",
     "test": "echo \"No tests\"",
     "eject": "react-scripts eject",
-    "dev": "storybook dev -p 6006 --no-open",
+    "dev": "concurrently 'npm run watch:*'",
+    "watch:storybook": "storybook dev -p 6006 --no-open",
+    "watch:tailwind": "npx tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/tailwind.output.css --watch",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
     "build": "storybook build"
   },
@@ -64,6 +67,7 @@
     "remark-gfm": "^3.0.1",
     "storybook": "^7.0.20",
     "tailwind-config": "workspace:*",
+    "tailwindcss": "^3.4.3",
     "ts-loader": "^9.4.3",
     "typescript": "^5.0.2",
     "webpack": "^5.69.0"

apps/design-system/src/components/Form/Dropdown.stories.tsx

@@ -0,0 +1,102 @@
+import { Dropdown, DropdownOption } from '@asyncapi/studio-ui'
+import type { Meta, StoryObj } from "@storybook/react"
+/* eslint-disable import/no-anonymous-default-export */
+
+
+const meta: Meta<typeof Dropdown> = {
+  component: Dropdown,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: {
+      default: "light",
+    },
+  },
+}
+export default meta
+
+const options: DropdownOption[] = [
+  {
+    type: "group",
+    label: "MQTT",
+    options: [
+      {
+        label: "MQTT 3",
+        value: "mqtt3",
+      },
+      {
+        label: "MQTT 5",
+        value: "mqtt5",
+      },
+    ],
+  },
+  {
+    type: "separator",
+  },
+  {
+    label: "MQTT",
+    value: "mqtt",
+  },
+  {
+    label: "AMQP 0-9-1",
+    value: "amqp0",
+  },
+  {
+    label: "AMQP 1",
+    value: "amqp1",
+  },
+  {
+    label: "KAFKA",
+    value: "kafka",
+  },
+  {
+    label: "HTTP",
+    value: "http",
+  },
+  {
+    label: "Socket.io",
+    value: "socket.io",
+  },
+]
+type Story = StoryObj<typeof Dropdown>
+export const Default: Story = {
+  args: {
+    options,
+    placeholder: "Select a protocol...",
+    isDisabled: false,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    isDisabled: true,
+  },
+}
+
+export const WithSelectedValue: Story = {
+  args: {
+    ...Default.args,
+    value: "mqtt",
+  },
+}
+
+export const EmptyOptions: Story = {
+  args: {
+    options: [],
+    placeholder: "No protocols available...",
+    isDisabled: false,
+  },
+}
+
+const longOptions: DropdownOption[] = [...Array(50)].map((_, i) => ({
+  label: `Option ${i + 1}`,
+  value: `option${i + 1}`,
+}))
+
+export const LongList: Story = {
+  args: {
+    options: longOptions,
+    placeholder: "Select an option...",
+    isDisabled: false,
+  },
+}

apps/design-system/src/components/Form/Field.stories.tsx

@@ -0,0 +1,38 @@
+import { Field, Form, TextInput  } from '@asyncapi/studio-ui'
+import type { Meta } from "@storybook/react"
+/* eslint-disable import/no-anonymous-default-export */
+
+
+const meta: Meta<typeof Field> = {
+  component: Field,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: {
+      default: "dark",
+    },
+  },
+}
+export default meta
+
+export const Default = () => (
+  <Form>
+    <Field className="grow" label="Schema Registry Vendor" name="vendor">
+      <TextInput value="Confluent" placeholder="" />
+    </Field>
+  </Form>
+)
+
+export const NoLabel = () => (
+  <Form>
+    <Field className="grow" name={"vendor"}>
+      <TextInput value="Confluent" placeholder="Enter vendor..." />
+    </Field>
+  </Form>
+);
+export const WithTooltip = () => (
+  <Form>
+    <Field className="grow" label="Schema Registry Vendor" name={"vendor"} tooltip="This is a vendor tooltip">
+      <TextInput value="Confluent" placeholder="" />
+    </Field>
+  </Form>
+);

apps/design-system/src/components/Form/Fieldset.stories.tsx

@@ -0,0 +1,23 @@
+import { Fieldset, ChipInput  } from '@asyncapi/studio-ui'
+import type { Meta } from "@storybook/react"
+/* eslint-disable import/no-anonymous-default-export */
+
+
+const meta: Meta<typeof Fieldset> = {
+  component: Fieldset,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: {
+      default: "dark",
+    },
+  },
+}
+export default meta
+
+export const Default = () => (
+  <Fieldset title="Tags" className='m-4'>
+  <div>
+    <ChipInput name={''} id={''} chips={["production", "platform"]} onChange={()=> {return}} />
+  </div>
+</Fieldset>
+)

apps/design-system/src/components/Form/Form.stories.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import type { Meta } from "@storybook/react"
+import {
+  TextArea,
+  Field,
+  Form,
+  Group,
+  Fieldset,
+  IconButton,
+  TextInput,
+  Label,
+  Dropdown,
+  ChipInput,
+} from "@asyncapi/studio-ui"
+import { AddIcon, TrashIcon } from "@asyncapi/studio-ui/icons"
+
+const meta: Meta<typeof Form> = {
+  component: Form,
+  parameters: {
+    layout: "fullscreen"
+  },
+}
+
+export default meta
+
+const singleSelectOptions = [
+  { label: "HTTP", value: "http" },
+  { label: "Kafka", value: "kafka" },
+  { label: "Websocket", value: "websocket" },
+  { label: "AMQP", value: "amqp" },
+  { label: "MQTT", value: "mqtt" },
+  { label: "Google PubSub", value: "googlepubsub" },
+  { label: "IBM MQ", value: "ibmmq" },
+  { label: "NATS", value: "nats" },
+  { label: "Pulsar", value: "pulsar" },
+]
+const renderSecurityInput = () => (
+  <div className="flex gap-3">
+    <Dropdown options={[{ label: "User/Password", value: "user/password" }]} value="user/password" />
+    <TextInput placeholder="Type something here..." className="grow" />
+    <TrashIcon className="w-6 h-6 text-gray-500" />
+  </div>
+);
+export const Default = () => (
+  <Form
+    title="User Registration"
+  >
+  <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>
+    <Fieldset title="Connection Details">
+      <div className="flex gap-3">
+        <Field name="protocol" label="Protocol">
+          <Dropdown options={singleSelectOptions} placeholder="Select a protocol..." />
+        </Field>
+        <Field name="host" label="Host" className="grow" tooltip='Server host url.'>
+          <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"}>
+          <TextInput value="https://registry.mycompay.com" placeholder="" />
+        </Field>
+        <Field className="grow" label="Schema Registry Vendor" name={"vendor"}>
+          <TextInput value="Confluent" placeholder="" />
+        </Field>
+      </div>
+      <Label label={"Security"} />
+      <Group>
+        <div className="flex flex-col gap-3">
+          {renderSecurityInput()}
+          <TextInput placeholder="Type something here..." />
+        </div>
+      </Group>
+      <Group>
+        <div className="flex flex-col gap-3">
+          {renderSecurityInput()}
+          <TextInput placeholder="Type something here..." />
+        </div>
+      </Group>
+      <IconButton text="Add Security Requirements" icon={AddIcon} />
+    </Fieldset>
+    <Fieldset title="Tags">
+      <div>
+        <ChipInput name={''} id={''} chips={["production", "platform"]} onChange={()=> {return}} />
+      </div>
+    </Fieldset>
+    <Fieldset title="External Documentation">
+      <Field name="url" label="URL">
+        <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>
+    </Fieldset>
+  </Form>
+)

apps/design-system/src/components/Form/Group.stories.tsx

@@ -0,0 +1,32 @@
+import { Dropdown, Group, TextInput } from '@asyncapi/studio-ui'
+import { TrashIcon } from '@asyncapi/studio-ui/icons'
+
+import type { Meta } from "@storybook/react"
+/* eslint-disable import/no-anonymous-default-export */
+
+
+const meta: Meta<typeof Group> = {
+  component: Group,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: {
+      default: "dark",
+    },
+  },
+}
+export default meta
+
+
+
+export const Default = () => (
+<Group className='m-3'>
+  <div className="flex flex-col gap-3">
+    <div className="flex gap-3">
+      <Dropdown options={[{ label: "User/Password", value: "user/password" }]} value="user/password" />
+      <TextInput placeholder="Type something here..." className="grow" />
+      <TrashIcon className="w-6 h-6 text-gray-500" />
+    </div>
+    <TextInput placeholder="Type something here..." />
+  </div>
+</Group>
+)