BEEQ

Beeq, eine Initiative für Webkomponentenbibliothek

Dieses Repository enthält den Quellcode der im BEEQ -Designsystem vorhandenen Webkomponenten.

Paket	Version	Dokumentation
@beeq/core		Readme
@beeq/angular		Readme
@beeq/react		Readme
@beeq/vue		Readme
@beeq/tailwindcss		Readme

Euen Vor dem Start Euen

Struktur?

Das Projekt wurde als NX Monorepo strukturiert:

 ├── ? packages
  ├── ? beeq
  ├── ? beeq-angular
  ├── ? beeq-react
  ├── ? beeq-vue
  ├── ...
  ├── ? beeq-tailwindcss
  ├── ...
├── ? tools
├── package.json
├── package-lock.json

Wo:

• Pakete/Beeq: Kernbibliothek (Quelle für alle implementierten Elemente/Komponenten)
• Pakete/Beeq-Angular: Winkelspezifischer Wrapper für die BEEQ-Kernbibliothek
• Pakete/Beeq-React: React.js-spezifische Wrapper für die BEEQ-Kernbibliothek
• Pakete/Beeq-vue: Vue.js-spezifische Wrapper für die Beeq Core Library
• Pakete/Beeq-Tailwindcss: Beeqs merkmalsdurchdringliche Schwindwindcss-Konfiguration

Abhängigkeiten?

Wir empfehlen die Verwendung von Volta zur Verwaltung von Knoten- und NPM -Versionen. Der Installationsprozess ist ziemlich unkompliziert und wie auf ihrer offiziellen Website verwiesen:

Mit Volta können Sie einmal einen Knotenmotor auswählen und sich dann aufhören, sich darüber Sorgen zu machen. Sie können zwischen Projekten wechseln und nicht mehr zwischen Knoten wechseln müssen.

Sobald Sie Volta installiert haben, wechselt er bei der lokalen Wechsel in den Beeq -Ordner auf den richtigen Knoten und NPM -Versionen, die im package.json festgehalten werden. JSON:

  "volta" : {
    "node" : " 20.11.1 " ,
    "npm" : " 10.4.0 "
  }

Volta ist nicht obligatorisch.

• NodeJS v18.x oder höher
• NPM V8 oder höher

Verwendung

Die BEEQ -Komponenten werden in der Registrierung von NPM Paket Manager veröffentlicht. Sie können die @beeq/core oder einen der rahmenspezifischen Wrapper ( @beeq/angular , @beeq/react ) verwenden, abhängig vom technologischen Stapel Ihres Projekts. Stellen Sie sicher, dass die Verwendungsanweisungen für jedes Paket folgen:

• So verwenden Sie das @beeq/core -Paket
• ? So verwenden Sie das @beeq/angular Winkelpaket
• So verwenden Sie das @beeq/react -Paket
• ? So verwenden Sie das @beeq/vue -Paket
• ? So verwenden Sie das @beeq/tailwindcss Preset

Überprüfen Sie unser Storybook, um alle veröffentlichten Beeq -Komponenten zu sehen. Dort finden Sie alle APIs der Komponente (Eigenschaften, Ereignisse und Methoden) zusammen mit den Variationen, die jede Komponente zulässt.

Ausführen des Projekts? ‍

Um Komponenten im BEEQ -Designsystem zu entwickeln/zu erweitern, geben Sie dieses Repo in GitHub und klonen Sie es lokal in ein neues Verzeichnis:

git clone https://github.com/ < YOUR_GITHUB_USERNAME > /BEEQ.git BEEQ-Design-System
cd BEEQ-Design-System
git checkout main

Installation

Einfach rennen:

npm ci
# Make sure to build first the project before starting it
npm run build
npm start

Starten Sie codieren?!

Bauen ?

Für einen Produktionsbau, rennen Sie einfach:

npm run build

Prüfen ?

BEEQ verwendet Scherz für Unit-Tests sowie Scherz und Puppenspieler für End-to-End-Tests.

Sie können alle Tests einmal ausführen, indem Sie ausführen:

npm run test

Wenn Sie einen ähnlichen Fehler wie unten erhalten, versuchen Sie, den main lokal zu überprüfen und die Tests erneut auszuführen .

fatal: Not a valid object name main
fatal: No such ref: ' main '
nx affected

Komponente erzeugen

Beeq wird mit einem Komponentengenerator geliefert, der Ihnen Zeit spart, wenn Sie das Skelett für eine neue Komponente erstellen. Um den Generator zu verwenden, müssen Sie nur den folgenden Befehl ausführen und die Anweisungen in Ihrer Eingabeaufforderung CLI befolgen:

npm run g

Beitragen

? Wenn Sie in der Stimmung sind und helfen möchten, lesen Sie bitte unsere beitragenden Richtlinien und Entwicklungsstandards sorgfältig.

❗️ Wenn Sie an einer Fehlerbehebung, einer neuen Funktion usw. arbeiten, beachten Sie bitte, dass wir einem Gitflow -Workflow folgen. Befolgen Sie die Anweisungen aus den Richtlinien für Verzweigungsstrategien zur Erstellung Ihrer Filiale, wenn Sie an der Arbeit an einem Fehler/Hot -Fixing, einer neuen Funktion usw. arbeiten.

Dokumentation

Schablone

Benötigen Sie Hilfe? Schauen Sie sich hier die Schablonen -Dokumente an (https://stenciljs.com/).

Rückenwind -CSS

Wir verwenden Tailwind -CSS für den Stil der Komponenten. Sehen Sie sich hier die Dokumentation an: (https://tailwindcss.com/docs/)

Danke

Wir möchten unseren aufrichtigen Dank für Chromatik für die Bereitstellung der visuellen Testplattform ausdrücken, die es uns ermöglicht, UI -Änderungen zu überprüfen und visuelle Regressionen zu identifizieren.

Vielen Dank an das NX -Team, die uns geholfen haben, unseren CI -Prozess zu optimieren und unseren Monorepo effizient zu verwalten.