Antiagechats NPM

NPM-пакет antiagechats для проектов Anti-Age Expert и Anti-age Expert.Clinic.

Этот пакет относится к общей экосистеме AntiAge Expert. Подключение данного пакета добавит чаты на проект, к подключению доступны проекты Anti-Age Expert, Anti-age Expert.Clinic и Anti-age Expert.Clinic-Patient (работы по проекту временно приостановлены).

Список команд

build - запускает сборку кода, после внесения изменений нужно прописывать эту команду
analyze - команда выполняет анализ итогового веса сборки и выводит в браузер схему

Зависимости, используемые в npm-пакете

Список зависимостей доступен в package.json, однако некоторых используемых библиотек там нет.

Они наследуются от проекта, к которому подключается npm-пакет, поэтому предполагается, что проект должен обязательно иметь следующие библиотеки:

react
react-dom

Развертывание npm-пакета для разработки

Для работы с npm-пакетом и внесения в него изменений нужно ввести ряд команд:

создать ссылку на локальную версию пакета чатов, написав в корне npm-пакета npm link
удалить npm-пакет из списка зависимостей в проекте, к которому он подключен, yarn remove antiagechats или npm uninstall antiagechats
поочередно перейти в библиотеки из списка выше и создать на них ссылки по описанному ниже примеру

    Пример: создание ссылки библиотеки react:
    - cd ./node_modules/react (переходим в папку react)
    - npm link (создаем ссылку)

заменить удаленную версию локальной npm link antiagechats
перейти обратно в консоль npm-пакета и поочередно подключиться к "недостающим" библиотекам по созданным ссылкам npm link package-name
создаем в корне проекта файл .env. и копируем туда информацию из чата проекта или запрашиваем у менеджера
также запрашиваем файл pre-commit у менеджера и копируем его в проект по адресу .git/hooks
выполнить команду chmod +x .git/hooks/pre-commit в корне проекта (консоль Git Bash)
выполнить команду npm run build для сборки

Обновление версии пакета

Как только фича сделана и проверена локально самим разработчиком, все изменения заливаются в гит. Пока создать и выгрузить новую версию npm-пакета могу только я (tg: @AmazingWhite), соответственно нужно просто связаться со мной.

CSS

На проекте используется чистый css с css-modules. В src/config/variables.css лежит список с css переменными, которые желательно использовать при написании стилей в проекте (цвета обязательно!)

Немного о `SVG` и работе с ними в проекте

За неимением возможности удобно встраивать SVG файлы в React без установки дополнительных плагинов для Webpack, было принято решение использовать динамический импорт для этих целей. В папке components есть SVGSymbol, который принимает в себя name svg файла и еще ряд параметров (можно ознакомиться с самим компонентом) и позволяет нам удобно отрисовывать SVG. Красить такие иконки можно через свойство color, как обычный текст.

Для корректной его работы, как описано выше, необходимо положить файл svg по пути src/assets/img/svg. Затем в самом svg файле удалить параметры ширины и высоты, а также заменить все цвета на currentColor. Пример ниже:

До:

<svg width="10" height="10" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 5L8.5 12L2 5" stroke="#0f0f0f" stroke-width="2" stroke-linecap="square"/>
</svg>

После:

<svg width="" height="" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 5L8.5 12L2 5" stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
</svg>

Когда все файлы подготовлены, нужно выполнить команду yarn buildSvg. Скрипт скомпилирует все файлы из папки scr/assets/img/svg в файлы .jsx в папку src/assets/img/svg-symbols изменив все "-" в названии на PascalCase.