Docusaurus
Storybook addon to aid in developing with Docusaurus
npm install storybook-addon-docusaurus
672
Downloads per week
Readme View on GitHub
storybook-addon-docusaurus
🦖 A Storybook addon to aid in developing with Docusaurus.
This addon does the following:
- Applies the core Docusaurus Webpack config.
- Module aliases such as
@theme
,@docusaurus
,@generated
,@site
, etc. are recognized. This also means@theme
(and sibling aliases) respect loading order between core theme, plugin-provided, and Swizzled components. - Correctly loads SVG, fonts, MDX, and CSS modules the Docusaurus way.
- Prefers docusaurus-plugin-sass over other SASS loaders.
- Sets up resolution of assets in
staticDirectories
. - Passes the Webpack config through all plugins that have a
configureWebpack
method so they can apply their own tweaks.
- Module aliases such as
- Imports all the client modules contributed via plugins that have a
getClientModules
method, so they are loaded into the Storybook preview window.- For example, if you're using the classic theme it'll automatically load the Infima global styles and the
customCss
file you've set up.
- For example, if you're using the classic theme it'll automatically load the Infima global styles and the
⚠️ This is a work in progress! If you have time and would like to improve this addon please go ahead and open a PR.
Usage
Here's how to use this addon:
- Storybook needs to be set up in your project.
- Install the dependency with
yarn add --dev storybook-addon-docusaurus
ornpm i --save-dev storybook-addon-docusaurus
- Add
storybook-addon-docusaurus
it to the list ofaddons
in./storybook/main.js
. Learn more. - You should now be able to import components that uses Docusaurus aliases.
License
MIT