reiniergs / lwc-storybooks-poc

LWC Storybooks PoC

lwc-storybooks-poc

LWC Storybook PoC is an integration of Lightning Web Components and Storybook. It demonstrates how base-components-recipes can be used in an open-source project like Storybook. Base components implement Lightning Design System and are developed using Lightning Web Components.

Getting Started

Run the project locally to explore how base-components-recipes is used in Storybook.

1. Clone the repo.

$ git clone [e-mail]:reiniergs/lwc-storybooks-poc.git
$ cd lwc-storybooks-poc

2. Install dependencies.

$ yarn install

3. Run your local build. This step opens your web browser and navigates to http://localhost:6006/.

$ yarn storybook

Guidelines for Deploying Base Components

To deploy base components in your own project, follow these guidelines.

Install Dependencies

• 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

Implement Base Components

• Base components belong to the src/c folder. Clone the component folders you need for your project. For example, clone the badge folder to src/c/badge. You don't need the .js-meta.xml config file.
• Add a CSS file to the component folder, for example, src/c/badge/badge.css. Include @import "@salesforce/slds/legacy"; in the CSS file.
• Use the base component in your project with the <c-badge label="Default"></c-badge> syntax.

Contributing

Thank you for your interest in the LWC Storybook PoC! See the base-components-recipes contributing guidelines.