🐈

Ionic/AngularでStorybookを導入する手順

3 min read

前置き

Ionicのコンポーネントを、そのまま使って
Storybookのページに表示させる、その方法を紹介している記事です。

Ionic環境を整える

お手元にIonicプロジェクトがなかったら
Ionic CLIを利用し、ターミナルにionic startを打つ
Ionicプロジェクトを用意しましょう。

Storybookをインストール

公式ページの紹介通り、npx sb initを打ってインストールしましょう。

インストール完了した後、npm run storybookを執り行い
終わったら、ブラウザがstorybookのページを自動にジャンプします。


デフォルトのStorybook画面が見れます

Storybookの仕組み

AngularのStorybookは、以下二つのファイルによって作動されています。

  • コンポーネント定義用のxxx.component.ts
  • Storybookでコンポーネントを表示させるためのxxx.stories.ts

Ionicを使用している場合、ほぼ全てのコンポーネントは@ionic/angularによって定義済みの状況で
src/storiesの下にxxx.component.tsを作る必要はなし

@ionic/angularの中のxxx.component.tsをインポートして使ったらOKです

よって、書く必要があるのが
xxx.stories.tsのみです

Storiesを書く

src/stories/ion-button.stories.tsというファイルを作り

まずは、必要なやつを一通りインポート

ion-button.stories.ts
import { IonButton, IonicModule } from '@ionic/angular';
import { Meta, moduleMetadata, Story } from '@storybook/angular';

次に、exportを定義
ファイルの下に以下のコードを追加しましょう

ion-button.stories.ts
export default {
  title: 'Ionic/Button',
  component: IonButton,
  decorators: [
    moduleMetadata({
      imports: [IonicModule.forRoot()],
    }),
  ],
} as Meta;

こちら注目すべきどころは2点

  • component: IonButton, 直接に@ionic/angularライブラリのコンポーネントを使う、IonButtonという名前は自己編集不可。そのままに使いましょう。
  • decoratorsは、IonicModuleを導入させます。IonButtonはIonicModuleの下に作動されるので、decoratorsがなかったらページは動きません。

最後に、storiesを定義
ファイルのさらに下に、以下のコードを書く

ion-button.stories.ts
const Template: Story<IonButton> = (args: IonButton) => ({
  props: args,
  template: `<ion-button>テキスト</ion-button>`,
});

export const Basic = Template.bind({});

template:は、そのままに<ion-button>を使ってください

以上が終わったら、ページに戻り
Ionicのボタンが表しているのを確認

Controlsを追加


StorybookのControlsパネルで
操作したり、画面を自由に変えたりようにしましょう

Controlsの詳しい書き方は、このページを参考してください

ボタンのラベル文字

<ion-button>の中の「テキスト」を{{label}}というlabel変数を入れ

ion-button.stories.ts
- template: `<ion-button>テキスト</ion-button>`,
+ template: `<ion-button>{{label}}</ion-button>`,

そして、ファイルの一番下に以下のコードを追加

ion-button.stories.ts
Basic.args = {
  label: 'テキスト'
};


これで入力欄でラベルを編集できるようになりました

ボタンの色塗り

IonButtonは、fill属性を通して
色塗りが指定できます

まずは、fillには何の値を入れていいのかを定義
Ionicのコンポーネントページをよく見て書きましょう

component: IonButton,の下にコードを追加

ion-button.stories.ts
component: IonButton,
+ argTypes: {
+    fill: {
+      options: [ 'solid', 'outline', 'clear' ],
+      control: { type: 'inline-radio' }
+    },
+ },

次に、デフォルトのfill属性を定義
label: 'テキスト'の下に追加

ion-button.stories.ts
label: 'テキスト',
+ fill: 'solid',


ラジオボタンが作動しているのを確認

終わりに

Controlsが面白すぎて
ほぼ全てのIonButtonの属性をControlsにしてしまいました

Githubはこちらです

https://github.com/ianchen0419/ionic-course/blob/main/src/stories/Button.stories.ts

Chromaticプレビューはこちらです

https://615982bec67f67003acaaea2-lpctzybfmz.chromatic.com/?path=/story/ionic-button--basic

Discussion

ログインするとコメントできます