sp-front-design-lib v1.1.2

sp-front-design-lib

sp-front-design-lib es una biblioteca de diseño y estilos frontend altamente modular y reutilizable, creada para facilitar el desarrollo y mejorar la consistencia visual de aplicaciones web. Esta biblioteca contiene una amplia gama de componentes reutilizables, estilos predefinidos y variables configurables que pueden ser fácilmente integrados en cualquier proyecto.

Estructura de carpetas ⚙️

root
|-- export
|   |-- components
|   |   |-- Button
|   |   |   |-- Button.tsx
|   |   |   |-- Button.css
|   |   |   |-- index.ts
|   |   |-- Select
|   |   |   |-- Select.tsx
|   |   |   |-- Select.css
|   |   |-- index.ts
|   |-- styles
|   |   |-- index.css
|   |--index.ts
|-- test
|   |-- components
|   |   |-- Button
|   |   |   |-- Button.test.js
|   |   |-- Select
|   |   |   |-- Select.test.js

Organización de Componentes

Dentro de la carpeta export, encontraremos otra carpeta llamada components, que es donde almacenaremos todos los componentes que conforman nuestro diseño. La idea detrás de esta estructura es que cada componente tenga su propio directorio, lo que hace que el código sea más modular y mantenible.

Por ejemplo, si se cre un nuevo componente llamado Button, debe seguir estos pasos:

• Crear una nueva carpeta dentro de export/components con el nombre Button. Dentro de la carpeta Button, se deben incluir los siguientes archivos:
• Button.tsx: Aquí se implementaría la lógica del componente en formato TSX.
• Button.css: Contendrá los estilos específicos del componente Button.
• index.ts: En este archivo, se exportará el componente para que otros módulos puedan importarlo fácilmente.

Dentro de la carpeta test encontraremos TODOS los test de los componentes/hooks/funciones etc de toda nuestra librería. Se debe MANTENER LA MISMA ESTRUCTURA DE CARPETAS QUE SE ESTRUCTURÓ EN EXPORT.

Estilos Globales

Los estilos globales, como variables CSS y estilos que se aplican en toda la aplicación, se encuentran en la carpeta styles. Aquí, se puede tener un archivo index.css que centralice todos los estilos globales utilizados en el proyecto, variables CSS etc.

Estilos globales y variables CSS ✅

:root {
  --font-family: 'Open Sans', sans-serif;
  /* Primary Colors */
  --color-primary-white: #ffffff;
  --color-primary-gray-5: #f5f5f5;
  --color-primary-gray-4: #ebebeb;
  --color-primary-gray-3: #d0d0d0;
  --color-primary-gray-2: #6a6a6a;
  --color-primary-gray-1: #222222;
  --color-primary-black: #000000;
  --color-primary-light-blue: #d4f7ff;
  --color-primary-institutional-blue: #0097a9;
  --color-primary-dark-blue: #006274;

  /* Secondary Colors */
  --color-secondary-light-red: #ffd4d4;
  --color-secondary-institutional-red: #da291c;
  --color-secondary-base-red: #b50000;
  --color-secondary-dark-red: #8b0000;

  /* State Colors */
  --color-state-light-green: #cee6c6;
  --color-state-base-green: #0b7329;

  --color-state-light-orange: #fffce0;
  --color-state-base-orange: #fab400;
}

/* Typography Classes */
.title-1 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 18px;
  line-height: 120%;
  letter-spacing: 0;
}

.body-1 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: 0;
}

.body-2 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: 0;
}

.body-2-bold {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: 0;
}

.body-3 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 12px;
  line-height: 120%;
  letter-spacing: 0;
}

.acronyms {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 24px;
  line-height: 120%;
  letter-spacing: 0;
}

Componentes ✅

Table

Props Header

Interfaces

interface Header<T> {
    value: string;
    label: keyof T | ActionRow;
    tooltip?: (valueRow: string) => React.ReactNode;
    renderComponent?: (params: Render<T>) => JSX.Element;
    valueGetter?: (row: T) => string | React.ReactNode | number;
    ariaGetter?: (row: T) => string;
}

export interface Header<T> {
  value: string;
  label: keyof T | ActionRow;
  tooltip?: (valueRow: string) => React.ReactNode;
  renderComponent?: (params: Render<T>) => JSX.Element;
  valueGetter?: (row: T) => string | React.ReactNode | number;
  ariaGetter?: (row: T) => string;
}

