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