mirror of
https://github.com/langgenius/dify.git
synced 2025-11-26 09:53:26 +00:00
52 lines
1.6 KiB
XML
52 lines
1.6 KiB
XML
import type { Meta, StoryObj } from '@storybook/nextjs'
|
|
import SVGRenderer from '.'
|
|
|
|
const SAMPLE_SVG = `
|
|
<svg width="400" height="280" viewBox="0 0 400 280" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#D1E9FF"/>
|
|
<stop offset="100%" stop-color="#FBE8FF"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="400" height="280" rx="24" fill="url(#bg)"/>
|
|
<g font-family="sans-serif" fill="#1F2937" text-anchor="middle">
|
|
<text x="200" y="120" font-size="32" font-weight="600">SVG Preview</text>
|
|
<text x="200" y="160" font-size="16">Click to open high-resolution preview</text>
|
|
</g>
|
|
<circle cx="320" cy="70" r="28" fill="#E0F2FE" stroke="#2563EB" stroke-width="4"/>
|
|
<circle cx="80" cy="200" r="18" fill="#FDE68A" stroke="#CA8A04" stroke-width="4"/>
|
|
<rect x="120" y="190" width="160" height="48" rx="12" fill="#FFF" opacity="0.85"/>
|
|
<text x="200" y="220" font-size="16" font-weight="500">Inline SVG asset</text>
|
|
</svg>
|
|
`.trim()
|
|
|
|
const meta = {
|
|
title: 'Base/Data Display/SVGRenderer',
|
|
component: SVGRenderer,
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: 'Renders sanitized SVG markup with zoom-to-preview capability.',
|
|
},
|
|
source: {
|
|
language: 'tsx',
|
|
code: `
|
|
<SVGRenderer content={\`
|
|
<svg width="400" height="280" ...>...</svg>
|
|
\`} />
|
|
`.trim(),
|
|
},
|
|
},
|
|
},
|
|
tags: ['autodocs'],
|
|
args: {
|
|
content: SAMPLE_SVG,
|
|
},
|
|
} satisfies Meta<typeof SVGRenderer>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {}
|