Storybook

Storybook - это фронтенд-мастерская для создания изолированных компонентов пользовательского интерфейса и страниц. Тысячи команд используют его для разработки пользовательского интерфейса, тестирования и документирования. Он с открытым исходным кодом и бесплатный.

Начиная с версии 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: "Привет, мир!",
  }
};

Компонент, использующий 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>
  );
});

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>
};

Более подробную информацию можно найти в документации

Участники

Спасибо всем участникам, которые помогли сделать эту документацию лучше!