contentoh-components-library 21.5.2 → 21.5.3

package/src/components/organisms/Table/Table.stories.js

@@ -1,609 +0,0 @@
-import Table from "./index";
-
-export default {
-  title: "Components/organisms/Table",
-  component: Table,
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          width: "1000px",
-          height: "50px",
-          margin: "1em",
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-};
-const Template = (args) => <Table {...args} />;
-
-export const TableDefault = Template.bind({});
-
-TableDefault.args = {
-  columns: [
-    {
-      Header: "ID",
-      accessor: "id",
-      width: "100px",
-      fixedToLeft: 0,
-    },
-    {
-      Header: "Nombre",
-      accessor: "name",
-      width: "100px",
-      fixedToLeft: 100,
-    },
-    {
-      Header: "Edad",
-      accessor: "age",
-      width: "100px",
-      fixedToLeft: 200,
-    },
-    {
-      Header: "Correo Electrónico",
-      accessor: "email",
-      width: "500px",
-    },
-    {
-      Header: "valor1",
-      accessor: "valor1",
-      width: "100px",
-    },
-    {
-      Header: "valor2",
-      accessor: "valor2",
-      width: "100px",
-    },
-    {
-      Header: "valor3",
-      accessor: "valor3",
-      width: "100px",
-    },
-  ],
-  data: [
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    // Puedes agregar más filas según sea necesario
-  ],
-  withCheckbox: true,
-};

package/src/components/organisms/Table/index.js

@@ -1,84 +0,0 @@
-import React, { useState } from "react";
-import { CheckBox } from "../../atoms/CheckBox";
-import { Container, TH, TD } from "./styles";
-import { Tooltip } from "../../atoms/Tooltip";
-
-export const Table = ({ columns, data, withCheckbox, withTooltip=false }) => {
-  const [rowsChecked, setRowsChecked] = useState([]);
-
-  function handlerSelectAll(evt) {
-    if (evt.target.checked) {
-      setRowsChecked(data.map(({ id }) => id));
-    } else {
-      setRowsChecked([]);
-    }
-  }
-
-  function handlerSelect(evt, id) {
-    if (evt.target.checked) {
-      setRowsChecked((prev) => (prev.includes(id) ? prev : [...prev, id]));
-    } else {
-      setRowsChecked((prev) => prev.filter((f) => f !== id));
-    }
-  }
-
-  return (
-    <Container withCheckbox>
-      <table className="custom-table">
-        <thead>
-          <tr>
-            {withCheckbox ? (
-              <CheckBox
-                id={-1}
-                className="checkbox_fixed"
-                checked={rowsChecked.length === data.length}
-                onChange={handlerSelectAll}
-              />
-            ) : null}
-            {columns.map((column, i) => (
-              <TH
-                key={`${column.accessor}${i}`}
-                withCheckbox={withCheckbox}
-                {...column}
-              >
-              {column.description && withTooltip ? (
-                  <Tooltip
-                    componentTooltip={<span>{column.description}</span>}
-                    position="topCenter"
-                  >
-                    <span>{column.Header}</span>
-                  </Tooltip>
-                ) : (
-                  <span>{column.Header}</span>
-                )}
-              </TH>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {data.map((row) => (
-            <tr key={row.id}>
-              {withCheckbox ? (
-                <CheckBox
-                  id={row.id}
-                  className="checkbox_fixed"
-                  checked={rowsChecked.includes(row.id)}
-                  onChange={(e) => handlerSelect(e, row.id)}
-                />
-              ) : null}
-              {columns.map((column, i) => (
-                <TD
-                  key={`${column.accessor}${i}`}
-                  withCheckbox={withCheckbox}
-                  {...column}
-                >
-                  {row[column.accessor]}
-                </TD>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </Container>
-  );
-};