dify

dify/web/app/components/base/chip/index.stories.tsx

@@ -0,0 +1,99 @@
+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(),
+      },
+    },
+  },
+}