@reddb-io/ui-kit 0.3.4 → 0.3.5

package/vendor/ds/kits/app/test/split-view.test.ts

@@ -0,0 +1,210 @@
+// SplitView, as an application meets it.
+//
+// The arithmetic is already proven in split-view.behavior.test.ts, so what is
+// left here is everything that needs a DOM: which element carries the drag,
+// what the separator tells assistive technology, and that the panes really do
+// resize — by pointer *and* by keyboard, because a splitter that only answers
+// to a mouse is the usual one and is unusable without one.
+
+import { flushSync } from "svelte";
+import { describe, expect, it } from "vitest";
+import SplitView from "../src/primitives/SplitView.svelte";
+import { SPLIT_BOUNDS, SPLIT_STEP } from "../src/primitives/split-view.behavior";
+import { splitView } from "../src/primitives/split-view.variants";
+import { classes, classesOf, render, rendered, text } from "./mount";
+
+/** The start pane, the divider and the end pane, in document order. */
+function parts(element: HTMLElement): [HTMLElement, HTMLElement, HTMLElement] {
+  const [start, divider, end] = [...element.children] as HTMLElement[];
+  return [start!, divider!, end!];
+}
+
+/** Both panes' widths, as the inline style carries them. */
+function basis(element: HTMLElement): [string, string] {
+  const [start, , end] = parts(element);
+  return [start.style.flexBasis, end.style.flexBasis];
+}
+
+/** Give the container a size, which jsdom otherwise reports as zero. */
+function measured(element: HTMLElement, width: number, height: number): void {
+  element.getBoundingClientRect = () =>
+    ({ left: 0, top: 0, right: width, bottom: height, width, height, x: 0, y: 0 }) as DOMRect;
+}
+
+function press(element: HTMLElement, key: string): KeyboardEvent {
+  const event = new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true });
+  element.dispatchEvent(event);
+  flushSync();
+  return event;
+}
+
+function pointer(element: HTMLElement, type: string, position: Partial<MouseEventInit> = {}): void {
+  element.dispatchEvent(new MouseEvent(type, { bubbles: true, cancelable: true, ...position }));
+  flushSync();
+}
+
+describe("SplitView", () => {
+  it("renders two panes with a divider between them", () => {
+    const element = rendered(render(SplitView, { start: text("left"), end: text("right") }));
+    const [start, divider, end] = parts(element);
+    expect(start.textContent?.trim()).toBe("left");
+    expect(divider.getAttribute("role")).toBe("separator");
+    expect(end.textContent?.trim()).toBe("right");
+    expect(element.getAttribute("data-orientation")).toBe("horizontal");
+  });
+
+  it("splits the container down the middle by default", () => {
+    expect(basis(rendered(render(SplitView, {})))).toEqual(["50%", "50%"]);
+  });
+
+  it("takes the fraction it is given, and keeps both panes on screen", () => {
+    expect(basis(rendered(render(SplitView, { fraction: 0.25 })))).toEqual(["25%", "75%"]);
+    // A fraction outside the bounds is held at them rather than collapsing a pane.
+    expect(basis(rendered(render(SplitView, { fraction: 2 })))).toEqual([
+      `${SPLIT_BOUNDS.max * 100}%`,
+      `${Math.round((1 - SPLIT_BOUNDS.max) * 1000) / 10}%`,
+    ]);
+  });
+
+  it("describes the split to assistive technology as a movable separator", () => {
+    const [, divider] = parts(rendered(render(SplitView, { fraction: 0.4 })));
+    // Panes side by side are divided by a vertical rule.
+    expect(divider.getAttribute("aria-orientation")).toBe("vertical");
+    expect(divider.getAttribute("aria-valuenow")).toBe("40");
+    expect(divider.getAttribute("aria-valuemin")).toBe(`${SPLIT_BOUNDS.min * 100}`);
+    expect(divider.getAttribute("aria-valuemax")).toBe(`${SPLIT_BOUNDS.max * 100}`);
+    // Reachable without a pointer at all, and named when it gets there.
+    expect(divider.getAttribute("tabindex")).toBe("0");
+    expect(divider.getAttribute("aria-label")).toBe("Resize panes");
+  });
+
+  it("takes the caller's name for the divider", () => {
+    const [, divider] = parts(rendered(render(SplitView, { label: "Resize the inspector" })));
+    expect(divider.getAttribute("aria-label")).toBe("Resize the inspector");
+  });
+
+  it("turns the rule the other way when the panes are stacked", () => {
+    const element = rendered(render(SplitView, { orientation: "vertical" }));
+    const [start, divider] = parts(element);
+    expect(element.getAttribute("data-orientation")).toBe("vertical");
+    expect(divider.getAttribute("aria-orientation")).toBe("horizontal");
+    expect(classes(element)).toEqual(classesOf(splitView({ orientation: "vertical" }).root()));
+    expect(classes(start)).toEqual(classesOf(splitView({ orientation: "vertical" }).pane()));
+  });
+
+  it("moves the divider with the arrow keys of its own axis", () => {
+    const element = rendered(render(SplitView, {}));
+    const [, divider] = parts(element);
+
+    const forward = press(divider, "ArrowRight");
+    expect(forward.defaultPrevented).toBe(true);
+    expect(basis(element)[0]).toBe(`${(0.5 + SPLIT_STEP) * 100}%`);
+
+    press(divider, "ArrowLeft");
+    expect(basis(element)[0]).toBe("50%");
+  });
+
+  it("takes the divider to either end", () => {
+    const element = rendered(render(SplitView, {}));
+    const [, divider] = parts(element);
+
+    press(divider, "End");
+    expect(basis(element)[0]).toBe(`${SPLIT_BOUNDS.max * 100}%`);
+    press(divider, "Home");
+    expect(basis(element)[0]).toBe(`${SPLIT_BOUNDS.min * 100}%`);
+  });
+
+  it("leaves the keys that are not its own to the page", () => {
+    const element = rendered(render(SplitView, {}));
+    const [, divider] = parts(element);
+
+    for (const key of ["ArrowUp", "ArrowDown", "PageDown", "Tab"]) {
+      const event = press(divider, key);
+      // Not prevented, and the split has not moved: the page keeps its keys.
+      expect(event.defaultPrevented).toBe(false);
+      expect(basis(element)[0]).toBe("50%");
+    }
+  });
+
+  it("resizes on a drag, once the divider has been taken hold of", () => {
+    const element = rendered(render(SplitView, {}));
+    const [, divider] = parts(element);
+    measured(element, 200, 100);
+
+    // A move nobody started is somebody else's pointer crossing the divider.
+    pointer(divider, "pointermove", { clientX: 40 });
+    expect(basis(element)[0]).toBe("50%");
+
+    pointer(divider, "pointerdown", { clientX: 100 });
+    pointer(divider, "pointermove", { clientX: 40 });
+    expect(basis(element)).toEqual(["20%", "80%"]);
+  });
+
+  it("follows the other axis when the panes are stacked", () => {
+    const element = rendered(render(SplitView, { orientation: "vertical" }));
+    const [, divider] = parts(element);
+    measured(element, 200, 100);
+
+    pointer(divider, "pointerdown", { clientY: 50 });
+    pointer(divider, "pointermove", { clientY: 30 });
+    expect(basis(element)).toEqual(["30%", "70%"]);
+  });
+
+  it("stops following the pointer once it is let go", () => {
+    const element = rendered(render(SplitView, {}));
+    const [, divider] = parts(element);
+    measured(element, 200, 100);
+
+    pointer(divider, "pointerdown", { clientX: 100 });
+    pointer(divider, "pointermove", { clientX: 60 });
+    expect(basis(element)[0]).toBe("30%");
+
+    pointer(divider, "pointerup", { clientX: 60 });
+    pointer(divider, "pointermove", { clientX: 160 });
+    expect(basis(element)[0]).toBe("30%");
+  });
+
+  it("leaves the divider alone in a container it cannot measure", () => {
+    // jsdom reports every box as zero, which is also what a hidden container
+    // reports in a browser: a drag with nothing to divide must not slam the
+    // divider to an edge.
+    const element = rendered(render(SplitView, {}));
+    const [, divider] = parts(element);
+
+    pointer(divider, "pointerdown", { clientX: 100 });
+    pointer(divider, "pointermove", { clientX: 40 });
+    expect(basis(element)[0]).toBe("50%");
+  });
+
+  it("shows that the divider is being held, and stops when it is not", () => {
+    const element = rendered(render(SplitView, {}));
+    const [, divider] = parts(element);
+
+    pointer(divider, "pointerdown", { clientX: 100 });
+    expect(classes(divider)).toEqual(classesOf(splitView({ dragging: true }).divider()));
+
+    pointer(divider, "pointerup", { clientX: 100 });
+    expect(classes(divider)).toEqual(classesOf(splitView({ dragging: false }).divider()));
+  });
+
+  it("wears exactly the classes its variants module produces", () => {
+    const element = rendered(render(SplitView, {}));
+    const [start, divider, end] = parts(element);
+    const slots = splitView({ orientation: "horizontal", dragging: false });
+    expect(classes(element)).toEqual(classesOf(slots.root()));
+    expect(classes(start)).toEqual(classesOf(slots.pane()));
+    expect(classes(end)).toEqual(classesOf(slots.pane()));
+    expect(classes(divider)).toEqual(classesOf(slots.divider()));
+  });
+
+  it("merges a caller's classes over the root slot's own", () => {
+    const element = rendered(render(SplitView, { class: "h-64" }));
+    expect(classes(element).has("h-64")).toBe(true);
+    expect(classes(element).has("flex")).toBe(true);
+  });
+
+  it("passes native attributes straight through", () => {
+    const element = rendered(render(SplitView, { id: "inspector" }));
+    expect(element.id).toBe("inspector");
+  });
+});

