lwc storybooks poc

LWC-Storybooks-poc

LWC Storybook POC ist eine Integration von Lightning -Webkomponenten und Storybook. Es zeigt, wie Basiskomponenten-Recipes in einem Open-Source-Projekt wie Storybook verwendet werden können. Basiskomponenten implementieren ein Blitzentwurfssystem und werden mit Lightning -Webkomponenten entwickelt.

Erste Schritte

Führen Sie das Projekt lokal aus, um zu erforschen, wie Basiskomponenten-Recipes in Storybook verwendet werden.

1. Klonen Sie das Repo.

$ git clone [email protected]:reiniergs/lwc-storybooks-poc.git
$ cd lwc-storybooks-poc

2. Abhängigkeiten installieren.

$ yarn install

3. Führen Sie Ihren lokalen Build durch. Dieser Schritt öffnet Ihren Webbrowser und navigiert zu http: // localhost: 6006/.

$ yarn storybook

Richtlinien für die Bereitstellung von Basiskomponenten

Befolgen Sie diese Richtlinien, um Basiskomponenten in Ihrem eigenen Projekt bereitzustellen.

Abhängigkeiten installieren

• ClassNames Version 2.2.6
• Lightning Design System Version 2.11.0-beta.1
• LWC WebPack Plugin Version 0.3.0
• LWC Compiler Version 1.0.0
• LWC Engine Version 1.0.0

Basiskomponenten implementieren

• Basiskomponenten gehören zum src/c -Ordner. Klonen Sie die Komponentenordner, die Sie für Ihr Projekt benötigen. Klonen Sie beispielsweise den Abzeichenordner in src/c/badge . Sie benötigen nicht die Konfigurationsdatei .js-meta.xml .
• Fügen Sie dem Komponentenordner eine CSS -Datei hinzu, z. src/c/badge/badge.css . Integrieren @import "@salesforce/slds/legacy"; In der CSS -Datei.
• Verwenden Sie die Basiskomponente in Ihrem Projekt mit der <c-badge label="Default"></c-badge> syntax.

Beitragen

Vielen Dank für Ihr Interesse am LWC Storybook POC! Siehe die Basiskomponenten-Recipes, die Richtlinien beitragen.