Code Style Guide

We follow the Standard JS code style:

Structure of the code

Folders structure

- src
	- components
		- atoms
		- molecules
		- organisms
	- pages
	- templates
	- services
	- hooks
	- utils

Component file structure

Each component should be structure like this:

- ComponentName
	- index.js
	- ComponentName.jsx
	- ComponentName.styles.js
	- __test__
		- mockData.json
		- ComponentName.test.js
	- __storybook__
		- ComponentName.story.js

Each index.js file is an export for folders, like this:

// ComponentName Folder
export * from './ComponentName'

<aside> 💡 By using named import we ensure the use of the correct name of the components through all the app.

</aside>

All folders should have also an index.js file in its root with the same structure:

// atoms
export * from './AtomOne'
export * from './AtomTwo'
export * from './AtomThree'
// ...

Naming conventions

Folder and Files

For naming folders we use camelCase
```
atoms
components
pages
utils
hooks
```
For naming component files and folders we use PascalCase
- All React Component files should use .jsx extension
- All React Component style files should be named this way: ComponentName.styles.js
- All React Component test files should be named this way: ComponentName.test.js
- All React Component stories should be named this way: ComponentName.story.js
```
- ComponentName
	- index.js
	- ComponentName.jsx
	- ComponentName.styles.scss
	- __test__
		- mockData.json
		- ComponentName.test.js
	- __storybook__
		- ComponentName.story.js
```

For naming utils, hooks, services, use camelCase

- services
	- users
		- __test__
			- mockData.json
			- users.test.js
		- users.js
		- index.js
	- data
		- __test__
			- mockData.json
			- data.test.js
		- data.js
		- index.js