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が表示されれば完了です。

https://アカウント名.github.io/リポジトリ名/



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

## リポジトリ
https://github.com/takeshisakuma/storybook_react_typescript_sass

## Storybookの例

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



### Storybook

[Storybook](https://next--storybookjs.netlify.app/official-storybook/)
[Storybook Design System](https://5ccbc373887ca40020446347-qbeeoghter.chromatic.com/)
[Marketing and docs](https://master--5be26744d2f6250024a9117d.chromatic.com/)
[Storybook tutorials](https://master--5cf841a3f3e3d200208ffc74.chromatic.com/)

### その他
[Airbnb Dates](http://airbnb.io/react-dates/)
[AnyVision UI](http://storybook.anyvision.co/)
[AppNexus Lucid](https://appnexus.github.io/lucid/)
[Audi](https://react.ui.audi/)
[Backpack UI(lonelyplanet)](http://lonelyplanet.github.io/backpack-ui/)
[Backpack(Skyscanner)](https://backpack.github.io/storybook/)
[BBC Psammead](https://bbc.github.io/psammead/)
[Carbon](https://carbon.sage.com/)
[Chakra UI](https://chakra-ui.netlify.app/)
[Circuit UI](https://circuit.sumup.com/)
[commercetools](https://uikit.commercetools.com/)
[European Commission](https://ec.europa.eu/component-library/playground/ec/)
[GitLab UI](https://gitlab-org.gitlab.io/gitlab-ui/)
[Grafana UI](https://developers.grafana.com/ui/latest/index.html)
[Grommet](https://storybook.grommet.io/)
[The Guardian](https://5dfcbf3012392c0020e7140b-gmgigeoguh.chromatic.com/)
[Ionic Framework](https://core-tests.ionicframework.jp/)
[IBM Carbon](https://react.carbondesignsystem.com/)
[PX Blue](https://pxblue-components.github.io/react/)
[React95](https://storybook.react95.io/)
[Reaviz](https://reaviz.io/)
[Salesforce Lightning](https://react.lightningdesignsystem.com/components/accordions/)
[ShareGate Orbit](https://orbit.sharegate.design/)
[SmartHR](https://smarthr-ui.netlify.app/)
[supabase](https://ui.supabase.com/)
[WFP](https://uikit.wfp.org/docs/index.html)
[Wix Style](https://www.wix-style-react.com/)
[Workday Canvas](https://workday.github.io/canvas-kit/)