@zauru-sdk/components 1.0.25 → 1.0.27

package/src/DynamicTable/index.tsx

@@ -1,407 +1,4 @@
-import React, { useEffect, useState } from "react";
-import { TextAreaWithoutValidation } from "../Form/TextArea";
-import { TextFieldWithoutValidation } from "../Form/TextField";
-import { CheckboxWithoutValidation } from "../Form/Checkbox";
-
-type Props = {
-  cellInputs?: boolean;
-  intersectionTitle?: string;
-  className?: string;
-  onChange?: (data: string) => void;
-  defaultValue?: string;
-  onValidate?: (headerValue: string, rowValue: string) => boolean;
-  onRemove?: () => void;
-  margins?: {
-    marginLeft?: number;
-    marginTop?: number;
-    verticalGap?: number;
-    horizontalGap?: number;
-  };
-  forwardedRef?: React.RefObject<{
-    getTotalForRows: () => number;
-    getTotalForColumns: () => number;
-    getColumnsCount: () => number;
-    getRowsCount: () => number;
-  }>;
-};
-
-const DynamicTable = (
-  { forwardedRef, ...props }: Props,
-  ref: React.ForwardedRef<any>
-) => {
-  const [tableData, setTableData] = useState<Record<string, any>>({});
-
-  const {
-    cellInputs,
-    intersectionTitle,
-    className,
-    onChange,
-    defaultValue,
-    margins,
-  } = props;
-
-  useEffect(() => {
-    if (onChange) {
-      onChange(JSON.stringify(tableData));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tableData]);
-
-  useEffect(() => {
-    if (defaultValue) {
-      initializeTable(defaultValue);
-    } else {
-      initializeTableWithDefaults();
-    }
-  }, [defaultValue]);
-
-  const getRows = () => {
-    const rowsIds = Object.keys(tableData)
-      .filter((key) => key.startsWith("row"))
-      .map((key) => parseInt(key.slice(3)));
-    return rowsIds.sort().map((id) => ({ id }));
-  };
-
-  const getCols = () => {
-    const colsIds = Object.keys(tableData)
-      .filter((key) => key.startsWith("column"))
-      .map((key) => parseInt(key.slice(6)));
-    return colsIds.sort().map((id) => ({ id }));
-  };
-
-  const addRow = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    event.stopPropagation();
-    event.preventDefault();
-    const rows = getRows();
-    const lastId = rows[rows.length - 1].id;
-    handleInputChange(`row${lastId + 1}`, 1);
-  };
-
-  const addCol = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    event.stopPropagation();
-    event.preventDefault();
-    const cols = getCols();
-    const lastId = cols[cols.length - 1].id;
-    handleInputChange(`column${lastId + 1}`, 1);
-  };
-
-  const removeRow = (rowId: number) => {
-    const newRowData = { ...tableData };
-    for (const key in newRowData) {
-      if (key.startsWith(`row${rowId}`) || key.startsWith(`cell-${rowId}-`)) {
-        delete newRowData[key];
-      }
-    }
-    setTableData(newRowData);
-  };
-
-  const removeCol = (colId: number) => {
-    const newRowData = { ...tableData };
-    for (const key in newRowData) {
-      if (key.startsWith(`column${colId}`) || key.endsWith(`-${colId}`)) {
-        delete newRowData[key];
-      }
-    }
-    setTableData(newRowData);
-  };
-
-  const getTotalForRow = (rowId: number) => {
-    return Number(tableData[`row${rowId}`] ?? 0) ?? 0;
-  };
-
-  const getTotalForColumn = (colId: number) => {
-    return Number(tableData[`column${colId}`] ?? 0) ?? 0;
-  };
-
-  const getTotalForRows = (): number => {
-    return getRows()
-      .map((row) => getTotalForRow(row.id))
-      .reduce((a, b) => a + b, 0);
-  };
-
-  const getTotalForColumns = (): number => {
-    return getCols()
-      .map((col) => getTotalForColumn(col.id))
-      .reduce((a, b) => a + b, 0);
-  };
-
-  const getRowsCount = (): number => {
-    return getRows().length;
-  };
-
-  const getColumnsCount = (): number => {
-    return getCols().length;
-  };
-
-  const handleInputChange = (name: string, value: any) => {
-    setTableData((prevData) => ({ ...prevData, [name]: value }));
-  };
-
-  const handleValidation = (
-    cellId: string,
-    colId: number,
-    rowId: number
-  ): { stopUIChange: boolean } | void => {
-    const headerValue = tableData[`column${colId}`];
-    const rowValue = tableData[`row${rowId}`];
-
-    if (props.onValidate && props.onValidate(headerValue, rowValue)) {
-      return handleInputChange(cellId, true);
-    }
-    return { stopUIChange: true };
-  };
-
-  const handleRemoveValidation = (cellId: string) => {
-    handleInputChange(cellId, false);
-  };
-
-  const initializeTableWithDefaults = () => {
-    const initialData = { row0: 1, column0: 1 };
-    setTableData(initialData);
-  };
-
-  const initializeTable = (tableJson: string) => {
-    try {
-      const initialData = JSON.parse(tableJson);
-      setTableData(initialData);
-    } catch (error) {
-      console.error("Error al inicializar la tabla:", error);
-    }
-  };
-
-  const cellBordered = {
-    border: "1px solid #ccc",
-  } as React.CSSProperties;
-
-  const pastelGrayBackground = {
-    backgroundColor: "#B69E99",
-  } as React.CSSProperties;
-
-  const cellCenteredContent = {
-    textAlign: "center",
-    verticalAlign: "middle",
-  } as React.CSSProperties;
-
-  const renderTotalHeight = () => {
-    const sumaFilas = getRows()
-      .map((row) => getTotalForRow(row.id))
-      .reduce((a, b) => a + b, 0);
-
-    const sumTotalFilas =
-      sumaFilas +
-      (margins?.marginTop ?? 0) +
-      (getRows().length - 1) * (margins?.verticalGap ?? 0);
-
-    return (
-      <div className="ml-4 inline-block">
-        <strong>Total alto: {sumTotalFilas} </strong>
-        {margins && (
-          <>
-            (Celdas: {sumaFilas} + Márgen superior: {margins?.marginTop ?? 0} +{" "}
-            {getRows().length - 1} Brechas verticales:{" "}
-            {Math.round((getRows().length - 1) * (margins?.verticalGap ?? 0))})
-          </>
-        )}
-      </div>
-    );
-  };
-
-  const renderTotalWidth = () => {
-    const cols = getCols();
-    const sumaColumnas = cols
-      .map((col) => getTotalForColumn(col.id))
-      .reduce((a, b) => a + b, 0);
-    const sumaTotal =
-      sumaColumnas +
-      (margins?.marginLeft ?? 0) +
-      (getCols().length - 1) * (margins?.horizontalGap ?? 0);
-    return (
-      <div className="ml-4 inline-block">
-        <strong>Total ancho: {sumaTotal} </strong>
-        {margins && (
-          <>
-            (Celdas: {sumaColumnas} + Márgen izquierdo:{" "}
-            {margins?.marginLeft ?? 0} + {getCols().length - 1} Brechas
-            horizontales:{" "}
-            {Math.round((getCols().length - 1) * (margins?.horizontalGap ?? 0))}
-            )
-          </>
-        )}
-      </div>
-    );
-  };
-
-  const renderHeader = () => {
-    const cols = getCols();
-    return (
-      <tr>
-        <th
-          className="align-middle py-2 text-center"
-          style={{
-            ...cellBordered,
-            ...pastelGrayBackground,
-          }}
-        >
-          {intersectionTitle ?? ""}
-        </th>
-        {cols.map((col) => (
-          <th
-            key={col.id}
-            className="align-middle py-2 text-center"
-            style={{ ...cellBordered, ...pastelGrayBackground }}
-          >
-            <div className="inline-flex">
-              <TextFieldWithoutValidation
-                style={{ maxWidth: "45%", minWidth: "45%" }}
-                name={`column${col.id}`}
-                defaultValue={tableData[`column${col.id}`] || 1}
-                type="number"
-                onChange={(value) =>
-                  handleInputChange(`column${col.id}`, value)
-                }
-              />
-              {col.id > 0 && (
-                <button
-                  className="bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2"
-                  onClick={() => removeCol(col.id)}
-                >
-                  x
-                </button>
-              )}
-            </div>
-          </th>
-        ))}
-        <th>
-          <button
-            className="bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded"
-            onClick={addCol}
-          >
-            +
-          </button>
-        </th>
-      </tr>
-    );
-  };
-
-  const renderRow = (rowId: number) => {
-    const cols = getCols();
-    return (
-      <tr key={rowId}>
-        <td
-          className="align-middle"
-          style={{
-            ...cellBordered,
-            ...pastelGrayBackground,
-            textOverflow: "ellipsis",
-            msTextOverflow: "ellipsis",
-            maxWidth: "200px",
-          }}
-        >
-          <div className="inline-flex">
-            <TextFieldWithoutValidation
-              style={{ maxWidth: "45%", minWidth: "45%" }}
-              name={`row${rowId}`}
-              defaultValue={tableData[`row${rowId}`] || 1}
-              type="number"
-              onChange={(value) => handleInputChange(`row${rowId}`, value)}
-            />
-            {rowId > 0 && (
-              <button
-                className="bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2"
-                onClick={() => {
-                  removeRow(rowId);
-                }}
-              >
-                x
-              </button>
-            )}
-          </div>
-        </td>
-        {cols.map((col) => {
-          const cellId = `cell-${rowId}-${col.id}`;
-          const cellValidation = tableData[cellId] === true;
-          if (!cellInputs) tableData[cellId] = cellValidation;
-
-          return (
-            <td
-              key={col.id}
-              id={cellId}
-              style={{ ...cellBordered, ...cellCenteredContent }}
-            >
-              {cellInputs ? (
-                <TextAreaWithoutValidation
-                  name={cellId}
-                  defaultValue={tableData[cellId] || ""}
-                  onChange={(value) => handleInputChange(cellId, value)}
-                />
-              ) : (
-                <CheckboxWithoutValidation
-                  name={cellId}
-                  defaultValue={cellValidation}
-                  onChange={(value) => {
-                    if (value) {
-                      return handleValidation(cellId, col.id, rowId);
-                    } else {
-                      handleRemoveValidation(cellId);
-                    }
-                  }}
-                />
-              )}
-            </td>
-          );
-        })}
-        {rowId === 0 && (
-          <td rowSpan={getRows().length} style={{ maxWidth: "100px" }}>
-            {renderTotalHeight()}
-          </td>
-        )}
-      </tr>
-    );
-  };
-
-  const renderRows = () => {
-    const rows = getRows();
-    return rows.map((row) => renderRow(row.id));
-  };
-
-  // Use el "useImperativeHandle" para que el componente padre pueda acceder a los métodos deseados
-  React.useImperativeHandle(forwardedRef, () => ({
-    getTotalForRows,
-    getTotalForColumns,
-    getColumnsCount,
-    getRowsCount,
-  }));
-
-  return (
-    <div className={`${className}`}>
-      <table className="border-collapse">
-        <thead>{renderHeader()}</thead>
-        <tbody>{renderRows()}</tbody>
-        <tfoot>
-          <tr>
-            <td>
-              <button
-                className="bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded"
-                onClick={addRow}
-              >
-                +
-              </button>
-            </td>
-            <td
-              colSpan={getCols().length + 1}
-              className="text-left align-middle"
-              style={{
-                textOverflow: "ellipsis",
-                msTextOverflow: "ellipsis",
-              }}
-            >
-              {renderTotalWidth()}
-            </td>
-          </tr>
-        </tfoot>
-      </table>
-    </div>
-  );
-};
-
-export default React.forwardRef(DynamicTable);
+export * from "./BasicPrintDynamicTable.js";
+export * from "./DynamicPrintTable.js";
+export * from "./DynamicTable.js";
+export * from "./GenericDynamicTable.js";

