Storybook: Add how to install storybook for use with stencil-component-starter (or even better, make a version for that)

[franktopel]

Bug or support request summary

I'd love to use storybook for the web components library our company is about to create using StencilJS. Can you please add information as on how to get that up & running?

Steps to reproduce

Create a project from stencil-component-starter, then open up a terminal and issue getstorybook.

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/polymer

Affected platforms

any

Screenshots / Screencast / Code Snippets (Optional)

@connexo > getstorybook

 getstorybook - the simplest way to add a storybook to your project.

 • Detecting project type. ✓
    We couldn't detect your project type. (code: UNDETECTED)
    Please make sure you are running the `getstorybook` command in your project's root directory.
    You can also follow some of the slow start guides: https://storybook.js.org/basics/slow-start-guide/

[Hypnosphi]

@storybooks/team looks like we need a slow start guide for polymer / web components

[igor-dv]

Stencil is a "compiler", that combines TS + Angular-like-components syntax + JSX. Also, It might be tested with Jest (which is good for example to be able supporting storyshots). As the result, it compiles to web-components.

1. TS - TS 🤷‍♂️
2. 
   
   • Angular-like-components - here I mean all kind of decorators like @Prop and @Components with all fields like styleUrl, that have to be treated in a special way (like we do with angular-cli integration to webpack).
   
   
3. JSX = support for composition

So storybook/polymer can't help here. To be more specific it won't fully support all of the Stencil "snowflakes" and integrating it there will be a pain in the ass.

[igor-dv]

I think it will be a very good addition to Storybook, since it will open a channel to the ionic users. But as a separate app.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[igor-dv]

Related: #1870
@tonai, can you share your findings ?

[tonai]

Of course :)

From stencil-component-starter :

npm install --save-dev @storybook/[email protected] polymer-webpack-loader lit-html

Then add the script line in the package.json:

{
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook -s www"
  }
}

Create the .storybook folder and a .storybook/config.js file:

import { configure } from '@storybook/polymer';
const req = require.context('../src', true, /\.stories\.js$/);
function loadStories() {
  req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module);

And also a .storybook/preview-head.html with:

<script src="/build/mycomponent.js"></script>
<link rel="stylesheet" type="text/css" href="/build/mycomponent.css">

Finally create a story, for example src/components/my-component/my-component.stories.js :

import { storiesOf } from '@storybook/polymer';
const stories = storiesOf('My component', module);
stories.add('default', () => (`<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>`));

There is still warnings when you run npm run storybook but the component display correcly.

[seaneking]

👍 This is great news - last time I tried @storybook/polymer things got painful as soon as you got away from the default Polymer 2 stack (HTML imports, webcomponentsjs polyfills, etc). If this does work smoothly with other web components libraries (or just vanilla web components), would be a great opportunity to rename the package to @storybook/webcomponents before it's out of alpha, so it's not hard tied to Polymer. Especially since Polymer itself is now insta-deprecating Polymer 3 in favour of LitElement.

[binarybro]

@tonai Thank you for your guide. It's now working for me, with minor changes:

• Added react, react-dom and velocity-react to devDependencies.
• omitted the stylesheet from .storybook/preview-head.html, as StencilJS is not emitting CSS in my installation.

[igor-dv]

Since everyone is happy, I am closing this now 😃
You all are welcome to PR the "how".

[silentHoo]

I've used a slight different approach: Vue.js-Storybook and added Stencil there. Here's how I've made it: https://github.com/silentHoo/stencil-storybook-spike

[seaneking]

@igor-dv is renaming the @storybook/polymer package something the storybook team would consider? Should I file an issue for it? Just think this kind of confusion will keep coming up if the plugin is associated closely w/ Polymer vs. WC in general.

[ndelangen]

@seaneking yes, that's on the table, would you want to help us do it?

Creating a new issue for is, possibly even a PR would be best.

[seaneking]

Sure, but I don't have access to publish to NPM or change GitHub repo names, what would you like a PR for? AFAIK there's no docs for it yet, just the stuff in the GitHub repo

[seaneking]

One potential issue is the getstorybook CLI - you could make it check for a bunch of common WC libraries (Polymer, Stencil, Svelte, SkateJS), but that doesn't seem very robust (nor account for vanilla web components), since most are moving towards loose collections of base classes and mixins (eg: Polymer's LitElement).

That said, I've always wondered why getstorybook didn't prompt the user to choose a quick start option if it couldn't auto detect the project, rather than just failing outright. That would address this, check for common WC setups and if none found the user can select to quick-scaffold a webcomponents setup anyway.

[igor-dv]

We have a pure @storybook/html version in a new 4 alpha release, which is framework agnostic. Maybe there will be easier to use it

[ernsheong]

Proper (website) documentation for framework-agnostic web components (e.g. pwa-starter-kit, LitElement) would be appreciated. After all, web components is the future! 😄

[Pupskuchen]

Is there a way this would work with hot module reloading? So I could develop web components using stencil and get a live display of them by Storybook?
@tonai does your setup provide this functionality or does it run without HMR?
I can't seem to get this running without it being static…

[auderer]

For anyone wondering how to set up a build script with @tonai's solution, here's what I figured out:

Add this to your scripts:

"build:storybook": "build-storybook -c .storybook -s www -o .storybook-build"

Now you can npm run build:storybook and you can deploy the newly created ".storybook-build" folder to a web server.

[tonai]

hi @michaelauderer,
sorry but this setup does not provide HMR (for now).

I don't how if there is a way to tell storybook to launch the build script of stencil when it detect a file change.
Or may be the solution is to delegate the watch to another tool like npm-watch for example.

[igor-dv]

if stencil has its own watcher, you can run Storybook and this watcher in parallel in two command windows. Or using concurrently you can even combine them into one script.

[tonai]

Yes @igor-dv is right, it is not optimal (it requires you to refresh the page manually) but it works.

I've tried the following scripts with the npm-run-all package:

{
  "build": "stencil build",
  "start": "stencil build --dev --watch --serve",
  "storybook": "start-storybook -p 9009 -s www",
  "storybook:watch": "run-p start storybook"
}

So if I run storybook:watch it will recompile both storybook and stencil.

[Edd-Strickland]

New Starter build for Current stencil and SB 5 to be created

[Edd-Strickland]

Closed in favour of reopening https://github.com/storybooks/storybook/issues/4600