Using Solid with Storybook [How-To Guide]

[mnquintana]

The Storybook API has changed quite a lot since Solid's Storybook docs were written in 2019. It would be really helpful (and I think go a loooong way toward helping drive adoption, long-term) if Solid could:

1. Update the docs to reflect the latest Storybook API (hopefully everything still works with 6.2+?)
2. Abstract all these manual setup steps away with an official Solid framework plugin for Storybook (docs for how to do this here: https://storybook.js.org/docs/react/api/new-frameworks)

Storybook's become a pretty essential piece of the UI development pipeline, and at least for me, official support for it is a prerequisite for seriously considering any frontend frameworks. I miiiight be able to help with setting this up for Solid, although I haven't tried adding support for a new framework to Storybook before. 😅

[rturnq]

I created storybook-solid a little while ago but haven't had the time to really try it out much. This follows the guide from Storybook you linked. It's not ideal yet as it would need buy-in from Storybook to add it as a community supported framework to they cli tool, but it saves you from having to write boilerplate.

It would be great to get some feedback on this and once it has been tested out a bit more, then maybe we could get it added to the docs.

[ryansolid]

Yeah I'm all for this. I just haven't had the reason to look into it. I was hoping that someone would update the docs at some point. I'm not sure if stuff is different now. If anyone wants to help putting such a plugin together I'd support it and do what is needed to get it recognized. I'm just not working in Storybook personally.

[ryansolid]

On further review I think we are best setting up a repo for a plugin following the steps and not bothering with docs here. It probably should be managed independently.

[mnquintana]

Sounds good to me! Let me know if there's anything I can help with.

[grenierdev]

I was able to set up Storybook (v6.3.4) in my project using the @storybook/html mode and without the solidjs/solid#553 bug.

Turns out we just need to create our own root and call render on this new root. In .storybook/preview.js, add these lines and your good to go!

import { render } from "solid-js/web";

let disposeStory;

export const decorators = [
  Story => {
    if (disposeStory) {
      disposeStory();
    }
    const root = document.getElementById("root");
    const solid = document.createElement("div");
	 
    solid.setAttribute('id', 'solid-root');  
    root.appendChild(solid);
    disposeStory = render(Story, solid);
    return solid;
    // return createRoot(() => Story()); // do not work correctly https://github.com/solidjs/solid/issues/553
  }
]

[zettadam]

@grenierdev How did you accomplish this? I followed your decorators in ./storybook/preview.js, but I'm running into issues with Babel & JSX. What's your babel configuration? Did you have to install any Babel presets and/or plugins?

UPDATE: I use vite and vite-plugin-solid in my projects and forgot about babel-preset-solid :) It works now. Here's my .storybook/main.js:

module.exports = {
  stories: [
    '../src/**/*.stories.@(mdx|jsx)'
  ],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-links'
  ],
  babel: async (options) => ({
    ...options,
    presets: [
      'solid'
    ]
  })
}

[joel1st]

@zettadam do you happen to have a working storybook repo I/the community can take a look at? Super keen to use storybook with solid and not quite sure what piece I'm missing..

[arjun-g]

Anyone had success with using mdx with solidjs ?

[pakholeung37]

If someone wants to use storybook with vite, this would help
https://codesandbox.io/s/qx2r0?file=/.storybook/main.js:0-404

And with pnpm you need to add more devDependencies to avoid errors. Here is part of my package.json

{
  "devDependencies": {
    "@babel/core": " ^7.0.0",
    "@babel/preset-env": "^7.18.0",
    "@mdx-js/react": "1.6.22",
    "@storybook/addon-actions": "6.5.0-alpha.61",
    "@storybook/addon-backgrounds": "6.5.0-alpha.61",
    "@storybook/addon-docs": "6.5.0-alpha.61",
    "@storybook/addon-essentials": "6.5.0-alpha.61",
    "@storybook/addon-links": "6.5.0-alpha.61",
    "@storybook/addon-measure": "6.5.0-alpha.61",
    "@storybook/addon-outline": "6.5.0-alpha.61",
    "@storybook/builder-vite": "^0.1.27",
    "@storybook/client-api": "6.5.0-alpha.61",
    "@storybook/client-logger": "6.5.0-alpha.61",
    "@storybook/core-common": "6.5.0-alpha.61",
    "@storybook/html": "6.5.0-alpha.61",
    "react": "16.14.0",
    "react-dom": "16.14.0",
    "typescript": "^4.6.4",
    "vite": "^2.9.9",
    "vite-plugin-solid": "^2.2.6"
  },
}