package/src/Footer/index.tsx

@@ -1 +1 @@
-export * from "./Footer";
+export * from "./Footer.js";

package/src/Form/FieldContainer/index.ts

@@ -1,3 +1,3 @@
-export * from "./DoubleFieldContainer";
-export * from "./QuadrupleFieldContainer";
-export * from "./TripleFieldContainer";
+export * from "./DoubleFieldContainer.js";
+export * from "./QuadrupleFieldContainer.js";
+export * from "./TripleFieldContainer.js";

package/src/Form/index.ts

@@ -1,13 +1,13 @@
-export * from "./Checkbox";
-export * from "./Checklist";
-export * from "./DatePicker";
-export * from "./DynamicBaculoForm";
-export * from "./FieldContainer";
-export * from "./FileUpload";
-export * from "./FormButtons";
-export * from "./FormLayout";
-export * from "./SelectField";
-export * from "./TextArea";
-export * from "./TextField";
-export * from "./TimePicker";
-export * from "./YesNo";
+export * from "./Checkbox/index.js";
+export * from "./Checklist/index.js";
+export * from "./DatePicker/index.js";
+export * from "./DynamicBaculoForm/index.js";
+export * from "./FieldContainer/index.js";
+export * from "./FileUpload/index.js";
+export * from "./FormButtons/index.js";
+export * from "./FormLayout/index.js";
+export * from "./SelectField/index.js";
+export * from "./TextArea/index.js";
+export * from "./TextField/index.js";
+export * from "./TimePicker/index.js";
+export * from "./YesNo/index.js";

