Creating a Storybook Lerna package

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.