design system token v0.1

stories/Primitives/Input.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+const meta = {
+  title: 'Primitives/Input',
+  component: Input,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url', 'file'],
+    },
+    disabled: { control: 'boolean' },
+    placeholder: { control: 'text' },
+  },
+} satisfies Meta<typeof Input>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+    type: 'text',
+  },
+}
+
+export const Email: Story = {
+  args: {
+    type: 'email',
+    placeholder: 'email@example.com',
+  },
+}
+
+export const Password: Story = {
+  args: {
+    type: 'password',
+    placeholder: 'Enter password...',
+  },
+}
+
+export const File: Story = {
+  args: {
+    type: 'file',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Disabled input',
+    disabled: true,
+  },
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm gap-2">
+      <Label htmlFor="with-label-input">Email</Label>
+      <Input id="with-label-input" type="email" placeholder="email@example.com" />
+    </div>
+  ),
+}
+
+export const ErrorState: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm gap-2">
+      <Label htmlFor="error-input">Email</Label>
+      <Input
+        id="error-input"
+        type="email"
+        placeholder="email@example.com"
+        aria-invalid="true"
+        defaultValue="invalid-email"
+      />
+      <p className="text-sm text-destructive">Please enter a valid email address.</p>
+    </div>
+  ),
+}
+
+export const WithDefaultValue: Story = {
+  args: {
+    type: 'text',
+    defaultValue: 'Hello world',
+  },
+}