puppy-lib-components
Version:
A modern TypeScript React component library with generic UI components and football pickem domain components
101 lines (100 loc) • 3.21 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Input } from './Input';
const meta = {
title: 'Components/Input',
component: Input,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
type: {
control: { type: 'select' },
options: ['text', 'email', 'password', 'number', 'tel', 'url', 'search'],
},
size: {
control: { type: 'select' },
options: ['sm', 'md', 'lg'],
},
disabled: {
control: { type: 'boolean' },
},
required: {
control: { type: 'boolean' },
},
error: {
control: { type: 'boolean' },
},
},
};
export default meta;
export const Default = {
args: {
placeholder: 'Enter text...',
},
};
export const WithLabel = {
args: {
label: 'Email Address',
placeholder: 'Enter your email',
type: 'email',
},
};
export const WithHelperText = {
args: {
label: 'Password',
type: 'password',
placeholder: 'Enter your password',
helperText: 'Password must be at least 8 characters long',
},
};
export const WithError = {
args: {
label: 'Email Address',
type: 'email',
placeholder: 'Enter your email',
error: true,
errorMessage: 'Please enter a valid email address',
},
};
export const Required = {
args: {
label: 'Full Name',
placeholder: 'Enter your full name',
required: true,
},
};
export const Disabled = {
args: {
label: 'Disabled Input',
placeholder: 'This input is disabled',
disabled: true,
},
};
export const Small = {
args: {
label: 'Small Input',
placeholder: 'Small size',
size: 'sm',
},
};
export const Medium = {
args: {
label: 'Medium Input',
placeholder: 'Medium size',
size: 'md',
},
};
export const Large = {
args: {
label: 'Large Input',
placeholder: 'Large size',
size: 'lg',
},
};
export const AllTypes = {
render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem', width: '300px' }, children: [_jsx(Input, { label: "Text", type: "text", placeholder: "Text input" }), _jsx(Input, { label: "Email", type: "email", placeholder: "Email input" }), _jsx(Input, { label: "Password", type: "password", placeholder: "Password input" }), _jsx(Input, { label: "Number", type: "number", placeholder: "Number input" }), _jsx(Input, { label: "Phone", type: "tel", placeholder: "Phone input" }), _jsx(Input, { label: "URL", type: "url", placeholder: "URL input" }), _jsx(Input, { label: "Search", type: "search", placeholder: "Search input" })] })),
};
export const AllSizes = {
render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem', width: '300px' }, children: [_jsx(Input, { label: "Small", size: "sm", placeholder: "Small input" }), _jsx(Input, { label: "Medium", size: "md", placeholder: "Medium input" }), _jsx(Input, { label: "Large", size: "lg", placeholder: "Large input" })] })),
};