bfg-common 1.5.18 → 1.5.19

package/CODE_STYLE.md

@@ -0,0 +1,109 @@
+![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
+## Javascript
+
+### Название переменных
+
+Используем camelCase:
+```javascript
+const theExample = 0
+```
+
+Название переменных должно быть содержательным:
+```javascript
+const desc = 'some description' // Плохо
+
+const description = 'some description' // Хорошо
+```
+
+Если переменная типа boolean, используем префиксы is или has:
+```javascript
+const isDisabled = true
+
+const hasName = false
+```
+
+Приоритетно используем стрелочные функции:
+```javascript
+const example = () => {...}
+```
+
+---
+
+![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
+## Typescript
+
+### Interface
+Название интерфейсов начинаем с префикса **I_** (также есть **API_**, **UI_**, подробно об этом написано в файле PROJECT_STRUCTURE.md):
+```typescript
+interface I_Example
+```
+
+### Type
+Название типов начинаем с префикса **T_**:
+```typescript
+type T_Example
+```
+
+### Enum
+Название enum начинаем с префикса **E_**:
+```typescript
+enum E_Example
+```
+
+P.S. Нужно писать как можно более понятные типы.
+
+---
+
+![Vue.js](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D)
+## Vue
+
+### Название тегов
+Используем kebab-case:
+```html
+<the-button>Button</the-button>
+```
+
+### Название тега
+Название тега не должно состоять из одного слова:
+```html
+<example></example> // Плохо
+
+<the-example></the-example> // Хорошо
+```
+
+### Использование "the" в названии тега 
+Если название тега, к примеру, icon, должно быть так:
+```html
+<the-icon></the-icon>
+```
+
+### Использование самозакрывающихся тегов
+Если в тег ничего не передаем, то используем его как самозакрывающийся:
+```html
+<the-icon/>
+```
+
+### Props / Emits
+Props пишем в kebab-case:
+```html
+<the-example my-name="Name"/>
+```
+
+Emits пишем в kebab-case, ключ первого аргумента всегда "event", а второго - "value":
+```javascript
+const emits = defineEmits<{
+  (event: 'change-name', value: string): void
+}>()
+``` 
+
+### Composition API
+Так как у нас используется Composition API, нужно весь код группировать по блокам:
+```javascript
+const isShowModal = ref<boolean>(false)
+const toggleModal = (): void => isShowModal.value = !isShowModal.value
+
+const errors = ref<string[]>([])
+const updateErrors = (newErrors: string[]): void => {
+    errors.value = newErrors
+}
+``` 

package/PROJECT_STRUCTURE.md

@@ -26,8 +26,35 @@
 
 ---
 
-## models
-Папка в которой хронятся interfaces, types и enums глобальные и к примеру те которые нельзя создавать в plugins и т.п.
+## lib
+Папка содержит глобальные утилиты, конфигурации и модели:
+
+### config
+В папке config хранятся файлы типа *.ts, в них находятся конфигурации.
+Название переменных в конфигурации заканчивается на Func, если это функция.
+```typescript
+const exempleFunc = (localization: UI_I_localization): I_Exemple => {...}
+
+const steps = [0, 1, 2, 3]
+```
+
+### models
+Содержит interfaces, types и enums, глобальные и те, которые нельзя создавать в pages, store, plugins и т.п.
+
+### utils
+Содержит вспомогательные утилиты и функции общего назначения
+
+Структура папки lib:
+```
+lib
+ |-config
+ |  |-someConfig.ts
+ |-models
+ |  |-interfaces.ts
+ |  |-types.ts
+ |  |-enums.ts
+ |-utils.ts
+```
 
 ---
 
@@ -40,3 +67,64 @@
 Можно ознакомится по документации nuxt 3
 
 ---
+
+## store (Vuex)
+Стор у нас модульный, модули создаются как минимум по роутингу.
+
+Основная структура такая:
+
+```
+lib
+ |-config
+ |  |-someConfig.ts
+ |-models
+ |  |-interfaces.ts
+ |  |-types.ts
+ |  |-enums.ts
+ |-utils.ts
+mappers
+ |-someMapper.ts
+actions.ts
+getters.ts
+mutations.ts
+state.ts
+store.ts
+```
+
+#### lib
+В папке lib находятся:
+- config - конфигурации store
+- models - интерфейсы и типы для store
+- utils.ts - вспомогательные функции
+
+#### mappers
+В папке mappers хранятся файлы .ts формата, в которых есть функции (мапперы), обрабатывающие ответ от бэка так, чтобы было удобно использовать на фронте.
+
+Мапперы вызываются только из файла actions.ts и после обработки через mutations.ts попадают в state.
+
+#### actions.ts
+В этом файле в основном делаются запросы на бэк и обработка данных.
+
+#### getters.ts
+В этом файле есть методы, которые возвращают данные из state.
+
+#### mutations.ts
+В этом файле изменяем/обновляем данные из state.
+
+#### state.ts
+В этом файле хранятся переменные.
+
+#### store.ts
+В этом файле все собирается воедино.
+
+---
+
+## Название папок/файлов
+
+Название всех папок пишем в camelCase.
+
+Название всех файлов кроме *.vue(компонент) пишем camelCase
+
+Название всех файлов в pages *.vue (компонент) пишем в kebab-case.
+
+Название всех файлов вне pages *.vue (компонент) пишем в PascalCase.