Nx、複数のReact Componentライブラリを管理するのにも結構むいているのではと感じたので、最近いろいろ使っています。ゴールとしては、@shopify/react-i18nをバンドルして翻訳可能にした形で再配布かなと。

Nxで複数のReact Componentライブラリを作成する

こんな感じでポンポンライブラリを生やすことができます。

$ yarn nx g @nrwl/react:lib --publishable --importPath @wpkyoto/some-component
$ yarn nx g @nrwl/react:lib --publishable --importPath @wpkyoto/another-component

で、それぞれにnx g @nrwl/react:storiesしてStorybookのStoryを追加していく形で今試しています。

Storybookは横断的に見たい

ドキュメントなどで紹介されている方法の場合、nx run [library-name]:storybookで各ライブラリのStorybookを起動させます。

これはこれで触りたい箇所の部分だけ見れるので便利なのですが、AWS Amplify Consoleなどに公開する時には横断的に見れるようにしたくなります。

workspace-89009a2bddf7していたのでReact版を試してみました。

.storybook/main.tsでlibs配下を全て参照させる

Storybookで参照するStoriesファイルの指定を以下のようにワイルドカード指定にします。

このようにすることで、libs配下のファイルを横断的に参照してくれるようになります。

module.exports = {
  stories: ['../libs/**/**/*.stories.@(ts|js|tsx|mdx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-knobs',
    '@storybook/addon-docs',

あとはstart-storybookを実行すればOKです。

./node_modules/.bin/start-storybook

「どのPackageに同梱されているか」をdescriptionで指定する

このままだとStorybookでみたComponentがどのPackageに入っているかわかりにくいので、addon-docsを利用して明記してやります。

まずlibs/PACKAGAE_NAME配下に.storybook/docs.tsなどでファイルを作ります。そして以下のようにaddon-docsのdescriptionにパッケージ名を追加してやりましょう。

export const defaultStorybookConfig = {
  parameters: {
    docs: {
      description: {
        component: 'npm install -S @hideokamoto/example-component',
      },
    },
  },
};

あとは各Storyファイルで上のconfigを読み込むようにしてやればOKです。

import React from 'react';
import { FrontPage } from './FrontPage';
import { defaultStorybookConfig } from '../../../.storybook/docs';
export default {
  ...defaultStorybookConfig,
  component: FrontPage,
  title: `FrontPage`,
};

export const Default = () => (
  <FrontPage />
);

mdxで個別に記述する方法もあるにはあるのですが、この方法だとあとで名前を変更したい場合などに1ファイルだけ変更で対応できるのが便利かなと思います。