@zauru-sdk/components 6.18.0 → 6.19.0

package/src/Matrix/CheckMatrixCards.tsx

@@ -0,0 +1,137 @@
+import React, { ReactNode, useEffect, useState } from "react";
+
+export type CheckMatrixColumn = {
+  key: string;
+  label: ReactNode;
+};
+
+export type CheckMatrixRow = {
+  key: string;
+  label: ReactNode;
+  description?: ReactNode;
+};
+
+export interface CheckMatrixCardsProps {
+  rows: CheckMatrixRow[];
+  columns: CheckMatrixColumn[];
+  isChecked: (rowKey: string, columnKey: string) => boolean;
+  isPending?: (rowKey: string, columnKey: string) => boolean;
+  onToggle: (rowKey: string, columnKey: string, checked: boolean) => void;
+  disabled?: boolean;
+  renderRowAction?: (row: CheckMatrixRow) => ReactNode;
+  checkedLabel?: string;
+  uncheckedLabel?: string;
+  pendingLabel?: string;
+  emptyText?: string;
+  pageSize?: number;
+  showMoreLabel?: string;
+  className?: string;
+}
+
+export const CheckMatrixCards = ({
+  rows,
+  columns,
+  isChecked,
+  isPending = () => false,
+  onToggle,
+  disabled = false,
+  renderRowAction,
+  checkedLabel = "Marcado",
+  uncheckedLabel = "Sin marcar",
+  pendingLabel = "Guardando…",
+  emptyText = "No hay filas para mostrar.",
+  pageSize = 20,
+  showMoreLabel = "Mostrar más",
+  className = "",
+}: CheckMatrixCardsProps) => {
+  const safePageSize = Math.max(1, pageSize);
+  const [visibleCount, setVisibleCount] = useState(safePageSize);
+
+  useEffect(() => {
+    setVisibleCount(safePageSize);
+  }, [rows, safePageSize]);
+
+  if (rows.length === 0) {
+    return <p className={`p-4 text-sm text-gray-600 ${className}`}>{emptyText}</p>;
+  }
+
+  const visibleRows = rows.slice(0, visibleCount);
+
+  return (
+    <div className={`space-y-3 ${className}`}>
+      {visibleRows.map((row) => (
+        <fieldset
+          key={row.key}
+          className="min-w-0 rounded-lg border border-gray-200 bg-white p-3 shadow-sm"
+        >
+          <div className="mb-3 flex min-w-0 items-start justify-between gap-3">
+            <legend className="min-w-0 flex-1 px-0 text-sm font-semibold text-gray-900">
+              <span className="block break-words">{row.label}</span>
+              {row.description ? (
+                <span className="mt-0.5 block break-words text-xs font-normal text-gray-600">
+                  {row.description}
+                </span>
+              ) : null}
+            </legend>
+            {renderRowAction ? (
+              <div className="shrink-0">{renderRowAction(row)}</div>
+            ) : null}
+          </div>
+          <div className="grid gap-2 sm:grid-cols-2">
+            {columns.map((column) => {
+              const checked = isChecked(row.key, column.key);
+              const pending = isPending(row.key, column.key);
+              const inputId = `check-matrix-${encodeURIComponent(row.key)}-${encodeURIComponent(column.key)}`;
+              return (
+                <label
+                  key={column.key}
+                  htmlFor={inputId}
+                  className={`flex min-h-11 cursor-pointer items-center gap-3 rounded-md border px-3 py-2 text-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-1 ${
+                    checked
+                      ? "border-indigo-200 bg-indigo-50 text-indigo-950"
+                      : "border-gray-200 bg-gray-50 text-gray-800"
+                  } ${pending || disabled ? "cursor-not-allowed opacity-70" : "hover:border-indigo-300"}`}
+                >
+                  <input
+                    id={inputId}
+                    type="checkbox"
+                    checked={checked}
+                    disabled={disabled || pending}
+                    onChange={(event) =>
+                      onToggle(row.key, column.key, event.target.checked)
+                    }
+                    className="h-5 w-5 shrink-0 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                  />
+                  <span className="min-w-0 flex-1 break-words font-medium">
+                    {column.label}
+                  </span>
+                  <span
+                    className={`shrink-0 text-xs font-medium ${
+                      checked ? "text-indigo-700" : "text-gray-600"
+                    }`}
+                    aria-live={pending ? "polite" : undefined}
+                  >
+                    {pending
+                      ? pendingLabel
+                      : checked
+                        ? checkedLabel
+                        : uncheckedLabel}
+                  </span>
+                </label>
+              );
+            })}
+          </div>
+        </fieldset>
+      ))}
+      {visibleCount < rows.length ? (
+        <button
+          type="button"
+          onClick={() => setVisibleCount((count) => count + safePageSize)}
+          className="min-h-11 w-full cursor-pointer rounded-md border border-indigo-300 bg-white px-4 py-2 text-sm font-semibold text-indigo-700 hover:bg-indigo-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
+        >
+          {showMoreLabel} ({rows.length - visibleCount})
+        </button>
+      ) : null}
+    </div>
+  );
+};

