design react kit
v5.5.0
Lea esto en otros idiomas: ¿inglés ??.
Design React Kit es un conjunto de componentes React que implementa Bootstrap Italia y los estilos en el diseño del kit de interfaz de usuario. Para navegar en la biblioteca y ver los componentes, se utilizó el libro de cuentos. La versión pública del libro de cuentos está disponible aquí para el último lanzamiento estable publicado. El kit de reacción de juegos está disponible para jugar con la biblioteca.
Para usar React Design como adicción a una aplicación, puede instalarlo desde NPM. Sugerimos usar create vite para crear una nueva aplicación web React, de la siguiente manera:
yarn create vite nome-app --template react
cd nome-app
yarn add design-react-kit --saveMás información para crear una nueva aplicación con React:
design-react-kit no incluye CSS y archivos de fuentes, y por lo tanto es necesario instalarlos por separado:
yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save En este punto, simplemente importe explícitamente a la aplicación CSS y FONT si usa create vite dentro del archivo ./src/App.js :
import React from 'react' ;
import './App.css' ;
import { Alert } from 'design-react-kit' ;
import 'bootstrap-italia/dist/css/bootstrap-italia.min.css' ;
import 'typeface-titillium-web' ;
import 'typeface-roboto-mono' ;
import 'typeface-lora' ;
function App ( ) {
return < Alert > This is an Alert </ Alert > ;
}
export default App ;Puede consultar esta plantilla web con Stackblitz: plantillas web
El tema Bootstrap Italia utiliza un conjunto específico de fuentes de tipos de letra: titillium-web , roboto-mono y lora . La carga de estas fuentes se deja al navegador, pero, si lo desea, se puede controlar a través del componente FontLoader apropiado. Simplemente declare el componente FontLoader en la parte superior de la aplicación React para permitir la carga.
Alternativamente, es necesario administrar la carga de fuentes manualmente a través del paquete webfontloader :
const WebFont = require ( 'webfontloader' ) ;
WebFont . load ( {
custom : {
families : [ 'Titillium Web:300,400,600,700:latin-ext' , 'Lora:400,700:latin-ext' , 'Roboto Mono:400,700:latin-ext' ]
}
} ) ; La biblioteca no incluye react y react-dom , evitando el enfrentamiento de versiones y un aumento inútil en el tamaño del paquete. Por esta razón, para el desarrollo local será necesario instalar adicciones manualmente.
El comando a realizar es
yarn install --peerso alternativamente manualmente
yarn install react react-dom? Es posible contribuir a la biblioteca de varias maneras:
¿Le gustaría ayudar en el kit de reacción de diseño? ¡Estás en el lugar correcto!
Si aún no lo ha hecho, comience pasando unos minutos para profundizar sus conocimientos sobre las pautas de diseño para los servicios web de PA, y consulte las indicaciones sobre cómo contribuir al kit React React.
Los requisitos mínimos de su entorno local deben ser:
Clonar el repositorio y realizar yarn para instalar adicciones. Luego realizar
yarn storybook:servePara iniciar el servidor de desarrollo.
El libro de cuentos estará disponible en el http: // localhost: 9001/
Storybook se ha enriquecido con algunos addons que lo hacen hablar más.
Esta sección guiará la creación de nuevos componentes en el repositorio. Todos los componentes residen en la carpeta src : cada componente tiene una carpeta con todo lo que es necesario para que funcione. En su lugar, las historias Storybook están bajo stories . Las pruebas unitarias residen en la carpeta test . Por ejemplo, el componente Button está presente debajo de la ruta src/Button y su estructura es la siguiente:
├── src
│ └── Button
│ └── Button.tsx
├── stories
│ ├── Components
│ │ └── Button.stories.tsx
│ └── Documentation
│ └── Button.mdx
└── test
└── Button.test.tsx
Algunas reglas básicas para estructurar los componentes:
.stories.tsx solo deben contener lo que está relacionado con el componente en sí..mdx solo deben contener documentación relacionada con el componente en sí.test.tsx Los archivos deben contener solo pruebas relacionadas con el componente en sí.Una vez que se haya creado un nuevo componente, con su historia, el libro de cuentos inicial podrá verificar que todo funcione como debería.
Documentación:
El sistema de pruebas proporciona un control de las historias presentes, a través de una técnica llamada prueba de "instantánea": el contenido de la historia del libro de cuentos se copiará en un archivo especial y se conservará para notificar cualquier cambio en el futuro. Esto significa que la adición de nuevas historias podría estar en una falla de la tarea de "prueba" en un PR. Si se ha agregado una nueva historia o una ya presente, será necesario actualizar el archivo de instantánea de la siguiente manera:
yarn test -uEn este punto, cree una nueva comisión y actualice el PR con el archivo de instantánea actualizado. Verifique que los cambios realizados se corrigan antes de actualizar el PR.
Para completar la biblioteca y generar archivos en la carpeta dist , simplemente inicie el comando dedicado:
yarn build El kit sigue las indicaciones que se muestran en las pautas de diseño para los servicios web de la administración pública, Sección 6.3.1.2.1. Soporte del navegador mediante el uso del paquete browserslist-config-design-italia .
La biblioteca fue llevada a TypeScript y los tipos se exportan con ella.
¡Un agradecimiento especial a aquellos que hicieron posible el desarrollo de esta biblioteca!
 |  |  |  |
|---|---|---|---|
| Sabatino Galasso | Marco Liberati | Matteo Avesani | Federico Turbino |
y a la contribución de OpenCity Labs
Todos los contribuyentes ( hechos con contributioners-IMG )
