The storybook guide is outdated

[zhaoyao91]

https://github.com/ryansolid/solid/blob/main/documentation/storybook.md

it seems this guide is outdated and not suit for current version of storybook.

[zhaoyao91]

with the newest storybook, I created a simple demo but it just works, I didn't even createRoot or render the component, but it does indeed react to the count signal. I am not sure why and if I am missing something to correctly config the storybook.

import { Meta } from "@storybook/html";
import { createSignal } from "solid-js";

const meta: Meta = {
  title: "Example/Button",
};

export default meta;

export const Basic = () => {
  return <Button />;
};

const Button = () => {
  const [count, setCount] = createSignal(0);
  return <button onClick={() => setCount(count() + 1)}>{count()}</button>;
};

[zhaoyao91]

oops, without createRoot, it would lose inner reactivity. But there is another question, how to invoke dispose? after HRM and switch tabs several times, the effect does not get cleaned.

[ryansolid]

I haven't had a chance to update the docs or even review this but this example apparently works: https://github.com/rturnq/storybook-solid

[ryansolid]

Honestly if anyone wants to help out and update the docs.. much appreciated.

[joakimbeng]

I got it working by having a .storybook/main.js like this:

const { createRoot } = require("solid-js");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  decorators: [(story) => createRoot(() => story())],
};

and in my .babelrc:

{
  "presets": ["solid"]
}

(I removed any other old storybook config files)