@hypoth-ui/docs-renderer-next 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 hypoth-org
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,44 @@
+# @hypoth-ui/docs-renderer-next
+
+![Alpha](https://img.shields.io/badge/status-alpha-orange)
+
+Next.js-based documentation site renderer for the hypoth-ui design system. Renders MDX content packs with edition filtering, tenant branding, search, and live component previews.
+
+## Installation
+
+```bash
+npm install @hypoth-ui/docs-renderer-next
+```
+
+> **Note:** This is primarily an internal package used to build the documentation site.
+
+## Usage
+
+### Import Components
+
+```typescript
+import { NavSidebar } from '@hypoth-ui/docs-renderer-next/components/nav-sidebar';
+import { MdxRenderer } from '@hypoth-ui/docs-renderer-next/components/mdx-renderer';
+```
+
+### Import Styles
+
+```typescript
+import '@hypoth-ui/docs-renderer-next/styles/globals.css';
+```
+
+### Run the Docs Site
+
+```bash
+pnpm --filter @ds/docs-app dev:core        # Core edition
+pnpm --filter @ds/docs-app dev:pro         # Pro edition
+pnpm --filter @ds/docs-app dev:enterprise  # Enterprise edition
+```
+
+## Documentation
+
+See the [main README](../../README.md) for full documentation and architecture overview.
+
+## License
+
+MIT

package/app/accessibility/CategoryFilter.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import type { CategoryInfo, ConformanceStatus } from "@hypoth-ui/docs-core";
+import { useState } from "react";
+
+interface CategoryFilterProps {
+  categories: CategoryInfo[];
+  selectedCategory: string | null;
+  selectedStatus: ConformanceStatus | null;
+  onCategoryChange: (category: string | null) => void;
+  onStatusChange: (status: ConformanceStatus | null) => void;
+  onSearchChange: (query: string) => void;
+}
+
+const STATUSES: Array<{ value: ConformanceStatus; label: string }> = [
+  { value: "conformant", label: "Conformant" },
+  { value: "partial", label: "Partial" },
+  { value: "non-conformant", label: "Non-Conformant" },
+  { value: "pending", label: "Pending" },
+];
+
+export function CategoryFilter({
+  categories,
+  selectedCategory,
+  selectedStatus,
+  onCategoryChange,
+  onStatusChange,
+  onSearchChange,
+}: CategoryFilterProps) {
+  const [searchValue, setSearchValue] = useState("");
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setSearchValue(value);
+    onSearchChange(value);
+  };
+
+  return (
+    <div className="mb-6 space-y-4">
+      {/* Search */}
+      <div>
+        <label htmlFor="search" className="sr-only">
+          Search components
+        </label>
+        <input
+          type="search"
+          id="search"
+          placeholder="Search components..."
+          value={searchValue}
+          onChange={handleSearchChange}
+          className="w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-800"
+        />
+      </div>
+
+      {/* Filters */}
+      <div className="flex flex-wrap gap-4">
+        {/* Category filter */}
+        <div>
+          <label
+            htmlFor="category"
+            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+          >
+            Category
+          </label>
+          <select
+            id="category"
+            value={selectedCategory ?? ""}
+            onChange={(e) => onCategoryChange(e.target.value || null)}
+            className="rounded-lg border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800"
+          >
+            <option value="">All Categories</option>
+            {categories.map((cat) => (
+              <option key={cat.id} value={cat.id}>
+                {cat.name} ({cat.count})
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Status filter */}
+        <div>
+          <label
+            htmlFor="status"
+            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+          >
+            Status
+          </label>
+          <select
+            id="status"
+            value={selectedStatus ?? ""}
+            onChange={(e) => onStatusChange((e.target.value as ConformanceStatus) || null)}
+            className="rounded-lg border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800"
+          >
+            <option value="">All Statuses</option>
+            {STATUSES.map((status) => (
+              <option key={status.value} value={status.value}>
+                {status.label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Clear filters */}
+        {(selectedCategory || selectedStatus || searchValue) && (
+          <div className="flex items-end">
+            <button
+              type="button"
+              onClick={() => {
+                onCategoryChange(null);
+                onStatusChange(null);
+                setSearchValue("");
+                onSearchChange("");
+              }}
+              className="rounded-lg px-3 py-2 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+            >
+              Clear filters
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/app/accessibility/ConformanceTable.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import type { ComponentConformance } from "@hypoth-ui/docs-core";
+import Link from "next/link";
+import { StatusBadge } from "./StatusBadge";
+
+interface ConformanceTableProps {
+  components: ComponentConformance[];
+}
+
+export function ConformanceTable({ components }: ConformanceTableProps) {
+  if (components.length === 0) {
+    return (
+      <div className="rounded-lg border border-gray-200 bg-gray-50 p-8 text-center dark:border-gray-700 dark:bg-gray-800">
+        <p className="text-gray-600 dark:text-gray-400">No components match the current filters.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
+      <table className="w-full">
+        <thead className="bg-gray-50 dark:bg-gray-800">
+          <tr>
+            <th
+              scope="col"
+              className="px-4 py-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100"
+            >
+              Component
+            </th>
+            <th
+              scope="col"
+              className="px-4 py-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100"
+            >
+              Category
+            </th>
+            <th
+              scope="col"
+              className="px-4 py-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100"
+            >
+              Status
+            </th>
+            <th
+              scope="col"
+              className="px-4 py-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100"
+            >
+              Automated
+            </th>
+            <th
+              scope="col"
+              className="px-4 py-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100"
+            >
+              Manual Audit
+            </th>
+            <th
+              scope="col"
+              className="px-4 py-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100"
+            >
+              Last Updated
+            </th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+          {components.map((component) => (
+            <tr key={component.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/50">
+              <td className="px-4 py-3">
+                <Link
+                  href={`/accessibility/${component.id}`}
+                  className="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+                >
+                  {component.name}
+                </Link>
+                <div className="text-xs text-gray-500">{component.id}</div>
+              </td>
+              <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
+                {component.category}
+              </td>
+              <td className="px-4 py-3">
+                <StatusBadge status={component.status} size="sm" />
+              </td>
+              <td className="px-4 py-3 text-sm">
+                {component.automatedPassed ? (
+                  <span className="text-green-600 dark:text-green-400">✓ Passed</span>
+                ) : (
+                  <span className="text-red-600 dark:text-red-400">✗ Failed</span>
+                )}
+              </td>
+              <td className="px-4 py-3 text-sm">
+                {component.manualAuditComplete ? (
+                  <span className="text-green-600 dark:text-green-400">
+                    {component.passCount}/{(component.passCount ?? 0) + (component.failCount ?? 0)}{" "}
+                    passed
+                  </span>
+                ) : (
+                  <span className="text-gray-500 dark:text-gray-400">Not audited</span>
+                )}
+              </td>
+              <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
+                {component.lastAuditDate
+                  ? new Date(component.lastAuditDate).toLocaleDateString()
+                  : "—"}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/app/accessibility/StatusBadge.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import type { ConformanceStatus } from "@hypoth-ui/docs-core";
+
+interface StatusBadgeProps {
+  status: ConformanceStatus;
+  size?: "sm" | "md";
+}
+
+const STATUS_CONFIG: Record<ConformanceStatus, { icon: string; label: string; className: string }> =
+  {
+    conformant: {
+      icon: "✅",
+      label: "Conformant",
+      className: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
+    },
+    partial: {
+      icon: "⚠️",
+      label: "Partial",
+      className: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
+    },
+    "non-conformant": {
+      icon: "❌",
+      label: "Non-Conformant",
+      className: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
+    },
+    pending: {
+      icon: "⏳",
+      label: "Pending Audit",
+      className: "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200",
+    },
+  };
+
+export function StatusBadge({ status, size = "md" }: StatusBadgeProps) {
+  const config = STATUS_CONFIG[status] ?? STATUS_CONFIG.pending;
+
+  const sizeClasses = size === "sm" ? "px-2 py-0.5 text-xs" : "px-3 py-1 text-sm";
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full font-medium ${config.className} ${sizeClasses}`}
+    >
+      <span aria-hidden="true">{config.icon}</span>
+      <span>{config.label}</span>
+    </span>
+  );
+}

package/app/accessibility/[component]/page.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import type { ComponentConformance } from "@hypoth-ui/docs-core";
+import Link from "next/link";
+import { use } from "react";
+import { StatusBadge } from "../StatusBadge";
+
+// Placeholder component data
+const COMPONENT_DATA: Record<string, ComponentConformance> = {
+  "ds-button": {
+    id: "ds-button",
+    name: "Button",
+    category: "form-controls",
+    status: "conformant",
+    wcagLevel: "AA",
+    lastAuditDate: "2026-01-04T10:00:00Z",
+    lastAuditor: "auditor@example.com",
+    automatedPassed: true,
+    manualAuditComplete: true,
+    passCount: 10,
+    failCount: 0,
+    exceptionCount: 0,
+  },
+};
+
+interface ComponentPageProps {
+  params: Promise<{
+    component: string;
+  }>;
+}
+
+export default function ComponentDetailPage({ params }: ComponentPageProps) {
+  const { component: componentId } = use(params);
+  const component = COMPONENT_DATA[componentId];
+
+  if (!component) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
+          Component Not Found
+        </h1>
+        <p className="text-gray-600 dark:text-gray-400 mb-4">
+          No accessibility data found for component: {componentId}
+        </p>
+        <Link
+          href="/accessibility"
+          className="text-blue-600 hover:text-blue-800 dark:text-blue-400"
+        >
+          ← Back to Accessibility Conformance
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-8">
+      {/* Breadcrumb */}
+      <nav className="mb-6 text-sm">
+        <Link
+          href="/accessibility"
+          className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+        >
+          Accessibility Conformance
+        </Link>
+        <span className="mx-2 text-gray-400">/</span>
+        <span className="text-gray-900 dark:text-gray-100">{component.name}</span>
+      </nav>
+
+      {/* Header */}
+      <header className="mb-8">
+        <div className="flex items-center gap-4 mb-2">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">{component.name}</h1>
+          <StatusBadge status={component.status} />
+        </div>
+        <p className="text-gray-600 dark:text-gray-400">
+          {component.id} • {component.category}
+        </p>
+      </header>
+
+      {/* Status summary */}
+      <section className="mb-8 grid grid-cols-2 md:grid-cols-4 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-lg font-semibold text-gray-900 dark:text-gray-100">
+            {component.automatedPassed ? "✓ Passed" : "✗ Failed"}
+          </div>
+          <div className="text-sm text-gray-600 dark:text-gray-400">Automated Tests</div>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
+          <div className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            {component.manualAuditComplete ? "Complete" : "Pending"}
+          </div>
+          <div className="text-sm text-gray-600 dark:text-gray-400">Manual Audit</div>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
+          <div className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            WCAG {component.wcagLevel}
+          </div>
+          <div className="text-sm text-gray-600 dark:text-gray-400">Target Level</div>
+        </div>
+        <div className="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
+          <div className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            {component.lastAuditDate ? new Date(component.lastAuditDate).toLocaleDateString() : "—"}
+          </div>
+          <div className="text-sm text-gray-600 dark:text-gray-400">Last Audit</div>
+        </div>
+      </section>
+
+      {/* Manual audit results */}
+      {component.manualAuditComplete && (
+        <section className="mb-8">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
+            Manual Audit Results
+          </h2>
+          <div className="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-800">
+            <div className="grid grid-cols-3 gap-4 text-center">
+              <div>
+                <div className="text-2xl font-bold text-green-600 dark:text-green-400">
+                  {component.passCount ?? 0}
+                </div>
+                <div className="text-sm text-gray-600 dark:text-gray-400">Passed</div>
+              </div>
+              <div>
+                <div className="text-2xl font-bold text-red-600 dark:text-red-400">
+                  {component.failCount ?? 0}
+                </div>
+                <div className="text-sm text-gray-600 dark:text-gray-400">Failed</div>
+              </div>
+              <div>
+                <div className="text-2xl font-bold text-yellow-600 dark:text-yellow-400">
+                  {component.exceptionCount ?? 0}
+                </div>
+                <div className="text-sm text-gray-600 dark:text-gray-400">Exceptions</div>
+              </div>
+            </div>
+            {component.lastAuditor && (
+              <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-600 dark:text-gray-400">
+                Audited by: {component.lastAuditor}
+              </div>
+            )}
+          </div>
+        </section>
+      )}
+
+      {/* Component documentation link */}
+      <section className="mb-8">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
+          Documentation
+        </h2>
+        <Link
+          href={`/components/${component.id.replace("ds-", "")}`}
+          className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800 dark:text-blue-400"
+        >
+          View {component.name} component documentation →
+        </Link>
+      </section>
+
+      {/* Back link */}
+      <Link
+        href="/accessibility"
+        className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+      >
+        ← Back to Accessibility Conformance
+      </Link>
+    </div>
+  );
+}