285 lines
6.3 KiB
Markdown
285 lines
6.3 KiB
Markdown
# 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', {
|
||
...
|
||
})
|
||
``` |