JEX Sistema de diseño: librería de componentes

Esta librería de componentes React está basada en el Sistema de Diseño de la Junta de Extremadura. Provee una serie de componentes para ayudar a los desarrolladores a implementar de forma sencilla pantallas adaptadas a los diseños definidos.

Todos los componentes desarrollados están documentados en nuestro Storybook.

Puedes consultar el sistema de diseño completo en nuestro Figma y en el portal web.

¿Cómo utilizar la librería?

La librería permite dos usos diferenciados:

• Para desarrollos front-end con React, donde podremos usar los componentes con toda su funcionalidad de forma directa y sencilla instalando la librería como dependencia.

• Para desarrollos web con otras tecnologías basadas en HTML y CSS. Para ello podremos descargar los ficheros de estilo e importarlos en nuestra web, pudiendo además usar como referencia los snippets de código publicados en la sección de documentación del portal.

Librería de componentes React

Para poder trabajar con la librería basta con instalarla como dependencia en nuestro proyecto React. npm i jex-ds

Hay que tener en cuenta las siguientes dependencias que deberán estar añadidas en nuestro proyecto en caso de no tenerlas:

• "react": "18.2.0"
• "react-dom": ^18.2.0"
• "sass": "^1.75.0"

Ya podemos importar los componentes que deseamos usar y trabajar con ellos. Ejemplo: import { Button } from "jex-ds";. También es posible importar los diferentes modelos para asociar a las propiedades de los componentes: import { Button, ButtonProps } from "jex-ds";.

Uso de los estilos de la librería

Si queremos hacer uso solo de los estilos de la librería para trabajar con ellos sobre nuestros propios componentes o usarlo en aplicaciones que no utilicen React, tenemos la posibilidad de importar solo los estilos o descargar y añadir a nuestro proyecto los ficheros de estilo. Para ello disponemos de las hojas Sass con el estilo base y también de un CSS compilado con el estilo de todos los componentes para usar directamente en el HTML.

Puedes consultar el detalle en la documentación de Storybook.