Настройка Storybook в проекте Stencil

Настройка Storybook в проекте Stencil оказалась не такой простой, как я ожидал. Поэтому я задокументировал здесь основные шаги, которые я предпринял для настройки своего проекта. Надеюсь, это может быть полезно другим нуждающимся.

Начиная с созданного приложения Stencil, запустите сценарий инициализации для Storybook:

npx -p @storybook/cli sb init - type=html

Это просит настроить с помощью Webpack 5 или Vite. Оба работают нормально.

Теперь нам нужно разрешить Storybook запускать мои веб-компоненты, созданные с помощью Stencil. Поэтому внутри `.storybook/preview.js` добавьте следующий код:

import { defineCustomElements } from '../loader';

defineCustomElements();

Это позволит нам использовать тег, созданный для наших компонентов внутри Storybook.
Также в этот файл можно импортировать файл трафарета global.css:

import '../src/global/global.css';

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

поэтому, чтобы создать эту папку, мы можем запустить сборку в режиме просмотра:

npx stencil build - watch

Таким образом, каждое изменение, которое мы вносим в наши компоненты, будет отражаться в файле сборника рассказов (имейте в виду, что иногда вам нужно обновить страницу сборника рассказов, особенно с помощью CSS).

Теперь, когда сборка Stencil запущена, мы можем запустить Storybook в новой вкладке терминала с помощью команды:

npm run storybook

Большой. Теперь мы можем написать нашу первую историю. Как и в любой другой настройке Storybook, мы можем поместить наш файл `.stories` в любую папку, которую захотим. Мне нравится хранить свои истории в той же папке, что и мой компонент, но вы можете использовать другие структуры.

История должна быть написана с использованием чистого HTML в виде строки (по крайней мере, пока). Итак, моя первая история выглядела так:

export default {
  title: 'Atoms/Button',
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' },
    size: {
      options: ['small', 'medium', 'large'],
      control: { type: 'radio' },
    },
    
  },
};

const Template = args => `<my-button label="${args.label}" variant="${args.variant}" size="${args.size}"></my-button>`;

export const primary = Template.bind({});
primary.args = {
  label: 'Click me',
  variant: 'primaryFilled',
  size: 'medium',
};

Это прекрасно работает, но мы можем довольно легко настроить синтаксис JSX. Итак, все, что нам нужно сделать, это настроить Babel, чтобы он справился с этим за нас. Итак, сначала нам нужно установить некоторые библиотеки:

npm i - save-dev @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx jsx-dom

Теперь добавьте плагины, которые мы только что установили, в файл `.babelrc` в корне нашего проекта:

  "plugins": [
    "@babel/plugin-syntax-jsx",
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "h"
      }
    ]
  ]

Теперь в нашей истории мы можем использовать синтаксис JSX, просто импортировав h из библиотеки jsx-dom.

import { h } from 'jsx-dom';

export default {
  title: 'Atoms/Button',
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' },
    size: {
      options: ['small', 'medium', 'large'],
      control: { type: 'radio' },
    },
  },
};

const Template = args => <plx-button label={args.label} variant={args.variant} size={args.size}></plx-button>;

export const primary = Template.bind({});
primary.args = {
  label: 'Click me',
  variant: 'primaryFilled',
  size: 'medium',
};

намного лучше. Последнее, с чем я столкнулся, — это настройка отображения событий на вкладке «Действия» на странице сборника рассказов. Я сделал это, настроив декоратор withActions из пакета @storybook/addon-actions. Итак, сначала для установки выполните эту команду:

npm i -D @storybook/addon-actions

и тогда мы можем использовать его так:

export default {
  title: 'Atoms/Button',
  tags: ['autodocs'],
  argTypes: {
 // ...
  },
  decorators: [withActions],

  parameters: {
    actions: {
      handles: ['click', 'mouseover', 'mouseout'],
    },
  },
};

Теперь события click, mouseover и mouseout регистрируются в Storybook. Как и ожидалось.

Теперь у нас есть базовая настройка Storybook в сборке Stencil. Теперь вы можете продолжать улучшать эту настройку, добавляя дополнительные плагины в соответствии с вашими потребностями.

Первоначально опубликовано на https://www.nfaustino.com.

Настройка Storybook в проекте Stencil

Вопросы по теме