package/src/Labels/index.tsx

@@ -1 +1 @@
-export * from "./InfoLabel";
+export * from "./InfoLabel/index.js";

package/src/Layouts/index.ts

@@ -1 +1 @@
-export * from "./homeLayout";
+export * from "./homeLayout/index.js";

package/src/LineSeparator/index.tsx

@@ -1 +1 @@
-export * from "./LineSeparator";
+export * from "./LineSeparator.js";

package/src/Modal/index.tsx

@@ -1 +1 @@
-export * from "./Modal";
+export * from "./Modal.js";

package/src/NavBar/index.tsx

@@ -1,5 +1,5 @@
-export * from "./NavBar";
+export * from "./NavBar.js";
 
-export * from "./NavBar.types";
+export * from "./NavBar.types.js";
 
-export * from "./NavBar.utils";
+export * from "./NavBar.utils.js";

package/src/ProgressBar/index.tsx

@@ -1,2 +1,2 @@
-export * from "./ProgressBar";
-export * from "./ProgressCircle";
+export * from "./ProgressBar.js";
+export * from "./ProgressCircle.js";

package/src/Skeletons/index.ts

@@ -1 +1 @@
-export * from "./LoadingInputSkeleton";
+export * from "./LoadingInputSkeleton.js";

package/src/Tab/index.ts

