feat(storybook): add ComfyNode admin components stories

- Add ComfyNodeEditModal.stories.tsx for modal component testing
- Add ComfyNodePolicyBadge.stories.tsx for policy badge variants
- Add ComfyNodeTable.stories.tsx for admin table component
- Add ComfyNodesManage.stories.tsx for full page story
- Export ComfyNodeEditModal component for reusability

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: snomiao

pages/admin/comfy-nodes.tsx

@@ -49,7 +49,7 @@ interface FormData {
     policy: ComfyNodePolicy
 }
 
-function ComfyNodeEditModal({
+export function ComfyNodeEditModal({
     isOpen,
     onClose,
     comfyNode,
@@ -93,8 +93,8 @@ function ComfyNodeEditModal({
                 return_types: data.return_types,
                 output_is_list: data.output_is_list
                     ? data.output_is_list
-                        .split(',')
-                        .map((s) => s.trim() === 'true')
+                          .split(',')
+                          .map((s) => s.trim() === 'true')
                     : undefined,
                 deprecated: data.deprecated,
                 experimental: data.experimental,

src/stories/components/admin/ComfyNodeEditModal.stories.tsx

@@ -0,0 +1,129 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { useState } from 'react'
+import { Button } from 'flowbite-react'
+import { ComfyNode, ComfyNodePolicy } from '@/src/api/generated'
+
+// Import the modal component directly from the page file
+import { ComfyNodeEditModal } from '@/pages/admin/comfy-nodes'
+
+// Mock ComfyNode data
+const mockComfyNode: ComfyNode = {
+    comfy_node_name: 'TestNode',
+    category: 'Image Processing',
+    description: 'A test node for image processing operations',
+    function: 'process_image',
+    input_types: 'IMAGE, CONDITIONING',
+    return_names: 'image, mask',
+    return_types: 'IMAGE, MASK',
+    output_is_list: [false, true],
+    deprecated: false,
+    experimental: false,
+    policy: ComfyNodePolicy.ComfyNodePolicyActive,
+}
+
+const mockDeprecatedNode: ComfyNode = {
+    ...mockComfyNode,
+    comfy_node_name: 'DeprecatedNode',
+    category: 'Legacy',
+    description: 'An old node that should not be used anymore',
+    deprecated: true,
+    policy: ComfyNodePolicy.ComfyNodePolicyBanned,
+}
+
+const mockExperimentalNode: ComfyNode = {
+    ...mockComfyNode,
+    comfy_node_name: 'ExperimentalNode',
+    category: 'Research',
+    description: 'An experimental node for testing new features',
+    experimental: true,
+    policy: ComfyNodePolicy.ComfyNodePolicyLocalOnly,
+}
+
+// Wrapper component to handle modal state
+const ModalWrapper = ({
+    comfyNode,
+    nodeId = 'test-node',
+    version = '1.0.0',
+}) => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    return (
+        <div>
+            <Button onClick={() => setIsOpen(true)}>Open Edit Modal</Button>
+            <ComfyNodeEditModal
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+                comfyNode={comfyNode}
+                nodeId={nodeId}
+                version={version}
+                onSuccess={() => {
+                    console.log('Edit successful!')
+                    setIsOpen(false)
+                }}
+            />
+        </div>
+    )
+}
+
+const meta: Meta<typeof ModalWrapper> = {
+    title: 'Components/Admin/ComfyNodeEditModal',
+    component: ModalWrapper,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (
+            <div className="dark min-h-screen bg-gray-900 p-4">
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export default meta
+type Story = StoryObj<typeof ModalWrapper>
+
+export const Default: Story = {
+    args: {
+        comfyNode: mockComfyNode,
+        nodeId: 'test-node',
+        version: '1.0.0',
+    },
+}
+
+export const DeprecatedNode: Story = {
+    args: {
+        comfyNode: mockDeprecatedNode,
+        nodeId: 'deprecated-node',
+        version: '0.9.0',
+    },
+}
+
+export const ExperimentalNode: Story = {
+    args: {
+        comfyNode: mockExperimentalNode,
+        nodeId: 'experimental-node',
+        version: '2.0.0-alpha',
+    },
+}
+
+export const MinimalNode: Story = {
+    args: {
+        comfyNode: {
+            comfy_node_name: 'MinimalNode',
+            category: '',
+            description: '',
+            function: '',
+            input_types: '',
+            return_names: '',
+            return_types: '',
+            output_is_list: [],
+            deprecated: false,
+            experimental: false,
+            policy: ComfyNodePolicy.ComfyNodePolicyActive,
+        },
+        nodeId: 'minimal-node',
+        version: '1.0.0',
+    },
+}

src/stories/components/admin/ComfyNodePolicyBadge.stories.tsx

@@ -0,0 +1,99 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { Badge } from 'flowbite-react'
+import { ComfyNodePolicy } from '@/src/api/generated'
+
+// Component that mimics the policy badge logic from the admin page
+const ComfyNodePolicyBadge = ({ policy }: { policy?: ComfyNodePolicy }) => {
+    const getPolicyBadgeColor = (policy: ComfyNodePolicy) => {
+        switch (policy) {
+            case ComfyNodePolicy.ComfyNodePolicyActive:
+                return 'success'
+            case ComfyNodePolicy.ComfyNodePolicyBanned:
+                return 'failure'
+            case ComfyNodePolicy.ComfyNodePolicyLocalOnly:
+                return 'warning'
+            default:
+                return 'gray'
+        }
+    }
+
+    const getPolicyLabel = (policy: ComfyNodePolicy) => {
+        switch (policy) {
+            case ComfyNodePolicy.ComfyNodePolicyActive:
+                return 'Active'
+            case ComfyNodePolicy.ComfyNodePolicyBanned:
+                return 'Banned'
+            case ComfyNodePolicy.ComfyNodePolicyLocalOnly:
+                return 'Local Only'
+            default:
+                return 'Unknown'
+        }
+    }
+
+    return (
+        <Badge color={policy ? getPolicyBadgeColor(policy) : 'gray'} size="sm">
+            {policy ? getPolicyLabel(policy) : 'No Policy'}
+        </Badge>
+    )
+}
+
+const meta: Meta<typeof ComfyNodePolicyBadge> = {
+    title: 'Components/Admin/ComfyNodePolicyBadge',
+    component: ComfyNodePolicyBadge,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (
+            <div className="dark bg-gray-900 p-4">
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export default meta
+type Story = StoryObj<typeof ComfyNodePolicyBadge>
+
+export const Active: Story = {
+    args: {
+        policy: ComfyNodePolicy.ComfyNodePolicyActive,
+    },
+}
+
+export const Banned: Story = {
+    args: {
+        policy: ComfyNodePolicy.ComfyNodePolicyBanned,
+    },
+}
+
+export const LocalOnly: Story = {
+    args: {
+        policy: ComfyNodePolicy.ComfyNodePolicyLocalOnly,
+    },
+}
+
+export const NoPolicy: Story = {
+    args: {
+        policy: undefined,
+    },
+}
+
+// Show all variants together
+export const AllVariants: Story = {
+    render: () => (
+        <div className="flex gap-2 flex-wrap">
+            <ComfyNodePolicyBadge
+                policy={ComfyNodePolicy.ComfyNodePolicyActive}
+            />
+            <ComfyNodePolicyBadge
+                policy={ComfyNodePolicy.ComfyNodePolicyBanned}
+            />
+            <ComfyNodePolicyBadge
+                policy={ComfyNodePolicy.ComfyNodePolicyLocalOnly}
+            />
+            <ComfyNodePolicyBadge policy={undefined} />
+        </div>
+    ),
+}