Storybook for ReactをGitHub Pagesに公開する

Storybook for Reactで、TypeScriptとSass(Dart Sass)を使えるようにして、GitHub Pagesで手軽に公開できるようにします。

create-react-appのインストール

Storybook for Reactを使うためにはReactの環境が必要なので、Reactの環境構築ツールCreate React Appをインストールします。

terminal

npm install -g create-react-app

プロジェクト作成

terminal

//TypeScriptのテンプレートを使いたいので、--teplate typescriptオプションを付けます
npx create-react-app プロジェクト名 --template typescript

//インストールしたプロジェクトのフォルダ内に移動します。
cd プロジェクト名

//アプリを起動します。
npm start

ブラウザが起動して、Reactのロゴと、「Edit src/App.tsx and save to reload.」が表示されたら成功です。
--teplate typescriptオプションを付けてnpx create-react-appしたので、/src/App.jsxが/src/App.tsxとしてインストールされているはずです。

Sass(Dart Sass)の導入

Sassを使えるようにしていきます。

動作確認用のSCSSファイルの準備

/src/App.cssのファイル名を/src/App.scssに変更します。

忘れずにApp.scssで読み込んでいるCSSファイルをSCSSファイルに変更します。

/src/App.tsx

import "./App.css";
↓
import "./App.scss";

この時点ではまだSCSSファイルが読み込めないので、エラーになります。

Sassのインストール

アプリを終了させて、Sassをインストールします。
※node-sassだと現時点ではまだ@useが使えないようなので、他のscssファイルからの読み込みをする時に廃止予定の@importを使うことになるのでDart Sassを使います。

terminal

npm i -D sass 

動作確認

再度、アプリを起動します。

terminal

npm start

ブラウザが起動して、Reactのロゴと、「Edit src/App.tsx and save to reload.」が表示されたら成功です。

Storybookの導入

アプリを終了させて、Storybookをインストールします。

terminal

npx sb init

srcフォルダ配下に/storiesフォルダが作られるので、この中にコンポーネントを作成していくことになります。

動作確認

Storybookの起動

terminal

npm run storybook

ブラウザが起動してStorybookの画面が表示されれば成功です。

テーマ

Storybookの色や角丸、左上のロゴが変更できます。

パッケージのインストール

terminal

npm i -D @storybook/addons
npm i -D @storybook/theming

テーマファイルの作成

ファイル名は任意です。
色や数値、画像を変更して好きなデザインにしていきます。

.storybook\YourTheme.js

//Storybook Themingのインポート
import { create } from "@storybook/theming";
 
//ロゴ用の画像をインポート
import brandLogo from "../src/stories/assets/stackalt.svg";
 
export default create({
  //ベースにするデフォルトテーマ["light","dark"]
  base: "light",
 
  //不明
  colorPrimary: "hotpink",
  //左カラムメニューの選択色
  colorSecondary: "deepskyblue",
 
  // UI
  //背景色
  appBg: "white",
  //コンテンツ部分の背景色
  appContentBg: "silver",
  //ボーダー色
  appBorderColor: "grey",
  //角丸(ツールバーのメニュー選択時の小さいウィンドウ)
  appBorderRadius: 4,
 
  // Typography
  //フォント
  fontBase: '"Open Sans", sans-serif',
  fontCode: "monospace",
 
  // Text colors
  //文字色
  textColor: "black",
  //不明
  textInverseColor: "rgba(255,255,255,0.9)",
 
  // Toolbar default and active colors
  //ツールバーの文字色
  barTextColor: "silver",
  //ツールバーの選択されたメニューの文字色
  barSelectedColor: "black",
  //ツールバーの背景色
  barBg: "hotpink",

  // Form colors
  //inputの背景色
  inputBg: "white",
  //inputのボーダー色
  inputBorder: "silver",
  //input内の文字色
  inputTextColor: "black",
  //inputの角丸
  inputBorderRadius: 4,
 
  //ロゴのalt
  brandTitle: "My custom storybook",
  //ロゴのリンクURL
  brandUrl: "https://example.com",
  //ロゴ画像
  brandImage: brandLogo,
});

テーマの適用

manager.jsを新規に作成します。

.storybook\manager.js

import { addons } from "@storybook/addons";
import yourTheme from "./YourTheme";

addons.setConfig({
  theme: yourTheme,
});

設定変更

テーマ調整時は、キャッシュを効かなくすると調整しやすくなります。

package.json

"scripts": {
  //--no-manager-cacheオプションの追記
  "storybook": "start-storybook -p 6006 -s public --no-manager-cache",
},

動作確認

storybookの起動

terminal

npm run storybook

ブラウザが起動してStorybookのデザインが変更されていれば成功です。

Githubにpushする

リポジトリ作成

GitHubにアクセスして、公開用のリポジトリを作成します。
公開目的なので、Publicで作成します。

GitHub Pagesとしての公開URLは下記になりますので、それを考慮して命名します。
https://アカウント名.github.io/リポジトリ名/

ブランチ名変更

現在、branch名はmasterになっていると思いますが、Githubではmainを使うようになっているので、変更します。

terminal

//現在のブランチ名を確認
git branch

//現在のブランチ名をmainに変更する
git branch -m main

remote登録

作成したリポジトリのURLをコピーしておきます。

terminal

//GitHubに作成しリポジトリをリモートリポジトリoriginとして登録します。
git remote add origin https://github.com/アカウント名/リポジトリ名.git

//登録されたか確認します。
git remote -v

push

terminal

//ステージング
git add .

//コミット
git commit -m "コミットメッセージ"

//push
git push origin main

GitHub Pagesに公開する

gh-pagesのインストール

GitHubでgh-pagesブランチにpushすると、GitHub Pagesとして公開されるのをコマンド1回で実行できます。

terminal

npm  i -D gh-pages

package.jsonの追記

package.jsonにコマンドを追加します。

コマンド	内容
predelay	deployコマンド実行前に、自動的にStorybookのビルドを実行
deploy	storybook-staticフォルダの内容をgh-pagesブランチにpushする

package.json

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "storybook": "start-storybook -p 6006 -s public",
  "build-storybook": "build-storybook -s public",
     
     
  //追加
  "predeploy": "build-storybook",
  //追加
  "deploy": "gh-pages -d storybook-static"
}, 

.gitignoreの追記

ビルドに使われるstorybook-staticフォルダをGit管理から外したい場合は、.gitignoreに追記します。

.gitignore

/storybook-static

GitHub Pagesへのデプロイ実行

terminal

npm run deploy

表示確認

下記URLにアクセスしてStorybookが表示されれば完了です。

addonの追加

必要に応じてアドオンを追加します。
https://storybook.js.org/addons

リポジトリ

Storybookの例

外部公開されているStorybookの紹介です。

Storybook

Storybook
Storybook Design System
Marketing and docs
Storybook tutorials

その他

Airbnb Dates
AnyVision UI
AppNexus Lucid
Audi
Backpack UI(lonelyplanet)
Backpack(Skyscanner)
BBC Psammead
Carbon
Chakra UI
Circuit UI
commercetools
European Commission
GitLab UI
Grafana UI
Grommet
The Guardian
Ionic Framework
IBM Carbon
PX Blue
React95
Reaviz
Salesforce Lightning
ShareGate Orbit
SmartHR
supabase
WFP
Wix Style
Workday Canvas