# 🛴 Evergis UI
## Contributing

🏆 **Before start:**

```
yarn
```
Update webstorm to >2017.3.3

Install Styled Components plugin [Jetbrains plugins](https://plugins.jetbrains.com/plugin/9997-styled-components)

🛠️ **Start dev:**

```
yarn storybook
```

Open in browser localhost:6006

✅ **Start tests:**

```
yarn test
```

## How to release

1. Создать временную ветку из `master`
2. Изменить версию пакета в `package.json`
3. `yarn` - освежить все зависимости
4. `yarn lint:fix` - автопоправка eslint ошибок
5. `yarn build` - сборка
6. В корне проекта создать файл `.npmrc` со следующим содержимым:

   ```
   //registry.npmjs.org/:_authToken=npm_XXX
   ```

   Здесь `npm_XXX` -- granular token; создать его можно [по инструкции](https://docs.npmjs.com/creating-and-viewing-access-tokens). ВАЖНО: с 09.12.2025 срок действия токена не может превышать 90 дней.

   **Примечение:** При создании токена необходимо *ОБЯЗАТЕЛЬНО* выбрать опцию `Bypass two-factor authentication (2FA)`.

7. `npm login` - залогиниться в npm (ВАЖНО: с 12.12.2025 сессия длится 12 часов, проверить, всё ли мы ещё залогинены, можно с помощью команды `npm whoami`).
8. `npm publish` - паблиш
9. Создать МР из временной ветки в `master`

## How to link

For testing uilib locally in client (or other projects)
without rebuilding after every update use linking:

1. `yarn build` - сборка
2. `yarn link` - создаём глобальную ссылку на uilib
3. Открываем client или другой проект
4. `yarn link "@evergis/uilib-gl"` - привязываем uilib к проекту
5. `yarn start` - запускаем проект с привязанной uilib
6. `yarn build` - после изменений в uilib делаем его пересборку

### How to manage icons

1. https://icomoon.io/app/#/projects
2. Import Project из `src/fonts/selection.json`
3. Load
4. Клик по гамбургер набора EverCloud в правом верхнем углу Import to Set
5. Generate Font в правом нижнем углу
6. Замена файлов `src/fonts` на загруженные из архива (папка fonts и selection.json)

## Used libraries, languages and tools

1. Typescript [Docs](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)
2. React [Docs](https://reactjs.org/docs/hello-world.html)
3. Styled-components [Docs](https://www.styled-components.com/docs)
4. Jest [Docs](https://facebook.github.io/jest/docs/en/using-matchers.html)
6. Storybook [Docs](https://storybook.js.org/basics/writing-stories/)

## Style Guide
1. Every component in separate directory
2. Test file in same directory, with name *.test.tsx
3. Do not write snapshot tests for components, for snapshot testing used stories, test only specific behavior and functions
4. Story file in same directory, with name *.story.tsx
5. Write stories for every possible component state
6. Every component must be working without any props
7. Do not create pull request with any linters or ts errors
8. File naming convention:

    1. PascalCase for file exporting classes and Components
    2. camelCase for file exporting objects and functions
    3. kebab-case for module replacements
9. Do not use default exports
10. Write component description in source file

### Completed Component must include the following:
1. Stories for every possible component state
2. Tests for specific behaviors and functions
3. Declared Theme variables
4. Props type
5. Component description

## Project structure
1. Import "styled-components" maps to styled-with-theme.ts
2. theme is theme folder 🚢
3. Simple reusable styled components and html tags with style are located in atoms folder
4. Groups of atoms are located in molecules folder
5. Groups of atoms, molecules and other are located in organisms folder

## Todo
1. Upgrade tippy (tooltip) package version
2. Upgrade imask & react-imask packages version
