# Make it Seed

## Author

Nicolas Bernier

## Infos

This project needs to be the submodule of a project.
He is not supposed to be launched on its own.

## Firebase

If you are using firebase, do not fodrget to add the following in the index.html file of the project

<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/_VERSION_/firebase-app.js"></script>
<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/_VERSION_/firebase-auth.js"></script>

## Structure

/components : react part

- /enhancers : high order components
- /formItems : components used by redux-form
- /forms : redux-from forms
- /global : global components of the app (Navigation, Header, ...)
- /items : components used in multiple other components
- /layouts : layout components of the app
- /listItems : components used in list
- /pageItems : specific sub-part of pages (if used several times, shoudl be moved to items)
- /routes : page components (endpoint of the react-router)
- /structure : structural components taking children

/store : redux part

- /app // app resource
- /auth // auth resource
- /content // content ressource
- /setup // setup of the store
- /utils
- rootReducer.ts // root reducers
- rootSage.ts // root sagas

/styles : general scss

## Icons

We use this librairie (check in dependencies)

https://fontawesome.com/icons?d=gallery&s=brands,light,regular,solid&m=free

For project specific font-type icons: 

### Creating a font zip on Icomoon
1. Get your folder with icons in `.svg`
2. Ensure your naming is correct, if not, do **not** rename in Icomoon but in your own folder, else it may break things
3. Go to https://icomoon.io/app and import that folder into a new Set that you create
4. Click on “Generate Font” in the bottom right area, then once on the page is loaded, a “Download” button appears where “Generate Font” was, click and download the zip

### Linking the created font to your project
1. In your project, replace your `[project]-font` with what was exported from Icomoon above *(example: `mygms-font`)*
2. Take everything in the `/font` folder and copy/paste it into `styling/components/fonts`, making sure that the names stay the same (Icomoon…)
3. Go to your `ProjectIcon` component and copy/paste the `style.css` file from your newly created `[project]-font` folder into `ProjectIcon.styled.ts` (from L.26  `.icon- … ` )
4. Select all instances of `.icon-` and replace with `&.icon-`
5. Select all instances of `'\` and replace with `'\\`

And you’re done!

## Usage
Use component `ProjectIcon`
Name in `icon` prop has to be what is after the `icon-` in the icon’s list (find the icon list and names in the `demo.html` from your `[project]-font` folder)

`<ProjectIcon icon=‘arrow-right’/>`


## Eslint

Could be removed as it should be present in the parent for the IDE

Eslint package related modules to add in the parent :

```json
{
  "babel-eslint": "^10.0.2",
  "eslint": "^5.16.0",
  "eslint-config-airbnb": "^17.1.1",
  "eslint-config-airbnb-base": "^13.2.0",
  "eslint-config-airbnb-typescript": "^4.0.1",
  "eslint-config-prettier": "^6.0.0",
  "eslint-import-resolver-webpack": "^0.10.1",
  "eslint-plugin-babel": "^5.1.0",
  "eslint-plugin-import": "^2.22.1",
  "eslint-plugin-jest": "^22.14.1",
  "eslint-plugin-jsx-a11y": "^6.2.3",
  "eslint-plugin-prettier": "^3.1.0",
  "eslint-plugin-react": "^7.14.3",
  "eslint-plugin-react-hooks": "4.3.0",
  "prettier": "^1.18.2",
  "prettier-stylelint": "^0.4.2",
  "typescript": "^3.9.5"
}
```

## Reorder package.json

```bash
npm remove -S example && npm remove -D example;
```

## Styles

Add a file in the parent

stylelint.config.js

```javascript
module.exports = {
  extends: './seed/stylelint.config.js',
};
```

## Code formating (prettier && eslint)

Prettier handle code formating (tabs, space, ...)
Eslint handle code error

You need the plugins _eslint_ and _prettier - code formatter_ from VS Code

### Config

You only need the plugin eslint

1. In you eslint config, include the prettier config as below:

```javascript
'prettier/prettier': 'error',
```

2. Then edit your VSCode as below

```json
{
  "javascript.validate.enable": false,
  "typescript.validate.enable": false,
  // Editor
  "editor.formatOnSave": true,
  // Eslint
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}
```

3. Add a .prettierrc.js (or equivalent) in your root folder

```javascript
module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
};
```

## Other VSCode extansions

Make sure to have the following extensions :

SCSS intelliSence
stylelint

## Typescript

Add tsconfig.json in the parent

```json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "*": ["src/*", "admin/src/*", "seed/src/*"]
    }
  }
}
```

## Store

### Structure

a resource is a folder made of

resourceName/
- actions
- api
- constants
- index : gather everything (module based)
- reducer
- sagas
- selectors

In the parent :

create appSaga.ts in the store folder of this form

```typescript
import { fork } from 'redux-saga/effects';

import YOUR_RESROURCE from 'store/YOUR_RESROURCE';

import bootupSaga from './bootup';

export default function* appSaga(): void {
  yield fork(bootupSaga);
  yield fork(YOUR_RESROURCE.saga);
  ...
}

```

create appReducers.ts in the store folder of this form

```typescript
import YOUR_RESROURCE from 'store/YOUR_RESROURCE';
...

const reducers = {
  resource1: YOUR_RESROURCE.reducer,
  ...
};

export type AppStoreState = {
  resource1: ReturnType<typeof YOUR_RESROURCE.reducer>;
};

export default reducers;

```


# Zeus

graphql-zeus is a helper to perform graphql actions (query, mutation, subscription)

With v4, some minor syntax changes occured :

```ts
const { Zeus, $ } = zeus;

Zeus.query({
  ...
})
Zeus.mutation({
  ...
}) 
```

have been replaced by

```ts
const { Zeus, $ } = zeus;
Zeus('query', {
  ...
})
Zeus('mutation', {
  ...
}) 
```