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,77 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import { Info, CheckCircle, Warning, XCircle } from '@phosphor-icons/react';
+import { Progress, Spinner, Callout, Badge, Chip, Button } from '../components/ui';
+
+const meta = {
+  title: 'Feedback/Status',
+  component: Progress,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Progress bar, spinner, callouts, badges and chips — the status + signalling family.',
+      },
+    },
+  },
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function ProgressDemo() {
+  const [v, setV] = useState(40);
+  return (
+    <div style={{ width: 320, display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Progress value={v} />
+      <div style={{ display: 'flex', gap: 8 }}>
+        <Button size="sm" onClick={() => setV((x) => Math.max(0, x - 10))}>−10</Button>
+        <Button size="sm" variant="primary" onClick={() => setV((x) => Math.min(100, x + 10))}>+10</Button>
+      </div>
+    </div>
+  );
+}
+
+export const ProgressBar: Story = { render: () => <ProgressDemo /> };
+
+export const Spinners: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+      <Spinner size="sm" />
+      <Spinner />
+      <Spinner size="lg" />
+    </div>
+  ),
+};
+
+export const Callouts: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 460 }}>
+      <Callout variant="info" icon={<Info size={18} />}>Sync runs in the background.</Callout>
+      <Callout variant="success" icon={<CheckCircle size={18} />}>All changes saved.</Callout>
+      <Callout variant="warning" icon={<Warning size={18} />}>Storage is almost full.</Callout>
+      <Callout variant="danger" icon={<XCircle size={18} />}>Failed to reach the server.</Callout>
+    </div>
+  ),
+};
+
+export const Badges: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
+      <Badge variant="lime">Lime</Badge>
+      <Badge variant="ember">Ember</Badge>
+      <Badge variant="neutral">Neutral</Badge>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="lime" dot>Online</Badge>
+    </div>
+  ),
+};
+
+export const Chips: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
+      <Chip>Design</Chip>
+      <Chip onRemove={() => {}}>Removable</Chip>
+    </div>
+  ),
+};