forgebook 0.0.0-stage → 0.1.0

package/dist/src/shell/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/shell/icons.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,0BAA0B;AAC1B,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BD,CAAC;AAEX,sBAAsB;AACtB,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAC;AAE1C;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAI,gBAAqB;IAAE,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,SAc/F,CAAC"}

package/dist/src/shell/icons.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** The icons, by name. */
+const PATHS = {
+    sun: "M8 1.5v1.5M8 13v1.5M1.5 8H3M13 8h1.5M3.4 3.4l1 1M11.6 11.6l1 1M3.4 12.6l1-1M11.6 4.4l1-1M8 5a3 3 0 1 0 0 6a3 3 0 0 0 0-6Z",
+    moon: "M13 9.5A5.5 5.5 0 0 1 6.5 3a5.5 5.5 0 1 0 6.5 6.5Z",
+    monitor: "M2 3h12v8H2zM6 14h4M8 11v3",
+    contrast: "M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Zm0 0v12",
+    sliders: "M3 4h6M12 4h1M3 8h1M7 8h6M3 12h7M13 12h0M10 2.5v3M5.5 6.5v3M11.5 10.5v3",
+    chevronDown: "m4 6 4 4 4-4",
+    chevronRight: "m6 4 4 4-4 4",
+    compare: "M2 2h5v5H2zM9 2h5v5H9zM2 9h5v5H2zM9 9h5v5H9z",
+    replay: "M2.5 8a5.5 5.5 0 1 0 1.6-3.9M2.5 2.5v2.5H5",
+    restart: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2.5v2.5H11",
+    pause: "M5.5 3.5v9M10.5 3.5v9",
+    play: "M5 3.5v9l7.5-4.5Z",
+    search: "M7 2.5a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9ZM10.5 10.5l3 3",
+    panel: "M2 3h12v10H2zM2 9.5h12",
+    outline: "M2.5 2.5h11v11h-11zM5 5h6v6H5z",
+    grid: "M2 2h12v12H2zM6 2v12M10 2v12M2 6h12M2 10h12",
+    ruler: "M2 10.5 10.5 2l3.5 3.5L5.5 14zM5 8l1.5 1.5M7 6l1 1M9 4l1.5 1.5",
+    sidebar: "M2 3h12v10H2zM6 3v10",
+    close: "M4 4l8 8M12 4l-8 8",
+    external: "M9 2.5h4.5V7M13.5 2.5 8 8M11.5 9.5v4h-9v-9h4",
+    width: "M2 4v8M14 4v8M4.5 8h7M6 6.5 4.5 8 6 9.5M10 6.5l1.5 1.5-1.5 1.5",
+    plus: "M8 3.5v9M3.5 8h9",
+    minus: "M3.5 8h9",
+    hash: "M6 2.5 5 13.5M11 2.5l-1 11M3 6h10.5M2.5 10H13",
+    check: "m3.5 8.5 3 3 6-7"
+};
+/**
+ * One icon, 16 px by default, in the current colour.
+ *
+ * @param props - the icon and its size in px.
+ */
+export const Icon = ({ name, size = 16 }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: PATHS[name] }) }));
+//# sourceMappingURL=icons.js.map

package/dist/src/shell/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../src/shell/icons.tsx"],"names":[],"mappings":";AAOA,0BAA0B;AAC1B,MAAM,KAAK,GAAG;IACZ,GAAG,EAAE,2HAA2H;IAChI,IAAI,EAAE,oDAAoD;IAC1D,OAAO,EAAE,4BAA4B;IACrC,QAAQ,EAAE,2CAA2C;IACrD,OAAO,EAAE,yEAAyE;IAClF,WAAW,EAAE,cAAc;IAC3B,YAAY,EAAE,cAAc;IAC5B,OAAO,EAAE,8CAA8C;IACvD,MAAM,EAAE,4CAA4C;IACpD,OAAO,EAAE,+CAA+C;IACxD,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,2DAA2D;IACnE,KAAK,EAAE,wBAAwB;IAC/B,OAAO,EAAE,gCAAgC;IACzC,IAAI,EAAE,6CAA6C;IACnD,KAAK,EAAE,gEAAgE;IACvE,OAAO,EAAE,sBAAsB;IAC/B,KAAK,EAAE,oBAAoB;IAC3B,QAAQ,EAAE,8CAA8C;IACxD,KAAK,EAAE,gEAAgE;IACvE,IAAI,EAAE,kBAAkB;IACxB,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,+CAA+C;IACrD,KAAK,EAAE,kBAAkB;CACjB,CAAC;AAKX;;;;GAIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,EAAE,EAAuD,EAAa,EAAE,CAAC,CAC3G,cACE,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,iBACV,MAAM,YAElB,eAAM,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,GAAI,GACpB,CACP,CAAC"}

