@ogygie/ui 0.21.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ogygie/ui",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "Ogygie front socle: the five prescribed patterns (DataTable, EmptyState, ErrorBanner, ContractForm, VarianceChart), one screen-state component (ScreenState), fetchContract and EditableText. Ships TypeScript sources — Ogygie products run Vite/tsx/vitest by construction (D1); a product imports them, it no longer copies them (D39).",
   "license": "MIT",
   "repository": {
@@ -24,7 +24,7 @@
     "./variance-chart": "./src/VarianceChart.tsx"
   },
   "dependencies": {
-    "@ogygie/core": "0.21.0"
+    "@ogygie/core": "0.23.0"
   },
   "peerDependencies": {
     "@tanstack/react-table": "^9.0.0",
@@ -58,7 +58,7 @@
     "react-hook-form": "^7.90.0",
     "recharts": "^3.10.1",
     "typescript": "^5.9.3",
-    "vitest": "^3.2.7",
+    "vitest": "^4.1.12",
     "zod": "^4.4.3"
   },
   "scripts": {

package/src/DisclosureList.test.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment jsdom
+/**
+ * @intent Proves the disclosure list (spec ogygie-ui B9 bis): one closed
+ * `<details>` per entry, anchored by the prefix and the id, the title in the
+ * summary, the body and the optional link with the caller's label; the empty
+ * state alone when there is nothing to show.
+ */
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { DisclosureList } from "./DisclosureList.js";
+
+const ENTRIES = [
+  { id: "what-is-the-scorecard", title: "What is the scorecard?", body: "A grid of criteria, one level each." },
+  { id: "who-can-see-my-data", title: "Who can see my data?", body: "Your company and the fund.", href: "?tab=scorecard" },
+];
+
+describe("DisclosureList", () => {
+  afterEach(cleanup);
+
+  it("ÉTANT DONNÉ deux entrées ALORS deux details fermés, ancrés, le titre en summary, le corps et le lien libellé par l'appelant", () => {
+    const { container } = render(<DisclosureList entries={ENTRIES} anchorPrefix="faq" linkLabel="Open the tab" />);
+    const details = container.querySelectorAll("details");
+    expect(details).toHaveLength(2);
+    expect(container.querySelectorAll("details[open]")).toHaveLength(0);
+    expect(container.querySelector("#faq-what-is-the-scorecard")).not.toBeNull();
+    expect(container.querySelector("#faq-who-can-see-my-data")).not.toBeNull();
+    expect(screen.getByText("What is the scorecard?").closest("summary")).not.toBeNull();
+    expect(screen.getByText(/A grid of criteria/)).toBeDefined();
+    const link = screen.getByRole("link", { name: "Open the tab" });
+    expect(link.getAttribute("href")).toBe("?tab=scorecard");
+    expect(container.querySelectorAll("a")).toHaveLength(1);
+    expect(container.querySelector("[data-pattern='DisclosureList']")).not.toBeNull();
+  });
+
+  it("ÉTANT DONNÉ aucune entrée et un état vide ALORS lui seul se rend ; sans état vide, une liste vide", () => {
+    const { container, unmount } = render(<DisclosureList entries={[]} anchorPrefix="faq" emptyState={<p>Nothing to read yet.</p>} />);
+    expect(screen.getByText("Nothing to read yet.")).toBeDefined();
+    expect(container.querySelector("[data-pattern='DisclosureList']")).toBeNull();
+    unmount();
+    const bare = render(<DisclosureList entries={[]} anchorPrefix="faq" />);
+    expect(bare.container.querySelector("[data-pattern='DisclosureList']")).not.toBeNull();
+    expect(bare.container.querySelectorAll("details")).toHaveLength(0);
+  });
+});

package/src/DisclosureList.tsx

@@ -0,0 +1,57 @@
+/**
+ * @intent Content folded under its title (spec ogygie-ui B9 bis, D56): the
+ * pattern a generated CONTENT view renders — a help page, a FAQ, release
+ * notes — as a list of native `<details>` elements, every entry closed at
+ * render, anchored by its id so a link can open the page on one answer, with
+ * one optional link per entry. The entries are the product's MATERIAL, written
+ * in its spec; the pattern lays them out and names nothing: the link label is
+ * a prop, translated by the caller. No colour outside the tokens, no script.
+ */
+import type { ReactNode } from "react";
+
+export interface DisclosureEntry {
+  /** Unique within the list; the anchor is `<anchorPrefix>-<id>`. */
+  id: string;
+  title: string;
+  body: string;
+  /** An in-app path or a query (`?tab=scorecard`), rendered as a link under the body. */
+  href?: string;
+}
+
+export interface DisclosureListProps {
+  entries: readonly DisclosureEntry[];
+  /** Prefix of every anchor, the view's id in a generated screen. */
+  anchorPrefix: string;
+  /** The label of an entry's link, when it carries one — the product's words. */
+  linkLabel?: ReactNode;
+  /** Rendered alone when the list is empty. */
+  emptyState?: ReactNode;
+}
+
+export function DisclosureList({ entries, anchorPrefix, linkLabel, emptyState }: DisclosureListProps) {
+  if (entries.length === 0 && emptyState !== undefined) return <>{emptyState}</>;
+  return (
+    <dl data-pattern="DisclosureList" className="divide-y divide-border rounded-md border border-border bg-surface-raised">
+      {entries.map((entry) => (
+        <details key={entry.id} id={`${anchorPrefix}-${entry.id}`} data-entry={entry.id} className="group px-4 py-3">
+          <summary className="cursor-pointer list-none text-sm font-medium text-text transition-colors hover:text-accent">
+            <span aria-hidden="true" className="mr-2 inline-block font-mono text-xs text-text-faint transition-transform group-open:rotate-90">
+              ›
+            </span>
+            {entry.title}
+          </summary>
+          <dd className="mt-2 ml-5 text-sm leading-relaxed whitespace-pre-line text-text-muted">
+            {entry.body}
+            {entry.href !== undefined && (
+              <p className="mt-2">
+                <a href={entry.href} className="text-accent underline-offset-2 hover:underline">
+                  {linkLabel ?? entry.href}
+                </a>
+              </p>
+            )}
+          </dd>
+        </details>
+      ))}
+    </dl>
+  );
+}

package/src/extensions.ts

@@ -0,0 +1,18 @@
+/**
+ * @intent What a screen EXTENSION POINT exchanges (spec ogygie-ui B9 bis,
+ * D56): a host screen of the product declares a point at the manifest — a
+ * place where other screens may mount, a tab bar in v1 — and the generator
+ * maintains in the host's folder a registry of `TabContribution`: the id of
+ * the contribution, its label (a translated node the contributing screen's
+ * written body owns), and what to render. The host reads the registry once
+ * and keeps its own tab bar: no component is imposed here, only the shape.
+ */
+import type { ReactNode } from "react";
+
+export interface TabContribution {
+  /** Unique on the point; the id the host uses to select the tab. */
+  id: string;
+  label: ReactNode;
+  /** The contributing screen's container, rendered when the tab is active. */
+  render: () => ReactNode;
+}

package/src/index.ts

@@ -9,6 +9,8 @@
  * resolves them.
  */
 export { EmptyState, type EmptyStateProps } from "./EmptyState.js";
+export { DisclosureList, type DisclosureEntry, type DisclosureListProps } from "./DisclosureList.js";
+export type { TabContribution } from "./extensions.js";
 export { ErrorBanner, type ErrorBannerProps } from "./ErrorBanner.js";
 export { ScreenState, Skeleton, type ScreenStateProps, type StateCopy } from "./ScreenState.js";
 export { EditableText, type EditableTextProps } from "./EditableText.js";