build: move from CRA to Vite

ddecrulle · Jun 25, 2023 · 48d2be1 · 48d2be1
1 parent f6c0681
commit 48d2be1
Show file tree

Hide file tree

Showing 78 changed files with 12,397 additions and 18,952 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,16 @@
+module.exports = {
+	env: { browser: true, es2020: true },
+	extends: [
+		'eslint:recommended',
+		'plugin:react/recommended',
+		'plugin:react/jsx-runtime',
+		'plugin:react-hooks/recommended',
+	],
+	parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+	settings: { react: { version: '18.2' } },
+	plugins: ['react-refresh'],
+	rules: {
+		'react-refresh/only-export-components': 'warn',
+		'react/prop-types': 'off',
+	},
+};
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.gitignore b/.gitignore
@@ -9,7 +9,7 @@
 /coverage
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store

diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,4 @@
+node_modules/
+/.yarn_home/
+/dist/
+/public/
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,9 @@
+{
+	"tabWidth": 2,
+	"useTabs": false,
+	"printWidth": 80,
+	"semi": true,
+	"trailingComma": "es5",
+	"jsxSingleQuote": true,
+	"singleQuote": true
+}
diff --git a/.prettierrc.json b/.prettierrc.json
diff --git a/Dockerfile b/Dockerfile
@@ -1,5 +1,5 @@
 FROM nginx
-COPY build /usr/share/nginx/html
+COPY dist /usr/share/nginx/html
 RUN rm etc/nginx/conf.d/default.conf
 COPY nginx.conf etc/nginx/conf.d/
 

diff --git a/commitlint.config.js b/commitlint.config.js
@@ -1,23 +1,24 @@
+// eslint-disable-next-line no-undef
 module.exports = {
-	extends: ['@commitlint/config-conventional'],
-	rules: {
-		'type-enum': [
-			2,
-			'always',
-			[
-				'build',
-				'chore',
-				'ci',
-				'docs',
-				'feat',
-				'fix',
-				'perf',
-				'refactor',
-				'revert',
-				'style',
-				'test',
-				'bump',
-			],
-		],
-	},
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      [
+        'build',
+        'chore',
+        'ci',
+        'docs',
+        'feat',
+        'fix',
+        'perf',
+        'refactor',
+        'revert',
+        'style',
+        'test',
+        'bump',
+      ],
+    ],
+  },
 };
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#2b5797">
+  <meta name="theme-color" content="#ffffff">
+  <link rel="icon" href="/favicon.ico" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,500">
+  <link href="https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="Documentation application for the new Insee survey data collection product" />
+  <link rel="manifest" href="/manifest.json" />
+  <script src="/env-config.js"></script>
+  <title>Knowledge</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <script type="module" src="./src/ui/main.jsx"></script>
+</body>
+
+</html>
diff --git a/jsconfig.json b/jsconfig.json
@@ -1,5 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": "./src"
+    "baseUrl": "src"
   }
 }