@@ -1 +1 @@
-export * from "./Tab";
+export * from "./Tab.js";

package/src/Table/index.tsx

@@ -1 +1 @@
-export * from "./ZauruTable";
+export * from "./ZauruTable.js";

package/src/TaskList/index.ts

@@ -1 +1 @@
-export * from "./TaskList";
+export * from "./TaskList.js";

package/src/Titles/index.ts

@@ -1,5 +1,5 @@
-export * from "./LabelArray";
-export * from "./TableColumnTitle";
-export * from "./TitleH1";
-export * from "./TitleH2";
-export * from "./TitleH3";
+export * from "./LabelArray.js";
+export * from "./TableColumnTitle.js";
+export * from "./TitleH1.js";
+export * from "./TitleH2.js";
+export * from "./TitleH3.js";

package/src/Tooltip/index.ts

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

package/src/WithTooltip/index.tsx

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

package/src/Wizards/index.ts

@@ -1 +1 @@
-export * from "./StepWizard";
+export * from "./StepWizard.js";

package/src/Zendesk/index.ts

@@ -1,2 +1,2 @@
-export * from "./Chat";
-export * from "./zendesk.config";
+export * from "./Chat.js";
+export * from "./zendesk.config.js";

package/src/index.ts

@@ -1,23 +1,24 @@
-export * from "./Alerts";
-export * from "./BlockUI";
-export * from "./Buttons";
-export * from "./Card";
-export * from "./ConnectionState";
-export * from "./Chat";
-export * from "./Containers";
-export * from "./Footer";
-export * from "./Form";
-export * from "./Labels";
-export * from "./Layouts";
-export * from "./LineSeparator";
-export * from "./Modal";
-export * from "./NavBar";
-export * from "./Skeletons";
-export * from "./Tab";
-export * from "./Table";
-export * from "./TaskList";
-export * from "./Titles";
-export * from "./Tooltip";
-export * from "./WithTooltip";
-export * from "./Wizards";
-export * from "./Zendesk";
+export * from "./Alerts/index.js";
+export * from "./BlockUI/index.js";
+export * from "./Buttons/index.js";
+export * from "./Card/index.js";
+export * from "./ConnectionState/index.js";
+export * from "./Chat/index.js";
+export * from "./Containers/index.js";
+export * from "./DynamicTable/index.js";
+export * from "./Footer/index.js";
+export * from "./Form/index.js";
+export * from "./Labels/index.js";
+export * from "./Layouts/index.js";
+export * from "./LineSeparator/index.js";
+export * from "./Modal/index.js";
+export * from "./NavBar/index.js";
+export * from "./Skeletons/index.js";
+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";