Help us understand the problem. What is going on with this article?

Story book for HTMLと@storybook/addon-docsの導入

Story book for HTMLと付随するアドオンの導入について

静的なウェブサイトにおいて、コンポーネントを綺麗にかつみやすく整理したいというお話から
「storybookいいよ、使いやすいよ」と言われたのがきっかけ。

「storybook???絵本??絵本なの?」というところからのスタートでした。ができました。

今回のゴールは、コンポーネントがプレビューで見れてウェブサイト側のSCSSを取り込めて、ソースコードも見れることとしています。

インストール

まずは導入したいプロジェクト配下で、下記コマンドを叩きます。
nodeのバージョンはこれです。v13.12.0 (14そろそろでる。でた?)

npx -p @storybook/cli sb init --type html

そうするとプロジェクト配下に

.storybook/main.js
stories/index.stories.js 

というファイルが出来上がります。

このままではゴールへは程遠いので、SCSSを読み込みできるように以下を追加します。

yarn add node-sass sass-loader css-loader style-loader html-loader extract-loader -D
(npmでもどっちでも)

このあとにmain.jsを以下のように修正。

webpack.configのようにかけるます。便利。

const path = require('path');
module.exports = {
  //後述しますがmdxファイルを使います
  stories: ['../**/*.stories.(js|mdx)'],

  webpackFinal: async (config) => {
    config.module.rules.push(
      {
        test: /\.(sa|sc|c)ss$/,
      use: ['style-loader',
      {
        loader: "css-loader",
        options: {
          // CSS内のurl()メソッドの取り込みを禁止する
          url: false,
        }
      }, 'sass-loader','import-glob-loader'],
      include: path.resolve(__dirname, '../'),
    }  
    );

    return config;
  }
};

これで既存のCSS(SCSS)をstorybookで読み込みできるようになります。

stylusやless使いの方々はsass-loaderあたりを変えることで使えるかと。

お次にプレビュー時にソースコードを見たり何かしらのDocsを残したいので以下のアドオンを入れます。

https://github.com/storybookjs/storybook/tree/master/addons/docs

yarn add @storybook/addon-docs -D

ここでようやくインストールは終了。
次へ。

MDXとxxx.stories.js

stories配下に

text-01.mdx
text-01.stories.js

の2ファイルをとりあえず空ファイルで作ります。
んでそれぞれ、以下をコピペ

text-01.mdx
import { Story, Preview } from '@storybook/addon-docs/blocks';

# Normal

<Preview>
  <Story id="components-text--normal" />
</Preview>
text-01.stories.js
import '../../../src/style/style.scss';
import docs from './text-01.mdx';  // this import is important

export default {
  title: 'Components|Text',
  parameters: {  // specify the docs MDX content here
    docs: {
      page: docs, 
    }
  }
};

export const Normal = () => {
  return `
  <p class="m-txt__01">テキストテキストテキストテキスト</p>
  <p class="m-txt__01 m-txt__01--bold">テキストテキストテキストテキスト</p>
  `
}

あとはyarn storybookなどでstorybookを立ち上げるだけ。

あら素敵!といった感じでstories.jsのtitleの階層に基づいた形でコンポーネントが見れます。

こんな感じ
スクリーンショット 2020-04-23 20.57.26.png

docsタブを開くとソースコードもみれますね。

あとはコンポーネントを量産していくだけです。
stories/index.stories.jsは捨てちゃって大丈夫です。

storybook for HTML の書き方でなかなかに苦戦したのでメモ書き代わりに残しておきます。

はまりそうな点

xxx.stories.jsexport const lv01などの関数名をmdxのStory idで読み込む時に以下のルールになります。
lv01 => lv-01
storybook上のURLにパラメータがつくのでそちらでも判断可能です。

migii
PWAとスプラトゥーン2にどはまりしてるアレなひと。本が好き。
http://manic-design-lab.dev/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした