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.
53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { Input, SearchInput } from './input';
|
|
import { Mail, Lock } from 'lucide-react';
|
|
|
|
const meta = {
|
|
title: 'UI/Input',
|
|
component: Input,
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
type: { control: 'select', options: ['text', 'password', 'email', 'number'] },
|
|
disabled: { control: 'boolean' },
|
|
label: { control: 'text' },
|
|
},
|
|
args: {
|
|
placeholder: 'Enter text...',
|
|
}
|
|
} satisfies Meta<typeof Input>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Default: Story = {};
|
|
|
|
export const WithLabel: Story = {
|
|
args: {
|
|
label: 'Email Address',
|
|
placeholder: 'name@example.com',
|
|
},
|
|
};
|
|
|
|
export const WithIcon: Story = {
|
|
args: {
|
|
label: 'Email',
|
|
icon: <Mail className="w-4 h-4" />,
|
|
placeholder: 'Email',
|
|
},
|
|
};
|
|
|
|
export const Password: Story = {
|
|
args: {
|
|
label: 'Password',
|
|
type: 'password',
|
|
icon: <Lock className="w-4 h-4" />,
|
|
placeholder: 'Password',
|
|
},
|
|
};
|
|
|
|
export const Search: Story = {
|
|
render: (args) => <SearchInput {...args} />,
|
|
args: {
|
|
placeholder: 'Search...',
|
|
},
|
|
};
|