91055ee07b
- Added stories for: Button, Avatar, Switch, Slider, Alert, Progress - Consolidated Button component to src/components/ui/button.tsx - Removed legacy src/components/Button.tsx
62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { Progress } from './progress';
|
|
|
|
const meta = {
|
|
title: 'UI/Progress',
|
|
component: Progress,
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
value: { control: { type: 'range', min: 0, max: 100 } },
|
|
max: { control: 'number' },
|
|
variant: {
|
|
control: 'select',
|
|
options: ['default', 'gaming'],
|
|
},
|
|
color: {
|
|
control: 'select',
|
|
options: ['cyan', 'magenta', 'lime', 'gold'],
|
|
},
|
|
labelLeft: { control: 'text' },
|
|
labelRight: { control: 'text' },
|
|
},
|
|
args: {
|
|
value: 50,
|
|
max: 100,
|
|
variant: 'default',
|
|
color: 'cyan',
|
|
}
|
|
} satisfies Meta<typeof Progress>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Default: Story = {};
|
|
|
|
export const WithLabels: Story = {
|
|
args: {
|
|
value: 75,
|
|
labelLeft: 'Loading...',
|
|
labelRight: '75%',
|
|
},
|
|
};
|
|
|
|
export const Colors = {
|
|
render: () => (
|
|
<div className="flex flex-col gap-4">
|
|
<Progress value={30} color="cyan" labelRight="Cyan" />
|
|
<Progress value={50} color="magenta" labelRight="Magenta" />
|
|
<Progress value={70} color="lime" labelRight="Lime" />
|
|
<Progress value={90} color="gold" labelRight="Gold" />
|
|
</div>
|
|
),
|
|
};
|
|
|
|
export const GamingVariant: Story = {
|
|
args: {
|
|
variant: 'gaming',
|
|
value: 85,
|
|
labelLeft: 'HP',
|
|
labelRight: '850/1000',
|
|
color: 'gold',
|
|
},
|
|
};
|