Этот пакет относится к общей экосистеме AntiAge Expert. Подключение данного пакета добавит чаты на проект, к подключению доступны проекты Anti-Age Expert, Anti-age Expert.Clinic и Anti-age Expert.Clinic-Patient (работы по проекту временно приостановлены).
-
build
- запускает сборку кода, после внесения изменений нужно прописывать эту команду -
analyze
- команда выполняет анализ итогового веса сборки и выводит в браузер схему
Список зависимостей доступен в package.json
, однако некоторых используемых библиотек там нет.
Они наследуются от проекта, к которому подключается npm-пакет, поэтому предполагается, что проект должен обязательно иметь следующие библиотеки:
- react
- react-dom
Для работы с 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-modules. В src/config/variables.css лежит список с css переменными, которые желательно использовать при написании стилей в проекте (цвета обязательно!)
За неимением возможности удобно встраивать 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.
Основная ветка в репозитории. На ней хранится актуальное состояние npm-пакета.
Ветки для реализации фичей называются по принципу:
feature/название-фичи
Ветки для фиксов называются по принципу:
hotfix/название-задачи-или-фикса