design react kit
v5.5.0
Lisez ceci dans d'autres langues: anglais ??.
Design React Kit est un ensemble de composants React qui implémente Bootstrap Italia et les styles sur la conception du kit d'interface utilisateur. Pour naviguer dans la bibliothèque et voir les composants, le livre de contes a été utilisé. La version publique du livre de contes est disponible ici pour la dernière version stable publiée. Le kit React Playground est disponible pour jouer avec la bibliothèque.
Pour utiliser React Design comme dépendance à une application, vous pouvez l'installer à partir de NPM. Nous suggérons d'utiliser create vite pour créer une nouvelle réaction WebApp, comme suit:
yarn create vite nome-app --template react
cd nome-app
yarn add design-react-kit --savePlus d'informations pour créer une nouvelle application avec React:
design-react-kit n'inclut pas les fichiers CSS et de police, et il est donc nécessaire de les installer séparément:
yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save À ce stade, importez simplement explicitement l'application CSS et Font si vous avez utilisé create vite à l'intérieur du fichier ./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 ;Vous pouvez consulter ce modèle Web avec Stackblitz: Modèles Web
Le thème Bootstrap Italia utilise un ensemble spécifique de police de caractères: titillium-web , roboto-mono et lora . Le chargement de ces polices est laissé au navigateur mais, si vous le souhaitez, il peut être contrôlé via le composant FontLoader approprié. Déclarez simplement le composant FontLoader en haut de l'application React pour permettre le chargement.
Alternativement, il est nécessaire de gérer le chargement des polices manuellement via le package 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 bibliothèque n'inclut pas react et react-dom , évitant les affrontements des versions et l'augmentation inutile de la taille du bundle. Pour cette raison, pour le développement local, il sera nécessaire d'installer manuellement les dépendances.
La commande à effectuer est
yarn install --peersou alternativement manuellement
yarn install react react-dom? Il est possible de contribuer à la bibliothèque de diverses manières:
Souhaitez-vous aider sur le kit Reague de conception? Vous êtes au bon endroit!
Si vous ne l'avez pas déjà fait, commencez par passer quelques minutes pour approfondir vos connaissances sur les directives de conception pour les services Web de l'AP, et reportez-vous aux indications sur la façon de contribuer à la conception du kit React.
Les exigences minimales de votre environnement local doivent être:
Clone le référentiel et effectuer yarn pour installer des dépendances. Puis jouer
yarn storybook:servePour démarrer le serveur de développement.
Le livre de contes sera ensuite disponible sur le http: // localhost: 9001 /
Le livre de contes a été enrichi de certains addons qui en font plus parler.
Cette section guidera la création de nouveaux composants dans le référentiel. Tous les composants résident dans le dossier src : chaque composant a un dossier avec tout ce qui est nécessaire pour le faire fonctionner. Les histoires de Storybook sont plutôt sous stories . Les tests unitaires résident dans le dossier test . Par exemple, le composant Button est présent sous la route src/Button et sa structure est la suivante:
├── src
│ └── Button
│ └── Button.tsx
├── stories
│ ├── Components
│ │ └── Button.stories.tsx
│ └── Documentation
│ └── Button.mdx
└── test
└── Button.test.tsx
Quelques règles de base pour structurer les composants:
.stories.tsx ne doivent contenir que ce qui est lié au composant lui-même..mdx ne doivent contenir que la documentation relative au composant lui-même.test.tsx ne doivent contenir que des tests relatifs au composant lui-même.Une fois qu'un nouveau composant a été créé, avec son histoire, commencer le livre de contes pourra vérifier que tout fonctionne comme il se doit.
Documentation:
Le système de test prévoit un contrôle des histoires présentes, grâce à une technique appelée test "Snapshot": le contenu de l'histoire du livre de contes sera copié dans un fichier spécial et préservé pour informer tout changement à l'avenir. Cela signifie que l'ajout de nouvelles histoires pourrait être en échec de la tâche "test" dans un PR. Si une nouvelle histoire a été ajoutée ou déjà présente, il sera nécessaire de mettre à jour le fichier instantané comme suit:
yarn test -uÀ ce stade, créez une nouvelle commission et mettez à jour le PR avec le fichier instantané mis à jour. Vérifiez que les modifications apportées sont corrigées avant de mettre à jour le PR.
Pour remplir la bibliothèque et générer des fichiers dans le dossier dist , lancez simplement la commande dédiée:
yarn build Le kit suit les indications indiquées dans les directives de conception pour les services Web de l'administration publique, section 6.3.1.2.1. Prise en charge du navigateur via l'utilisation du package browserslist-config-design-italia .
La bibliothèque a été mise à TypeScript et les types sont exportés avec lui.
Un merci spécial à ceux qui ont rendu possible le développement de cette bibliothèque!
 |  |  |  |
|---|---|---|---|
| Sabatino Galasso | Marco Liberati | Matteo Avesani | Federico Turbino |
et à la contribution des laboratoires d'ouverture
Tous les contributeurs ( faits avec des contributions-IMG )
