storybook-framework-docusaurus

🦖 A Storybook framework to aid in developing with Docusaurus. It uses Storybook's new Frameworks API.

Features

• Adds support for Docusaurus module aliases such as @theme, @docusaurus, @generated, and @site. Theme alias loading order is also respected across core theme, plugin-provided, and swizzled components.
• Enables core Docusaurus loaders for JS, SVG, and fonts and other assets. Will prefer docusaurus-plugin-sass over Storybook's SASS loader.
• Loads the client modules and Webpack configs from all plugins.
• Applies a global decorator that wraps all components in Docusaurus React contexts, allowing the rendering of all swizzled components.

Installing and Usage

This framework assumes you're working in a project that already has Docusaurus and Storybook (^7) set up.

Install the framework

With npm:

npm i storybook-framework-docusaurus

Or with yarn:

yarn add storybook-framework-docusaurus

Enable the framework

Set "storybook-framework-docusaurus" as the framework in your Storybook .storybook/main.js file.

"framework": {
  "name": "storybook-framework-docusaurus",
  "options": {
    "ignoreClientModules": [
      "ignored-custom-plugin"
    ],
    "ignoreWebpackConfigs": [
      "ignored-custom-plugin"
    ]
  },
},

This framework extends @storybook/react-webpack5, so you can use all its existing options in addition to the following:

• ignoreClientModules will ignore the client modules from the listed Docusaurus plugins.
• ignoreWebpackConfigs will ignore the Webpack configs from the listed Docusaurus plugins.

That's it! You should now be able to write stories that make use of Docusaurus components.

License

MIT