feat: storybook

src/stories/TextField.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import { MagnifyingGlass } from '@phosphor-icons/react';
+import { TextField, TextArea, SearchField } from '../components/ui';
+
+const meta = {
+  title: 'Inputs/TextField',
+  component: TextField,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Sunken text input. `TextField`, `TextArea`, and `SearchField` (icon + input) share the `modern-sk-field` look and forward all native props.',
+      },
+    },
+  },
+  args: { placeholder: 'Type here…' },
+} satisfies Meta<typeof TextField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const Disabled: Story = { args: { disabled: true, value: 'Read only' } };
+
+export const Multiline: Story = {
+  render: () => <TextArea rows={4} placeholder="Multiple lines…" style={{ width: 320 }} />,
+};
+
+export const Search: Story = {
+  render: () => (
+    <SearchField
+      icon={<MagnifyingGlass size={16} />}
+      placeholder="Search…"
+      style={{ width: 280 }}
+    />
+  ),
+};