CH-147 Linting update in samples and templates

application-templates/webapp/frontend/eslint.config.js

@@ -0,0 +1,56 @@
+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'
+
+
+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"],
+      }],
+      "@typescript-eslint/no-explicit-any": "off", // No strict typing (annoying especially with React elements and events callbacks)
+      "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
+    },
+  }
+)

application-templates/webapp/frontend/package.json

@@ -6,6 +6,7 @@
     "start:dev": "DOMAIN=https://test.ch.metacell.us vite",
     "start:local": "DOMAIN=http://samples.ch vite",
     "prebuild": "eslint .",
-    "build": "vite build"
+    "build": "vite build",
+    "lint": "eslint src --report-unused-disable-directives --fix"
   }
 }

applications/samples/frontend/eslint.config.js

@@ -0,0 +1,56 @@
+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'
+
+
+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"],
+      }],
+      "@typescript-eslint/no-explicit-any": "off", // No strict typing (annoying especially with React elements and events callbacks)
+      "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
+    },
+  }
+)

applications/samples/frontend/package.json

@@ -8,26 +8,26 @@
     "start": "DOMAIN=http://localhost:5000 vite",
     "start:dev": "DOMAIN=https://test.ch.metacell.us vite",
     "start:local": "DOMAIN=http://samples.ch vite",
-    "prebuild": "eslint .",
+    "prebuild": "eslint src",
     "build": "vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint src --report-unused-disable-directives --fix",
     "preview": "vite preview"
   },
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/node": "^22.0.0",
+    "@eslint/js": "^9.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.15.0",
-    "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "typescript": "^5.2.2",
-    "vite": "^5.3.4"
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.1"
   }
 }

applications/samples/frontend/src/App.tsx

@@ -3,14 +3,14 @@ import Version from './components/Version';
 
 
 const Main = () => (
-    <>
-       <img src="/logo.png" width="800" />
-      <h1>Sample React application is working!</h1>
-      <Version />
-      <RestTest />
-      <p>See api documentation <a href="/api/ui/">here</a></p>
-    </>
-  )
+  <>
+    <img src="/logo.png" width="800" />
+    <h1>Sample React application is working!</h1>
+    <Version />
+    <RestTest />
+    <p>See api documentation <a href="/api/ui/">here</a></p>
+  </>
+)
 
 
 export default Main;

applications/samples/frontend/vite.config.ts

@@ -22,21 +22,21 @@ export default defineConfig(({ mode }) => {
 
 
   return {
-  plugins: [react()],
-  server: {
-    port: 9000,
-    proxy: {
-      '/api/': {
-        target: replaceHost( proxyTarget, 'samples'),
-        secure: false,
-        changeOrigin: true,
-      },
-      '/proxy/common/api': {
-        target: replaceHost( proxyTarget, 'common'),
-        secure: false,
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/proxy\/common\/api/, '/api')
+    plugins: [react()],
+    server: {
+      port: 9000,
+      proxy: {
+        '/api/': {
+          target: replaceHost( proxyTarget, 'samples'),
+          secure: false,
+          changeOrigin: true,
+        },
+        '/proxy/common/api': {
+          target: replaceHost( proxyTarget, 'common'),
+          secure: false,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/proxy\/common\/api/, '/api')
+        }
       }
-  }
-}}}
+    } }}
 )