export interface Render<T> {
  row: T;
  rows: T[];
  rowIndex: number;
  id: string;
}

export interface TableProps<T> {
  headers: Header<T>[];
  data: T[];
  bordered?: boolean;
  itemsPerPage?: number;
  showPagination?: boolean;
  alternateRowColor?: boolean;
  classHeaderGrid?: CSSProperties;
  classRowGrid?: CSSProperties;
  heigth?: HeightValue;
  footer?: React.ReactElement;
  filters?: Filter<T>[];
  classCell?: CSSProperties;
  selectableRows?: boolean;
  clickeableRow?: (row: T) => void;
  onSelectedRowsChange?: (rows: RowOnSelected<T>) => void;
  isLoading?: boolean;
  triggerData?: boolean;
  generateScroll?: boolean;
  headerFixed?: boolean;
  componentLoading?: React.ReactElement;
  componentWithoutData?: React.ReactElement;
  hoveredRow?: boolean;
}

export interface RowOnSelected<T> {
  selectedRows: T[];
}

export interface PaginationResult<T> {
  currentItems: T[];
  totalPages: number;
  handlePageChange: (pageNumber: number) => void;
  currentPage: number;
  canGoPrevious: boolean;
  canGoNext: boolean;
  setCurrentItemsPerPage: Dispatch<SetStateAction<number>>;
  currentItemsPerPage: number;
  setCurrentPage: Dispatch<SetStateAction<number>>;
}

