@evergis/ui

🛴 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. Создать временную ветку (например, publish)
2. Изменить версию пакета в package.json
3. yarn - освежить все зависимости
4. yarn lint:fix - автопоправка eslint ошибок
5. yarn build - сборка
6. npm publish - паблиш
7. Создать МР из временной ветки в 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/ui" - привязываем 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
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