@zauru-sdk/components 6.8.2 → 6.9.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.9.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.8.3...@zauru-sdk/components@6.9.0) (2026-10-05)
+
+
+### Features
+
+* motor RBAC genérico para webapps Remix (roles, asignaciones y matriz) ([b48c635](https://github.com/intuitiva/zauru-typescript-sdk/commit/b48c635101814ebf0b362636839b626d23a13b57))
+
+
+
+
+
+## [6.8.3](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.8.2...@zauru-sdk/components@6.8.3) (2026-10-05)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [6.8.2](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.8.1...@zauru-sdk/components@6.8.2) (2026-09-22)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Tab/PermissionMatrix.d.ts

@@ -0,0 +1,21 @@
+import type { PermissionGroup } from "@zauru-sdk/types";
+export type PermissionMatrixRole = {
+    id: number;
+    name: string;
+    permissionKeys: string[];
+};
+type Props = {
+    groups: PermissionGroup[];
+    roles: PermissionMatrixRole[];
+    disabled?: boolean;
+    pendingCells?: ReadonlySet<string>;
+    onToggle: (roleId: number, key: string, granted: boolean) => void;
+    onBulkRole?: (roleId: number, mode: "all" | "none") => void;
+    onBulkSection?: (roleId: number, groupId: string, mode: "add" | "remove") => void;
+    emptyText?: string;
+    markAllLabel?: string;
+    unmarkAllLabel?: string;
+};
+export declare function permissionMatrixCellKey(roleId: number, key: string): string;
+export declare const PermissionMatrix: ({ groups, roles, disabled, pendingCells, onToggle, onBulkRole, onBulkSection, emptyText, markAllLabel, unmarkAllLabel, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Tab/RouteTabNav.d.ts

@@ -0,0 +1,13 @@
+export type RouteTabNavItem = {
+    to: string;
+    label: string;
+    hide?: boolean;
+    end?: boolean;
+};
+type Props = {
+    items: RouteTabNavItem[];
+    ariaLabel?: string;
+    selectedColor?: "indigo" | "slate" | "blue" | "green";
+};
+export declare const RouteTabNav: ({ items, ariaLabel, selectedColor, }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Tab/index.d.ts

@@ -1 +1,3 @@
 export * from "./Tab.js";
+export * from "./RouteTabNav.js";
+export * from "./PermissionMatrix.js";

package/dist/esm/Tab/PermissionMatrix.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function permissionMatrixCellKey(roleId, key) {
+    return `${roleId}:${key}`;
+}
+const checkboxClass = "form-checkbox h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:cursor-not-allowed disabled:opacity-50";
+export const PermissionMatrix = ({ groups, roles, disabled = false, pendingCells, onToggle, onBulkRole, onBulkSection, emptyText = "Crea un rol para editar la matriz de permisos.", markAllLabel = "Marcar todo", unmarkAllLabel = "Desmarcar todo", }) => {
+    const allKeys = groups.flatMap((group) => group.actions.map((action) => action.key));
+    if (roles.length === 0) {
+        return (_jsx("p", { className: "text-sm text-gray-600", role: "status", children: emptyText }));
+    }
+    const roleHasKeys = (role, keys) => keys.length > 0 && keys.every((key) => role.permissionKeys.includes(key));
+    return (_jsx("div", { className: "overflow-x-auto rounded-md border border-gray-200", children: _jsxs("table", { className: "min-w-full border-collapse text-sm", children: [_jsx("caption", { className: "sr-only", children: "Matriz de permisos por rol. Filas son acciones, columnas son roles." }), _jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { scope: "col", className: "sticky left-0 z-10 min-w-[16rem] border-b border-gray-200 bg-gray-50 px-3 py-2 text-left font-semibold text-gray-800", children: "Permiso" }), roles.map((role) => {
+                                const allGranted = roleHasKeys(role, allKeys);
+                                return (_jsx("th", { scope: "col", className: "min-w-[9rem] border-b border-l border-gray-200 px-3 py-2 text-center font-semibold text-gray-800", children: _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("span", { className: "break-words", children: role.name }), onBulkRole ? (_jsx("button", { type: "button", className: "cursor-pointer text-xs font-medium text-indigo-700 hover:text-indigo-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded", disabled: disabled, onClick: () => onBulkRole(role.id, allGranted ? "none" : "all"), children: allGranted ? unmarkAllLabel : markAllLabel })) : null] }) }, role.id));
+                            })] }) }), _jsx("tbody", { children: groups.map((group) => {
+                        const sectionKeys = group.actions.map((action) => action.key);
+                        return (_jsx(GroupRows, { group: group, roles: roles, sectionKeys: sectionKeys, disabled: disabled, pendingCells: pendingCells, onToggle: onToggle, onBulkSection: onBulkSection, checkboxClass: checkboxClass }, group.id));
+                    }) })] }) }));
+};
+function GroupRows({ group, roles, sectionKeys, disabled, pendingCells, onToggle, onBulkSection, checkboxClass, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("tr", { className: "bg-slate-100", children: _jsx("th", { scope: "colgroup", colSpan: roles.length + 1, className: "sticky left-0 border-b border-gray-200 px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-slate-700", children: group.label }) }), group.actions.map((action) => (_jsxs("tr", { className: "odd:bg-white even:bg-slate-50", children: [_jsx("th", { scope: "row", className: "sticky left-0 z-10 border-b border-gray-100 bg-inherit px-3 py-2 text-left font-normal text-gray-800", children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { children: action.label }), _jsx("code", { className: "text-xs text-gray-500", children: action.key })] }) }), roles.map((role) => {
+                        const granted = role.permissionKeys.includes(action.key);
+                        const cellKey = permissionMatrixCellKey(role.id, action.key);
+                        const pending = pendingCells?.has(cellKey) ?? false;
+                        return (_jsx("td", { className: "border-b border-l border-gray-100 px-3 py-2 text-center", children: _jsx("input", { type: "checkbox", className: checkboxClass, checked: granted, disabled: disabled || pending, "aria-label": `${role.name}: ${action.label}`, onChange: () => onToggle(role.id, action.key, !granted) }) }, role.id));
+                    })] }, action.key))), onBulkSection ? (_jsxs("tr", { children: [_jsx("td", { className: "sticky left-0 z-10 border-b border-gray-200 bg-white px-3 py-1 text-xs text-gray-500", children: "Secci\u00F3n" }), roles.map((role) => {
+                        const sectionGranted = sectionKeys.every((key) => role.permissionKeys.includes(key));
+                        return (_jsx("td", { className: "border-b border-l border-gray-200 px-3 py-1 text-center", children: _jsx("button", { type: "button", className: "cursor-pointer text-xs font-medium text-indigo-700 hover:text-indigo-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded disabled:cursor-not-allowed disabled:opacity-50", disabled: disabled, onClick: () => onBulkSection(role.id, group.id, sectionGranted ? "remove" : "add"), children: sectionGranted ? "Quitar sección" : "Marcar sección" }) }, role.id));
+                    })] })) : null] }));
+}

