fix(storybook): add required handler props and fix TypeScript errors in component stories (#27187)

This commit is contained in:
GuanMu 2025-10-21 17:44:26 +08:00 committed by GitHub
parent 82219c1162
commit c327cfa86e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 189 additions and 62 deletions

View File

@ -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)'],

View File

@ -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

View File

@ -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: [],
} }

View File

@ -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,
}, },
} }

View File

@ -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 = {

View File

@ -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

View File

@ -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 = {

View File

@ -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

View File

@ -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 = {

View File

@ -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 = {

View File

@ -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: '',
}, },
} }

View File

@ -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"