architecture-it/stylesystem ¶

Acerca¶

Set de componentes, hooks y utilidades para aplicaciones frontend en React.

Instalación¶

El paquete necesita dependencias que no incluye por un tema de peso final, actualizacion y mantenimiento.

Tiene dependencias directas de Material-UI y Font Awesome.

Warning

Debes autenticarte al registro de fontawesome. El paso está agregado al front-cli front-cli npm-config. Ver más en la docuimentación del front-cli

Por lo que se tiene que instalar con las respectivas dependencias:

pnpm i @architecture-it/stylesystem  @fortawesome/free-brands-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/react-fontawesome @mui/material @emotion/react @emotion/styled

Uso¶

Para que permita recibir estilos, tema y variables de css se debe configurar el punto principal (app.tsx en react, _app.tsx en nextjs).

import { StyleSystemProvider } from "@architecture-it/stylesystem";

function App() {
  return (
    <StyleSystemProvider>
      {/** Resto de la aplicación */}
    </StyleSystemProvider>
  );
}

export default App;

Autocomplete variables de CSS¶

Se necesita la versión >= 2.7.0 del StyleSystem.

Se puede tener autocompletado de las variables de CSS disponibles en el stylesystem que se recomienda utilizar en todo momento.

Para habilitarlo necesitamos instalar la extensión con el siguiente id: vunguyentuan.vscode-css-variables

css-variables-extension

y luego configurar lo siguiente en el settings.json

{
  //resto de tu código,
  "cssVariables.lookupFiles": [
    "**/*.css",
    "**/*.scss",
    "**/*.sass",
    "**/*.less",
    "./node_modules/@architecture-it/stylesystem/vars.scss"
  ]
}

Playground¶

Para poder ver que componentes tenemos y sus capacidades tenemos un storybook en la intra (debes estar en la vpn para acceder) con todos los componentes dónde puedes probar, testearlos y ver como funcionan.

Storybook: Link al playground

storybook-gif

Mas información¶

Para saber más acerca, de convenciones, paleta de colores, iconos e ilustraciones, porfavor ir a documentacion

architecture-it/stylesystem¶