type HeightValue = ${number}px | ${number}% | ${number}vh | ${number}rem ${number}em` | "auto";

type Filter<T> = {
  column: keyof T;
  filter: (...args: any[] | any) => any;
};

Código de ejemplo renderComponent, valueGetter, ariaGetter, Selectable, Tooltip

  const data: TableData[] = [
      {
        NamePropertyDataOne: "value NamePropertyDataOne",
        NamePropertyDataTwo: "value NamePropertyDataTwo",
      },
      {
        NamePropertyDataOne: "value NamePropertyDataOne",
        NamePropertyDataTwo: "value NamePropertyDataTwo",
      },
      ...
 ]

  const headers: Header<TableData>[] = [
    {
      value: "ValueColumnOne",
      label: "NamePropertyDataOne"
    },
    {
      value: "ValueColumnTwo",
      label: "NamePropertyDataTwo",
       valueGetter: (row) => {
        return row.NamePropertyData === "" ? "-" : row.NamePropertyData;
      }
    },
    {
      value: "Action",
      label: "Action",
      renderComponent: (params) => {
        return (
          <Component />
        );
      },
      valueGetter: (row) => {
        return (
          <Badge
            variant="info"
            text="Title badge"
          />
        );
      },
      ariaGetter: (row) => {
        return `Value aria-label custom`;
      },
      tooltip: (value) => {
        return (
          <Tooltip
            position="right"
            content="Tooltip example"
          >
            <p>{value}</p>
          </Tooltip>
        );
      }
    },
     {
      value: "Selectable",
      label: "Selectable"
    }
  ];

  <Table<TableData>
    bordered
    heigth={"400px"}
    headers={headers}
    data={data}
    ....
  />

Código de ejemplo Filters

  const sortByProperty = <T, K extends keyof T>(
      data: T[],
      property: K
    ) => {
      const sortedData = [...data].sort((a, b) => {
        const valueA = (a[property] as string).toLowerCase();
        const valueB = (b[property] as string).toLowerCase();

        if (valueA < valueB) {
          return -1;
        } else if (valueA > valueB) {
          return 1;
        } else {
          return 0;
        }
      });
      return sortedData;
    };

    const filters: Filter<TableData>[] = [
      {
        column: "NamePropertyDataOne",
        filter: sortByProperty
      },
    ];

    <Table<TableData>
        bordered
        heigth={"400px"}
        headers={headers}
        data={data}
        filters={filters}
        ....
    />

Aplicará el filtro **sortByProperty** a la columna **NamePropertyDataOne**, siempre colocando el mismo nombre que contiene la propiedad label del Header.

Código de ejemplo para resetar valores por defecto de la Tabla

    interface TableRef {
      resetTable: () => void | null;
    }

    const refTable = useRef<TableRef>(null);

    const handleOnFocusResetTable = (event: React.FocusEvent<HTMLInputElement>) =>{
        if (refTable.current && refTable.current.resetTable) {
          refTable.current.resetTable();
        }
       ...
       ...
    };
    <div>
        <input
            onFocus={handleOnFocusResetTable}
            type="text"
            value={""}
      />
        <Table<TableData>
            ref={refTable}
            bordered
            heigth={"400px"}
            headers={headers}
            data={data}
        ....
       />
    </div>

Alert

Código

interface AlertHandle {
  addAlert: (message: string, description?: string) => void;
}

function Component() {
    const refAlert = useRef<AlertHandle>({ addAlert: () => {} });

    return (
       <div>
           <Alert ref={refAlert} position="top-left" variant="success" />
           <button onClick={handleAddAlert} >
                Trigger alert
           </button>
       </div>
    )
}

Drawer

Código

function Component() {
    const [modalOpenRight, setModalOpenRight] = useState(false);
    const handleOpenModalRight = () => {
         setModalOpenRight(true);
    };

    return (
       <div>
           <button onClick={handleOpenModalRight}>
             Open Modal Right
           </button>
           <Drawer
              id="drawer"
              title="Title drawer"
              divide
              position="right"
              isOpen={modalOpenRight}
              width={700}
              onClose={handleCloseModalRight}
            >
       </div>
    )
}

*El id drawer debe estar colocado en el árbol HTML:

 <body>
        <div id="root"></div>
        <div id="drawer"></div>
      </body>

Tab

El componente Tab se utilizó el Patrón de composición para construirlo. En el cual está compuesto por Tab, Tab.List, Tab.Item, Tab.Panel. Veremos las Props que recibe cada uno de estos.

Tab.List

Tab.Item

Tab.Panel

Código

function Component(){
    const [valueTab, setValueTab] = useState<string>('Tab one');
    const handleClick = (label: string) => {
        setValueTab(label);
    };

    return(
      <Tab st={{padding:"20px"}} value={valueTab}>
        <Tab.List handleClick={handleClick} aria-label="list tab example">
          <Tab.Item
            label="Tab one"
            aria-controls="panel-1"
            aria-labelledby="panel-1"
          />
          <Tab.Item
            label="Tab two"
            aria-controls="panel-2"
            aria-labelledby="panel-2"
          />
        </Tab.List>
        <Tab.Panel value="Tab one" id="panel-1">
          <ItemOne />
        </Tab.Panel>
        <Tab.Panel value="Tab two" id="panel-2">
          <ItemTwo />
        </Tab.Panel>
      </Tab>
    )
}

Select

Interfaces

interface SelectOption {
  value: string;
  label: string;
}

type onChangeProps = {
  value: string;
  name: string;
};

type onErrorChangeProps = {
  error: boolean;
  name: string;
};

Código

function Component() {
     const handleSelectChange = useCallback(
        ({ value, name }: { value: string; name: string }) => {
          setSelectedValue((prevState) => ({
            ...prevState,
            [name]: value,
          }));
        },
        []
    );
    const [selectedValue, setSelectedValue] = useState({
        selectValue: '',
        ...
    });

    return (
        <Select
            options={options}
            value={selectedValue.selectValue}
            onChange={handleSelectChange}
            label="Label"
            name="select"
            onErrorChange={(error) =>
              setError((prevState) => ({ ...prevState, [error.name]: error.error }))
            }
            messageRequiredField="Campo requerido*"
        />
    )
}

Tooltip

Código

function Component() {
    return (
        <Tooltip
          position="top"
          content="Descripcion  Tooltip top"
          classNames={{
            fontSize: '12px',
          }}
        >
          <p>
            Tooltip top
          </p>
        </Tooltip>
    )
}

Button

Interfaces

type Icon = {
  style?: CSSProperties;
  component: ReactNode | string;
}

Código

function Component() {
    return (
        <div>
            <Button
                classes={{
                width: '190px',
                }}
                text="Button secondary"
                variant="secondary"
                onClick={(event) => console.log(event)}
                icon={{
                    component: <Icon path={mdiAccount} size={0.8} />,
                }}
            />
            <Button
                classes={{ fontSize: '12px', marginLeft: '10px' }}
                variant="primary"
                singleIcon
                onClick={(event) => console.log(event)}
                icon={{
                    component: <Icon path={mdiAccount} size={0.8} />,
                }}
            />
        </div>
    )
}

CardClaro

ContainerEmpty

Badge

Switch

Spinner