{"id":26630283,"url":"https://github.com/elite174/storybook-solid-js","last_synced_at":"2025-09-01T19:39:10.566Z","repository":{"id":63284481,"uuid":"546817939","full_name":"elite174/storybook-solid-js","owner":"elite174","description":"The basic setup of storybook for solid-js","archived":false,"fork":false,"pushed_at":"2024-12-20T04:57:46.000Z","size":1195,"stargazers_count":79,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-20T14:05:26.437Z","etag":null,"topics":["solid-js","storybook","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elite174.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-06T17:41:49.000Z","updated_at":"2025-01-15T11:11:26.000Z","dependencies_parsed_at":"2025-04-02T20:10:38.713Z","dependency_job_id":"49da4330-bc86-4e66-9288-72471e2da759","html_url":"https://github.com/elite174/storybook-solid-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/elite174/storybook-solid-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elite174%2Fstorybook-solid-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elite174%2Fstorybook-solid-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elite174%2Fstorybook-solid-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elite174%2Fstorybook-solid-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elite174","download_url":"https://codeload.github.com/elite174/storybook-solid-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elite174%2Fstorybook-solid-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273182672,"owners_count":25059809,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-01T02:00:09.058Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["solid-js","storybook","typescript"],"created_at":"2025-03-24T13:17:58.751Z","updated_at":"2025-09-01T19:39:10.536Z","avatar_url":"https://github.com/elite174.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storybook for Solid-js example\n\nThis repo is the example of adoption storybook for solid-js.\n\nThanks to guys from this thread: https://github.com/solidjs/solid-docs-next/issues/35\n\n## Instructions\n\n### Storybook v8\n\n~~Everything works out of the box~~. Don't forget to render JSX component in your story file to make HMR work (see `Counter.stories.tsx` file).\n\nSolid works the best with storybook with @storybook/html-vite configuration. So init your storybook project with HTML type and add the following code:\n\npreview.js\n```ts\nexport const decorators = [\n  (Story) =\u003e {\n    const solidRoot = document.createElement(\"div\");\n\n    render(Story, solidRoot);\n\n    return solidRoot;\n  },\n];\n```\n\nmain.js\n```ts\nexport const config = {\n  // some default fields\n  // ...\n  viteFinal(config) {\n    // make solid work\n    config.plugins?.unshift(solid({ hot: false }));\n\n    return config;\n  }\n};\n```\n\n### Storybook v7\n\nYou need to change the following files.\n\n**1. .storybook/main.js**\n\n```js\nmodule.exports = {\n  stories: [\"../src/**/*.mdx\", \"../src/**/*.stories.@(js|jsx|ts|tsx)\"],\n  addons: [\n    \"@storybook/addon-links\",\n    \"@storybook/addon-essentials\",\n    \"@storybook/addon-interactions\",\n  ],\n  framework: {\n    name: \"@storybook/html-vite\",\n    options: {},\n  },\n  docs: {\n    autodocs: \"tag\",\n  },\n};\n```\n\n**2. .storybook/preview.js**\n\nIf you want HMR works for solid you need to add `/* @refresh reload */` to the beginning of this file however it's not the only change.\nSee the details below.\n\n```js\n/* @refresh reload */\n/**\n * Don't forget the line above for HMR!\n * \n * Note: for some reason HMR breaks if you change .stories file,\n * however reloading the page fixes this issue\n */ \n\nimport { render } from \"solid-js/web\";\n\nexport const decorators = [\n  (Story) =\u003e {\n    const solidRoot = document.createElement(\"div\");\n\n    render(Story, solidRoot);\n\n    return solidRoot;\n  },\n];\n\n/** Autogenerated by Storybook */\nexport const parameters = {\n  actions: { argTypesRegex: \"^on[A-Z].*\" },\n  controls: {\n    matchers: {\n      color: /(background|color)$/i,\n      date: /Date$/,\n    },\n  },\n};\n\n```\n\n**That's it!**\n\n#### HMR\n\nTo make HMR work for your component you need to render it as JSX:\n\n```tsx\n// Correct! HMR works!\n// Let's assume that this is storybook meta object\nexport default {\n  // ...\n  render: (props) =\u003e \u003cCounter {...props} /\u003e,\n  // ...\n} as Meta\u003cComponentProps\u003ctypeof Counter\u003e\u003e;\n```\n\nIf you write the code like this, it won't work:\n\n```tsx\n// Wrong! HMR doesn't work!\n// Let's assume that this is storybook meta object\nexport default {\n  // ...\n  render: Counter,\n  // ...\n} as Meta\u003cComponentProps\u003ctypeof Counter\u003e\u003e;\n```\n\nHere's an example story for `Counter` component.\n\n```tsx\nimport { Counter, CounterProps } from \"../Counter\";\n\nimport type { Meta, StoryObj } from \"@storybook/html\";\nimport type { ComponentProps } from \"solid-js\";\n\ntype Story = StoryObj\u003cCounterProps\u003e;\n\nexport const Default: Story = {\n  args: {\n    initialValue: 12,\n    theme: \"default\",\n  },\n};\n\nexport default {\n  title: \"Example/Counter\",\n  tags: [\"autodocs\"],\n  /**\n   * Here you need to render JSX for HMR work!\n   *\n   * render: Counter won't trigger HMR updates\n   */\n  render: (props) =\u003e \u003cCounter {...props} /\u003e,\n  argTypes: {\n    initialValue: { control: \"number\" },\n    theme: {\n      options: [\"default\", \"red\"],\n      control: { type: \"radio\" },\n    },\n  },\n} as Meta\u003cComponentProps\u003ctypeof Counter\u003e\u003e;\n\n```\n\n### Storybook v6\n\nTo see the files for the storybook v6 see [THIS](https://github.com/elite174/storybook-solid-js/tree/16466f35def5ebe4b28603211d8d825d690fbe40).\n\n#### 1. Initialize storybook in your repo as [html project](https://storybook.js.org/docs/html/get-started/install):\n\n```\nnpx storybook init --type html\n```\n\n#### 2. Update storybook config files in `.storybook` folder as follows:\n\n*main.js*\n\nAdd `vite-plugin-solid` to storybook config. \n```js\nconst Solid = require(\"vite-plugin-solid\");\n\nmodule.exports = {\n  stories: [\"../src/**/*.stories.mdx\", \"../src/**/*.stories.@(js|jsx|ts|tsx)\"],\n  addons: [\n    \"@storybook/addon-links\",\n    \"@storybook/addon-essentials\",\n    \"@storybook/addon-interactions\",\n  ],\n  framework: \"@storybook/html\",\n  core: {\n    builder: \"@storybook/builder-vite\",\n  },\n  features: {\n    storyStoreV7: true,\n  },\n  \n  // Add solid plugin here\n  async viteFinal(config, { configType }) {\n    config.plugins.unshift(Solid({ hot: false }));\n\n    return config;\n  },\n};\n```\n\n*preview.js*\n\nCustomize your `preview.js` file as follows.\n\n```js\nimport { render } from \"solid-js/web\";\n\nexport const parameters = {\n  actions: { argTypesRegex: \"^on[A-Z].*\" },\n  controls: {\n    matchers: {\n      color: /(background|color)$/i,\n      date: /Date$/,\n    },\n  },\n};\n\nexport const decorators = [\n  (Story) =\u003e {\n\n    const root = document.getElementById(\"root\");\n    const solidRoot = document.createElement(\"div\");\n\n    solidRoot.setAttribute(\"id\", \"solid-root\");\n    root.appendChild(solidRoot);\n\n    render(Story, solidRoot);\n\n    return solidRoot;\n    // return createRoot(() =\u003e Story()); // do not work correctly https://github.com/solidjs/solid/issues/553\n  },\n];\n```\n\n## Comments\n\n- _.npmrc_ file is necessary because I use npm v8, however storybook doesn't support it, and that's why it requires this file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felite174%2Fstorybook-solid-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felite174%2Fstorybook-solid-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felite174%2Fstorybook-solid-js/lists"}