@wakastellar/ui 2.3.5 → 2.4.0

package/src/blocks/cicd-builder/CICDBuilder.stories.tsx

@@ -0,0 +1,499 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  CICDBuilder,
+  defaultPipeline,
+} from './index'
+import type { Pipeline, PipelineStage, PipelineStep, StepType, StepStatus } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof CICDBuilder> = {
+  title: 'Blocks/CICDBuilder',
+  component: CICDBuilder,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A CI/CD pipeline builder for creating and visualizing build, test, and deployment pipelines with drag-and-drop stages, step configuration, and YAML/JSON export.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof CICDBuilder>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <CICDBuilder
+        pipeline={defaultPipeline}
+        onPipelineChange={(pipeline) => console.log('Pipeline changed:', pipeline)}
+        onRun={() => console.log('Run pipeline')}
+        onSave={() => console.log('Save pipeline')}
+        onExport={(format) => console.log('Export as:', format)}
+      />
+    </div>
+  ),
+}
+
+export const EmptyPipeline: Story = {
+  render: () => {
+    const emptyPipeline: Pipeline = {
+      id: 'new',
+      name: 'New Pipeline',
+      description: 'Configure your CI/CD pipeline',
+      stages: [],
+    }
+
+    return (
+      <div className="p-6">
+        <CICDBuilder
+          pipeline={emptyPipeline}
+          onPipelineChange={(pipeline) => console.log('Pipeline changed:', pipeline)}
+          onRun={() => console.log('Run pipeline')}
+          onSave={() => console.log('Save pipeline')}
+        />
+      </div>
+    )
+  },
+}
+
+export const ReadOnly: Story = {
+  render: () => (
+    <div className="p-6">
+      <CICDBuilder
+        pipeline={defaultPipeline}
+        readOnly
+        onRun={() => console.log('Run pipeline')}
+        onExport={(format) => console.log('Export as:', format)}
+      />
+    </div>
+  ),
+}
+
+export const PipelineRunning: Story = {
+  render: () => {
+    const runningPipeline: Pipeline = {
+      ...defaultPipeline,
+      stages: defaultPipeline.stages.map((stage, index) => ({
+        ...stage,
+        status: index === 0 ? 'success' : index === 1 ? 'running' : 'pending',
+        steps: stage.steps.map((step, stepIndex) => ({
+          ...step,
+          status: index === 0
+            ? 'success'
+            : index === 1
+              ? stepIndex === 0 ? 'success' : stepIndex === 1 ? 'running' : 'pending'
+              : 'pending',
+        })),
+      })),
+    }
+
+    return (
+      <div className="p-6">
+        <CICDBuilder
+          pipeline={runningPipeline}
+          readOnly
+          onExport={(format) => console.log('Export as:', format)}
+        />
+      </div>
+    )
+  },
+}
+
+export const PipelineFailed: Story = {
+  render: () => {
+    const failedPipeline: Pipeline = {
+      ...defaultPipeline,
+      stages: defaultPipeline.stages.map((stage, index) => ({
+        ...stage,
+        status: index < 2 ? 'success' : index === 2 ? 'failed' : 'skipped',
+        steps: stage.steps.map((step, stepIndex) => ({
+          ...step,
+          status: index < 2
+            ? 'success'
+            : index === 2
+              ? stepIndex === 0 ? 'success' : stepIndex === 1 ? 'failed' : 'skipped'
+              : 'skipped',
+        })),
+      })),
+    }
+
+    return (
+      <div className="p-6">
+        <CICDBuilder
+          pipeline={failedPipeline}
+          readOnly
+          onRun={() => console.log('Retry pipeline')}
+          onExport={(format) => console.log('Export as:', format)}
+        />
+      </div>
+    )
+  },
+}
+
+export const PipelineSuccess: Story = {
+  render: () => {
+    const successPipeline: Pipeline = {
+      ...defaultPipeline,
+      stages: defaultPipeline.stages.map(stage => ({
+        ...stage,
+        status: 'success' as StepStatus,
+        steps: stage.steps.map(step => ({
+          ...step,
+          status: 'success' as StepStatus,
+        })),
+      })),
+    }
+
+    return (
+      <div className="p-6">
+        <CICDBuilder
+          pipeline={successPipeline}
+          readOnly
+          onRun={() => console.log('Run again')}
+          onExport={(format) => console.log('Export as:', format)}
+        />
+      </div>
+    )
+  },
+}
+
+export const SimplePipeline: Story = {
+  render: () => {
+    const simplePipeline: Pipeline = {
+      id: 'simple',
+      name: 'Simple Build & Deploy',
+      trigger: {
+        branches: ['main'],
+        events: ['push'],
+      },
+      stages: [
+        {
+          id: 'build',
+          name: 'Build',
+          steps: [
+            { id: 'install', name: 'Install', type: 'script', command: 'npm install' },
+            { id: 'build', name: 'Build', type: 'build', command: 'npm run build' },
+          ],
+        },
+        {
+          id: 'deploy',
+          name: 'Deploy',
+          steps: [
+            { id: 'deploy', name: 'Deploy to Production', type: 'deploy', command: 'npm run deploy' },
+          ],
+        },
+      ],
+    }
+
+    return (
+      <div className="p-6">
+        <CICDBuilder
+          pipeline={simplePipeline}
+          onPipelineChange={(pipeline) => console.log('Pipeline changed:', pipeline)}
+          onRun={() => console.log('Run pipeline')}
+          onSave={() => console.log('Save pipeline')}
+        />
+      </div>
+    )
+  },
+}
+
+export const ComplexPipeline: Story = {
+  render: () => {
+    const complexPipeline: Pipeline = {
+      id: 'complex',
+      name: 'Full CI/CD Pipeline',
+      description: 'Complete pipeline with all stages',
+      trigger: {
+        branches: ['main', 'develop', 'release/*'],
+        events: ['push', 'pull_request', 'tag'],
+        schedule: '0 2 * * *',
+      },
+      stages: [
+        {
+          id: 'prepare',
+          name: 'Prepare',
+          steps: [
+            { id: 'checkout', name: 'Checkout Code', type: 'script', command: 'git checkout $BRANCH' },
+            { id: 'cache-restore', name: 'Restore Cache', type: 'cache' },
+            { id: 'install', name: 'Install Dependencies', type: 'script', command: 'npm ci' },
+          ],
+        },
+        {
+          id: 'build',
+          name: 'Build',
+          steps: [
+            { id: 'lint', name: 'Lint', type: 'script', command: 'npm run lint' },
+            { id: 'build', name: 'Build', type: 'build', command: 'npm run build' },
+            { id: 'cache-save', name: 'Save Cache', type: 'cache' },
+          ],
+        },
+        {
+          id: 'test',
+          name: 'Test',
+          steps: [
+            { id: 'unit', name: 'Unit Tests', type: 'test', command: 'npm run test:unit' },
+            { id: 'integration', name: 'Integration Tests', type: 'test', command: 'npm run test:integration' },
+            { id: 'e2e', name: 'E2E Tests', type: 'test', command: 'npm run test:e2e', timeout: 600 },
+            { id: 'coverage', name: 'Coverage Report', type: 'artifact', artifacts: ['coverage/**'] },
+          ],
+        },
+        {
+          id: 'security',
+          name: 'Security',
+          steps: [
+            { id: 'sast', name: 'SAST Scan', type: 'script', command: 'npm run security:sast' },
+            { id: 'deps', name: 'Dependency Audit', type: 'script', command: 'npm audit --audit-level=high' },
+            { id: 'secrets', name: 'Secret Scanning', type: 'script', command: 'gitleaks detect' },
+          ],
+        },
+        {
+          id: 'package',
+          name: 'Package',
+          steps: [
+            { id: 'docker', name: 'Build Docker Image', type: 'docker', image: 'app:$CI_COMMIT_SHA' },
+            { id: 'push', name: 'Push to Registry', type: 'script', command: 'docker push $REGISTRY/app:$CI_COMMIT_SHA' },
+            { id: 'artifact', name: 'Upload Artifacts', type: 'artifact', artifacts: ['dist/**', 'build/**'] },
+          ],
+        },
+        {
+          id: 'deploy-staging',
+          name: 'Deploy Staging',
+          steps: [
+            { id: 'deploy', name: 'Deploy to Staging', type: 'deploy', command: 'kubectl apply -f k8s/staging/' },
+            { id: 'smoke', name: 'Smoke Tests', type: 'test', command: 'npm run test:smoke -- --env=staging' },
+            { id: 'notify', name: 'Notify Team', type: 'notify' },
+          ],
+        },
+        {
+          id: 'deploy-prod',
+          name: 'Deploy Production',
+          steps: [
+            { id: 'approval', name: 'Approval Gate', type: 'approval', condition: "$CI_COMMIT_BRANCH == 'main'" },
+            { id: 'deploy', name: 'Deploy to Production', type: 'deploy', command: 'kubectl apply -f k8s/production/' },
+            { id: 'verify', name: 'Verify Deployment', type: 'test', command: 'npm run test:smoke -- --env=production' },
+            { id: 'notify', name: 'Notify Stakeholders', type: 'notify' },
+          ],
+        },
+      ],
+      variables: {
+        NODE_ENV: 'production',
+        REGISTRY: 'gcr.io/my-project',
+        KUBECONFIG: '/secrets/kubeconfig',
+      },
+    }
+
+    return (
+      <div className="p-6">
+        <CICDBuilder
+          pipeline={complexPipeline}
+          onPipelineChange={(pipeline) => console.log('Pipeline changed:', pipeline)}
+          onRun={() => console.log('Run pipeline')}
+          onSave={() => console.log('Save pipeline')}
+          onExport={(format) => console.log('Export as:', format)}
+        />
+      </div>
+    )
+  },
+}
+
+export const DockerPipeline: Story = {
+  render: () => {
+    const dockerPipeline: Pipeline = {
+      id: 'docker',
+      name: 'Docker Build & Push',
+      trigger: {
+        branches: ['main'],
+        events: ['push', 'tag'],
+      },
+      stages: [
+        {
+          id: 'build',
+          name: 'Build Image',
+          steps: [
+            { id: 'docker-build', name: 'Build Docker Image', type: 'docker', image: 'myapp:$CI_COMMIT_SHA' },
+            { id: 'docker-tag', name: 'Tag Image', type: 'script', command: 'docker tag myapp:$CI_COMMIT_SHA myapp:latest' },
+          ],
+        },
+        {
+          id: 'test',
+          name: 'Test',
+          steps: [
+            { id: 'container-test', name: 'Container Tests', type: 'test', command: 'docker run myapp:$CI_COMMIT_SHA npm test' },
+            { id: 'security-scan', name: 'Security Scan', type: 'script', command: 'trivy image myapp:$CI_COMMIT_SHA' },
+          ],
+        },
+        {
+          id: 'push',
+          name: 'Push',
+          steps: [
+            { id: 'login', name: 'Login to Registry', type: 'script', command: 'docker login -u $DOCKER_USER -p $DOCKER_PASS' },
+            { id: 'push', name: 'Push to Registry', type: 'script', command: 'docker push myregistry/myapp:$CI_COMMIT_SHA' },
+          ],
+        },
+      ],
+    }
+
+    return (
+      <div className="p-6">
+        <CICDBuilder
+          pipeline={dockerPipeline}
+          onPipelineChange={(pipeline) => console.log('Pipeline changed:', pipeline)}
+          onRun={() => console.log('Run pipeline')}
+          onSave={() => console.log('Save pipeline')}
+        />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [pipeline, setPipeline] = React.useState<Pipeline>(defaultPipeline)
+
+    const handleRun = () => {
+      // Simulate pipeline execution
+      const stages = pipeline.stages.map(stage => ({
+        ...stage,
+        status: 'pending' as StepStatus,
+        steps: stage.steps.map(step => ({ ...step, status: 'pending' as StepStatus })),
+      }))
+      setPipeline({ ...pipeline, stages })
+
+      // Simulate progress
+      let stageIndex = 0
+      let stepIndex = 0
+
+      const interval = setInterval(() => {
+        setPipeline(prev => {
+          const newStages = [...prev.stages]
+
+          if (stageIndex < newStages.length) {
+            const stage = { ...newStages[stageIndex] }
+            const steps = [...stage.steps]
+
+            if (stepIndex < steps.length) {
+              steps[stepIndex] = { ...steps[stepIndex], status: 'running' }
+              if (stepIndex > 0) {
+                steps[stepIndex - 1] = { ...steps[stepIndex - 1], status: 'success' }
+              }
+              stage.steps = steps
+              stage.status = 'running'
+              newStages[stageIndex] = stage
+              stepIndex++
+            } else {
+              steps[steps.length - 1] = { ...steps[steps.length - 1], status: 'success' }
+              stage.steps = steps
+              stage.status = 'success'
+              newStages[stageIndex] = stage
+              stageIndex++
+              stepIndex = 0
+            }
+          } else {
+            clearInterval(interval)
+          }
+
+          return { ...prev, stages: newStages }
+        })
+      }, 1000)
+    }
+
+    const handleExport = (format: 'yaml' | 'json') => {
+      const content = format === 'json'
+        ? JSON.stringify(pipeline, null, 2)
+        : `# Pipeline: ${pipeline.name}\nstages:\n${pipeline.stages.map(s => `  - ${s.name}`).join('\n')}`
+
+      alert(`Exported as ${format.toUpperCase()}:\n\n${content.slice(0, 500)}...`)
+    }
+
+    return (
+      <div className="p-6">
+        <CICDBuilder
+          pipeline={pipeline}
+          onPipelineChange={setPipeline}
+          onRun={handleRun}
+          onSave={() => alert('Pipeline saved!')}
+          onExport={handleExport}
+        />
+      </div>
+    )
+  },
+}
+
+export const PipelineBuilder: Story = {
+  render: () => (
+    <div className="min-h-screen bg-muted/30">
+      <header className="bg-background border-b px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="font-bold text-xl">Pipeline Builder</h1>
+            <p className="text-sm text-muted-foreground">Create and manage CI/CD pipelines</p>
+          </div>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-foreground font-medium">Editor</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Runs</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Triggers</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Variables</a>
+          </nav>
+        </div>
+      </header>
+      <main className="p-6">
+        <CICDBuilder
+          pipeline={defaultPipeline}
+          onPipelineChange={(pipeline) => console.log('Pipeline changed:', pipeline)}
+          onRun={() => console.log('Run pipeline')}
+          onSave={() => console.log('Save pipeline')}
+          onExport={(format) => console.log('Export as:', format)}
+        />
+      </main>
+    </div>
+  ),
+}
+
+export const GitHubActionsStyle: Story = {
+  render: () => {
+    const ghaPipeline: Pipeline = {
+      id: 'gha',
+      name: 'CI',
+      trigger: {
+        branches: ['main', 'develop'],
+        events: ['push', 'pull_request'],
+      },
+      stages: [
+        {
+          id: 'build',
+          name: 'build',
+          steps: [
+            { id: 'checkout', name: 'Checkout', type: 'script', command: 'actions/checkout@v4' },
+            { id: 'setup', name: 'Setup Node.js', type: 'script', command: 'actions/setup-node@v4' },
+            { id: 'install', name: 'Install', type: 'script', command: 'npm ci' },
+            { id: 'build', name: 'Build', type: 'build', command: 'npm run build' },
+          ],
+        },
+        {
+          id: 'test',
+          name: 'test',
+          steps: [
+            { id: 'test', name: 'Run Tests', type: 'test', command: 'npm test' },
+            { id: 'upload', name: 'Upload Coverage', type: 'artifact', artifacts: ['coverage/**'] },
+          ],
+        },
+      ],
+    }
+
+    return (
+      <div className="p-6">
+        <CICDBuilder
+          pipeline={ghaPipeline}
+          onPipelineChange={(pipeline) => console.log('Pipeline changed:', pipeline)}
+          onRun={() => console.log('Run workflow')}
+          onExport={(format) => console.log('Export as:', format)}
+        />
+      </div>
+    )
+  },
+}