@sincpro/web-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,126 @@
+import { type SheetField, type SheetLayout } from "../../components/form/Sheet.js";
+import type { Crumb } from "../../components/record/Breadcrumb.js";
+import type { DirtyState } from "../../components/record/DirtyActions.js";
+import { RecordSkeleton } from "../../components/record/RecordSkeleton.js";
+import { type Stage } from "../../components/record/StatusBar.js";
+import type { Surface, Tone } from "../../foundations/types.js";
+import { type TabNotice } from "../../primitives/tabs/Tabs.js";
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+export type RecordIdentity = {
+    icon?: LucideIcon;
+    title: ReactNode;
+    /** Who or what it is about, under the title — the customer of an invoice, the
+     *  supplier of an order. Second in the hierarchy: bigger than a fact, smaller than
+     *  the title. */
+    subtitle?: ReactNode;
+    tag?: {
+        label: string;
+        tone?: Tone;
+    };
+    /** THE figure of the record — the total of an invoice, the balance of an account —
+     *  drawn as large as the title, on the right. A record usually has one number people
+     *  open it for; set among the facts at body size it is just another fact. */
+    figure?: {
+        label: string;
+        value: ReactNode;
+    };
+};
+/** What hangs off the record. It leads somewhere else; it is not a datum. */
+export type SmartLink = {
+    icon: LucideIcon;
+    count?: number;
+    label: string;
+    onClick?: () => void;
+};
+/** My place in the set I came from. Not pagination: it says I can move to the
+ *  next one without going back to the list. */
+export type RecordPager = {
+    index: number;
+    total: number;
+    onPrev?: () => void;
+    onNext?: () => void;
+};
+export type { SheetField };
+type RailProps = {
+    children?: ReactNode;
+    /** The rail's surface. `canvas` (the default) is a light control bar; `chrome` is the dark
+     *  band, an explicit choice. The application bar is the screen's one dark band — a dark
+     *  rail under it reads as two headers and the record loses its top. */
+    surface?: Surface;
+};
+type CrumbsProps = {
+    crumbs: readonly Crumb[];
+};
+type SmartProps = {
+    links: readonly SmartLink[];
+};
+type ActionsProps = {
+    children?: ReactNode;
+};
+type StatusProps = {
+    stages?: readonly Stage[];
+    /** Cuál de las etapas es la de ahora. Sin esto, la primera. */
+    current?: string;
+    failed?: boolean;
+    /** La escotilla del estado, para lo que no es ninguna de las dos. */
+    children?: ReactNode;
+};
+type PaperProps = {
+    /** Cómo ponen la etiqueta los campos de adentro. `horizontal` es etiqueta |
+     *  valor, que es la forma de Odoo. */
+    layout?: SheetLayout;
+    columns?: 1 | 2 | 3 | 4;
+    children?: ReactNode;
+};
+type FactsProps = {
+    fields: readonly SheetField[];
+};
+type PagesProps = {
+    current?: string;
+    onChange?: (id: string) => void;
+    children?: ReactNode;
+};
+type PageProps = {
+    id: string;
+    label: string;
+    /** La marca de la cara. Con tres o más pestañas, el ícono es lo que se
+     *  reconoce sin leer. */
+    icon?: LucideIcon;
+    /** Cuántas cosas hay detrás. `0` se dibuja apagado: «no hay ninguna» es una
+     *  respuesta, y esconderla obliga a abrir la pestaña para averiguarla. */
+    count?: number;
+    /** Que algo de esta cara PIDE que lo mires — falló, cambió, llegó. Aparte del
+     *  contador, porque son dos preguntas: ver `TabNotice`. */
+    notice?: TabNotice;
+    children?: ReactNode;
+};
+export type RecordProps = {
+    identity: RecordIdentity;
+    /** Lo que falló al operar sobre el registro. Va arriba del papel, adentro. */
+    error?: string | null;
+    /** Hay cambios sin guardar. Su presencia REEMPLAZA los botones de acción por
+     *  guardar y descartar — ver la nota en `RecordHeader`. */
+    dirty?: DirtyState;
+    children?: ReactNode;
+};
+export declare function Record({ identity, error, dirty, children }: RecordProps): import("react").JSX.Element;
+export declare namespace Record {
+    var Skeleton: typeof RecordSkeleton;
+    var Rail: ((props: RailProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"rail">;
+    var Crumbs: ((props: CrumbsProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"crumbs">;
+    var Pager: ((props: RecordPager) => ReactNode) & import("../../foundations/slots.js").Slotted<"pager">;
+    var Smart: ((props: SmartProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"smart">;
+    var Actions: ((props: ActionsProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"actions">;
+    var Status: ((props: StatusProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"status">;
+    var Paper: ((props: PaperProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"paper">;
+    var Chatter: ((props: {
+        children?: ReactNode;
+        /** `page` lo pone SIEMPRE debajo y a todo el ancho, como una hoja propia. Sin
+         *  esto va al costado cuando hay ancho, que es la forma angosta. */
+        layout?: "aside" | "page";
+    }) => ReactNode) & import("../../foundations/slots.js").Slotted<"chatter">;
+    var Facts: ((props: FactsProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"facts">;
+    var Pages: ((props: PagesProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"pages">;
+    var Page: ((props: PageProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"page">;
+}

package/dist/views/record/Record.js

@@ -0,0 +1,141 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Sheet, } from "../../components/form/Sheet.js";
+import { Pager as PagerControl } from "../../components/record/Pager.js";
+import { RecordHeader } from "../../components/record/RecordHeader.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, propsOf, slot, slotOf, } from "../../foundations/slots.js";
+import { Failed } from "../../primitives/notice/Notice.js";
+import { Tabs } from "../../primitives/tabs/Tabs.js";
+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);
+/** El papel: el registro. El `<sheet>` blanco sobre el piso. */
+const Paper = slot("paper", (_props) => null);
+/** Lo que al registro le PASÓ, al costado: mensajes y eventos en una columna.
+ *
+ *  Va al lado y no abajo porque la historia es el contexto de todo lo demás que
+ *  está en pantalla — leer «la factura fue rechazada» mirando los datos que la
+ *  produjeron es justamente para lo que sirve, y una sección más abajo obliga a
+ *  ver una cosa o la otra. Lo que va adentro lo arma quien compone: el kit no
+ *  sabe qué es un evento de este producto. */
+const ChatterSlot = slot("chatter", (_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 chatterSlot = propsOf(pick(top, "chatter"));
+    const chatter = chatterSlot?.children;
+    /* 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) !== "chatter");
+    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;
+    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. */
+    _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 }), ...(chatter === undefined ? {} : { chatter }), ...(chatterSlot?.layout === undefined ? {} : { chatterLayout: chatterSlot.layout }), children: _jsxs("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: [error === null ? null : (_jsx(Failed, { heading: copy.failed.operation, sentence: error })), _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.Chatter = ChatterSlot;
+Record.Facts = Facts;
+Record.Pages = Pages;
+Record.Page = Page;

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

@@ -0,0 +1 @@
+export { Record, type RecordIdentity, 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,111 @@
 {
   "name": "@sincpro/web-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.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"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Sincpro-SRL/sincpro_web_ui.git"
+  },
+  "author": "Gutierrez, Andres <andres.gutierrez@sincpro.com.bo>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=26"
+  }
+}