feat(client): add ThemeSwitcher and relocate stories to .storybook/

- add lucide-react for Sun/Moon icons - add useTheme hook persisting choice to localStorage with prefers-color-scheme fallback - add ThemeSwitcher button component wired into SidePanel header - add blocking inline script to index.html to prevent flash-of-wrong-theme - move all *.stories.tsx from src/ into .storybook/stories/ and update imports - update main.ts stories glob to .storybook/stories/**
2026-04-09 09:56:59 +03:00
parent 9916ef5aaf
commit aefa1db2bd
20 changed files with 134 additions and 43 deletions
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Table } from '../../src/ui/Table/Table';
+import { Badge } from '../../src/ui/Badge/Badge';
+
+const meta: Meta<typeof Table> = {
+  title: 'UI/Table',
+  component: Table,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+};
+export default meta;
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  status: 'active' | 'inactive';
+}
+
+const users: User[] = [
+  { id: 1, name: 'Alice Müller',  email: 'alice@example.com',  status: 'active' },
+  { id: 2, name: 'Bob Nguyen',    email: 'bob@example.com',    status: 'inactive' },
+  { id: 3, name: 'Carol Santos',  email: 'carol@example.com',  status: 'active' },
+];
+
+export const Default: StoryObj<typeof Table<User>> = {
+  args: {
+    data: users,
+    rowKey: (u) => u.id,
+    emptyMessage: 'No users found.',
+    columns: [
+      { key: 'id',     header: 'ID',     render: (u) => u.id,    width: 60 },
+      { key: 'name',   header: 'Name',   render: (u) => u.name },
+      { key: 'email',  header: 'Email',  render: (u) => u.email },
+      {
+        key: 'status',
+        header: 'Status',
+        width: 110,
+        render: (u) => (
+          <Badge variant={u.status === 'active' ? 'success' : 'neutral'}>
+            {u.status}
+          </Badge>
+        ),
+      },
+    ],
+  },
+};
+
+export const Loading: StoryObj<typeof Table<User>> = {
+  args: {
+    ...Default.args,
+    loading: true,
+  },
+};
+
+export const Empty: StoryObj<typeof Table<User>> = {
+  args: {
+    ...Default.args,
+    data: [],
+    emptyMessage: 'No users found.',
+  },
+};
+
+export const SingleRow: StoryObj<typeof Table<User>> = {
+  args: {
+    ...Default.args,
+    data: [users[0]],
+  },
+};