@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

• Создать временную ветку (например, publish)
• Изменить версию пакета в package.json
• yarn - освежить все зависимости
• yarn lint:fix - автопоправка eslint ошибок
• yarn build - сборка
• npm publish - паблиш
• Создать МР из временной ветки в master

How to link

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

• yarn build - сборка
• yarn link - создаём глобальную ссылку на uilib
• Открываем client или другой проект
• yarn link "@evergis/ui" - привязываем uilib к проекту
• yarn start - запускаем проект с привязанной uilib
• yarn build - после изменений в uilib делаем его пересборку

How to manage icons

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

Used libraries, languages and tools

• Typescript Docs
• React Docs
• Styled-components Docs
• Jest Docs
• Storybook Docs

Style Guide

• Every component in separate directory

• Test file in same directory, with name *.test.tsx

• Do not write snapshot tests for components, for snapshot testing used stories, test only specific behavior and functions

• Story file in same directory, with name *.story.tsx

• Write stories for every possible component state

• Every component must be working without any props

• Do not create pull request with any linters or ts errors

• File naming convention:

  • PascalCase for file exporting classes and Components
  • camelCase for file exporting objects and functions
  • kebab-case for module replacements

• Do not use default exports

• Write component description in source file

Completed Component must include the following:

• Stories for every possible component state
• Tests for specific behaviors and functions
• Declared Theme variables
• Props type
• Component description

Project structure

• Import "styled-components" maps to styled-with-theme.ts
• theme is theme folder 🚢
• Simple reusable styled components and html tags with style are located in atoms folder
• Groups of atoms are located in molecules folder
• Groups of atoms, molecules and other are located in organisms folder

Todo

• Upgrade tippy (tooltip) package version
• Upgrade imask & react-imask packages version