Installieren Sie zun?chst das Storybook mithilfe von NPX Storybook@neuesten Init, um Abh?ngigkeiten, Konfigurationen und Beispielgeschichten einzurichten. 2. Organisieren Sie Komponenten in isolierten Ordnern mit co-located-Geschichten, Tests und Indexdateien zur Skalierbarkeit. 3.. Schreiben Sie umfassende Geschichten über verschiedene Zust?nde (Laden, Behinderte usw.), indem Sie Argumente und Kontrollen für die interaktive Prop -Manipulation verwenden. 4. Aktivieren Sie Addon-Essentials, um Registerkarten, visuelle Steuerelemente, Aktionen und Ansichtsfenster zu generieren, um einen Leitfaden für den Lebensstil zu erhalten. 5. Befolgen Sie Best Practices: Verwenden Sie eine konsistente Benennung (z. B. Komponenten/Schaltfl?che), halten Sie Geschichten auf, übernehmen Sie Typenkripte und exportieren Komponenten sauber. 6. Verbessern Sie den A11Y -Test, chromatisch für die visuelle Regression und ver?ffentlichen Sie online für den Teamzugriff. 7. Behandeln Sie die Bibliothek als sich weiterentwickelndes System - starten Sie klein mit Kernkomponenten und fügen Sie iterativ Dokumente, Tests und Design -Token hinzu, um eine gemeinsame, nachhaltige UI -Sprache in den Teams zu erstellen.

Sie denken also darüber nach, eine Komponentenbibliothek zu bauen - gro?artiger Schritt. Wenn Sie in einem Team oder über mehrere Projekte hinweg arbeiten, h?lt eine solide Komponentenbibliothek Ihre Benutzeroberfl?che konsistent, beschleunigt die Entwicklung und erleichtert das Testen. Eines der besten Werkzeuge, mit denen Sie diese Bibliothek erstellen und pr?sentieren k?nnen? Storybook.

Hier erfahren Sie, wie Sie anfangen und was tats?chlich wichtig ist, wenn Sie es aufstellen.

Warum für eine Komponentenbibliothek ein Storybook verwenden?

In Storybook gibt Ihnen eine Sandbox, um UI -Komponenten isoliert zu entwickeln. Das bedeutet, dass Sie Ihre vollst?ndige App nicht drehen müssen, nur um einen Knopf zu optimieren. Sie schreiben Geschichten für jede Komponente, bei denen es sich im Grunde genommen um unterschiedliche Zust?nde oder Anwendungsf?lle handelt (wie eine Ladeknopf, eine deaktivierte Schaltfl?che usw.).

Es ist nicht nur für Entwickler - Designer, QA und Produkte k?nnen es verwenden, um zu sehen, was verfügbar ist und wie sich die Dinge verhalten. Au?erdem wird es in Testwerkzeuge, Dokumente und Designsysteme integriert.

Einrichten von Storybook

Wenn Sie frisch anfangen (oder zu einem vorhandenen React, Vue oder einem anderen Frontend -Projekt hinzufügen), ist der einfachste Weg die automatisierte CLI:

 NPX Storybook@neueste Init

Dies wird:

• Installieren Sie Storybook -Abh?ngigkeiten
• Basiseinstellungen konfigurieren ( main.js , preview.js )
• Fügen Sie Beispielgeschichten hinzu
• Richten Sie Skripte ein, um sie lokal auszuführen

Nach dem Einrichten rennen Sie:

 NPM Run Storybook

Und Sie werden die Standard -Benutzeroberfl?che mit Beispielkomponenten sehen.

Organisation Ihrer Komponentenbibliothek

Struktur ist wichtig. Ein sauberer Ordner -Setup macht Ihre Bibliothek skalierbar.

Hier ist ein praktisches Muster:

 src/
├── Komponenten/
│ ├── Taste/
│ │ ├── Button.jsx
│ │ ├── Button.Stories.js
│ │ ├wort.Test.js
│ │ └── Index.js
│ ├── modal/
│ │ ├── modal.jsx
│ │ ├── modal.Stories.js
│ │ └── Index.js
│ └── Index.js (exportiert alle Komponenten)

Jede Komponente hat einen eigenen Ordner mit ihrer Story -Datei direkt daneben. Mit diesem Co-Standort k?nnen Sie Geschichten, wenn sich die Komponente entwickelt, leicht zu finden und zu aktualisieren.

