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/notion-icon/index.stories.tsx
+++ b/dify/web/app/components/base/notion-icon/index.stories.tsx
@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import NotionIcon from '.'
+
+const meta = {
+  title: 'Base/General/NotionIcon',
+  component: NotionIcon,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Renders workspace and page icons returned from Notion APIs, falling back to text initials or the default document glyph.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  args: {
+    type: 'workspace',
+    name: 'Knowledge Base',
+    src: 'https://cloud.dify.ai/logo/logo.svg',
+  },
+} satisfies Meta<typeof NotionIcon>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const WorkspaceIcon: Story = {
+  render: args => (
+    <div className="flex items-center gap-3 rounded-lg border border-divider-subtle bg-components-panel-bg p-4">
+      <NotionIcon {...args} />
+      <span className="text-sm text-text-secondary">Workspace icon pulled from a remote URL.</span>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<NotionIcon
+  type="workspace"
+  name="Knowledge Base"
+  src="https://cloud.dify.ai/logo/logo.svg"
+/>`
+          .trim(),
+      },
+    },
+  },
+}
+
+export const WorkspaceInitials: Story = {
+  render: args => (
+    <div className="flex items-center gap-3 rounded-lg border border-divider-subtle bg-components-panel-bg p-4">
+      <NotionIcon {...args} src={null} name="Operations" />
+      <span className="text-sm text-text-secondary">Fallback initial rendered when no icon URL is available.</span>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<NotionIcon type="workspace" name="Operations" src={null} />`
+          .trim(),
+      },
+    },
+  },
+}
+
+export const PageEmoji: Story = {
+  render: args => (
+    <div className="flex items-center gap-3 rounded-lg border border-divider-subtle bg-components-panel-bg p-4">
+      <NotionIcon {...args} type="page" src={{ type: 'emoji', emoji: '🧠', url: '' }} />
+      <span className="text-sm text-text-secondary">Page-level emoji icon returned by the API.</span>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<NotionIcon type="page" src={{ type: 'emoji', emoji: '🧠' }} />`
+          .trim(),
+      },
+    },
+  },
+}
+
+export const PageImage: Story = {
+  render: args => (
+    <div className="flex items-center gap-3 rounded-lg border border-divider-subtle bg-components-panel-bg p-4">
+      <NotionIcon
+        {...args}
+        type="page"
+        src={{ type: 'url', url: 'https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=80&q=60', emoji: '' }}
+      />
+      <span className="text-sm text-text-secondary">Page icon resolved from an image URL.</span>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<NotionIcon
+  type="page"
+  src={{ type: 'url', url: 'https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=80&q=60' }}
+/>`
+          .trim(),
+      },
+    },
+  },
+}
+
+export const DefaultIcon: Story = {
+  render: args => (
+    <div className="flex items-center gap-3 rounded-lg border border-divider-subtle bg-components-panel-bg p-4">
+      <NotionIcon {...args} type="page" src={undefined} />
+      <span className="text-sm text-text-secondary">When neither emoji nor URL is provided, the generic document icon is shown.</span>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<NotionIcon type="page" src={undefined} />`
+          .trim(),
+      },
+    },
+  },
+}