@stackcraftmx/calcita 0.25.0 → 0.27.0

package/dist/types/appShell/SettingsMenu.d.ts

@@ -4,10 +4,12 @@
  * @param {boolean} [props.showLanguage]
  * @param {boolean} [props.showColorScheme]
  * @param {import('react').ReactNode} [props.extraSettings] los ajustes del proyecto, debajo de los del paquete
+ * @param {object[]} [props.menuLinks] las ligas propias (accountMenuItems), al final
  */
-export default function SettingsMenu({ showFontSize, showLanguage, showColorScheme, extraSettings }: {
+export default function SettingsMenu({ showFontSize, showLanguage, showColorScheme, extraSettings, menuLinks }: {
     showFontSize?: boolean;
     showLanguage?: boolean;
     showColorScheme?: boolean;
     extraSettings?: import('react').ReactNode;
+    menuLinks?: object[];
 }): import("react").JSX.Element;

package/dist/types/appShell/SideMenu.d.ts

@@ -1,6 +1,7 @@
 /**
  * @param {object} props
  * @param {import('react').ReactNode} [props.logo] el logo chico (28 px), el que se queda con el menú encogido
+ * @param {import('react').ReactNode} [props.wordmark] el logo ancho (en lugar del logo y el nombre arriba)
  * @param {string} props.brandName el nombre de la app
  * @param {string} [props.brandCaption] el renglón chico debajo del nombre («Panel de administración»)
  * @param {string} props.homePath
@@ -14,8 +15,9 @@
  * @param {import('react').ReactNode} [props.railTop] arriba del menú encogido que hace de barra: la ☰ y el logo
  * @param {import('react').ReactNode} [props.railBottom] abajo de ese menú: los ajustes y la cuenta
  */
-export default function SideMenu({ logo, brandName, brandCaption, homePath, menuItems, activeItem, collapsed, footer, showBrand, onNavigate, railTop, railBottom, menuBadges, }: {
+export default function SideMenu({ logo, wordmark, brandName, brandCaption, homePath, menuItems, activeItem, collapsed, footer, showBrand, onNavigate, railTop, railBottom, menuBadges, }: {
     logo?: import('react').ReactNode;
+    wordmark?: import('react').ReactNode;
     brandName: string;
     brandCaption?: string;
     homePath: string;

package/dist/types/appShell/Wordmark.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @param {{children: import('react').ReactNode}} props el logo (una <img>, un <svg> o lo que pinte el proyecto)
+ */
+export default function Wordmark({ children }: {
+    children: import('react').ReactNode;
+}): import("react").JSX.Element;

package/dist/types/appShell/menuItemText.d.ts

@@ -53,3 +53,19 @@ export declare function menuSectionsOf(menuItems: object[], t: (key: string) =>
  * @returns {string}
  */
 export declare function initialsOf(fullName: string | null | undefined): string;
+/**
+ * Las props de la liga de una entrada: el router para una pantalla de la app (to) y una dirección normal para otro sistema
+ * (href: el sistema que ya existía, otra app de la empresa). Con href la página se carga completa, como cualquier liga.
+ *
+ * @param {{to?: string, href?: string}} menuItem
+ * @param {import('react').ElementType} RouterLink el Link de la navegación del proyecto
+ * @returns {{component: import('react').ElementType|string, to?: string, href?: string}}
+ */
+export declare function menuLinkPropsOf(menuItem: {
+    to?: string;
+    href?: string;
+}, RouterLink: import('react').ElementType): {
+    component: import('react').ElementType | string;
+    to?: string;
+    href?: string;
+};

package/dist/types/index.d.ts

@@ -11,7 +11,7 @@ export { ConfirmDialog, ModalWaiting, NEW_BUILD_NOTICE_VARIANT, NewBuildNotice,
 export { DEFAULT_FILE_TYPES, DOWNLOAD_STATUS, DownloadManager, UNKNOWN_FILE_TYPE, cancelDownload, clearFinishedDownloads, downloadsMachine, startDownload, useFileTypes, } from './downloads/index.js';
 export { THEME_LOOK, TOP_BAR, createToolkitTheme } from './theme/createToolkitTheme.js';
 export { isAndroidDevice } from './theme/androidDevice.js';
-export { MINIMAL_BACKGROUND } from './theme/components/minimalComponents.js';
+export { MINIMAL_BACKGROUND, MINIMAL_TONES } from './theme/components/minimalComponents.js';
 export { STACKCRAFT, stackcraftDarkPalette, stackcraftLightPalette } from './theme/stackcraftPalette.js';
 export { toolkitComponents } from './theme/toolkitComponents.js';
 export { mergeComponents } from './theme/mergeComponents.js';
@@ -32,7 +32,7 @@ export { DRAWER_WIDTH_COLLAPSED, DRAWER_WIDTH_EXPANDED, MAIN_CONTENT_ID } from '
 export { useAppMenu } from './appShell/appMenuContext.js';
 export { usePageTitle } from './appShell/pageTitle.js';
 export { initialsOf, menuItemDescriptionOf, menuItemLabelOf, menuItemSectionOf, menuSectionsOf } from './appShell/menuItemText.js';
-export { activeMenuItemOf, composeMenu, menuBadgeOf, menuBreadcrumbsOf, mobileTabsOf, parentMenuItemOf, screenMenuItemsOf } from './navigation/appMenu.js';
+export { activeMenuItemOf, composeMenu, menuBadgeOf, menuBreadcrumbsOf, menuItemsWithIconsOf, mobileTabsOf, parentMenuItemOf, screenMenuItemsOf, } from './navigation/appMenu.js';
 export { menuBadgesFrom, useMenuBadges } from './navigation/useMenuBadges.js';
 export { allowOnlyUnrestricted, createAccessChecker } from './access/accessRules.js';
 export { default as Can } from './access/Can.js';
@@ -70,12 +70,12 @@ export { REDIRECT_PARAM, readRedirectParam, safeInternalPath, withRedirect } fro
 export { recallListUrl, rememberListUrl, useRememberListUrl } from './lastListUrl.js';
 export { currentHistoryIndex, forgetPageName, pageNameAt, rememberPageName, useNavigationTrail, usePageName } from './navigationTrail.js';
 export { periodRangeIsValid, rangeEndAfterStartChange, rangeEndOptionsOf } from './periodRanges.js';
-export { createLogger, setLogLevel } from './observability/logger.js';
+export { addLogSink, createLogger, setLogLevel } from './observability/logger.js';
 export { isNewBuildPublished, reportPublishedBuild, useNewBuildPublished } from './observability/publishedBuild.js';
 export { BUILD_WATCH_ACTION, buildWatchActionOf, publishedBuildIdOf } from './observability/buildWatch.js';
 export { usePublishedBuildWatch } from './observability/usePublishedBuildWatch.js';
 export { API_ERROR_STATUS, ApiError } from './api/ApiError.js';
-export { API_RESPONSE_PARSE, apiUrlOf, createApiClient } from './api/createApiClient.js';
+export { API_RESPONSE_PARSE, apiErrorOf, apiUrlOf, createApiClient } from './api/createApiClient.js';
 export { isStaleChunkError, recoverFromStaleChunk } from './api/staleChunks.js';
 export { ACCOUNT_EVENT_KIND, default as ActivityLog } from './security/ActivityLog.js';
 export { default as RecoveryCodesDialog } from './security/RecoveryCodesDialog.js';

package/dist/types/navigation/appMenu.d.ts

@@ -11,6 +11,14 @@ export declare function composeMenu(menuModules: Record<string, any> | any[], {
     canAccess?: (access: object | undefined) => boolean;
     context?: object;
 }): object[];
+/**
+ * Las entradas con su ícono como componente (Icon), que es lo que pintan las piezas del menú: el proyecto puede dar el
+ * componente o un ícono ya pintado (icon, por ejemplo <Iconify icon="mdi:bank" /> de un sistema que ya usaba iconify).
+ *
+ * @param {object[]} menuItems
+ * @returns {object[]}
+ */
+export declare function menuItemsWithIconsOf(menuItems: object[]): object[];
 /**
  * Las entradas que llevan a una pantalla, con las de los submenús (las de arriba primero).
  *

package/dist/types/observability/logger.d.ts

@@ -6,6 +6,19 @@
  * @returns {void}
  */
 export declare function setLogLevel(level: 'error' | 'warn' | 'info' | 'debug'): void;
+/**
+ * Una salida propia para lo que se anota (un reporte externo): recibe cada anotación que sale en consola, con su nivel.
+ *
+ * @param {(entry: {level: 'error'|'warn'|'info'|'debug', namespace: string, message: string, context?: object, timestamp: number}) => void} sink
+ * @returns {() => void} para quitarla
+ */
+export declare function addLogSink(sink: (entry: {
+    level: 'error' | 'warn' | 'info' | 'debug';
+    namespace: string;
+    message: string;
+    context?: object;
+    timestamp: number;
+}) => void): () => void;
 /**
  * Logger que antepone [namespace] a cada mensaje.
  *

package/dist/types/theme/components/MuiAppBar.d.ts

@@ -7,7 +7,9 @@ export declare function MuiAppBar(): {
             root: ({ ownerState, theme }: {
                 ownerState: any;
                 theme: any;
-            }) => any;
+            }) => {
+                borderBottom?: string | undefined;
+            };
         };
     };
 };

package/dist/types/theme/components/glassComponents.d.ts

@@ -1,3 +1,8 @@
+export declare const WHITE_LABEL = "#FFFFFF";
+export declare const MONOGRAM_GRAY: Readonly<{
+    light: "#6E6E73";
+    dark: "#636366";
+}>;
 /**
  * @param {object} [options]
  * @param {boolean} [options.surfaces] también el contenido (tarjetas, acordeón, avisos, tabla) con material; por omisión no

package/dist/types/theme/components/minimalComponents.d.ts

@@ -1,16 +1,62 @@
-/** Los fondos del minimalista: el gris agrupado de Apple y la tarjeta un escalón arriba, en claro y en oscuro. */
+/**
+ * Los tonos del minimalista por omisión, los grises de Apple, en claro y en oscuro:
+ *   - default: el fondo de la página (el gris agrupado);
+ *   - paper: las tarjetas, un escalón arriba;
+ *   - fill: el relleno de campos, grupos y botones sin color (más claro que el fondo en oscuro);
+ *   - floating: lo que flota sobre el contenido (la barra de pestañas del teléfono, el aviso de versión nueva), un escalón
+ *     más oscuro que las tarjetas. Del color de las tarjetas «se perdía» sobre ellas (lo dijo el autor de la primera barra
+ *     de abajo del minimalista); así se distingue sin borde ni sombra, sobre tarjetas y sobre el fondo.
+ */
+export declare const MINIMAL_TONES: Readonly<{
+    light: Readonly<{
+        default: "#F2F2F7";
+        paper: "#FFFFFF";
+        fill: "rgba(118, 118, 128, 0.12)";
+        floating: "#E5E5EA";
+    }>;
+    dark: Readonly<{
+        default: "#000000";
+        paper: "#1C1C1E";
+        fill: "rgba(118, 118, 128, 0.24)";
+        floating: "#2C2C2E";
+    }>;
+}>;
+/** Los fondos del minimalista por omisión (los de MINIMAL_TONES): el gris agrupado de Apple y la tarjeta un escalón arriba. */
 export declare const MINIMAL_BACKGROUND: Readonly<{
+    light: {
+        default: "#F2F2F7";
+        paper: "#FFFFFF";
+    };
+    dark: {
+        default: "#000000";
+        paper: "#1C1C1E";
+    };
+}>;
+/**
+ * Los tonos del minimalista con los del proyecto encima: lo que el proyecto no trae se queda con el gris de Apple.
+ *
+ * @param {{light?: object, dark?: object}} [projectTones] cualquiera de default, paper, fill y floating por modo
+ * @returns {{light: {default: string, paper: string, fill: string, floating: string}, dark: {default: string, paper: string, fill: string, floating: string}}}
+ */
+export declare function minimalTonesOf(projectTones?: {
+    light?: object;
+    dark?: object;
+}): {
     light: {
         default: string;
         paper: string;
+        fill: string;
+        floating: string;
     };
     dark: {
         default: string;
         paper: string;
+        fill: string;
+        floating: string;
     };
-}>;
+};
 /**
- * La superficie de lo que flota en el minimalista, sólida, en claro y en oscuro.
+ * La superficie de lo que flota en el minimalista, sólida, en claro y en oscuro (el tono floating; ver MINIMAL_TONES).
  *
  * @param {object} theme
  * @returns {object}

package/dist/types/theme/createToolkitTheme.d.ts

@@ -26,11 +26,17 @@ export declare const TOP_BAR: Readonly<{
  *     plano y tonal (sin bordes ni sombras: las superficies se separan por su tono; sin vidrio aunque se pida)
  * @param {'capsules'|'band'} [options.bar] la barra de arriba con vidrio o con el minimalista (TOP_BAR): por omisión en
  *     cápsulas; 'band' la franja de lado a lado
+ * @param {{light?: {default?: string, paper?: string, fill?: string, floating?: string}, dark?: {default?: string, paper?: string, fill?: string, floating?: string}}} [options.minimalTones]
+ *     los tonos del minimalista con los colores de la marca, por modo: default (el fondo de la página), paper (las tarjetas,
+ *     un escalón arriba), fill (el relleno de campos, grupos y botones sin color) y floating (la barra de pestañas del
+ *     teléfono y lo que flota). Lo que no se pase se queda con los grises de Apple (MINIMAL_TONES). OJO: con el minimalista
+ *     el fondo de la página sale de aquí y no de la paleta (sin minimalTones, los grises de Apple aunque la paleta traiga
+ *     su background)
  * @param {object} [options.components] ajustes propios de componentes (se suman; en el mismo estilo ganan los del proyecto)
  * @param {object} [options.overrides] cualquier otra cosa de createTheme (breakpoints, spacing…)
  * @returns {object} el tema de MUI
  */
-export declare function createToolkitTheme({ colorSchemes, colorSchemeSelector, fontFamily, glass, look, bar, components, overrides, }?: {
+export declare function createToolkitTheme({ colorSchemes, colorSchemeSelector, fontFamily, glass, look, bar, minimalTones, components, overrides, }?: {
     colorSchemes?: {
         light?: object | boolean;
         dark?: object | boolean;
@@ -43,6 +49,20 @@ export declare function createToolkitTheme({ colorSchemes, colorSchemeSelector,
     };
     look?: 'standard' | 'minimal';
     bar?: 'capsules' | 'band';
+    minimalTones?: {
+        light?: {
+            default?: string;
+            paper?: string;
+            fill?: string;
+            floating?: string;
+        };
+        dark?: {
+            default?: string;
+            paper?: string;
+            fill?: string;
+            floating?: string;
+        };
+    };
     components?: object;
     overrides?: object;
 }): object;

package/dist/types/theme/lightDarkStyles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @param {object} theme el tema de MUI (su applyStyles sabe cómo se elige el modo: clase, atributo o media query)
+ * @param {object} lightStyles los estilos de claro (los de siempre)
+ * @param {object} darkStyles lo que cambia en oscuro
+ * @returns {object} los estilos para el tema: cada propiedad en la clase con su variable, y la regla de oscuro solo con las
+ *     variables (más lo que no pudo ir en variable)
+ */
+export declare function lightDarkStylesOf(theme: object, lightStyles: object, darkStyles: object): object;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stackcraftmx/calcita",
-    "version": "0.25.0",
+    "version": "0.27.0",
     "description": "Componentes y utilidades de React con MUI para arrancar proyectos rápido: tabla de servidor, diálogos, avisos, descargas, formularios, formatos y reportes en Excel.",
     "license": "FSL-1.1-MIT",
     "author": "calcifux",
@@ -130,7 +130,8 @@
         "./kanban": {
             "types": "./dist/types/kanban.d.ts",
             "import": "./dist/kanban.js"
-        }
+        },
+        "./package.json": "./package.json"
     },
     "scripts": {
         "prepublishOnly": "pnpm run check",