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/**
70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
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]],
|
|
},
|
|
};
|