storybook+react+typescriptの環境構築

前回の記事でstorybookの簡単な使い方を学んだので、typescriptを導入すると共にstyled-componentsが提供しているThemeProviderを使ってみようと思います。

ThemeProviderをラップすることでどのコンポーネントからもThemeProviderが保持しているthemeにアクセスすることができます。 こちら公式サイトになります。

www.styled-components.com

react+typescript+webpackの環境構築

まずは環境を構築するところからです。 以前記事を書いたので参考にしてみてください。

top-men.hatenablog.com

初っぱなから投げやりですが、ご了承ください。

storybookを導入

上で作成したプロジェクトフォルダに移動

cd プロジェクトフォルダ

storybookを導入するために下記のコマンドを実行

getstorybook

そうするとstoriesフォルダなどstorybookの関するものが生成されます。 一応ブラウザで確認するために以下のコマンドを実行してください。

yarn storybook

下記のように表示されていれば大丈夫です。

storybookにtypescriptを対応させる

こちらは公式サイトをなぞっていきます。

必要なモジュールをインストールします。

yarn add -D typescript awesome-typescript-loader @storybook/addon-info react-docgen-typescript-webpack-plugin jest "@types/jest" ts-jest

その後、storybookでtypesriptが使えるように.storiesの中にあるwebpack.config.jsを以下のように編集します。

const path = require("path");
const TSDocgenPlugin = require("react-docgen-typescript-webpack-plugin");
module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve("awesome-typescript-loader")
  });
  config.plugins.push(new TSDocgenPlugin()); // optional
  config.resolve.extensions.push(".ts", ".tsx");
  return config;
};

またプロジェクトフォルダ直下にtsconfig.jsonファイルを作成します。

{
  "compilerOptions": {
    "outDir": "build/lib",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es5", "es6", "es7", "es2017", "dom"],
    "sourceMap": true,
    "allowJs": false,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDirs": ["src", "stories"],
    "baseUrl": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "build", "scripts"]
}

ここではファイルの中の細かい説明は省きます。

styled-componentsの導入

今回はstyled-componentsを使っていくのでインストールします。

yarn add -D styled-components

テーマの作成

webサイト・サービスでよく使われる色を定義したテーマのファイルを作成します。 src/theme.tsファイルを作成します。

export type theme = {
  primary: string
  primaryVariant: string
  secondary: string
  secondaryVariant: string
  onPrimary: string
  onSecondary: string
}

export const theme = {
  primary: '#6200EE',
  primaryVariant: '#3700B3',
  secondary: '#03DAC6',
  secondaryVariant: '#018786',
  onPrimary: '#fff',
  onSecondary: '#000'
}

色の命名などは下記を参考にしています。

material.io

その後、src/App.tsxを開きます。

import * as React from "react";
import { theme } from "../theme";
import { ThemeProvider } from "styled-components";

const App = () => {
  return <ThemeProvider theme={theme} />;
};

export default App;

準備としてはここまでとします。 今度は実際にtypescriptでコンポーネントを作成しながら開発を進めていきたいと思います。