Merge pull request #40 from InseeFrLab/update-to-onyxi-ui-v5-gitlandi…

…ng-v2

Update to onyxi UI v5 gitlanding v2

.github/workflows/ci.yaml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
-    - uses: actions/setup-node@v2.1.3
+    - uses: actions/setup-node@v4.0.3
       with:
         node-version: '16'
     - uses: bahmutov/[email protected]
@@ -33,9 +33,7 @@ jobs:
       with:
         name: build
         path: build
-    - uses: actions/[email protected]
-      with:
-        node-version: '16'
+    - uses: actions/[email protected]
     - run: git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${{github.repository}}.git
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -37,6 +37,7 @@ jspm_packages
 .node_repl_history
 
 .vscode
+*.tsbuildinfo
 
 .DS_Store
 

README.md

@@ -1,19 +1,50 @@
-<p align="center">
-    <i><a href="https://www.sspcloud.fr">This website</a>, the landing page of the SSPCloud ( Service Statistique Public Cloud )</i>
-    <br>
-    <br>
-    <img src="https://github.com/garronej/keycloakify/workflows/ci/badge.svg?branch=develop">
-    <img src="https://img.shields.io/npm/l/keycloakify">
-    <img src="https://camo.githubusercontent.com/0f9fcc0ac1b8617ad4989364f60f78b2d6b32985ad6a508f215f14d8f897b8d3/68747470733a2f2f62616467656e2e6e65742f62616467652f547970655363726970742f7374726963742532302546302539462539322541412f626c7565">
-</p>
-
-https://user-images.githubusercontent.com/6702424/152362187-3b02ba1f-432d-45fa-8c4c-cfc34d61f16b.mp4
-
-NOTE: This website is not to be confused by [docs.sspcloud.fr](https://docs.sspcloud.fr) that can
-be edited on [GitBook](https://www.gitbook.com) or directly in markdown at [InseeFrLab/docs.sspcloud.fr](https://github.com/InseeFrLab/docs.sspcloud.fr)
-
-<p align="center">
-    <i>On this website you will get infos about the services offered alongside training and tutorials</i>
-    <img src="https://user-images.githubusercontent.com/6702424/141505369-e02128e0-e7f6-477e-877b-995f05ee7df7.png"> 
-    <img src="https://user-images.githubusercontent.com/6702424/141505196-d7906507-a2e3-481f-b339-a971ef58737f.png"> 
-</p>
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

eslint.config.js

@@ -0,0 +1,33 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tssUnusedClasses from 'eslint-plugin-tss-unused-classes'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      'tss-unused-classes': tssUnusedClasses,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      'tss-unused-classes/unused-classes': 'warn',
+      "react-hooks/exhaustive-deps": "off",
+      "react-refresh/only-export-components": "off",
+    },
+  },
+)

index.html

@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <!-- TODO: Set dynamically https://stackoverflow.com/questions/32330305/update-theme-color-meta-without-page-refresh --> 
+    <meta name="theme-color" content="#2C323F">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- spell-checker: disable -->
+    <title>SSP Cloud - Espace communautaire pour la statistique publique.</title>
+    <!-- spell-checker: enable -->
+    <!-- start favicon -->
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon_package/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon_package/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon_package/favicon-16x16.png">
+    <link rel="manifest" href="/favicon_package/site.webmanifest">
+    <link rel="mask-icon" href="/favicon_package/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#ffffff">
+    <!-- end favicon -->
+
+    <link rel="preload" href="/fonts/WorkSans/worksans-bold-webfont.woff2" as="font" crossorigin="anonymous">
+    <link rel="preload" href="/fonts/WorkSans/worksans-medium-webfont.woff2" as="font" crossorigin="anonymous">
+    <link rel="preload" href="/fonts/WorkSans/worksans-regular-webfont.woff2" as="font" crossorigin="anonymous">
+    <link rel="preload" href="/fonts/WorkSans/worksans-semibold-webfont.woff2" as="font" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="/fonts/WorkSans/font.css">
+    <!--
+    <link rel="preload" href="%PUBLIC_URL%/fonts/Marianne/Marianne-Bold_Italic.woff2" as="font" crossorigin="anonymous">
+    <link rel="preload" href="%PUBLIC_URL%/fonts/Marianne/Marianne-Bold.woff2" as="font" crossorigin="anonymous">
+    <link rel="preload" href="%PUBLIC_URL%/fonts/Marianne/Marianne-Light_Italic.woff2" as="font" crossorigin="anonymous">
+    <link rel="preload" href="%PUBLIC_URL%/fonts/Marianne/Marianne-Light.woff2" as="font" crossorigin="anonymous">
+    <link rel="preload" href="%PUBLIC_URL%/fonts/Marianne/Marianne-Regular_Italic.woff2" as="font" crossorigin="anonymous">
+    <link rel="preload" href="%PUBLIC_URL%/fonts/Marianne/Marianne-Regular.woff2" as="font" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/fonts/Marianne/font.css">
+    -->
+
+
+    <script>
+      /*
+      This is a way to get the correct background color as soon as possible,
+      even before the JavaScript bundle is evaluated.
+      It is to prevent a white flash when the user has dark mode enabled.
+      It is very implementation dependent and can easily break...
+      if it does no big deal.
+      */
+      (function () {
+
+        var isDarkModeEnabled = /true/.test((function () {
+
+          var key = "powerhooks_useGlobalState_isDarkModeEnabled";
+          var value = null;
+
+          try {
+            value = (new URLSearchParams(location.search)).get(key);
+          } catch (_) { }
+
+          if (value !== null) {
+            return value;
+          }
+
+          try {
+            value = localStorage.getItem(key);
+          } catch (_) { }
+
+          if (value !== null) {
+            return value;
+          }
+
+          try {
+            value = window.matchMedia("(prefers-color-scheme: dark)")
+              .matches ? "true" : "false";
+          } catch (_) { }
+
+          if (value !== null) {
+            return value;
+          }
+
+          return "false";
+
+        })());
+
+        document.documentElement.style.backgroundColor =
+          //getColor("light"|"dark").useCases.surfaces.background in src/theme/colors.ts
+          isDarkModeEnabled ? "#2C323F" : "#F1F0EB";
+
+      })();
+    </script>
+
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>