49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import type { Meta, StoryObj } from 'storybook-react-rsbuild';
|
|
import { MagnifyingGlass } from '@phosphor-icons/react';
|
|
import { TextField, TextArea, SearchField } from '../components/ui';
|
|
|
|
const meta = {
|
|
title: 'Inputs/TextField',
|
|
component: TextField,
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'Sunken text input. `TextField`, `TextArea`, and `SearchField` (icon + input) share the `modern-sk-field` look and forward all native props.',
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
placeholder: { control: 'text' },
|
|
value: { control: 'text' },
|
|
defaultValue: { control: 'text' },
|
|
disabled: { control: 'boolean' },
|
|
readOnly: { control: 'boolean' },
|
|
required: { control: 'boolean' },
|
|
type: { control: 'text' },
|
|
onChange: { action: 'changed' },
|
|
},
|
|
args: { placeholder: 'Type here…' },
|
|
} satisfies Meta<typeof TextField>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Playground: Story = {};
|
|
|
|
export const Disabled: Story = { args: { disabled: true, value: 'Read only' } };
|
|
|
|
export const Multiline: Story = {
|
|
render: () => <TextArea rows={4} placeholder="Multiple lines…" style={{ width: 320 }} />,
|
|
};
|
|
|
|
export const Search: Story = {
|
|
render: () => (
|
|
<SearchField
|
|
icon={<MagnifyingGlass size={16} />}
|
|
placeholder="Search…"
|
|
style={{ width: 280 }}
|
|
/>
|
|
),
|
|
};
|