From 2c0ab6cdf18630aebf50d21b933fa0d5d3a16b81 Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani <32505158+KhudaDad414@users.noreply.github.com> Date: Wed, 15 May 2024 14:42:31 +0100 Subject: [PATCH] Add Form component (#773) Co-authored-by: samz --- .changeset/few-parrots-shout.md | 5 + .changeset/rare-donuts-vanish.md | 5 + .changeset/silly-jobs-do.md | 5 + .changeset/young-hounds-occur.md | 5 + .gitignore | 1 + apps/design-system/.gitignore | 2 +- apps/design-system/.storybook/preview.js | 16 +- apps/design-system/package.json | 6 +- .../{ => Form}/ChipInput.stories.tsx | 0 .../src/components/Form/Dropdown.stories.tsx | 102 + .../src/components/Form/Field.stories.tsx | 38 + .../src/components/Form/Fieldset.stories.tsx | 23 + .../src/components/Form/Form.stories.tsx | 102 + .../src/components/Form/Group.stories.tsx | 32 + .../src/components/Form/TextArea.stories.tsx | 57 + .../src/components/Form/TextInput.stories.tsx | 74 + .../src/components/IconButton.stories.tsx | 19 + .../src/design-tokens/Icons.stories.mdx | 2 + apps/design-system/src/styles/tailwind.css | 3 + .../src/styles/tailwind.output.css | 628 + apps/design-system/tailwind.config.js | 9 + apps/studio/package.json | 2 +- package.json | 2 +- packages/ui/components/ChipInput.tsx | 2 +- packages/ui/components/DropdownMenu.tsx | 2 +- packages/ui/components/Form/Fields/Field.tsx | 24 + packages/ui/components/Form/Fields/index.ts | 1 + packages/ui/components/Form/Form.tsx | 20 + .../ui/components/Form/Inputs/Dropdown.tsx | 125 + .../ui/components/Form/Inputs/TextArea.tsx | 25 + .../ui/components/Form/Inputs/TextInput.tsx | 21 + packages/ui/components/Form/Inputs/index.ts | 3 + packages/ui/components/Form/Labels/Label.tsx | 25 + packages/ui/components/Form/Labels/index.ts | 1 + .../ui/components/Form/Sections/Fieldset.tsx | 16 + .../ui/components/Form/Sections/Group.tsx | 10 + packages/ui/components/Form/Sections/index.ts | 2 + packages/ui/components/Form/index.ts | 5 + packages/ui/components/IconButton.tsx | 17 + packages/ui/components/icons/AddIcon.tsx | 18 + packages/ui/components/icons/index.tsx | 4 + packages/ui/components/index.tsx | 3 + packages/ui/package.json | 2 + packages/ui/tsconfig.json | 2 +- pnpm-lock.yaml | 26457 +++++++--------- 45 files changed, 13459 insertions(+), 14464 deletions(-) create mode 100644 .changeset/few-parrots-shout.md create mode 100644 .changeset/rare-donuts-vanish.md create mode 100644 .changeset/silly-jobs-do.md create mode 100644 .changeset/young-hounds-occur.md rename apps/design-system/src/components/{ => Form}/ChipInput.stories.tsx (100%) create mode 100644 apps/design-system/src/components/Form/Dropdown.stories.tsx create mode 100644 apps/design-system/src/components/Form/Field.stories.tsx create mode 100644 apps/design-system/src/components/Form/Fieldset.stories.tsx create mode 100644 apps/design-system/src/components/Form/Form.stories.tsx create mode 100644 apps/design-system/src/components/Form/Group.stories.tsx create mode 100644 apps/design-system/src/components/Form/TextArea.stories.tsx create mode 100644 apps/design-system/src/components/Form/TextInput.stories.tsx create mode 100644 apps/design-system/src/components/IconButton.stories.tsx create mode 100644 apps/design-system/src/styles/tailwind.css create mode 100644 apps/design-system/src/styles/tailwind.output.css create mode 100644 apps/design-system/tailwind.config.js create mode 100644 packages/ui/components/Form/Fields/Field.tsx create mode 100644 packages/ui/components/Form/Fields/index.ts create mode 100644 packages/ui/components/Form/Form.tsx create mode 100644 packages/ui/components/Form/Inputs/Dropdown.tsx create mode 100644 packages/ui/components/Form/Inputs/TextArea.tsx create mode 100644 packages/ui/components/Form/Inputs/TextInput.tsx create mode 100644 packages/ui/components/Form/Inputs/index.ts create mode 100644 packages/ui/components/Form/Labels/Label.tsx create mode 100644 packages/ui/components/Form/Labels/index.ts create mode 100644 packages/ui/components/Form/Sections/Fieldset.tsx create mode 100644 packages/ui/components/Form/Sections/Group.tsx create mode 100644 packages/ui/components/Form/Sections/index.ts create mode 100644 packages/ui/components/Form/index.ts create mode 100644 packages/ui/components/IconButton.tsx create mode 100644 packages/ui/components/icons/AddIcon.tsx diff --git a/.changeset/few-parrots-shout.md b/.changeset/few-parrots-shout.md new file mode 100644 index 000000000..af7d4f5fe --- /dev/null +++ b/.changeset/few-parrots-shout.md @@ -0,0 +1,5 @@ +--- +"@asyncapi/studio-ui": minor +--- + +Add Form component. diff --git a/.changeset/rare-donuts-vanish.md b/.changeset/rare-donuts-vanish.md new file mode 100644 index 000000000..b3739b9b2 --- /dev/null +++ b/.changeset/rare-donuts-vanish.md @@ -0,0 +1,5 @@ +--- +"@asyncapi/studio-ui": minor +--- + +Added TextArea component. diff --git a/.changeset/silly-jobs-do.md b/.changeset/silly-jobs-do.md new file mode 100644 index 000000000..5db2333fe --- /dev/null +++ b/.changeset/silly-jobs-do.md @@ -0,0 +1,5 @@ +--- +"@asyncapi/studio-ui": minor +--- + +Add Dropdown component. diff --git a/.changeset/young-hounds-occur.md b/.changeset/young-hounds-occur.md new file mode 100644 index 000000000..8f37e3759 --- /dev/null +++ b/.changeset/young-hounds-occur.md @@ -0,0 +1,5 @@ +--- +"@asyncapi/studio-ui": minor +--- + +Add TextInput component. diff --git a/.gitignore b/.gitignore index cff19b635..e9cabfb15 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ build dist .turbo .env +apps/design-system/src/styles/tailwind.output.css \ No newline at end of file diff --git a/apps/design-system/.gitignore b/apps/design-system/.gitignore index 143914283..974b4266f 100644 --- a/apps/design-system/.gitignore +++ b/apps/design-system/.gitignore @@ -26,4 +26,4 @@ storybook-static npm-debug.log* yarn-debug.log* -yarn-error.log* +yarn-error.log* \ No newline at end of file diff --git a/apps/design-system/.storybook/preview.js b/apps/design-system/.storybook/preview.js index 767b40510..198777068 100644 --- a/apps/design-system/.storybook/preview.js +++ b/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$/, }, }, -} \ No newline at end of file +} diff --git a/apps/design-system/package.json b/apps/design-system/package.json index 46360c620..2c360e535 100644 --- a/apps/design-system/package.json +++ b/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" diff --git a/apps/design-system/src/components/ChipInput.stories.tsx b/apps/design-system/src/components/Form/ChipInput.stories.tsx similarity index 100% rename from apps/design-system/src/components/ChipInput.stories.tsx rename to apps/design-system/src/components/Form/ChipInput.stories.tsx diff --git a/apps/design-system/src/components/Form/Dropdown.stories.tsx b/apps/design-system/src/components/Form/Dropdown.stories.tsx new file mode 100644 index 000000000..f9aef4729 --- /dev/null +++ b/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 = { + 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 +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, + }, +} \ No newline at end of file diff --git a/apps/design-system/src/components/Form/Field.stories.tsx b/apps/design-system/src/components/Form/Field.stories.tsx new file mode 100644 index 000000000..4d3435ade --- /dev/null +++ b/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 = { + component: Field, + parameters: { + layout: "fullscreen", + backgrounds: { + default: "dark", + }, + }, +} +export default meta + +export const Default = () => ( +
+ + + +
+) + +export const NoLabel = () => ( +
+ + + +
+); +export const WithTooltip = () => ( +
+ + + +
+); diff --git a/apps/design-system/src/components/Form/Fieldset.stories.tsx b/apps/design-system/src/components/Form/Fieldset.stories.tsx new file mode 100644 index 000000000..ff68154d1 --- /dev/null +++ b/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 = { + component: Fieldset, + parameters: { + layout: "fullscreen", + backgrounds: { + default: "dark", + }, + }, +} +export default meta + +export const Default = () => ( +
+
+ {return}} /> +
+
+) diff --git a/apps/design-system/src/components/Form/Form.stories.tsx b/apps/design-system/src/components/Form/Form.stories.tsx new file mode 100644 index 000000000..24f189c8e --- /dev/null +++ b/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 = { + 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 = () => ( +
+ + + +
+); +export const Default = () => ( +
+
+ +