Erstellen eines Designsystems mit Storybook und React

Verwenden Sie zunächst NPX Storybook Init, um das Storybook in React Project zu installieren und zu konfigurieren. Führen Sie NPM Run Storybook aus, um den lokalen Entwicklungsserver zu starten. 2. organisieren Sie die Struktur der Komponentendatei nach Funktion oder Typ und erstellen Sie entsprechende .Stories.js -Dateien, um verschiedene Zustände in jedem Komponentenverzeichnis zu definieren. 3.. Verwenden Sie die Argumente und steuert die Systeme von Storybook, um dynamische Attributanpassungen zu erreichen, um die Prüfung verschiedener interaktiver Zustände zu erleichtern. 4. Verwenden Sie MDX -Dateien, um reichhaltige Textdokumente zu schreiben, die Designspezifikationen, Barrierefreiheit usw. enthalten, und unterstützen Sie das Laden von MDX durch Konfiguration. 5. Definieren Sie Design -Token durch Themen und verwenden Sie ThemeProvider, um weltweit Themenstile in Preview.js zu injizieren. 6. Integrieren Sie die Scherz- und React-Testbibliothek durch, führt Unit-Tests, visuelle Regressionstests mit Chromatik und Überprüfungen nach Barrierefreiheitsproblemen über @Storybook/Addon-A11Y durch. Schließlich ein skalierbares Designsystem, das unabhängige Entwicklung, visuelle Dokumente, automatisierte Tests unterstützt und die Zusammenarbeit mit der Design- und Entwicklung fördert. Dieses System kann effizient wiederverwenden, indem sie die Komponenten schrittweise wiederholen und zu einem erforderlichen Instrument zur Verbesserung der UI -Konsistenz und der Entwicklungseffizienz werden.

Das Aufbau eines Designsystems mit Storybook und React ist eine leistungsstarke Möglichkeit, konsistente, wiederverwendbare UI -Komponenten zu erstellen, die über Teams und Produkte hinweg skalieren. Storybook bietet eine isolierte Entwicklungsumgebung für UI -Komponenten, mit der sie isoliert das Erstellen, Testen und Dokumentieren erleichtern können - ohne auf die vollständige App zu stützen. In Kombination mit React wird diese Kombination zu einem Anlaufort für moderne Designsysteme.

Hier erfahren Sie, wie Sie es effektiv angehen können.

1. Richten Sie ein Storybook mit React ein

Fügen Sie zunächst Ihr React -Projekt hinzu. Wenn Sie die React -App erstellen oder ein Standard -React -Setup erstellen, ist es am einfachsten, die automatisierte CLI zu verwenden:

 NPX Storybook Init

Dieser Befehl installiert das Storybook, fügt die erforderlichen Konfigurationsdateien hinzu und legt Beispielgeschichten ein. Einmal fertig, rennen Sie:

 NPM Run Storybook

Dies startet den Storybook Development Server, normalerweise unter http://localhost:6006 , wo Sie Ihre Komponenten in Echtzeit anzeigen können.

Tipp: Der Init -Befehl funktioniert gut mit den meisten React -Einstellungen, einschließlich vite und next.js. Wenn Sie eine benutzerdefinierte Webpack -Konfiguration verwenden, müssen Sie möglicherweise .storybook/main.js entsprechend anpassen.

2. Strukturieren Sie Ihre Komponenten und Geschichten

Eine gut organisierte Dateistruktur ist der Schlüssel zur Wartbarkeit. Gruppenkomponenten logischerweise - typisch nach Merkmal oder Typ (z. B. atoms , molecules , organisms ) oder nach Kategorie wie Button , Form , Navigation .

Beispielstruktur:

 src/
├── Komponenten/
│ ├── Taste/
│ │ ├── Button.jsx
│ │ ├── Button.Stories.js
│ └── Taste.module.css
│ ├── Eingabe/
│ │ ├── Eingabe.jsx
│ └── Input.Stories.js
├── Styles/
│ └── thema.js

Definieren Sie in jeder .stories.js -Datei, wie die Komponente in verschiedenen Zuständen gerendert werden soll:

 // button.stories.js
{button} von './button' importieren;

Standard ausführen {
  Titel: 'Komponenten/Schaltfläche',
  Komponente: Taste,
  argttypes: {
    Variante: {Steuerung: 'Select', Optionen: ['primär', 'sekundär']},
  },
};

Export const primär = {
  args: {
    Etikett: "Klicken Sie mich",
    Variante: 'primär',
  },
};

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