package/dist/src/shell/keyboard.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The shell's keys: `/` goes to the search, `[` and `]` open the previous and the next story in the sidebar's order.
+ * A key typed into a field, or with a modifier, is the field's or the browser's.
+ *
+ * @remarks
+ * The keys work while the shell has the focus; a frame keeps its own keys, so a story's keyboard behaviour is never
+ * taken over. Pure, apart from reading the event's target.
+ *
+ * @module
+ */
+/**
+ * Whether a key event happens while the user types: in a field, a select or editable content.
+ *
+ * @param target - the event's target.
+ */
+export declare const isTyping: (target: EventTarget | null) => boolean;
+/** The move a key asks for in the list of stories. */
+export type StoryStep = -1 | 1;
+/**
+ * The step a key asks for: `[` the previous story, `]` the next; none for any other key or one with a modifier.
+ *
+ * @param event - the key, its modifiers and its target.
+ */
+export declare const storyStep: (event: Pick<KeyboardEvent, "key" | "metaKey" | "ctrlKey" | "altKey" | "target">) => StoryStep | undefined;
+/**
+ * The id a step leads to: the neighbour of the current story, or the first (or last) story from a page that is not
+ * a story's; none past either end.
+ *
+ * @param ids - every story's id, in the sidebar's order.
+ * @param currentId - the shown story's id; none on a component's page.
+ * @param step - the step.
+ * @param firstOfPage - on a component's page, the id of its first story.
+ */
+export declare const steppedStory: (ids: readonly string[], currentId: string | undefined, step: StoryStep, firstOfPage: string | undefined) => string | undefined;
+//# sourceMappingURL=keyboard.d.ts.map

package/dist/src/shell/keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../../src/shell/keyboard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,QAAQ,WAAW,GAAG,IAAI,KAAG,OAMd,CAAC;AAEzC,sDAAsD;AACtD,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAE/B;;;;GAIG;AACH,eAAO,MAAM,SAAS,GACpB,OAAO,IAAI,CAAC,aAAa,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC,KAC9E,SAAS,GAAG,SAKd,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GACvB,KAAK,SAAS,MAAM,EAAE,EACtB,WAAW,MAAM,GAAG,SAAS,EAC7B,MAAM,SAAS,EACf,aAAa,MAAM,GAAG,SAAS,KAC9B,MAAM,GAAG,SAIX,CAAC"}

package/dist/src/shell/keyboard.js

@@ -0,0 +1,51 @@
+/**
+ * The shell's keys: `/` goes to the search, `[` and `]` open the previous and the next story in the sidebar's order.
+ * A key typed into a field, or with a modifier, is the field's or the browser's.
+ *
+ * @remarks
+ * The keys work while the shell has the focus; a frame keeps its own keys, so a story's keyboard behaviour is never
+ * taken over. Pure, apart from reading the event's target.
+ *
+ * @module
+ */
+/**
+ * Whether a key event happens while the user types: in a field, a select or editable content.
+ *
+ * @param target - the event's target.
+ */
+export const isTyping = (target) => typeof HTMLElement !== "undefined" &&
+    target instanceof HTMLElement &&
+    (target.isContentEditable ||
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target instanceof HTMLSelectElement);
+/**
+ * The step a key asks for: `[` the previous story, `]` the next; none for any other key or one with a modifier.
+ *
+ * @param event - the key, its modifiers and its target.
+ */
+export const storyStep = (event) => {
+    if (event.metaKey || event.ctrlKey || event.altKey || isTyping(event.target))
+        return undefined;
+    if (event.key === "[")
+        return -1;
+    if (event.key === "]")
+        return 1;
+    return undefined;
+};
+/**
+ * The id a step leads to: the neighbour of the current story, or the first (or last) story from a page that is not
+ * a story's; none past either end.
+ *
+ * @param ids - every story's id, in the sidebar's order.
+ * @param currentId - the shown story's id; none on a component's page.
+ * @param step - the step.
+ * @param firstOfPage - on a component's page, the id of its first story.
+ */
+export const steppedStory = (ids, currentId, step, firstOfPage) => {
+    if (currentId === undefined)
+        return firstOfPage;
+    const index = ids.indexOf(currentId);
+    return index === -1 ? undefined : ids[index + step];
+};
+//# sourceMappingURL=keyboard.js.map

