add TextInput

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

@@ -23,3 +23,35 @@ export const Default: Story = {
     backgrounds: { default: 'light' },
   },
 }
+
+export const Resizable: Story = {
+  args: {
+    ...Default.args,
+    isResizable: true,
+  },
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+};
+
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    isDisabled: true,
+  },
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+};
+
+export const RowsLimit: Story = {
+  args: {
+    ...Default.args,
+    rows: 3,
+  },
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+};
+

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

@@ -0,0 +1,73 @@
+import { StoryObj, Meta } from '@storybook/react'
+
+import { TextInput } from '@asyncapi/studio-ui'
+
+const meta: Meta<typeof TextInput> = {
+  component: TextInput,
+}
+
+export default meta
+type Story = StoryObj<typeof TextInput>
+
+export const Default: Story = {
+  args: {
+    placeholder: "Enter some text....",
+  },
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+}
+
+
+export const WithInitialValue: Story = {
+  args: {
+    ...Default.args,
+    value: 'Initial Value',
+  },
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+};
+
+export const Numeric: Story = {
+  args: {
+    ...Default.args,
+    type: 'number',
+  },
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+};
+
+
+export const Email: Story = {
+  args: {
+    ...Default.args,
+    type: 'email',
+  },
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+};
+
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    isDisabled: true,
+  },
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+};
+
+
+export const WithCustomClassName: Story = {
+  args: {
+    ...Default.args,
+    className: 'w-full',
+  },
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+};

apps/design-system/src/styles/tailwind.output.css

@@ -16,7 +16,7 @@
   /* 2 */
   border-style: solid;
   /* 2 */
-  border-color: #e5e7eb;
+  border-color: #e2e8f0;
   /* 2 */
 }
 
@@ -42,7 +42,7 @@ html {
   /* 3 */
   tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   -webkit-font-feature-settings: normal;
           font-feature-settings: normal;
@@ -369,15 +369,15 @@ textarea {
 input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
   opacity: 1;
   /* 1 */
-  color: #9ca3af;
+  color: #94a3b8;
   /* 2 */
 }
 
 input::placeholder,
 textarea::placeholder {
   opacity: 1;
   /* 1 */
-  color: #9ca3af;
+  color: #94a3b8;
   /* 2 */
 }
 
@@ -583,71 +583,3 @@ 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;
-}
-
-.grow {
-  flex-grow: 1;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.gap-3 {
-  gap: 0.75rem;
-}
-
-.rounded {
-  border-radius: 0.25rem;
-}
-
-.bg-gray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / 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(107 114 128 / var(--tw-text-opacity));
-}
-
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}

apps/design-system/tailwind.config.js

@@ -1,8 +1,6 @@
-/** @type {import('tailwindcss').Config} */
+const sharedConfig = require('tailwind-config/tailwind.config.js');
+
 module.exports = {
-  content: ["./src/**/*.tsx"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
+  content: ['./components/**/*.tsx'],
+  presets: [sharedConfig],
+};

packages/ui/components/Form/Inputs/TextArea.tsx

@@ -17,7 +17,7 @@ export const TextArea = ({onChange, rows, name, value, isDisabled, isResizable,
     disabled={isDisabled}
     placeholder={placeholder}
     rows={rows}
-    className={`bg-gray-900 rounded-md appearance-none placeholder-gray-500 placeholder:italic outline-none text-sm leading-5 text-gray-400 ${
+    className={`bg-gray-900 appearance-none placeholder-gray-500 placeholder:italic outline-none text-sm leading-5 text-gray-400 ${
       className
     } ${isDisabled && 'opacity-50'} ${!isResizable && 'resize-none'}`}
   />

packages/ui/components/Form/Inputs/Input.tsx → packages/ui/components/Form/Inputs/TextInput.tsx

@@ -1,15 +1,14 @@
 
-export type InputProps = {
+export type TextInputProps = {
   placeholder: string
-  type?: 'text' | 'url'
+  type?: 'text' | 'number' | 'email'
   value?: string
-  onClear?: () => void
   onChange?: () => void
   isDisabled?: boolean
   className?: string
 }
 
-export const Input = (props: InputProps) => {
+export const TextInput = (props: TextInputProps) => {
   return (
     <input
       {...props}
@@ -20,3 +19,4 @@ export const Input = (props: InputProps) => {
     />
   )
 }
+

packages/ui/components/Form/Inputs/index.ts

@@ -1,2 +1,3 @@
-export * from './Input'
+export * from './TextInput'
+export * from './TextArea'
 export * from './SelectDropdown'

packages/ui/components/Form/Labels/index.ts

@@ -1,3 +1 @@
 export * from './Label'
-export * from './Description'
-export * from './DescriptionWithLabel'