@evergis/ui

🛴 Evergis UI

Contributing

🏆 Before start:

npm i

Update webstorm to >2017.3.3

Install Styled Components plugin Jetbrains plugins

Configure prettier:

Add two watchers for Typescript and Typescript JSX files docs

Enable tslint and stylelint: tslint settings stylelint settings

Mark src directory as Resource root

🛠️ Start dev:

npm start

Open in browser localhost:6006

✅ Start tests:

npm run test

Used libraries, languages and tools

1. Typescript Docs
2. React Docs
3. Styled-components Docs
4. Jest Docs
5. Enzyme Docs
6. 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. baseUrl set in tsconfig to "./src", and you can write non relative paths

   import {Atom} from "atoms/Atom"
   

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