@hypoth-ui/docs-renderer-next 0.1.0

package/app/accessibility/page.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import type { CategoryInfo, ConformanceData, ConformanceStatus } from "@hypoth-ui/docs-core";
+import { useMemo, useState } from "react";
+import { CategoryFilter } from "./CategoryFilter";
+import { ConformanceTable } from "./ConformanceTable";
+
+// Placeholder data - in production, this would be loaded from the conformance report
+const PLACEHOLDER_DATA: ConformanceData = {
+  version: "0.0.0",
+  generatedAt: new Date().toISOString(),
+  wcagVersion: "2.1",
+  targetLevel: "AA",
+  components: [
+    {
+      id: "ds-button",
+      name: "Button",
+      category: "form-controls",
+      status: "conformant",
+      wcagLevel: "AA",
+      automatedPassed: true,
+      manualAuditComplete: true,
+      passCount: 10,
+      failCount: 0,
+    },
+    {
+      id: "ds-input",
+      name: "Input",
+      category: "form-controls",
+      status: "conformant",
+      wcagLevel: "AA",
+      automatedPassed: true,
+      manualAuditComplete: true,
+      passCount: 10,
+      failCount: 0,
+    },
+    {
+      id: "ds-checkbox",
+      name: "Checkbox",
+      category: "form-controls",
+      status: "pending",
+      wcagLevel: "AA",
+      automatedPassed: true,
+      manualAuditComplete: false,
+    },
+    {
+      id: "ds-dialog",
+      name: "Dialog",
+      category: "overlays",
+      status: "conformant",
+      wcagLevel: "AA",
+      automatedPassed: true,
+      manualAuditComplete: true,
+      passCount: 12,
+      failCount: 0,
+    },
+    {
+      id: "ds-tooltip",
+      name: "Tooltip",
+      category: "overlays",
+      status: "partial",
+      wcagLevel: "AA",
+      automatedPassed: true,
+      manualAuditComplete: true,
+      passCount: 8,
+      failCount: 2,
+    },
+  ],
+  summary: {
+    total: 5,
+    conformant: 3,
+    partial: 1,
+    nonConformant: 0,
+    pending: 1,
+    conformancePercentage: 60,
+  },
+};
+
+export default function AccessibilityPage() {
+  const [data] = useState<ConformanceData>(PLACEHOLDER_DATA);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [selectedStatus, setSelectedStatus] = useState<ConformanceStatus | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  // Get categories
+  const categories = useMemo<CategoryInfo[]>(() => {
+    const counts = new Map<string, number>();
+    for (const c of data.components) {
+      counts.set(c.category, (counts.get(c.category) ?? 0) + 1);
+    }
+    return Array.from(counts.entries()).map(([id, count]) => ({
+      id,
+      name: id.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
+      count,
+    }));
+  }, [data.components]);
+
+  // Filter components
+  const filteredComponents = useMemo(() => {
+    let result = data.components;
+
+    if (selectedCategory) {
+      result = result.filter((c) => c.category === selectedCategory);
+    }
+
+    if (selectedStatus) {
+      result = result.filter((c) => c.status === selectedStatus);
+    }
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(
+        (c) => c.id.toLowerCase().includes(query) || c.name.toLowerCase().includes(query)
+      );
+    }
+
+    return result;
+  }, [data.components, selectedCategory, selectedStatus, searchQuery]);
+
+  return (
+    <div className="max-w-6xl mx-auto px-4 py-8">
+      {/* Header */}
+      <header className="mb-8">
+        <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+          Accessibility Conformance
+        </h1>
+        <p className="text-gray-600 dark:text-gray-400">
+          WCAG {data.wcagVersion} Level {data.targetLevel} conformance status for all components in
+          the design system.
+        </p>
+      </header>
+
+      {/* Summary cards */}
+      <section className="mb-8 grid grid-cols-2 md:grid-cols-5 gap-4">
+        <div className="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
+          <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+            {data.summary.total}
+          </div>
+          <div className="text-sm text-gray-600 dark:text-gray-400">Total Components</div>
+        </div>
+        <div className="rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-900/20">
+          <div className="text-2xl font-bold text-green-700 dark:text-green-400">
+            {data.summary.conformant}
+          </div>
+          <div className="text-sm text-green-600 dark:text-green-400">Conformant</div>
+        </div>
+        <div className="rounded-lg border border-yellow-200 bg-yellow-50 p-4 dark:border-yellow-800 dark:bg-yellow-900/20">
+          <div className="text-2xl font-bold text-yellow-700 dark:text-yellow-400">
+            {data.summary.partial}
+          </div>
+          <div className="text-sm text-yellow-600 dark:text-yellow-400">Partial</div>
+        </div>
+        <div className="rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20">
+          <div className="text-2xl font-bold text-red-700 dark:text-red-400">
+            {data.summary.nonConformant}
+          </div>
+          <div className="text-sm text-red-600 dark:text-red-400">Non-Conformant</div>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800">
+          <div className="text-2xl font-bold text-gray-700 dark:text-gray-400">
+            {data.summary.pending}
+          </div>
+          <div className="text-sm text-gray-600 dark:text-gray-400">Pending Audit</div>
+        </div>
+      </section>
+
+      {/* Progress bar */}
+      <section className="mb-8">
+        <div className="flex justify-between text-sm text-gray-600 dark:text-gray-400 mb-2">
+          <span>Conformance Progress</span>
+          <span>{data.summary.conformancePercentage}%</span>
+        </div>
+        <div className="h-3 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
+          <div
+            className="h-full bg-green-500 transition-all duration-300"
+            style={{ width: `${data.summary.conformancePercentage}%` }}
+          />
+        </div>
+      </section>
+
+      {/* Filters */}
+      <CategoryFilter
+        categories={categories}
+        selectedCategory={selectedCategory}
+        selectedStatus={selectedStatus}
+        onCategoryChange={setSelectedCategory}
+        onStatusChange={setSelectedStatus}
+        onSearchChange={setSearchQuery}
+      />
+
+      {/* Results count */}
+      <div className="mb-4 text-sm text-gray-600 dark:text-gray-400">
+        Showing {filteredComponents.length} of {data.components.length} components
+      </div>
+
+      {/* Component table */}
+      <ConformanceTable components={filteredComponents} />
+
+      {/* Footer info */}
+      <footer className="mt-8 text-sm text-gray-500 dark:text-gray-400">
+        <p>
+          Last updated: {new Date(data.generatedAt).toLocaleDateString()} • Version: {data.version}
+        </p>
+      </footer>
+    </div>
+  );
+}

