mirror of https://github.com/langgenius/dify.git
chore: improve storybooks (#27306)
This commit is contained in:
parent
4bb00b83d9
commit
b198c9474a
|
|
@ -1,5 +1,8 @@
|
|||
import type { StorybookConfig } from '@storybook/nextjs'
|
||||
import path from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
|
||||
const storybookDir = path.dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ['../app/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
||||
|
|
@ -32,9 +35,9 @@ const config: StorybookConfig = {
|
|||
config.resolve.alias = {
|
||||
...config.resolve.alias,
|
||||
// Mock the plugin index files to avoid circular dependencies
|
||||
[path.resolve(__dirname, '../app/components/base/prompt-editor/plugins/context-block/index.tsx')]: path.resolve(__dirname, '__mocks__/context-block.tsx'),
|
||||
[path.resolve(__dirname, '../app/components/base/prompt-editor/plugins/history-block/index.tsx')]: path.resolve(__dirname, '__mocks__/history-block.tsx'),
|
||||
[path.resolve(__dirname, '../app/components/base/prompt-editor/plugins/query-block/index.tsx')]: path.resolve(__dirname, '__mocks__/query-block.tsx'),
|
||||
[path.resolve(storybookDir, '../app/components/base/prompt-editor/plugins/context-block/index.tsx')]: path.resolve(storybookDir, '__mocks__/context-block.tsx'),
|
||||
[path.resolve(storybookDir, '../app/components/base/prompt-editor/plugins/history-block/index.tsx')]: path.resolve(storybookDir, '__mocks__/history-block.tsx'),
|
||||
[path.resolve(storybookDir, '../app/components/base/prompt-editor/plugins/query-block/index.tsx')]: path.resolve(storybookDir, '__mocks__/query-block.tsx'),
|
||||
}
|
||||
return config
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
import { AudioPlayerManager } from '@/app/components/base/audio-btn/audio.player.manager'
|
||||
|
||||
type PlayerCallback = ((event: string) => void) | null
|
||||
|
||||
class MockAudioPlayer {
|
||||
private callback: PlayerCallback = null
|
||||
private finishTimer?: ReturnType<typeof setTimeout>
|
||||
|
||||
public setCallback(callback: PlayerCallback) {
|
||||
this.callback = callback
|
||||
}
|
||||
|
||||
public playAudio() {
|
||||
this.clearTimer()
|
||||
this.callback?.('play')
|
||||
this.finishTimer = setTimeout(() => {
|
||||
this.callback?.('ended')
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
public pauseAudio() {
|
||||
this.clearTimer()
|
||||
this.callback?.('paused')
|
||||
}
|
||||
|
||||
private clearTimer() {
|
||||
if (this.finishTimer)
|
||||
clearTimeout(this.finishTimer)
|
||||
}
|
||||
}
|
||||
|
||||
class MockAudioPlayerManager {
|
||||
private readonly player = new MockAudioPlayer()
|
||||
|
||||
public getAudioPlayer(
|
||||
_url: string,
|
||||
_isPublic: boolean,
|
||||
_id: string | undefined,
|
||||
_msgContent: string | null | undefined,
|
||||
_voice: string | undefined,
|
||||
callback: PlayerCallback,
|
||||
) {
|
||||
this.player.setCallback(callback)
|
||||
return this.player
|
||||
}
|
||||
|
||||
public resetMsgId() {
|
||||
// No-op for the mock
|
||||
}
|
||||
}
|
||||
|
||||
export const ensureMockAudioManager = () => {
|
||||
const managerAny = AudioPlayerManager as unknown as {
|
||||
getInstance: () => AudioPlayerManager
|
||||
__isStorybookMockInstalled?: boolean
|
||||
}
|
||||
|
||||
if (managerAny.__isStorybookMockInstalled)
|
||||
return
|
||||
|
||||
const mock = new MockAudioPlayerManager()
|
||||
managerAny.getInstance = () => mock as unknown as AudioPlayerManager
|
||||
managerAny.__isStorybookMockInstalled = true
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import { RiAddLine, RiDeleteBinLine, RiEditLine, RiMore2Fill, RiSaveLine, RiShar
|
|||
import ActionButton, { ActionButtonState } from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/ActionButton',
|
||||
title: 'Base/Button/ActionButton',
|
||||
component: ActionButton,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||||
import { useEffect } from 'react'
|
||||
import type { ComponentProps } from 'react'
|
||||
import AudioBtn from '.'
|
||||
import { ensureMockAudioManager } from '../../../../.storybook/utils/audio-player-manager.mock'
|
||||
|
||||
ensureMockAudioManager()
|
||||
|
||||
const StoryWrapper = (props: ComponentProps<typeof AudioBtn>) => {
|
||||
useEffect(() => {
|
||||
ensureMockAudioManager()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center space-x-3">
|
||||
<AudioBtn {...props} />
|
||||
<span className="text-xs text-gray-500">Click to toggle playback</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Button/AudioBtn',
|
||||
component: AudioBtn,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Audio playback toggle that streams assistant responses. The story uses a mocked audio player so you can inspect loading and playback states without calling the real API.',
|
||||
},
|
||||
},
|
||||
nextjs: {
|
||||
appDirectory: true,
|
||||
navigation: {
|
||||
pathname: '/apps/demo-app/text-to-audio',
|
||||
params: { appId: 'demo-app' },
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
id: {
|
||||
control: 'text',
|
||||
description: 'Message identifier used to scope the audio stream.',
|
||||
},
|
||||
value: {
|
||||
control: 'text',
|
||||
description: 'Text content that would be converted to speech.',
|
||||
},
|
||||
voice: {
|
||||
control: 'text',
|
||||
description: 'Voice profile used for playback.',
|
||||
},
|
||||
isAudition: {
|
||||
control: 'boolean',
|
||||
description: 'Switches to the audition style with minimal padding.',
|
||||
},
|
||||
className: {
|
||||
control: 'text',
|
||||
description: 'Optional custom class for the wrapper.',
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof AudioBtn>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
render: args => <StoryWrapper {...args} />,
|
||||
args: {
|
||||
id: 'message-1',
|
||||
value: 'This is an audio preview for the current assistant response.',
|
||||
voice: 'alloy',
|
||||
},
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import { useState } from 'react'
|
|||
import AutoHeightTextarea from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/AutoHeightTextarea',
|
||||
title: 'Base/Input/AutoHeightTextarea',
|
||||
component: AutoHeightTextarea,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { useState } from 'react'
|
|||
import BlockInput from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/BlockInput',
|
||||
title: 'Base/Input/BlockInput',
|
||||
component: BlockInput,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||||
import AddButton from './add-button'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Button/AddButton',
|
||||
component: AddButton,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Compact icon-only button used for inline “add” actions in lists, cards, and modals.',
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
className: {
|
||||
control: 'text',
|
||||
description: 'Extra classes appended to the clickable container.',
|
||||
},
|
||||
onClick: {
|
||||
control: false,
|
||||
description: 'Triggered when the add button is pressed.',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
onClick: () => console.log('Add button clicked'),
|
||||
},
|
||||
} satisfies Meta<typeof AddButton>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
className: 'bg-white/80 shadow-sm backdrop-blur-sm',
|
||||
},
|
||||
}
|
||||
|
||||
export const InToolbar: Story = {
|
||||
render: args => (
|
||||
<div className="flex items-center gap-2 rounded-lg border border-divider-subtle bg-components-panel-bg p-3">
|
||||
<span className="text-xs text-text-tertiary">Attachments</span>
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<AddButton {...args} />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
args: {
|
||||
className: 'border border-dashed border-primary-200',
|
||||
},
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ import { RocketLaunchIcon } from '@heroicons/react/20/solid'
|
|||
import { Button } from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Button',
|
||||
title: 'Base/Button/Button',
|
||||
component: Button,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||||
import SyncButton from './sync-button'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Button/SyncButton',
|
||||
component: SyncButton,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Icon-only refresh button that surfaces a tooltip and is used for manual sync actions across the UI.',
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
className: {
|
||||
control: 'text',
|
||||
description: 'Additional classes appended to the clickable container.',
|
||||
},
|
||||
popupContent: {
|
||||
control: 'text',
|
||||
description: 'Tooltip text shown on hover.',
|
||||
},
|
||||
onClick: {
|
||||
control: false,
|
||||
description: 'Triggered when the sync button is pressed.',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
popupContent: 'Sync now',
|
||||
onClick: () => console.log('Sync button clicked'),
|
||||
},
|
||||
} satisfies Meta<typeof SyncButton>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
className: 'bg-white/80 shadow-sm backdrop-blur-sm',
|
||||
},
|
||||
}
|
||||
|
||||
export const InHeader: Story = {
|
||||
render: args => (
|
||||
<div className="flex items-center gap-2 rounded-lg border border-divider-subtle bg-components-panel-bg p-3">
|
||||
<span className="text-xs text-text-tertiary">Logs</span>
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<SyncButton {...args} />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
args: {
|
||||
popupContent: 'Refresh logs',
|
||||
},
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { markdownContentSVG } from './__mocks__/markdownContentSVG'
|
|||
import Answer from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Chat Answer',
|
||||
title: 'Base/Chat/Chat Answer',
|
||||
component: Answer,
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import Question from './question'
|
|||
import { User } from '@/app/components/base/icons/src/public/avatar'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Chat Question',
|
||||
title: 'Base/Chat/Chat Question',
|
||||
component: Question,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const createToggleItem = <T extends { id: string; checked: boolean }>(
|
|||
}
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Checkbox',
|
||||
title: 'Base/Input/Checkbox',
|
||||
component: Checkbox,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import Confirm from '.'
|
|||
import Button from '../button'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Confirm',
|
||||
title: 'Base/Dialog/Confirm',
|
||||
component: Confirm,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,110 @@
|
|||
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||||
import { useEffect, useState } from 'react'
|
||||
import ContentDialog from '.'
|
||||
|
||||
type Props = React.ComponentProps<typeof ContentDialog>
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Dialog/ContentDialog',
|
||||
component: ContentDialog,
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Sliding panel overlay used in the app detail view. Includes dimmed backdrop and animated entrance/exit transitions.',
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
className: {
|
||||
control: 'text',
|
||||
description: 'Additional classes applied to the sliding panel container.',
|
||||
},
|
||||
show: {
|
||||
control: 'boolean',
|
||||
description: 'Controls visibility of the dialog.',
|
||||
},
|
||||
onClose: {
|
||||
control: false,
|
||||
description: 'Invoked when the overlay/backdrop is clicked.',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
show: false,
|
||||
},
|
||||
} satisfies Meta<typeof ContentDialog>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
const DemoWrapper = (props: Props) => {
|
||||
const [open, setOpen] = useState(props.show)
|
||||
|
||||
useEffect(() => {
|
||||
setOpen(props.show)
|
||||
}, [props.show])
|
||||
|
||||
return (
|
||||
<div className="relative h-[480px] w-full overflow-hidden bg-gray-100">
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<button
|
||||
className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
Open dialog
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ContentDialog
|
||||
{...props}
|
||||
show={open}
|
||||
onClose={() => {
|
||||
props.onClose?.()
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<div className="flex h-full flex-col space-y-4 bg-white p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900">Plan summary</h2>
|
||||
<p className="text-sm text-gray-600">
|
||||
Use this area to present rich content for the selected run, configuration details, or
|
||||
any supporting context.
|
||||
</p>
|
||||
<div className="flex-1 overflow-y-auto rounded-md border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
|
||||
Scrollable placeholder content. Add domain-specific information, activity logs, or
|
||||
editors in the real application.
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<button
|
||||
className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
|
||||
Apply changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ContentDialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const Default: Story = {
|
||||
render: args => <DemoWrapper {...args} />,
|
||||
}
|
||||
|
||||
export const NarrowPanel: Story = {
|
||||
render: args => <DemoWrapper {...args} />,
|
||||
args: {
|
||||
className: 'max-w-[420px]',
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Applies a custom width class to show the dialog as a narrower information panel.',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||||
import { useEffect, useState } from 'react'
|
||||
import Dialog from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Dialog/Dialog',
|
||||
component: Dialog,
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Modal dialog built on Headless UI. Provides animated overlay, title slot, and optional footer region.',
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
className: {
|
||||
control: 'text',
|
||||
description: 'Additional classes applied to the panel.',
|
||||
},
|
||||
titleClassName: {
|
||||
control: 'text',
|
||||
description: 'Extra classes for the title element.',
|
||||
},
|
||||
bodyClassName: {
|
||||
control: 'text',
|
||||
description: 'Extra classes for the content area.',
|
||||
},
|
||||
footerClassName: {
|
||||
control: 'text',
|
||||
description: 'Extra classes for the footer container.',
|
||||
},
|
||||
title: {
|
||||
control: 'text',
|
||||
description: 'Dialog title.',
|
||||
},
|
||||
show: {
|
||||
control: 'boolean',
|
||||
description: 'Controls visibility of the dialog.',
|
||||
},
|
||||
onClose: {
|
||||
control: false,
|
||||
description: 'Called when the dialog backdrop or close handler fires.',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
title: 'Manage API Keys',
|
||||
show: false,
|
||||
},
|
||||
} satisfies Meta<typeof Dialog>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
const DialogDemo = (props: React.ComponentProps<typeof Dialog>) => {
|
||||
const [open, setOpen] = useState(props.show)
|
||||
useEffect(() => {
|
||||
setOpen(props.show)
|
||||
}, [props.show])
|
||||
|
||||
return (
|
||||
<div className="relative flex h-[480px] items-center justify-center bg-gray-100">
|
||||
<button
|
||||
className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
Show dialog
|
||||
</button>
|
||||
|
||||
<Dialog
|
||||
{...props}
|
||||
show={open}
|
||||
onClose={() => {
|
||||
props.onClose?.()
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<div className="space-y-4 text-sm text-gray-600">
|
||||
<p>
|
||||
Centralize API key management for collaborators. You can revoke, rotate, or generate new keys directly from this dialog.
|
||||
</p>
|
||||
<div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
|
||||
This placeholder area represents a form or table that would live inside the dialog body.
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const Default: Story = {
|
||||
render: args => <DialogDemo {...args} />,
|
||||
args: {
|
||||
footer: (
|
||||
<>
|
||||
<button className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50">
|
||||
Cancel
|
||||
</button>
|
||||
<button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
|
||||
Save changes
|
||||
</button>
|
||||
</>
|
||||
),
|
||||
},
|
||||
}
|
||||
|
||||
export const WithoutFooter: Story = {
|
||||
render: args => <DialogDemo {...args} />,
|
||||
args: {
|
||||
footer: undefined,
|
||||
title: 'Read-only summary',
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Demonstrates the dialog when no footer actions are provided.',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const CustomStyling: Story = {
|
||||
render: args => <DialogDemo {...args} />,
|
||||
args: {
|
||||
className: 'max-w-[560px] bg-white/95 backdrop-blur',
|
||||
bodyClassName: 'bg-gray-50 rounded-xl p-5',
|
||||
footerClassName: 'justify-between px-4 pb-4 pt-4',
|
||||
titleClassName: 'text-lg text-primary-600',
|
||||
footer: (
|
||||
<>
|
||||
<span className="text-xs text-gray-400">Last synced 2 minutes ago</span>
|
||||
<div className="flex gap-2">
|
||||
<button className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50">
|
||||
Close
|
||||
</button>
|
||||
<button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
|
||||
Refresh data
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Applies custom classes to the panel, body, title, and footer to match different surfaces.',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import { useState } from 'react'
|
|||
import { InputNumber } from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/InputNumber',
|
||||
title: 'Base/Input/InputNumber',
|
||||
component: InputNumber,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { useState } from 'react'
|
|||
import Input from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Input',
|
||||
title: 'Base/Input/Input',
|
||||
component: Input,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,125 @@
|
|||
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||||
import ModalLikeWrap from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Dialog/ModalLikeWrap',
|
||||
component: ModalLikeWrap,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Compact “modal-like” card used in wizards. Provides header actions, optional back slot, and confirm/cancel buttons.',
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
title: {
|
||||
control: 'text',
|
||||
description: 'Header title text.',
|
||||
},
|
||||
className: {
|
||||
control: 'text',
|
||||
description: 'Additional classes on the wrapper.',
|
||||
},
|
||||
beforeHeader: {
|
||||
control: false,
|
||||
description: 'Slot rendered before the header (commonly a back link).',
|
||||
},
|
||||
hideCloseBtn: {
|
||||
control: 'boolean',
|
||||
description: 'Hides the top-right close icon when true.',
|
||||
},
|
||||
children: {
|
||||
control: false,
|
||||
},
|
||||
onClose: {
|
||||
control: false,
|
||||
},
|
||||
onConfirm: {
|
||||
control: false,
|
||||
},
|
||||
},
|
||||
args: {
|
||||
title: 'Create dataset field',
|
||||
hideCloseBtn: false,
|
||||
onClose: () => console.log('close'),
|
||||
onConfirm: () => console.log('confirm'),
|
||||
},
|
||||
} satisfies Meta<typeof ModalLikeWrap>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
const BaseContent = () => (
|
||||
<div className="space-y-3 text-sm text-gray-600">
|
||||
<p>
|
||||
Describe the new field your dataset should collect. Provide a clear label and optional helper text.
|
||||
</p>
|
||||
<div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
|
||||
Form inputs would be placed here in the real flow.
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export const Default: Story = {
|
||||
render: args => (
|
||||
<ModalLikeWrap {...args}>
|
||||
<BaseContent />
|
||||
</ModalLikeWrap>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithBackLink: Story = {
|
||||
render: args => (
|
||||
<ModalLikeWrap
|
||||
{...args}
|
||||
hideCloseBtn
|
||||
beforeHeader={(
|
||||
<button
|
||||
className="mb-1 flex items-center gap-1 text-xs font-medium uppercase text-text-accent"
|
||||
onClick={() => console.log('back')}
|
||||
>
|
||||
<span className="bg-text-accent/10 inline-block h-4 w-4 rounded text-center text-[10px] leading-4 text-text-accent">{'<'}</span>
|
||||
Back
|
||||
</button>
|
||||
)}
|
||||
>
|
||||
<BaseContent />
|
||||
</ModalLikeWrap>
|
||||
),
|
||||
args: {
|
||||
title: 'Select metadata type',
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Demonstrates feeding content into `beforeHeader` while hiding the close button.',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const CustomWidth: Story = {
|
||||
render: args => (
|
||||
<ModalLikeWrap
|
||||
{...args}
|
||||
className="w-[420px]"
|
||||
>
|
||||
<BaseContent />
|
||||
<div className="mt-4 rounded-md bg-blue-50 p-3 text-xs text-blue-600">
|
||||
Tip: metadata keys may only include letters, numbers, and underscores.
|
||||
</div>
|
||||
</ModalLikeWrap>
|
||||
),
|
||||
args: {
|
||||
title: 'Advanced configuration',
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Applies extra width and helper messaging to emulate configuration panels.',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||||
import { useEffect, useState } from 'react'
|
||||
import Modal from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Dialog/Modal',
|
||||
component: Modal,
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Lightweight modal wrapper with optional header/description, close icon, and high-priority stacking for dropdown overlays.',
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
className: {
|
||||
control: 'text',
|
||||
description: 'Extra classes applied to the modal panel.',
|
||||
},
|
||||
wrapperClassName: {
|
||||
control: 'text',
|
||||
description: 'Additional wrapper classes for the dialog.',
|
||||
},
|
||||
isShow: {
|
||||
control: 'boolean',
|
||||
description: 'Controls whether the modal is visible.',
|
||||
},
|
||||
title: {
|
||||
control: 'text',
|
||||
description: 'Heading displayed at the top of the modal.',
|
||||
},
|
||||
description: {
|
||||
control: 'text',
|
||||
description: 'Secondary text beneath the title.',
|
||||
},
|
||||
closable: {
|
||||
control: 'boolean',
|
||||
description: 'Whether the close icon should be shown.',
|
||||
},
|
||||
overflowVisible: {
|
||||
control: 'boolean',
|
||||
description: 'Allows content to overflow the modal panel.',
|
||||
},
|
||||
highPriority: {
|
||||
control: 'boolean',
|
||||
description: 'Lifts the modal above other high z-index elements like dropdowns.',
|
||||
},
|
||||
onClose: {
|
||||
control: false,
|
||||
description: 'Callback invoked when the modal requests to close.',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
isShow: false,
|
||||
title: 'Create new API key',
|
||||
description: 'Generate a scoped key for this workspace. You can revoke it at any time.',
|
||||
closable: true,
|
||||
},
|
||||
} satisfies Meta<typeof Modal>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
const ModalDemo = (props: React.ComponentProps<typeof Modal>) => {
|
||||
const [open, setOpen] = useState(props.isShow)
|
||||
|
||||
useEffect(() => {
|
||||
setOpen(props.isShow)
|
||||
}, [props.isShow])
|
||||
|
||||
return (
|
||||
<div className="relative flex h-[480px] items-center justify-center bg-gray-100">
|
||||
<button
|
||||
className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
Show modal
|
||||
</button>
|
||||
|
||||
<Modal
|
||||
{...props}
|
||||
isShow={open}
|
||||
onClose={() => {
|
||||
props.onClose?.()
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<div className="mt-6 space-y-4 text-sm text-gray-600">
|
||||
<p>
|
||||
Provide a descriptive name for this key so collaborators know its purpose. Restrict usage with scopes to limit access.
|
||||
</p>
|
||||
<div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
|
||||
Form fields and validation messaging would appear here. This placeholder keeps the story lightweight.
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 flex justify-end gap-3">
|
||||
<button
|
||||
className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
|
||||
Create key
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const Default: Story = {
|
||||
render: args => <ModalDemo {...args} />,
|
||||
}
|
||||
|
||||
export const HighPriorityOverflow: Story = {
|
||||
render: args => <ModalDemo {...args} />,
|
||||
args: {
|
||||
highPriority: true,
|
||||
overflowVisible: true,
|
||||
description: 'Demonstrates the modal configured to sit above dropdowns while letting the body content overflow.',
|
||||
className: 'max-w-[540px]',
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Shows the modal with `highPriority` and `overflowVisible` enabled, useful when nested within complex surfaces.',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||||
import { useEffect, useState } from 'react'
|
||||
import Modal from './modal'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Dialog/RichModal',
|
||||
component: Modal,
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Full-featured modal with header, subtitle, customizable footer buttons, and optional extra action.',
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
size: {
|
||||
control: 'radio',
|
||||
options: ['sm', 'md'],
|
||||
description: 'Defines the panel width.',
|
||||
},
|
||||
title: {
|
||||
control: 'text',
|
||||
description: 'Primary heading text.',
|
||||
},
|
||||
subTitle: {
|
||||
control: 'text',
|
||||
description: 'Secondary text below the title.',
|
||||
},
|
||||
confirmButtonText: {
|
||||
control: 'text',
|
||||
description: 'Label for the confirm button.',
|
||||
},
|
||||
cancelButtonText: {
|
||||
control: 'text',
|
||||
description: 'Label for the cancel button.',
|
||||
},
|
||||
showExtraButton: {
|
||||
control: 'boolean',
|
||||
description: 'Whether to render the extra button.',
|
||||
},
|
||||
extraButtonText: {
|
||||
control: 'text',
|
||||
description: 'Label for the extra button.',
|
||||
},
|
||||
extraButtonVariant: {
|
||||
control: 'select',
|
||||
options: ['primary', 'warning', 'secondary', 'secondary-accent', 'ghost', 'ghost-accent', 'tertiary'],
|
||||
description: 'Visual style for the extra button.',
|
||||
},
|
||||
disabled: {
|
||||
control: 'boolean',
|
||||
description: 'Disables footer actions when true.',
|
||||
},
|
||||
footerSlot: {
|
||||
control: false,
|
||||
},
|
||||
bottomSlot: {
|
||||
control: false,
|
||||
},
|
||||
onClose: {
|
||||
control: false,
|
||||
description: 'Handler fired when the close icon or backdrop is clicked.',
|
||||
},
|
||||
onConfirm: {
|
||||
control: false,
|
||||
description: 'Handler fired when confirm is pressed.',
|
||||
},
|
||||
onCancel: {
|
||||
control: false,
|
||||
description: 'Handler fired when cancel is pressed.',
|
||||
},
|
||||
onExtraButtonClick: {
|
||||
control: false,
|
||||
description: 'Handler fired when the extra button is pressed.',
|
||||
},
|
||||
children: {
|
||||
control: false,
|
||||
},
|
||||
},
|
||||
args: {
|
||||
size: 'sm',
|
||||
title: 'Delete integration',
|
||||
subTitle: 'Disabling this integration will revoke access tokens and webhooks.',
|
||||
confirmButtonText: 'Delete integration',
|
||||
cancelButtonText: 'Cancel',
|
||||
showExtraButton: false,
|
||||
extraButtonText: 'Disable temporarily',
|
||||
extraButtonVariant: 'warning',
|
||||
disabled: false,
|
||||
onClose: () => console.log('Modal closed'),
|
||||
onConfirm: () => console.log('Confirm pressed'),
|
||||
onCancel: () => console.log('Cancel pressed'),
|
||||
onExtraButtonClick: () => console.log('Extra button pressed'),
|
||||
},
|
||||
} satisfies Meta<typeof Modal>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
type ModalProps = React.ComponentProps<typeof Modal>
|
||||
|
||||
const ModalDemo = (props: ModalProps) => {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (props.disabled && open)
|
||||
setOpen(false)
|
||||
}, [props.disabled, open])
|
||||
|
||||
const {
|
||||
onClose,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
onExtraButtonClick,
|
||||
children,
|
||||
...rest
|
||||
} = props
|
||||
|
||||
const handleClose = () => {
|
||||
onClose?.()
|
||||
setOpen(false)
|
||||
}
|
||||
|
||||
const handleConfirm = () => {
|
||||
onConfirm?.()
|
||||
setOpen(false)
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
onCancel?.()
|
||||
setOpen(false)
|
||||
}
|
||||
|
||||
const handleExtra = () => {
|
||||
onExtraButtonClick?.()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative flex h-[480px] items-center justify-center bg-gray-100">
|
||||
<button
|
||||
className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
Show rich modal
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<Modal
|
||||
{...rest}
|
||||
onClose={handleClose}
|
||||
onConfirm={handleConfirm}
|
||||
onCancel={handleCancel}
|
||||
onExtraButtonClick={handleExtra}
|
||||
children={children ?? (
|
||||
<div className="space-y-4 text-sm text-gray-600">
|
||||
<p>
|
||||
Removing integrations immediately stops workflow automations related to this connection.
|
||||
Make sure no scheduled jobs depend on this integration before proceeding.
|
||||
</p>
|
||||
<ul className="list-disc space-y-1 pl-4 text-xs text-gray-500">
|
||||
<li>All API credentials issued by this integration will be revoked.</li>
|
||||
<li>Historical logs remain accessible for auditing.</li>
|
||||
<li>You can re-enable the integration later with fresh credentials.</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const Default: Story = {
|
||||
render: args => <ModalDemo {...args} />,
|
||||
}
|
||||
|
||||
export const WithExtraAction: Story = {
|
||||
render: args => <ModalDemo {...args} />,
|
||||
args: {
|
||||
showExtraButton: true,
|
||||
extraButtonVariant: 'secondary',
|
||||
extraButtonText: 'Disable only',
|
||||
footerSlot: (
|
||||
<span className="text-xs text-gray-400">Last synced 5 minutes ago</span>
|
||||
),
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Illustrates the optional extra button and footer slot for advanced workflows.',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const MediumSized: Story = {
|
||||
render: args => <ModalDemo {...args} />,
|
||||
args: {
|
||||
size: 'md',
|
||||
subTitle: 'Use the larger width to surface forms with more fields or supporting descriptions.',
|
||||
bottomSlot: (
|
||||
<div className="border-t border-divider-subtle bg-components-panel-bg px-6 py-4 text-xs text-gray-500">
|
||||
Need finer control? Configure automation rules in the integration settings page.
|
||||
</div>
|
||||
),
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Shows the medium sized panel and a populated `bottomSlot` for supplemental messaging.',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||||
import { useEffect } from 'react'
|
||||
import type { ComponentProps } from 'react'
|
||||
import AudioBtn from '.'
|
||||
import { ensureMockAudioManager } from '../../../../.storybook/utils/audio-player-manager.mock'
|
||||
|
||||
ensureMockAudioManager()
|
||||
|
||||
const StoryWrapper = (props: ComponentProps<typeof AudioBtn>) => {
|
||||
useEffect(() => {
|
||||
ensureMockAudioManager()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center space-x-3">
|
||||
<AudioBtn {...props} />
|
||||
<span className="text-xs text-gray-500">Audio toggle using ActionButton styling</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Button/NewAudioButton',
|
||||
component: AudioBtn,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Updated audio playback trigger styled with `ActionButton`. Behaves like the legacy audio button but adopts the new button design system.',
|
||||
},
|
||||
},
|
||||
nextjs: {
|
||||
appDirectory: true,
|
||||
navigation: {
|
||||
pathname: '/apps/demo-app/text-to-audio',
|
||||
params: { appId: 'demo-app' },
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
id: {
|
||||
control: 'text',
|
||||
description: 'Message identifier used by the audio request.',
|
||||
},
|
||||
value: {
|
||||
control: 'text',
|
||||
description: 'Prompt or response text that will be converted to speech.',
|
||||
},
|
||||
voice: {
|
||||
control: 'text',
|
||||
description: 'Voice profile for the generated speech.',
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof AudioBtn>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
render: args => <StoryWrapper {...args} />,
|
||||
args: {
|
||||
id: 'message-1',
|
||||
value: 'Listen to the latest assistant message.',
|
||||
voice: 'alloy',
|
||||
},
|
||||
}
|
||||
|
|
@ -25,7 +25,7 @@ const PromptEditorMock = ({ value, onChange, placeholder, editable, compact, cla
|
|||
}
|
||||
|
||||
const meta = {
|
||||
title: 'Base/PromptEditor',
|
||||
title: 'Base/Input/PromptEditor',
|
||||
component: PromptEditorMock,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { RiCloudLine, RiCpuLine, RiDatabase2Line, RiLightbulbLine, RiRocketLine,
|
|||
import RadioCard from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/RadioCard',
|
||||
title: 'Base/Input/RadioCard',
|
||||
component: RadioCard,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { useState } from 'react'
|
|||
import Radio from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Radio',
|
||||
title: 'Base/Input/Radio',
|
||||
component: Radio,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { useState } from 'react'
|
|||
import SearchInput from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/SearchInput',
|
||||
title: 'Base/Input/SearchInput',
|
||||
component: SearchInput,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import Select, { PortalSelect, SimpleSelect } from '.'
|
|||
import type { Item } from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Select',
|
||||
title: 'Base/Input/Select',
|
||||
component: SimpleSelect,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { useState } from 'react'
|
|||
import Slider from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Slider',
|
||||
title: 'Base/Input/Slider',
|
||||
component: Slider,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { useState } from 'react'
|
|||
import Switch from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Switch',
|
||||
title: 'Base/Input/Switch',
|
||||
component: Switch,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { useState } from 'react'
|
|||
import TagInput from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/TagInput',
|
||||
title: 'Base/Input/TagInput',
|
||||
component: TagInput,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { useState } from 'react'
|
|||
import Textarea from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Textarea',
|
||||
title: 'Base/Input/Textarea',
|
||||
component: Textarea,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ const VoiceInputMock = ({ onConverted, onCancel }: any) => {
|
|||
}
|
||||
|
||||
const meta = {
|
||||
title: 'Base/VoiceInput',
|
||||
title: 'Base/Input/VoiceInput',
|
||||
component: VoiceInputMock,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ const ValidatedUserCard = withValidation(UserCard, userSchema)
|
|||
const ValidatedProductCard = withValidation(ProductCard, productSchema)
|
||||
|
||||
const meta = {
|
||||
title: 'Base/WithInputValidation',
|
||||
title: 'Base/Input/WithInputValidation',
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
docs: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue