dify

dify/web/app/components/base/divider/index.spec.tsx

@@ -0,0 +1,55 @@
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import Divider from './index'
+
+describe('Divider', () => {
+  it('renders with default props', () => {
+    const { container } = render(<Divider />)
+    const divider = container.firstChild as HTMLElement
+    expect(divider).toHaveClass('w-full h-[0.5px] my-2')
+    expect(divider).toHaveClass('bg-divider-regular')
+  })
+
+  it('renders horizontal solid divider correctly', () => {
+    const { container } = render(<Divider type="horizontal" bgStyle="solid" />)
+    const divider = container.firstChild as HTMLElement
+    expect(divider).toHaveClass('w-full h-[0.5px] my-2')
+    expect(divider).toHaveClass('bg-divider-regular')
+  })
+
+  it('renders vertical solid divider correctly', () => {
+    const { container } = render(<Divider type="vertical" bgStyle="solid" />)
+    const divider = container.firstChild as HTMLElement
+    expect(divider).toHaveClass('w-[1px] h-full mx-2')
+    expect(divider).toHaveClass('bg-divider-regular')
+  })
+
+  it('renders horizontal gradient divider correctly', () => {
+    const { container } = render(<Divider type="horizontal" bgStyle="gradient" />)
+    const divider = container.firstChild as HTMLElement
+    expect(divider).toHaveClass('w-full h-[0.5px] my-2')
+    expect(divider).toHaveClass('bg-gradient-to-r from-divider-regular to-background-gradient-mask-transparent')
+  })
+
+  it('renders vertical gradient divider correctly', () => {
+    const { container } = render(<Divider type="vertical" bgStyle="gradient" />)
+    const divider = container.firstChild as HTMLElement
+    expect(divider).toHaveClass('w-[1px] h-full mx-2')
+    expect(divider).toHaveClass('bg-gradient-to-r from-divider-regular to-background-gradient-mask-transparent')
+  })
+
+  it('applies custom className correctly', () => {
+    const customClass = 'test-custom-class'
+    const { container } = render(<Divider className={customClass} />)
+    const divider = container.firstChild as HTMLElement
+    expect(divider).toHaveClass(customClass)
+    expect(divider).toHaveClass('w-full h-[0.5px] my-2')
+  })
+
+  it('applies custom style correctly', () => {
+    const customStyle = { margin: '10px' }
+    const { container } = render(<Divider style={customStyle} />)
+    const divider = container.firstChild as HTMLElement
+    expect(divider).toHaveStyle('margin: 10px')
+  })
+})

dify/web/app/components/base/divider/index.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import Divider from '.'
+
+const meta = {
+  title: 'Base/Layout/Divider',
+  component: Divider,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Lightweight separator supporting horizontal and vertical orientations with gradient or solid backgrounds.',
+      },
+      source: {
+        language: 'tsx',
+        code: `
+<Divider />
+        `.trim(),
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Divider>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Horizontal: Story = {}
+
+export const Vertical: Story = {
+  render: args => (
+    <div className="flex h-20 items-center gap-4 rounded-lg border border-divider-subtle bg-components-panel-bg p-4">
+      <span className="text-sm text-text-secondary">Filters</span>
+      <Divider {...args} type="vertical" />
+      <span className="text-sm text-text-secondary">Tags</span>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<Divider type="vertical" />
+        `.trim(),
+      },
+    },
+  },
+}

dify/web/app/components/base/divider/index.tsx

@@ -0,0 +1,36 @@
+import type { CSSProperties, FC } from 'react'
+import React from 'react'
+import { type VariantProps, cva } from 'class-variance-authority'
+import classNames from '@/utils/classnames'
+
+const dividerVariants = cva('',
+  {
+    variants: {
+      type: {
+        horizontal: 'w-full h-[0.5px] my-2 ',
+        vertical: 'w-[1px] h-full mx-2',
+      },
+      bgStyle: {
+        gradient: 'bg-gradient-to-r from-divider-regular to-background-gradient-mask-transparent',
+        solid: 'bg-divider-regular',
+      },
+    },
+    defaultVariants: {
+      type: 'horizontal',
+      bgStyle: 'solid',
+    },
+  },
+)
+
+export type DividerProps = {
+  className?: string
+  style?: CSSProperties
+} & VariantProps<typeof dividerVariants>
+
+const Divider: FC<DividerProps> = ({ type, bgStyle, className = '', style }) => {
+  return (
+    <div className={classNames(dividerVariants({ type, bgStyle }), 'shrink-0', className)} style={style}></div>
+  )
+}
+
+export default Divider