Using Storybook - Githubissues

概要

nrwl/nxにstorybookを導入する。

storybook導入時に、既存のコンポーネントに合わせて.storiesを作ってくれるので、先にコンポーネントを用意しておく。

方針として

Angular依存のものは、ngxという名前をプロジェクト名につける
Angular非依存のものは、分ける
- 例えば、共通scssなどは、Angular非依存なので、別にする。

1. Angular用のShared-UIライブラリを作る

Angularのコンポーネントを作るので、@nrwl/angular:libを利用する。
ライブラリ名にngx-とつけることで、名前からAngular用のライブラリだとわかる
--prefixを指定することで、任意のprefixをつけることができる

npx ng g @nrwl/angular:lib ngx-ui --directory=shared --tags=scope:shared,type:ui --prefix=shared-ngx-ui

2. Angular用のShared-UIにコンポーネントを作る

npx ng g component components/toggle --project=shared-ngx-ui --export npx ng g directive directives/input --project=shared-ngx-ui --export

3. Angular用のShared-UIにStorybookの導入

インストール

npm install --save-dev @nrwl/storybook

設定の作成

npx nx g @nrwl/angular:storybook-configuration shared-ngx-ui

? Configure a cypress e2e app to run against the storybook instance? Yes
? Automatically generate *.stories.ts files for components declared in this library/application? Yes
? Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure generator? Yes

4. Angular用のShared-UIのStorybookの実行

npx nx run shared-ngx-ui:storybook

5. Angular非依存のShared-UIライブラリを作る

npm install -D @nrwl/web
npx nx g @nrwl/web:lib ui --directory=shared --tags=scope:shared,type:ui --prefix=shared-ui

6. Angular用のShared-UIにscssファイルを作る

libs/shared/ui/src/lib/scssに、color.scssを作る

$black: #2c2c2c;
$white: #fff;

$graphic-objects: #8c8c8c;
$on-graphic-objects: $white;

$background: #f6f6f6;
$on-background: $black;

$surface: #fdfdfd;
$on-surface: $black;

$disabled: #f6f6f6;
$on-disabled: rgba(0, 0, 0, 0.26);

$error: #ac0020;
$on-error: $white;

6. Angular非依存のShared-UIにStorybookの導入

npx nx g @nrwl/angular:storybook-configuration shared-ui

コンポーネントがないためspecファイルが作れないので、e2eインスタンスのみ作成する。

? Configure a cypress e2e app to run against the storybook instance? Yes ? Automatically generate .stories.ts files for components declared in this library/application? No ? Automatically generate .spec.ts files in the cypress e2e app generated by the cypress-configure generator? No

8. Angular非依存のShared-UIのscssのstoriesを作る

libs/shared/ui/src/lib/scss/storiesの下に、color.scss.stories.scssとcolor.scss.stories.tsを作る

color.scss.stories.scss

@import '../shared-ui.scss';

.label {
  font-weight: bold;
  display: inline-block;
  width: 100px;
}

$colors: (
  'black': (
    background: $black,
    on: $white,
  ),
  'white': (
    background: $white,
    on: $black,
  ),
  'surface': (
    background: $surface,
    on: $on-surface,
  ),
  'background': (
    background: $background,
    on: $on-background,
  ),
  'disabled': (
    background: $disabled,
    on: $on-disabled,
  ),
  'error': (
    background: $error,
    on: $on-error,
  ),
);

.colors {
  padding: 8px;
  margin: 8px;
  line-height: 32px;

  @each $name, $color in $colors {
    &-#{$name} {
      background-color: map-get($color, background);
      color: map-get($color, on);
    }
  }
}

color.scss.stories.ts

import '!style-loader!css-loader!sass-loader!./colors.scss.stories.scss';

export default {
  title: 'colors',
};

export const normal = () => ({
  template: `<div class="color-root">
  ${Object.entries({
    black: '-',
    surface: 'カードなどコンテンツを配置する部分に',
    background: 'ページの背景色にcardやlistを区切る際など',
    disabled: '無効なボタンやリンクなどのカラー',
    error: '例外を表すカラー',
  }).reduce(
    (pre, [color, description]) =>
      `${pre} <div class="colors colors-${color}"><span class="label">${color}</span>: ${description}</div>`,
    ''
  )}</div>
  `,
});

7 . Angular非依存のShared-UIにStorybookの実行