package/src/Matrix/ResponsiveCheckMatrix.tsx

@@ -0,0 +1,32 @@
+import React, { ReactNode } from "react";
+import {
+  CheckMatrixCards,
+  CheckMatrixCardsProps,
+} from "./CheckMatrixCards.js";
+
+export interface ResponsiveCheckMatrixProps extends CheckMatrixCardsProps {
+  desktop: ReactNode;
+  desktopBreakpoint?: "sm" | "md" | "lg";
+}
+
+const visibilityClasses = {
+  sm: { mobile: "sm:hidden", desktop: "hidden sm:block" },
+  md: { mobile: "md:hidden", desktop: "hidden md:block" },
+  lg: { mobile: "lg:hidden", desktop: "hidden lg:block" },
+} as const;
+
+export const ResponsiveCheckMatrix = ({
+  desktop,
+  desktopBreakpoint = "md",
+  ...cardProps
+}: ResponsiveCheckMatrixProps) => {
+  const visibility = visibilityClasses[desktopBreakpoint];
+  return (
+    <>
+      <div className={visibility.mobile}>
+        <CheckMatrixCards {...cardProps} />
+      </div>
+      <div className={visibility.desktop}>{desktop}</div>
+    </>
+  );
+};

package/src/Matrix/index.ts

@@ -0,0 +1,2 @@
+export * from "./CheckMatrixCards.js";
+export * from "./ResponsiveCheckMatrix.js";

package/src/SidePanel/index.tsx

