mirror of https://github.com/langgenius/dify.git
fix(storybook): add required handler props and fix TypeScript errors in component stories (#27187)
This commit is contained in:
parent
82219c1162
commit
c327cfa86e
|
|
@ -1,9 +1,5 @@
|
||||||
import type { StorybookConfig } from '@storybook/nextjs'
|
import type { StorybookConfig } from '@storybook/nextjs'
|
||||||
import path from 'node:path'
|
import path from 'node:path'
|
||||||
import { fileURLToPath } from 'node:url'
|
|
||||||
|
|
||||||
const __filename = fileURLToPath(import.meta.url)
|
|
||||||
const __dirname = path.dirname(__filename)
|
|
||||||
|
|
||||||
const config: StorybookConfig = {
|
const config: StorybookConfig = {
|
||||||
stories: ['../app/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
stories: ['../app/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,10 @@ const meta = {
|
||||||
control: 'text',
|
control: 'text',
|
||||||
description: 'Textarea value',
|
description: 'Textarea value',
|
||||||
},
|
},
|
||||||
|
onChange: {
|
||||||
|
action: 'changed',
|
||||||
|
description: 'Change handler',
|
||||||
|
},
|
||||||
minHeight: {
|
minHeight: {
|
||||||
control: 'number',
|
control: 'number',
|
||||||
description: 'Minimum height in pixels',
|
description: 'Minimum height in pixels',
|
||||||
|
|
@ -44,6 +48,11 @@ const meta = {
|
||||||
description: 'Wrapper CSS classes',
|
description: 'Wrapper CSS classes',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
args: {
|
||||||
|
onChange: (e) => {
|
||||||
|
console.log('Text changed:', e.target.value)
|
||||||
|
},
|
||||||
|
},
|
||||||
} satisfies Meta<typeof AutoHeightTextarea>
|
} satisfies Meta<typeof AutoHeightTextarea>
|
||||||
|
|
||||||
export default meta
|
export default meta
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import type { Meta, StoryObj } from '@storybook/nextjs'
|
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||||||
|
import { WorkflowRunningStatus } from '@/app/components/workflow/types'
|
||||||
import type { ChatItem } from '../../types'
|
import type { ChatItem } from '../../types'
|
||||||
import { markdownContent } from './__mocks__/markdownContent'
|
import { markdownContent } from './__mocks__/markdownContent'
|
||||||
import { markdownContentSVG } from './__mocks__/markdownContentSVG'
|
import { markdownContentSVG } from './__mocks__/markdownContentSVG'
|
||||||
|
|
@ -33,7 +34,7 @@ const mockedBaseChatItem = {
|
||||||
} satisfies ChatItem
|
} satisfies ChatItem
|
||||||
|
|
||||||
const mockedWorkflowProcess = {
|
const mockedWorkflowProcess = {
|
||||||
status: 'succeeded',
|
status: WorkflowRunningStatus.Succeeded,
|
||||||
tracing: [],
|
tracing: [],
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -62,6 +62,14 @@ const meta = {
|
||||||
description: 'Whether clicking mask closes dialog',
|
description: 'Whether clicking mask closes dialog',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
args: {
|
||||||
|
onConfirm: () => {
|
||||||
|
console.log('✅ User clicked confirm')
|
||||||
|
},
|
||||||
|
onCancel: () => {
|
||||||
|
console.log('❌ User clicked cancel')
|
||||||
|
},
|
||||||
|
},
|
||||||
} satisfies Meta<typeof Confirm>
|
} satisfies Meta<typeof Confirm>
|
||||||
|
|
||||||
export default meta
|
export default meta
|
||||||
|
|
@ -99,6 +107,7 @@ export const WarningDialog: Story = {
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
title: 'Delete Confirmation',
|
title: 'Delete Confirmation',
|
||||||
content: 'Are you sure you want to delete this project? This action cannot be undone.',
|
content: 'Are you sure you want to delete this project? This action cannot be undone.',
|
||||||
|
isShow: false,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -109,6 +118,7 @@ export const InfoDialog: Story = {
|
||||||
type: 'info',
|
type: 'info',
|
||||||
title: 'Notice',
|
title: 'Notice',
|
||||||
content: 'Your changes have been saved. Do you want to proceed to the next step?',
|
content: 'Your changes have been saved. Do you want to proceed to the next step?',
|
||||||
|
isShow: false,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -121,6 +131,7 @@ export const CustomButtonText: Story = {
|
||||||
content: 'You have unsaved changes. Are you sure you want to exit?',
|
content: 'You have unsaved changes. Are you sure you want to exit?',
|
||||||
confirmText: 'Discard Changes',
|
confirmText: 'Discard Changes',
|
||||||
cancelText: 'Continue Editing',
|
cancelText: 'Continue Editing',
|
||||||
|
isShow: false,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -132,6 +143,7 @@ export const LoadingState: Story = {
|
||||||
title: 'Deleting...',
|
title: 'Deleting...',
|
||||||
content: 'Please wait while we delete the file...',
|
content: 'Please wait while we delete the file...',
|
||||||
isLoading: true,
|
isLoading: true,
|
||||||
|
isShow: false,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -143,6 +155,7 @@ export const DisabledState: Story = {
|
||||||
title: 'Verification Required',
|
title: 'Verification Required',
|
||||||
content: 'Please complete email verification before proceeding.',
|
content: 'Please complete email verification before proceeding.',
|
||||||
isDisabled: true,
|
isDisabled: true,
|
||||||
|
isShow: false,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -155,6 +168,7 @@ export const AlertStyle: Story = {
|
||||||
content: 'Your settings have been updated!',
|
content: 'Your settings have been updated!',
|
||||||
showCancel: false,
|
showCancel: false,
|
||||||
confirmText: 'Got it',
|
confirmText: 'Got it',
|
||||||
|
isShow: false,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -167,6 +181,7 @@ export const DangerousAction: Story = {
|
||||||
content: 'This action will permanently delete your account and all associated data, including: all projects and files, collaboration history, and personal settings. This action cannot be reversed!',
|
content: 'This action will permanently delete your account and all associated data, including: all projects and files, collaboration history, and personal settings. This action cannot be reversed!',
|
||||||
confirmText: 'Delete My Account',
|
confirmText: 'Delete My Account',
|
||||||
cancelText: 'Keep My Account',
|
cancelText: 'Keep My Account',
|
||||||
|
isShow: false,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -178,6 +193,7 @@ export const NotMaskClosable: Story = {
|
||||||
title: 'Important Action',
|
title: 'Important Action',
|
||||||
content: 'This action requires your explicit choice. Clicking outside will not close this dialog.',
|
content: 'This action requires your explicit choice. Clicking outside will not close this dialog.',
|
||||||
maskClosable: false,
|
maskClosable: false,
|
||||||
|
isShow: false,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -195,5 +211,6 @@ export const Playground: Story = {
|
||||||
showConfirm: true,
|
showConfirm: true,
|
||||||
showCancel: true,
|
showCancel: true,
|
||||||
maskClosable: true,
|
maskClosable: true,
|
||||||
|
isShow: false,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -49,6 +49,11 @@ const meta = {
|
||||||
description: 'Default value when undefined',
|
description: 'Default value when undefined',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
args: {
|
||||||
|
onChange: (value) => {
|
||||||
|
console.log('Value changed:', value)
|
||||||
|
},
|
||||||
|
},
|
||||||
} satisfies Meta<typeof InputNumber>
|
} satisfies Meta<typeof InputNumber>
|
||||||
|
|
||||||
export default meta
|
export default meta
|
||||||
|
|
@ -196,7 +201,8 @@ const SizeComparisonDemo = () => {
|
||||||
|
|
||||||
export const SizeComparison: Story = {
|
export const SizeComparison: Story = {
|
||||||
render: () => <SizeComparisonDemo />,
|
render: () => <SizeComparisonDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Font size picker
|
// Real-world example - Font size picker
|
||||||
const FontSizePickerDemo = () => {
|
const FontSizePickerDemo = () => {
|
||||||
|
|
@ -228,7 +234,8 @@ const FontSizePickerDemo = () => {
|
||||||
|
|
||||||
export const FontSizePicker: Story = {
|
export const FontSizePicker: Story = {
|
||||||
render: () => <FontSizePickerDemo />,
|
render: () => <FontSizePickerDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Quantity selector
|
// Real-world example - Quantity selector
|
||||||
const QuantitySelectorDemo = () => {
|
const QuantitySelectorDemo = () => {
|
||||||
|
|
@ -268,7 +275,8 @@ const QuantitySelectorDemo = () => {
|
||||||
|
|
||||||
export const QuantitySelector: Story = {
|
export const QuantitySelector: Story = {
|
||||||
render: () => <QuantitySelectorDemo />,
|
render: () => <QuantitySelectorDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Timer settings
|
// Real-world example - Timer settings
|
||||||
const TimerSettingsDemo = () => {
|
const TimerSettingsDemo = () => {
|
||||||
|
|
@ -324,7 +332,8 @@ const TimerSettingsDemo = () => {
|
||||||
|
|
||||||
export const TimerSettings: Story = {
|
export const TimerSettings: Story = {
|
||||||
render: () => <TimerSettingsDemo />,
|
render: () => <TimerSettingsDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Animation settings
|
// Real-world example - Animation settings
|
||||||
const AnimationSettingsDemo = () => {
|
const AnimationSettingsDemo = () => {
|
||||||
|
|
@ -380,7 +389,8 @@ const AnimationSettingsDemo = () => {
|
||||||
|
|
||||||
export const AnimationSettings: Story = {
|
export const AnimationSettings: Story = {
|
||||||
render: () => <AnimationSettingsDemo />,
|
render: () => <AnimationSettingsDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Temperature control
|
// Real-world example - Temperature control
|
||||||
const TemperatureControlDemo = () => {
|
const TemperatureControlDemo = () => {
|
||||||
|
|
@ -420,7 +430,8 @@ const TemperatureControlDemo = () => {
|
||||||
|
|
||||||
export const TemperatureControl: Story = {
|
export const TemperatureControl: Story = {
|
||||||
render: () => <TemperatureControlDemo />,
|
render: () => <TemperatureControlDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Interactive playground
|
// Interactive playground
|
||||||
export const Playground: Story = {
|
export const Playground: Story = {
|
||||||
|
|
|
||||||
|
|
@ -138,7 +138,8 @@ const WithConfigurationDemo = () => {
|
||||||
|
|
||||||
export const WithConfiguration: Story = {
|
export const WithConfiguration: Story = {
|
||||||
render: () => <WithConfigurationDemo />,
|
render: () => <WithConfigurationDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Multiple cards selection
|
// Multiple cards selection
|
||||||
const MultipleCardsDemo = () => {
|
const MultipleCardsDemo = () => {
|
||||||
|
|
@ -190,7 +191,8 @@ const MultipleCardsDemo = () => {
|
||||||
|
|
||||||
export const MultipleCards: Story = {
|
export const MultipleCards: Story = {
|
||||||
render: () => <MultipleCardsDemo />,
|
render: () => <MultipleCardsDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Cloud provider selection
|
// Real-world example - Cloud provider selection
|
||||||
const CloudProviderSelectionDemo = () => {
|
const CloudProviderSelectionDemo = () => {
|
||||||
|
|
@ -247,7 +249,8 @@ const CloudProviderSelectionDemo = () => {
|
||||||
|
|
||||||
export const CloudProviderSelection: Story = {
|
export const CloudProviderSelection: Story = {
|
||||||
render: () => <CloudProviderSelectionDemo />,
|
render: () => <CloudProviderSelectionDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Deployment strategy
|
// Real-world example - Deployment strategy
|
||||||
const DeploymentStrategyDemo = () => {
|
const DeploymentStrategyDemo = () => {
|
||||||
|
|
@ -313,7 +316,8 @@ const DeploymentStrategyDemo = () => {
|
||||||
|
|
||||||
export const DeploymentStrategy: Story = {
|
export const DeploymentStrategy: Story = {
|
||||||
render: () => <DeploymentStrategyDemo />,
|
render: () => <DeploymentStrategyDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Storage options
|
// Real-world example - Storage options
|
||||||
const StorageOptionsDemo = () => {
|
const StorageOptionsDemo = () => {
|
||||||
|
|
@ -388,7 +392,8 @@ const StorageOptionsDemo = () => {
|
||||||
|
|
||||||
export const StorageOptions: Story = {
|
export const StorageOptions: Story = {
|
||||||
render: () => <StorageOptionsDemo />,
|
render: () => <StorageOptionsDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - API authentication method
|
// Real-world example - API authentication method
|
||||||
const APIAuthMethodDemo = () => {
|
const APIAuthMethodDemo = () => {
|
||||||
|
|
@ -458,7 +463,8 @@ const APIAuthMethodDemo = () => {
|
||||||
|
|
||||||
export const APIAuthMethod: Story = {
|
export const APIAuthMethod: Story = {
|
||||||
render: () => <APIAuthMethodDemo />,
|
render: () => <APIAuthMethodDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Interactive playground
|
// Interactive playground
|
||||||
const PlaygroundDemo = () => {
|
const PlaygroundDemo = () => {
|
||||||
|
|
@ -501,4 +507,5 @@ const PlaygroundDemo = () => {
|
||||||
|
|
||||||
export const Playground: Story = {
|
export const Playground: Story = {
|
||||||
render: () => <PlaygroundDemo />,
|
render: () => <PlaygroundDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,10 @@ const meta = {
|
||||||
control: 'text',
|
control: 'text',
|
||||||
description: 'Search input value',
|
description: 'Search input value',
|
||||||
},
|
},
|
||||||
|
onChange: {
|
||||||
|
action: 'changed',
|
||||||
|
description: 'Change handler',
|
||||||
|
},
|
||||||
placeholder: {
|
placeholder: {
|
||||||
control: 'text',
|
control: 'text',
|
||||||
description: 'Placeholder text',
|
description: 'Placeholder text',
|
||||||
|
|
@ -32,6 +36,11 @@ const meta = {
|
||||||
description: 'Additional CSS classes',
|
description: 'Additional CSS classes',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
args: {
|
||||||
|
onChange: (v) => {
|
||||||
|
console.log('Search value changed:', v)
|
||||||
|
},
|
||||||
|
},
|
||||||
} satisfies Meta<typeof SearchInput>
|
} satisfies Meta<typeof SearchInput>
|
||||||
|
|
||||||
export default meta
|
export default meta
|
||||||
|
|
@ -66,6 +75,10 @@ export const Default: Story = {
|
||||||
args: {
|
args: {
|
||||||
placeholder: 'Search...',
|
placeholder: 'Search...',
|
||||||
white: false,
|
white: false,
|
||||||
|
value: '',
|
||||||
|
onChange: (v) => {
|
||||||
|
console.log('Search value changed:', v)
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -75,6 +88,7 @@ export const WhiteBackground: Story = {
|
||||||
args: {
|
args: {
|
||||||
placeholder: 'Search...',
|
placeholder: 'Search...',
|
||||||
white: true,
|
white: true,
|
||||||
|
value: '',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -94,6 +108,7 @@ export const CustomPlaceholder: Story = {
|
||||||
args: {
|
args: {
|
||||||
placeholder: 'Search documents, files, and more...',
|
placeholder: 'Search documents, files, and more...',
|
||||||
white: false,
|
white: false,
|
||||||
|
value: '',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -156,7 +171,8 @@ const UserListSearchDemo = () => {
|
||||||
|
|
||||||
export const UserListSearch: Story = {
|
export const UserListSearch: Story = {
|
||||||
render: () => <UserListSearchDemo />,
|
render: () => <UserListSearchDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Product search
|
// Real-world example - Product search
|
||||||
const ProductSearchDemo = () => {
|
const ProductSearchDemo = () => {
|
||||||
|
|
@ -209,7 +225,8 @@ const ProductSearchDemo = () => {
|
||||||
|
|
||||||
export const ProductSearch: Story = {
|
export const ProductSearch: Story = {
|
||||||
render: () => <ProductSearchDemo />,
|
render: () => <ProductSearchDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Documentation search
|
// Real-world example - Documentation search
|
||||||
const DocumentationSearchDemo = () => {
|
const DocumentationSearchDemo = () => {
|
||||||
|
|
@ -271,7 +288,8 @@ const DocumentationSearchDemo = () => {
|
||||||
|
|
||||||
export const DocumentationSearch: Story = {
|
export const DocumentationSearch: Story = {
|
||||||
render: () => <DocumentationSearchDemo />,
|
render: () => <DocumentationSearchDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Command palette
|
// Real-world example - Command palette
|
||||||
const CommandPaletteDemo = () => {
|
const CommandPaletteDemo = () => {
|
||||||
|
|
@ -330,7 +348,8 @@ const CommandPaletteDemo = () => {
|
||||||
|
|
||||||
export const CommandPalette: Story = {
|
export const CommandPalette: Story = {
|
||||||
render: () => <CommandPaletteDemo />,
|
render: () => <CommandPaletteDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Live search with results count
|
// Real-world example - Live search with results count
|
||||||
const LiveSearchWithCountDemo = () => {
|
const LiveSearchWithCountDemo = () => {
|
||||||
|
|
@ -384,7 +403,8 @@ const LiveSearchWithCountDemo = () => {
|
||||||
|
|
||||||
export const LiveSearchWithCount: Story = {
|
export const LiveSearchWithCount: Story = {
|
||||||
render: () => <LiveSearchWithCountDemo />,
|
render: () => <LiveSearchWithCountDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Size variations
|
// Size variations
|
||||||
const SizeVariationsDemo = () => {
|
const SizeVariationsDemo = () => {
|
||||||
|
|
@ -422,7 +442,8 @@ const SizeVariationsDemo = () => {
|
||||||
|
|
||||||
export const SizeVariations: Story = {
|
export const SizeVariations: Story = {
|
||||||
render: () => <SizeVariationsDemo />,
|
render: () => <SizeVariationsDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Interactive playground
|
// Interactive playground
|
||||||
export const Playground: Story = {
|
export const Playground: Story = {
|
||||||
|
|
|
||||||
|
|
@ -33,6 +33,11 @@ const meta = {
|
||||||
description: 'Hide check icon on selected item',
|
description: 'Hide check icon on selected item',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
args: {
|
||||||
|
onSelect: (item) => {
|
||||||
|
console.log('Selected:', item)
|
||||||
|
},
|
||||||
|
},
|
||||||
} satisfies Meta<typeof SimpleSelect>
|
} satisfies Meta<typeof SimpleSelect>
|
||||||
|
|
||||||
export default meta
|
export default meta
|
||||||
|
|
@ -87,6 +92,7 @@ export const Default: Story = {
|
||||||
args: {
|
args: {
|
||||||
placeholder: 'Select a fruit...',
|
placeholder: 'Select a fruit...',
|
||||||
defaultValue: 'apple',
|
defaultValue: 'apple',
|
||||||
|
items: [],
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -96,6 +102,7 @@ export const WithPlaceholder: Story = {
|
||||||
args: {
|
args: {
|
||||||
placeholder: 'Choose an option...',
|
placeholder: 'Choose an option...',
|
||||||
defaultValue: '',
|
defaultValue: '',
|
||||||
|
items: [],
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -106,6 +113,7 @@ export const Disabled: Story = {
|
||||||
placeholder: 'Select a fruit...',
|
placeholder: 'Select a fruit...',
|
||||||
defaultValue: 'banana',
|
defaultValue: 'banana',
|
||||||
disabled: true,
|
disabled: true,
|
||||||
|
items: [],
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -116,6 +124,7 @@ export const NotClearable: Story = {
|
||||||
placeholder: 'Select a fruit...',
|
placeholder: 'Select a fruit...',
|
||||||
defaultValue: 'cherry',
|
defaultValue: 'cherry',
|
||||||
notClearable: true,
|
notClearable: true,
|
||||||
|
items: [],
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -126,6 +135,7 @@ export const HideChecked: Story = {
|
||||||
placeholder: 'Select a fruit...',
|
placeholder: 'Select a fruit...',
|
||||||
defaultValue: 'apple',
|
defaultValue: 'apple',
|
||||||
hideChecked: true,
|
hideChecked: true,
|
||||||
|
items: [],
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -153,7 +163,8 @@ const WithSearchDemo = () => {
|
||||||
|
|
||||||
export const WithSearch: Story = {
|
export const WithSearch: Story = {
|
||||||
render: () => <WithSearchDemo />,
|
render: () => <WithSearchDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// PortalSelect
|
// PortalSelect
|
||||||
const PortalSelectVariantDemo = () => {
|
const PortalSelectVariantDemo = () => {
|
||||||
|
|
@ -179,7 +190,8 @@ const PortalSelectVariantDemo = () => {
|
||||||
|
|
||||||
export const PortalSelectVariant: Story = {
|
export const PortalSelectVariant: Story = {
|
||||||
render: () => <PortalSelectVariantDemo />,
|
render: () => <PortalSelectVariantDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Custom render option
|
// Custom render option
|
||||||
const CustomRenderOptionDemo = () => {
|
const CustomRenderOptionDemo = () => {
|
||||||
|
|
@ -215,7 +227,8 @@ const CustomRenderOptionDemo = () => {
|
||||||
|
|
||||||
export const CustomRenderOption: Story = {
|
export const CustomRenderOption: Story = {
|
||||||
render: () => <CustomRenderOptionDemo />,
|
render: () => <CustomRenderOptionDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Loading state
|
// Loading state
|
||||||
export const LoadingState: Story = {
|
export const LoadingState: Story = {
|
||||||
|
|
@ -232,7 +245,8 @@ export const LoadingState: Story = {
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Form field
|
// Real-world example - Form field
|
||||||
const FormFieldDemo = () => {
|
const FormFieldDemo = () => {
|
||||||
|
|
@ -297,7 +311,8 @@ const FormFieldDemo = () => {
|
||||||
|
|
||||||
export const FormField: Story = {
|
export const FormField: Story = {
|
||||||
render: () => <FormFieldDemo />,
|
render: () => <FormFieldDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Filter selector
|
// Real-world example - Filter selector
|
||||||
const FilterSelectorDemo = () => {
|
const FilterSelectorDemo = () => {
|
||||||
|
|
@ -359,7 +374,8 @@ const FilterSelectorDemo = () => {
|
||||||
|
|
||||||
export const FilterSelector: Story = {
|
export const FilterSelector: Story = {
|
||||||
render: () => <FilterSelectorDemo />,
|
render: () => <FilterSelectorDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Version selector with badge
|
// Real-world example - Version selector with badge
|
||||||
const VersionSelectorDemo = () => {
|
const VersionSelectorDemo = () => {
|
||||||
|
|
@ -398,7 +414,8 @@ const VersionSelectorDemo = () => {
|
||||||
|
|
||||||
export const VersionSelector: Story = {
|
export const VersionSelector: Story = {
|
||||||
render: () => <VersionSelectorDemo />,
|
render: () => <VersionSelectorDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Settings dropdown
|
// Real-world example - Settings dropdown
|
||||||
const SettingsDropdownDemo = () => {
|
const SettingsDropdownDemo = () => {
|
||||||
|
|
@ -447,7 +464,8 @@ const SettingsDropdownDemo = () => {
|
||||||
|
|
||||||
export const SettingsDropdown: Story = {
|
export const SettingsDropdown: Story = {
|
||||||
render: () => <SettingsDropdownDemo />,
|
render: () => <SettingsDropdownDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Comparison of variants
|
// Comparison of variants
|
||||||
const VariantComparisonDemo = () => {
|
const VariantComparisonDemo = () => {
|
||||||
|
|
@ -504,7 +522,8 @@ const VariantComparisonDemo = () => {
|
||||||
|
|
||||||
export const VariantComparison: Story = {
|
export const VariantComparison: Story = {
|
||||||
render: () => <VariantComparisonDemo />,
|
render: () => <VariantComparisonDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Interactive playground
|
// Interactive playground
|
||||||
const PlaygroundDemo = () => {
|
const PlaygroundDemo = () => {
|
||||||
|
|
@ -524,4 +543,5 @@ const PlaygroundDemo = () => {
|
||||||
|
|
||||||
export const Playground: Story = {
|
export const Playground: Story = {
|
||||||
render: () => <PlaygroundDemo />,
|
render: () => <PlaygroundDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
|
||||||
|
|
@ -36,6 +36,11 @@ const meta = {
|
||||||
description: 'Disabled state',
|
description: 'Disabled state',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
args: {
|
||||||
|
onChange: (value) => {
|
||||||
|
console.log('Slider value:', value)
|
||||||
|
},
|
||||||
|
},
|
||||||
} satisfies Meta<typeof Slider>
|
} satisfies Meta<typeof Slider>
|
||||||
|
|
||||||
export default meta
|
export default meta
|
||||||
|
|
@ -157,7 +162,8 @@ const VolumeControlDemo = () => {
|
||||||
|
|
||||||
export const VolumeControl: Story = {
|
export const VolumeControl: Story = {
|
||||||
render: () => <VolumeControlDemo />,
|
render: () => <VolumeControlDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Brightness control
|
// Real-world example - Brightness control
|
||||||
const BrightnessControlDemo = () => {
|
const BrightnessControlDemo = () => {
|
||||||
|
|
@ -187,7 +193,8 @@ const BrightnessControlDemo = () => {
|
||||||
|
|
||||||
export const BrightnessControl: Story = {
|
export const BrightnessControl: Story = {
|
||||||
render: () => <BrightnessControlDemo />,
|
render: () => <BrightnessControlDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Price range filter
|
// Real-world example - Price range filter
|
||||||
const PriceRangeFilterDemo = () => {
|
const PriceRangeFilterDemo = () => {
|
||||||
|
|
@ -239,7 +246,8 @@ const PriceRangeFilterDemo = () => {
|
||||||
|
|
||||||
export const PriceRangeFilter: Story = {
|
export const PriceRangeFilter: Story = {
|
||||||
render: () => <PriceRangeFilterDemo />,
|
render: () => <PriceRangeFilterDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Temperature selector
|
// Real-world example - Temperature selector
|
||||||
const TemperatureSelectorDemo = () => {
|
const TemperatureSelectorDemo = () => {
|
||||||
|
|
@ -279,7 +287,8 @@ const TemperatureSelectorDemo = () => {
|
||||||
|
|
||||||
export const TemperatureSelector: Story = {
|
export const TemperatureSelector: Story = {
|
||||||
render: () => <TemperatureSelectorDemo />,
|
render: () => <TemperatureSelectorDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Progress/completion slider
|
// Real-world example - Progress/completion slider
|
||||||
const ProgressSliderDemo = () => {
|
const ProgressSliderDemo = () => {
|
||||||
|
|
@ -325,7 +334,8 @@ const ProgressSliderDemo = () => {
|
||||||
|
|
||||||
export const ProgressSlider: Story = {
|
export const ProgressSlider: Story = {
|
||||||
render: () => <ProgressSliderDemo />,
|
render: () => <ProgressSliderDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Zoom control
|
// Real-world example - Zoom control
|
||||||
const ZoomControlDemo = () => {
|
const ZoomControlDemo = () => {
|
||||||
|
|
@ -371,7 +381,8 @@ const ZoomControlDemo = () => {
|
||||||
|
|
||||||
export const ZoomControl: Story = {
|
export const ZoomControl: Story = {
|
||||||
render: () => <ZoomControlDemo />,
|
render: () => <ZoomControlDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - AI model parameters
|
// Real-world example - AI model parameters
|
||||||
const AIModelParametersDemo = () => {
|
const AIModelParametersDemo = () => {
|
||||||
|
|
@ -445,7 +456,8 @@ const AIModelParametersDemo = () => {
|
||||||
|
|
||||||
export const AIModelParameters: Story = {
|
export const AIModelParameters: Story = {
|
||||||
render: () => <AIModelParametersDemo />,
|
render: () => <AIModelParametersDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Image quality selector
|
// Real-world example - Image quality selector
|
||||||
const ImageQualitySelectorDemo = () => {
|
const ImageQualitySelectorDemo = () => {
|
||||||
|
|
@ -488,7 +500,8 @@ const ImageQualitySelectorDemo = () => {
|
||||||
|
|
||||||
export const ImageQualitySelector: Story = {
|
export const ImageQualitySelector: Story = {
|
||||||
render: () => <ImageQualitySelectorDemo />,
|
render: () => <ImageQualitySelectorDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Multiple sliders
|
// Multiple sliders
|
||||||
const MultipleSlidersDemo = () => {
|
const MultipleSlidersDemo = () => {
|
||||||
|
|
@ -545,7 +558,8 @@ const MultipleSlidersDemo = () => {
|
||||||
|
|
||||||
export const MultipleSliders: Story = {
|
export const MultipleSliders: Story = {
|
||||||
render: () => <MultipleSlidersDemo />,
|
render: () => <MultipleSlidersDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Interactive playground
|
// Interactive playground
|
||||||
export const Playground: Story = {
|
export const Playground: Story = {
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,10 @@ const meta = {
|
||||||
control: 'object',
|
control: 'object',
|
||||||
description: 'Array of tag strings',
|
description: 'Array of tag strings',
|
||||||
},
|
},
|
||||||
|
onChange: {
|
||||||
|
action: 'changed',
|
||||||
|
description: 'Change handler',
|
||||||
|
},
|
||||||
disableAdd: {
|
disableAdd: {
|
||||||
control: 'boolean',
|
control: 'boolean',
|
||||||
description: 'Disable adding new tags',
|
description: 'Disable adding new tags',
|
||||||
|
|
@ -41,6 +45,11 @@ const meta = {
|
||||||
description: 'Require non-empty tags',
|
description: 'Require non-empty tags',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
args: {
|
||||||
|
onChange: (items) => {
|
||||||
|
console.log('Tags updated:', items)
|
||||||
|
},
|
||||||
|
},
|
||||||
} satisfies Meta<typeof TagInput>
|
} satisfies Meta<typeof TagInput>
|
||||||
|
|
||||||
export default meta
|
export default meta
|
||||||
|
|
@ -155,7 +164,8 @@ const SkillTagsDemo = () => {
|
||||||
|
|
||||||
export const SkillTags: Story = {
|
export const SkillTags: Story = {
|
||||||
render: () => <SkillTagsDemo />,
|
render: () => <SkillTagsDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Email tags
|
// Real-world example - Email tags
|
||||||
const EmailTagsDemo = () => {
|
const EmailTagsDemo = () => {
|
||||||
|
|
@ -192,7 +202,8 @@ const EmailTagsDemo = () => {
|
||||||
|
|
||||||
export const EmailTags: Story = {
|
export const EmailTags: Story = {
|
||||||
render: () => <EmailTagsDemo />,
|
render: () => <EmailTagsDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Search filters
|
// Real-world example - Search filters
|
||||||
const SearchFiltersDemo = () => {
|
const SearchFiltersDemo = () => {
|
||||||
|
|
@ -246,7 +257,8 @@ const SearchFiltersDemo = () => {
|
||||||
|
|
||||||
export const SearchFilters: Story = {
|
export const SearchFilters: Story = {
|
||||||
render: () => <SearchFiltersDemo />,
|
render: () => <SearchFiltersDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Product categories
|
// Real-world example - Product categories
|
||||||
const ProductCategoriesDemo = () => {
|
const ProductCategoriesDemo = () => {
|
||||||
|
|
@ -292,7 +304,8 @@ const ProductCategoriesDemo = () => {
|
||||||
|
|
||||||
export const ProductCategories: Story = {
|
export const ProductCategories: Story = {
|
||||||
render: () => <ProductCategoriesDemo />,
|
render: () => <ProductCategoriesDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Keyword extraction
|
// Real-world example - Keyword extraction
|
||||||
const KeywordExtractionDemo = () => {
|
const KeywordExtractionDemo = () => {
|
||||||
|
|
@ -328,7 +341,8 @@ const KeywordExtractionDemo = () => {
|
||||||
|
|
||||||
export const KeywordExtraction: Story = {
|
export const KeywordExtraction: Story = {
|
||||||
render: () => <KeywordExtractionDemo />,
|
render: () => <KeywordExtractionDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Tags with suggestions
|
// Real-world example - Tags with suggestions
|
||||||
const TagsWithSuggestionsDemo = () => {
|
const TagsWithSuggestionsDemo = () => {
|
||||||
|
|
@ -371,7 +385,8 @@ const TagsWithSuggestionsDemo = () => {
|
||||||
|
|
||||||
export const TagsWithSuggestions: Story = {
|
export const TagsWithSuggestions: Story = {
|
||||||
render: () => <TagsWithSuggestionsDemo />,
|
render: () => <TagsWithSuggestionsDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Stop sequences (Tab mode)
|
// Real-world example - Stop sequences (Tab mode)
|
||||||
const StopSequencesDemo = () => {
|
const StopSequencesDemo = () => {
|
||||||
|
|
@ -425,7 +440,8 @@ const StopSequencesDemo = () => {
|
||||||
|
|
||||||
export const StopSequences: Story = {
|
export const StopSequences: Story = {
|
||||||
render: () => <StopSequencesDemo />,
|
render: () => <StopSequencesDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Multi-language tags
|
// Real-world example - Multi-language tags
|
||||||
const MultiLanguageTagsDemo = () => {
|
const MultiLanguageTagsDemo = () => {
|
||||||
|
|
@ -461,7 +477,8 @@ const MultiLanguageTagsDemo = () => {
|
||||||
|
|
||||||
export const MultiLanguageTags: Story = {
|
export const MultiLanguageTags: Story = {
|
||||||
render: () => <MultiLanguageTagsDemo />,
|
render: () => <MultiLanguageTagsDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Validation showcase
|
// Validation showcase
|
||||||
const ValidationShowcaseDemo = () => {
|
const ValidationShowcaseDemo = () => {
|
||||||
|
|
@ -500,7 +517,8 @@ const ValidationShowcaseDemo = () => {
|
||||||
|
|
||||||
export const ValidationShowcase: Story = {
|
export const ValidationShowcase: Story = {
|
||||||
render: () => <ValidationShowcaseDemo />,
|
render: () => <ValidationShowcaseDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Interactive playground
|
// Interactive playground
|
||||||
export const Playground: Story = {
|
export const Playground: Story = {
|
||||||
|
|
|
||||||
|
|
@ -76,6 +76,7 @@ export const Default: Story = {
|
||||||
size: 'regular',
|
size: 'regular',
|
||||||
placeholder: 'Enter text...',
|
placeholder: 'Enter text...',
|
||||||
rows: 4,
|
rows: 4,
|
||||||
|
value: '',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -86,6 +87,7 @@ export const SmallSize: Story = {
|
||||||
size: 'small',
|
size: 'small',
|
||||||
placeholder: 'Small textarea...',
|
placeholder: 'Small textarea...',
|
||||||
rows: 3,
|
rows: 3,
|
||||||
|
value: '',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -96,6 +98,7 @@ export const LargeSize: Story = {
|
||||||
size: 'large',
|
size: 'large',
|
||||||
placeholder: 'Large textarea...',
|
placeholder: 'Large textarea...',
|
||||||
rows: 5,
|
rows: 5,
|
||||||
|
value: '',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -175,7 +178,8 @@ const SizeComparisonDemo = () => {
|
||||||
|
|
||||||
export const SizeComparison: Story = {
|
export const SizeComparison: Story = {
|
||||||
render: () => <SizeComparisonDemo />,
|
render: () => <SizeComparisonDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// State comparison
|
// State comparison
|
||||||
const StateComparisonDemo = () => {
|
const StateComparisonDemo = () => {
|
||||||
|
|
@ -216,7 +220,8 @@ const StateComparisonDemo = () => {
|
||||||
|
|
||||||
export const StateComparison: Story = {
|
export const StateComparison: Story = {
|
||||||
render: () => <StateComparisonDemo />,
|
render: () => <StateComparisonDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Comment form
|
// Real-world example - Comment form
|
||||||
const CommentFormDemo = () => {
|
const CommentFormDemo = () => {
|
||||||
|
|
@ -250,7 +255,8 @@ const CommentFormDemo = () => {
|
||||||
|
|
||||||
export const CommentForm: Story = {
|
export const CommentForm: Story = {
|
||||||
render: () => <CommentFormDemo />,
|
render: () => <CommentFormDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Feedback form
|
// Real-world example - Feedback form
|
||||||
const FeedbackFormDemo = () => {
|
const FeedbackFormDemo = () => {
|
||||||
|
|
@ -291,7 +297,8 @@ const FeedbackFormDemo = () => {
|
||||||
|
|
||||||
export const FeedbackForm: Story = {
|
export const FeedbackForm: Story = {
|
||||||
render: () => <FeedbackFormDemo />,
|
render: () => <FeedbackFormDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Code snippet
|
// Real-world example - Code snippet
|
||||||
const CodeSnippetDemo = () => {
|
const CodeSnippetDemo = () => {
|
||||||
|
|
@ -322,7 +329,8 @@ const CodeSnippetDemo = () => {
|
||||||
|
|
||||||
export const CodeSnippet: Story = {
|
export const CodeSnippet: Story = {
|
||||||
render: () => <CodeSnippetDemo />,
|
render: () => <CodeSnippetDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Message composer
|
// Real-world example - Message composer
|
||||||
const MessageComposerDemo = () => {
|
const MessageComposerDemo = () => {
|
||||||
|
|
@ -372,7 +380,8 @@ const MessageComposerDemo = () => {
|
||||||
|
|
||||||
export const MessageComposer: Story = {
|
export const MessageComposer: Story = {
|
||||||
render: () => <MessageComposerDemo />,
|
render: () => <MessageComposerDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Bio editor
|
// Real-world example - Bio editor
|
||||||
const BioEditorDemo = () => {
|
const BioEditorDemo = () => {
|
||||||
|
|
@ -408,7 +417,8 @@ const BioEditorDemo = () => {
|
||||||
|
|
||||||
export const BioEditor: Story = {
|
export const BioEditor: Story = {
|
||||||
render: () => <BioEditorDemo />,
|
render: () => <BioEditorDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - JSON editor
|
// Real-world example - JSON editor
|
||||||
const JSONEditorDemo = () => {
|
const JSONEditorDemo = () => {
|
||||||
|
|
@ -472,7 +482,8 @@ const JSONEditorDemo = () => {
|
||||||
|
|
||||||
export const JSONEditor: Story = {
|
export const JSONEditor: Story = {
|
||||||
render: () => <JSONEditorDemo />,
|
render: () => <JSONEditorDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Real-world example - Task description
|
// Real-world example - Task description
|
||||||
const TaskDescriptionDemo = () => {
|
const TaskDescriptionDemo = () => {
|
||||||
|
|
@ -520,7 +531,8 @@ const TaskDescriptionDemo = () => {
|
||||||
|
|
||||||
export const TaskDescription: Story = {
|
export const TaskDescription: Story = {
|
||||||
render: () => <TaskDescriptionDemo />,
|
render: () => <TaskDescriptionDemo />,
|
||||||
}
|
parameters: { controls: { disable: true } },
|
||||||
|
} as unknown as Story
|
||||||
|
|
||||||
// Interactive playground
|
// Interactive playground
|
||||||
export const Playground: Story = {
|
export const Playground: Story = {
|
||||||
|
|
@ -531,5 +543,6 @@ export const Playground: Story = {
|
||||||
rows: 4,
|
rows: 4,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
destructive: false,
|
destructive: false,
|
||||||
|
value: '',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ const VoiceInputMock = ({ onConverted, onCancel }: any) => {
|
||||||
<div className="absolute inset-[1.5px] flex items-center overflow-hidden rounded-[10.5px] bg-primary-25 py-[14px] pl-[14.5px] pr-[6.5px]">
|
<div className="absolute inset-[1.5px] flex items-center overflow-hidden rounded-[10.5px] bg-primary-25 py-[14px] pl-[14.5px] pr-[6.5px]">
|
||||||
{/* Waveform visualization placeholder */}
|
{/* Waveform visualization placeholder */}
|
||||||
<div className="absolute bottom-0 left-0 flex h-4 w-full items-end gap-[3px] px-2">
|
<div className="absolute bottom-0 left-0 flex h-4 w-full items-end gap-[3px] px-2">
|
||||||
{new Array(40).fill().map((_, i) => (
|
{new Array(40).fill(0).map((_, i) => (
|
||||||
<div
|
<div
|
||||||
key={i}
|
key={i}
|
||||||
className="w-[2px] rounded-t bg-blue-200"
|
className="w-[2px] rounded-t bg-blue-200"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue