[Refacto] Refactoring app with Vitejs React-ts and MUI (#3)

Playground for increase my skills (@LedruRomane) in ViteJs, React,
Typescript and MUI / MUI integration.

# [V1] 
![Capture d’écran 2024-01-02 à 15 44
19](https://github.com/Elao/ca-mache-quoi/assets/113915173/75ff79c9-1ae6-4e1f-8690-cc7f3887cc62)

.eslintrc.cjs

@@ -0,0 +1,77 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:json/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+  plugins: ['react-refresh'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  rules: {
+    // Basics
+    'no-unused-vars': 'off',
+
+    // Forbids console.log (prevent accidental commits)
+    'no-console': ['error', { 'allow': ['debug', 'info', 'warn', 'error'] }],
+
+    // React Refresh
+    'react-refresh/only-export-components': 'off',
+
+    // React
+    // https://eslint.org/docs/latest/rules/jsx-quotes
+    'jsx-quotes': ['error', 'prefer-double'],
+    // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md
+    'react/jsx-curly-spacing': ['error', {
+      when: 'never',
+      children: true
+    }],
+
+    // TypeScript
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/comma-dangle': ['error', {
+      // https://eslint.org/docs/latest/rules/comma-dangle#options
+      arrays: 'always-multiline',
+      objects: 'always-multiline',
+      imports: 'always-multiline',
+      exports: 'always-multiline',
+      functions: 'always-multiline',
+      // https://typescript-eslint.io/rules/comma-dangle/
+      enums: 'always-multiline',
+      generics: 'always-multiline',
+      tuples: 'always-multiline'
+    }],
+
+    '@typescript-eslint/member-delimiter-style': ['error', {
+      // https://typescript-eslint.io/rules/member-delimiter-style/
+      multiline: {
+        delimiter: 'none',
+        requireLast: false
+      },
+      singleline: {
+        delimiter: 'comma',
+        requireLast: false
+      },
+      multilineDetection: 'brackets'
+    }],
+
+    "@typescript-eslint/no-unused-vars": [
+      "error"
+    ],
+  },
+}

.github/workflows/lint.yaml

@@ -0,0 +1,38 @@
+name: Lint
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [ opened, synchronize, reopened, ready_for_review ]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+
+  lint_front:
+    name: 'Lint Front'
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    # Do not run on WIP or Draft PRs
+    if: "!github.event.pull_request || (!contains(github.event.pull_request.labels.*.name, 'WIP') && github.event.pull_request.draft == false)"
+
+    steps:
+
+      - name: 'Checkout'
+        uses: actions/checkout@v3
+
+      - name: 'Install dependencies'
+        run: |
+          make install@integration
+
+      - name: 'ESLint front'
+        run: |
+          make lint.eslint@integration
+
+      - name: 'TypeScript check front'
+        run: |
+          make lint.tsc@integration

.gitignore

@@ -1 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Makefile

@@ -0,0 +1,48 @@
+# --------------------------------#
+# "make" command
+# --------------------------------#
+
+-include ./make/text.mk
+-include ./make/help.mk
+-include ./make/url.mk
+
+.SILENT:
+.PHONY: build
+
+## Setup - Install dependencies
+install:
+	npm install
+
+install@integration:
+	npm install --color=always --no-progress --no-audit --no-fund
+
+## Setup - Update dependencies
+update:
+	npm update
+
+## Serve - Serve the whole app
+serve: export APP_RUNTIME_ENV ?= development
+serve:
+	npx vite --host=mache.ela.ooo --port=63286
+
+## Build - Build
+build: export APP_RUNTIME_ENV ?= development
+build:
+	npx tsc && npx vite build
+
+## Tests - Lint
+lint: lint.eslint lint.tsc
+
+lint.eslint:
+	npx eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0
+
+lint.tsc:
+	npx tsc --noemit
+
+lint@integration: lint.eslint@integration lint.tsc@integration
+
+lint.eslint@integration:
+	npx eslint ./
+
+lint.tsc@integration:
+	npx tsc --noemit

README.md

@@ -1,53 +1,82 @@
-# Ça-mâche-quoi
+ça-mâche-quoi Front
+===========
 
-Internal project dedicated to the culinary satisfaction of the Elao Magic Team
-🍕 🍔 🥙 🥗 🌯 🍣 🍛 🍟
+ça-mâche-quoi front is a React web application in TypeScript.
 
-<!-- INDEX -->
-<details open="open">
-  <summary>Index</summary>
-  <ol>
-    <li><a href="#setup">Development</a></li>
-    <li><a href="#needs">Needs</a></li>
-  </ol>
-</details>
+## Installation
+
+```shell
+make install
+```
 
 ## Development
 
-### Setup 
+Start the dev server / watcher:
 
-Once you have cloned your project, make sure that you are in the root directory and run this command in your terminal: 
+```shell
+make serve
+````
 
+Linting:
+
+```shell
+make lint
 ```
-npm install
-```
 
-### Usage 
+## Configuration
+
+The app exposes some configuration variables through env vars.  
+By default, it loads vars from env files depending on the context, in the
+following order:
+
+1. `.env`
+1. `.env.local`
+1. `.env.{production,staging,development}`
+1. `.env.{production,staging,development}.local`
+
+Last defined value wins. Actual env var always wins.
 
-Once all the necessary dependencies have been installed, your can launch the app by running this command in your terminal: 
+> **Note**:
+> You can also load another specific env file determined by the `ENV_FILE` var, for instance:
+>
+>     ENV_FILE=.env.production make serve
 
+To add new configuration variables, add these to the main `.env` file
+and provide a development value (if relevent) in the `.env.development` file.
+
+## Build
+
+Build for production using:
+
+```shell
+make build@production
 ```
-npm start
+
+Build for staging using:
+
+```shell
+make build@staging
 ```
 
-## Needs
+## Serve
+
+Serve a build:
 
-(EN)
-- As a user I would like to decide where to eat. 
-- As a user I would like to select multiple cuisine types to fill my slot machine. 
-- As a user I would like to select all the cuisinte types when I click on a button.
-- As a user I would like to start my slot machine when I click on a button.
-- As a user I would like to obtain a result among my options (cuisine type I would like to eat).
-- As a user I would like to be able to share the result. 
+```shell
+make serve.static
+```
 
-(FR)
-- En tant qu’utilisateur je veux pouvoir choisir où me restaurer.
-- En tant qu’utilisateur je veux pouvoir sélectionner un ensemble de catégories (types de cuisine) pour remplir ma roulette.
-- En tant qu'utilisateur je veux pouvoir cocher tout les cases en cliquant sur un bouton
-- En tant qu’utilisateur je veux pouvoir déclencher ma roulette en cliquant sur un bouton.
-- En tant qu’utilisateur je veux obtenir un résultat (type de cuisine à manger).
-- En tant qu'utilisateur je veux pouvoir partager le résultat de ma roulette.
+## Going further
 
+- [Assets](res/doc/assets.md)
+- [Routes](res/doc/routes.md)
 
+## References
 
+- [TypeScript](https://www.typescriptlang.org/)
+- [TypeScript Cheatscheet](https://react-typescript-cheatsheet.netlify.app/)
+- [Apollo GraphQL Client](https://www.apollographql.com/docs/react/)
+- [Using Apollo with TypeScript](https://www.apollographql.com/docs/react/development-testing/static-typing/)
 
+---  
+⬆︎ [**Back to README.md**](../README.md)  

assets/app.scss

@@ -0,0 +1,5 @@
+body {
+  display: flex;
+  flex: 1;
+  height: 100vh;
+}