How do we work on this project (WIP)

Remember - to read code is harder than to write it, care about the reader:

• Comment things, write WHY this works as it is.
• It's better to copy-paste sometimes than to create complex abstractions.

These style guides rely on AirBnB ESLint rules and extend them.

Code itself

It's highly recommended to keep components small or divide them into sub-components. File with component should not have more than 250 lines of code (with imports, styles, etc), except really rare cases.

The filename must be exactly the same as the default export from this file for components.

Typescript

• Avoid using Function, Object or so defining types.
• Avoid using Enums, use union types instead.
• Prefer Interfaces over types.

Themes

For themes - we use declare module "@material-ui/core/styles/createMuiTheme" { interface Theme { part to have default interfaces for themes with custom properties. This allows us to ensure we use the same shape of the theme across all places and everything is defined.

Overrides

Expose props from Material UI wherever possible, which means we can extend component functionality or change something without diving deep into UI-Kit.

Custom

Files/folders structure

For themes

Try to keep files small and responsible for certain parts of the theme, for example, colors, sizes or so. You can refer to the default theme to see how the code is folded.

For overrides

The components structure should repeat structure from MaterialUI docs: DataDisplay, Navigation, Layout, Inputs, etc. And components inside them. This allows to quickly find Makeen UI-Kit version of something and refer to the docs.

General

Components should have the following structure:

• index.ts - just export default from the component file
• Home.tsx - filename should be the same as parent folder name and default export variable name
• components - optional folder with sub-components of given component - they should follow the same principles as this one.
• Home.model.ts - optional file with data interfaces, DTOs, and necessary stuff
• Home.styles.ts - optional file with styled-components wrappers, withStyles definitions, etc.