Чтобы установить псевдосостояния Storybook, вы можете выполнить следующие действия:

Шаг 1. Установите Storybook
Во-первых, убедитесь, что на вашем компьютере установлены Node.js и npm. Затем откройте терминал и выполните следующую команду, чтобы создать новый каталог для вашего проекта и инициализировать его с помощью npm:

mkdir my-storybook-project
cd my-storybook-project
npm init -y

Затем установите Storybook, выполнив следующую команду:

npx sb init

При этом будет создан новый проект Storybook с конфигурацией по умолчанию.

Шаг 2. Установите дополнение
Чтобы добавить поддержку псевдосостояний в Storybook, вам необходимо установить дополнение @storybook/addon-pseudo-states. Выполните следующую команду:

npm install @storybook/addon-pseudo-states --save-dev

Шаг 3. Настройка дополнения
Откройте файл .storybook/main.jsв каталоге вашего проекта и добавьте следующий код, чтобы включить дополнение:

module.exports = {
  addons: ['@storybook/addon-pseudo-states'],
};

Шаг 4: Использование
Чтобы использовать псевдосостояния в историях Storybook, вам необходимо импортировать модуль @storybook/addon-pseudo-states/registerв ваш .storybook/ Файл предварительного просмотра.js:

import '@storybook/addon-pseudo-states/register';

Теперь вы можете определять псевдосостояния для своих компонентов в своих историях. Вот пример:

import React from 'react';
import MyComponent from './MyComponent';
export default {
  title: 'MyComponent',
  parameters: {
    pseudo: {
      hover: true,
      focus: true,
    },
  },
};
export const Default = () => <MyComponent />;
Default.parameters = {
  pseudo: {
    active: true,
    visited: true,
  },
};

В приведенном выше примере мы определяем псевдосостояния для hover, focus, activeи visit. состояния компонента MyComponent.