hsds react

HSDS: Reagieren Sie

Reagieren Sie Komponenten für das Entwurfssystem von Hilfscout

Live -Demo

Schauen Sie sich das Storybook von HSDS an: https://hsds.helpscout.com/.

Installieren

 npm install @helpscout/hsds-react --save

Erste Schritte

Nach dem Klonen dieses Repos rennen Sie:

 npm install

Sobald alles installiert ist, rennen Sie:

 npm start

Schauen Sie sich das Storybook von HSDS unter http: // localhost: 8900/in Ihrem Browser an!

SVG -Adapter

Ab V2.18.0 ist der svg -Set abgelehnt. Dies wurde durchgeführt, um die kompilierte Bündelgröße zu reduzieren. Fügen Sie den entsprechenden Adapter Ihrer App hinzu, um die svg -Symbole zu laden.

Es wird empfohlen, dass der Adapter irgendwo in Ihrem Haupteintrittspunkt geladen wird (z. B. src/index.js ).

 // src/index.js
// For a lighter-weight svg set for embeddables
import '@helpscout/hsds-react/adapters/embed'
// For the complete svg set
import '@helpscout/hsds-react/adapters/app'

Hinweis: Dies lädt alle svg -Bilder, einschließlich Icon und Illo .

Testen

Um im Uhrenmodus Scherz auszuführen, laufen Sie:

 npm run dev

Um alle Tests auszuführen (mit Berichterstattung mit Deckungsberichten), laufen Sie:

 npm run test

Veröffentlichung

Verschmelzung eines PR

Um eine PR zu verschmelzen, wenn die Veröffentlichung abgeschlossen ist, machen Sie bitte einen Kürbis und verschmelzen Sie von der PR -Seite. Es wird die Geschichte im Hauptzweig sauber halten

Wir neigen dazu, zu der Zeit eine Veröffentlichung mit nur einer PR zu tun, wenn möglich

Veröffentlichung auf NPM

Sie können mehr über die Veröffentlichung von Main oder die Veröffentlichung eines Beta -Builds erfahren

Führen Sie den folgenden Befehl aus, um eine neue Version von HSDs zu veröffentlichen und zu veröffentlichen:

 npm run release

Sie erhalten eine CLI -Eingabeaufforderung mit Optionen. Wählen Sie den, den Sie wollen, und das war's! Das Skript kümmert sich um den Rest (von Tests bis Veröffentlichung).

Bereitstellen von Storybook

Führen Sie den folgenden Befehl aus, um das Storybook bereitzustellen:

 npm run deploy

Lernen

• HSDS -Dokumentation: https://hsds.helpscout.com/
• Entwickler eingehender Dokumentation: Dev Docs
• Schauen Sie sich auch unsere Videos an, um mehr Lernressourcen zu erhalten

Blau?

Am 8. November 2018 haben wir Blue nach HSDS: React?

Die ursprüngliche blaue Bibliothek wird weiterhin auf NPM existieren und ist weiterhin installierbar über:

 npm install @helpscout/blue --save

Die fortgesetzte Entwicklung dieser Komponentenbibliothek wird jedoch unter HSDS: React fortgesetzt, was installierbar ist:

 npm install @helpscout/hsds-react --save

Ein großes Dankeschön an alle Leute, die in Blue beteiligt sind! Blau wird immer dein Junge sein? .