@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-flow-diagram/WakaFlowDiagram.stories.tsx

@@ -0,0 +1,365 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaFlowDiagram, useFlowDiagram } from './index'
+import type { FlowNode, FlowConnection } from './index'
+import * as React from 'react'
+import { PlayCircle, CheckCircle2, XCircle, Mail, Database, Code } from 'lucide-react'
+
+const basicNodes: FlowNode[] = [
+  { id: 'start', type: 'start', label: 'Start', position: { x: 100, y: 200 } },
+  { id: 'process1', type: 'process', label: 'Process Data', position: { x: 300, y: 200 } },
+  { id: 'decision', type: 'decision', label: 'Valid?', position: { x: 500, y: 200 } },
+  { id: 'success', type: 'action', label: 'Save', position: { x: 700, y: 150 } },
+  { id: 'error', type: 'action', label: 'Log Error', position: { x: 700, y: 280 } },
+  { id: 'end', type: 'end', label: 'End', position: { x: 900, y: 200 } },
+]
+
+const basicConnections: FlowConnection[] = [
+  { id: 'conn1', from: 'start', to: 'process1' },
+  { id: 'conn2', from: 'process1', to: 'decision' },
+  { id: 'conn3', from: 'decision', to: 'success', label: 'Yes' },
+  { id: 'conn4', from: 'decision', to: 'error', label: 'No' },
+  { id: 'conn5', from: 'success', to: 'end' },
+  { id: 'conn6', from: 'error', to: 'end' },
+]
+
+const cicdNodes: FlowNode[] = [
+  { id: 'commit', type: 'start', label: 'Git Commit', position: { x: 100, y: 200 }, icon: <Code className="h-4 w-4" /> },
+  { id: 'build', type: 'process', label: 'Build', position: { x: 280, y: 200 } },
+  { id: 'test', type: 'process', label: 'Run Tests', position: { x: 460, y: 200 } },
+  { id: 'testPass', type: 'decision', label: 'Pass?', position: { x: 640, y: 200 } },
+  { id: 'deploy', type: 'action', label: 'Deploy', position: { x: 820, y: 150 } },
+  { id: 'notify', type: 'action', label: 'Notify', position: { x: 820, y: 280 }, icon: <Mail className="h-4 w-4" /> },
+  { id: 'done', type: 'end', label: 'Done', position: { x: 1000, y: 200 } },
+]
+
+const cicdConnections: FlowConnection[] = [
+  { id: 'c1', from: 'commit', to: 'build', animated: true },
+  { id: 'c2', from: 'build', to: 'test', animated: true },
+  { id: 'c3', from: 'test', to: 'testPass', animated: true },
+  { id: 'c4', from: 'testPass', to: 'deploy', label: 'Yes', color: '#22c55e' },
+  { id: 'c5', from: 'testPass', to: 'notify', label: 'No', color: '#ef4444' },
+  { id: 'c6', from: 'deploy', to: 'done' },
+  { id: 'c7', from: 'notify', to: 'done' },
+]
+
+const approvalNodes: FlowNode[] = [
+  { id: 'submit', type: 'start', label: 'Submit Request', position: { x: 150, y: 200 } },
+  { id: 'review', type: 'process', label: 'Manager Review', position: { x: 350, y: 200 } },
+  { id: 'approved', type: 'decision', label: 'Approved?', position: { x: 550, y: 200 } },
+  { id: 'implement', type: 'action', label: 'Implement', position: { x: 750, y: 100 } },
+  { id: 'revise', type: 'action', label: 'Revise', position: { x: 750, y: 300 } },
+  { id: 'complete', type: 'end', label: 'Complete', position: { x: 950, y: 200 } },
+]
+
+const approvalConnections: FlowConnection[] = [
+  { id: 'a1', from: 'submit', to: 'review' },
+  { id: 'a2', from: 'review', to: 'approved' },
+  { id: 'a3', from: 'approved', to: 'implement', label: 'Yes', color: '#22c55e' },
+  { id: 'a4', from: 'approved', to: 'revise', label: 'No', color: '#f59e0b' },
+  { id: 'a5', from: 'implement', to: 'complete' },
+  { id: 'a6', from: 'revise', to: 'review', label: 'Resubmit' },
+]
+
+const meta: Meta<typeof WakaFlowDiagram> = {
+  title: 'Components/Charts/WakaFlowDiagram',
+  component: WakaFlowDiagram,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A flow diagram component for visualizing processes, workflows, and decision trees with draggable nodes and customizable connections.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    draggable: {
+      control: 'boolean',
+      description: 'Enable node dragging',
+    },
+    editable: {
+      control: 'boolean',
+      description: 'Enable editing (add/remove nodes)',
+    },
+    zoom: {
+      control: { type: 'range', min: 0.5, max: 2, step: 0.1 },
+      description: 'Zoom level',
+    },
+    gridSize: {
+      control: { type: 'range', min: 10, max: 50, step: 5 },
+      description: 'Grid size for snapping',
+    },
+    showGrid: {
+      control: 'boolean',
+      description: 'Show grid background',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaFlowDiagram>
+
+export const Default: Story = {
+  args: {
+    nodes: basicNodes,
+    connections: basicConnections,
+  },
+  render: (args) => (
+    <div className="w-[1000px] h-[400px]">
+      <WakaFlowDiagram {...args} />
+    </div>
+  ),
+}
+
+export const CICDPipeline: Story = {
+  render: () => (
+    <div className="w-[1100px] h-[400px]">
+      <WakaFlowDiagram
+        nodes={cicdNodes}
+        connections={cicdConnections}
+      />
+    </div>
+  ),
+}
+
+export const ApprovalWorkflow: Story = {
+  render: () => (
+    <div className="w-[1100px] h-[450px]">
+      <WakaFlowDiagram
+        nodes={approvalNodes}
+        connections={approvalConnections}
+      />
+    </div>
+  ),
+}
+
+export const NoDragging: Story = {
+  render: () => (
+    <div className="w-[1000px] h-[400px]">
+      <WakaFlowDiagram
+        nodes={basicNodes}
+        connections={basicConnections}
+        draggable={false}
+      />
+    </div>
+  ),
+}
+
+export const NoEditing: Story = {
+  render: () => (
+    <div className="w-[1000px] h-[400px]">
+      <WakaFlowDiagram
+        nodes={basicNodes}
+        connections={basicConnections}
+        editable={false}
+      />
+    </div>
+  ),
+}
+
+export const NoGrid: Story = {
+  render: () => (
+    <div className="w-[1000px] h-[400px]">
+      <WakaFlowDiagram
+        nodes={basicNodes}
+        connections={basicConnections}
+        showGrid={false}
+      />
+    </div>
+  ),
+}
+
+export const ZoomLevels: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Zoom: 0.75x</p>
+        <div className="w-[800px] h-[300px] border rounded">
+          <WakaFlowDiagram
+            nodes={basicNodes}
+            connections={basicConnections}
+            zoom={0.75}
+            editable={false}
+          />
+        </div>
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Zoom: 1.25x</p>
+        <div className="w-[800px] h-[400px] border rounded overflow-hidden">
+          <WakaFlowDiagram
+            nodes={basicNodes}
+            connections={basicConnections}
+            zoom={1.25}
+            editable={false}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const GridSizes: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Grid: 10px (fine)</p>
+        <div className="w-[600px] h-[250px]">
+          <WakaFlowDiagram
+            nodes={basicNodes.slice(0, 3)}
+            connections={basicConnections.slice(0, 2)}
+            gridSize={10}
+            editable={false}
+          />
+        </div>
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Grid: 40px (coarse)</p>
+        <div className="w-[600px] h-[250px]">
+          <WakaFlowDiagram
+            nodes={basicNodes.slice(0, 3)}
+            connections={basicConnections.slice(0, 2)}
+            gridSize={40}
+            editable={false}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { nodes, connections, addNode, addConnection, removeNode, clear } = useFlowDiagram(
+      basicNodes.slice(0, 3),
+      basicConnections.slice(0, 2)
+    )
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2 flex-wrap">
+          <button
+            onClick={() => {
+              const newNode = addNode({
+                type: 'action',
+                label: `Action ${nodes.length + 1}`,
+                position: { x: 200 + nodes.length * 100, y: 100 + Math.random() * 200 },
+              })
+            }}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Add Action Node
+          </button>
+          <button
+            onClick={() => {
+              addNode({
+                type: 'decision',
+                label: `Decision ${nodes.length + 1}`,
+                position: { x: 300 + nodes.length * 80, y: 150 + Math.random() * 150 },
+              })
+            }}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Add Decision Node
+          </button>
+          <button
+            onClick={clear}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted text-red-600"
+          >
+            Clear All
+          </button>
+        </div>
+        <div className="w-[900px] h-[400px]">
+          <WakaFlowDiagram
+            nodes={nodes}
+            connections={connections}
+            onNodesChange={(n) => console.log('Nodes changed:', n)}
+            onConnectionsChange={(c) => console.log('Connections changed:', c)}
+          />
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Nodes: {nodes.length} | Connections: {connections.length}
+        </p>
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [selectedNode, setSelectedNode] = React.useState<FlowNode | null>(null)
+
+    return (
+      <div className="space-y-4">
+        <div className="w-[1000px] h-[400px]">
+          <WakaFlowDiagram
+            nodes={cicdNodes}
+            connections={cicdConnections}
+            onNodeClick={(node) => setSelectedNode(node)}
+          />
+        </div>
+        {selectedNode && (
+          <div className="p-4 border rounded-lg bg-muted/50">
+            <h4 className="font-semibold">{selectedNode.label}</h4>
+            <p className="text-sm text-muted-foreground">Type: {selectedNode.type}</p>
+            <p className="text-sm text-muted-foreground">
+              Position: ({selectedNode.position.x}, {selectedNode.position.y})
+            </p>
+            {selectedNode.description && (
+              <p className="text-sm mt-2">{selectedNode.description}</p>
+            )}
+          </div>
+        )}
+      </div>
+    )
+  },
+}
+
+export const PipelineDashboard: Story = {
+  render: () => (
+    <div className="w-[1150px] p-6 border rounded-lg">
+      <div className="flex justify-between items-start mb-4">
+        <div>
+          <h3 className="text-xl font-semibold">CI/CD Pipeline</h3>
+          <p className="text-sm text-muted-foreground">main branch • Last run: 2 minutes ago</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-green-500 animate-pulse" />
+          <span className="text-sm text-green-600 font-medium">Running</span>
+        </div>
+      </div>
+      <div className="h-[350px]">
+        <WakaFlowDiagram
+          nodes={cicdNodes}
+          connections={cicdConnections}
+          editable={false}
+          draggable={false}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const NodeTypes: Story = {
+  render: () => {
+    const typeNodes: FlowNode[] = [
+      { id: 'start', type: 'start', label: 'Start', position: { x: 100, y: 100 } },
+      { id: 'end', type: 'end', label: 'End', position: { x: 300, y: 100 } },
+      { id: 'action', type: 'action', label: 'Action', position: { x: 100, y: 220 } },
+      { id: 'process', type: 'process', label: 'Process', position: { x: 300, y: 220 } },
+      { id: 'decision', type: 'decision', label: 'Decision', position: { x: 200, y: 340 } },
+    ]
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">Available node types:</p>
+        <div className="w-[500px] h-[450px]">
+          <WakaFlowDiagram
+            nodes={typeNodes}
+            connections={[]}
+            editable={false}
+          />
+        </div>
+      </div>
+    )
+  },
+}

package/src/components/waka-funnel-chart/WakaFunnelChart.stories.tsx

@@ -0,0 +1,281 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaFunnelChart, useFunnelChart } from './index'
+import type { FunnelStage } from './index'
+import * as React from 'react'
+
+const conversionData: FunnelStage[] = [
+  { id: 'visitors', label: 'Visitors', value: 10000 },
+  { id: 'signups', label: 'Sign Ups', value: 4500 },
+  { id: 'trials', label: 'Free Trials', value: 2000 },
+  { id: 'purchases', label: 'Purchases', value: 800 },
+  { id: 'retention', label: 'Retained', value: 600 },
+]
+
+const salesPipelineData: FunnelStage[] = [
+  { id: 'leads', label: 'Leads', value: 5000, color: '#3b82f6' },
+  { id: 'qualified', label: 'Qualified', value: 2500, color: '#8b5cf6' },
+  { id: 'proposals', label: 'Proposals', value: 1200, color: '#ec4899' },
+  { id: 'negotiations', label: 'Negotiations', value: 600, color: '#f59e0b' },
+  { id: 'closed', label: 'Closed Won', value: 300, color: '#22c55e' },
+]
+
+const recruitmentData: FunnelStage[] = [
+  { id: 'applications', label: 'Applications', value: 1000 },
+  { id: 'screening', label: 'Phone Screening', value: 350 },
+  { id: 'interviews', label: 'Interviews', value: 120 },
+  { id: 'offers', label: 'Offers Made', value: 40 },
+  { id: 'hired', label: 'Hired', value: 25 },
+]
+
+const meta: Meta<typeof WakaFunnelChart> = {
+  title: 'Components/Charts/WakaFunnelChart',
+  component: WakaFunnelChart,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A funnel chart for visualizing conversion rates and process flows with smooth transitions between stages.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['vertical', 'horizontal'],
+      description: 'Funnel orientation',
+    },
+    showLabels: {
+      control: 'boolean',
+      description: 'Show stage labels',
+    },
+    showValues: {
+      control: 'boolean',
+      description: 'Show stage values',
+    },
+    showPercentages: {
+      control: 'boolean',
+      description: 'Show conversion percentages',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+    curved: {
+      control: 'boolean',
+      description: 'Use curved edges',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaFunnelChart>
+
+export const Default: Story = {
+  args: {
+    data: conversionData,
+  },
+  render: (args) => <WakaFunnelChart {...args} />,
+}
+
+export const Orientations: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Vertical (Default)</p>
+        <WakaFunnelChart data={conversionData} orientation="vertical" width={400} height={300} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Horizontal</p>
+        <WakaFunnelChart data={conversionData} orientation="horizontal" width={600} height={200} />
+      </div>
+    </div>
+  ),
+}
+
+export const WithCustomColors: Story = {
+  render: () => <WakaFunnelChart data={salesPipelineData} width={400} height={350} />,
+}
+
+export const CurvedEdges: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="text-center">
+        <WakaFunnelChart data={conversionData} curved={false} width={300} height={280} />
+        <p className="text-sm text-muted-foreground mt-2">Sharp Edges</p>
+      </div>
+      <div className="text-center">
+        <WakaFunnelChart data={conversionData} curved width={300} height={280} />
+        <p className="text-sm text-muted-foreground mt-2">Curved Edges</p>
+      </div>
+    </div>
+  ),
+}
+
+export const ShowPercentages: Story = {
+  render: () => (
+    <WakaFunnelChart
+      data={conversionData}
+      showPercentages
+      width={450}
+      height={350}
+    />
+  ),
+}
+
+export const HideLabels: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="text-center">
+        <WakaFunnelChart data={conversionData} showLabels={false} width={250} height={250} />
+        <p className="text-sm text-muted-foreground mt-2">No Labels</p>
+      </div>
+      <div className="text-center">
+        <WakaFunnelChart data={conversionData} showValues={false} width={250} height={250} />
+        <p className="text-sm text-muted-foreground mt-2">No Values</p>
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-end gap-8">
+      <div className="text-center">
+        <WakaFunnelChart data={conversionData} width={200} height={180} />
+        <p className="text-sm text-muted-foreground mt-2">Small</p>
+      </div>
+      <div className="text-center">
+        <WakaFunnelChart data={conversionData} width={350} height={300} />
+        <p className="text-sm text-muted-foreground mt-2">Medium</p>
+      </div>
+      <div className="text-center">
+        <WakaFunnelChart data={conversionData} width={500} height={400} />
+        <p className="text-sm text-muted-foreground mt-2">Large</p>
+      </div>
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [selectedStage, setSelectedStage] = React.useState<FunnelStage | null>(null)
+
+    return (
+      <div className="space-y-4">
+        <WakaFunnelChart
+          data={salesPipelineData}
+          width={450}
+          height={350}
+          onStageClick={(stage) => setSelectedStage(stage)}
+          showPercentages
+        />
+        {selectedStage && (
+          <div className="p-4 border rounded-lg bg-muted/50">
+            <h4 className="font-semibold">{selectedStage.label}</h4>
+            <p className="text-2xl font-bold text-primary">{selectedStage.value.toLocaleString()}</p>
+            <p className="text-sm text-muted-foreground">
+              {((selectedStage.value / salesPipelineData[0].value) * 100).toFixed(1)}% of total leads
+            </p>
+          </div>
+        )}
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { highlightedStage, setHighlightedStage, reset, getConversionRate } = useFunnelChart()
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2 flex-wrap">
+          {conversionData.map((stage, index) => (
+            <button
+              key={stage.id}
+              onClick={() => setHighlightedStage(stage.id)}
+              className={`px-3 py-1 text-sm border rounded transition-colors ${
+                highlightedStage === stage.id ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'
+              }`}
+            >
+              {stage.label}
+            </button>
+          ))}
+          <button onClick={reset} className="px-3 py-1 text-sm border rounded hover:bg-muted">
+            Reset
+          </button>
+        </div>
+        <WakaFunnelChart data={conversionData} width={400} height={300} />
+        <div className="grid grid-cols-2 gap-4 text-sm">
+          {conversionData.slice(1).map((stage, index) => (
+            <div key={stage.id} className="p-2 bg-muted/30 rounded">
+              <span className="text-muted-foreground">
+                {conversionData[index].label} → {stage.label}:
+              </span>{' '}
+              <span className="font-semibold">
+                {getConversionRate(conversionData[index].value, stage.value)}%
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const RecruitmentFunnel: Story = {
+  render: () => (
+    <div className="w-[500px] p-6 border rounded-lg">
+      <h3 className="text-lg font-semibold mb-1">Recruitment Pipeline</h3>
+      <p className="text-sm text-muted-foreground mb-4">Q4 2024 Hiring Campaign</p>
+      <WakaFunnelChart
+        data={recruitmentData}
+        width={450}
+        height={350}
+        showPercentages
+        curved
+      />
+    </div>
+  ),
+}
+
+export const CompactFunnel: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <div className="p-4 border rounded-lg">
+        <h4 className="text-sm font-medium mb-2">Marketing Funnel</h4>
+        <WakaFunnelChart
+          data={conversionData.slice(0, 3)}
+          width={180}
+          height={150}
+          showLabels={false}
+        />
+      </div>
+      <div className="p-4 border rounded-lg">
+        <h4 className="text-sm font-medium mb-2">Sales Funnel</h4>
+        <WakaFunnelChart
+          data={salesPipelineData.slice(0, 3)}
+          width={180}
+          height={150}
+          showLabels={false}
+        />
+      </div>
+      <div className="p-4 border rounded-lg">
+        <h4 className="text-sm font-medium mb-2">Hiring Funnel</h4>
+        <WakaFunnelChart
+          data={recruitmentData.slice(0, 3)}
+          width={180}
+          height={150}
+          showLabels={false}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <WakaFunnelChart data={conversionData} animated={false} width={400} height={300} />
+  ),
+}