78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import { useState } from 'react';
|
||
import type { Meta, StoryObj } from 'storybook-react-rsbuild';
|
||
import { Info, CheckCircle, Warning, XCircle } from '@phosphor-icons/react';
|
||
import { Progress, Spinner, Callout, Badge, Chip, Button } from '../components/ui';
|
||
|
||
const meta = {
|
||
title: 'Feedback/Status',
|
||
component: Progress,
|
||
parameters: {
|
||
docs: {
|
||
description: {
|
||
component:
|
||
'Progress bar, spinner, callouts, badges and chips — the status + signalling family.',
|
||
},
|
||
},
|
||
},
|
||
} satisfies Meta<typeof Progress>;
|
||
|
||
export default meta;
|
||
type Story = StoryObj<typeof meta>;
|
||
|
||
function ProgressDemo() {
|
||
const [v, setV] = useState(40);
|
||
return (
|
||
<div style={{ width: 320, display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||
<Progress value={v} />
|
||
<div style={{ display: 'flex', gap: 8 }}>
|
||
<Button size="sm" onClick={() => setV((x) => Math.max(0, x - 10))}>−10</Button>
|
||
<Button size="sm" variant="primary" onClick={() => setV((x) => Math.min(100, x + 10))}>+10</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export const ProgressBar: Story = { render: () => <ProgressDemo /> };
|
||
|
||
export const Spinners: Story = {
|
||
render: () => (
|
||
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
||
<Spinner size="sm" />
|
||
<Spinner />
|
||
<Spinner size="lg" />
|
||
</div>
|
||
),
|
||
};
|
||
|
||
export const Callouts: Story = {
|
||
render: () => (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 460 }}>
|
||
<Callout variant="info" icon={<Info size={18} />}>Sync runs in the background.</Callout>
|
||
<Callout variant="success" icon={<CheckCircle size={18} />}>All changes saved.</Callout>
|
||
<Callout variant="warning" icon={<Warning size={18} />}>Storage is almost full.</Callout>
|
||
<Callout variant="danger" icon={<XCircle size={18} />}>Failed to reach the server.</Callout>
|
||
</div>
|
||
),
|
||
};
|
||
|
||
export const Badges: Story = {
|
||
render: () => (
|
||
<div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
|
||
<Badge variant="lime">Lime</Badge>
|
||
<Badge variant="ember">Ember</Badge>
|
||
<Badge variant="neutral">Neutral</Badge>
|
||
<Badge variant="outline">Outline</Badge>
|
||
<Badge variant="lime" dot>Online</Badge>
|
||
</div>
|
||
),
|
||
};
|
||
|
||
export const Chips: Story = {
|
||
render: () => (
|
||
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
|
||
<Chip>Design</Chip>
|
||
<Chip onRemove={() => {}}>Removable</Chip>
|
||
</div>
|
||
),
|
||
};
|