MEDUZA UI-KIT 4.0

Разработка

• pnpm start - запускает development сборку с hot reload, пишет все в папку dist
• cd example && pnpm start - запускает сборку тестового проекта с hot reload, в который можно импортировать компоненты из кита
• pnpm storybook - запускает storybook

pnpm generate - генератор компонентов. Вводим название компонента, получаем все файлы и импорты

Использование

Необходимо глобально импортировать в проект файл ui-kit.css (туда собираются все модули) Любые компоненты просто импортятся из кита

Сборка

Режимы сборки

• pnpm build --mode development - сборка стилей с переменными сайта
• pnpm build --mode production - сборка стилей без переменных

Особенности production сборки

• Запускается без подключения переменных в silent-режиме
• CSS-модули собираются в ui-kit.css
• После сборки запускается build.sh:
  1. Создает ui-kit-game.css с игровыми переменными
  2. Перезаписывает ui-kit.css с переменными сайта

Как опубликовать новую версию

1. Меняем номер версии в package.json.
2. Прописываем команду pnpm build для создания файла со стилями.
3. Прописываем команду pnpm publish для создания и публикации новой версии.

Локальное подключение UI-KIT к проекту

Для локального подключения UI-KIT можно воспользоваться одним из 2 следующих способов. Важно соблюдать правильный порядок действий для корректного подключения.

Подключение через link:

• как создать локальное подключение:

1. В проекте website3 в package.json прописываем "@meduza/ui-kit-2": "link:../ui-kit-2".

• как создать файл с изменениями в UI-KIT:

1. В данном проекте ui-kit-2 мы прописываем команду pnpm build - этой командой мы создаем новый css-файл.

• как отключить локальное подключение:

1. В проекте website3 в package.json прописываем опубликованную версию, например "@meduza/ui-kit-2": "0.9.6".

Подключение через yalc:

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

• как подключиться:

1. Если yalc не установлен, то можно его установить глобально командой npm install -g yalc. Если yalc установлен, то можно перейти к шагу 2.
2. В данном проекте ui-kit-2 мы прописываем команду yalc publish - этой командой мы создаем линк.
3. В проекте website3 мы прописываем команду yalc add @meduza/ui-kit-2 - этой командой мы подписываемся на линк из шага 2.

• как создать файл с изменениями в UI-KIT:

1. В данном проекте ui-kit-2 мы прописываем команду pnpm build - этой командой мы создаем новый css-файл.
2. В данном проекте ui-kit-2 мы прописываем команду yalc publish - этой командой мы создаем новый линк.
3. В проекте website3 мы прописываем команду yalc update - это командой мы обновляем подписку на линк из шага 2.

• как отключить локальное подключение:

1. В проекте website3 мы прописываем команду yalc remove @meduza/ui-kit-2 - этой командой мы удаляем подписку на линк.