@zauru-sdk/components 6.2.28 → 6.3.0

package/src/Table/ZauruTable.tsx

@@ -7,19 +7,70 @@ import type {
 } from "react-data-table-component";
 import { createTheme } from "react-data-table-component";
 import { SearchSVG } from "@zauru-sdk/icons";
+import { ExpandableRowsComponent } from "react-data-table-component/dist/DataTable/types.js";
 import * as ReactDataTableComponent from "react-data-table-component";
 const DataTable = ReactDataTableComponent.default as any;
 
+const headerTextWrapStyle = {
+  whiteSpace: "normal",
+  overflow: "visible",
+  textOverflow: "clip",
+  overflowWrap: "break-word",
+  wordBreak: "break-word",
+  lineHeight: "1.25",
+} as const;
+
 const customStyles: TableStyles = {
+  table: {
+    style: {
+      minWidth: 0,
+    },
+  },
+  tableWrapper: {
+    style: {
+      display: "block",
+      width: "100%",
+      maxWidth: "100%",
+      minWidth: 0,
+      overflowX: "auto",
+    },
+  },
+  responsiveWrapper: {
+    style: {
+      width: "100%",
+      maxWidth: "100%",
+      minWidth: 0,
+      overflowX: "auto",
+    },
+  },
+  headRow: {
+    style: {
+      minHeight: "40px",
+      height: "auto",
+      alignItems: "stretch",
+    },
+    denseStyle: {
+      minHeight: "36px",
+      height: "auto",
+    },
+  },
   headCells: {
     style: {
       color: "#202124",
       fontSize: "14px",
       justifyContent: "left",
-      whiteSpace: "normal",
-      wordBreak: "break-word",
-      maxWidth: "250px",
-      padding: "4px", // Add some padding
+      alignItems: "flex-start",
+      paddingTop: "8px",
+      paddingBottom: "8px",
+      ...headerTextWrapStyle,
+      ".rdt_TableCol_Sortable": {
+        height: "auto",
+        minHeight: "100%",
+        overflow: "visible",
+        whiteSpace: "normal",
+        alignItems: "flex-start",
+      },
+      ".rdt_TableCol_Sortable > div": headerTextWrapStyle,
     },
   },
   cells: {
@@ -28,6 +79,16 @@ const customStyles: TableStyles = {
       wordBreak: "break-word",
     },
   },
+  expanderRow: {
+    style: {
+      minWidth: 0,
+      width: "100%",
+      maxWidth: "100%",
+      overflowX: "auto",
+      display: "grid",
+      gridTemplateColumns: "minmax(0, 1fr)",
+    },
+  },
   rows: {
     highlightOnHoverStyle: {
       backgroundColor: "rgb(230, 244, 244)",
@@ -106,6 +167,10 @@ type Props = TableProps<any> & {
   search?: {
     placeholderSearch?: string;
   };
+  expandable?: {
+    expandableRowExpanded?: (row: any) => boolean;
+    expandableRowsComponent?: ExpandableRowsComponent<any>;
+  };
   theme?: "solarized" | "subTable";
   className?: string;
 };
@@ -119,6 +184,7 @@ export const ZauruTable = (props: Props) => {
     loading = false,
     pagination,
     search,
+    expandable,
     theme,
     className,
     offlineSearch = [],
@@ -225,7 +291,8 @@ export const ZauruTable = (props: Props) => {
   const subHeaderComponent = loadSubHeader ? subHeaderComponentMemo : undefined;
 
   return (
-    <DataTable
+    <div className="w-full min-w-0 max-w-full overflow-x-auto">
+      <DataTable
       className={className}
       subHeaderWrap
       theme={theme ?? "solarized"}
@@ -242,6 +309,14 @@ export const ZauruTable = (props: Props) => {
       persistTableHead
       responsive
       noHeader
+      expandableRows={!!expandable}
+      expandOnRowClicked={!!expandable}
+      expandableRowExpanded={
+        expandable ? expandable.expandableRowExpanded : undefined
+      }
+      expandableRowsComponent={
+        expandable ? expandable.expandableRowsComponent : undefined
+      }
       subHeader={loadSubHeader}
       subHeaderComponent={subHeaderComponent}
       paginationServer={!!pagination}
@@ -254,7 +329,8 @@ export const ZauruTable = (props: Props) => {
           ? pagination.rowsPerPageOptions
           : [10, 50, 100]
       }
-      {...others}
-    />
+        {...others}
+      />
+    </div>
   );
 };

package/src/Tooltip/Tooltip.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import React, { useState } from "react";
+
+type Props = {
+  children: React.ReactNode;
+  text: string;
+};
+
+export const Tooltip = ({ children, text }: Props) => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <div className="relative inline-block">
+      <div
+        onMouseEnter={() => setShow(true)}
+        onMouseLeave={() => setShow(false)}
+      >
+        {children}
+      </div>
+      {show && (
+        <div
+          className="absolute z-10 bg-gray-700 text-white px-2 py-1 rounded-md bottom-full left-1/2 transform -translate-x-1/2"
+          style={{ whiteSpace: "nowrap", height: "2rem" }}
+        >
+          {text}
+          <div
+            className="absolute top-full left-1/2 transform -translate-x-1/2"
+            style={{
+              width: "0",
+              height: "0",
+              borderTop: "6px solid transparent",
+              borderLeft: "6px solid transparent",
+              borderRight: "6px solid transparent",
+              borderBottom: "6px solid gray",
+            }}
+          ></div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/Tooltip/index.ts

@@ -0,0 +1 @@
+export * from "./Tooltip.js";

package/src/WithTooltip/WithTooltip.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  text: string;
+};
+
+export const WithTooltip = (props: Props) => {
+  const { children, text } = props;
+
+  return (
+    <div className="group relative inline-block">
+      {children}
+      <div className="pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-full mb-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+        <div className="relative bg-black text-white text-sm rounded py-1 px-2 text-wrap w-40">
+          {text}
+          <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-black"></div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/WithTooltip/index.tsx

@@ -0,0 +1 @@
+export * from "./WithTooltip.js";

package/src/index.ts

@@ -19,6 +19,8 @@ export * from "./Tab/index.js";
 export * from "./Table/index.js";
 export * from "./TaskList/index.js";
 export * from "./Titles/index.js";
+export * from "./Tooltip/index.js";
+export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";

package/stories/Alerts.stories.tsx

@@ -0,0 +1,17 @@
+import { StaticAlert } from "../src/Alerts/StaticAlert.js";
+
+export const Info = () => (
+  <StaticAlert title="Información" description="Mensaje informativo." type="info" />
+);
+
+export const Success = () => (
+  <StaticAlert title="Listo" description="La operación se completó." type="success" />
+);
+
+export const Warning = () => (
+  <StaticAlert
+    title="Atención"
+    description="Hay datos pendientes de revisar."
+    type="warning"
+  />
+);

package/stories/Button.stories.tsx

@@ -0,0 +1,52 @@
+import { ActionList } from "../src/Buttons/ActionList.js";
+import { Button } from "../src/Buttons/Button.js";
+
+export const Default = () => <Button title="Guardar" />;
+
+export const Loading = () => (
+  <Button title="Guardar" loading loadingText="Guardando..." />
+);
+
+export const Disabled = () => <Button title="Guardar" disabled />;
+
+export const Colors = () => (
+  <div className="flex flex-wrap gap-2">
+    <Button title="Indigo" selectedColor="indigo" />
+    <Button title="Green" selectedColor="green" />
+    <Button title="Red" selectedColor="red" />
+    <Button title="Yellow" selectedColor="yellow" />
+    <Button title="Gray" selectedColor="gray" />
+  </div>
+);
+
+export const Dropdown = () => (
+  <Button
+    title="Acciones"
+    dropdownTitle="Acciones"
+    dropdownOptions={[
+      { label: "Exportar", value: "export", onClick: () => undefined },
+      { label: "Imprimir", value: "print", onClick: () => undefined },
+    ]}
+  />
+);
+
+export const Actions = () => (
+  <ActionList
+    items={[
+      {
+        key: "pdf",
+        badge: "PDF",
+        badgeClassName: "bg-red-50 text-red-700",
+        label: "Imprimir reporte",
+        onClick: () => undefined,
+      },
+      {
+        key: "xls",
+        badge: "XLS",
+        badgeClassName: "bg-green-50 text-green-700",
+        label: "Exportar Excel",
+        onClick: () => undefined,
+      },
+    ]}
+  />
+);

package/stories/Card.stories.tsx

@@ -0,0 +1,7 @@
+import { Card } from "../src/Card/Card.js";
+
+export const Default = () => (
+  <Card title="Tarjeta">
+    <p>Contenido de la tarjeta.</p>
+  </Card>
+);

package/stories/Container.stories.tsx

@@ -0,0 +1,24 @@
+import { Container } from "../src/Containers/Container.js";
+import { Button } from "../src/Buttons/Button.js";
+
+export const Default = () => (
+  <Container title="Contenedor" description="Descripción de la sección.">
+    <p>Contenido de ejemplo.</p>
+  </Container>
+);
+
+export const WithRightContent = () => (
+  <Container
+    title="Con acciones"
+    description="El encabezado se adapta en móvil."
+    rightContent={<Button title="Nuevo" />}
+  >
+    <p>Cuerpo.</p>
+  </Container>
+);
+
+export const Collapsible = () => (
+  <Container title="Colapsable" collapsible defaultOpen>
+    <p>Se puede contraer con el summary.</p>
+  </Container>
+);

package/stories/Form.stories.tsx

@@ -0,0 +1,58 @@
+import { TextField } from "../src/Form/TextField/index.js";
+import { SelectField } from "../src/Form/SelectField/index.js";
+import { CheckBox } from "../src/Form/Checkbox/index.js";
+import { FormDatePicker } from "../src/Form/DatePicker/index.js";
+import { FileUploadField } from "../src/Form/FileUpload/index.js";
+import { FormLayout } from "../src/Form/FormLayout/index.js";
+import { RadioButtonGroup } from "../src/Form/RadioButtonGroup/index.js";
+import { Button } from "../src/Buttons/Button.js";
+
+export const Text = () => (
+  <TextField name="nombre" title="Nombre" hint="Campo de texto" required />
+);
+
+export const Select = () => (
+  <SelectField
+    name="agencia"
+    title="Agencia"
+    options={[
+      { label: "Central", value: "1" },
+      { label: "Norte", value: "2", disabled: true, disabledLabel: "cerrada" },
+      { label: "Sur", value: "3" },
+    ]}
+  />
+);
+
+export const Checkbox = () => (
+  <CheckBox name="acepta" label="Acepto los términos" required />
+);
+
+export const DatePicker = () => (
+  <FormDatePicker name="fecha" title="Fecha" />
+);
+
+export const FileUpload = () => (
+  <FileUploadField name="archivo" title="Archivo" fileTypes={["pdf", "png"]} />
+);
+
+export const Layout = () => (
+  <FormLayout
+    formId="demo-form"
+    title="Formulario de ejemplo"
+    buttons={<Button title="Enviar" />}
+  >
+    <TextField name="campo" title="Campo" />
+  </FormLayout>
+);
+
+export const Radios = () => (
+  <RadioButtonGroup
+    name="tipo"
+    title="Tipo"
+    options={[
+      { label: "Uno", value: "1" },
+      { label: "Dos", value: "2" },
+    ]}
+    orientation="horizontal"
+  />
+);

package/stories/Labels.stories.tsx

@@ -0,0 +1,17 @@
+import { InfoLabel } from "../src/Labels/InfoLabel/index.js";
+import { SearchFiltersSummary } from "../src/Labels/SearchFiltersSummary.js";
+
+export const Info = () => (
+  <InfoLabel title="Agencia" description="Central" />
+);
+
+export const Filters = () => (
+  <SearchFiltersSummary
+    items={[
+      { key: "dates", label: "Fechas", value: "01/01/2026 – 31/01/2026" },
+      { key: "agency", label: "Agencia", value: "Todas" },
+    ]}
+  />
+);
+
+export const FiltersEmpty = () => <SearchFiltersSummary items={[]} />;

package/stories/Modal.stories.tsx

@@ -0,0 +1,21 @@
+import { useState } from "react";
+import { ProgressModal } from "../src/Modal/ProgressModal.js";
+import { Button } from "../src/Buttons/Button.js";
+
+export const Progress = () => {
+  const [open, setOpen] = useState(true);
+  return (
+    <>
+      <Button type="button" title="Abrir progreso" onClickSave={() => setOpen(true)} />
+      <ProgressModal
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        title="Procesando"
+        current={3}
+        total={10}
+        currentItem="Item 3"
+        description="Trabajo de ejemplo"
+      />
+    </>
+  );
+};

package/stories/Tab.stories.tsx

@@ -0,0 +1,10 @@
+import { Tabs } from "../src/Tab/Tab.js";
+
+export const Default = () => (
+  <Tabs
+    items={[
+      { title: "General", link: "/" },
+      { title: "Detalle", link: "/home" },
+    ]}
+  />
+);

package/stories/Table.stories.tsx

@@ -0,0 +1,37 @@
+import { GenericDynamicTable } from "../src/DynamicTable/GenericDynamicTable.js";
+import { ZauruTable } from "../src/Table/ZauruTable.js";
+
+export const Dynamic = () => (
+  <GenericDynamicTable
+    name="lineas"
+    withoutBg
+    paginated={false}
+    defaultValue={[{ id: "1", producto: "Tomate", cantidad: 2 }]}
+    rowSummary={(row) => `Cantidad: ${row.cantidad ?? 0}`}
+    columns={[
+      { label: "Producto", name: "producto", type: "textField" },
+      {
+        label: "Cantidad",
+        name: "cantidad",
+        type: "textField",
+        textFieldType: "number",
+      },
+    ]}
+  />
+);
+
+export const DataTable = () => (
+  <ZauruTable
+    columns={[
+      { name: "Nombre", selector: (row: { name: string }) => row.name },
+      { name: "Estado", selector: (row: { status: string }) => row.status },
+    ]}
+    data={[
+      { name: "Factura 1", status: "Abierta" },
+      { name: "Factura 2", status: "Cerrada" },
+    ]}
+    whitOutPagination
+    search={{ placeholderSearch: "Filtrar" }}
+    offlineSearch={["name", "status"]}
+  />
+);

package/stories/Titles.stories.tsx

@@ -0,0 +1,11 @@
+import { TitleH1 } from "../src/Titles/TitleH1.js";
+import { TitleH2 } from "../src/Titles/TitleH2.js";
+import { TitleH3 } from "../src/Titles/TitleH3.js";
+
+export const Hierarchy = () => (
+  <div className="space-y-3">
+    <TitleH1 texto="Título H1" />
+    <TitleH2 texto="Título H2" />
+    <TitleH3 texto="Título H3" />
+  </div>
+);

package/stories/Tooltip.stories.tsx

@@ -0,0 +1,15 @@
+import { Tooltip } from "../src/Tooltip/Tooltip.js";
+import { WithTooltip } from "../src/WithTooltip/WithTooltip.js";
+import { Button } from "../src/Buttons/Button.js";
+
+export const HoverTooltip = () => (
+  <Tooltip text="Ayuda contextual">
+    <Button title="Pasa el mouse" type="button" />
+  </Tooltip>
+);
+
+export const CssTooltip = () => (
+  <WithTooltip text="Texto largo que se envuelve en el globo de ayuda.">
+    <Button title="Con tooltip CSS" type="button" />
+  </WithTooltip>
+);

package/tailwind.config.cjs

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "./stories/**/*.{ts,tsx}",
+    ".ladle/**/*.{ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("@tailwindcss/forms")],
+};

package/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "include": ["**/*.ts", "**/*.tsx", "**/*.css"],
+  "exclude": ["stories", "dist", "node_modules", ".ladle"],
   "compilerOptions": {
     "target": "ES2022",
     "module": "NodeNext",