@@ -1,5 +1,11 @@
-import React, { useState, ReactNode, useEffect, useRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import React, {
+  useState,
+  ReactNode,
+  useEffect,
+  useId,
+  useRef,
+} from "react";
+import { motion, AnimatePresence, useReducedMotion } from "framer-motion";
 
 /**
  * SidePanel Component
@@ -14,11 +20,14 @@ import { motion, AnimatePresence } from "framer-motion";
  * @returns A toggleable side panel component.
  */
 
-interface SidePanelProps {
+export interface SidePanelProps {
   children: ReactNode;
   closeOnClickOutside?: boolean;
   widthPercentage?: number;
   buttonIcon?: "chevron" | "filter" | ReactNode;
+  ariaLabel?: string;
+  openButtonLabel?: string;
+  closeButtonLabel?: string;
 }
 
 // SVG icon for the left-pointing chevron
@@ -28,6 +37,8 @@ const ChevronLeftIcon = () => (
     viewBox="0 0 24 24"
     fill="currentColor"
     className="h-6 w-6"
+    aria-hidden="true"
+    focusable="false"
   >
     <path
       fillRule="evenodd"
@@ -44,6 +55,8 @@ const ChevronRightIcon = () => (
     viewBox="0 0 24 24"
     fill="currentColor"
     className="h-6 w-6"
+    aria-hidden="true"
+    focusable="false"
   >
     <path
       fillRule="evenodd"
@@ -60,6 +73,8 @@ const FilterIcon = () => (
     viewBox="0 0 24 24"
     fill="currentColor"
     className="h-6 w-6"
+    aria-hidden="true"
+    focusable="false"
   >
     <path
       fillRule="evenodd"
@@ -74,17 +89,26 @@ export const SidePanel: React.FC<SidePanelProps> = ({
   closeOnClickOutside = true,
   widthPercentage = 25,
   buttonIcon = "chevron",
+  ariaLabel = "Panel lateral",
+  openButtonLabel = "Abrir panel",
+  closeButtonLabel = "Cerrar panel",
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const panelRef = useRef<HTMLDivElement>(null);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const triggerButtonRef = useRef<HTMLButtonElement>(null);
+  const wasOpenRef = useRef(false);
+  const panelId = useId();
+  const shouldReduceMotion = useReducedMotion();
 
   const togglePanel = () => {
-    setIsOpen(!isOpen);
+    setIsOpen((open) => !open);
   };
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
+        isOpen &&
         closeOnClickOutside &&
         panelRef.current &&
         !panelRef.current.contains(event.target as Node)
@@ -97,7 +121,34 @@ export const SidePanel: React.FC<SidePanelProps> = ({
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [closeOnClickOutside]);
+  }, [closeOnClickOutside, isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setIsOpen(false);
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen) {
+      wasOpenRef.current = true;
+      closeButtonRef.current?.focus();
+      const previousOverflow = document.body.style.overflow;
+      if (window.matchMedia("(max-width: 767px)").matches) {
+        document.body.style.overflow = "hidden";
+      }
+      return () => {
+        document.body.style.overflow = previousOverflow;
+      };
+    }
+    if (wasOpenRef.current) {
+      wasOpenRef.current = false;
+      triggerButtonRef.current?.focus();
+    }
+  }, [isOpen]);
 
   const renderIcon = () => {
     if (typeof buttonIcon === "string") {
@@ -117,30 +168,63 @@ export const SidePanel: React.FC<SidePanelProps> = ({
   return (
     <>
       <motion.div
+        id={panelId}
         ref={panelRef}
+        role="dialog"
+        aria-modal={isOpen ? "true" : undefined}
+        aria-label={ariaLabel}
+        aria-hidden={!isOpen}
         initial={{ x: "100%" }}
         animate={{ x: isOpen ? 0 : "100%" }}
-        transition={{ type: "spring", stiffness: 300, damping: 30 }}
-        className={`fixed top-0 right-0 h-full bg-white shadow-lg z-[9999] overflow-y-auto`}
-        style={{ width: `${widthPercentage}%` }}
+        transition={
+          shouldReduceMotion
+            ? { duration: 0 }
+            : { type: "spring", stiffness: 300, damping: 30 }
+        }
+        className="fixed right-0 top-0 z-[9999] h-full w-[calc(100%-1rem)] overflow-y-auto bg-white shadow-lg sm:w-[min(28rem,calc(100%-2rem))] md:w-[var(--side-panel-width)]"
+        style={
+          {
+            "--side-panel-width": `${widthPercentage}%`,
+          } as React.CSSProperties
+        }
       >
         <button
+          ref={closeButtonRef}
+          type="button"
           onClick={togglePanel}
-          className="absolute top-4 left-4 p-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors"
+          aria-label={closeButtonLabel}
+          className="absolute left-4 top-4 min-h-11 min-w-11 cursor-pointer rounded-full bg-gray-200 p-2 transition-colors hover:bg-gray-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 md:min-h-0 md:min-w-0"
         >
           <ChevronRightIcon />
         </button>
-        <div className="p-6 mt-16">{children}</div>
+        <div className="mt-16 p-4 sm:p-6">{children}</div>
       </motion.div>
       <AnimatePresence>
+        {isOpen && closeOnClickOutside ? (
+          <motion.button
+            type="button"
+            aria-label={closeButtonLabel}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: shouldReduceMotion ? 0 : 0.15 }}
+            onClick={() => setIsOpen(false)}
+            className="fixed inset-0 z-[9998] cursor-default bg-black/30 md:hidden"
+          />
+        ) : null}
         {!isOpen && (
           <motion.button
+            ref={triggerButtonRef}
+            type="button"
+            aria-label={openButtonLabel}
+            aria-expanded={isOpen}
+            aria-controls={panelId}
             initial={{ opacity: 0, x: 20 }}
             animate={{ opacity: 1, x: 0 }}
             exit={{ opacity: 0, x: 20 }}
-            transition={{ duration: 0.2 }}
+            transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}
             onClick={togglePanel}
-            className={`fixed top-1/2 right-0 transform -translate-y-1/2 bg-indigo-600 text-white p-3 rounded-l-lg shadow-md hover:bg-indigo-700 transition-colors z-[10000]`}
+            className="fixed right-0 top-1/2 z-[10000] min-h-11 min-w-11 -translate-y-1/2 cursor-pointer rounded-l-lg bg-indigo-600 p-3 text-white shadow-md transition-colors hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
           >
             {renderIcon()}
           </motion.button>

package/src/index.ts

@@ -3,6 +3,7 @@ export * from "./AccessControl/index.js";
 export * from "./BlockUI/index.js";
 export * from "./Buttons/index.js";
 export * from "./Card/index.js";
+export * from "./Matrix/index.js";
 export * from "./ConnectionState/index.js";
 export * from "./Chat/index.js";
 export * from "./Containers/index.js";

package/stories/Matrix.stories.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { ResponsiveCheckMatrix } from "../src/Matrix/ResponsiveCheckMatrix.js";
+
+const rows = [
+  { key: "129", label: "129 · Cooperativa El Progreso", description: "San Juan" },
+  { key: "302", label: "302 · Productor con un nombre largo para validar el ajuste de texto" },
+];
+const columns = [
+  { key: "brocoli", label: "Brócoli certificado" },
+  { key: "radicchio", label: "Radicchio" },
+  { key: "elotin", label: "Elotín" },
+];
+
+export const Responsive = () => {
+  const [blocked, setBlocked] = useState(new Set(["129:radicchio"]));
+  const isChecked = (rowKey: string, columnKey: string) =>
+    !blocked.has(`${rowKey}:${columnKey}`);
+  const onToggle = (rowKey: string, columnKey: string, checked: boolean) => {
+    setBlocked((current) => {
+      const next = new Set(current);
+      const key = `${rowKey}:${columnKey}`;
+      if (checked) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+
+  const desktop = (
+    <div className="overflow-x-auto rounded-md border border-gray-200">
+      <table className="min-w-full text-sm">
+        <thead className="bg-gray-50">
+          <tr>
+            <th className="px-3 py-2 text-left">Proveedor</th>
+            {columns.map((column) => (
+              <th key={column.key} className="px-3 py-2 text-center">
+                {column.label}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => (
+            <tr key={row.key} className="border-t border-gray-200">
+              <th className="px-3 py-2 text-left">{row.label}</th>
+              {columns.map((column) => (
+                <td key={column.key} className="px-3 py-2 text-center">
+                  <input
+                    type="checkbox"
+                    aria-label={`${String(row.label)}, ${String(column.label)}`}
+                    checked={isChecked(row.key, column.key)}
+                    onChange={(event) =>
+                      onToggle(row.key, column.key, event.target.checked)
+                    }
+                  />
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+
+  return (
+    <ResponsiveCheckMatrix
+      rows={rows}
+      columns={columns}
+      desktop={desktop}
+      isChecked={isChecked}
+      onToggle={onToggle}
+      checkedLabel="Permitida"
+      uncheckedLabel="Bloqueada"
+    />
+  );
+};

package/stories/SidePanel.stories.tsx

@@ -0,0 +1,21 @@
+import { SidePanel } from "../src/SidePanel/index.js";
+
+export const Filters = () => (
+  <div className="min-h-[36rem] bg-gray-50 p-6">
+    <p className="text-sm text-gray-700">
+      Use el botón fijo para abrir los filtros.
+    </p>
+    <SidePanel buttonIcon="filter" ariaLabel="Filtros de búsqueda">
+      <h2 className="text-lg font-semibold text-gray-900">
+        Filtros de búsqueda
+      </h2>
+      <label className="mt-4 block text-sm font-medium text-gray-700">
+        Proveedor
+        <input
+          className="mt-1 block w-full rounded-md border-gray-300"
+          placeholder="Nombre o código"
+        />
+      </label>
+    </SidePanel>
+  </div>
+);