lwc storybooks poc

LWC-Storybooks-poc

LWCストーリーブックPOCは、Lightning Webコンポーネントとストーリーブックの統合です。 StoryBookのようなオープンソースプロジェクトで、ベースコンポーネント - リサイプをどのように使用できるかを示しています。ベースコンポーネントは、Lightning Design Systemを実装し、Lightning Webコンポーネントを使用して開発されています。

はじめる

プロジェクトをローカルに実行して、Storybookでベースコンポーネント - リサイプがどのように使用されているかを探ります。

1. レポをクローンします。

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

2. 依存関係をインストールします。

$ yarn install

3. ローカルビルドを実行します。このステップは、Webブラウザーを開き、http：// localhost：6006/に移動します。

$ yarn storybook

基本コンポーネントを展開するためのガイドライン

独自のプロジェクトに基本コンポーネントを展開するには、次のガイドラインに従ってください。

依存関係をインストールします

• ClassNamesバージョン2.2.6
• Lightning Design Systemバージョン2.11.0-Beta.1
• LWC WebPackプラグインバージョン0.3.0
• LWCコンパイラバージョン1.0.0
• LWCエンジンバージョン1.0.0

基本コンポーネントを実装します

• ベースコンポーネントはsrc/cフォルダーに属します。プロジェクトに必要なコンポーネントフォルダーをクローンします。たとえば、バッジフォルダーをsrc/c/badgeにクローンします。 .js-meta.xml configファイルは必要ありません。
• CSSファイルをコンポーネントフォルダーに追加します。たとえば、 src/c/badge/badge.css 。 @import "@salesforce/slds/legacy"; CSSファイル。
• <c-badge label="Default"></c-badge> Syntaxを使用して、プロジェクトのベースコンポーネントを使用します。

貢献

LWCストーリーブックPOCにご関心をお寄せいただきありがとうございます。ガイドラインを提供する基本コンポーネント - レシペスを参照してください。