@sincpro/web-ui 0.0.0-stage → 0.2.0

package/dist/views/record/Record.js

@@ -0,0 +1,211 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Activity } from "../../components/activity/Activity.js";
+import { Sheet, } from "../../components/form/Sheet.js";
+import { Pager as PagerControl } from "../../components/record/Pager.js";
+import { RecordHeader } from "../../components/record/RecordHeader.js";
+import { RecordBlocking, RecordNoticeIndicator, splitNotices, } from "../../components/record/RecordNotices.js";
+import { RecordSkeleton } from "../../components/record/RecordSkeleton.js";
+import { SmartButton, SmartButtons } from "../../components/record/SmartButtons.js";
+import { StatusBar } from "../../components/record/StatusBar.js";
+import { useUiCopy } from "../../foundations/copy.js";
+import { byDensity, useDensity } from "../../foundations/density.js";
+import { flatten, pick as pickSlot, pickAll, propsOf, slot, slotOf, } from "../../foundations/slots.js";
+import { createNoteRegistry, NoteRegistryContext, } from "../../primitives/field/note.js";
+import { Tabs } from "../../primitives/tabs/Tabs.js";
+import { useEffect, useId, useState, useSyncExternalStore } from "react";
+const pick = (nodes, name) => pickSlot(nodes, name);
+/** El riel: mi lugar delante del registro. Sin él, no hay banda — y eso
+ *  es exactamente lo que un diálogo quiere. */
+const Rail = slot("rail", (_props) => null);
+const Crumbs = slot("crumbs", (_props) => null);
+const PagerSlot = slot("pager", (_props) => null);
+const Smart = slot("smart", (_props) => null);
+/** Los botones de acción. A lo sumo tres visibles + un `Menu` con `iconOnly`, y
+ *  la regla de cuáles tres: los que PRODUCEN algo nuevo, nunca los de navegar.
+ *  Van sin `surface`: lo toman del riel (claro por defecto; oscuro con `Rail surface="chrome"`).
+ *
+ *  Context: on a narrow record (a phone, below `--container-handheld`) the one written
+ *  with `role="primary"` leaves the rail for a bar stuck to the bottom of the screen,
+ *  where the thumb is — and with `dirty`, Save and Discard take that bar instead. The
+ *  rest stay here. Nothing to declare: see THE THUMB BAR in `RecordHeader`. */
+const Actions = slot("actions", (_props) => null);
+/** El estado, como DATOS y no como nodo: la barra vive en el riel y
+ *  quien la pasaba armada tenía que acordarse de la superficie del riel. Olvidarlo
+ *  pintaba la paleta del lienzo encima del chrome, y pasó. */
+const Status = slot("status", (_props) => null);
+/** What has to be known about THIS record before acting on it: «este cliente tiene
+ *  Bs. 1.200 en créditos pendientes · Aplicar», «posible factura duplicada», «vencida
+ *  hace 12 días», a blocking error from the backend. A `Callout` — the tone, one
+ *  sentence, an optional `title`, an optional `action` (secondary or ghost: the primary
+ *  belongs to the rail) and `onDismiss` when it can be put away.
+ *
+ *  Context: written as a child of `Record` or of `Record.Paper`, as many as are true —
+ *  `{overdue ? <Record.Notice tone="warn">…</Record.Notice> : null}`. Where they go is
+ *  the record's, and NONE goes among the fields: a `bad` one (blocking) stays visible
+ *  between the rail and the paper; the rest gather in one indicator in the rail —
+ *  «⚠ 2 avisos», toned by the most urgent — that opens their list on press. Both in
+ *  urgency order. A note about ONE field is that field's `note`. See `RecordNotices`.
+ *
+ *  Named `Notice` and not `Alert`: an ARIA `alert` interrupts the screen reader, and a
+ *  notice that was already true when the record opened interrupts nothing (`Callout`
+ *  is `role="status"`). */
+const NoticeSlot = slot("notice", (_props) => null);
+/** El papel: el registro. El `<sheet>` blanco sobre el piso. */
+const Paper = slot("paper", (_props) => null);
+const ActivitySlot = slot("activity", (_props) => null);
+/** Los hechos globales del registro. Están en TODAS las páginas, y por eso van
+ *  arriba del cuaderno y no adentro de una. */
+const Facts = slot("facts", (_props) => null);
+/** El cuaderno. Las solapas salen de las páginas que tenga adentro: una página
+ *  que no está escrita no tiene solapa, y ésa es toda la declaración. */
+const Pages = slot("pages", (_props) => null);
+const Page = slot("page", (_props) => null);
+export function Record({ identity, error = null, dirty, children }) {
+    const d = useDensity();
+    const copy = useUiCopy();
+    const top = flatten(children);
+    const railNode = pick(top, "rail");
+    const paperNode = pick(top, "paper");
+    const activitySlot = propsOf(pick(top, "activity"));
+    /* La escotilla: lo que el arquetipo no previó se dibuja igual, en el papel.
+       Que aparezca algo acá es la señal de que al arquetipo le falta una pieza. */
+    const loose = top.filter((node) => slotOf(node) !== "rail" && slotOf(node) !== "paper" && slotOf(node) !== "activity");
+    const rail = flatten(propsOf(railNode)?.children);
+    const crumbs = propsOf(pick(rail, "crumbs"))?.crumbs;
+    const pager = propsOf(pick(rail, "pager"));
+    const smart = propsOf(pick(rail, "smart"))?.links;
+    const actions = propsOf(pick(rail, "actions"))?.children;
+    const status = propsOf(pick(rail, "status"));
+    /* Las dos preguntas del estado, con la superficie ya resuelta: «¿dónde
+       está?» y «¿qué pasó para llegar acá?». */
+    const onTheRail = crumbs !== undefined ||
+        pager !== undefined ||
+        actions !== undefined ||
+        dirty !== undefined;
+    const railSurface = propsOf(railNode)?.surface ?? "canvas";
+    const surface = onTheRail && d === "comfortable" ? railSurface : "canvas";
+    const statusBlock = status === undefined ? undefined : (
+    /* Apiladas en un bloque: arriba dónde está, abajo qué pasó para llegar.
+       Lado a lado competían por el ancho con los botones y quedaban las dos
+       truncadas; una debajo de la otra, cada una tiene su línea entera. */
+    _jsxs("div", { className: "flex min-w-0 flex-col items-end gap-1.5", children: [status.stages === undefined ? null : (_jsx(StatusBar, { stages: status.stages, current: status.current ?? status.stages[0]?.id ?? "", failed: status.failed ?? false, surface: surface })), status.children] }));
+    const paper = propsOf(paperNode);
+    const inPaper = [...flatten(paper?.children), ...loose];
+    const fields = propsOf(pick(inPaper, "facts"))?.fields;
+    /* Written at the top of the record or inside the paper: both are «on the record». */
+    const notices = pickAll(inPaper, "notice")
+        .map((node) => propsOf(node))
+        .filter((notice) => notice !== undefined);
+    const { blocking, rest } = splitNotices(notices);
+    /* The notes of the record's fields and rows, which the cards register as they mount. */
+    const [registry] = useState(createNoteRegistry);
+    const notes = useSyncExternalStore(registry.subscribe, registry.snapshot, registry.snapshot);
+    /* The panel's open state is the record's, so the rail's indicator can open it. */
+    const [ownOpen, setOwnOpen] = useState(activitySlot?.defaultOpen ?? true);
+    const activityOpen = activitySlot?.open ?? ownOpen;
+    const setActivityOpen = (next) => {
+        activitySlot?.onOpenChange?.(next);
+        if (activitySlot?.open === undefined)
+            setOwnOpen(next);
+    };
+    const alertsId = useId();
+    /* «⚠ 2 avisos» with a panel to go to: open it, then — once it is drawn — bring its
+       notices into view and put the focus on them. On a wide record they are beside the
+       sheet already; on a narrow one the panel is below and this is the scroll that finds
+       it. A counter and not a flag, so pressing it twice moves the focus twice. */
+    const [reveal, setReveal] = useState(0);
+    useEffect(() => {
+        if (reveal === 0)
+            return;
+        const section = document.getElementById(alertsId);
+        if (section === null)
+            return;
+        section.scrollIntoView({ block: "start" });
+        section.focus({ preventScroll: true });
+    }, [reveal, alertsId]);
+    const notebook = propsOf(pick(inPaper, "pages"));
+    const pages = flatten(notebook?.children).filter((node) => slotOf(node) === "page");
+    const tabs = pages
+        .map((node) => propsOf(node))
+        .filter((page) => page !== undefined)
+        .map(({ id, label, icon, count, notice }) => ({
+        id,
+        label,
+        ...(icon === undefined ? {} : { icon }),
+        ...(count === undefined ? {} : { count }),
+        ...(notice === undefined ? {} : { notice }),
+    }));
+    const current = notebook?.current ?? tabs[0]?.id ?? "";
+    const pageBody = pages
+        .map((node) => propsOf(node))
+        .find((page) => page?.id === current)?.children;
+    /* El orden de lectura es el orden de la pantalla: lo escrito ARRIBA del
+       cuaderno se dibuja arriba —lo que antes era `sheetBody`—, lo escrito
+       debajo se dibuja debajo de la página en curso. Sin cuaderno, el papel es
+       sus hijos en orden y no hay una segunda regla. */
+    const notebookAt = inPaper.findIndex((node) => slotOf(node) === "pages");
+    const free = (nodes) => nodes.filter((node) => slotOf(node) === undefined);
+    const above = notebookAt === -1 ? [] : free(inPaper.slice(0, notebookAt));
+    const below = notebookAt === -1 ? free(inPaper) : free(inPaper.slice(notebookAt + 1));
+    const hasFacts = fields !== undefined && fields.length > 0;
+    const globalSheet = hasFacts || above.length > 0;
+    const aspectsNode = tabs.length === 0 ? undefined : (_jsx(Tabs, { tabs: tabs, current: current, ...(notebook?.onChange === undefined ? {} : { onSelect: notebook.onChange }) }));
+    return (
+    /* `flex-1`: the record takes the height its frame gives it, so on a phone the thumb
+       bar (last in it, `mt-auto`) reaches the bottom of the screen even when the record is
+       shorter than the screen. The extra height has no paint of its own: on a desk
+       nothing changes. */
+    /* The record knows the notes of its fields and rows: their cards register here. */
+    _jsx(NoteRegistryContext, { value: registry, children: _jsx("article", { className: "flex min-w-0 flex-1 flex-col", children: _jsx(RecordHeader, { railSurface: surface, ...(dirty === undefined ? {} : { dirty }), ...(crumbs === undefined ? {} : { crumbs }), ...(pager === undefined
+                    ? {}
+                    : {
+                        pager: (_jsx(PagerControl, { index: pager.index, total: pager.total, surface: surface, ...(pager.onPrev === undefined ? {} : { onPrev: pager.onPrev }), ...(pager.onNext === undefined ? {} : { onNext: pager.onNext }) })),
+                    }), ...(actions === undefined ? {} : { actions }), ...(statusBlock === undefined ? {} : { status: statusBlock }), ...(identity.icon === undefined ? {} : { icon: identity.icon }), title: identity.title, ...(identity.subtitle === undefined ? {} : { subtitle: identity.subtitle }), ...(identity.figure === undefined ? {} : { figure: identity.figure }), ...(identity.tag === undefined ? {} : { tag: identity.tag }), ...(smart === undefined || smart.length === 0
+                    ? {}
+                    : {
+                        smart: (_jsx(SmartButtons, { children: smart.map((s) => (_jsx(SmartButton, { icon: s.icon, ...(s.count === undefined ? {} : { count: s.count }), label: s.label, layout: onTheRail && d === "comfortable" ? "inline" : "stacked", ...(s.onClick === undefined ? {} : { onClick: s.onClick }) }, s.label))) })),
+                    }), ...(aspectsNode === undefined || globalSheet ? {} : { aspects: aspectsNode }), ...(activitySlot === undefined
+                    ? {}
+                    : {
+                        activity: (_jsx(Activity, { ...activitySlot, alerts: rest, alertsId: alertsId, open: activityOpen, onToggle: () => setActivityOpen(!activityOpen) })),
+                        activityLayout: activitySlot.layout ?? "auto",
+                    }), ...(blocking.length === 0 && error === null
+                    ? {}
+                    : {
+                        blocking: (_jsx(RecordBlocking, { notices: blocking, error: error, errorHeading: copy.failed.operation })),
+                    }), ...(rest.length === 0 && (activitySlot === undefined || notes.length === 0)
+                    ? {}
+                    : {
+                        indicator: (_jsx(RecordNoticeIndicator, { notices: rest, anchored: notes.map((entry) => ({ tone: entry.note.tone ?? "info" })), ...(activitySlot === undefined
+                                ? {}
+                                : {
+                                    /* With a panel, the notices live there: the indicator goes to them
+                                     instead of floating a second copy in a popover. */
+                                    reveal: {
+                                        target: alertsId,
+                                        onReveal: () => {
+                                            setActivityOpen(true);
+                                            setReveal((n) => n + 1);
+                                        },
+                                    },
+                                }) })),
+                    }), children: _jsx("div", { className: "min-w-0", children: _jsx("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-(--spacing-block) px-4 pt-(--spacing-block) pb-4", "gap-2.5 pt-2.5 pb-2")}`, children: _jsxs(Sheet, { layout: paper?.layout ?? "stacked", columns: paper?.columns ?? 2, ...(hasFacts ? { fields } : {}), ...(above.length > 0 || (globalSheet && aspectsNode !== undefined)
+                                ? {
+                                    head: (_jsxs(_Fragment, { children: [above, globalSheet && aspectsNode !== undefined ? (_jsx("div", { className: `border-b border-line-strong ${byDensity(d, "-mx-4 px-4", "")}`, children: aspectsNode })) : null] })),
+                                }
+                                : {}), children: [pageBody, below] }) }) }) }) }) }));
+}
+Record.Skeleton = RecordSkeleton;
+Record.Rail = Rail;
+Record.Crumbs = Crumbs;
+Record.Pager = PagerSlot;
+Record.Smart = Smart;
+Record.Actions = Actions;
+Record.Status = Status;
+Record.Paper = Paper;
+Record.Activity = ActivitySlot;
+Record.Facts = Facts;
+Record.Pages = Pages;
+Record.Page = Page;
+Record.Notice = NoticeSlot;

package/dist/views/record/index.d.ts

@@ -0,0 +1 @@
+export { Record, type RecordIdentity, type RecordNotice, type RecordPager, type RecordProps, type SmartLink, } from "./Record.js";

package/dist/views/record/index.js

@@ -0,0 +1,2 @@
+/* REGISTRO — un registro y su formulario: el riel y sus piezas, y el árbol que las compone. */
+export { Record, } from "./Record.js";

package/package.json

@@ -1,6 +1,115 @@
 {
   "name": "@sincpro/web-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "An enterprise web design system for business software — ERPs, back offices, management tools — in React and Tailwind: tokens, primitives, components and the two views every management screen is made of.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./foundations": {
+      "types": "./dist/foundations/index.d.ts",
+      "default": "./dist/foundations/index.js"
+    },
+    "./primitives": {
+      "types": "./dist/primitives/index.d.ts",
+      "default": "./dist/primitives/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "default": "./dist/components/index.js"
+    },
+    "./views": {
+      "types": "./dist/views/index.d.ts",
+      "default": "./dist/views/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "prettier": {
+    "printWidth": 94
+  },
+  "peerDependencies": {
+    "@tanstack/react-table": "^9.2.4",
+    "@tanstack/react-virtual": "^3.13.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "tailwindcss": "^4.3.0"
+  },
+  "dependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lint": "^6.9.7",
+    "@fontsource/ibm-plex-mono": "^5.3.0",
+    "@fontsource/ibm-plex-sans": "^5.3.0",
+    "@internationalized/date": "^3.12.4",
+    "@uiw/react-codemirror": "^4.25.11",
+    "lucide-react": "^1.45.0",
+    "react-aria": "^3.53.1",
+    "react-aria-components": "^1.22.1",
+    "tailwind-variants": "^4.0.0",
+    "tailwindcss-react-aria-components": "^2.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@storybook/addon-a11y": "10.6.0",
+    "@storybook/addon-docs": "10.6.0",
+    "@storybook/addon-mcp": "10.6.0",
+    "@storybook/react-vite": "10.6.0",
+    "@tailwindcss/vite": "4.3.3",
+    "@tanstack/react-table": "^9.2.4",
+    "@tanstack/react-virtual": "^3.14.12",
+    "@types/node": "^26.6.6",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "6.1.1",
+    "eslint": "^10.11.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "prettier": "^3.9.8",
+    "puppeteer-core": "^23.11.1",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "storybook": "10.6.0",
+    "tailwindcss": "4.3.3",
+    "tsc-alias": "^1.8.16",
+    "tsx": "^4.23.13",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.70.0",
+    "vite": "8.3.0"
+  },
+  "keywords": [
+    "design-system",
+    "enterprise",
+    "erp",
+    "react",
+    "tailwindcss",
+    "ui",
+    "sincpro"
+  ],
+  "homepage": "https://github.com/Sincpro-SRL/sincpro_web_ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Sincpro-SRL/sincpro_web_ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Sincpro-SRL/sincpro_web_ui/issues"
+  },
+  "author": "Gutierrez, Andres <andres.gutierrez@sincpro.com.bo>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=26"
+  }
+}