package/dist/esm/Tab/RouteTabNav.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavLink } from "@remix-run/react";
+const ACTIVE = {
+    indigo: "border-indigo-600 text-indigo-700",
+    slate: "border-slate-700 text-slate-800",
+    blue: "border-blue-600 text-blue-700",
+    green: "border-green-600 text-green-700",
+};
+export const RouteTabNav = ({ items, ariaLabel = "Secciones", selectedColor = "indigo", }) => {
+    const visible = items.filter((item) => !item.hide);
+    if (visible.length === 0) {
+        return null;
+    }
+    return (_jsx("nav", { "aria-label": ariaLabel, className: "border-b border-gray-200", children: _jsx("ul", { className: "flex flex-wrap gap-1 -mb-px", children: visible.map((item) => (_jsx("li", { children: _jsx(NavLink, { to: item.to, end: item.end, className: ({ isActive }) => [
+                        "inline-flex items-center cursor-pointer rounded-t-md border-b-2 px-3 py-2 text-sm font-medium transition-colors duration-150",
+                        "focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2",
+                        isActive
+                            ? ACTIVE[selectedColor]
+                            : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-800",
+                    ].join(" "), children: item.label }) }, item.to))) }) }));
+};

package/dist/esm/Tab/index.js

@@ -1 +1,3 @@
 export * from "./Tab.js";
+export * from "./RouteTabNav.js";
+export * from "./PermissionMatrix.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.8.2",
+  "version": "6.9.0",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -44,12 +44,12 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^6.8.2",
-    "@zauru-sdk/hooks": "^6.3.15",
+    "@zauru-sdk/common": "^6.8.4",
+    "@zauru-sdk/hooks": "^6.3.17",
     "@zauru-sdk/icons": "^6.1.0",
-    "@zauru-sdk/redux": "^6.5.13",
-    "@zauru-sdk/types": "^6.20.0",
-    "@zauru-sdk/utils": "^6.19.1",
+    "@zauru-sdk/redux": "^6.5.15",
+    "@zauru-sdk/types": "^6.22.0",
+    "@zauru-sdk/utils": "^6.21.0",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^12.0.0",
     "jsonwebtoken": "^9.0.2",
