🛴 Evergis UI

Contributing

🏆 Before start:

yarn

Update webstorm to >2017.3.3

Install Styled Components plugin Jetbrains plugins

🛠️ 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; создать его можно по инструкции. ВАЖНО: с 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

Источник истины набора иконок — объект iconTypes в src/atoms/Icon/Icon.ts. Инвариант: множество codepoint-ов в iconTypes == глифы в src/fonts/EverCloud.svg == иконки в src/fonts/selection.json. Проверяется командой yarn check-icons.

Добавить иконку (рекомендуемый способ)

yarn add-icon <путь-к.svg> [--name <имя>] [--padding <0..0.4>]

Скрипт сам: нормализует SVG (SVGO), переносит контур в координаты шрифта (грид 1024, флип Y, baseline), назначает следующий свободный codepoint, дописывает глиф в EverCloud.svg + запись в selection.json, вставляет строку в iconTypes и пересобирает EverCloud.ttf/woff/eot. После этого иконка доступна как <Icon kind="<имя>" />. Если имя уже занято — команда падает с ошибкой.

Требования к исходному SVG: монохромный, контуры залиты (fill, не stroke), есть viewBox (желательно квадратный и без лишних полей). Результат стоит проверить визуально в Storybook (yarn storybook, story Atoms/Icon) — особенно иконки с отверстиями: при неверном направлении контуров дыра может залиться, тогда поправьте исходный SVG и перезапустите.

Дубликаты по содержимому: скрипт сравнивает форму новой иконки с уже имеющимися (растровая «подпись» 32×32) и падает с ошибкой, если такая иконка уже есть. Обойти намеренно — флаг --force.

Удалить иконку

yarn remove-icon <имя> [<имя2> ...] [--dry-run]

Снимает строку из iconTypes и пересобирает шрифт: глиф уходит из EverCloud.svg, selection.json и всех бинарников. Если codepoint иконки используется ещё одним именем-алиасом (напр. geom_polygon/geom_multipolygon), глиф сохраняется — снимается только имя.

Вспомогательные команды: yarn build-font — пересобрать шрифт из текущих исходников (с приведением к iconTypes); yarn check-icons — проверить инвариант.

Ручной способ через icomoon (fallback)

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)

Совместимость двух систем: yarn add-icon хранит путь в selection.json в тех же координатах, что и icomoon (связь с глифом шрифта — font_y = 832 − stored_y). Поэтому оба workflow взаимозаменяемы: selection.json можно ре-импортировать в icomoon и перегенерировать шрифт (иконки, добавленные скриптом, отобразятся корректно), а результат генерации icomoon обрабатывается yarn build-font штатно.

Used libraries, languages and tools

1. Typescript Docs
2. React Docs
3. Styled-components Docs
4. Jest Docs
5. Storybook Docs

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