ars9
32beec2229
- add Timestamp component with moment relative time and ISO tooltip - add Timestamp stories (JustNow, MinutesAgo, HoursAgo, DaysAgo, MonthsAgo) - add ESLint 10 with typescript-eslint, react-hooks, react-refresh, prettier - add Prettier config with singleQuote, semi, trailingComma all, printWidth 100 - add lint, lint:fix, format, test:storybook scripts to package.json - fix react-hooks/set-state-in-effect in all page components - auto-fix 113 Prettier formatting issues across src and .storybook
76 lines
1.9 KiB
TypeScript
76 lines
1.9 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 />,
|
|
},
|
|
};
|