frontpage

Storybook -Website

Storybook ist der beliebteste UI -Komponenten -Explorer! Dies ist die Website für https://storybook.js.org/.

Hinweis : Dies sind nicht die Dokumente, diese befinden sich hier.

? Beitragen

Beiträge willkommen! Wenn es etwas kleines wie Grammatik oder Zeichensetzung ist, öffnen Sie eine Pull -Anfrage. Wenn es sich um eine größere Veränderung oder eine neue Funktion handelt, fügen Sie ein Problem zur Diskussion hinzu.

Workflow

1. Feature -Idee oder Bugfix?
2. Bauen Sie zuerst eine neue Benutzeroberfläche oder optimieren Sie die vorhandene Benutzeroberfläche in Storybook
3. In Gatsby integrieren
4. Stellen Sie sicher
5. Stellen Sie sicher
6. Stellen Sie keine visuellen Fehler in chromatischen Storybooks/Frontpage sicher
7. Anfrage ziehen

Ausführen des Projekts lokal ausführen

Storybook -Anweisungen

Das Storybook für Storybook enthält jede UI -Komponente. Die Benutzeroberfläche ist nach der Komponentenentwicklung erstellt, ein Prozess, der Benutzeroberflächen aus dem „Bottom-up“ -Beaug mit Komponenten und Beendigung mit Bildschirmen erstellt. Das bedeutet, dass Mitwirkende vor der Integration in die Gatsby -App eine Benutzeroberfläche in Storybook komponieren sollten.

1. Garn installieren
2. Garnbau
3. Garn Run Storybook

Gatsby Anweisungen

Gatsby wird für die grundlegende Routing- und statische Site -Generierung verwendet.

1. yarn start die gesamte Seite

2. yarn start:skip-addons um den Addon-Katalog zu überspringen

3. yarn start:docs-only um die Startseite zu verspotten und die DOCS-Seiten zu erstellen

Dokumente Inhalt

Der Inhalt für den Abschnitt "Dokumentation" befindet sich im docs/ SUBDIRECTORY des Storybooks Monorepo: https://github.com/storybookjs/storybook/tree/next/docs.

Um diese App auszuführen, während diese Dateien bearbeitet werden, überprüfen Sie dann sowohl dieses Repository als auch das Monorepo dann:

Innerhalb des storybook Monorepo:

1. Führen Sie den Befehl yarn task aus und wählen Sie dann die Option Synchronize documentation (sync-docs) aus.

2. Geben Sie den Weg zum frontpage -Projekt an.

Damit werden das Ordner storybook/docs und frontpage/src/content/docs synchronisiert, um sicherzustellen, dass alle Änderungen an der Dokumentation im Storybook Monorepo in den Dokumenten der Storybook -Website widerspiegelt werden.

In der frontpage -Repository:

Verwenden Sie den folgenden Befehl, um die Website -Dokumentation auszuführen:

 yarn start:docs-only

Das Projekt wird im Browser unter http://localhost:8000 visualisiert

Versionshinweise

Versionshinweise werden im Verzeichnis SRC/Content/Releases als .md -Dateien gespeichert. Der Name der Datei entspricht der Version (major.minor) der Version und wird verwendet, um den Link zur spezifischen Version der Releases -Seite zu füllen.

In der .md Datei der Version wird FrontMatter verwendet, um einen Seitentitel zu erstellen, während der Rest des Inhalts mit gatsby-transformer-remark analysiert und mit Selektoren in src/styles/formatting.js gestaltet wird.

Neue Versionen veröffentlichen

Siehe detaillierte Dokumente

Umgebungsvariablen

In der Entwicklung und mit lokalen Produktionsergebnissen können Umgebungsvariablen mit .env -Dateien konfiguriert werden, wie hier erläutert. Variablen werden mit GATSBY_ vorangestellt, wenn diese Variable im clientseitigen Code verfügbar sein muss.

Bei Bereitstellung von Vorschau und Produktionsbereitstellungen werden diese Variablen mit den Build -Variablen von Netlify festgelegt.

Suchen

Die Suche in den Dokumenten wird von DocSearch betrieben. Damit dies funktioniert, ist eine Umgebungsvariable erforderlich:

GATSBY_ALGOLIA_API_KEY

So richten Sie auf Ihrer Maschine ein:

1. Erstellen Sie eine .Env.Development -Datei lokal
2. Holen Sie sich den Schlüssel hier: https://app.netlify.com/sites/storybook-frontpage/setings/deploys#environment
3. Fügen Sie GATSBY_ALGOLIA_API_KEY=key zur Datei aus Schritt 1 hinzu

Die Site wird alle 24 Stunden gekrabbelt, sodass sich alle Aktualisierungen in dieser Zeitspanne widerspiegeln.

Blog -Beiträge

Der neueste Blog -Beitrag ist aus Ghost abgerufen. Sie müssen hinzufügen, damit dies funktioniert. Eine Umgebungsvariable ist erforderlich:

GHOST_STORYBOOK_API_KEY

So richten Sie auf Ihrer Maschine ein:

1. Erstellen Sie eine .Env.Development -Datei lokal
2. Holen Sie sich den Schlüssel hier: https://storybookblog.ghost.io/ghost
3. Fügen Sie der Datei aus Schritt 1 GHOST_STORYBOOK_API_KEY=key hinzu

Werkzeug

Dieses Projekt nutzt diese Tools, um unsere Arbeit zu erleichtern.

? Bereitstellung von Netlify

Haupt- und Filialen werden automatisch von Netlify jedes Komitee bereitgestellt.

? Visuelle Tests durch Chromatik

Alle Geschichten im Storybook werden automatisch visuell auf Desktop und Mobile getestet. Stellen Sie sicher, dass alle Baselines vor dem Zusammenführen akzeptiert werden.

? Kontinuierliche Integration durch Kreis CI

Jeder Build eine Testsuite läuft. Stellen Sie sicher, dass vor dem Zusammenführen keine Fehler vorliegen.