Zenn
🌟

Chakra UI を Storybook で使う。

2021/12/04に公開
Next.js
Storybook
Chakra UI
tech

Chakra UI を用いているNext.js のプロジェクトで Storybook を使う備忘録です。

Chakra UI とは

Chakra UIは ReactのUIコンポーネントライブラリの一つです。特徴としてはダークモードに標準で対応していたり、typescriptで書かれているといった点があげられます。

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
https://chakra-ui.com/

Chakra UI が便利そうなのでアプリケーション開発で使ってみました。開発にあたってコンポーネントベースに開発したいのでstorybookも導入しようと使ってみたところちょっと詰まったのでその辺について書きたいと思います。

導入

Chakra UIが使われているコンポーネントをstorybookで適用できるようにする必要があります。

preview.tsx を Chakra UI の Providerでラップする

// .storybook/preview.tsx 
import { ChakraProvider } from '@chakra-ui/react';

const withChakra = (StoryFn: Function) => {
    return (
        <ChakraProvider theme={}>
            <div id="story-wrapper">
                <StoryFn />
            </div>
        </ChakraProvider>
    );
};

export const decorators = [withChakra];

.storybook/preview.tsx でStoryFn をChakraProviderでラップします。themeが必要であれば、ChakraProviderに渡してあげます。

main.jsでemotionをaliasに追加する

main.jsにはstoriesのpathやaddonsを書いていると思います。ここのwebpackFinalに以下のようにemotionをaliasに追加してください。

// .storybook/main.ts

module.exports = {
    stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
    addons: ['@storybook/addon-links'],
    },
    webpackFinal: async (config) => {
        return {
            ...config,
            resolve: {
                ...config.resolve,
                alias: {
                    ...config.resolve.alias,
                    '@emotion/core': toPath('node_modules/@emotion/react'),
                    'emotion-theming': toPath('node_modules/@emotion/react'),
                },
            },
        };
    },
};

Module not found: Can't resolve 'fs' に対応する

国際化対応のためにnext-i18next 等のモジュールを入れていると Module not found: Can't resolve 'fs' が出てしまいます。Webpackconfigを介して別のエイリアスを指すエイリアスを追加する必要があります。

// .storybook/main.ts

module.exports = {
  // 省略
    webpackFinal: async (config) => {
        return {
            ...config,
            resolve: {
                ...config.resolve,
                alias: {
                    ...config.resolve.alias,
                    '@emotion/core': toPath('node_modules/@emotion/react'),
                    'emotion-theming': toPath('node_modules/@emotion/react'),
                    'next-i18next': 'react-i18next',  // ← これ
                },
            },
        };
    },
};

上記らの対応で問題なく動きました。Chakra UI は少しbugが目立ちますが、使っていて楽しいので今後も使っていきたいですね。

参照

https://github.com/chakra-ui/chakra-ui

Discussion