design react kit
v5.5.0
Lesen Sie dies in anderen Sprachen: Englisch ??
Das Design React Kit ist ein Satz von React -Komponenten, die Bootstrap Italia und die Stile zum Design des UI -Kits implementieren. Um durch die Bibliothek zu navigieren und die Komponenten anzusehen, wurde ein Storybook verwendet. Die öffentliche Version des Storybooks ist hier für die neueste veröffentlichte veröffentlichte Veröffentlichung erhältlich. Das Playground React Kit ist mit der Bibliothek zum Spielen erhältlich.
Um React Design als Sucht in einer App zu verwenden, können Sie sie von NPM installieren. Wir empfehlen, die Verwendung create vite zu erstellen, um einen neuen WebApp -Reakt zu erstellen, wie folgt:
yarn create vite nome-app --template react
cd nome-app
yarn add design-react-kit --saveWeitere Informationen zum Erstellen einer neuen App mit React:
design-react-kit enthält keine CSS- und Schriftartdateien, und es ist daher erforderlich, sie separat zu installieren:
yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save Zu diesem Zeitpunkt importieren Sie einfach explizit in die CSS- und Schriftart -App, wenn Sie verwendet werden, wenn Sie verwendete create vite in der Datei ./src/App.js Datei schafft:
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 ;Sie können diese Webvorlage mit Stackblitz: Webvorlagen konsultieren
Das Bootstrap Italia-Thema verwendet einen bestimmten Satz von Schriftart: titillium-web , roboto-mono und lora . Das Laden dieser Schriftarten bleibt dem Browser überlassen, kann jedoch über die entsprechende FontLoader -Komponente gesteuert werden. Deklarieren Sie einfach die FontLoader -Komponente oben in der React -App, um das Laden zu ermöglichen.
Alternativ ist es erforderlich, das Laden von Schriftarten manuell über das webfontloader -Paket manuell zu verwalten:
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' ]
}
} ) ; Die Bibliothek umfasst nicht react und react-dom , wodurch das Zusammenstoß von Versionen und die nutzlose Zunahme der Größe des Bündels vermieden wird. Aus diesem Grund müssen für die lokale Entwicklung Sucht manuell installiert werden.
Der Befehl, der ausgeführt werden soll, ist
yarn install --peersoder alternativ manuell
yarn install react react-dom? Es ist möglich, auf verschiedene Weise zur Bibliothek beizutragen:
Möchten Sie beim Design React Kit helfen? Sie sind am richtigen Ort!
Wenn Sie dies noch nicht getan haben, verbringen Sie zunächst ein paar Minuten damit, Ihr Wissen über die Entwurfsrichtlinien für die PA -Webdienste zu vertiefen, und verweisen Sie auf die Hinweise, wie Sie zum Design -React -Kit beitragen können.
Die Mindestanforderungen Ihrer lokalen Umgebung müssen:
Klonen Sie das Repository und führen Sie yarn aus, um Sucht zu installieren. Dann durchführen
yarn storybook:serveUm den Entwicklungsserver zu starten.
Storybook wird dann am http: // localhost: 9001/ erhältlich sein
Das Storybook wurde mit einigen addons angereichert, die es mehr sprechen lassen.
In diesem Abschnitt wird die Erstellung neuer Komponenten im Repository geleitet. Alle Komponenten befinden sich im src -Ordner: Jede Komponente verfügt über einen Ordner mit allem, was notwendig ist, damit es funktioniert. Stattdessen sind Storybook -Geschichten unter stories . Unit -Tests befinden sich im test . Beispielsweise ist die Button unter der src/Button -Route vorhanden und ihre Struktur lautet wie folgt:
├── src
│ └── Button
│ └── Button.tsx
├── stories
│ ├── Components
│ │ └── Button.stories.tsx
│ └── Documentation
│ └── Button.mdx
└── test
└── Button.test.tsx
Einige Grundregeln, um die Komponenten zu strukturieren:
.stories.tsx -Dateien sollten nur das enthalten, was mit der Komponente selbst zu tun hat..mdx -Dateien sollten nur eine Dokumentation über die Komponente selbst enthalten.test.tsx -Dateien sollten nur Tests in Bezug auf die Komponente selbst enthalten.Sobald eine neue Komponente erstellt wurde, kann mit seiner Geschichte ein Start -Storybook in der Lage sein, zu überprüfen, ob alles funktioniert, wie es sollte.
Dokumentation:
Das Testsystem bietet eine Kontrolle über die vorhandenen Geschichten durch eine Technik namens "Snapshot" -Tests: Der Inhalt der Storybook -Geschichte wird in einer speziellen Datei kopiert und aufbewahrt, um Änderungen in der Zukunft zu benachrichtigen. Dies bedeutet, dass die Hinzufügung neuer Geschichten in einem Misserfolg der "Test" in einer PR ausgeschlossen werden kann. Wenn eine neue Geschichte hinzugefügt wurde oder bereits vorhanden ist, muss die Snapshot -Datei wie folgt aktualisiert werden:
yarn test -uErstellen Sie zu diesem Zeitpunkt eine neue Provision und aktualisieren Sie die PR mit der aktualisierten Snapshot -Datei. Überprüfen Sie, ob die vorgenommenen Änderungen vor der Aktualisierung der PR korrigiert werden.
So füllen Sie die Bibliothek aus und generieren Dateien im dist -Ordner, starten Sie einfach den dedizierten Befehl:
yarn build Das Kit folgt den in den Entwurfsrichtlinien für die Webdienste der öffentlichen Verwaltung angegebenen Indikationen, Abschnitt 6.3.1.2.1. Browserunterstützung durch die Verwendung des browserslist-config-design-italia Pakets.
Die Bibliothek wurde zu Typscript gebracht und die Typen werden damit exportiert.
Besonderer Dank geht an diejenigen, die die Entwicklung dieser Bibliothek ermöglicht haben!
 |  |  |  |
|---|---|---|---|
| Sabatino Galasso | Marco liberati | Matteo Avesani | Federico Turbino |
und zum Beitrag der OpenCity -Labors
Alle Mitwirkenden ( mit Beitragslern-IMG )
