@open-wc/storybook
Storybook configuration following open-wc recommendations
Last updated a year ago by d4kmor .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @open-wc/storybook 
SYNC missed versions from official npm registry.

Demoing via storybook

Part of Open Web Components

Open Web Components provides a set of defaults, recommendations and tools to help facilitate your web component project. Our recommendations include: developing, linting, testing, building, tooling, demoing, publishing and automating.

CircleCI BrowserStack Status Renovate enabled

For demoing and showcasing different states of your Web Component, we recommend using storybook.

::: tip This is part of the default open-wc recommendation :::

Setup

npm i -g yo
npm i -g generator-open-wc

yo open-wc:demoing

Manual

  • yarn add @open-wc/storybook --dev
  • Copy at minimum the .storybook folder to .storybook
  • If you want to bring along the examples, you may also copy the stories folder.
  • Add the following scripts to your package.json
"scripts": {
  "site:build": "npm run storybook:build",
  "storybook:build": "build-storybook -o _site",
  "storybook:start": "start-storybook -p 9001"
},

Usage

Create stories within the stories folder.

npm run storybook:start

Example

The Set-Game Example has the default publishing via storybook on netlify. You can see the finished page at: https://example-set-game-open-wc.netlify.com/.

<script> export default { mounted() { const editLink = document.querySelector('.edit-link a'); if (editLink) { const url = editLink.href; editLink.href = url.substr(0, url.indexOf('/master/')) + '/master/packages/storybook/README.md'; } } } </script>

Current Tags

  • 0.2.8                                ...           latest (a year ago)

19 Versions

  • 0.2.8                                ...           a year ago
  • 0.2.7                                ...           a year ago
  • 0.2.6                                ...           a year ago
  • 0.2.5                                ...           a year ago
  • 0.2.4                                ...           a year ago
  • 0.2.3                                ...           a year ago
  • 0.2.2                                ...           a year ago
  • 0.2.1                                ...           a year ago
  • 0.2.0                                ...           2 years ago
  • 0.1.9                                ...           2 years ago
  • 0.1.8                                ...           2 years ago
  • 0.1.7                                ...           2 years ago
  • 0.1.6                                ...           2 years ago
  • 0.1.5                                ...           2 years ago
  • 0.1.4                                ...           2 years ago
  • 0.1.3                                ...           2 years ago
  • 0.1.2                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago

Copyright 2014 - 2016 © taobao.org |