balena-os · thienandangthanh · Nov 7, 2023 · Nov 7, 2023 · Nov 7, 2023 · Nov 7, 2023
diff --git a/ui/.eslintrc.cjs b/ui/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/ui/.gitignore b/ui/.gitignore
@@ -1,29 +1,24 @@
-# Generated by Cargo
-# will have compiled files and executables
-/target/
-
-# These are backup files generated by rustfmt
-**/*.rs.bk
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-# /build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# 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?
diff --git a/ui/.lintstagedrc b/ui/.lintstagedrc
@@ -1,9 +1,5 @@
 {
-  "*.ts": [
-		"balena-lint --typescript --fix"
+  "*.{ts,tsx}": [
+		"eslint --fix"
 	],
-
-	"*.tsx": [
-		"balena-lint --typescript --fix"
-	],
-}
+}
diff --git a/ui/README.md b/ui/README.md
@@ -2,12 +2,12 @@
 
 ## Setting up the development environment
 
-The UI for **WiFi Connect** is built using **React**, bootstrapped by **create-react-app**. In order to develop for the UI you need to do the following:
+The UI for **WiFi Connect** is built using **React**, bootstrapped by **Vite**. In order to develop for the UI you need to do the following:
 
 1. Run `npm install` in the UI folder.
 2. Run `npm start` to start the development server. This will serve the UI on `localhost:3000` by default.
 3. Any changes to the code will automatically reflect in the UI without having to manually refresh.
 
 The production bundle is generated by running `npm build`, which will bundle and minify the react code. This will create a `build` folder where all the static resources will be located. You can then serve the `index.html` file and the contents of the `build` folder however you wish.
 
-All networking requests are done using the `fetch` API. Polyfills are added for `fetch` and `Promise` which should improve the support for older browsers.
+All networking requests are done using the `fetch` API. Polyfills are added for `fetch` and `Promise` which should improve the support for older browsers.
diff --git a/ui/build/asset-manifest.json b/ui/build/asset-manifest.json
diff --git a/ui/build/index.html b/ui/build/index.html
@@ -1 +1,21 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/static/favicon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/static/manifest.json"/><title>WiFi Connect</title><link href="/static/css/2.c38cd9da.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,i,f=t[0],l=t[1],c=t[2],p=0,s=[];p<f.length;p++)i=f[p],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(a&&a(t);s.length;)s.shift()();return u.push.apply(u,c||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,f=1;f<r.length;f++){var l=r[f];0!==o[l]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/";var f=this["webpackJsonpwifi-connect-ui"]=this["webpackJsonpwifi-connect-ui"]||[],l=f.push.bind(f);f.push=t,f=f.slice();for(var c=0;c<f.length;c++)t(f[c]);var a=l;r()}([])</script><script src="/static/js/2.ef060f46.chunk.js"></script><script src="/static/js/main.2b22a9e9.chunk.js"></script></body></html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="/static/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="manifest" href="/static/manifest.json" />
+    <title>WiFi Connect</title>
+    <script type="module" crossorigin src="/static/assets/index-f000a586.js"></script>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script>
+      globalThis.global = globalThis;
+      globalThis.process = { env: {} };
+    </script>
+  </body>
+</html>
diff --git a/ui/build/precache-manifest.96ed21ec05e3b25e96ee640119b0334b.js b/ui/build/precache-manifest.96ed21ec05e3b25e96ee640119b0334b.js
diff --git a/ui/build/service-worker.js b/ui/build/service-worker.js