feat(ui): docs composites cycle 2 (A+B+C) + jsdom unit suite + Codecov

.github/workflows/check.test.yml

@@ -9,7 +9,7 @@ permissions:
 
 jobs:
   test:
-    name: "Vitest (stories)"
+    name: "Vitest (unit + stories)"
     runs-on: ${{ vars.RUNNER_DEFAULT || 'ubuntu-latest' }}
     permissions:
       contents: read
@@ -38,5 +38,30 @@ jobs:
         run: bun install --frozen-lockfile
       - name: "Setup: Playwright Chromium"
         run: bunx playwright install --with-deps chromium
-      - name: "Test: Stories via Vitest (browser mode)"
-        run: bun run test
+      - name: "Test: Vitest (jsdom unit + Storybook browser mode) with coverage"
+        # `-- --coverage` forwards through Turbo's passthrough args to every
+        # workspace's `test` script (`vitest run`), so both suites emit their
+        # own coverage/lcov.info without a dedicated turbo task.
+        run: bunx turbo run test -- --coverage
+      - name: "Test Analytics: Upload results to Codecov"
+        # Upload JUnit results even when tests fail, so failing/flaky tests show
+        # up in Codecov Test Analytics.
+        if: ${{ !cancelled() }}
+        uses: codecov/test-results-action@0fa95f0e1eeaafde2c782583b36b28ad0d8c77d3 # v1.2.1
+        with:
+          files: packages/ui/test-report.junit.xml,apps/storybook/test-report.junit.xml
+          token: ${{ secrets.CODECOV_TOKEN }}
+      - name: "Coverage: Upload ui-unit (jsdom) to Codecov"
+        uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
+        with:
+          files: packages/ui/coverage/lcov.info
+          flags: ui-unit
+          fail_ci_if_error: false
+          token: ${{ secrets.CODECOV_TOKEN }}
+      - name: "Coverage: Upload ui-browser (Storybook) to Codecov"
+        uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
+        with:
+          files: apps/storybook/coverage/lcov.info
+          flags: ui-browser
+          fail_ci_if_error: false
+          token: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/job.storybook.yml

@@ -37,7 +37,11 @@ jobs:
       - name: "Install: Dependencies"
         run: bun install --frozen-lockfile
       - name: "Build: Storybook static site"
+        # CODECOV_TOKEN enables the @codecov/vite-plugin bundle-analysis upload
+        # during the Vite build (no-op if the secret is absent).
         run: bunx turbo run build --filter=@elide/storybook
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
       - name: "Artifact: Upload storybook-static"
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:

.gitignore

@@ -4,3 +4,9 @@ storybook-static/
 .turbo/
 *.log
 .DS_Store
+
+# Coverage output
+coverage/
+
+# Test reports
+*.junit.xml

COMPONENTS.md

@@ -24,12 +24,12 @@ radii, type. See the package README.
 | `Dialog` | **done** | — | modal base |
 | `Sheet` / `Drawer` | **done** | side | **mobile nav drawer** |
 | `Tabs` | **done** | — | (content tabbing) |
-| `Select` / `NativeSelect` | registry | — | forms |
+| `Select` / `NativeSelect` | **done** | — | forms |
 | `Combobox` / `Command` | deferred | — | **⌘K command palette** — deferred to CommandPalette composite (see note) |
 | `Switch` | **done** | — | theme toggle option |
 | `Separator` | **done** | orientation | nav dividers |
 | `ScrollArea` | **done** | — | sidebar / palette scroll |
-| `Accordion` | registry | — | FAQ, collapsible nav groups |
+| `Accordion` | **done** | — | FAQ, collapsible nav groups |
 | `Breadcrumb` | registry | — | page breadcrumbs |
 | `NavigationMenu` | **done** | — | primary nav links |
 | `Avatar` | registry | — | (marketing) |
@@ -39,23 +39,23 @@ radii, type. See the package README.
 | Component | Status | Composition / props | Source |
 | --- | --- | --- | --- |
 | `Callout` | **done** | tone: note·tip·important·warning·caution; `title` | guide admonitions |
-| `CodeBlock` | todo | variant: editor·terminal; `filename`, `lang`, `lineNumbers`, `statusBar` (vim NORMAL), `highlight`; slot: `CopyButton` | SQLite editor, terminal, snippet blocks |
-| `CopyButton` | todo | `value`, `size` | code block + copy-command |
-| `CopyCommand` | todo | `command`, prompt glyph | install one-liner |
-| `AppNav` | todo | brand · `NavLinks` · `SearchTrigger` · `ThemeToggle` · `LocaleSwitcher` · `ChangelogButton` · `InstallButton` | top nav (all pages) |
-| `SectionTabs` | todo | `items`, `active` | Start·Runtime·Toolchain·API·Resources |
-| `Sidebar` | todo | `SectionSwitcher`, `NavGroup`, `NavItem` (active, external, comingSoon), progress | left nav |
-| `TableOfContents` | todo | `items`, active-on-scroll; mono variant for API methods | right rail "On this page" |
-| `AiActions` | todo | Copy as Markdown · View as text · Open in ChatGPT/Claude | right rail panel |
+| `CodeBlock` | **done** | variant: editor·terminal; `filename`, `lang`, `lineNumbers`, `statusBar` (vim NORMAL), `highlight`; slot: `CopyButton` | SQLite editor, terminal, snippet blocks |
+| `CopyButton` | **done** | `value`, `size` | code block + copy-command |
+| `CopyCommand` | **done** | `command`, prompt glyph | install one-liner |
+| `AppNav` | **done** | brand · `NavLinks` · `SearchTrigger` · `ThemeToggle` · `LocaleSwitcher` · `ChangelogButton` · `InstallButton` | top nav (all pages) |
+| `SectionTabs` | **done** | `items`, `active` | Start·Runtime·Toolchain·API·Resources |
+| `Sidebar` | **done** | `SectionSwitcher`, `NavGroup`, `NavItem` (active, external, comingSoon), progress | left nav |
+| `TableOfContents` | **done** | `items`, active-on-scroll; mono variant for API methods | right rail "On this page" |
+| `AiActions` | **done** | Copy as Markdown · View as text · Open in ChatGPT/Claude | right rail panel |
 | `Breadcrumbs` | **done** | `segments` | above page title |
 | `PageFooterNav` | **done** | `prev?`, `next?` (right-grouped cards) | bottom prev/next |
