@mdxui/terminal 2.0.0

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@mdxui/terminal",
+  "version": "2.0.0",
+  "description": "OpenTUI renderer for MDXUI primitives - build CLI dashboards with the same components as web",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./components": {
+      "import": "./dist/components/index.js",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./data": {
+      "import": "./dist/data/index.js",
+      "types": "./dist/data/index.d.ts"
+    },
+    "./forms": {
+      "import": "./dist/forms/index.js",
+      "types": "./dist/forms/index.d.ts"
+    },
+    "./keyboard": {
+      "import": "./dist/keyboard/index.js",
+      "types": "./dist/keyboard/index.d.ts"
+    },
+    "./renderers": {
+      "import": "./dist/renderers/index.js",
+      "types": "./dist/renderers/index.d.ts"
+    },
+    "./storybook": {
+      "import": "./dist/storybook/index.js",
+      "types": "./dist/storybook/index.d.ts"
+    },
+    "./theme": {
+      "import": "./dist/theme/index.js",
+      "types": "./dist/theme/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/components/index.ts src/data/index.ts src/forms/index.ts src/keyboard/index.ts src/renderers/index.ts src/storybook/index.ts src/theme/index.ts --format esm --dts",
+    "dev": "tsup src/index.ts src/components/index.ts src/data/index.ts src/forms/index.ts src/keyboard/index.ts src/renderers/index.ts src/storybook/index.ts src/theme/index.ts --format esm --dts --watch",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@opentui/core": "^0.1.70",
+    "@opentui/react": "^0.1.70"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.1",
+    "@types/react": "^18.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^2.1.0",
+    "zod": "^3.23.0"
+  },
+  "peerDependencies": {
+    "@mdxui/primitives": "workspace:*",
+    "@storybook/react": ">=7.0.0",
+    "react": ">=18.0.0",
+    "zod": ">=3.20.0"
+  },
+  "peerDependenciesMeta": {
+    "@storybook/react": {
+      "optional": true
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "mdxui",
+    "terminal",
+    "cli",
+    "tui",
+    "opentui",
+    "dashboard"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/__tests__/components/data/card.test.ts

@@ -0,0 +1,458 @@
+/**
+ * @mdxui/terminal Card Component Tests (RED phase)
+ *
+ * TDD RED Phase: These tests define the contract for the Card data component
+ * across all 6 render tiers (TEXT, MARKDOWN, ASCII, UNICODE, ANSI, INTERACTIVE).
+ *
+ * Card Component Features:
+ * - Title and subtitle
+ * - Key-value pairs display
+ * - Actions (buttons, links)
+ * - Status badges
+ * - Different card variants (default, outlined, elevated)
+ *
+ * NOTE: These tests are expected to FAIL until implementation is complete.
+ * Run: pnpm --filter @mdxui/terminal test -- --run src/__tests__/components/data/card.test.ts
+ */
+import { describe, it, expect } from 'vitest'
+
+import type { UINode, RenderContext, ThemeTokens, RenderTier } from '../../../core/types'
+
+// ============================================================================
+// Test Helpers
+// ============================================================================
+
+const ALL_TIERS: RenderTier[] = ['text', 'markdown', 'ascii', 'unicode', 'ansi', 'interactive']
+
+function createTestTheme(): ThemeTokens {
+  return {
+    primary: '\x1b[34m',
+    secondary: '\x1b[36m',
+    muted: '\x1b[90m',
+    foreground: '\x1b[37m',
+    background: '\x1b[40m',
+    border: '\x1b[90m',
+    success: '\x1b[32m',
+    warning: '\x1b[33m',
+    error: '\x1b[31m',
+    info: '\x1b[34m',
+  }
+}
+
+function createTestContext(tier: RenderTier, overrides?: Partial<RenderContext>): RenderContext {
+  return {
+    tier,
+    width: 80,
+    height: 24,
+    depth: 0,
+    theme: createTestTheme(),
+    interactive: tier === 'interactive',
+    ...overrides,
+  }
+}
+
+function createCardNode(props: Record<string, unknown>, children?: UINode[]): UINode {
+  return {
+    type: 'card',
+    props,
+    children,
+  }
+}
+
+// ============================================================================
+// Renderer import helper - uses dynamic import for all tiers
+// ============================================================================
+
+async function renderForTier(node: UINode, tier: RenderTier, ctx?: RenderContext): Promise<string> {
+  const context = ctx ?? createTestContext(tier)
+  switch (tier) {
+    case 'text': {
+      const { renderText } = await import('../../../renderers/text')
+      return renderText(node)
+    }
+    case 'markdown': {
+      const { renderMarkdown } = await import('../../../renderers/markdown')
+      return renderMarkdown(node)
+    }
+    case 'ascii': {
+      const { renderASCII } = await import('../../../renderers/ascii')
+      return renderASCII(node, context)
+    }
+    case 'unicode': {
+      const { renderUnicode } = await import('../../../renderers/unicode')
+      return renderUnicode(node, context)
+    }
+    case 'ansi': {
+      const { renderANSI } = await import('../../../renderers/ansi')
+      return renderANSI(node)
+    }
+    case 'interactive': {
+      const { renderInteractive } = await import('../../../renderers/interactive')
+      return renderInteractive(node, context)
+    }
+  }
+}
+
+// ============================================================================
+// Basic Card Rendering Tests
+// ============================================================================
+
+describe('Card Component', () => {
+  describe('basic rendering across all tiers', () => {
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders card with title', async () => {
+          const node = createCardNode({ title: 'User Profile' })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('User Profile')
+        })
+
+        it('renders card with title and subtitle', async () => {
+          const node = createCardNode({
+            title: 'Product Info',
+            subtitle: 'Premium Widget XL',
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Product Info')
+          expect(result).toContain('Premium Widget XL')
+        })
+
+        it('renders card with children content', async () => {
+          const node = createCardNode({ title: 'Details' }, [
+            { type: 'text', props: { content: 'This is the card body content.' } },
+          ])
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Details')
+          expect(result).toContain('card body content')
+        })
+
+        it('handles card without title', async () => {
+          const node = createCardNode({}, [
+            { type: 'text', props: { content: 'Just content, no title' } },
+          ])
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Just content')
+        })
+
+        it('handles empty card', async () => {
+          const node = createCardNode({})
+          const result = await renderForTier(node, tier)
+
+          expect(typeof result).toBe('string')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Key-Value Pairs Tests
+  // ============================================================================
+
+  describe('key-value pairs', () => {
+    const kvPairs = [
+      { key: 'Name', value: 'John Doe' },
+      { key: 'Email', value: 'john@example.com' },
+      { key: 'Role', value: 'Administrator' },
+    ]
+
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders key-value pairs', async () => {
+          const node = createCardNode({
+            title: 'User Details',
+            pairs: kvPairs,
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Name')
+          expect(result).toContain('John Doe')
+          expect(result).toContain('Email')
+        })
+
+        it('handles empty value', async () => {
+          const node = createCardNode({
+            pairs: [
+              { key: 'Empty', value: '' },
+              { key: 'Null', value: null },
+            ],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Empty')
+          expect(result).toContain('Null')
+        })
+
+        it('supports value with status variant', async () => {
+          const node = createCardNode({
+            pairs: [
+              { key: 'Status', value: 'Active', variant: 'success' },
+            ],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Active')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Title Section Tests
+  // ============================================================================
+
+  describe('title section', () => {
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders title with badge', async () => {
+          const node = createCardNode({
+            title: 'Notifications',
+            badge: { content: '5', variant: 'info' },
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Notifications')
+          expect(result).toContain('5')
+        })
+
+        it('renders title with action button', async () => {
+          const node = createCardNode({
+            title: 'Recent Activity',
+            titleAction: { label: 'View All', action: '/activity' },
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Recent Activity')
+          expect(result).toContain('View All')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Actions Tests
+  // ============================================================================
+
+  describe('card actions', () => {
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders single action button', async () => {
+          const node = createCardNode({
+            title: 'Confirm Order',
+            actions: [{ label: 'Confirm', action: 'confirm', variant: 'primary' }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Confirm Order')
+          expect(result).toContain('Confirm')
+        })
+
+        it('renders multiple action buttons', async () => {
+          const node = createCardNode({
+            title: 'Delete Item',
+            actions: [
+              { label: 'Cancel', action: 'cancel' },
+              { label: 'Delete', action: 'delete' },
+            ],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Cancel')
+          expect(result).toContain('Delete')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Card Variants Tests
+  // ============================================================================
+
+  describe('card variants', () => {
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders default variant', async () => {
+          const node = createCardNode({ title: 'Default Card', variant: 'default' })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Default Card')
+        })
+
+        it('renders outlined variant', async () => {
+          const node = createCardNode({ title: 'Outlined Card', variant: 'outlined' })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Outlined Card')
+        })
+
+        it('renders elevated variant', async () => {
+          const node = createCardNode({ title: 'Elevated Card', variant: 'elevated' })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Elevated Card')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Tier-Specific Rendering Tests
+  // ============================================================================
+
+  describe('tier-specific rendering', () => {
+    describe('TEXT tier', () => {
+      it('renders without borders', async () => {
+        const node = createCardNode({
+          title: 'Simple Card',
+          pairs: [{ key: 'Field', value: 'Value' }],
+        })
+        const result = await renderForTier(node, 'text')
+
+        expect(result).toContain('Simple Card')
+        expect(result).toContain('Field')
+        expect(result).toContain('Value')
+        expect(result).not.toContain('|')
+        expect(result).not.toContain('+')
+      })
+    })
+
+    describe('MARKDOWN tier', () => {
+      it('renders title as heading', async () => {
+        const node = createCardNode({ title: 'Markdown Card' })
+        const result = await renderForTier(node, 'markdown')
+
+        expect(result).toMatch(/#+\s*Markdown Card/)
+      })
+    })
+
+    describe('ASCII tier', () => {
+      it('renders card with ASCII border', async () => {
+        const node = createCardNode({ title: 'ASCII Card', border: true })
+        const result = await renderForTier(node, 'ascii')
+
+        expect(result).toContain('ASCII Card')
+        expect(result).toMatch(/[+\-|]/)
+      })
+    })
+
+    describe('UNICODE tier', () => {
+      it('renders card with unicode box-drawing', async () => {
+        const node = createCardNode({ title: 'Unicode Card', border: 'single' })
+        const result = await renderForTier(node, 'unicode')
+
+        expect(result).toContain('Unicode Card')
+        expect(result).toMatch(/[─│┌┐└┘├┤┬┴┼]/)
+      })
+
+      it('renders rounded corners', async () => {
+        const node = createCardNode({ title: 'Rounded', border: 'rounded' })
+        const result = await renderForTier(node, 'unicode')
+
+        expect(result).toContain('Rounded')
+        expect(result).toMatch(/[╭╮╰╯]/)
+      })
+    })
+
+    describe('ANSI tier', () => {
+      it('renders with ANSI styling', async () => {
+        const node = createCardNode({ title: 'Styled Card' })
+        const result = await renderForTier(node, 'ansi')
+
+        expect(result).toMatch(/\x1b\[/)
+      })
+
+      it('applies variant colors', async () => {
+        const node = createCardNode({ title: 'Success Card', variant: 'success' })
+        const result = await renderForTier(node, 'ansi')
+
+        expect(result).toContain('Success Card')
+        expect(result).toMatch(/\x1b\[\d+m/)
+      })
+    })
+
+    describe('INTERACTIVE tier', () => {
+      it('renders focusable actions', async () => {
+        const node = createCardNode({
+          title: 'Interactive Card',
+          actions: [{ label: 'Button 1', focusable: true }],
+          focusedActionIndex: 0,
+        })
+        const result = await renderForTier(node, 'interactive')
+
+        expect(result).toContain('Button 1')
+      })
+    })
+  })
+
+  // ============================================================================
+  // Edge Cases
+  // ============================================================================
+
+  describe('edge cases', () => {
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('handles very long title', async () => {
+          const longTitle = 'A'.repeat(200)
+          const node = createCardNode({ title: longTitle })
+          const ctx = createTestContext(tier, { width: 40 })
+          const result = await renderForTier(node, tier, ctx)
+
+          expect(result).toContain('A')
+        })
+
+        it('handles special characters in title', async () => {
+          const node = createCardNode({ title: 'HTML tags and quotes' })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('HTML')
+        })
+
+        it('handles unicode in content', async () => {
+          const node = createCardNode({
+            title: 'International Card',
+            pairs: [{ key: 'Greeting', value: 'Hello world' }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('International Card')
+        })
+
+        it('handles empty pairs array', async () => {
+          const node = createCardNode({ title: 'Empty Pairs', pairs: [] })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Empty Pairs')
+        })
+
+        it('handles many key-value pairs', async () => {
+          const pairs = Array.from({ length: 20 }, (_, i) => ({
+            key: `Key ${i}`,
+            value: `Value ${i}`,
+          }))
+          const node = createCardNode({ title: 'Many Pairs', pairs })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Key 0')
+          expect(result).toContain('Key 19')
+        })
+
+        it('handles nested children', async () => {
+          const node = createCardNode({ title: 'Nested' }, [
+            {
+              type: 'box',
+              props: {},
+              children: [{ type: 'text', props: { content: 'Deeply nested' } }],
+            },
+          ])
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Nested')
+          expect(result).toContain('Deeply nested')
+        })
+      })
+    })
+  })
+})