In Ihrer Datei .stories.js Datei:

 // button.stories.js
Standard ausführen {
  Titel: 'Komponenten/Schaltfl?che',
  Komponente: Taste,
};

Export const prim?r = {
  args: {
    Etikett: "Klicken Sie mich",
    prim?r: wahr,
  },
};

Export const deaktiviert = {
  args: {
    Etikett: 'deaktiviert',
    Behindert: wahr,
  },
};

Jetzt sehen Sie "Button" unter "Komponenten" in der Seitenleiste des Storybooks mit zwei Staaten.

Nützliche Geschichten schreiben

Zeigen Sie nicht nur den glücklichen Weg. Denken Sie an:

• Verschiedene Requisiten
• Ladezust?nde
• Fehlerbedingungen
• Responsives Verhalten (falls zutreffend)

Verwenden Sie Args und Kontrollen , damit Nicht-Devs Requisiten in der Benutzeroberfl?che optimieren k?nnen:

 Standard ausführen {
  Titel: 'Komponenten/Eingabe',
  Komponente: Eingabe,
  argttypes: {
    Variante: {
      Steuerung: 'ausw?hlen',
      Optionen: ['skizziert', 'gefüllt', 'Standard'],
    },
  },
};

exportieren const default = {
  args: {
    Etikett: 'Name',
    Platzhalter: "Geben Sie Ihren Namen ein",
  },
};

Jetzt erhalten Sie einen Dropdown im Storybook Controls -Feld, um die Varianten live zu wechseln.

Hinzufügen von Dokumenten und Kontrollen

Storybook generiert automatisch eine Registerkarte "Dokumente" für jede Komponente mit MDX oder integriertem DOC-Generation.

Aktivieren Sie es in main.js :

 // .Storybook/main.js
module.exports = {
  Geschichten: ['../src/components/**/*.stories.@(js|JSx|Ts|tsx)'],
  Addons: [
    '@storybook/addon-wesententials', // enth?lt Steuerelemente, Dokumente, Aktionen usw.
  ],
};

Mit @storybook/addon-essentials erhalten Sie:

• Visuelle Steuerelemente für Requisiten
• Automatisch generierte Dokumente
• Aktionen Panel, um Ereignisse zu sehen
• Ansichtsfenster (Mobile/Desktop)
• Hintergrund

Dies verwandelt Ihr Storybook in einen Leitfaden für Lebensstil.

Best Practices, um es aufrechterhalten zu halten

• Nennen Sie Geschichten konsequent - Verwenden Sie eine klare Hierarchie wie Components/Button oder Forms/Input
• Verwenden Sie beschreibende Geschichtennamen - "mit Symbol" ist besser als "Beispiel 2"
• Halten Sie Geschichten synchron mit Code - veraltete Geschichten irreführen die Benutzer irreführend
• Verwenden Sie TypeScript - verbessert die automatische Vervollst?ndigung und reduziert Fehler in Geschichten
• Exportieren Sie die Komponenten sauber - machen Sie es einfach, anderswo aus Ihrer Bibliothek zu importieren

überlegen Sie auch:

• Hinzufügen von Barrierefreiheitstests mit @storybook/addon-a11y
• Integration mit Chromat für visuelle Regressionstests
• Ver?ffentlichen Sie Ihr Storybook online (Github -Seiten, Vercel usw.) für den Teamzugriff

Letzte Gedanken

Beim Erstellen einer Komponentenbibliothek mit Storybook geht es nicht nur darum, Schaltfl?chen anzuzeigen. Es geht darum, eine gemeinsame Sprache für Ihr Team zu erstellen. Wenn jeder sehen kann, was verfügbar ist und wie es funktioniert, reduzieren Sie die Duplizierung und verbessern die Qualit?t.

Beginnen Sie klein - ein paar Kernkomponenten mit guten Geschichten. Iterieren. Fügen Sie im Laufe der Zeit Dokumente, Tests und Design -Token hinzu.

Und denken Sie daran: Eine Komponentenbibliothek ist nie ?fertig“. Aber mit Storybook haben Sie das richtige Werkzeug, um es nachhaltig zu wachsen.

Grunds?tzlich fangen Sie einfach an, den Rest zu bauen - der Rest folgt.

Das obige ist der detaillierte Inhalt vonErstellen einer Komponentenbibliothek mit Storybook. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!