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 文档。

贡献者

感谢所有帮助改进此文档的贡献者！