- 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/**
41 lines
973 B
TypeScript
41 lines
973 B
TypeScript
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
import { Input } from '../../src/ui/Input/Input';
|
|
|
|
const meta: Meta<typeof Input> = {
|
|
title: 'UI/Input',
|
|
component: Input,
|
|
parameters: { layout: 'centered' },
|
|
tags: ['autodocs'],
|
|
decorators: [
|
|
(Story) => (
|
|
<div style={{ width: 320 }}>
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
};
|
|
export default meta;
|
|
type Story = StoryObj<typeof Input>;
|
|
|
|
export const Default: Story = {
|
|
args: { label: 'Label', placeholder: 'Placeholder' },
|
|
};
|
|
export const WithHint: Story = {
|
|
args: {
|
|
label: 'Environment name',
|
|
placeholder: 'e.g. staging',
|
|
hint: 'Used to identify this environment in scenarios.',
|
|
},
|
|
};
|
|
export const WithError: Story = {
|
|
args: {
|
|
label: 'URL',
|
|
placeholder: 'https://...',
|
|
defaultValue: 'not a url',
|
|
error: 'Must be a valid URL.',
|
|
},
|
|
};
|
|
export const Disabled: Story = {
|
|
args: { label: 'Label', value: 'Some value', disabled: true, readOnly: true },
|
|
};
|