Merge pull request #316 from RolnickLab/web-ui-migrate-to-vite

Migrate from CRA -> Vite + update Storybook + update Yarn
RolnickLab · Nov 17, 2023 · 42e6477 · 42e6477
2 parents 6760788 + d79a683
commit 42e6477
Show file tree

Hide file tree

Showing 115 changed files with 17,729 additions and 17,981 deletions.
diff --git a/ui/.eslintrc.json b/ui/.eslintrc.json
@@ -5,7 +5,8 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "plugin:storybook/recommended"
   ],
   "rules": {
     "no-console": 1,

diff --git a/ui/.gitattributes b/ui/.gitattributes
@@ -0,0 +1,3 @@
+.yarn/releases/** binary
+.yarn/plugins/** binary
+
diff --git a/ui/.gitignore b/ui/.gitignore
@@ -18,9 +18,14 @@
 .env.test.local
 .env.production.local
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
 # sass
 /.sass-cache
+
+# Yarn 3 files
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
diff --git a/ui/.nvmrc b/ui/.nvmrc
@@ -1 +1 @@
-v18.9.1
+v18.12.0
diff --git a/ui/.storybook/main.js b/ui/.storybook/main.js
diff --git a/ui/.storybook/main.ts b/ui/.storybook/main.ts
@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+}
+export default config
diff --git a/ui/.storybook/preview-head.html b/ui/.storybook/preview-head.html
@@ -1,18 +1,31 @@
 <!-- Preload some fonts and base CSS -->
-<link rel="preload"
-      href="%PUBLIC_URL%/fonts/AzoSans/AzoSans.otf"
-      as="font"
-      type="font/otf"
-      crossorigin />
-<link rel="preload"
-      href="%PUBLIC_URL%/fonts/AzoSans/AzoSans-Medium.otf"
-      as="font"
-      type="font/otf"
-      crossorigin />
-<link rel="preload"
-      href="%PUBLIC_URL%/fonts/AzoSans/AzoSans-Bold.otf"
-      as="font"
-      type="font/otf"
-      crossorigin />
-<link rel="preload" href="%PUBLIC_URL%/index.css" as="style" />
-<link rel="stylesheet" href="%PUBLIC_URL%/index.css" />
+<link
+  rel="preload"
+  href="/fonts/AzoSans/AzoSans.otf"
+  as="font"
+  type="font/otf"
+  crossorigin
+/>
+<link
+  rel="preload"
+  href="/fonts/AzoSans/AzoSans-Italic.otf"
+  as="font"
+  type="font/otf"
+  crossorigin
+/>
+<link
+  rel="preload"
+  href="/fonts/AzoSans/AzoSans-Medium.otf"
+  as="font"
+  type="font/otf"
+  crossorigin
+/>
+<link
+  rel="preload"
+  href="/fonts/AzoSans/AzoSans-Bold.otf"
+  as="font"
+  type="font/otf"
+  crossorigin
+/>
+<link rel="preload" href="/index.css" as="style" />
+<link rel="stylesheet" href="/index.css" />
diff --git a/ui/.storybook/preview.js b/ui/.storybook/preview.js
diff --git a/ui/.storybook/preview.ts b/ui/.storybook/preview.ts
@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview
diff --git a/ui/.yarn/releases/yarn-berry.cjs b/ui/.yarn/releases/yarn-berry.cjs
diff --git a/ui/.yarnrc.yml b/ui/.yarnrc.yml
@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-berry.cjs
diff --git a/ui/index.html b/ui/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Combining robust lighting for attracting insects with high resolution cameras, the AMI-trap can provide practical and cost-effective solutions for standardised monitoring. AMI-traps have been deployed in the UK, Canada, USA, Cyprus, Panama and Argentina, with plans to expand further."
+    />
+    <title>AMI Platform</title>
+
+    <!-- Favicons -->
+    <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="manifest" href="/site.webmanifest" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#47518f" />
+    <meta name="msapplication-TileColor" content="#47518f" />
+    <meta name="theme-color" content="#ffffff" />
+
+    <!-- Preload some fonts and base CSS -->
+    <link
+      rel="preload"
+      href="/fonts/AzoSans/AzoSans.otf"
+      as="font"
+      type="font/otf"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="/fonts/AzoSans/AzoSans-Italic.otf"
+      as="font"
+      type="font/otf"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="/fonts/AzoSans/AzoSans-Medium.otf"
+      as="font"
+      type="font/otf"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="/fonts/AzoSans/AzoSans-Bold.otf"
+      as="font"
+      type="font/otf"
+      crossorigin
+    />
+    <link rel="preload" href="/index.css" as="style" />
+    <link rel="stylesheet" href="/index.css" />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/ui/package.json b/ui/package.json
@@ -16,12 +16,11 @@
     "@tanstack/react-query-devtools": "^4.29.6",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "axios": "^1.4.0",
+    "@vitejs/plugin-react": "^4.1.1",
+    "axios": "^1.6.2",
     "classnames": "^2.3.2",
     "cmdk": "^0.2.0",
     "leaflet": "^1.9.3",
@@ -33,34 +32,19 @@
     "react-leaflet": "^4.2.1",
     "react-plotly.js": "^2.6.0",
     "react-router-dom": "^6.8.2",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.4.2"
+    "typescript": "^4.4.2",
+    "vite": "^4.5.0",
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --testURL http://localhost:3000",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "jest",
     "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "browserslist": {
     "production": [
@@ -75,31 +59,34 @@
     ]
   },
   "jest": {
-    "transformIgnorePatterns": [
-      "node_modules/(?!axios)"
+    "preset": "ts-jest/presets/js-with-ts",
+    "testEnvironment": "jest-environment-jsdom",
+    "modulePaths": [
+      "<rootDir>/src"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.ts"
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/node-logger": "^6.5.16",
-    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-library": "^0.0.13",
-    "@tanstack/eslint-plugin-query": "^4.29.4",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
     "@types/leaflet": "^1.9.3",
     "@types/react-plotly.js": "^2.6.0",
-    "babel-plugin-named-exports-order": "^0.0.2",
-    "http-proxy-middleware": "^2.0.6",
-    "nock": "^13.3.3",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "2.8.4",
-    "prop-types": "^15.8.1",
     "sass": "^1.58.3",
-    "webpack": "^5.75.0"
+    "storybook": "^7.5.3",
+    "ts-jest": "^29.1.1",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-svgr": "^4.1.0"
   }
 }
diff --git a/ui/public/index.html b/ui/public/index.html
diff --git a/ui/src/app.module.scss b/ui/src/app.module.scss
@@ -1,5 +1,5 @@
-@import 'design-system/variables/variables.scss';
-@import 'design-system/variables/colors.scss';
+@import 'src/design-system/variables/variables.scss';
+@import 'src/design-system/variables/colors.scss';
 
 .wrapper {
   position: relative;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		.yarn/releases/** binary
		.yarn/plugins/** binary
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		nodeLinker: node-modules

		yarnPath: .yarn/releases/yarn-berry.cjs