final touches

asyncapi · Oct 10, 2023 · 8e54b93 · 8e54b93
1 parent 4791ae3
commit 8e54b93
Show file tree

Hide file tree

Showing 10 changed files with 11,647 additions and 10,556 deletions.
diff --git a/apps/design-system/package.json b/apps/design-system/package.json
@@ -9,7 +9,6 @@
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
     "@tippyjs/react": "^4.2.6",
-    "concurrently": "^8.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
@@ -46,6 +45,7 @@
     ]
   },
   "devDependencies": {
+    "concurrently": "^8.2.1",
     "@babel/core": "^7.17.4",
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",

diff --git a/apps/design-system/src/components/Form.stories.tsx b/apps/design-system/src/components/Form.stories.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import type { Meta } from "@storybook/react"
 import {
   TextArea,
@@ -9,6 +10,7 @@ import {
   TextInput,
   Label,
   SelectDropdown,
+  ChipInput,
 } from "@asyncapi/studio-ui"
 import { AddIcon, TrashIcon } from "@asyncapi/studio-ui/icons"
 
@@ -33,6 +35,7 @@ const singleSelectOptions = [
   { label: "Pulsar", value: "pulsar" },
 ]
 export const Default = () => (
+  <>
   <Form
     title="User Registration"
     summary="Type a short summary description..."
@@ -87,7 +90,9 @@ export const Default = () => (
       <IconButton text="Add Security Requirements" icon={AddIcon} />
     </FormSection>
     <FormSection title="Tags">
-      <div></div>
+      <div>
+        <ChipInput name={''} id={''} chips={["production", "platform"]} onChange={()=> {return}} />
+      </div>
     </FormSection>
     <FormSection title="External Documentation">
       <Field name="url" label="URL">
@@ -98,4 +103,5 @@ export const Default = () => (
       </Field>
     </FormSection>
   </Form>
+  </>
 )
diff --git a/apps/design-system/src/styles/tailwind.output.css b/apps/design-system/src/styles/tailwind.output.css
@@ -618,6 +618,10 @@ video {
   flex-direction: column;
 }
 
+.items-center {
+  align-items: center;
+}
+
 .gap-3 {
   gap: 0.75rem;
 }
@@ -630,6 +634,11 @@ video {
   border-radius: 0.25rem;
 }
 
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
+}
+
 .bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(15 23 42 / var(--tw-bg-opacity));
@@ -640,6 +649,10 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;