Storybook интеграция

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

Установка Storybook для Solid.js

Перед тем как начать интеграцию, нужно установить необходимые зависимости для работы с Storybook. Для этого сначала необходимо создать проект на Solid.js (если проект еще не существует), а затем установить Storybook с соответствующей настройкой для Solid.js.

  1. Установка Solid.js: Если проект ещё не создан, создайте его с помощью официального шаблона.

    npx degit solidjs/templates/ts my-solid-app
cd my-solid-app
npm install

  2. Установка Storybook: Включение Storybook в проект Solid.js выполняется через менеджер пакетов.

    npx sb init --builder @storybook/builder-webpack5

  3. Конфигурация Storybook для Solid.js: После установки нужно настроить Storybook для работы с Solid.js. Для этого необходимо изменить конфигурацию в файле .storybook/main.js:

    module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config) => {
    // Добавление поддержки для Solid.js
    config.resolve.alias = {
      ...config.resolve.alias,
      'solid-js': require.resolve('solid-js'),
    };

    return config;
  },
};

  4. Настройка babel и webpack: Storybook использует Webpack для сборки. Для корректной работы с Solid.js нужно удостовериться, что Webpack правильно обрабатывает файлы .tsx и использует настройки для TypeScript и Solid.js. В .storybook/webpack.config.js нужно добавить конфигурацию для работы с TypeScript:

    module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-env',
            '@babel/preset-typescript',
            ['@babel/preset-react', { pragma: 'solid' }]
          ],
        },
      },
    ],
  },
};

Создание истории для компонента

История (story) — это способ отображения компонента в различных состояниях и вариациях. В Storybook каждый компонент может иметь несколько историй, которые демонстрируют его поведение с разными входными данными или состояниями.

  1. Пример компонента Solid.js: Создадим простой компонент, который будет принимать данные через пропсы.

    // src/components/Button.tsx
import { createSignal } from 'solid-js';

const Button = (props) => {
  const [clicked, setClicked] = createSignal(false);
  return (
    <button onCl ick={() => setClicked(!clicked())}>
      {clicked() ? 'Clicked' : 'Click me'} - {props.label}
    </button>
  );
};

export default Button;

  2. Создание истории для компонента Button: История для компонента будет демонстрировать разные состояния компонента.

    // src/components/Button.stories.tsx
import { Meta, Story } from '@storybook/react';
import Button from './Button';

export default {
  title: 'Components/Button',
  component: Button,
} as Meta;

const Template: Story = (args) => <Button {...args} />;

export const Default = Template.bind({});
Default.args = {
  label: 'Submit',
};

export const Clicked = Template.bind({});
Clicked.args = {
  label: 'Submit',
};

  3. Просмотр компонента в Storybook: После того как истории для компонентов созданы, можно запустить Storybook с помощью команды:

    npm run storybook

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

Использование Solid.js реактивности в Storybook

Одной из ключевых особенностей Solid.js является реактивность. В Storybook можно демонстрировать поведение компонентов, которое зависит от реактивных сигналов и других механизмов состояния.

  1. Демонстрация реактивности: Создадим компонент с реактивной логикой, который будет отображать изменяющийся счетчик.

    // src/components/Counter.tsx
import { createSignal } from 'solid-js';

const Counter = () => {
  const [count, setCount] = createSignal(0);
  return (
    <div>
      <button onCl ick={() => setCount(count() + 1)}>Increment</button>
      <p>Count: {count()}</p>
    </div>
  );
};

export default Counter;

  2. История для компонента Counter: Чтобы продемонстрировать реактивность компонента, создадим историю, которая будет отображать его поведение.

    // src/components/Counter.stories.tsx
import { Meta, Story } from '@storybook/react';
import Counter from './Counter';

export default {
  title: 'Components/Counter',
  component: Counter,
} as Meta;

const Template: Story = () => <Counter />;

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

    Этот пример будет показывать компонент с кнопкой, при нажатии на которую будет увеличиваться значение счетчика.

Добавление аддонов

Storybook поддерживает множество аддонов, которые могут улучшить процесс разработки и тестирования компонентов. Например, можно добавить аддон для отображения исходного кода компонента или для проверки доступности.

  1. Добавление аддона для отображения исходного кода: Для этого нужно установить аддон @storybook/addon-docs, который автоматически генерирует документацию и отображает исходный код компонента.

    npm install @storybook/addon-docs --save-dev

  2. Активировать аддон в конфигурации: После установки аддона его нужно добавить в .storybook/main.js:

    module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-docs'],
};

  3. Использование аддона в истории: Теперь в каждой истории можно будет видеть раздел с исходным кодом компонента, что значительно упрощает процесс документирования.

    // src/components/Button.stories.tsx
import { Meta, Story } from '@storybook/react';
import Button from './Button';

export default {
  title: 'Components/Button',
  component: Button,
  parameters: {
    docs: {
      source: {
        code: `
          import { createSignal } from 'solid-js';
          const Button = (props) => {
            const [clicked, setClicked] = createSignal(false);
            return <button onCl ick={() => setClicked(!clicked())}>${props.label}</button>;
          };
        `,
      },
    },
  },
} as Meta;

const Template: Story = (args) => <Button {...args} />;

export const Default = Template.bind({});
Default.args = {
  label: 'Click me',
};

Заключение

Интеграция Solid.js с Storybook открывает большие возможности для разработки и тестирования компонентов в изоляции. Она позволяет использовать все преимущества реактивного подхода Solid.js и позволяет документировать и демонстрировать компоненты в удобной и визуально понятной форме. Storybook помогает разработчикам работать с компонентами более эффективно и наглядно, упрощая процесс их создания и интеграции в приложение.

Оглавление