В этой статье блога мы погрузимся в мир разработки пользовательского интерфейса с использованием Storybook, TypeScript и Emotion. Мы рассмотрим различные методы вместе с примерами кода, чтобы помочь вам понять, как эти инструменты можно использовать вместе для создания масштабируемых и удобных в обслуживании компонентов пользовательского интерфейса. Независимо от того, являетесь ли вы новичком или опытным разработчиком, это подробное руководство предоставит вам ценную информацию и лучшие практики.

Метод 1: настройка проекта Storybook
Для начала давайте создадим новый проект с помощью Storybook, TypeScript и Emotion. Откройте терминал и выполните следующие действия:

Шаг 1. Создайте новый каталог для своего проекта

mkdir my-storybook-project
cd my-storybook-project

Шаг 2. Инициализируйте новый проект NPM

npm init -y

Шаг 3. Установите Storybook, TypeScript и Emotion

npx sb init
npm install --save-dev typescript @emotion/react @emotion/styled

Метод 2: создание базового компонента
Теперь, когда наш проект настроен, давайте создадим базовый компонент пользовательского интерфейса, используя Emotion и TypeScript:

Шаг 1. Создайте новый файл с именем Button.tsx

import React from 'react';
import { css } from '@emotion/react';
const buttonStyles = css`
  background-color: #007bff;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
`;
interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
}
const Button: React.FC<ButtonProps> = ({ onClick, children }) => (
  <button css={buttonStyles} onClick={onClick}>
    {children}
  </button>
);
export default Button;

Метод 3: истории из сборника рассказов для компонентов
Теперь давайте создадим историю из сборника рассказов, чтобы продемонстрировать наш компонент «Кнопка»:

Шаг 1. Создайте новый файл с именем Button.stories.tsx

import React from 'react';
import { Story, Meta } from '@storybook/react';
import Button from './Button';
export default {
  title: 'Button',
  component: Button,
} as Meta;
const Template: Story = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
  children: 'Primary Button',
};
export const Secondary = Template.bind({});
Secondary.args = {
  children: 'Secondary Button',
};

Метод 4: настройка Storybook с помощью надстроек
Storybook предоставляет различные надстройки для улучшения процесса разработки. Давайте рассмотрим, как добавить и настроить дополнение:

Шаг 1. Установите дополнение

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

Шаг 2. Настройте дополнение в .storybook/main.js

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

Метод 5: Документирование компонентов с помощью PropsTable
Storybook позволяет документировать реквизиты вашего компонента с помощью дополнения PropsTable:

Шаг 1. Установите дополнение

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

Шаг 2. Настройте дополнение в .storybook/main.js

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

Шаг 3. Добавьте документацию к компоненту

import React from 'react';
import { css } from '@emotion/react';
import { Meta, Story } from '@storybook/react';
import Button, { ButtonProps } from './Button';
export default {
  title: 'Button',
  component: Button,
  parameters: {
    actions: { argTypesRegex: '^on.*' },
    docs: {
      description: {
        component: 'A customizable button component.',
      },
    },
  },
} as Meta;
// ...

В этой статье мы рассмотрели различные методы совместного использования Storybook, TypeScript и Emotion. Мы рассмотрели настройку проекта, создание компонентов, написание историй, настройку Storybook с помощью надстроек и документирование компонентов с помощью надстройки PropsTable. Используя эти методы, вы можете оптимизировать рабочий процесс разработки пользовательского интерфейса и создавать надежные библиотеки компонентов.

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