ad60247f33
- Web: Setup Storybook, added addons, configured Tailwind, added stories for UI components. - Backend: Updated API router, database, workers, and auth in common. - Stream Server: Removed SQLx queries and updated auth. - Docs & Scripts: Updated documentation and recovery scripts.
60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { Badge } from './badge';
|
|
import { Star } from 'lucide-react';
|
|
|
|
const meta = {
|
|
title: 'UI/Badge',
|
|
component: Badge,
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
variant: {
|
|
control: 'select',
|
|
options: ['cyan', 'magenta', 'lime', 'gold', 'terminal'],
|
|
},
|
|
size: {
|
|
control: 'select',
|
|
options: ['sm', 'md', 'lg'],
|
|
},
|
|
dot: { control: 'boolean' },
|
|
count: { control: 'number' },
|
|
label: { control: 'text' },
|
|
},
|
|
args: {
|
|
label: 'Badge',
|
|
variant: 'cyan',
|
|
size: 'md',
|
|
}
|
|
} satisfies Meta<typeof Badge>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Default: Story = {};
|
|
|
|
export const Variants = {
|
|
render: () => (
|
|
<div className="flex gap-2">
|
|
<Badge variant="cyan" label="Cyan" />
|
|
<Badge variant="magenta" label="Magenta" />
|
|
<Badge variant="lime" label="Lime" />
|
|
<Badge variant="gold" label="Gold" />
|
|
<Badge variant="terminal" label="Terminal" />
|
|
</div>
|
|
),
|
|
};
|
|
|
|
export const WithIcon: Story = {
|
|
args: {
|
|
icon: <Star className="w-3 h-3" />,
|
|
label: 'Premium',
|
|
variant: 'gold',
|
|
},
|
|
};
|
|
|
|
export const WithCount: Story = {
|
|
args: {
|
|
label: 'Notifications',
|
|
count: 5,
|
|
variant: 'magenta',
|
|
},
|
|
};
|