StoryBook備忘録
とり天 こっこちゃん静的ページのStoryBook作りたい
storybook for htmlだ
インストール
npx -p @storybook/cli sb init --type html
↓
Need to install the following packages:
@storybook/cli
Ok to proceed? (y)
は「y」
とり天 こっこちゃんSassの設定
インストール
npm i -D style-loader css-loader sass-loader
.storybook/main.js
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/preset-scss" // Sass追加
],
addondにsass追加
// Sassの読み込み
const { resolve } = require('path')
module.exports = {
webpackFinal: async(config, {configType}) => {
config.module.rules.push({
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
],
include: resolve(__dirname, '../'),
})
return config
}
}
ファイルの下あたりに追加読み込み系も追加
とり天 こっこちゃんとりあえずstories配下に
htmlとjsとsass準備
- stories/components/hoge/index.html
- stories/components/hoge/hoge.stories.js
- stories/components/hoge/hoge.scss
とり天 こっこちゃん起動はnpm run storybook
とり天 こっこちゃんこのエラー何.......?
ERR! Error: Could not find a 'framework' field in Storybook config.
ERR!
ERR! Please run 'npx storybook@next automigrate' to automatically fix your config.
エラーの続き
See the migration guide for more information:
何か情報書いてあるっぽい
フレームワークのバージョン上げ...........と...........いうこ...........と...........?
アップグレードコマンド
npx storybook@next automigrate入れてみる
とり天 こっこちゃんDo you want to run the 'new-frameworks' migration on your project? › (Y/n)
Do you want to run the 'eslintPlugin' migration on your project? › (Y/n)
Do you want to run the 'autodocsTrue' migration on your project? › (Y/n)
このあたりはこちらを参考に
とり天 こっこちゃん多分バージョンあげたためなのか
ERR! TypeError: Cannot read properties of undefined (reading 'map')
のエラーが出たので.storybook/main.jsの記述を直してみる
/** @type { import('@storybook/html-webpack5').StorybookConfig } */
const { resolve } = require('path');
module.exports = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/preset-scss" // Sass追加
],
framework: {
name: "@storybook/html-webpack5",
options: {}
},
docs: {
autodocs: "tag"
},
webpackFinal: async (config, {configType}) => {
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: resolve(__dirname, '../')
});
return config;
},
};
アドオン追加
- copy-code-block：htmlコピー
npm i @pickra/copy-code-block
hoge.stories.jsに次の内容を入れる
import copyCodeBlock from '@pickra/copy-code-block'
〜 省略 〜
export const Item = () => {
return (fuga + copyCodeBlock(fuga))
}
copy-code-blockの見え方をやめて
storybook-addon-htmlに変更
npm install @whitespace/storybook-addon-html
.storybook/main.jsのaddonに追加
"@whitespace/storybook-addon-html"
Docsタブないので追加してみる
@storybook/addon-docs
インストールコマンド↓
npm install @storybook/addon-docs
build用のコマンド
"scripts"に以下追加
▼package.json
"build-storybook": "storybook build -o htdocs/storybook/"
実行コマンド
npm run build-storybook
背景のデフォルトカラーを変える
npm install @storybook/addon-backgrounds --save-dev
addonに以下追加
▼.storybook/main.js
'@storybook/addon-backgrounds',
▼.storybook/preview.js
import { withBackgrounds } from '@storybook/addon-backgrounds';
// デフォルトの背景色を設定
const backgrounds = [
{ name: 'Default', value: '#ff0000', default: true },
{ name: 'Dark', value: '#333333' },
];
addDecorator(withBackgrounds(backgrounds));
背景の入れ方 その２
▼.storybook/preview.js
const preview = {
parameters: {
backgrounds: {
default: 'twitter',
values: [
{
name: 'main',
value: '#f5f5f5'
},
{
name: 'accent',
value: '#4682b4'
}
]
},
};
▼個別にデフォルト設定したいストーリーのjs
export default {
parameters: {
backgrounds: {
default: 'main'
}
}
};
これでdefort背景色を個別につけれる
とり天 こっこちゃん▼参考（公式）
とり天 こっこちゃんjQueryのプラグインを入れた時に出てくるこのエラー
$ is not a function
有効な回避方法ではないけれど
- jQueryの読み込みはコンポーネントのhtmlファイルの中に<script>で記載する
- プラグインのJSはcdnがあるものはcdnでhtmlファイルの中に記載する
既存ディレクトリの中にプラグインを入れていて、importで引っ張ろうとしてもパスが合っていてもエラーが出る場合がほとんどだったのでcdn読み込みが手っ取り早そう
main.js に設定追加する方法もあったけどこれは別なエラーが出たので
今回は設定していない↓
とり天 こっこちゃんviewport 楽な追加方法
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
const preview = {
parameters: {
viewport: {
viewports: INITIAL_VIEWPORTS
},
},
};
これを.storybook/preview.jsに追記してStoryBook再起動するといろんなデバイスサイズで表示切り替えできるようになる
とり天 こっこちゃん▼参考（公式）
とり天 こっこちゃんさらにカスタムする場合はこんな感じになるのかな
※Viewportの設定は公式から持ってきている
export const customViewports = {
kindleFire2: {
name: 'Kindle Fire 2',
styles: {
width: '600px',
height: '963px',
},
},
kindleFireHD: {
name: 'Kindle Fire HD',
styles: {
width: '533px',
height: '801px',
},
},
};