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/**
76 lines
1.6 KiB
TypeScript
76 lines
1.6 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
import { Select } from '../../src/ui/Select/Select';
|
|
|
|
const ENVIRONMENTS = [
|
|
{ value: 'dev', label: 'Development' },
|
|
{ value: 'staging', label: 'Staging' },
|
|
{ value: 'prod', label: 'Production' },
|
|
];
|
|
|
|
const SCENARIO_TYPES = [
|
|
{ value: 'smoke', label: 'Smoke test' },
|
|
{ value: 'regression', label: 'Regression' },
|
|
{ value: 'e2e', label: 'End-to-end' },
|
|
{ value: 'perf', label: 'Performance', disabled: true },
|
|
];
|
|
|
|
const meta: Meta<typeof Select> = {
|
|
title: 'UI/Select',
|
|
component: Select,
|
|
parameters: { layout: 'centered' },
|
|
tags: ['autodocs'],
|
|
decorators: [
|
|
(Story) => (
|
|
<div style={{ width: 320 }}>
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
};
|
|
export default meta;
|
|
type Story = StoryObj<typeof Select>;
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
label: 'Environment',
|
|
options: ENVIRONMENTS,
|
|
placeholder: 'Select an environment…',
|
|
},
|
|
};
|
|
|
|
export const WithValue: Story = {
|
|
args: {
|
|
label: 'Environment',
|
|
options: ENVIRONMENTS,
|
|
defaultValue: 'staging',
|
|
},
|
|
};
|
|
|
|
export const WithHint: Story = {
|
|
args: {
|
|
label: 'Test type',
|
|
options: SCENARIO_TYPES,
|
|
placeholder: 'Choose a type…',
|
|
hint: 'Performance tests require a dedicated runner.',
|
|
},
|
|
};
|
|
|
|
export const WithError: Story = {
|
|
args: {
|
|
label: 'Environment',
|
|
options: ENVIRONMENTS,
|
|
defaultValue: '',
|
|
placeholder: 'Select an environment…',
|
|
error: 'Please select an environment.',
|
|
},
|
|
};
|
|
|
|
export const Disabled: Story = {
|
|
args: {
|
|
label: 'Environment',
|
|
options: ENVIRONMENTS,
|
|
defaultValue: 'prod',
|
|
disabled: true,
|
|
},
|
|
};
|