react-intl-universalをStorybookに反映させる

ちょっと引っかかったのでメモ。Storybookに用意されている decorators を使えば解決する話でした。

/* .storybook/preview.js */
import React from 'react';
import intl from 'react-intl-universal';
import jaJP from './assets/locales/ja-JP.json';

const currentLocale = 'ja-JP';
const localeData = jaJP;

const withIntl = (Story) => {
  React.useEffect(() => {
    intl.init({
      currentLocale,
      locales: { [currentLocale]: localeData },
      commonLocaleDataUrls,
    });
  }, []);
  return <Story />;
};

export const decorators = [withIntl];

export するものの名前は decorators にしておく。

decoratorsの詳細は以下。
https://storybook.js.org/docs/react/writing-stories/decorators

なお、言語情報のファイルはWebpack内でcopy-webpack-pluginを使ってコピーしています。

/* .storybook/main.js */
const CopyWebpackPlugin = require('copy-webpack-plugin');
const appDir = '../src';

module.exports = {
  /* 略 */
  core: {
    builder: 'webpack5',
  },

  webpackFinal: async (initConfig) => {
    const config = initConfig;

    // 静的なファイルをコピー
    config.plugins.push(new CopyWebpackPlugin({
      patterns: [{
        from: `${appDir}/assets`,
        to: `${__dirname}/assets`,
      }],
    }));
    /* 略 */
    return config;
  },
};

おわり。