@wakastellar/ui 3.5.2 → 4.0.0

package/src/components/waka-doc-nav/index.tsx

@@ -22,16 +22,18 @@ export interface WakaDocNavProps {
 
 export function WakaDocNav({ items, activeId, onItemClick, className }: WakaDocNavProps) {
   return (
-    <nav className={cn("space-y-1", className)}>
-      {items.map((item) => (
-        <NavItem
-          key={item.id}
-          item={item}
-          activeId={activeId}
-          onItemClick={onItemClick}
-          depth={0}
-        />
-      ))}
+    <nav aria-label="Documentation" className={cn("space-y-1", className)}>
+      <ul className="space-y-1 list-none p-0 m-0">
+        {items.map((item) => (
+          <NavItem
+            key={item.id}
+            item={item}
+            activeId={activeId}
+            onItemClick={onItemClick}
+            depth={0}
+          />
+        ))}
+      </ul>
     </nav>
   )
 }
@@ -68,11 +70,15 @@ function NavItem({
     : FileText
 
   return (
-    <div>
+    <li>
       <button
+        type="button"
         onClick={handleClick}
+        aria-expanded={hasChildren ? expanded : undefined}
+        aria-current={isActive ? "page" : undefined}
         className={cn(
           "group flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm transition-all duration-200",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
           isActive
             ? "bg-primary/10 font-medium text-primary"
             : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
@@ -81,25 +87,29 @@ function NavItem({
       >
         {hasChildren && (
           <ChevronRight
+            aria-hidden="true"
             className={cn(
               "h-3.5 w-3.5 shrink-0 transition-transform duration-200",
               expanded && "rotate-90"
             )}
           />
         )}
-        <span className="shrink-0">
+        <span className="shrink-0" aria-hidden="true">
           {item.icon || <DefaultIcon className="h-4 w-4" />}
         </span>
         <span className="truncate">{item.label}</span>
         {item.badge && (
-          <span className="ml-auto shrink-0 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+          <span
+            className="ml-auto shrink-0 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
+            aria-label={`${item.badge} (badge)`}
+          >
             {item.badge}
           </span>
         )}
       </button>
 
       {hasChildren && expanded && (
-        <div className="mt-0.5 space-y-0.5">
+        <ul className="mt-0.5 space-y-0.5 list-none p-0 m-0">
           {item.children!.map((child) => (
             <NavItem
               key={child.id}
@@ -109,9 +119,9 @@ function NavItem({
               depth={depth + 1}
             />
           ))}
-        </div>
+        </ul>
       )}
-    </div>
+    </li>
   )
 }
 

package/src/components/waka-doc-renderer/WakaDocRenderer.mdx

@@ -0,0 +1,73 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaDocRenderer.stories'
+
+<Meta of={Stories} />
+
+# WakaDocRenderer
+
+Main markdown/MDX renderer for the WakaDoc site; handles headings, code, callouts.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaDocRenderer } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-doc-renderer`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Simple Content
+
+<Canvas of={Stories.SimpleContent} />
+
+### Table Heavy
+
+<Canvas of={Stories.TableHeavy} />
+
+### Callouts
+
+<Canvas of={Stories.Callouts} />
+
+### Code Showcase
+
+<Canvas of={Stories.CodeShowcase} />
+
+### Empty
+
+<Canvas of={Stories.Empty} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/waka-doc-renderer.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-doc-renderer/WakaDocRenderer.stories.tsx

@@ -13,7 +13,6 @@ const meta: Meta<typeof WakaDocRenderer> = {
       },
     },
   },
-  tags: ['autodocs'],
 }
 
 export default meta
@@ -118,3 +117,76 @@ export const SimpleContent: Story = {
     content: '# Hello World\n\nA simple paragraph with **bold** and *italic* text.\n\n## Section\n\nMore content here.',
   },
 }
+
+export const TableHeavy: Story = {
+  args: {
+    content: `# Pricing tiers
+
+| Tier | Seats | Storage | SLA |
+|------|-------|---------|-----|
+| Starter | 5 | 10 GB | None |
+| Pro | 25 | 100 GB | 99.5% |
+| Enterprise | Unlimited | 1 TB+ | 99.95% |
+
+| Region | Latency | HDS certified |
+|--------|---------|----------------|
+| Paris | 12 ms | Yes |
+| Frankfurt | 38 ms | Yes |
+| New York | 92 ms | No |
+`,
+  },
+}
+
+export const Callouts: Story = {
+  args: {
+    content: `# Callouts
+
+> [!info]
+> The audit trail is anchored weekly to the Stellar blockchain.
+
+> [!warning]
+> Rotating the encryption key requires a migration plan — do not skip the runbook.
+
+> [!tip]
+> Use \`pnpm dev --filter @wakastellar/ui\` to iterate fast.
+
+> A regular blockquote stays styled as a blockquote (not a callout).
+`,
+  },
+}
+
+export const CodeShowcase: Story = {
+  args: {
+    content: `# Snippets
+
+\`\`\`typescript
+import { Button } from '@wakastellar/ui'
+
+export function Save() {
+  return <Button variant="default">Save changes</Button>
+}
+\`\`\`
+
+\`\`\`bash
+pnpm install
+pnpm storybook
+\`\`\`
+
+Inline \`code\` is also handled with the same theming.
+`,
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    content: '',
+  },
+}
+
+/**
+ * Playground — generated to make the Storybook Controls panel functional.
+ * Exposes a default arg set wired to the component via {...args}.
+ */
+export const Playground: Story = {
+  render: (args) => <WakaDocRenderer {...args} />,
+}

package/src/components/waka-doc-search/WakaDocSearch.mdx

@@ -0,0 +1,75 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaDocSearch.stories'
+
+<Meta of={Stories} />
+
+# WakaDocSearch
+
+Full-text search box for the WakaDoc site with keyboard shortcut and result preview.
+
+> ⚠️ **Composant en refactor.** Ce composant est marqué `refactor` dans l'audit (cf. `docs/audit/components/waka-doc-search.md`). Il pourra être fusionné, scindé ou déplacé dans un sous-projet futur ; vérifiez la fiche d'audit avant tout usage massif.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaDocSearch } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-doc-search`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Empty
+
+<Canvas of={Stories.Empty} />
+
+### Small Corpus
+
+<Canvas of={Stories.SmallCorpus} />
+
+### In Header
+
+<Canvas of={Stories.InHeader} />
+
+### Controlled
+
+<Canvas of={Stories.Controlled} />
+
+### Categories
+
+<Canvas of={Stories.Categories} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/waka-doc-search.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-doc-search/WakaDocSearch.stories.tsx

@@ -13,7 +13,6 @@ const meta: Meta<typeof WakaDocSearch> = {
       },
     },
   },
-  tags: ['autodocs'],
 }
 
 export default meta
@@ -62,3 +61,83 @@ export const Default: Story = {
     </div>
   ),
 }
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaDocSearch pages={[]} />
+    </div>
+  ),
+}
+
+export const SmallCorpus: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaDocSearch
+        pages={samplePages.slice(0, 2)}
+        placeholder="Search in 2 pages…"
+      />
+    </div>
+  ),
+}
+
+export const InHeader: Story = {
+  render: () => (
+    <div className="flex w-[640px] items-center justify-between gap-4 rounded-md border bg-card px-4 py-2">
+      <span className="text-sm font-semibold">WakaDoc</span>
+      <div className="w-[280px]">
+        <WakaDocSearch pages={samplePages} />
+      </div>
+      <span className="text-xs text-muted-foreground">v4.0.0</span>
+    </div>
+  ),
+}
+
+export const Controlled: Story = {
+  render: function ControlledSearch() {
+    const [selected, setSelected] = React.useState<string>()
+    return (
+      <div className="w-[400px] space-y-3">
+        <WakaDocSearch
+          pages={samplePages}
+          onSelect={(page) => setSelected(page.title)}
+        />
+        <p className="text-center text-xs text-muted-foreground">
+          {selected ? `Picked: ${selected}` : 'Type to search the docs.'}
+        </p>
+      </div>
+    )
+  },
+}
+
+export const Categories: Story = {
+  render: () => (
+    <div className="w-[420px]">
+      <WakaDocSearch
+        pages={[
+          ...samplePages,
+          {
+            id: '6',
+            title: 'Migrating from v3 to v4',
+            content: 'Step-by-step migration guide with codemods and breaking changes.',
+            category: 'Migration',
+          },
+          {
+            id: '7',
+            title: 'Accessibility',
+            content: 'Every component ships with WAI-ARIA semantics and keyboard navigation by default.',
+            category: 'Reference',
+          },
+        ]}
+      />
+    </div>
+  ),
+}
+
+/**
+ * Playground — generated to make the Storybook Controls panel functional.
+ * Exposes a default arg set wired to the component via {...args}.
+ */
+export const Playground: Story = {
+  render: (args) => <WakaDocSearch {...args} />,
+}

package/src/components/waka-doc-search/index.tsx

@@ -25,6 +25,11 @@ export interface WakaDocSearchProps {
   className?: string
 }
 
+/**
+ * @deprecated Since v3.6 — will be removed in v4.0.
+ * Use the `@wakastellar/ui-docs` sub-package (`<DocSearch>` with shared provider) instead.
+ * See `docs/audit/remove-relocate.md` §2.2.
+ */
 export function WakaDocSearch({
   pages,
   onSelect,
@@ -124,6 +129,7 @@ export function WakaDocSearch({
         <div className="absolute top-full z-50 mt-2 w-full overflow-hidden rounded-lg border border-border/50 bg-background/95 shadow-lg backdrop-blur-md">
           {results.map((result, i) => (
             <button
+              type="button"
               key={result.page.id}
               onMouseDown={() => {
                 onSelect?.(result.page)

package/src/components/waka-doc-table/WakaDocTable.mdx

@@ -0,0 +1,73 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaDocTable.stories'
+
+<Meta of={Stories} />
+
+# WakaDocTable
+
+Table renderer optimised for documentation, with sticky headers and column alignment.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaDocTable } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-doc-table`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Striped
+
+<Canvas of={Stories.Striped} />
+
+### Sticky Header
+
+<Canvas of={Stories.StickyHeader} />
+
+### Compact
+
+<Canvas of={Stories.Compact} />
+
+### Empty
+
+<Canvas of={Stories.Empty} />
+
+### Rich Cells
+
+<Canvas of={Stories.RichCells} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/waka-doc-table.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-doc-table/WakaDocTable.stories.tsx

@@ -13,7 +13,6 @@ const meta: Meta<typeof WakaDocTable> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     stickyHeader: { control: 'boolean' },
     striped: { control: 'boolean' },
@@ -45,3 +44,131 @@ export const Default: Story = {
     </div>
   ),
 }
+
+export const Striped: Story = {
+  args: { striped: true },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaDocTable {...args}>
+        <thead>
+          <tr>
+            <th>Prop</th>
+            <th>Type</th>
+            <th>Default</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr><td><code>variant</code></td><td><code>"default" | "outline"</code></td><td><code>"default"</code></td></tr>
+          <tr><td><code>size</code></td><td><code>"sm" | "md" | "lg"</code></td><td><code>"md"</code></td></tr>
+          <tr><td><code>disabled</code></td><td><code>boolean</code></td><td><code>false</code></td></tr>
+          <tr><td><code>onClick</code></td><td><code>(e) =&gt; void</code></td><td>—</td></tr>
+        </tbody>
+      </WakaDocTable>
+    </div>
+  ),
+}
+
+export const StickyHeader: Story = {
+  args: { stickyHeader: true },
+  render: (args) => (
+    <div className="h-[260px] w-[600px] overflow-y-auto rounded-md border">
+      <WakaDocTable {...args}>
+        <thead>
+          <tr>
+            <th>Endpoint</th>
+            <th>Method</th>
+            <th>Auth</th>
+          </tr>
+        </thead>
+        <tbody>
+          {Array.from({ length: 18 }).map((_, i) => (
+            <tr key={i}>
+              <td><code>/api/resources/{i + 1}</code></td>
+              <td>{['GET', 'POST', 'PUT', 'DELETE'][i % 4]}</td>
+              <td>{i % 3 === 0 ? 'Public' : 'Bearer'}</td>
+            </tr>
+          ))}
+        </tbody>
+      </WakaDocTable>
+    </div>
+  ),
+}
+
+export const Compact: Story = {
+  render: () => (
+    <div className="w-[420px]">
+      <WakaDocTable>
+        <thead>
+          <tr>
+            <th>Region</th>
+            <th>HDS</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr><td>Paris</td><td>Yes</td></tr>
+          <tr><td>Frankfurt</td><td>Yes</td></tr>
+          <tr><td>New York</td><td>No</td></tr>
+        </tbody>
+      </WakaDocTable>
+    </div>
+  ),
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[420px]">
+      <WakaDocTable>
+        <thead>
+          <tr>
+            <th>Date</th>
+            <th>Event</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td colSpan={2} className="text-center text-sm text-muted-foreground">
+              No entries yet.
+            </td>
+          </tr>
+        </tbody>
+      </WakaDocTable>
+    </div>
+  ),
+}
+
+export const RichCells: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaDocTable striped>
+        <thead>
+          <tr>
+            <th>Plan</th>
+            <th>Price</th>
+            <th>SLA</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="font-medium">Starter</td>
+            <td>€9 / mo</td>
+            <td>—</td>
+            <td><span className="rounded-full bg-muted px-2 py-0.5 text-xs">Free trial</span></td>
+          </tr>
+          <tr>
+            <td className="font-medium">Pro</td>
+            <td>€29 / mo</td>
+            <td>99.5%</td>
+            <td><span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300">Most popular</span></td>
+          </tr>
+          <tr>
+            <td className="font-medium">Enterprise</td>
+            <td>Custom</td>
+            <td>99.95%</td>
+            <td><span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs text-amber-700 dark:bg-amber-500/20 dark:text-amber-300">Contact us</span></td>
+          </tr>
+        </tbody>
+      </WakaDocTable>
+    </div>
+  ),
+}