🏆 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
- Создать временную ветку (например,
publish
) - Изменить версию пакета в
package.json
-
yarn
- освежить все зависимости -
yarn lint:fix
- автопоправка eslint ошибок -
yarn build
- сборка -
npm publish
- паблиш - Создать МР из временной ветки в
master
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 делаем его пересборку
- https://icomoon.io/app/#/projects
- Import Project из
src/fonts/selection.json
- Load
- Клик по гамбургер набора EverCloud в правом верхнем углу Import to Set
- Generate Font в правом нижнем углу
- Замена файлов
src/fonts
на загруженные из архива (папка fonts и selection.json)
-
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
- Stories for every possible component state
- Tests for specific behaviors and functions
- Declared Theme variables
- Props type
- Component description
- 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
- Upgrade tippy (tooltip) package version
- Upgrade imask & react-imask packages version