@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-terminal-output/WakaTerminalOutput.stories.tsx

@@ -0,0 +1,351 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaTerminalOutput, useTerminalOutput } from './index'
+import type { LogLine, LogLevel } from './index'
+import * as React from 'react'
+
+const sampleLogs: LogLine[] = [
+  { content: '[2024-01-15 10:30:45] INFO Starting application server...', level: 'info', timestamp: new Date('2024-01-15T10:30:45') },
+  { content: '[2024-01-15 10:30:46] DEBUG Loading configuration from /etc/app/config.yaml', level: 'debug', timestamp: new Date('2024-01-15T10:30:46') },
+  { content: '[2024-01-15 10:30:47] INFO Database connection established', level: 'info', timestamp: new Date('2024-01-15T10:30:47') },
+  { content: '[2024-01-15 10:30:48] WARN High memory usage detected: 85%', level: 'warn', timestamp: new Date('2024-01-15T10:30:48') },
+  { content: '[2024-01-15 10:30:49] INFO HTTP server listening on port 3000', level: 'info', timestamp: new Date('2024-01-15T10:30:49') },
+  { content: '[2024-01-15 10:30:50] DEBUG Request: GET /api/health - 200 OK (12ms)', level: 'debug', timestamp: new Date('2024-01-15T10:30:50') },
+  { content: '[2024-01-15 10:30:51] ERROR Connection refused to redis://localhost:6379', level: 'error', timestamp: new Date('2024-01-15T10:30:51') },
+  { content: '[2024-01-15 10:30:52] INFO Retrying connection in 5 seconds...', level: 'info', timestamp: new Date('2024-01-15T10:30:52') },
+  { content: '[2024-01-15 10:30:57] INFO Redis connection restored', level: 'info', timestamp: new Date('2024-01-15T10:30:57') },
+  { content: '[2024-01-15 10:30:58] DEBUG Cache hit for key: user:12345', level: 'debug', timestamp: new Date('2024-01-15T10:30:58') },
+]
+
+const ansiLogs: LogLine[] = [
+  { content: '\x1b[32m✓\x1b[0m All tests passed', level: 'info' },
+  { content: '\x1b[34mINFO\x1b[0m Compiling TypeScript...', level: 'info' },
+  { content: '\x1b[33mWARN\x1b[0m Deprecated API usage detected', level: 'warn' },
+  { content: '\x1b[31mERROR\x1b[0m Failed to load module: \x1b[1m@app/utils\x1b[0m', level: 'error' },
+  { content: '\x1b[90mDEBUG\x1b[0m Memory: \x1b[36m256MB\x1b[0m / \x1b[36m512MB\x1b[0m', level: 'debug' },
+  { content: '\x1b[32m✓\x1b[0m Build completed in \x1b[1m\x1b[33m2.3s\x1b[0m', level: 'info' },
+]
+
+const meta: Meta<typeof WakaTerminalOutput> = {
+  title: 'Components/DevOps/WakaTerminalOutput',
+  component: WakaTerminalOutput,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A terminal output viewer with ANSI color support, syntax highlighting, search, filtering, virtualization, and auto-scroll.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showLineNumbers: {
+      control: 'boolean',
+      description: 'Show line numbers',
+    },
+    showTimestamps: {
+      control: 'boolean',
+      description: 'Show timestamps',
+    },
+    autoScroll: {
+      control: 'boolean',
+      description: 'Auto-scroll to bottom on new lines',
+    },
+    searchable: {
+      control: 'boolean',
+      description: 'Enable search functionality',
+    },
+    filterable: {
+      control: 'boolean',
+      description: 'Enable log level filtering',
+    },
+    height: {
+      control: { type: 'number', min: 200, max: 800, step: 50 },
+      description: 'Height of the terminal',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTerminalOutput>
+
+export const Default: Story = {
+  args: {
+    lines: sampleLogs,
+    height: 400,
+    showLineNumbers: true,
+    showTimestamps: true,
+    autoScroll: true,
+    searchable: true,
+    filterable: true,
+  },
+  render: (args) => (
+    <div className="w-[700px]">
+      <WakaTerminalOutput {...args} />
+    </div>
+  ),
+}
+
+export const WithLineNumbers: Story = {
+  render: () => (
+    <div className="w-[700px]">
+      <WakaTerminalOutput
+        lines={sampleLogs}
+        showLineNumbers
+        height={400}
+      />
+    </div>
+  ),
+}
+
+export const WithTimestamps: Story = {
+  render: () => (
+    <div className="w-[700px]">
+      <WakaTerminalOutput
+        lines={sampleLogs}
+        showTimestamps
+        height={400}
+      />
+    </div>
+  ),
+}
+
+export const FullFeatured: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <WakaTerminalOutput
+        lines={sampleLogs}
+        showLineNumbers
+        showTimestamps
+        searchable
+        filterable
+        height={450}
+        onCopy={(content) => console.log('Copied:', content)}
+        onClear={() => console.log('Cleared')}
+      />
+    </div>
+  ),
+}
+
+export const AnsiColors: Story = {
+  render: () => (
+    <div className="w-[700px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Terminal output with ANSI escape codes for colors
+      </p>
+      <WakaTerminalOutput
+        lines={ansiLogs}
+        height={300}
+      />
+    </div>
+  ),
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { lines, log, warn, error, debug, clear } = useTerminalOutput()
+
+    return (
+      <div className="w-[700px] space-y-4">
+        <WakaTerminalOutput
+          lines={lines}
+          showLineNumbers
+          searchable
+          filterable
+          height={300}
+          onClear={clear}
+        />
+
+        <div className="flex gap-2">
+          <button
+            onClick={() => log(`[${new Date().toISOString()}] INFO Application running normally`)}
+            className="px-3 py-1.5 text-xs rounded bg-blue-500 text-white"
+          >
+            Add Info
+          </button>
+          <button
+            onClick={() => warn(`[${new Date().toISOString()}] WARN Memory usage at 75%`)}
+            className="px-3 py-1.5 text-xs rounded bg-yellow-500 text-black"
+          >
+            Add Warning
+          </button>
+          <button
+            onClick={() => error(`[${new Date().toISOString()}] ERROR Connection failed`)}
+            className="px-3 py-1.5 text-xs rounded bg-red-500 text-white"
+          >
+            Add Error
+          </button>
+          <button
+            onClick={() => debug(`[${new Date().toISOString()}] DEBUG Request processed`)}
+            className="px-3 py-1.5 text-xs rounded bg-gray-500 text-white"
+          >
+            Add Debug
+          </button>
+          <button
+            onClick={clear}
+            className="px-3 py-1.5 text-xs rounded border hover:bg-muted"
+          >
+            Clear
+          </button>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const LiveStreaming: Story = {
+  render: () => {
+    const [lines, setLines] = React.useState<LogLine[]>([
+      { content: '[INFO] Starting log stream...', level: 'info', timestamp: new Date() },
+    ])
+
+    React.useEffect(() => {
+      const messages = [
+        { content: 'GET /api/users - 200 OK (23ms)', level: 'debug' as LogLevel },
+        { content: 'POST /api/orders - 201 Created (156ms)', level: 'info' as LogLevel },
+        { content: 'Connection pool exhausted, retrying...', level: 'warn' as LogLevel },
+        { content: 'GET /api/products - 200 OK (12ms)', level: 'debug' as LogLevel },
+        { content: 'Cache invalidated for key: products:*', level: 'info' as LogLevel },
+        { content: 'Database query timeout after 30s', level: 'error' as LogLevel },
+        { content: 'Reconnecting to database...', level: 'info' as LogLevel },
+        { content: 'DELETE /api/sessions/expired - 204 (89ms)', level: 'debug' as LogLevel },
+      ]
+
+      let index = 0
+      const interval = setInterval(() => {
+        const msg = messages[index % messages.length]
+        setLines(prev => [
+          ...prev,
+          {
+            content: `[${new Date().toISOString()}] ${msg.level.toUpperCase()} ${msg.content}`,
+            level: msg.level,
+            timestamp: new Date(),
+          },
+        ].slice(-100))
+        index++
+      }, 800)
+
+      return () => clearInterval(interval)
+    }, [])
+
+    return (
+      <div className="w-[700px]">
+        <p className="text-sm text-muted-foreground mb-4">
+          Live streaming logs (simulated)
+        </p>
+        <WakaTerminalOutput
+          lines={lines}
+          showLineNumbers
+          filterable
+          autoScroll
+          height={400}
+        />
+      </div>
+    )
+  },
+}
+
+export const LargeLogs: Story = {
+  render: () => {
+    const largeLogs: LogLine[] = Array.from({ length: 1000 }, (_, i) => ({
+      content: `[${new Date().toISOString()}] ${['INFO', 'DEBUG', 'WARN', 'ERROR'][Math.floor(Math.random() * 4)]} Log line ${i + 1} - ${Math.random().toString(36).substring(7)}`,
+      level: ['info', 'debug', 'warn', 'error'][Math.floor(Math.random() * 4)] as LogLevel,
+      timestamp: new Date(Date.now() - (1000 - i) * 1000),
+    }))
+
+    return (
+      <div className="w-[700px]">
+        <p className="text-sm text-muted-foreground mb-4">
+          1000 lines with virtualization for smooth scrolling
+        </p>
+        <WakaTerminalOutput
+          lines={largeLogs}
+          showLineNumbers
+          searchable
+          filterable
+          height={400}
+        />
+      </div>
+    )
+  },
+}
+
+export const BuildOutput: Story = {
+  render: () => {
+    const buildLogs: LogLine[] = [
+      { content: '> wakastar-ui@1.0.0 build', level: 'info' },
+      { content: '> tsc && vite build', level: 'info' },
+      { content: '', level: 'info' },
+      { content: '\x1b[34mvite v5.0.12\x1b[0m building for production...', level: 'info' },
+      { content: '✓ 156 modules transformed.', level: 'info' },
+      { content: '\x1b[33mwarn\x1b[0m: The following dependencies are externalized:', level: 'warn' },
+      { content: '  - react', level: 'warn' },
+      { content: '  - react-dom', level: 'warn' },
+      { content: 'rendering chunks...', level: 'debug' },
+      { content: 'computing gzip size...', level: 'debug' },
+      { content: '', level: 'info' },
+      { content: 'dist/index.js      45.32 kB │ gzip: 14.21 kB', level: 'info' },
+      { content: 'dist/index.css     12.45 kB │ gzip:  3.12 kB', level: 'info' },
+      { content: '', level: 'info' },
+      { content: '\x1b[32m✓ built in 2.34s\x1b[0m', level: 'info' },
+    ]
+
+    return (
+      <div className="w-[700px]">
+        <p className="text-sm text-muted-foreground mb-4">
+          Build output with progress information
+        </p>
+        <WakaTerminalOutput
+          lines={buildLogs}
+          height={350}
+        />
+      </div>
+    )
+  },
+}
+
+export const DockerLogs: Story = {
+  render: () => {
+    const dockerLogs: LogLine[] = [
+      { content: 'Sending build context to Docker daemon  2.048kB', level: 'info' },
+      { content: 'Step 1/8 : FROM node:20-alpine', level: 'info' },
+      { content: ' ---> 3c2c7d5e3c12', level: 'debug' },
+      { content: 'Step 2/8 : WORKDIR /app', level: 'info' },
+      { content: ' ---> Using cache', level: 'debug' },
+      { content: ' ---> 8f9b7c6d5e4a', level: 'debug' },
+      { content: 'Step 3/8 : COPY package*.json ./', level: 'info' },
+      { content: ' ---> 1a2b3c4d5e6f', level: 'debug' },
+      { content: 'Step 4/8 : RUN npm ci --only=production', level: 'info' },
+      { content: 'npm warn deprecated @types/node@16.0.0', level: 'warn' },
+      { content: 'added 156 packages in 12s', level: 'info' },
+      { content: 'Step 5/8 : COPY . .', level: 'info' },
+      { content: ' ---> 7g8h9i0j1k2l', level: 'debug' },
+      { content: 'Step 6/8 : RUN npm run build', level: 'info' },
+      { content: 'Successfully built a1b2c3d4e5f6', level: 'info' },
+      { content: 'Successfully tagged myapp:latest', level: 'info' },
+    ]
+
+    return (
+      <div className="w-[700px]">
+        <p className="text-sm text-muted-foreground mb-4">
+          Docker build logs
+        </p>
+        <WakaTerminalOutput
+          lines={dockerLogs}
+          showLineNumbers
+          height={400}
+        />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[700px]">
+      <WakaTerminalOutput
+        lines={[]}
+        height={300}
+      />
+    </div>
+  ),
+}

package/src/components/waka-test-report/WakaTestReport.stories.tsx

@@ -0,0 +1,322 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaTestReport, defaultTestSuites, defaultCoverage } from './index'
+import type { TestSuite, TestCase, TestStatus, CoverageReport } from './index'
+import * as React from 'react'
+
+const allPassingSuites: TestSuite[] = [
+  {
+    id: '1',
+    name: 'Unit Tests',
+    file: 'src/__tests__/unit.test.ts',
+    duration: 1250,
+    tests: [
+      { id: '1-1', name: 'should format date correctly', status: 'passed', duration: 45 },
+      { id: '1-2', name: 'should parse JSON strings', status: 'passed', duration: 32 },
+      { id: '1-3', name: 'should validate email format', status: 'passed', duration: 28 },
+      { id: '1-4', name: 'should hash passwords securely', status: 'passed', duration: 156 },
+    ],
+  },
+  {
+    id: '2',
+    name: 'Integration Tests',
+    file: 'src/__tests__/integration.test.ts',
+    duration: 3500,
+    tests: [
+      { id: '2-1', name: 'should connect to database', status: 'passed', duration: 890 },
+      { id: '2-2', name: 'should authenticate user', status: 'passed', duration: 1200 },
+      { id: '2-3', name: 'should fetch user profile', status: 'passed', duration: 450 },
+    ],
+  },
+]
+
+const allFailingSuites: TestSuite[] = [
+  {
+    id: '1',
+    name: 'API Tests',
+    file: 'src/api/__tests__/api.test.ts',
+    duration: 5200,
+    tests: [
+      {
+        id: '1-1',
+        name: 'should return 200 for valid request',
+        status: 'failed',
+        duration: 245,
+        errorMessage: 'Expected status code 200, received 500',
+        stackTrace: 'Error: Request failed\n  at ApiClient.request (src/api/client.ts:45:15)',
+      },
+      {
+        id: '1-2',
+        name: 'should handle rate limiting',
+        status: 'failed',
+        duration: 1500,
+        errorMessage: 'Rate limit not applied correctly',
+      },
+      {
+        id: '1-3',
+        name: 'should validate request body',
+        status: 'failed',
+        duration: 89,
+        errorMessage: 'Validation error: missing required field "email"',
+      },
+    ],
+  },
+]
+
+const mixedSuites: TestSuite[] = [
+  {
+    id: '1',
+    name: 'Component Tests',
+    file: 'src/components/__tests__/Button.test.tsx',
+    duration: 890,
+    tests: [
+      { id: '1-1', name: 'renders with default props', status: 'passed', duration: 45, file: 'src/components/__tests__/Button.test.tsx', line: 12 },
+      { id: '1-2', name: 'handles click events', status: 'passed', duration: 67, file: 'src/components/__tests__/Button.test.tsx', line: 28 },
+      { id: '1-3', name: 'applies custom className', status: 'passed', duration: 23, file: 'src/components/__tests__/Button.test.tsx', line: 45 },
+      {
+        id: '1-4',
+        name: 'disables when loading',
+        status: 'failed',
+        duration: 89,
+        errorMessage: 'Button should be disabled when loading=true',
+        file: 'src/components/__tests__/Button.test.tsx',
+        line: 62,
+      },
+    ],
+  },
+  {
+    id: '2',
+    name: 'Hook Tests',
+    file: 'src/hooks/__tests__/useAuth.test.ts',
+    duration: 1200,
+    tests: [
+      { id: '2-1', name: 'returns authenticated state', status: 'passed', duration: 234 },
+      { id: '2-2', name: 'handles login flow', status: 'passed', duration: 456 },
+      { id: '2-3', name: 'handles logout', status: 'skipped', duration: 0 },
+      { id: '2-4', name: 'refreshes token on expiry', status: 'pending', duration: 0 },
+    ],
+  },
+  {
+    id: '3',
+    name: 'E2E Tests',
+    file: 'e2e/checkout.test.ts',
+    duration: 15000,
+    tests: [
+      { id: '3-1', name: 'completes checkout flow', status: 'passed', duration: 8500 },
+      {
+        id: '3-2',
+        name: 'handles payment failure',
+        status: 'failed',
+        duration: 4500,
+        errorMessage: 'Timeout: Element not found within 5000ms',
+        stackTrace: 'TimeoutError: waitForSelector timed out\n  at e2e/checkout.test.ts:89:5',
+      },
+    ],
+  },
+]
+
+const lowCoverage: CoverageReport = {
+  lines: { covered: 450, total: 1500, percentage: 30.0 },
+  branches: { covered: 25, total: 120, percentage: 20.8 },
+  functions: { covered: 45, total: 180, percentage: 25.0 },
+  statements: { covered: 520, total: 1650, percentage: 31.5 },
+}
+
+const highCoverage: CoverageReport = {
+  lines: { covered: 1425, total: 1500, percentage: 95.0 },
+  branches: { covered: 108, total: 120, percentage: 90.0 },
+  functions: { covered: 171, total: 180, percentage: 95.0 },
+  statements: { covered: 1567, total: 1650, percentage: 95.0 },
+}
+
+const meta: Meta<typeof WakaTestReport> = {
+  title: 'Components/DevOps/WakaTestReport',
+  component: WakaTestReport,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A test report viewer with suite expansion, coverage bars, search, filtering, and detailed error messages.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showFailedOnly: {
+      control: 'boolean',
+      description: 'Show only failed tests by default',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTestReport>
+
+export const Default: Story = {
+  args: {
+    suites: defaultTestSuites,
+    coverage: defaultCoverage,
+  },
+  render: (args) => (
+    <div className="w-[800px] h-[600px]">
+      <WakaTestReport
+        {...args}
+        onTestClick={(test) => console.log('Test click:', test)}
+        onViewFile={(file, line) => console.log('View file:', file, line)}
+      />
+    </div>
+  ),
+}
+
+export const AllPassing: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <WakaTestReport
+        suites={allPassingSuites}
+        coverage={highCoverage}
+        title="All Tests Passing"
+      />
+    </div>
+  ),
+}
+
+export const AllFailing: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <WakaTestReport
+        suites={allFailingSuites}
+        coverage={lowCoverage}
+        title="Build Failed"
+      />
+    </div>
+  ),
+}
+
+export const MixedResults: Story = {
+  render: () => (
+    <div className="w-[800px] h-[600px]">
+      <WakaTestReport
+        suites={mixedSuites}
+        coverage={defaultCoverage}
+        title="Test Results"
+        onTestClick={(test) => console.log('Test click:', test)}
+        onViewFile={(file, line) => console.log('View file:', file, line)}
+      />
+    </div>
+  ),
+}
+
+export const FailedOnlyFilter: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Pre-filtered to show only failed tests
+      </p>
+      <WakaTestReport
+        suites={mixedSuites}
+        showFailedOnly
+        title="Failed Tests"
+      />
+    </div>
+  ),
+}
+
+export const NoCoverage: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <WakaTestReport
+        suites={defaultTestSuites}
+        title="Tests Without Coverage"
+      />
+    </div>
+  ),
+}
+
+export const LowCoverage: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Coverage below threshold (red/yellow bars)
+      </p>
+      <WakaTestReport
+        suites={allFailingSuites}
+        coverage={lowCoverage}
+        title="Low Coverage Report"
+      />
+    </div>
+  ),
+}
+
+export const HighCoverage: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <WakaTestReport
+        suites={allPassingSuites}
+        coverage={highCoverage}
+        title="Excellent Coverage"
+      />
+    </div>
+  ),
+}
+
+export const ManySuites: Story = {
+  render: () => {
+    const manySuites: TestSuite[] = Array.from({ length: 15 }, (_, i) => ({
+      id: `suite-${i}`,
+      name: `Test Suite ${i + 1}`,
+      file: `src/modules/module-${i}/__tests__/index.test.ts`,
+      duration: Math.floor(Math.random() * 5000) + 500,
+      tests: Array.from({ length: Math.floor(Math.random() * 8) + 2 }, (_, j) => ({
+        id: `${i}-${j}`,
+        name: `Test case ${j + 1} for suite ${i + 1}`,
+        status: ['passed', 'passed', 'passed', 'failed', 'skipped'][Math.floor(Math.random() * 5)] as TestStatus,
+        duration: Math.floor(Math.random() * 500) + 10,
+      })),
+    }))
+
+    return (
+      <div className="w-[800px] h-[600px]">
+        <WakaTestReport
+          suites={manySuites}
+          coverage={defaultCoverage}
+          title="Large Test Suite"
+        />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[800px] h-[400px]">
+      <WakaTestReport suites={[]} title="No Tests" />
+    </div>
+  ),
+}
+
+export const CITestReport: Story = {
+  render: () => (
+    <div className="p-6 rounded-xl border bg-card">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-xl font-bold">CI Pipeline - Test Stage</h2>
+          <p className="text-sm text-muted-foreground">
+            Branch: feature/add-auth • Commit: abc123f
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 rounded-full bg-yellow-500" />
+          <span className="text-sm text-yellow-500 font-medium">Some tests failed</span>
+        </div>
+      </div>
+
+      <div className="w-[750px]">
+        <WakaTestReport
+          suites={mixedSuites}
+          coverage={defaultCoverage}
+          onTestClick={(test) => console.log('Test click:', test)}
+          onViewFile={(file, line) => console.log('View file:', file, line)}
+        />
+      </div>
+    </div>
+  ),
+}