Chakra UIとtypescriptをstoryBookで使う

完成品

https://github.com/mochi-sann/chakra-ui-and-nextjs-storybook

プロジェクトのセットアップ

yarn create next-app --example with-chakra-ui-typescript <YOUR_APP_NAME>

storyBook といくつか必要なライブラリーを入れます。

yarn add react-icons
yarn add -D storybook-addon-performance
npx sb init

では起動してみましょう

yarn storybook

のコマンドを入力して http://localhost:6006/ を開くとこのように表示されるはずです。

では .storybook/main.js をこのように編集してください

.storybook/main.js

const path = require("path");

const toPath = (_path) => path.join(process.cwd(), _path);

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  typescript: {
    reactDocgen: false,
  },
  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"),
        },
      },
    };
  },
};

preview.js は preview.tsx にファイル名を変更して

preview.tsx

import {
  ChakraProvider,
  extendTheme,
  Flex,
  IconButton,
  useColorMode,
  useColorModeValue,
  theme,
} from "@chakra-ui/react"
import { StoryContext } from "@storybook/react"
import * as React from "react"
import { FaMoon, FaSun } from "react-icons/fa"
import { withPerformance } from "storybook-addon-performance"

/**
 * Add global context for RTL-LTR switching
 */
export const globalTypes = {
  direction: {
    name: "Direction",
    description: "Direction for layout",
    defaultValue: "LTR",
    toolbar: {
      icon: "globe",
      items: ["LTR", "RTL"],
    },
  },
}
//ダークモードとライトモードの切替
const ColorModeToggleBar = () => {
  const { toggleColorMode } = useColorMode()
  const SwitchIcon = useColorModeValue(FaMoon, FaSun)
  const nextMode = useColorModeValue("dark", "light")

  return (
    <Flex justify="flex-end" mb={4}>
      <IconButton
        size="md"
        fontSize="lg"
        aria-label={`Switch to ${nextMode} mode`}
        variant="ghost"
        color="current"
        marginLeft="2"
        onClick={toggleColorMode}
        icon={<SwitchIcon />}
      />
    </Flex>
  )
}

const withChakra = (StoryFn: Function, context: StoryContext) => {
  const { direction } = context.globals
  const dir = direction.toLowerCase()

  return (
    <ChakraProvider theme={extendTheme({ direction: dir })}>
      <div dir={dir} id="story-wrapper" style={{ minHeight: "100vh" }}>
        <ColorModeToggleBar />
        <StoryFn />
      </div>
    </ChakraProvider>
  )
}

export const decorators = [withChakra, withPerformance]

では storybook のファイルを作ってちゃんと動くか確かめてみましょう

src/components/CTA.stories.tsx ファイルを作って

src/components/CTA.stories.tsx

import React from "react";
import { Story, Meta } from "@storybook/react";

import { CTA } from "./CTA";

export default {
  title: "CTA",
  component: CTA,
  argTypes: {
    backgroundColor: { control: "color" },
  },
} as Meta;

const Template: Story = (args) => <CTA {...args} />;

export const Primary = Template.bind({});

このように書いて

yarn storybook

で起動して画像のように表示されれば完成です。

また右上のアイコンをクリックすれば画像のようにダークモードになるはずです

参考にしたもの

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

https://storybook.js.org