Entwicklung einer Komponentenbibliothek mit React und TypeScript / Sudo Null IT News

Hallo Freunde!

In diesem Artikel zeige ich Ihnen, wie Sie mit der Entwicklung einer Komponentenbibliothek beginnen Vit, Reagieren, Typoskript und Märchenbuch.

Wir werden eine Bibliothek entwickeln, die aus einer einfachen Komponente besteht – einem Knopf, wir bereiten die Bibliothek für die Veröffentlichung in der Registrierung vor npmund generieren und rendern Sie die Dokumentation für die Schaltfläche.

Repository mit Projektcode.

Bei Interesse bitte unter Kat.-Nr.

Projekt vorbereiten und aufsetzen

Erstellen Sie eine Projektvorlage mit Vite:

# npm 7+ #reakt-ts-lib ist der Name des Projekts #react-ts ist die zu verwendende Vorlage

Wir gehen in das erstellte Verzeichnis, installieren die Abhängigkeiten und starten den Server für die Entwicklung:

cd reagieren-ts-lib npm in npm laufen dev

Wir bringen das Verzeichnis auf folgende Struktur:

– src – lib – Button – Button.tsx – index.ts – App.tsx – index.css – vite.config.ts – …

Installieren der Bibliothek gestylte Komponenten (Wir werden diese Bibliothek verwenden, um die Schaltfläche zu gestalten) und Typen dafür:

npm i styled-components npm i -D @types/styled-components

Installieren Sie das Vite-Plugin, um automatisch eine Datei mit Typdefinitionen zu generieren:

npm i -D vite-plugin-dts

Passen Sie die Assembly an, indem Sie die Datei vite.config.ts bearbeiten:

