@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-network-topology/WakaNetworkTopology.stories.tsx

@@ -0,0 +1,364 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaNetworkTopology } from './index'
+import type { NetworkNode, NetworkEdge } from './index'
+import * as React from 'react'
+
+const simpleTopologyNodes: NetworkNode[] = [
+  { id: 'lb', label: 'Load Balancer', type: 'loadbalancer', status: 'healthy', x: 400, y: 100 },
+  { id: 'web1', label: 'Web Server 1', type: 'server', status: 'healthy', x: 200, y: 250, metrics: { cpu: 45, memory: 62, connections: 1240 } },
+  { id: 'web2', label: 'Web Server 2', type: 'server', status: 'healthy', x: 400, y: 250, metrics: { cpu: 52, memory: 58, connections: 1180 } },
+  { id: 'web3', label: 'Web Server 3', type: 'server', status: 'warning', x: 600, y: 250, metrics: { cpu: 78, memory: 85, connections: 1450 } },
+  { id: 'db', label: 'Database', type: 'database', status: 'healthy', x: 400, y: 400, metrics: { cpu: 35, memory: 72, connections: 450 } },
+]
+
+const simpleTopologyEdges: NetworkEdge[] = [
+  { source: 'lb', target: 'web1', latency: 2, traffic: 'medium', status: 'active' },
+  { source: 'lb', target: 'web2', latency: 3, traffic: 'high', status: 'active' },
+  { source: 'lb', target: 'web3', latency: 5, traffic: 'medium', status: 'degraded' },
+  { source: 'web1', target: 'db', latency: 8, traffic: 'medium', status: 'active' },
+  { source: 'web2', target: 'db', latency: 7, traffic: 'high', status: 'active' },
+  { source: 'web3', target: 'db', latency: 12, traffic: 'low', status: 'active' },
+]
+
+const complexTopologyNodes: NetworkNode[] = [
+  // Edge layer
+  { id: 'fw1', label: 'Firewall', type: 'firewall', status: 'healthy', x: 400, y: 50 },
+
+  // Load balancers
+  { id: 'lb1', label: 'LB Primary', type: 'loadbalancer', status: 'healthy', x: 250, y: 150 },
+  { id: 'lb2', label: 'LB Secondary', type: 'loadbalancer', status: 'healthy', x: 550, y: 150 },
+
+  // Application servers
+  { id: 'app1', label: 'App Server 1', type: 'server', status: 'healthy', x: 150, y: 280, metrics: { cpu: 42, memory: 58 } },
+  { id: 'app2', label: 'App Server 2', type: 'server', status: 'healthy', x: 350, y: 280, metrics: { cpu: 38, memory: 52 } },
+  { id: 'app3', label: 'App Server 3', type: 'server', status: 'warning', x: 550, y: 280, metrics: { cpu: 85, memory: 78 } },
+  { id: 'app4', label: 'App Server 4', type: 'server', status: 'error', x: 750, y: 280, metrics: { cpu: 95, memory: 92 } },
+
+  // Cache layer
+  { id: 'cache1', label: 'Redis Primary', type: 'database', status: 'healthy', x: 250, y: 400, metrics: { memory: 45 } },
+  { id: 'cache2', label: 'Redis Replica', type: 'database', status: 'healthy', x: 550, y: 400, metrics: { memory: 42 } },
+
+  // Database cluster
+  { id: 'db-primary', label: 'DB Primary', type: 'database', status: 'healthy', x: 300, y: 520, metrics: { cpu: 55, memory: 68 } },
+  { id: 'db-replica1', label: 'DB Replica 1', type: 'database', status: 'healthy', x: 500, y: 520, metrics: { cpu: 32, memory: 54 } },
+  { id: 'db-replica2', label: 'DB Replica 2', type: 'database', status: 'offline', x: 700, y: 520 },
+]
+
+const complexTopologyEdges: NetworkEdge[] = [
+  // Firewall to LBs
+  { source: 'fw1', target: 'lb1', latency: 1, traffic: 'high', status: 'active' },
+  { source: 'fw1', target: 'lb2', latency: 1, traffic: 'medium', status: 'active' },
+
+  // LBs to App servers
+  { source: 'lb1', target: 'app1', latency: 2, traffic: 'high', status: 'active' },
+  { source: 'lb1', target: 'app2', latency: 2, traffic: 'medium', status: 'active' },
+  { source: 'lb2', target: 'app3', latency: 3, traffic: 'medium', status: 'degraded' },
+  { source: 'lb2', target: 'app4', latency: 8, traffic: 'low', status: 'down' },
+
+  // App servers to cache
+  { source: 'app1', target: 'cache1', latency: 1, traffic: 'high', status: 'active' },
+  { source: 'app2', target: 'cache1', latency: 1, traffic: 'medium', status: 'active' },
+  { source: 'app3', target: 'cache2', latency: 2, traffic: 'medium', status: 'active' },
+  { source: 'app4', target: 'cache2', latency: 5, traffic: 'low', status: 'degraded' },
+
+  // Cache to cache (replication)
+  { source: 'cache1', target: 'cache2', latency: 1, traffic: 'low', status: 'active' },
+
+  // Cache to DB
+  { source: 'cache1', target: 'db-primary', latency: 3, traffic: 'medium', status: 'active' },
+  { source: 'cache2', target: 'db-primary', latency: 4, traffic: 'low', status: 'active' },
+
+  // DB replication
+  { source: 'db-primary', target: 'db-replica1', latency: 5, traffic: 'medium', status: 'active' },
+  { source: 'db-primary', target: 'db-replica2', latency: 0, traffic: 'low', status: 'down' },
+]
+
+const cloudTopologyNodes: NetworkNode[] = [
+  { id: 'internet', label: 'Internet', type: 'cloud', status: 'healthy', x: 400, y: 50 },
+  { id: 'cdn', label: 'CDN Edge', type: 'router', status: 'healthy', x: 200, y: 150 },
+  { id: 'waf', label: 'WAF', type: 'firewall', status: 'healthy', x: 400, y: 150 },
+  { id: 'api-gw', label: 'API Gateway', type: 'router', status: 'healthy', x: 600, y: 150 },
+  { id: 'k8s', label: 'K8s Cluster', type: 'cloud', status: 'healthy', x: 400, y: 280 },
+  { id: 'rds', label: 'RDS', type: 'database', status: 'healthy', x: 250, y: 400 },
+  { id: 'elasticache', label: 'ElastiCache', type: 'database', status: 'healthy', x: 550, y: 400 },
+]
+
+const cloudTopologyEdges: NetworkEdge[] = [
+  { source: 'internet', target: 'cdn', traffic: 'high', status: 'active' },
+  { source: 'internet', target: 'waf', traffic: 'high', status: 'active' },
+  { source: 'internet', target: 'api-gw', traffic: 'medium', status: 'active' },
+  { source: 'cdn', target: 'k8s', latency: 5, traffic: 'high', status: 'active' },
+  { source: 'waf', target: 'k8s', latency: 3, traffic: 'high', status: 'active' },
+  { source: 'api-gw', target: 'k8s', latency: 2, traffic: 'medium', status: 'active' },
+  { source: 'k8s', target: 'rds', latency: 4, traffic: 'medium', status: 'active' },
+  { source: 'k8s', target: 'elasticache', latency: 1, traffic: 'high', status: 'active' },
+]
+
+const meta: Meta<typeof WakaNetworkTopology> = {
+  title: 'Components/Charts/WakaNetworkTopology',
+  component: WakaNetworkTopology,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A network topology visualization for displaying infrastructure, showing nodes with status indicators, connections with latency/traffic metrics, and interactive features like zoom, pan, and selection.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showLatency: {
+      control: 'boolean',
+      description: 'Show latency labels on edges',
+    },
+    showTraffic: {
+      control: 'boolean',
+      description: 'Show traffic intensity on edges',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaNetworkTopology>
+
+export const Default: Story = {
+  args: {
+    nodes: simpleTopologyNodes,
+    edges: simpleTopologyEdges,
+  },
+  render: (args) => (
+    <div className="w-[800px] h-[500px]">
+      <WakaNetworkTopology {...args} />
+    </div>
+  ),
+}
+
+export const ComplexInfrastructure: Story = {
+  render: () => (
+    <div className="w-[900px] h-[650px]">
+      <WakaNetworkTopology
+        nodes={complexTopologyNodes}
+        edges={complexTopologyEdges}
+      />
+    </div>
+  ),
+}
+
+export const CloudArchitecture: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <WakaNetworkTopology
+        nodes={cloudTopologyNodes}
+        edges={cloudTopologyEdges}
+      />
+    </div>
+  ),
+}
+
+export const NoLatency: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <WakaNetworkTopology
+        nodes={simpleTopologyNodes}
+        edges={simpleTopologyEdges}
+        showLatency={false}
+      />
+    </div>
+  ),
+}
+
+export const NoTraffic: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <WakaNetworkTopology
+        nodes={simpleTopologyNodes}
+        edges={simpleTopologyEdges}
+        showTraffic={false}
+      />
+    </div>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <WakaNetworkTopology
+        nodes={simpleTopologyNodes}
+        edges={simpleTopologyEdges}
+        animated={false}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [selectedNode, setSelectedNode] = React.useState<string | undefined>()
+    const [selectedEdge, setSelectedEdge] = React.useState<{ source: string; target: string } | null>(null)
+
+    const selectedNodeData = simpleTopologyNodes.find((n) => n.id === selectedNode)
+    const selectedEdgeData = selectedEdge
+      ? simpleTopologyEdges.find((e) => e.source === selectedEdge.source && e.target === selectedEdge.target)
+      : null
+
+    return (
+      <div className="space-y-4">
+        <div className="w-[800px] h-[450px]">
+          <WakaNetworkTopology
+            nodes={simpleTopologyNodes}
+            edges={simpleTopologyEdges}
+            selectedNode={selectedNode}
+            onNodeClick={(nodeId) => {
+              setSelectedNode(selectedNode === nodeId ? undefined : nodeId)
+              setSelectedEdge(null)
+            }}
+            onEdgeClick={(source, target) => {
+              setSelectedEdge({ source, target })
+              setSelectedNode(undefined)
+            }}
+          />
+        </div>
+        {(selectedNodeData || selectedEdgeData) && (
+          <div className="p-4 border rounded-lg bg-muted/50">
+            {selectedNodeData && (
+              <div>
+                <h4 className="font-semibold">{selectedNodeData.label}</h4>
+                <p className="text-sm text-muted-foreground">
+                  Type: {selectedNodeData.type} | Status: {selectedNodeData.status}
+                </p>
+                {selectedNodeData.metrics && (
+                  <div className="mt-2 grid grid-cols-3 gap-4 text-sm">
+                    {selectedNodeData.metrics.cpu !== undefined && (
+                      <div>
+                        <span className="text-muted-foreground">CPU:</span> {selectedNodeData.metrics.cpu}%
+                      </div>
+                    )}
+                    {selectedNodeData.metrics.memory !== undefined && (
+                      <div>
+                        <span className="text-muted-foreground">Memory:</span> {selectedNodeData.metrics.memory}%
+                      </div>
+                    )}
+                    {selectedNodeData.metrics.connections !== undefined && (
+                      <div>
+                        <span className="text-muted-foreground">Connections:</span> {selectedNodeData.metrics.connections}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+            {selectedEdgeData && (
+              <div>
+                <h4 className="font-semibold">
+                  {selectedEdge?.source} → {selectedEdge?.target}
+                </h4>
+                <div className="mt-2 grid grid-cols-3 gap-4 text-sm">
+                  <div>
+                    <span className="text-muted-foreground">Latency:</span> {selectedEdgeData.latency}ms
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">Traffic:</span> {selectedEdgeData.traffic}
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">Status:</span> {selectedEdgeData.status}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    )
+  },
+}
+
+export const InfrastructureDashboard: Story = {
+  render: () => (
+    <div className="w-[950px] p-6 border rounded-lg">
+      <div className="flex justify-between items-start mb-4">
+        <div>
+          <h3 className="text-xl font-semibold">Production Infrastructure</h3>
+          <p className="text-sm text-muted-foreground">Real-time topology overview</p>
+        </div>
+        <div className="flex items-center gap-4 text-sm">
+          <div className="flex items-center gap-1.5">
+            <div className="w-2 h-2 rounded-full bg-green-500" />
+            <span>Healthy: 8</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div className="w-2 h-2 rounded-full bg-yellow-500" />
+            <span>Warning: 2</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div className="w-2 h-2 rounded-full bg-red-500" />
+            <span>Error: 1</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div className="w-2 h-2 rounded-full bg-gray-500" />
+            <span>Offline: 1</span>
+          </div>
+        </div>
+      </div>
+      <div className="h-[550px]">
+        <WakaNetworkTopology
+          nodes={complexTopologyNodes}
+          edges={complexTopologyEdges}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const NodeTypes: Story = {
+  render: () => {
+    const typeShowcaseNodes: NetworkNode[] = [
+      { id: 'server', label: 'Server', type: 'server', status: 'healthy', x: 100, y: 100 },
+      { id: 'database', label: 'Database', type: 'database', status: 'healthy', x: 250, y: 100 },
+      { id: 'loadbalancer', label: 'Load Balancer', type: 'loadbalancer', status: 'healthy', x: 400, y: 100 },
+      { id: 'firewall', label: 'Firewall', type: 'firewall', status: 'healthy', x: 550, y: 100 },
+      { id: 'cloud', label: 'Cloud', type: 'cloud', status: 'healthy', x: 175, y: 250 },
+      { id: 'client', label: 'Client', type: 'client', status: 'healthy', x: 325, y: 250 },
+      { id: 'router', label: 'Router', type: 'router', status: 'healthy', x: 475, y: 250 },
+    ]
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">Available node types:</p>
+        <div className="w-[700px] h-[350px]">
+          <WakaNetworkTopology
+            nodes={typeShowcaseNodes}
+            edges={[]}
+            animated={false}
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const StatusShowcase: Story = {
+  render: () => {
+    const statusNodes: NetworkNode[] = [
+      { id: 'healthy', label: 'Healthy', type: 'server', status: 'healthy', x: 150, y: 150 },
+      { id: 'warning', label: 'Warning', type: 'server', status: 'warning', x: 350, y: 150 },
+      { id: 'error', label: 'Error', type: 'server', status: 'error', x: 550, y: 150 },
+      { id: 'offline', label: 'Offline', type: 'server', status: 'offline', x: 350, y: 300 },
+    ]
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">Node status indicators:</p>
+        <div className="w-[700px] h-[400px]">
+          <WakaNetworkTopology
+            nodes={statusNodes}
+            edges={[]}
+          />
+        </div>
+      </div>
+    )
+  },
+}

package/src/components/waka-notifications/WakaNotifications.stories.tsx

@@ -0,0 +1,290 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaNotifications, useNotifications } from './index'
+import type { Notification } from './index'
+import * as React from 'react'
+import { CheckCircle, AlertTriangle, XCircle, Info, MessageSquare, UserPlus, ShoppingCart, CreditCard } from 'lucide-react'
+
+const meta: Meta<typeof WakaNotifications> = {
+  title: 'Components/Display/WakaNotifications',
+  component: WakaNotifications,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A notification center component with popover, tabs, and action buttons for managing notifications.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showBadge: {
+      control: 'boolean',
+      description: 'Show unread count badge',
+    },
+    showTabs: {
+      control: 'boolean',
+      description: 'Show All/Unread tabs',
+    },
+    maxHeight: {
+      control: 'text',
+      description: 'Maximum height of notification list',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaNotifications>
+
+const sampleNotifications: Notification[] = [
+  {
+    id: '1',
+    title: 'New comment on your post',
+    message: 'John Doe commented on your recent post about React patterns.',
+    type: 'info',
+    read: false,
+    timestamp: new Date(Date.now() - 5 * 60 * 1000), // 5 mins ago
+    icon: <MessageSquare className="h-5 w-5" />,
+    action: {
+      label: 'View comment',
+      onClick: () => console.log('View comment clicked'),
+    },
+  },
+  {
+    id: '2',
+    title: 'Payment successful',
+    message: 'Your payment of $99.00 has been processed successfully.',
+    type: 'success',
+    read: false,
+    timestamp: new Date(Date.now() - 30 * 60 * 1000), // 30 mins ago
+    icon: <CreditCard className="h-5 w-5" />,
+  },
+  {
+    id: '3',
+    title: 'New follower',
+    message: 'Sarah Miller started following you.',
+    type: 'info',
+    read: true,
+    timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 hours ago
+    icon: <UserPlus className="h-5 w-5" />,
+  },
+  {
+    id: '4',
+    title: 'Low storage warning',
+    message: 'You are running low on storage space. Consider upgrading your plan.',
+    type: 'warning',
+    read: false,
+    timestamp: new Date(Date.now() - 5 * 60 * 60 * 1000), // 5 hours ago
+    icon: <AlertTriangle className="h-5 w-5" />,
+    action: {
+      label: 'Upgrade now',
+      onClick: () => console.log('Upgrade clicked'),
+    },
+  },
+  {
+    id: '5',
+    title: 'Build failed',
+    message: 'Your latest deployment to production failed. Check the logs for details.',
+    type: 'error',
+    read: true,
+    timestamp: new Date(Date.now() - 24 * 60 * 60 * 1000), // 1 day ago
+    icon: <XCircle className="h-5 w-5" />,
+  },
+  {
+    id: '6',
+    title: 'Order shipped',
+    message: 'Your order #12345 has been shipped and is on its way.',
+    type: 'success',
+    read: true,
+    timestamp: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), // 2 days ago
+    icon: <ShoppingCart className="h-5 w-5" />,
+  },
+]
+
+export const Default: Story = {
+  args: {},
+  render: (args) => {
+    const {
+      notifications,
+      markAsRead,
+      markAllAsRead,
+      deleteNotification,
+      deleteAllNotifications,
+    } = useNotifications(sampleNotifications)
+
+    return (
+      <div className="p-8">
+        <WakaNotifications
+          notifications={notifications}
+          onMarkAsRead={markAsRead}
+          onMarkAllAsRead={markAllAsRead}
+          onDelete={deleteNotification}
+          onDeleteAll={deleteAllNotifications}
+          onSettingsClick={() => console.log('Settings clicked')}
+        />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="p-8">
+      <WakaNotifications
+        notifications={[]}
+        emptyMessage="No notifications yet"
+      />
+    </div>
+  ),
+}
+
+export const WithoutTabs: Story = {
+  render: () => {
+    const {
+      notifications,
+      markAsRead,
+      deleteNotification,
+    } = useNotifications(sampleNotifications)
+
+    return (
+      <div className="p-8">
+        <WakaNotifications
+          notifications={notifications}
+          onMarkAsRead={markAsRead}
+          onDelete={deleteNotification}
+          showTabs={false}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithoutBadge: Story = {
+  render: () => {
+    const { notifications } = useNotifications(sampleNotifications)
+
+    return (
+      <div className="p-8">
+        <WakaNotifications
+          notifications={notifications}
+          showBadge={false}
+        />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const {
+      notifications,
+      addNotification,
+      markAsRead,
+      markAllAsRead,
+      deleteNotification,
+      deleteAllNotifications,
+      unreadCount,
+    } = useNotifications([])
+
+    const addRandomNotification = () => {
+      const types: Notification['type'][] = ['info', 'success', 'warning', 'error']
+      const randomType = types[Math.floor(Math.random() * types.length)]
+      const icons = {
+        info: <Info className="h-5 w-5" />,
+        success: <CheckCircle className="h-5 w-5" />,
+        warning: <AlertTriangle className="h-5 w-5" />,
+        error: <XCircle className="h-5 w-5" />,
+      }
+
+      addNotification({
+        title: `New ${randomType} notification`,
+        message: `This is a sample ${randomType} notification message.`,
+        type: randomType,
+        icon: icons[randomType],
+      })
+    }
+
+    return (
+      <div className="flex flex-col items-center gap-4 p-8">
+        <div className="flex items-center gap-4">
+          <WakaNotifications
+            notifications={notifications}
+            onMarkAsRead={markAsRead}
+            onMarkAllAsRead={markAllAsRead}
+            onDelete={deleteNotification}
+            onDeleteAll={deleteAllNotifications}
+          />
+          <span className="text-sm text-muted-foreground">
+            {unreadCount} unread
+          </span>
+        </div>
+        <button
+          onClick={addRandomNotification}
+          className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm"
+        >
+          Add Random Notification
+        </button>
+      </div>
+    )
+  },
+}
+
+export const ManyNotifications: Story = {
+  render: () => {
+    const manyNotifications: Notification[] = Array.from({ length: 20 }, (_, i) => ({
+      id: `notif-${i}`,
+      title: `Notification ${i + 1}`,
+      message: `This is notification number ${i + 1} with some sample content.`,
+      type: (['info', 'success', 'warning', 'error'] as const)[i % 4],
+      read: i > 5,
+      timestamp: new Date(Date.now() - i * 30 * 60 * 1000),
+    }))
+
+    const {
+      notifications,
+      markAsRead,
+      markAllAsRead,
+      deleteNotification,
+    } = useNotifications(manyNotifications)
+
+    return (
+      <div className="p-8">
+        <WakaNotifications
+          notifications={notifications}
+          onMarkAsRead={markAsRead}
+          onMarkAllAsRead={markAllAsRead}
+          onDelete={deleteNotification}
+          maxHeight="350px"
+        />
+      </div>
+    )
+  },
+}
+
+export const HeaderIntegration: Story = {
+  render: () => {
+    const { notifications, markAsRead, markAllAsRead, deleteNotification } = useNotifications(sampleNotifications)
+
+    return (
+      <div className="w-[600px] border rounded-lg">
+        <header className="flex items-center justify-between px-4 py-3 border-b">
+          <div className="font-semibold">My Application</div>
+          <div className="flex items-center gap-2">
+            <WakaNotifications
+              notifications={notifications}
+              onMarkAsRead={markAsRead}
+              onMarkAllAsRead={markAllAsRead}
+              onDelete={deleteNotification}
+              onSettingsClick={() => console.log('Settings')}
+            />
+            <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center text-sm">
+              JD
+            </div>
+          </div>
+        </header>
+        <div className="p-8 text-center text-muted-foreground">
+          Main content area
+        </div>
+      </div>
+    )
+  },
+}