Re-structure components folder

[bloodzmoon]

112 I've done it.

I choose CSS Module for each component to prevent the duplicate class name bug and the reason why I choose is because It's already built in with the create-react-app so we can use it without installing any extra module or do extra configuration. 😎

I've re-structure each component into

components
|_ ComponentName
|   |_ ComponentName.js
|   |_ ComponentName.module.css
|   |_ index.js
|_ AnotherComponent
    |_ ... the same as above

And I've moved others css, js, images, fonts and webfonts folder into the assets folder

src
|_ components
|_ assets
    |_ css
    |_ js
    |_ images
    |_ fonts
    |_ webfonts

Also I've create utils folder and create my CSSModuleMapper function there when using multiple CSS Module class instead of typing many class in string literal

import styles from 'something.module.css'
...
<div className={`${styles.foo} ${styles.bar}`}> </div>

We can now use it like this

import styles from 'something.module.css'
import CSSModuleMapper from './path/to/cssModuleMapper'
const css = CSSModuleMapper(styles)
...
<div className={css('foo', 'bar')}> </div>

[bloodzmoon]

After re-structure I think we should have linter in our project something like prettier 🤔

[bloodzmoon]

Sorry I think I can't fix all that linting error 😢 because it will affect the rendering of HTML I think It has to carefully re-write to fix the error

[garimasingh128]

Awesome @bloodzmoon ! Can you change base branch to css-structured and I will merge it with master later on.

[bloodzmoon]

Awesome @bloodzmoon ! Can you change base branch to css-structured and I will merge it with master later on.

Yes! Thanks for the opportunity 😋