100 lines
2.3 KiB
TypeScript
100 lines
2.3 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/nextjs'
|
|
import { useState } from 'react'
|
|
import Chip, { type Item } from '.'
|
|
|
|
const ITEMS: Item[] = [
|
|
{ value: 'all', name: 'All items' },
|
|
{ value: 'active', name: 'Active' },
|
|
{ value: 'archived', name: 'Archived' },
|
|
{ value: 'draft', name: 'Drafts' },
|
|
]
|
|
|
|
const meta = {
|
|
title: 'Base/Data Entry/Chip',
|
|
component: Chip,
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: 'Filter chip with dropdown panel and optional left icon. Commonly used for status pickers in toolbars.',
|
|
},
|
|
},
|
|
},
|
|
tags: ['autodocs'],
|
|
args: {
|
|
items: ITEMS,
|
|
value: 'all',
|
|
// eslint-disable-next-line no-empty-function
|
|
onSelect: () => {},
|
|
// eslint-disable-next-line no-empty-function
|
|
onClear: () => {},
|
|
},
|
|
} satisfies Meta<typeof Chip>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
const ChipDemo = (props: React.ComponentProps<typeof Chip>) => {
|
|
const [selection, setSelection] = useState(props.value)
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<Chip
|
|
{...props}
|
|
value={selection}
|
|
onSelect={item => setSelection(item.value)}
|
|
onClear={() => setSelection('all')}
|
|
/>
|
|
<div className="rounded-lg border border-divider-subtle bg-components-panel-bg p-3 text-xs text-text-secondary">
|
|
Current value: <span className="font-mono text-text-primary">{selection}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const Playground: Story = {
|
|
render: args => <ChipDemo {...args} />,
|
|
parameters: {
|
|
docs: {
|
|
source: {
|
|
language: 'tsx',
|
|
code: `
|
|
const [selection, setSelection] = useState('all')
|
|
|
|
<Chip
|
|
items={items}
|
|
value={selection}
|
|
onSelect={item => setSelection(item.value)}
|
|
onClear={() => setSelection('all')}
|
|
/>
|
|
`.trim(),
|
|
},
|
|
},
|
|
},
|
|
}
|
|
|
|
export const WithoutLeftIcon: Story = {
|
|
args: {
|
|
showLeftIcon: false,
|
|
// eslint-disable-next-line no-empty-function
|
|
onSelect: () => {},
|
|
// eslint-disable-next-line no-empty-function
|
|
onClear: () => {},
|
|
},
|
|
render: args => (
|
|
<ChipDemo
|
|
{...args}
|
|
showLeftIcon={false}
|
|
/>
|
|
),
|
|
parameters: {
|
|
docs: {
|
|
source: {
|
|
language: 'tsx',
|
|
code: `
|
|
<Chip showLeftIcon={false} ... />
|
|
`.trim(),
|
|
},
|
|
},
|
|
},
|
|
}
|