61 lines
1.0 KiB
TypeScript
61 lines
1.0 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
|
|
import { Input } from './Input'
|
|
import { TextField } from 'react-aria-components'
|
|
|
|
const meta: Meta<typeof Input> = {
|
|
title: 'Components/Input',
|
|
component: ({ isInvalid, ...props }) => (
|
|
<TextField isInvalid={isInvalid}>
|
|
<Input {...props} />
|
|
</TextField>
|
|
),
|
|
argTypes: {},
|
|
}
|
|
|
|
export default meta
|
|
|
|
type Story = StoryObj<typeof Input>
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
label: 'Label',
|
|
name: 'foo',
|
|
required: false,
|
|
},
|
|
}
|
|
|
|
export const Filled: Story = {
|
|
args: {
|
|
label: 'Label',
|
|
name: 'foo',
|
|
value: 'Value',
|
|
},
|
|
}
|
|
|
|
export const Error: Story = {
|
|
args: {
|
|
label: 'Label',
|
|
name: 'foo',
|
|
// @ts-expect-error Input does not support this, but wrapping <TextField> does
|
|
isInvalid: true,
|
|
},
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
args: {
|
|
label: 'Label',
|
|
name: 'foo',
|
|
disabled: true,
|
|
},
|
|
}
|
|
|
|
export const DisabledFilled: Story = {
|
|
args: {
|
|
label: 'Label',
|
|
name: 'foo',
|
|
disabled: true,
|
|
value: 'Value',
|
|
},
|
|
}
|