package/vendor/ds/kits/app/test/task-list.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import TaskList from "../src/composites/TaskList.svelte";
+import { validateTasks } from "../src/composites/task-list.behavior";
+import { render } from "./mount";
+
+describe("TaskList",()=>{
+  it("keeps task identity, localized status, blockers and progress semantics",()=>{
+    const root=render(TaskList,{label:"Operations",items:[
+      {id:"import",title:"Customer import",state:"blocked",stateLabel:"Aguardando capacidade",progress:18,worker:"Worker 3",reason:"Free 2 GB to continue.",href:"/imports/3"},
+      {id:"verify",title:"Verify snapshot",state:"running",progress:null,estimate:"Estimating remaining time"},
+      {id:"queue",title:"Next backup",state:"queued"},
+    ]});
+    expect(root.querySelector('ul')?.getAttribute("aria-label")).toBe("Operations");
+    const task=root.querySelector('[data-task-id="import"]')!;
+    expect(task.textContent).toContain("Aguardando capacidade");expect(task.textContent).toContain("Free 2 GB to continue.");
+    expect(task.querySelector("a")?.getAttribute("href")).toBe("/imports/3");
+    expect(task.querySelector('[role="progressbar"]')?.getAttribute("aria-valuenow")).toBe("18");
+    expect(root.querySelector('[data-task-id="verify"] [role="progressbar"]')?.hasAttribute("aria-valuenow")).toBe(false);
+    expect(root.querySelector('[data-task-id="queue"] [role="progressbar"]')).toBeNull();
+  });
+  it("explains an empty queue and refuses ambiguous identities",()=>{
+    expect(render(TaskList,{label:"Jobs",items:[],emptyLabel:"No work pending",emptyDescription:"Start an import to add a task."}).textContent).toContain("Start an import to add a task.");
+    expect(()=>validateTasks([{id:"same",title:"A",state:"queued"},{id:"same",title:"B",state:"running"}])).toThrow("unique");
+    expect(()=>validateTasks([{id:"nan",title:"Bad progress",state:"running",progress:NaN}])).toThrow("finite");
+  });
+});

