veza/apps/web/src/components/ui/Input.stories.tsx

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...',
    },
};