Merge pull request #541 from MetaCell/feature/GEP-156

GEP-156 GEP-157 GEP-128 GEP-14 Update dep versions, simplify the use of yalc, and update layout-manager-playground to vite

.github/workflows/main.yml

@@ -13,11 +13,14 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 15.x, 16.x]
+        node-version: [18.x, 20.x, 21.x, 22.x]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - run: cd geppetto-core && yarn && yarn test
+      - run: |
+          (cd geppetto-core && yarn && yarn test)
+          (cd geppetto-ui && yarn && yarn test)
+          (cd geppetto-client && yarn && yarn test)

examples/layout-manager-playground/.gitignore

@@ -21,3 +21,28 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# 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?

examples/layout-manager-playground/README.md

@@ -1,6 +1,6 @@
 # Getting Started with Create React App
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This project was bootstrapped with [Vite](https://vitejs.dev/guide/) using React template.
 
 To start develop, you need to setup yalc to link geppetto libraries to the current project.
 
@@ -12,51 +12,37 @@ bash setup.sh
 
 ## Available Scripts
 
-In the project directory, you can run:
+You can run the project in dev or preview mode using `yarn dev` and `yarn preview`.
+To build the project, use `yarn build`.
 
-### `npm run start`
+Here is a description of what each command is doing.
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+### `yarn dev`
 
-The page will reload if you make edits.\
+Runs the app in the development mode.
+Open [http://localhost:5143](http://localhost:5143) to view it in the browser (the port might be different on your machine, check the logs displayed by vite to be sure you are targeting the right address).
+
+The page will reload if you make edits.
 You will also see any lint errors in the console.
 
-While developing on the geppetto-client, modifications can be hot loaded by running
+If you are developping at the same time on any of the geppetto.js lib (core, ui, client), you can run:
 
 ```
-bash update_geppetto.sh
+bash watch-geppettojs-updates.sh
 ```
 
+This command will launch a `watch` on all the geppetto.js libraries and hot-reload the application if any of the source code of those dependencies changes.
+
 
+### `yarn preview`
 
-### `npm run test`
+Runs the app in preview mode.
+This means that a local webserver is launched to serve the app, but hot-reloading is not avaiable and the application is served from the `dist` directory where the application have been compiled/built.
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-### `npm run  build`
+### `yarn build`
 
-Builds the app for production to the `build` folder.\
+Builds the app for production to the `dist` folder.
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.\
 Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).

examples/layout-manager-playground/eslint.config.js

@@ -0,0 +1,71 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import json from 'eslint-plugin-json'
+
+
+export default tseslint.config(
+  { ignores: [
+    'dist',
+    'node_modules',
+    '.yalc',
+    'src/rest/*' // do not lint generated code
+  ] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx,js,jsx}'],
+    languageOptions: {
+      ecmaVersion: "latest",
+      globals: globals.browser,
+      sourceType: "module"
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      indent: ["error", 2, {
+        SwitchCase: 1,
+      }],
+      curly: "error",  // enforce braces for one-line blocks
+      "no-tabs": "error",  // enforce no tabs
+      "no-console": ["warn", {
+        allow: ["warn", "error", "debug"],
+      }],
+      "consistent-return": "warn", // https://eslint.org/docs/latest/rules/consistent-return
+      "prefer-arrow-callback": ["warn"],
+      "object-curly-spacing": ["warn", "always"], // enforce consistent spacing inside braces
+      "func-style": "off", // function expressions or arrow functions are equally valid
+      "no-unneeded-ternary": "warn", // disallow unnecessary ternary expressions
+      // React rules: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules
+      "react/prop-types": "off", // PropTypes are not forced
+      "react/forbid-prop-types": "off", // all PropTypes are allowed
+      "react-hooks/rules-of-hooks": "error", // https://react.dev/reference/rules/rules-of-hooks
+      "react-hooks/exhaustive-deps": "warn", // Hooks dependency array, sometimes it's better to ignore
+    },
+  },
+  { // Linting for tsconfig.json files allows comments
+    files: ["tsconfig*.json"],
+    plugins: { json },
+    processor: "json/json",
+    rules: {
+      ...json.configs["recommended-with-comments"].rules,
+    }
+  },
+  { // Linting for *.json files do now allow comments
+    files: ["**/*.json"],
+    ignores: ["tsconfig*.json"],
+    plugins: { json },
+    processor: "json/json",
+    rules: {
+      ...json.configs.recommended.rules,
+    }
+  }
+)

examples/layout-manager-playground/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#000000" />
+    <title>Geppetto Layout Manager Playground</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>