-| `CardGrid` + `FeatureCard` | todo | cols; card: icon·title·description·badge·href | "Start here", category grid |
-| `StatStrip` | todo | `stats: {value,label}[]` | API landing metrics |
-| `StatusBadge` | todo | thin wrapper over `Badge` status tones | reference status |
-| `ApiMethod` + `ParamRow` | todo | `signature`, `status`, params, example slot | node:fs entries |
-| `SupportMatrix` / `DataTable` | todo | columns, status cells (✓/✗) | method support table |
+| `CardGrid` + `FeatureCard` | **done** | cols; card: icon·title·description·badge·href | "Start here", category grid |
+| `StatStrip` | **done** | `stats: {value,label}[]` | API landing metrics |
+| `StatusBadge` | **done** | thin wrapper over `Badge` status tones | reference status |
+| `ApiMethod` + `ParamRow` | **done** | `signature`, `status`, params, example slot | node:fs entries |
+| `SupportMatrix` / `DataTable` | **done** | columns, status cells (✓/✗) | method support table |
 | `CommandPalette` | registry+ | built on `Command`; groups: pages·actions; recent | ⌘K overlay |
-| `MobileNav` | todo | top bar + `Sheet` drawer + bottom "Search or ask AI" bar | mobile screens |
+| `MobileNav` | **done** | top bar + `Sheet` drawer + bottom "Search or ask AI" bar | mobile screens |
 | `ThemeProvider` / `useTheme` | **done** | class/`data-theme` on `<html>`, persisted | dark/light toggle |
 
 ## Tier 3 — Marketing widgets (from elide.dev)

README.md

@@ -1,5 +1,7 @@
 # components
 
+[![codecov](https://codecov.io/gh/elide-dev/components/graph/badge.svg)](https://codecov.io/gh/elide-dev/components)
+
 Elide's shared UI. One repository, consumed by many: the docs site (Astro) and
 the marketing site both depend on it, so brand, tokens, and behavior stay in one
 place and move together.

apps/storybook/.storybook/main.ts

@@ -21,6 +21,16 @@ const config: StorybookConfig = {
     const { default: tailwindcss } = await import("@tailwindcss/vite");
     cfg.plugins = cfg.plugins ?? [];
     cfg.plugins.push(tailwindcss());
+    // Codecov bundle analysis — uploads bundle stats when CODECOV_TOKEN is set
+    // (CI build). No-op locally without a token.
+    const { codecovVitePlugin } = await import("@codecov/vite-plugin");
+    cfg.plugins.push(
+      codecovVitePlugin({
+        enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined,
+        bundleName: "elide-storybook",
+        uploadToken: process.env.CODECOV_TOKEN,
+      }),
+    );
     return cfg;
   },
 };

apps/storybook/package.json

@@ -8,7 +8,8 @@
     "build": "storybook build",
     "build-storybook": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@elide/tokens": "workspace:*",
@@ -18,6 +19,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
+    "@codecov/vite-plugin": "^2.0.1",
     "@storybook/addon-a11y": "^10.4.6",
     "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-vitest": "^10.4.6",

apps/storybook/vitest.config.ts

@@ -6,15 +6,33 @@ import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
 // assertions live in each story's `play` function. Storybook's plugin reuses
 // the .storybook config (framework, Tailwind viteFinal, decorators), and since
 // Storybook 10.3 the addon applies the preview annotations automatically.
+//
+// Coverage is v8, same as the jsdom suite in packages/ui/vitest.config.ts.
+// Stories live in packages/ui/src, outside this app's root, so `allowExternal`
+// must be on or v8 drops those files before include/exclude ever runs. Once
+// external files are allowed, matching is substring-based (picomatch
+// `contains: true`), so the same `src/components/**` glob used in
+// packages/ui/vitest.config.ts matches here too. Codecov merges this suite's
+// `ui-browser` flag with `ui-unit`.
 export default defineConfig({
   plugins: [storybookTest({ configDir: ".storybook" })],
   test: {
     name: "storybook",
+    // JUnit output feeds Codecov Test Analytics (uploaded in CI).
+    reporters: ["default", ["junit", { outputFile: "./test-report.junit.xml" }]],
     browser: {
       enabled: true,
       provider: playwright(),
       headless: true,
       instances: [{ browser: "chromium" }],
     },
+    coverage: {
+      provider: "v8",
+      reporter: ["text", "json", "lcov"],
+      reportsDirectory: "./coverage",
+      allowExternal: true,
+      include: ["src/components/**"],
+      exclude: ["src/**/*.test.{ts,tsx}", "src/**/*.stories.tsx"],
+    },
   },
 });