Monorepo Storybook Integration for Angular Components

How to configure Storybook within a monorepo to document and showcase reusable Angular components across multiple applications.

module.exports = {
  stories: [],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: '@storybook/angular',
  core: {
    builder: '@storybook/builder-webpack5'
  }
};

This is an example of a Storybook main configuration file (main.js or main.ts) for an Angular monorepo. It specifies empty stories array (assuming the paths will be defined later), a list of addons, the Angular framework, and the Webpack 5 builder.

const rootMain = require('../../../.storybook/main');
module.exports = {
  ...rootMain,
  stories: [...rootMain.stories, '../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [...rootMain.addons],
  webpackFinal: async (config, { configType }) => {
    // Use the existing webpack config defined in the monorepo root.
    // Additional customization can be done here.
    return config;
  }
};

This is an example of an individual library's Storybook configuration within a monorepo. It extends a root Storybook configuration (assuming it lives three directories up, in `../../../.storybook/main`) by spreading its settings and appending additional stories specific to the library.

import { Meta, Story } from '@storybook/angular/types-6-0';
import { ButtonComponent } from './button.component';

export default {
  title: 'Example/Button',
  component: ButtonComponent
} as Meta;

const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
  component: ButtonComponent,
  props: args,
});

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

This is an example of a Storybook story for an Angular component in a monorepo. The story exports default metadata and a template function for the `ButtonComponent` and defines a primary story with respective args.

import merge from 'lodash.merge';
import baseConfig from '../../../.storybook/webpack.config';

module.exports = ({ config }) => {
  return merge(config, baseConfig);
};

This is an example of how to merge a base webpack configuration (which could be shared across packages in a monorepo) with a specific package's Storybook webpack configuration, using lodash's merge function for deep merging.