スタイルガイドジェネレーターの検討

manabuyasuda commented 6 years ago

現在使用しているaigisは開発が止まっている状態。機能的でメンテナンスが定期的におこなわれているスタイルガイドジェネレーターがあれば移行する。

必須

カテゴリーわけができる
IDを指定できる
コードとプレビューを表示してくれる

オプション

プレビューは折りたたむこともできる

manabuyasuda commented 6 years ago

Storybook for HTMLというのがいいかもしれない（未検証）。 VueやReactによく使われているし、スター数も多く、開発も活発そう。 https://github.com/storybooks/storybook

manabuyasuda commented 6 years ago

Storybook for HTMLを使ってみた所感。

導入は簡単。以下の内容通り、npm i --save-dev @storybook/htmlして、configファイルとstoriesファイルを作って、npm run storybookのようにするだけ。 https://storybook.js.org/basics/guide-html/ npm スクリプトは以下のようにする。-s ./htdocsを渡すとディレクトリごとコピーしてくれる。

"storybook": "start-storybook -s ./htdocs -p 9001 -c .storybook"

configファイルと同階層にpreview-head.htmlを作成し、メタタグなどを追加できる。

Addonは、いくつか入れないと検証ができないよう。 https://storybook.js.org/addons/addon-gallery/

コードブロックの生成機能はない（Addonであるかも？）。 IDを設定することはできなそうだけど、検索がリアルタイムで絞り込んでくれるので、IDをテキストとして残しておくだけでも問題なさそう。

storiesは以下のように記述するのがハードル低そう。 JSは別に作成しているので、テスト上の問題は起きない。

  .add('sw-Button', () => {
    return `
      <p>ボタンです</p>
      <button class="sw-Button" type="button">ボタン</button>
    `;
  })

ただ、1つのファイルに複数のHTMLを書いていくことになるので、若干管理しにくい感じはする。

manabuyasuda commented 5 years ago

「HologramのNode.js版が欲しくてAigisを作った。でも最近はStorybook Vueを使ってるから、Aigisのメンテナンスをやめると決めた」 https://github.com/aigis-styleguide/aigis/issues/121

manabuyasuda / website-template

スタイルガイドジェネレーターの検討 #117