Storybook

Storybook は、UIコンポーネントとページを個別に構築するためのフロントエンドワークショップです。数千ものチームがUI開発、テスト、ドキュメント作成に利用しています。オープンソースで無料で利用できます。

バージョン7.0以降、StorybookはViteをネイティブにサポートしているため、Qwikもファーストクラスでサポートされています。

使用方法

既存のアプリやライブラリにStorybookを追加できます。

npm run qwik add storybook

前のコマンドは、必要な依存関係をインストールし、サンプルコンポーネントとストーリーを追加します。

これで、Storybookダッシュボードを起動できます。

npm run storybook

例

シンプルなコンポーネント

以下は、Qwikコンポーネントを使用するシンプルなストーリーを示しています。

src/components/button.tsx

import { component$ } from "@builder.io/qwik";
 
export interface ButtonProps {
  label: string;
}
 
export const Button = component$<ButtonProps>(({label}) => {
  return (
    <button>
      {label}
    </button>
  );
});

src/components/button.stories.tsx

import type { Meta, StoryObj } from "storybook-framework-qwik";
import {Button, type ButtonProps} from "./button";
 
const meta: Meta<ButtonProps>  = {
  component: Button,
};
 
export default meta;
type Story = StoryObj<ButtonProps>; 
 
export const Primary: Story = {
  args: {
    label: "Hello World", 
  }
};

QwikCityを使用するコンポーネント

Qwikcityを使用する場合は、<QwikCityMockProvider>を使用してコンテキストをストーリーに渡す必要があります。

src/components/with-link.tsx

import { component$ } from "@builder.io/qwik";
import { Link } from "@builder.io/qwik-city";
 
export const WithLink = component$(() => {
  return (
    <Link href="https://google.com">Google Link</Link>
  );
});

src/components/with-link.stories.tsx

import type { Meta, StoryObj } from "storybook-framework-qwik";
import { QwikCityMockProvider } from "@builder.io/qwik-city";
 
import { WithLink } from "./with-link";
 
const meta: Meta = {
  component: WithLink,
};
 
type Story = StoryObj;
export default meta;
 
export const Primary: Story = {
  render: () =>
    <QwikCityMockProvider>
      <WithLink />
    </QwikCityMockProvider>
};

詳細については、Storybookドキュメントを参照してください。

コントリビューター

このドキュメントの改善に貢献してくれたすべてのコントリビューターに感謝します！