package/app/api/search/route.ts

@@ -0,0 +1,241 @@
+/**
+ * Search API Route
+ *
+ * Provides search functionality for the documentation site.
+ * Loads the pre-built search index and performs client-side filtering.
+ */
+
+import { type NextRequest, NextResponse } from "next/server";
+import type { SearchEntry, SearchIndex } from "@hypoth-ui/docs-core";
+
+// Cache the search index in memory
+let searchIndex: SearchIndex | null = null;
+let indexLoadPromise: Promise<SearchIndex | null> | null = null;
+
+/**
+ * Load the search index from the file system or CDN
+ */
+async function loadSearchIndex(): Promise<SearchIndex | null> {
+  if (searchIndex) {
+    return searchIndex;
+  }
+
+  if (indexLoadPromise) {
+    return indexLoadPromise;
+  }
+
+  indexLoadPromise = (async () => {
+    try {
+      // In production, this would load from a CDN or static file
+      // For now, we'll use a bundled index or return mock data
+      const indexPath = process.env.SEARCH_INDEX_PATH || "./dist/search-index.json";
+
+      // Try to load from file system in development
+      if (process.env.NODE_ENV === "development") {
+        const fs = await import("node:fs/promises");
+        const path = await import("node:path");
+        const fullPath = path.join(process.cwd(), indexPath);
+
+        try {
+          const content = await fs.readFile(fullPath, "utf-8");
+          searchIndex = JSON.parse(content) as SearchIndex;
+          return searchIndex;
+        } catch {
+          // Index not found, return empty
+          console.warn(`Search index not found at ${fullPath}`);
+        }
+      }
+
+      // Return a minimal fallback index
+      searchIndex = {
+        version: "1.0.0",
+        generatedAt: new Date().toISOString(),
+        edition: "enterprise",
+        entries: [],
+        facets: {
+          categories: [],
+          types: [],
+          tags: [],
+        },
+      };
+
+      return searchIndex;
+    } catch (error) {
+      console.error("Failed to load search index:", error);
+      return null;
+    }
+  })();
+
+  return indexLoadPromise;
+}
+
+/**
+ * Search entries by query
+ */
+function searchEntries(
+  entries: SearchEntry[],
+  query: string,
+  options: {
+    type?: "component" | "guide";
+    category?: string;
+    limit?: number;
+  } = {}
+): SearchEntry[] {
+  const { type, category, limit = 20 } = options;
+  const normalizedQuery = query.toLowerCase().trim();
+
+  if (!normalizedQuery) {
+    return [];
+  }
+
+  // Filter and score entries
+  const scored = entries
+    .filter((entry) => {
+      // Apply type filter
+      if (type && entry.type !== type) {
+        return false;
+      }
+
+      // Apply category filter
+      if (category && entry.category !== category) {
+        return false;
+      }
+
+      return true;
+    })
+    .map((entry) => {
+      let score = 0;
+
+      // Title match (highest weight)
+      const titleLower = entry.title.toLowerCase();
+      if (titleLower === normalizedQuery) {
+        score += 100;
+      } else if (titleLower.startsWith(normalizedQuery)) {
+        score += 50;
+      } else if (titleLower.includes(normalizedQuery)) {
+        score += 25;
+      }
+
+      // Description match
+      const descLower = entry.description?.toLowerCase() || "";
+      if (descLower.includes(normalizedQuery)) {
+        score += 15;
+      }
+
+      // Excerpt match
+      const excerptLower = entry.excerpt?.toLowerCase() || "";
+      if (excerptLower.includes(normalizedQuery)) {
+        score += 10;
+      }
+
+      // Tag match
+      const tagMatch = entry.tags?.some(
+        (tag) => tag.toLowerCase().includes(normalizedQuery) || normalizedQuery.includes(tag.toLowerCase())
+      );
+      if (tagMatch) {
+        score += 20;
+      }
+
+      return { entry, score };
+    })
+    .filter(({ score }) => score > 0)
+    .sort((a, b) => b.score - a.score)
+    .slice(0, limit)
+    .map(({ entry }) => entry);
+
+  return scored;
+}
+
+/**
+ * GET /api/search
+ *
+ * Query parameters:
+ * - q: Search query (required)
+ * - type: Filter by type (component | guide)
+ * - category: Filter by category
+ * - limit: Maximum results (default: 20)
+ */
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const query = searchParams.get("q") || "";
+  const type = searchParams.get("type") as "component" | "guide" | null;
+  const category = searchParams.get("category");
+  const limit = Number.parseInt(searchParams.get("limit") || "20", 10);
+
+  if (!query.trim()) {
+    return NextResponse.json({
+      results: [],
+      query: "",
+      total: 0,
+    });
+  }
+
+  const index = await loadSearchIndex();
+
+  if (!index) {
+    return NextResponse.json(
+      { error: "Search index not available" },
+      { status: 503 }
+    );
+  }
+
+  const results = searchEntries(index.entries, query, {
+    type: type || undefined,
+    category: category || undefined,
+    limit,
+  });
+
+  return NextResponse.json({
+    results,
+    query,
+    total: results.length,
+    facets: index.facets,
+  });
+}
+
+/**
+ * POST /api/search
+ *
+ * Alternative endpoint for more complex queries
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { query = "", type, category, limit = 20 } = body;
+
+    if (!query.trim()) {
+      return NextResponse.json({
+        results: [],
+        query: "",
+        total: 0,
+      });
+    }
+
+    const index = await loadSearchIndex();
+
+    if (!index) {
+      return NextResponse.json(
+        { error: "Search index not available" },
+        { status: 503 }
+      );
+    }
+
+    const results = searchEntries(index.entries, query, {
+      type,
+      category,
+      limit,
+    });
+
+    return NextResponse.json({
+      results,
+      query,
+      total: results.length,
+      facets: index.facets,
+    });
+  } catch {
+    return NextResponse.json(
+      { error: "Invalid request body" },
+      { status: 400 }
+    );
+  }
+}