Storybook: Erstellen Sie Ihre eigene UI-Komponentenbibliothek mit React

In diesem Artikel werde ich darüber sprechen, warum wir Storybook brauchen und wie Sie dieses Tool in einer React-Anwendung verwenden können.

Was ist Märchenbuch ?

Storybook ist ein Open-Source-Tool zum Erstellen und Testen von UI-Komponenten in einer isolierten Umgebung. Es lässt sich in die beliebtesten JavaScript-Frameworks wie React, Vue und Angular integrieren.

Warum sollten wir Storybook verwenden?

Komponenten sind die wichtigsten Dinge beim Erstellen von Benutzeroberflächen. Viele UI-Bibliotheken und Frameworks unterstützen die Entwicklung mit Komponenten. Komponenten lösen viele Probleme, schaffen aber auch einige. Sie hängen voneinander ab, sodass sich eine Änderung in einer Komponente auf eine andere auswirken kann. Diese können mühsam zu debuggen sein, da sie in die Geschäftslogik und den App-Kontext verstrickt sind. Mit dem Storybook können Sie Ihre Komponenten von Ihrem Hauptprojekt, Ihren APIs oder Ihrer Geschäftslogik trennen .

Auf diese Weise können Sie Ihre eigenen wiederverwendbaren Komponenten erstellen , ohne auf APIs warten zu müssen. So können Sie Zeit und Code sparen.

„Storybook wird außerhalb der Haupt-App ausgeführt, sodass Benutzer UI-Komponenten isoliert entwickeln können, ohne sich Gedanken über app-spezifische Abhängigkeiten und Anforderungen machen zu müssen.“

Wie sieht es in der Praxis aus?

Storybook war für uns ein hervorragendes Werkzeug, um unsere eigenen UI-Komponenten zu entwickeln. Wir können datenunabhängige Komponenten erstellen. Wir entwickeln kundenspezifisch und manchmal können wir die UI-Komponente einer anderen Bibliothek verwenden. Wir verwalten jedes Paket unabhängig von den anderen. Außerdem integrieren wir es problemlos in verschiedene Projekte.

Wir können PRs visuell testen, um sicherzustellen, dass sie den Designanforderungen entsprechen. PRs wurden einfacher und unterhaltsamer zu überprüfen.

Storybook hat es uns erleichtert, besseren Code zu schreiben und die von uns erstellten Komponenten mit Designern und anderen Teams zu teilen. Dadurch konnten wir besser mit anderen Teams kommunizieren.

„Storybook hat die Entwicklung von Komponenten rationalisiert, indem es uns ermöglicht hat, technische Dokumentation einfach in unser Konstruktionssystem einzubinden!“ (Taurie Davis – Autorin von Building Design Systems)

Lass uns jetzt anfangen zu bauen!

Angenommen, wir erstellen ein Projekt mit React und installieren das Storybook-Paket.

# Add Storybook:
npx storybook init

// Button.jsx

import React from "react";

export const Button = (props) => {
  const { color, variant, label, ...rest } = props;

  return (
    <button
      className={[
        "storybook-button",
        `storybook-button--${color}`,
        `storybook-button--${variant}`,
      ].join(" ")}
      {...rest}
    >
      {label}
    </button>
  );
};

In der button.css-Datei:

/* button.css */

.storybook-button {
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  height: 50px;
  padding: 10px 30px;
  background-color: #51b549;
  color: #ffffff;
  border: 1px solid #51b549;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  text-decoration: none;
  text-align: center;
}

/* Secondary */

.storybook-button--secondary {
  background-color: #ffffff;
  color: #51b549;
}

/* Danger */

.storybook-button--danger {
  border-color: #e64e41;
  background-color: #e64e41;
  color: #ffffff;
}

/* Variant text */

.storybook-button--text {
  background-color: transparent;
  border-color: transparent;
  color: #3597ec;
}

import { Button } from "./Button";
import "./button.css";

// Button.stories.jsx

export default {
  title: "Components/Button v",
  component: Button,
  argTypes: {
    variant: {
      defaultValue: "contained",
      control: { type: "select" },
      options: ["contained", "text", "outlined"],
    },
    color: {
      defaultValue: "primary",
      control: { type: "select" },
      options: ["primary", "danger", "secondary"],
    },
  },
};

const Template = (args) => <Button {...args} />;

// Default
export const Default = Template.bind({});

Default.args = {
  label: "Button",
};

// Color Primary
export const Primary = Template.bind({});

Primary.args = {
  color: "primary",
  label: "Button",
};

// Color Secondary
export const Secondary = Template.bind({});

Secondary.args = {
  color: "secondary",
  label: "Button",
};

// Color Danger
export const Danger = Template.bind({});

Danger.args = {
  color: "danger",
  label: "Button",
};

// Variant Text
export const Text = Template.bind({});

Text.args = {
  variant: "text",
  label: "Button",
};

Sooo … Wir können unsere Geschichte im Storybook sehen:

In Storybook haben wir gelernt, wie man UI-Komponenten erstellt und warum wir dieses Tool verwenden sollten. Es ist einfach, eine eigene Benutzeroberfläche zu haben, und Storybook ist ein gutes Werkzeug dafür. Sie können sich die Website hier ansehen .

Vielen Dank für Ihre Zeit.

Referenz: