How to Embed StencilJS components inside Storybook React App?

18
votes

I'm trying to integrate Stencil and Storybook inside the same project. I've been following this set up guide and this one however one of the steps is to publish the library of components to NPM and that's not what I want.

I have this repo which I've configured with components library (src folder) and with the reviewer of those components with Storybook, which resides in the storybook folder.

The problem is that when I compile the components using Stencil and copy the dist folder inside the Storybook app and import the component nothing renders. Tweaking the configuration using custom head tags I was able to import it correctly however no styles where applied.

When I open the network panel there is some error when importing the component:

Error in console

And thus the component is present in the DOM but with visibility set to hidden, which I think it does when there is an error.

This is the component au-button:

import { Component } from '@stencil/core';

@Component({
  tag: 'au-button',
  styleUrl: 'button.css',
  shadow: true
})
export class Button {
  render() {
    return (
      <button class="test">Hello</button>
    );
  }
}

Here is the story my component:

import React from 'react';
import { storiesOf } from '@storybook/react';

import '../components/components.js'

storiesOf('Button', module)
  .add('with text', () => <au-button></au-button>)

These are the scripts inside the Storybook app:

"scripts": {
    "storybook": "start-storybook -p 9009",
    "build-storybook": "build-storybook",
    "copy": "cp -R ./../dist/* components"
  },

And the workflow is as follows:

  1. Launch storybook
  2. Make changes in the component
  3. Execute build command
  4. Execute copy command

Also, I would like to automate the developer experience, but after I solve this problem first.

Any ideas of what I could be doing wrong?

3
javascriptreactjsstorybookstenciljs
did you find a solution to your problem? I'm trying to implement the Stencil dist contents in a similar way and can't get component to render either. – Lounge9
Was playing around with stencil and bootstrap and needed to set shadow:false to get the styles to apply. If the CSS isn't configured for shadow dom it won't find it. – toxaq

3 Answers

2
votes

Sample for this could be found in the repo https://github.com/shanmugapriyaEK/stencil-storybook. It autogenerates stories with knobs and notes. Also it has custom theme in it. Hope it helps.

1
votes

I'm using @storybook/polymer and it's working for me really well.

following your example:

import { Component } from '@stencil/core';

@Component({
  tag: 'au-button',
  styleUrl: 'button.css',
  shadow: true
})
export class Button {
  render() {
    return (
      <button class="test">Hello</button>
    );
  }
}

the story would be:

import { storiesOf } from '@storybook/polymer';

storiesOf('Button', module)
  .add('with text', () => <au-button></au-button>)

the scripts in the package.json:

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

the storybook config file:

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

and storybook preview-head.html you have to add to the body the following:

<body>
    <div id="root"></div>
    <div id="error-message"></div>
    <div id="error-stack"></div>
</body>
0
votes

I've been following this set up guide and this one however one of the steps is to publish the library of components to NPM and that's not what I want.

My reading of those guides is that they're stating “publish to NPM” as a way to have your files at a known URL, that will work most easily for deployment.

Without doing that, you'll need to figure out a different deployment strategy. How will you get the build products – the dist directory and static files – published so that your HTML will be able to reference it at a known URL? By choosing to diverge from the guidelines, that's the problem you have to address manually instead.

Not an insurmountable problem, but there is no general solution for all. You've chosen (for your own reasons) to reject the solution offered by the how-to guides, which means you accept the mantle of “I know what I want” instead :-)