chore: improve storybooks (#27306)
This commit is contained in:
非法操作
133
web/app/components/base/modal/index.stories.tsx
Normal file
133
web/app/components/base/modal/index.stories.tsx
Normal file
@@ -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.',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
216
web/app/components/base/modal/modal.stories.tsx
Normal file
216
web/app/components/base/modal/modal.stories.tsx
Normal file
@@ -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.',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user