diff --git a/package.json b/package.json
@@ -1,75 +1,56 @@
 {
-	"name": "knowledge",
-	"version": "1.7.9",
-	"description": "The user interface that presents the service offer of the INSEE survey information system",
-	"author": "u/ddecrulle",
-	"license": "MIT",
-	"dependencies": {
-		"@emotion/react": "^11.11.0",
-		"@emotion/styled": "^11.11.0",
-		"@mui/icons-material": "^5.11.16",
-		"@mui/lab": "5.0.0-alpha.129",
-		"@mui/material": "^5.13.3",
-		"@testing-library/jest-dom": "^5.16.5",
-		"@testing-library/react": "^14.0.0",
-		"@testing-library/user-event": "^14.4.3",
-		"aos": "^2.3.4",
-		"lodash.groupby": "^4.6.0",
-		"powerhooks": "^0.26.14",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"react-router-dom": "^6.11.2",
-		"react-scripts": "^5.0.1",
-		"tss-react": "^4.8.5",
-		"use-query-params": "^2.2.1"
-	},
-	"scripts": {
-		"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
-		"start": "react-scripts start",
-		"build": "npm run generate-entrypoint && react-scripts build",
-		"test": "react-scripts test",
-		"eject": "react-scripts eject",
-		"generate-entrypoint": "node scripts/generate-entrypoint.js",
-		"prepare": "husky install"
-	},
-	"lint-staged": {
-		"**/*.{js,jsx,css}": [
-			"yarn prettier --write",
-			"yarn eslint --fix"
-		]
-	},
-	"eslintConfig": {
-		"extends": [
-			"react-app",
-			"react-app/jest"
-		]
-	},
-	"browserslist": {
-		"production": [
-			">0.2%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
-	},
-	"devDependencies": {
-		"@commitlint/cli": "^17.6.5",
-		"@commitlint/config-conventional": "^17.6.5",
-		"eslint": "^8.41.0",
-		"eslint-config-airbnb": "^19.0.4",
-		"eslint-config-prettier": "^8.8.0",
-		"eslint-config-react-app": "^7.0.1",
-		"eslint-plugin-import": "^2.27.5",
-		"eslint-plugin-jsx-a11y": "^6.7.1",
-		"eslint-plugin-prettier": "^4.2.1",
-		"eslint-plugin-react": "^7.32.2",
-		"eslint-plugin-react-hooks": "^4.6.0",
-		"husky": "^8.0.3",
-		"lint-staged": "^13.2.2",
-		"prettier": "^2.8.8"
-	}
+  "name": "knowledge",
+  "version": "1.8.0",
+  "description": "The user interface that presents the service offer of the INSEE survey information system",
+  "author": "u/ddecrulle",
+  "license": "MIT",
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "5.0.0-alpha.134",
+    "@mui/material": "^5.13.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "aos": "^2.3.4",
+    "lodash.groupby": "^4.6.0",
+    "powerhooks": "^0.26.14",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.0",
+    "tss-react": "^4.8.6",
+    "use-query-params": "^2.2.1"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "npm run generate-entrypoint && vite build",
+    "_format": "prettier '**/*.{js,jsx,json,md}'",
+    "format": "npm run _format -- --write",
+    "format:check": "npm run _format -- --list-different",
+    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "generate-entrypoint": "node scripts/generate-entrypoint.js",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,css}": [
+      "yarn format",
+      "yarn lint"
+    ]
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.6.5",
+    "@commitlint/config-conventional": "^17.6.5",
+    "@vitejs/plugin-react": "^4.0.1",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.8.8",
+    "vite": "^4.3.9",
+    "vite-tsconfig-paths": "^3.6.0"
+  }
 }
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,19 +1,19 @@
 {
-    "name": "Knowledge",
-    "short_name": "Knowledge",
-    "icons": [
-        {
-            "src": "/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
+  "name": "Knowledge",
+  "short_name": "Knowledge",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
 }
diff --git a/scripts/generate-entrypoint.js b/scripts/generate-entrypoint.js
@@ -1,22 +1,22 @@
-var fs = require('fs');
+import { readFile, writeFileSync } from 'fs';
 
-fs.readFile('.env', 'utf8', function(_, contents) {
+readFile('.env', 'utf8', function (_, contents) {
   const content = contents
     .split('\n')
-    .filter(line => !line.startsWith('#'))
-    .map(line => line.split('='))
-    .filter(data => data.length === 2)
+    .filter((line) => !line.startsWith('#'))
+    .map((line) => line.split('='))
+    .filter((data) => data.length === 2)
     .map(
       ([key]) =>
         `echo "window._env_['${key.replace(
           'REACT_APP_',
-          '',
-        )}'] = '\$${key.replace(
+          ''
+        )}'] = '${key.replace(
           'REACT_APP_',
-          '',
-        )}';" >> /usr/share/nginx/html/env-config.js`,
+          ''
+        )}';" >> /usr/share/nginx/html/env-config.js`
     );
 
   const fullFile = ['#!/bin/sh', ...content, 'exec "$@"'].join('\n');
-  fs.writeFileSync('entrypoint.sh', fullFile, 'utf8');
-});
+  writeFileSync('entrypoint.sh', fullFile, 'utf8');
+});
diff --git a/src/core/api/createApiClient.js b/src/core/api/createApiClient.js
@@ -1,9 +1,9 @@
 import { getRequest } from 'core/fetch';
 
 export const createApiClient = (apiUrl) => {
-	return {
-		getFunctions: async () => getRequest(`${apiUrl}/function/all`),
-		getFunctionById: async (id) => getRequest(`${apiUrl}/function/${id}`),
-		getProducts: async () => getRequest(`${apiUrl}/hierarchy/products`),
-	};
+  return {
+    getFunctions: async () => getRequest(`${apiUrl}/function/all`),
+    getFunctionById: async (id) => getRequest(`${apiUrl}/function/${id}`),
+    getProducts: async () => getRequest(`${apiUrl}/hierarchy/products`),
+  };
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
     /coverage
     # production
-    /build
+    /dist
     # misc
     .DS_Store
@@ Expand Down @@