dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/components/base/toast/index.stories.tsx
+++ b/dify/web/app/components/base/toast/index.stories.tsx
@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useCallback } from 'react'
+import Toast, { ToastProvider, useToastContext } from '.'
+
+const ToastControls = () => {
+  const { notify } = useToastContext()
+
+  const trigger = useCallback((type: 'success' | 'error' | 'warning' | 'info') => {
+    notify({
+      type,
+      message: `This is a ${type} toast`,
+      children: type === 'info' ? 'Additional details can live here.' : undefined,
+    })
+  }, [notify])
+
+  return (
+    <div className="flex flex-wrap gap-3">
+      <button
+        type="button"
+        className="rounded-md border border-divider-subtle bg-background-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
+        onClick={() => trigger('success')}
+      >
+        Success
+      </button>
+      <button
+        type="button"
+        className="rounded-md border border-divider-subtle bg-background-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
+        onClick={() => trigger('info')}
+      >
+        Info
+      </button>
+      <button
+        type="button"
+        className="rounded-md border border-divider-subtle bg-background-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
+        onClick={() => trigger('warning')}
+      >
+        Warning
+      </button>
+      <button
+        type="button"
+        className="rounded-md border border-divider-subtle bg-background-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
+        onClick={() => trigger('error')}
+      >
+        Error
+      </button>
+    </div>
+  )
+}
+
+const ToastProviderDemo = () => {
+  return (
+    <ToastProvider>
+      <div className="flex w-full max-w-md flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
+        <div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Toast provider</div>
+        <ToastControls />
+      </div>
+    </ToastProvider>
+  )
+}
+
+const StaticToastDemo = () => {
+  return (
+    <div className="flex w-full max-w-md flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
+      <div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Static API</div>
+      <button
+        type="button"
+        className="self-start rounded-md border border-divider-subtle bg-background-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
+        onClick={() => {
+          const handle = Toast.notify({
+            type: 'success',
+            message: 'Saved changes',
+            duration: 2000,
+          })
+          setTimeout(() => handle.clear?.(), 2500)
+        }}
+      >
+        Trigger Toast.notify()
+      </button>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Feedback/Toast',
+  component: ToastProviderDemo,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'ToastProvider based notifications and the static Toast.notify helper. Buttons showcase each toast variant.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ToastProviderDemo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Provider: Story = {}
+
+export const StaticApi: Story = {
+  render: () => <StaticToastDemo />,
+}