frontend/seed/README.md

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

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 :

{
  "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

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

Styles

Add a file in the parent

stylelint.config.js

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:

'prettier/prettier': 'error',

2. Then edit your VSCode as below

{
  "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

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

{
  "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

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

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 :

const { Zeus, $ } = zeus;

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

have been replaced by

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