@evergis/ui

🛴 Evergis UI

WIP 🚧 don't use in production

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

• Typescript Docs
• React Docs
• Styled-components Docs
• Jest Docs
• Enzyme 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

• baseUrl set in tsconfig to "./src", and you can write non relative paths

  import {Atom} from "atoms/Atom"
  

• 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