Lorder UI Storybook

Трекер задач и времени

Презентация проекта на YouTube:

Установка

0. Склонируй текущий репозиторий

1. Для локальной работы необходимо установить пакетный менеджер npm и node.js server (обычно устанавливаются вместе)

2. Скопируй файл .env.example -> .env

$ cp .env.example .env

3. Установи локальные зависимости при помощи пакетного менеджера npm

$ npm i

4. Запусти проект локально при помощи пакетного менеджера npm

$ npm start

5. Приложение должно автоматически открыться в браузере и автоматически обновляться при любом изменении кода

Независимому члену команды

Именование файлов и папок

Общие принципы

1. Все нужное внутри

Все папки и файлы в них, структурированы по принципу "все нужное внутри". Это означает, что необходимый компонент / вспомогательная функция / файл хранилища расположены именно там, где он используется. Например, если компонент HiHeader используется ТОЛЬКО в файле ./src/#/#hi/hi.tsx, то он ДОЛЖЕН находится в папке ./src/#/#hi/hi-header, т.е. папка компонента должна находиться рядом с файлом, где этот компонент используется.

2. Модификаторы папок

1. @ === Общее - Если компонент, вспомогательнай функция или любой другой полезный файл используется в нескольких местах, то он должен быть вынесен в одну из папок, помеченных модификатором @. Или наоборот: если папка помечена модификатором @, значит ее содержимое используется минимум в 2 местах
2. # === Маршрут сайта - Если компонент представляет собой страницу проекта (роут, маршрут), то папка с таким компонентом содержит модификатор #. (Например, файлы компонентов для роута /public/f2c6742e-2394-4982-8979-5f01c5ab2a50 находятся в папке ./src/#/#p/#-uuid).
3. # === Общий вид для группы страниц - Иногда группа страниц может содержать общую часть вида (лейаут). Файл общего вида для группы страниц (роутов) содержится, в этом случае, в промежуточной папке c модификатором #, внутри которой находятся дочерние страницы (роуты). Например, для вошедшего пользователя для страниц / и /projects/53/tasks есть общий вид. Этот общий вид содержится в файле ./src/#/main.tsx, а сами страницы (роуты) соотвественно в папках ./src/#/# и ./src/#/#projects/#-uuid. В свою очередь у страниц /projects/53/tasks и /projects/53/members есть общая часть вида, содержащаяся в файле ./src/#/#projects/projects.tsx. И т.д. Таким образом, модификаторы папок позволяют легко понимать, какого рода файлы где находятся и, одновременно, оставляют структуру достаточно простой и понятной.

3. Структура папок

1. # - содержит все страницы сайта (роуты), подписанные на изменения глобальных данных проекта

   1.1. #/@store - содержит сущности данных, используемые в проекте глобально (в любом из файлов внутри # папки) (для некоторых страниц могут встречаться локальные хранилища)

   1.2. #/@common - содержит компоненты подписанные на изменения глобальных данных проекта, которые используются на 2х и более разных страницах (роутах) в любом из файлов внутри # папки

2. @components - содержит переиспользуемые компоненты, которые ничего не знают о данных проекта. Эти компоненты с минимальными изменениями можно использовать в других проектах и независимо разрабатывать используя storybook

3. @hooks - содержит переиспользуемые хуки и компоненты высшего порядка, которые ничего не знают о данных проекта

4. @styles - содержит общие стили. смотри стилизацию темы для material-ui библиотеки

5. @types - общие типы данных в проекте

6. @utils - полезные утилиты, используемые в проекте.

Участие в разработке

Начать решать задачи проекта

Приступить к работе