Dadurch werden interaktive Steuerelemente (z.

3. Verwenden Sie Args und Steuerelemente für dynamische Tests

Das Argumentationssystem von Storybook ermöglicht es Ihnen, Komponenteneingänge im laufenden Fliegen zu ändern. In Kombination mit Steuerelementen können Benutzer Requisiten direkt in der Benutzeroberfläche optimieren - für den Testen von Kanten und die Präsentation der Flexibilität.

Beispiel:

 argttypes: {
  Größe: {Steuerung: 'Radio', Optionen: ['klein', 'Medium', 'groß']},
  Onclick: {Aktion: 'Klickte'}, // Protokolle Klicks
}

Dies bedeutet, dass QA, PMS oder Designer mit der Schaltfläche interagieren und sehen können, wie es sich beim Klicken oder der Größe verändert - ohne Berührungscode.

Pro-Tipp: Verwenden Sie controls: { exclude: ['id', 'className'] } um interne oder nicht visuelle Requisiten vor dem Bedienfeld zu verbergen.

4. Dokumentieren Sie mit MDX und fügen Sie Designrichtlinien hinzu

Gehen Sie über Code -Beispiele hinaus. Verwenden Sie MDX (Markdown JSX), um eine reiche Dokumentation zu schreiben, die Design -Token, Verwendungsrichtlinien, Barrierefreiheit und sogar Figma -Links enthält.

Erstellen Sie eine Button.stories.mdx -Datei:

 importieren {meta, story, canvas} aus '@storybook/blocks';
Import * als ButtonStories von './button.stories.js';

<Meta title = "components /button" component = {button} />

# Taste

Verwenden Sie Tasten, um Aktionen auszulösen. Bevorzugen Sie Primärtasten für Hauptaktionen, die für Alternativen sekundär sind.

<Canvas>
  <Story von = {buttonStories.primary} />
</Canvas>

## Zugänglichkeit

Fügen Sie immer beschreibende Beschriftungen ein. Vermeiden Sie nur Symbol-Tasten, es sei denn, Sie sind ordnungsgemäß mit "aria-label" gekennzeichnet.

Konfigurieren Sie dann Storybook, um MDX -Dateien durch Aktualisieren von .storybook/main.js zu laden:

 module.exports = {
  Geschichten: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  // ...
};

Jetzt wird Ihr Designsystem zu einem Leitfaden für den Lebensstil.

5. Integrieren Sie Design -Token und Themen

Teilen Sie visuelle Stile (Farben, Typografie, Abstand) über ein Themenobjekt, häufig mit styled-components , emotion oder CSS-in-Js.

Beispielthema:

 // thema.js
Export const thema = {
  Farben: {
    Primär: '#007BFF',
    sekundär: '#6c757d',
  },
  Abstand: (Faktor) => `$ {0,5 * Faktor} Rem`,,
  Typografie: {
    Überschrift: 'BOLD 1.5REM SYSTEM-UI',
  },
};

Wickeln Sie Ihre Geschichten mit einem Dekorateur, um das Thema weltweit in .storybook/preview.js anzuwenden:

 importieren {themeProvider} aus 'Stilkomponenten';
import {thema} aus '../src/styles/theme';

exportieren const dekoratoren = [
  (Geschichte) => (
    <TheeProvider thema = {thema}>
      <geschichte />
    </Themeneprovider>
  ),
];

Jetzt werden alle Komponenten mit konsequentem Styling.

6. Tests und Automatisierung hinzufügen

Ein robustes Designsystem benötigt Tests. Kombinieren:

• Scherzreakt -Testbibliothek für Einheiten- und Verhaltenstests.
• Chromatisch (ein Storybook-Add-On) für visuelle Regressionstests.

Chromatisch installieren:

 npx chromatic --Project-token = <UR-token>

Es läuft in CI und vergleicht jede Geschichte mit früheren Versionen, wobei unbeabsichtigte visuelle Veränderungen erfasst werden.

Erwägen Sie auch , A11Y -Addon hinzuzufügen, um Probleme mit der Zugänglichkeit zu fangen:

 npm install @storybook/addon-a11y

Aktivieren Sie es dann in .storybook/main.js :

 Addons: ['@storybook/addon-a11y'];

Jetzt sehen Sie eine Registerkarte "Barrierefreiheit" in der Benutzeroberfläche mit automatisierten Schecks.

Letzte Gedanken

Beim Aufbau eines Designsystems mit Storybook und React geht es nicht nur um Komponenten, sondern um eine gemeinsame Sprache zwischen Design und Entwicklung. Mit dem richtigen Setup bekommen Sie:

• Isolierte Komponentenentwicklung
• Interaktive Dokumentation
• Visuelle Tests und Konsistenz
• Zusammenarbeit-freundliche Schnittstellen

Starten Sie klein (Tasten, Eingaben), erzwingen Sie die Konsistenz frühzeitig und wachsen Sie iterativ. Im Laufe der Zeit wird Ihr Designsystem für Produktteams zu einem Gewaltmultipler.

Grundsätzlich ist das Storybook nicht optional, wenn Sie Reagieren und kümmern sich um UI -Qualität.

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