Репозиторий содержит код интерфейса приложения «PSUMaps – интерактивный университет в кармане»

Проект разрабатывается при поддержке

Содержание

• Структура
• 📒 Стек
• 🚀 Запуск
  • Web - Mini App
  • Native - Mobile app
• Архитектура
• Рабочий процесс
• Оформление изменений
  • Ветки
  • Коммиты
  • PR
• 👨‍💻 Contributors

Структура

Приложение разбито на три части:

• web: mini-app
• native: приложение для android
• shared: весь независимый от платформы код, т.е.: компоненты, стили, истории storybook

Стек

Общий стэк состоит из:

• React
• Storybook
• Tailwind

Для упрощения работы:

• Tailwind IntelliSense (IntelliJ IDEa, VS Code)
• Codeium AI

Запуск

Запускать из корня:

• npm run storybook: storybook
• npm run web: запустит параллельно dev и tailwind:watch скрипты web модуля
• npm run native: запустит start скрипт native модуля

Web

Запускать из web/

• npm run dev
• npm run preview
• npm run build: сборка

Native (n/a)

Запускать из native/

• npm start
• npx expo start
• npx expo run:android: сборка, требует android SDK и JDK

Рабочий процесс

Общий код находится в папке shared. Компоненты помещаются в папку shared/components, для каждого компонента создается история (shared/stories/<componentName>.stories.tsx). Истории помогают лучше и проще тестировать и понимать компоненты. Для всех значимых вариантов компонента должен быть создан отдельный шаблон. Пример:

import type { Meta, StoryObj } from "@storybook/react";
import Input from "../components/controls/input";

const meta: Meta<typeof Input> = {
  title: "Controls/Input",
  component: Input,
  tags: ["autodocs"],
  parameters: {
    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
    layout: "centered",
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    label: "Имя",
    name: "firstName",
    type: "text",
  },
};

export const Email: Story = {
  args: {
    label: "Почта",
    name: "email",
    type: "email",
  },
};

export const Password: Story = {
  args: {
    label: "Пароль",
    name: "password",
    type: "password",
  },
};

Код, специфичный для конкретного модуля, помещается в папку модуля. Специфичный код - это такой, который использует библиотеки, доступные только на одной из платформ.

Оформление изменений

Правила оформления изменений кода в основном репозитории

Ветки

Ветки должны иметь название, соответствующее своему содержанию, и префикс:

Название ветки	Значение ветки	Пример ветки
fix-*	Исправление баг в функционале	fix-auth
feat-*	Добавление новой возможности	feat-auth
refactor-*	Рефакторинг существующего кода	refactor-auth

Коммиты

Имя коммита должно иметь префикс в зависимости от внесенных изменений, а также указывать на измененную часть кода

Название ветки	Значение ветки	Пример ветки
fix: *	Исправление бага в функционале	fix: submit button in map screen
feat: *	Добавление новой возможности	feat: dark theme
refactor: *	Рефакторинг существующего кода	refactor: home screen
chore: *	Общие действия по поддержке проекта	chore: update tailwind version
docs: *	Документация (например, истории storybook)	docs: add story for Button
deps: *	Настройка зависимостей проекта	deps: add Tailwind
style: *	Нефункциональные изменения дизайна	style: change text color (calendar)
tests: *	Добавление/обновление тестов	tests: cover Button
any: *	Все, что не подходит к предыдущему	any: prettify

PR

Pull Request (запрос на слияние) должен быть назван по правилам именования коммитов. В описании следует включить всю значимую информацию по внесенному изменению:

• что было сделано (если может быть непонятно из названия)
• в каком модуле
• какую issue закрывает PR
• скриншоты, если актуально

Contributors

esperor 📆 💻 📦 🤔

Aleksandr 📆 💻 🤔 🚇 🔣

Toderry 💻 🤔

li3pm 💻 🤔