Riot.js と Atomic Design ではじめるテクニカルクリエイター
を参考にしていて、うちもStyle Guideがあったら作業が捗るかなということで、
とりあえずテンプレ的なものを作ってみました。
使い方
パッケージをインストールして実行
※一回目の起動はうまくいかないかもしれないです。
npm install or yarn install
npm start
成功するとこんな画面が出ます。
- コンポーネントの追加
├── src
│ ├── components
│ │ ├── atoms
│ │ │ ├── foo
│ │ │ │ ├── example.tag
│ │ │ │ ├── foo.styl
│ │ │ │ └── foo.tag
│ │ │ └── plus
│ │ │ ├── example.tag
│ │ │ ├── plus.svg
│ │ │ └── plus.tag
│ │ ├── molecules
│ │ │ └── bar
│ │ │ ├── bar.styl
│ │ │ ├── bar.tag
│ │ │ └── example.tag
│ │ ├── organisms
│ │ │ └── baz
│ │ │ ├── baz.styl
│ │ │ ├── baz.tag
│ │ │ └── example.tag
│ │ └── styleguide
│ │ ├── atoms
│ │ │ ├── atoms.styl
│ │ │ └── atoms.tag
│ │ ├── molecules
│ │ │ ├── molecules.styl
│ │ │ └── molecules.tag
│ │ └── organisms
│ │ ├── organisms.styl
│ │ └── organisms.tag
│ ├── index.html
│ ├── main.js
│ └── main.styl
├── webpack.config.babel.js
こんな階層になっているのでatoms, molecules, organismsの下に追加する。
追加したコンポーネントのtag, svg, stylはnpm startを実行した時にmain.js, main.stylにimportされます。
実行前
main.js
/* inject:tag */
/* endinject:tag */
/* inject:svg */
/* endinject:svg */
main.styl
/* inject:styl */
/* endinject:styl */
実行後
main.js
/* inject:tag */
import './components/atoms/foo/foo.tag';
import './components/molecules/bar/bar.tag';
import './components/organisms/baz/baz.tag';
import './components/styleguide/atoms/atoms.tag';
import './components/styleguide/molecules/molecules.tag';
import './components/styleguide/organisms/organisms.tag';
/* endinject:tag */
/* inject:svg */
import './components/atoms/foo/foo.svg';
/* endinject:svg */
main.styl
/* inject:styl */
@import 'components/atoms/foo/foo';
@import 'components/molecules/bar/bar';
@import 'components/organisms/baz/baz';
@import 'components/styleguide/atoms/atoms';
@import 'components/styleguide/molecules/molecules';
@import 'components/styleguide/organisms/organisms';
/* endinject:styl */
あとはよしなに。
まだ箱ができただけで自分でもほとんど使っていないので使い勝手とかは分かりませんが、誰かのお役に立てば幸いです。