ars9
aefa1db2bd
- 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/**
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
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 />,
|
|
},
|
|
};
|