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/**
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
import { Card } from '../../src/ui/Card/Card';
|
|
import { Badge } from '../../src/ui/Badge/Badge';
|
|
import { Button } from '../../src/ui/Button/Button';
|
|
|
|
const meta: Meta<typeof Card> = {
|
|
title: 'UI/Card',
|
|
component: Card,
|
|
parameters: { layout: 'centered' },
|
|
tags: ['autodocs'],
|
|
decorators: [
|
|
(Story) => (
|
|
<div style={{ width: 360 }}>
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
argTypes: {
|
|
padding: { control: 'select', options: ['sm', 'md', 'lg'] },
|
|
},
|
|
};
|
|
export default meta;
|
|
type Story = StoryObj<typeof Card>;
|
|
|
|
export const Default: Story = {
|
|
args: { children: 'Card content goes here.', padding: 'md' },
|
|
};
|
|
|
|
export const ScenarioCard: Story = {
|
|
render: () => (
|
|
<Card>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
|
|
<span style={{ fontWeight: 600, fontSize: 14 }}>Login flow</span>
|
|
<Badge variant="success" dot>Passed</Badge>
|
|
</div>
|
|
<p style={{ margin: '0 0 16px', fontSize: 13, color: 'var(--color-text-muted)' }}>
|
|
Last run 2 minutes ago · 4 steps
|
|
</p>
|
|
<div style={{ display: 'flex', gap: 8 }}>
|
|
<Button size="sm" variant="primary">Run</Button>
|
|
<Button size="sm" variant="ghost">Edit</Button>
|
|
</div>
|
|
</Card>
|
|
),
|
|
};
|