Setup
I'm writing this assuming you have knowledge and familiarity with setting up Lerna. Also, the scenario here is assuming you have a bunch of reusable components in their own dedicated package. Let me know if you have questions on steps that I cover at a high level.
Setup checklist
Repo is setup
mkdir superDuperRepo
git init
git add .
Lerna as a dev dependency
yarn init
yarn add lerna --dev
lerna init
lerna.json
// superDuperRepo/lerna.json
{
"packages": [
"packages/*"
],
"version": "independent",
"npmClient": "yarn",
"useWorkspaces": true
}
package.json
// superDuperRepo/package.json
{
"name": "superDuperRepo",
"private": true,
"workspaces": [
"packages/*"
]
}
Drop reusable components in their own package
superDuperRepo/packages/reusableComponents
Add storybook as a package
lerna create storybook
cd packages/storybook
npx sb init
// delete boilerplate stories
yarn add react
yarn add react-dom
Yarn workspaces
yarn config set workspaces-experimental true
Add reusable components package to the storybook package
lerna add landing --scope=storybook --dev
Resolving reusable components package files
// superDuperRepo/packages/storybook/.storybook/webpack.config.js
const path = require("path")
module.exports = ({ config }) => {
// a bunch of other rules here
config.resolve.modules = [
path.resolve(__dirname, "..", "..", "reusableComponents", "src"),
"node_modules",
]
/*
// Alternately, for an alias:
config.resolve.alias: {
"@styles": path.resolve(__dirname, "..", "src", "styles")
}
*/
return config
}
Creating the story
// superDuperRepo/packages/storybook/stories/Button.stories.jsx
import React from 'react'
import Button from 'reusableComponents/src/Button'
export default {
component: Button,
title: 'Reusable Components/Button',
}
const Template = args => <Button {...args} />
export const Default = Template.bind({})
Default.args = {
title: 'Submit'
}
Run Storybook
yarn storybook
Conclusion
At this point you should be able to run storybook and view the single story (especially if you deleted the boilerplate stories). It'd be lovely if there was an automated way of creating stories for all the components that I have. Still trying to figure that one out.
Helpful troubleshooting notes
lerna list
lerna bootstrap
lerna link
lerna changed
yarn workspaces info
Top comments (2)
The most recent versions of storybook didn't create a
.storybook/webpack.config.js
when runningnpx sb init
I had to run
yarn lerna create storybook
instead oflerna create storybook