importiere {defineConfig} aus “vite”; dts aus “vite-plugin-dts” importieren; Pfad aus “Pfad” importieren; Reagieren von “@vitejs/plugin-react” importieren; export default defineConfig({ Plugins: [
// поддержка синтаксиса React (JSX и прочее)
react(),
// генерация файла `index.d.ts`
dts({
insertTypesEntry: true,
}),
]build: { lib: { // Pfad zum Eintrag der Hauptbibliotheksdatei: path.resolve(__dirname, “src/lib/index.ts”), // Bibliotheksname Name: “ReactTSLib”, // generierte Dateiformate Formate : [“es”, “umd”]// Namen der generierten Dateien fileName: (format) => `react-ts-lib.${format}.js`, }, // rollupOptions: { external: [“react”, “react-dom”, “styled-components”]Ausgabe: { globals: {react: “React”, “react-dom”: “ReactDOM”, “styled-components”: “styled”, }, }, }, }, });

Komponentenentwicklung

Wir definieren minimale Stile und einige Variablen in der Datei index.css:

/* Schriftart importieren */ @import url(” /* Variablen definieren */ /* `Bootstrap`-Palette */ :root { –primary: #0275d8; –success: #5cb85c; –warning: #f0ad4e; – -danger: #d9534f; –light: #f7f7f7; –dark: #292b2c; –gray: rgb(155, 155, 155); } /* Stil “hell” zurücksetzen */ *, *::before, *::after { box-sizing: border-box; font-family: “Montserrat”, serifenlos; margin: 0; padding: 0; } /* center align */ #root { align-items: center; display : flex; Lücke: 0.6rem; Höhe: 100vh; justify-content: center; }

Beginnen wir mit der Entwicklung des Buttons.

Wir arbeiten mit der Datei src/lib/Button/Button.tsx.

Abhängigkeiten importieren:

import { ButtonHTMLAttributes, FC, MouseEventHandler, PropsWithChildren, } from “react”; Styled aus “styled-components” importieren;

Wir definieren eine Aufzählung mit Schaltflächenoptionen:

export enum BUTTON_VARIANTS { PRIMARY = “primary”, SUCCESS = “success”, WARNING = “warning”, DANGER = “danger”, }

Requisitentypen definieren:

Typ Requisiten = ButtonHTMLAttributes & { Variante?: BUTTON_VARIANTS; onClick?: MouseEventHandler; };

Zusätzlich zu den Standardattributen akzeptiert der Button 2 Props:

  • Variante – Schaltflächenvariante (primär usw.);
  • onClick – Schaltflächen-Klick-Handler.

Definieren Sie die Schaltflächenkomponente:

const Button: FC> = ({ children, disabled, onClick,variant = BUTTON_VARIANTS.PRIMARY, …restProps }) => { // Wenn der Button deaktiviert ist, heißt der übergebene Handler nicht const handleClick : MouseEventHandler = (e) => { if (disabled) return; onClick && onClick(e); }; return ( ); };

Definieren Sie eine gestylte Schaltfläche mit styled:

const StyledButton = styled(Button)` background-color: var( –${(props) => (props.disabled ? “gray” : props.variant ?? “primary”)} ); Randradius: 6px Grenze: keine Box-Schatten: 0 1px 3px rgba(0, 0, 0, 0,4); Farbe: var( ${(props) => props.variant && (props.variant === BUTTON_VARIANTS.SUCCESS ?? props.variant === BUTTON_VARIANTS.WARNING) ? “–dark” : “–light”} ); Cursor: ${(props) => (props.disabled ? “default” : “pointer”)}; Schriftstärke: 600 Buchstabenabstand: 1px Deckkraft: ${(props) => (props.disabled ? “0.6” : “1”)}; Gliederung: keine; Polsterung: 0,8 rem Texttransformation: Großbuchstaben; Übergang: 0,4 s; &:nicht([disabled]): Hover {Deckkraft: 0,8; } &:active { box-shadow: keine; }`;

Hier sind 2 Punkte zu beachten:

  • background-color: var(–${(props) => (props.disabled ? “gray” : props.variant ?? “primary”)}); bedeutet, dass die Hintergrundfarbe von der Button-Variante abhängt und über in index.css deklarierte Variablen bestimmt wird. Deaktivierter Schaltflächenhintergrund – –gray oder rgb(155, 155, 155), Standardhintergrund – –primary oder #0275d8;
  • Das:

Farbe: var( ${(props) => props.variant && (props.variant === BUTTON_VARIANTS.SUCCESS ?? props.variant === BUTTON_VARIANTS.WARNING) ? “–dark” : “–light”} );

bedeutet, dass die Textfarbe auch von der Button-Variante abhängt und über CSS-Variablen bestimmt wird. Die Textfarbe der Erfolgs- oder Warnschaltfläche ist –dark oder #292b2c, die Farbe anderer Schaltflächen ist –light oder #f7f7f7.

Ich denke, der Rest der Stile wirft keine Fragen auf.

Exportieren Sie die Schaltfläche und die Aufzählung erneut in src/lib/index.ts:

exportiere {Standard als Button, BUTTON_VARIANTS} aus “./Button/Button”;

Mal sehen, wie unser Button aussieht und funktioniert.

Bearbeiten der App.tsx-Datei:

importiere { Button, BUTTON_VARIANTS } aus “./lib”; function App() { // Schaltflächen-Klick-Handler // akzeptiert eine Schaltflächenvariante const onClick = (variant: string) => { // gibt eine Nachricht an die Entwicklertools-Konsole im Browser aus console.log(`${variant} button angeklickt`); }; return ( <> {/* default button */} {/* deaktivierte Schaltfläche */} {/* Erfolg */} onClick(BUTTON_VARIANTS.SUCCESS)} > {BUTTON_VARIANTS.SUCCESS } {/* Warnung */} {/* Gefahr * /} onClick(BUTTON_VARIANTS.DANGER)} > {BUTTON_VARIANTS.DANGER} ); } Standard-App exportieren;

Führen Sie den Entwicklungsserver mit dem Befehl npm run dev aus:

Erstellen und Veröffentlichen eines Pakets

Wir bearbeiten die Datei package.json und definieren den Namen des Pakets darin (unser Paket wird Umfang mit dem ursprünglichen Namen @my-scope (in diesem Fall ist das @-Präfix obligatorisch)), seine Version, Lizenz, Verzeichnis mit Dateien, Datei mit Typen sowie das Einrichten von Exporten (die Abschnitte Skripte, Abhängigkeiten und devDependencies entfallen):

{ “name”: “@my-scope/react-ts-lib”, “version”: “0.0.0”, “license”: “MIT”, “files”: [
“dist”
]”main”: “./dist/react-ts-lib.umd.js”, “module”: “./dist/react-ts-lib.es.js”, “types”: “./dist/ index.d.ts”, “exports”: { “.”: { “import”: “./dist/react-ts-lib.es.js”, “require”: “./dist/react-ts- lib.umd.js” } } }

Eine Beispiel-package.json (mit zusätzlichen Feldern) einer echten Bibliothek kann gefunden werden hier.

beachten Sie: Es ist sinnvoll, package.json vor dem Erstellen zu “reinigen”.

Installieren des Pakets json als Entwicklungsabhängigkeit:

npm i -D json

Und definieren Sie den folgenden Befehl im Abschnitt scripts:

“prepack”: “json -f package.json -I -e \”delete this.devDependencies; lösche this.dependencies\””,

Wir bauen mit dem Befehl npm run build:

Dadurch wird ein dist-Verzeichnis mit Bibliotheksdateien erstellt.

Gehen Sie wie folgt vor, um die Bibliothek lokal zu testen:

  • Führen Sie im Stammverzeichnis des Projekts den Befehl npm link aus, um einen symbolischen Link zu erstellen. Dieser Befehl fügt das Paket dem globalen Verzeichnis node_modules hinzu. Eine Liste der global installierten Pakete kann mit dem Befehl npm -g list –depth 0 abgerufen werden:

  • Führen Sie im Stammverzeichnis (oder einem anderen) den Befehl npm link @my-scope/react-ts-lib aus, um das Paket mit dem Projekt zu verknüpfen.

Import in App.tsx-Datei bearbeiten:

importiere { Button, BUTTON_VARIANTS } aus “@my-scope/react-ts-lib”;

Und wir starten den Entwicklungsserver mit dem Befehl npm run dev:

beachten Sie: Nachdem Sie das Paket lokal getestet haben, müssen Sie zwei Befehle ausführen:

  • npm unlink @my-scope/react-ts-lib , um die Verknüpfung des Pakets mit dem Projekt aufzuheben
  • npm -g rm @my-scope/react-ts-lib, um das Paket global aus node_modules zu entfernen.

Gehen Sie wie folgt vor, um ein Paket in der npm-Registrierung zu veröffentlichen:

Sie können die Liste der veröffentlichten Pakete auf Ihrer Profilseite sehen (in meinem Fall ist dies https://www.npmjs.com/~igor_agapov):

Erstellung und Visualisierung von Dokumentationen

Installieren des Pakets @storybook/builder-vite

als Entwicklungsabhängigkeit:

npm i -D @storybook/builder-vite

Und initialisieren Sie das Storybook mit dem folgenden Befehl:

npx sb init –builder @storybook/builder-vite

Dadurch wird ein .storybook-Verzeichnis generiert. Stellen Sie sicher, dass die Datei main.js in diesem Verzeichnis wie folgt aussieht:

module.exports = { “Geschichten”: [
“../src/**/*.stories.mdx”,
“../src/**/*.stories.@(js|jsx|ts|tsx)”
]”Addons”: [
“@storybook/addon-links”,
“@storybook/addon-essentials”,
“@storybook/addon-interactions”
]”framework”: “@storybook/react”, “core”: { “builder”: “@storybook/builder-vite” }, “features”: { “storyStoreV7”: true } }

Erstellen Sie im Stammverzeichnis eine .npmrc-Datei mit folgendem Inhalt:

Legacy-Peer-Deps=true

Erstellen Sie eine Datei src/lib/Button/Button.stories.tsx mit folgendem Inhalt:

importiere {ComponentMeta, ComponentStoryObj} aus “@storybook/react”; Schaltfläche importieren, { BUTTON_VARIANTS } aus “./Button”; // Stile importieren import “../../index.css”; // Komponentenbeschreibung und Link darauf const meta: ComponentMeta = { title: “Design System/Button”, component: Button, }; Standard-Meta exportieren; // Geschichten // Standardschaltfläche export const Standard: ComponentStoryObj = { args: { children: “primary”, }, }; // deaktivierter Schaltflächenexport const Deaktiviert: ComponentStoryObj = { args: { children: “disabled”, disabled: true, }, }; // Erfolg export const SuccessVariant: ComponentStoryObj = { args: { children: “success”, Variante: BUTTON_VARIANTS.SUCCESS, }, }; // Schaltfläche mit Click-Handler export const WithClickHandler: ComponentStoryObj = { args: { children: “click me”, onClick: () => alert(“button clicked”), }, };

Führen Sie den Befehl npm run storybook aus:




Vielleicht ist das alles, worüber ich in diesem Artikel sprechen wollte.

Ich hoffe, Sie haben etwas Neues gelernt und Ihre Zeit nicht verschwendet.

Vielen Dank für Ihre Aufmerksamkeit und viel Spaß beim Programmieren!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *