Contribution Guide

To retain the sanity of our team members, and optimize our workflow, this project follows a strict code-style guide.

Atomic Design

This team uses a component-driven workflow and follows the principles of Atomic Design to organize our components in a systematic way. Even if it's originally a design-system principe, it works extremely well with React. Heres TL:DR;

1. src/components/ is split into Particles, Atoms, Molecules, Organisms and Pages
   • Templates are not needed since i React we just place the components as we see fit
2. Each file should fit into one of these categories
   • Particles should include common building blocks which is NOT components, such as defining the default theme settings.
   • Atoms should include basic building blocks which is components, such as Button, Input, Fonts, Animations etc. Most, but not all, of our Atoms will come from ChakraUI. Atoms shouldnt have much of any functionality on their own.
   • Molecules are compositions of one or more Atoms. Molecules can have their own properties and tries to combine multiple Atoms with some sort of functionality
   • Organisms is a combination of Molecules and Atoms to create an elaborate interface. At this level, the components begin to have the final shape, but they are still ensured to be independent, portable, and reusable enough to be reusable in any content.
   • Pages should be a combination of Organisms. This stage can include div and other components to create a layout with the given components.
3. Some rules are applied to each
   • The atoms should be written without margins and positions;
   • Only the molecules and organisms can set the positions of atoms, but these stacks can’t have any styles of margins and positions;
   • Pages render the components and it’s here that the Atomic Design will be connected to the rest of the application;

For reading purposes, take a look at: https://codeburst.io/atomic-design-with-react-e7aea8152957

Storybook

This project is component-driven, which means that creating components should be the heart discussion in development. We should aim to create independent reusable components.

After creating a component, create story in stories. Here should a the different useCases and variants of a component be shown. Each story should also be categorized in one of the atomic categories

Cypress

?