Migración V2 a V3¶

En la nueva versión de la librería, la manera de consumir y utilización de los componentes sigue siendo el mismo.

Breaking Changes importantes¶

Los cambios importantes a tener en cuenta, y que requerrirán cambios en la implementación, se listan a continuación:

Iconos¶

La librería ya no cuenta con los iconos y las dependencias relacionadas a FontAwesome como peerDependencies internas, esto hace que la instalación del lado de la implementación de esas mismas dependencias ya no sea obligatoria (como lo era anteriormente) para la utilización de la librería, como por ejemplo:

Además, se deberán modificar todos aquellos componentes de la librería que utilicen iconos, como es el caso del componente Alert que dejamos de ejemplo a continuación:

StyleSystem v2StyleSystem v3

    <Alert
        color="success"
        iconProps={{ icon: faCheckCircle }}
        open={open}
        variant="outlined"
        onCloseProp={() => {
            dispatch(hide());
        }}
    >
        {message}
    </Alert>

    import { Alert, CheckCircle } from "@architecture-it/stylesystem";

    <Alert
        color="success"
        icon={<CheckCircle />}
        open={open}
        variant="outlined"
        onCloseProp={() => {
            dispatch(hide());
        }}
    >
        {message}
    </Alert>

Se ha agregado a la librería un amplio listado de componentes de iconos que se pueden exportar y consumir tal y como se puede apreciar en el ejemplo anterior. En caso de que el icono que se necesite utilizar no se encuentre en la librería, se podría utilizar el componente de FontAwesome como tradicionalmente se suele hacer y como ejemplificamos a continuación:

Note

Se recomienda utilizar, siempre que sea posible, iconos de FontAwesome gratuitos y sólo utilizar iconos PRO en el caso de un requerimiento estrictamente necesario por cuestiones de diseño.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faXmark } from "@fortawesome/free-solid-svg-icons";

<Button
    className={styles.buttonDelete}
    size="small"
    startIcon={<FontAwesomeIcon icon={faXmark} />}
    text="Eliminar filtros"
    variant="text"
    onClick={handleReset}
/>

Note

En el caso de consumir componentes provenientes de otras librerías internas como pueden ser @architecture-it/date-picker o @architecture-it/azure-b2c, también puede llegar a ser necesario modificar su implementación con respecto a la utilización de los iconos, de la misma forma que se mostró anteriormente.

Unit Testing¶

Con la actualización del StyleSystem, y al utilizar la función renderWithProviders para renderizar los componentes en los tests pueden llegar a ver el siguiente warning en la consola cuando realicen el análisis de Jest:

StyleSystem Warning

En el caso que eso suceda, deberán agregar el siguiente código en el Wrapper que contiene la función:

import getTheme from "@architecture-it/stylesystem/Theme";

// ...

const colors = {
  primary: "#d71920",
  colorText: "#616161",
  error: "#d71920",
  secondary: "#b6040b",
};

// ...
return function Wrapper({ children }: PropsWithChildren<{}>) {
    return (
      <BrowserRouter basename={basename}>
        /* Se agrega la propiedad theme al provider */
        <StyleSystemProvider theme={getTheme(false, colors)}>
          <Provider store={store}>{children}</Provider>
        </StyleSystemProvider>
      </BrowserRouter>
    );
};

// ...