@@ -62,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "2da58dd263ca61a03f1e4779df9244b94050008d"
+  "gitHead": "800600a8cdb22f1c49293fbc3a48d26aa03771c9"
 }

package/src/Tab/PermissionMatrix.tsx

@@ -0,0 +1,223 @@
+import type { PermissionGroup } from "@zauru-sdk/types";
+
+export type PermissionMatrixRole = {
+  id: number;
+  name: string;
+  permissionKeys: string[];
+};
+
+type Props = {
+  groups: PermissionGroup[];
+  roles: PermissionMatrixRole[];
+  disabled?: boolean;
+  pendingCells?: ReadonlySet<string>;
+  onToggle: (roleId: number, key: string, granted: boolean) => void;
+  onBulkRole?: (roleId: number, mode: "all" | "none") => void;
+  onBulkSection?: (
+    roleId: number,
+    groupId: string,
+    mode: "add" | "remove",
+  ) => void;
+  emptyText?: string;
+  markAllLabel?: string;
+  unmarkAllLabel?: string;
+};
+
+export function permissionMatrixCellKey(roleId: number, key: string): string {
+  return `${roleId}:${key}`;
+}
+
+const checkboxClass =
+  "form-checkbox h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:cursor-not-allowed disabled:opacity-50";
+
+export const PermissionMatrix = ({
+  groups,
+  roles,
+  disabled = false,
+  pendingCells,
+  onToggle,
+  onBulkRole,
+  onBulkSection,
+  emptyText = "Crea un rol para editar la matriz de permisos.",
+  markAllLabel = "Marcar todo",
+  unmarkAllLabel = "Desmarcar todo",
+}: Props) => {
+  const allKeys = groups.flatMap((group) =>
+    group.actions.map((action) => action.key),
+  );
+
+  if (roles.length === 0) {
+    return (
+      <p className="text-sm text-gray-600" role="status">
+        {emptyText}
+      </p>
+    );
+  }
+
+  const roleHasKeys = (role: PermissionMatrixRole, keys: string[]) =>
+    keys.length > 0 && keys.every((key) => role.permissionKeys.includes(key));
+
+  return (
+    <div className="overflow-x-auto rounded-md border border-gray-200">
+      <table className="min-w-full border-collapse text-sm">
+        <caption className="sr-only">
+          Matriz de permisos por rol. Filas son acciones, columnas son roles.
+        </caption>
+        <thead>
+          <tr className="bg-gray-50">
+            <th
+              scope="col"
+              className="sticky left-0 z-10 min-w-[16rem] border-b border-gray-200 bg-gray-50 px-3 py-2 text-left font-semibold text-gray-800"
+            >
+              Permiso
+            </th>
+            {roles.map((role) => {
+              const allGranted = roleHasKeys(role, allKeys);
+              return (
+                <th
+                  key={role.id}
+                  scope="col"
+                  className="min-w-[9rem] border-b border-l border-gray-200 px-3 py-2 text-center font-semibold text-gray-800"
+                >
+                  <div className="flex flex-col items-center gap-1">
+                    <span className="break-words">{role.name}</span>
+                    {onBulkRole ? (
+                      <button
+                        type="button"
+                        className="cursor-pointer text-xs font-medium text-indigo-700 hover:text-indigo-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded"
+                        disabled={disabled}
+                        onClick={() =>
+                          onBulkRole(role.id, allGranted ? "none" : "all")
+                        }
+                      >
+                        {allGranted ? unmarkAllLabel : markAllLabel}
+                      </button>
+                    ) : null}
+                  </div>
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {groups.map((group) => {
+            const sectionKeys = group.actions.map((action) => action.key);
+            return (
+              <GroupRows
+                key={group.id}
+                group={group}
+                roles={roles}
+                sectionKeys={sectionKeys}
+                disabled={disabled}
+                pendingCells={pendingCells}
+                onToggle={onToggle}
+                onBulkSection={onBulkSection}
+                checkboxClass={checkboxClass}
+              />
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+function GroupRows({
+  group,
+  roles,
+  sectionKeys,
+  disabled,
+  pendingCells,
+  onToggle,
+  onBulkSection,
+  checkboxClass,
+}: {
+  group: PermissionGroup;
+  roles: PermissionMatrixRole[];
+  sectionKeys: string[];
+  disabled: boolean;
+  pendingCells?: ReadonlySet<string>;
+  onToggle: Props["onToggle"];
+  onBulkSection: Props["onBulkSection"];
+  checkboxClass: string;
+}) {
+  return (
+    <>
+      <tr className="bg-slate-100">
+        <th
+          scope="colgroup"
+          colSpan={roles.length + 1}
+          className="sticky left-0 border-b border-gray-200 px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-slate-700"
+        >
+          {group.label}
+        </th>
+      </tr>
+      {group.actions.map((action) => (
+        <tr key={action.key} className="odd:bg-white even:bg-slate-50">
+          <th
+            scope="row"
+            className="sticky left-0 z-10 border-b border-gray-100 bg-inherit px-3 py-2 text-left font-normal text-gray-800"
+          >
+            <div className="flex flex-col gap-0.5">
+              <span>{action.label}</span>
+              <code className="text-xs text-gray-500">{action.key}</code>
+            </div>
+          </th>
+          {roles.map((role) => {
+            const granted = role.permissionKeys.includes(action.key);
+            const cellKey = permissionMatrixCellKey(role.id, action.key);
+            const pending = pendingCells?.has(cellKey) ?? false;
+            return (
+              <td
+                key={role.id}
+                className="border-b border-l border-gray-100 px-3 py-2 text-center"
+              >
+                <input
+                  type="checkbox"
+                  className={checkboxClass}
+                  checked={granted}
+                  disabled={disabled || pending}
+                  aria-label={`${role.name}: ${action.label}`}
+                  onChange={() => onToggle(role.id, action.key, !granted)}
+                />
+              </td>
+            );
+          })}
+        </tr>
+      ))}
+      {onBulkSection ? (
+        <tr>
+          <td className="sticky left-0 z-10 border-b border-gray-200 bg-white px-3 py-1 text-xs text-gray-500">
+            Sección
+          </td>
+          {roles.map((role) => {
+            const sectionGranted = sectionKeys.every((key) =>
+              role.permissionKeys.includes(key),
+            );
+            return (
+              <td
+                key={role.id}
+                className="border-b border-l border-gray-200 px-3 py-1 text-center"
+              >
+                <button
+                  type="button"
+                  className="cursor-pointer text-xs font-medium text-indigo-700 hover:text-indigo-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded disabled:cursor-not-allowed disabled:opacity-50"
+                  disabled={disabled}
+                  onClick={() =>
+                    onBulkSection(
+                      role.id,
+                      group.id,
+                      sectionGranted ? "remove" : "add",
+                    )
+                  }
+                >
+                  {sectionGranted ? "Quitar sección" : "Marcar sección"}
+                </button>
+              </td>
+            );
+          })}
+        </tr>
+      ) : null}
+    </>
+  );
+}

package/src/Tab/RouteTabNav.tsx

@@ -0,0 +1,62 @@
+import { NavLink } from "@remix-run/react";
+
+export type RouteTabNavItem = {
+  to: string;
+  label: string;
+  hide?: boolean;
+  end?: boolean;
+};
+
+type Props = {
+  items: RouteTabNavItem[];
+  ariaLabel?: string;
+  selectedColor?: "indigo" | "slate" | "blue" | "green";
+};
+
+const ACTIVE: Record<NonNullable<Props["selectedColor"]>, string> = {
+  indigo: "border-indigo-600 text-indigo-700",
+  slate: "border-slate-700 text-slate-800",
+  blue: "border-blue-600 text-blue-700",
+  green: "border-green-600 text-green-700",
+};
+
+export const RouteTabNav = ({
+  items,
+  ariaLabel = "Secciones",
+  selectedColor = "indigo",
+}: Props) => {
+  const visible = items.filter((item) => !item.hide);
+
+  if (visible.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav
+      aria-label={ariaLabel}
+      className="border-b border-gray-200"
+    >
+      <ul className="flex flex-wrap gap-1 -mb-px">
+        {visible.map((item) => (
+          <li key={item.to}>
+            <NavLink
+              to={item.to}
+              end={item.end}
+              className={({ isActive }) =>
+                [
+                  "inline-flex items-center cursor-pointer rounded-t-md border-b-2 px-3 py-2 text-sm font-medium transition-colors duration-150",
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2",
+                  isActive
+                    ? ACTIVE[selectedColor]
+                    : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-800",
+                ].join(" ")
+              }
+            >
+              {item.label}
+            </NavLink>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};

package/src/Tab/index.ts

@@ -1 +1,3 @@
 export * from "./Tab.js";
+export * from "./RouteTabNav.js";
+export * from "./PermissionMatrix.js";