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,59 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SidePanel } from '../../src/ui/SidePanel/SidePanel';
+
+const NAV_ITEMS = ['Dashboard', 'Scenarios', 'Environments', 'Reports', 'Settings'];
+
+function NavList() {
+  return (
+    <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
+      {NAV_ITEMS.map((item) => (
+        <li key={item}>
+          <button
+            style={{
+              width: '100%',
+              textAlign: 'left',
+              background: 'none',
+              border: 'none',
+              borderRadius: 'var(--radius-md)',
+              padding: 'var(--space-2) var(--space-3)',
+              fontSize: 'var(--font-size-sm)',
+              color: 'var(--color-text)',
+              cursor: 'pointer',
+              fontFamily: 'var(--font-family)',
+            }}
+            onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--color-secondary)')}
+            onMouseLeave={(e) => (e.currentTarget.style.background = 'none')}
+          >
+            {item}
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+const meta: Meta<typeof SidePanel> = {
+  title: 'UI/SidePanel',
+  component: SidePanel,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', height: 420, background: 'var(--color-bg)' }}>
+        <Story />
+        <div style={{ flex: 1, padding: 'var(--space-6)', color: 'var(--color-text-muted)', fontSize: 'var(--font-size-sm)' }}>
+          Main content area
+        </div>
+      </div>
+    ),
+  ],
+};
+export default meta;
+type Story = StoryObj<typeof SidePanel>;
+
+export const Default: Story = {
+  args: {
+    header: 'Navigation',
+    children: <NavList />,
+  },
+};