gumdrops

Gumdrops

Dieses Projekt enthält wiederverwendbare JavaScript -React -Komponenten, die Sie in Ihr Projekt importieren können.

Voraussetzungen

Gumdrops müssen mit dem Gumgum Design -System (Beton) verwendet werden, das alle Stile sowie Sass behandelt.

Fügen Sie Ihrem Projekt Gumgum-Design und Sass hinzu.

In der Dokumentation des konkreten Designsystems für Themen, CSS -Dienstprogramme und mehr finden Sie.

Dokumentation

Siehe Dokumentation für diese Bibliothek und ihre Komponenten.

Installation

Um eine bestimmte Version hinzuzufügen, können Sie yarn add [email protected] (ersetzen Sie 1.0.0 durch die gewünschte Version oder lassen Sie sie aus, um die neueste Version zu erhalten).

Die aktuellen und früheren Versionen finden Sie in Changelog.md

Verwendung

Die Bibliothek exportiert ihre Komponenten als ES -Module, sodass Sie beispielsweise nur das importieren können, was Sie benötigen:

 import Button from 'gumdrops/Button';
import Badge from 'gumdrops/Badge';
import Toggle from 'gumdrops/Toggle';

Befolgen Sie die Dokumente, um Ihre Komponente mit den richtigen Requisiten zu verwenden.

Für die Wiederherstellung wird ein CommonJS -Bundle bereitgestellt. Es enthält die gesamte Bibliothek und kann verwendet werden mit:

 const gumdrops = require('gumdrops');
// Or
import gumdrops from 'gumdrops';

Aus Bequemlichkeit und Nutzung direkt im Browser gibt es auch eine UMD in:

 node_modules/gumdrops/gumdrops.umd.js

Fehlerbehebung testen

Leider ist ESM für einige aktuelle Tools noch nicht weit verbreitet, und die Ausführung von Tests mit Komponenten aus dieser Bibliothek kann aufgrund der ES -Modulsyntax Fehler aufnehmen. Um dies zu verhindern, probieren Sie Folgendes aus:

• Für Scherz : JEST verwendet eine eigene Implementierung des Forderung und versucht, Dateien mit ihm und Babel-Jest zu analysieren, und ignoriert standardmäßig node_modules, was zu Syntaxfehlern aus den Import-Anweisungen führt. Fügen Sie die nächste Zeile Ihrer Scherzkonfiguration hinzu, damit sie alles in NODE_MODULES ignoriert, mit Ausnahme dieser Bibliothek:

   "transformIgnorePatterns": ["/node_modules/(?!gumdrops)"]
  

• Für Mocha + WebPack : Es ist sehr wahrscheinlich, dass Ihre Mokka- und Webpack-Konfigurationen auch das Verzeichnis node_modules ignorieren, um Syntaxfehler zu verhindern, Babel durch eine Konfigurationsdatei zu laden, anstatt --compilers js:babel-register oder --require babel-register direkt zu rufen.

Der Dateiinhalt kann so einfach sein wie:

 // testSetup.js
require('babel-register')({
    ignore: /node_modules/(?!gumdrops)/
});

// Import it into mocha or mocha-webpack:
--require ./testSetup.js

Voraussetzungen für das lokale Ausführen von Projekten

• Git- und Git -Fluss
• NodeJS/NPM & Garn: Mindestbedarfsversion - Wir haben mit den folgenden Versionen getestet - node: ^16.16.0, npm: ^5.5.1, yarn ^1.2.1
• Installieren Sie die Eslint -Validatoren und schöner auf Ihrem Editor Ihrer Wahl. Wir haben die Konfigurationsdateien auf dem Stamm des Projekts .eslinrc und .prettierrc . Es gibt einen Prekamit -Haken, um die schöneren Skripte in den Dateien auszuführen.

Laufen Storybook lokal

 yarn # install dependencies
yarn run storybook

Öffnen Sie dann http://localhost:6006 in Ihrem Browser. Weitere Informationen finden Sie unter React Storybook Repo.

Beitragen

Informationen zu diesem Projekt finden Sie unter Beitrags.md.

Mitwirkende

Ein besonderes Dankeschön an alle unsere Mitwirkenden! Plus Folgendes, der zu Github gezogen ist: David Mejorado, Jose Santos, Mike Watt

Lizenz

Apache 2.0

Wichtiger Hinweis: In diesem Projekt werden keine Bibliotheken Dritter umverteilt, sondern ihre Verfügbarkeit identifiziert. Die Bibliotheken, die von diesem Projekt berufen werden, unterliegen ihren Schöpferlizenzen. Denken Sie daran, alle Lizenzen in Ihren Verwendungen zu konsultieren und zu erfüllen.