dify
This commit is contained in:
152
dify/web/app/components/base/dialog/index.stories.tsx
Normal file
152
dify/web/app/components/base/dialog/index.stories.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||||
import { useEffect, useState } from 'react'
|
||||
import Dialog from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Feedback/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,
|
||||
children: null,
|
||||
},
|
||||
} 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.',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
81
dify/web/app/components/base/dialog/index.tsx
Normal file
81
dify/web/app/components/base/dialog/index.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import { Fragment, useCallback } from 'react'
|
||||
import type { ElementType, ReactNode } from 'react'
|
||||
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
|
||||
import classNames from '@/utils/classnames'
|
||||
|
||||
// https://headlessui.com/react/dialog
|
||||
|
||||
type DialogProps = {
|
||||
className?: string
|
||||
titleClassName?: string
|
||||
bodyClassName?: string
|
||||
footerClassName?: string
|
||||
titleAs?: ElementType
|
||||
title?: ReactNode
|
||||
children: ReactNode
|
||||
footer?: ReactNode
|
||||
show: boolean
|
||||
onClose?: () => void
|
||||
}
|
||||
|
||||
const CustomDialog = ({
|
||||
className,
|
||||
titleClassName,
|
||||
bodyClassName,
|
||||
footerClassName,
|
||||
titleAs,
|
||||
title,
|
||||
children,
|
||||
footer,
|
||||
show,
|
||||
onClose,
|
||||
}: DialogProps) => {
|
||||
const close = useCallback(() => onClose?.(), [onClose])
|
||||
return (
|
||||
<Transition appear show={show} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-40" onClose={close}>
|
||||
<TransitionChild>
|
||||
<div className={classNames(
|
||||
'fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]',
|
||||
'duration-300 ease-in data-[closed]:opacity-0',
|
||||
'data-[enter]:opacity-100',
|
||||
'data-[leave]:opacity-0',
|
||||
)} />
|
||||
</TransitionChild>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center">
|
||||
<TransitionChild>
|
||||
<DialogPanel className={classNames(
|
||||
'w-full max-w-[800px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl transition-all',
|
||||
'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
|
||||
'data-[enter]:scale-100 data-[enter]:opacity-100',
|
||||
'data-[enter]:scale-95 data-[leave]:opacity-0',
|
||||
className,
|
||||
)}>
|
||||
{Boolean(title) && (
|
||||
<DialogTitle
|
||||
as={titleAs || 'h3'}
|
||||
className={classNames('title-2xl-semi-bold pb-3 pr-8 text-text-primary', titleClassName)}
|
||||
>
|
||||
{title}
|
||||
</DialogTitle>
|
||||
)}
|
||||
<div className={classNames(bodyClassName)}>
|
||||
{children}
|
||||
</div>
|
||||
{Boolean(footer) && (
|
||||
<div className={classNames('flex items-center justify-end gap-2 px-6 pb-6 pt-3', footerClassName)}>
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition >
|
||||
)
|
||||
}
|
||||
|
||||
export default CustomDialog
|
||||
Reference in New Issue
Block a user