package/dist/src/shell/keyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.js","sourceRoot":"","sources":["../../../src/shell/keyboard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,MAA0B,EAAW,EAAE,CAC9D,OAAO,WAAW,KAAK,WAAW;IAClC,MAAM,YAAY,WAAW;IAC7B,CAAC,MAAM,CAAC,iBAAiB;QACvB,MAAM,YAAY,gBAAgB;QAClC,MAAM,YAAY,mBAAmB;QACrC,MAAM,YAAY,iBAAiB,CAAC,CAAC;AAKzC;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,KAA+E,EACxD,EAAE;IACzB,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;QAAE,OAAO,SAAS,CAAC;IAC/F,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG;QAAE,OAAO,CAAC,CAAC,CAAC;IACjC,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG;QAAE,OAAO,CAAC,CAAC;IAChC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,GAAsB,EACtB,SAA6B,EAC7B,IAAe,EACf,WAA+B,EACX,EAAE;IACtB,IAAI,SAAS,KAAK,SAAS;QAAE,OAAO,WAAW,CAAC;IAChD,MAAM,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IACrC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;AACtD,CAAC,CAAC"}

package/dist/src/shell/mountShell.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The entry of the catalogue's page: renders the shell in an element. Called by the page the plugin generates from
+ * the catalogue's configuration (`vite/pages.ts`), not by an app.
+ *
+ * @module
+ */
+import "./shell.scss";
+import type { StoryCodeWriter } from "../frame/renderer.ts";
+import { type ShellConfig } from "./Shell.tsx";
+/** What an app passes to the shell: the catalogue's configuration and the framework's code writer. */
+export type MountShellConfig = ShellConfig & {
+    /** Writes a story drawn from its args in the framework's code (`storyJsx` of `@forgebook/react`). */
+    readonly codeOf: StoryCodeWriter;
+};
+/**
+ * Shows the catalogue in the given element.
+ *
+ * @param container - the element the page renders into.
+ * @param config - the catalogue's name, its logo, its sources, its frame page and the framework's code writer.
+ */
+export declare const mountShell: (container: HTMLElement, config: MountShellConfig) => void;
+//# sourceMappingURL=mountShell.d.ts.map

package/dist/src/shell/mountShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mountShell.d.ts","sourceRoot":"","sources":["../../../src/shell/mountShell.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAS,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAGtD,sGAAsG;AACtG,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,qGAAqG;IACrG,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAC;CAClC,CAAC;AAeF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GAAI,WAAW,WAAW,EAAE,QAAQ,gBAAgB,KAAG,IAS7E,CAAC"}

package/dist/src/shell/mountShell.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The entry of the catalogue's page: renders the shell in an element. Called by the page the plugin generates from
+ * the catalogue's configuration (`vite/pages.ts`), not by an app.
+ *
+ * @module
+ */
+import "./shell.css";
+import { createRoot } from "react-dom/client";
+import { CodeWriterContext } from "./codeWriter.js";
+import { Shell } from "./Shell.js";
+import { configureStrings } from "./strings.js";
+/**
+ * The page's icon: the catalogue's logo, replacing any the page declares.
+ *
+ * @param logo - the logo's URL.
+ */
+const setPageIcon = (logo) => {
+    for (const link of document.querySelectorAll('link[rel~="icon"]'))
+        link.remove();
+    const icon = document.createElement("link");
+    icon.rel = "icon";
+    icon.href = logo;
+    document.head.append(icon);
+};
+/**
+ * Shows the catalogue in the given element.
+ *
+ * @param container - the element the page renders into.
+ * @param config - the catalogue's name, its logo, its sources, its frame page and the framework's code writer.
+ */
+export const mountShell = (container, config) => {
+    if (config.logo !== undefined)
+        setPageIcon(config.logo);
+    configureStrings(config.lists?.strings ?? {});
+    const { codeOf, ...shell } = config;
+    createRoot(container).render(_jsx(CodeWriterContext.Provider, { value: codeOf, children: _jsx(Shell, { ...shell }) }));
+};
+//# sourceMappingURL=mountShell.js.map

package/dist/src/shell/mountShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mountShell.js","sourceRoot":"","sources":["../../../src/shell/mountShell.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AACH,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAoB,MAAM,YAAa,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAQhD;;;;GAIG;AACH,MAAM,WAAW,GAAG,CAAC,IAAY,EAAQ,EAAE;IACzC,KAAK,MAAM,IAAI,IAAI,QAAQ,CAAC,gBAAgB,CAAC,mBAAmB,CAAC;QAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACjF,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC;IAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACjB,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAC7B,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,SAAsB,EAAE,MAAwB,EAAQ,EAAE;IACnF,IAAI,MAAM,CAAC,IAAI,KAAK,SAAS;QAAE,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACxD,gBAAgB,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,IAAI,EAAE,CAAC,CAAC;IAC9C,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,GAAG,MAAM,CAAC;IACpC,UAAU,CAAC,SAAS,CAAC,CAAC,MAAM,CAC1B,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,YACvC,KAAC,KAAK,OAAK,KAAK,GAAI,GACO,CAC9B,CAAC;AACJ,CAAC,CAAC"}