feat: storybook

2026-05-31 17:11:42 +03:00
parent 2f937e94b1
commit 67993ae3ec
17 changed files with 764 additions and 0 deletions
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import { Gear, Plus, Trash } from '@phosphor-icons/react';
+import { IconButton } from '../components/ui';
+
+const meta = {
+  title: 'Inputs/IconButton',
+  component: IconButton,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Square button for a single icon. Shares the Button variants; sizes are `sm` / default / `lg`.',
+      },
+    },
+  },
+  argTypes: {
+    variant: { control: 'inline-radio', options: ['key', 'primary', 'ember', 'ghost'] },
+    size: { control: 'inline-radio', options: ['sm', undefined, 'lg'] },
+  },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: { variant: 'key', children: <Gear size={18} /> },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <IconButton variant="key" aria-label="settings"><Gear size={18} /></IconButton>
+      <IconButton variant="primary" aria-label="add"><Plus size={18} weight="bold" /></IconButton>
+      <IconButton variant="ember" aria-label="delete"><Trash size={18} /></IconButton>
+      <IconButton variant="ghost" aria-label="settings"><Gear size={18} /></IconButton>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+      <IconButton size="sm" variant="primary" aria-label="add"><Plus size={14} weight="bold" /></IconButton>
+      <IconButton variant="primary" aria-label="add"><Plus size={18} weight="bold" /></IconButton>
+      <IconButton size="lg" variant="primary" aria-label="add"><Plus size={22} weight="bold" /></IconButton>
+    </div>
+  ),
+};