package/vendor/ds/kits/app/test/taxonomy.test.ts

@@ -0,0 +1,149 @@
+// The mechanical Taxonomy test.
+//
+// `.red/contexts/component-system/CONTEXT.md` defines a Primitive as "a Kit
+// component that imports no other Kit component — the test is mechanical, by
+// inspection", and a Composite as one that composes at least one, precisely so
+// the split never becomes a debate (Spec #1's ninth user story). This file is
+// that inspection, and it is the only authority on where a component belongs:
+// read the imports, and the answer follows.
+//
+// It supersedes the earlier `primitives.test.ts`, which could only ask half of
+// the question — when the Kit was Primitives all the way down, "imports no
+// other component" was the whole rule. A Composite makes the directory a claim
+// rather than a fact, so both halves are now checked in both directions: a
+// component under `src/primitives` that reached for another is in the wrong
+// place, and so is one under `src/composites` that composes nothing at all.
+//
+// Discovery is by file, not by list, so a component dropped into either
+// directory is judged the moment it exists.
+
+import { readFileSync } from "node:fs";
+import { basename, dirname, relative, resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+import { BASE_COMPONENTS } from "@reddb-io/design-system/base";
+import { COMPONENTS, COMPOSITES, PRIMITIVES } from "../src/index";
+import { COMPOSITES_DIR, KIT_ROOT, PRIMITIVES_DIR, kitComponentFiles } from "../tools/paths";
+
+const primitives = kitComponentFiles(PRIMITIVES_DIR);
+const composites = kitComponentFiles(COMPOSITES_DIR);
+const components = kitComponentFiles();
+
+/** Every module specifier a file imports, static or dynamic. */
+function importsOf(source: string): string[] {
+  const patterns = [/\bfrom\s+["']([^"']+)["']/g, /\bimport\s*\(\s*["']([^"']+)["']\s*\)/g];
+  return patterns.flatMap((pattern) => [...source.matchAll(pattern)].map((match) => match[1]!));
+}
+
+/** The Kit components `file` imports — the whole of what decides its half. */
+function componentImports(file: string): string[] {
+  const source = readFileSync(file, "utf8");
+  const relativeComponents = importsOf(source).filter((specifier) => specifier.endsWith(".svelte"));
+  const inheritedComponents = [
+    ...source.matchAll(
+      /\bimport\s*\{([^}]+)\}\s*from\s*["']@reddb-io\/design-system\/base["']/gs,
+    ),
+  ].flatMap((match) =>
+    match[1]!
+      .split(",")
+      .map((binding) => binding.trim().replace(/^type\s+/, "").split(/\s+as\s+/)[0]!)
+      .filter((binding) => BASE_COMPONENTS.includes(binding as never))
+      .map((binding) => `@reddb-io/design-system/base#${binding}`),
+  );
+
+  return [...relativeComponents, ...inheritedComponents];
+}
+
+describe("the Kit's components", () => {
+  it("are discovered, not assumed — the globs found files in both halves", () => {
+    expect(primitives.length).toBeGreaterThan(0);
+    expect(composites.length).toBeGreaterThan(0);
+  });
+
+  it("live in one half or the other, and nowhere else", () => {
+    // A component outside both directories would be judged by neither rule
+    // below, which is the one way this file could pass while saying nothing.
+    const placed = new Set([...primitives, ...composites]);
+    const stray = components
+      .filter((file) => !placed.has(file))
+      .map((file) => relative(KIT_ROOT, file));
+    expect(stray).toEqual([]);
+  });
+
+  it("are exactly the ones the Kit's catalogues declare", () => {
+    // The catalogues are what a consumer reads out of vendored source, with no
+    // bundler to glob for them; this is what stops them drifting from the files.
+    expect(primitives.map((file) => basename(file, ".svelte")).sort()).toEqual(
+      [...PRIMITIVES].sort(),
+    );
+    expect(composites.map((file) => basename(file, ".svelte")).sort()).toEqual(
+      [...COMPOSITES].sort(),
+    );
+    expect([...COMPONENTS].sort()).toEqual([...PRIMITIVES, ...COMPOSITES].sort());
+  });
+});
+
+describe("every component under src/primitives is a Primitive", () => {
+  for (const file of primitives) {
+    const name = basename(file);
+
+    it(`${name} imports no other Kit component`, () => {
+      expect(componentImports(file)).toEqual([]);
+    });
+
+    it(`${name} does not reach back through the Kit's own entry point`, () => {
+      // Importing the barrel would pull in every component transitively, which
+      // is the same coupling wearing a different specifier.
+      const barrel = importsOf(readFileSync(file, "utf8")).filter(
+        (specifier) => specifier === "@reddb-io/design-system/app" || /(^|\/)index(\.ts)?$/.test(specifier),
+      );
+      expect(barrel).toEqual([]);
+    });
+  }
+});
+
+describe("every component under src/composites is a Composite", () => {
+  for (const file of composites) {
+    const name = basename(file);
+
+    it(`${name} composes at least one Kit component`, () => {
+      // The positive half of the rule, and the one that keeps the directory
+      // honest: a "Composite" that composes nothing is a Primitive filed in the
+      // wrong place, and it would pass a test that only forbade things.
+      expect(componentImports(file).length).toBeGreaterThan(0);
+    });
+
+    it(`${name} composes explicit local components or inherited Base`, () => {
+      // Local composition stays relative; canonical inherited components use
+      // Base's explicit public subpath. Neither route reaches back through the
+      // Application barrel.
+      for (const specifier of componentImports(file)) {
+        expect(
+          components.includes(resolve(dirname(file),specifier)) ||
+            specifier.startsWith("@reddb-io/design-system/base#"),
+          `${name} imports ${specifier}`,
+        ).toBe(true);
+      }
+      const barrel = importsOf(readFileSync(file, "utf8")).filter(
+        (specifier) => specifier === "@reddb-io/design-system/app" || /(^|\/)index(\.ts)?$/.test(specifier),
+      );
+      expect(barrel).toEqual([]);
+    });
+  }
+});
+
+
+describe("local Composite composition", () => {
+  it("keeps the local component import graph free of cycles", () => {
+    const finished=new Set<string>();
+    function visit(file:string, parents:readonly string[]):void {
+      expect(parents.includes(file),`component import cycle: ${[...parents,file].map(item=>relative(KIT_ROOT,item)).join(" -> ")}`).toBe(false);
+      if(finished.has(file)) return;
+      for(const specifier of componentImports(file)) {
+        const dependency=resolve(dirname(file),specifier);
+        if(components.includes(dependency)) visit(dependency,[...parents,file]);
+      }
+      finished.add(file);
+    }
+    for(const file of components) visit(file,[]);
+  });
+});

package/vendor/ds/kits/app/test/toolbar.test.ts

@@ -0,0 +1,42 @@
+import { flushSync, tick } from "svelte";
+import { describe, expect, it } from "vitest";
+import { Toolbar, toolbar, type ToolbarItem } from "../src/index";
+import { classes, classesOf, render } from "./mount";
+
+const ITEMS: readonly ToolbarItem[] = [
+  { id: "bold", label: "Bold" },
+  { id: "italic", label: "Italic" },
+  { id: "docs", label: "Docs", href: "/docs" },
+];
+
+async function settle(): Promise<void> {
+  await tick();
+  await new Promise((resolve) => setTimeout(resolve, 5));
+  flushSync();
+}
+
+describe("the application Toolbar", () => {
+  it("has one roving tab stop and follows its declared orientation", async () => {
+    const root = render(Toolbar, { label: "Formatting", items: ITEMS });
+    const bar = root.querySelector<HTMLElement>('[role="toolbar"]')!;
+    const controls = [...bar.querySelectorAll<HTMLElement>("[data-toolbar-item]")];
+
+    expect(bar.getAttribute("aria-label")).toBe("Formatting");
+    expect(bar.getAttribute("aria-orientation")).toBe("horizontal");
+    expect(controls.filter((control) => control.tabIndex === 0)).toHaveLength(1);
+    controls[0]!.focus();
+    controls[0]!.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true, cancelable: true }));
+    await settle();
+    expect(document.activeElement).toBe(controls[1]);
+  });
+
+  it("keeps links native and routes its spacing through Density roles", () => {
+    const root = render(Toolbar, { label: "Formatting", items: ITEMS, size: "sm" });
+    const bar = root.querySelector<HTMLElement>('[role="toolbar"]')!;
+    const docs = bar.querySelector<HTMLAnchorElement>('a[data-toolbar-item]')!;
+
+    expect(docs.getAttribute("href")).toBe("/docs");
+    expect(classes(bar)).toEqual(classesOf(toolbar({ size: "sm" }).root()));
+    expect(classes(docs).has("h-[var(--reddb-spatial-control-height-sm)]")).toBe(true);
+  });
+});