Привет, друзья! В этой статье я покажу вам, как начать разработку библиотеки компонентов с помощью Vite, React, TypeScript и Storybook. Мы разработаем библиотеку, состоящую из одного простого компонента — кнопки, подготовим библиотеку к публикации в реестре npm, а также сгенерируем и визуализируем документацию для кнопки. Репозиторий с кодом проекта. Если вам это интересно, прошу под кат. Создаем шаблон проекта с помощью Vite: Переходим в созданную директорию, устанавливаем зависимости и запускаем сервер для разработки: Приводим директорию к следующей структуре: Устанавливаем библиотеку styled-components (мы будем использовать эту библиотеку для стилизации кнопки) и типы для нее: Устанавливаем плагин Vite для автоматической генерации файла с определениями типов: Настраиваем сборку, редактируя файл vite.config.ts: Определяем минимальные стили и несколько переменных в файле index.css: Приступаем к разработке кнопки. Работаем с файлом src/lib/Button/Button.tsx. Импортируем зависимости: Определяем перечисление с вариантами кнопки: Определяем типы пропов: Кроме стандартных атрибутов, кнопка принимает 2 пропа: Определяем компонент кнопки: Определяем стилизованную кнопку с помощью styled: Здесь хочется отметить 2 момента: означает, что цвет текста также зависит от варианта кнопки и определяется с помощью переменных CSS. Цвет текста кнопки успеха или предупреждения — --dark или #292b2c, цвет остальных кнопок — --light или #f7f7f7. Полагаю, остальные стили вопросов не вызывают. Повторно экспортируем кнопку и перечисление в файле src/lib/index.ts: Посмотрим, как выглядит и работает наша кнопка. Редактируем файл App.tsx: Запускаем сервер для разработки с помощью команды npm run dev: 
 Редактируем файл package.json, определяя в нем название пакета (наш пакет будет иметь scope с оригинальным названием @my-scope (в данном случае префикс @ является обязательным)), его версию, лицензию, директорию с файлами, файл с типами, а также настраивая экспорты (разделы scripts, dependencies и devDependencies опущены): Пример package.json (с дополнительными полями) реальной библиотеки можно найти здесь. Обратите внимание: перед сборкой имеет смысл "чистить" package.json. Устанавливаем пакет json в качестве зависимости для разработки: И определяем в разделе scripts следующую команду: Выполняем сборку с помощью команды npm run build: 
 Это приводит к генерации директории dist с файлами библиотеки. Для локального тестирования библиотеки необходимо сделать следующее: 
 Редактируем импорт в файле App.tsx: И запускаем сервер для разработки с помощью команды npm run dev: 
 Обратите внимание: после локального тестирования пакета необходимо выполнить 2 команды: Для публикации пакета в реестре npm необходимо сделать следующее: Список опубликованных пакетов можно увидеть на странице своего профиля (в моем случае — это https://www.npmjs.com/~igor_agapov): 
 Устанавливаем пакет @storybook/builder-vite
 в качестве зависимости для разработки: И инициализируем Storybook с помощью следующей команды: Это приводит к генерации директории .storybook. Убедитесь, что файл main.js в этой директории имеет следующий вид: Создаем в корневой директории файл .npmrc следующего содержания: Создаем файл src/lib/Button/Button.stories.tsx следующего содержания: Выполняем команду npm run storybook: Пожалуй, это все, о чем я хотел рассказать в этой статье. Надеюсь, вы узнали что-то новое и не зря потратили время. Благодарю за внимание и happy coding!  JavaScript Developer