Шаблон для создания сервиса на платформе VK Mini Apps

Краткое описание

Это стартовый кит (шаблон) для создания сервиса на платформе VK Mini Apps.
Цель этого кита - ускорить создание сервисов, которые не требуют отдельных UI-компонентов.

Используемые в технологии / библиотеки / фреймворки:

• React
• Recoil
• VKMA Router

⚙️ Начало работы

Склонируйте репозиторий в нужную вам директорию:

git clone https://github.com/LukasAndreano/vkma-boilerplate.git <name>

Установите зависимости и запустите приложение:

cd <name>
yarn
yarn dev

Далее перейдите в настройки сервиса и в адресе разработки (web & mvk) укажите:

http://localhost:3000

💡 Принцип работы со стейтом (Recoil)

Каждая группа должна содержать свой атом (storage/atoms/.js), который не будет выходить за рамки этой группы или, в крайнем случае, только для модалок.

Пример атома в (storage/atoms/main.js)

📚 Как работать с группами (панелями/экранами)

У каждой группы есть своя директория в panels, например: panels/home.

В группах присутствует главный экран - {panelName}.js и другие дополнительные: anyScreenName.js.

В каждом компоненте могут присутствовать блоки, которые необходимо вынести в отдельный компонент, чтобы сохранить нормальную логическую структуру и не перегрузить этот самый компонент.

Названия таких компонентов должно начинаться с маленькой буквы. Например: usersStatistic.js.

Также присутствуют общие группы (в components) со следующими названиями:

• __global
• __navigation

Модалки не привязаны к общим группам и имеют свою собственную директорию в modals.

Все эти разделы содержат в себе основные для работы приложения компоненты: навигация, а также глобальные компоненты (компоненты, которые могут быть переиспользованы n-ное количество раз в абсолютно разных частях приложения без привязки к группе компонентов).

📺 Модалки

Для создания модальных страниц (ModalPage) используется специальный конструктор: ModalConstructor, а для модальных карточек (ModalCard): CardConstructor.

Применение ModalConstructor:

<ModalConstructor id="start" title="Заголовок" close={toBack}>
  Любой children
</ModalConstructor>

Применение CardConstructor:

<CardConstructor
  id="start"
  close={toBack}
  title="Заголовок"
  icon={<Icon56DonateOutline />}
>
  Любой children
</CardConstructor>