Merge pull request #9 from aodn/merge-vite-2

Merge vite 2

.editorconfig

@@ -0,0 +1,4 @@
+root = true
+
+[*]
+end_of_line = lf

.eslintrc.cjs

@@ -1,18 +1,50 @@
+/* eslint-disable prettier/prettier */
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:import/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "plugin:import/typescript",
+    "plugin:prettier/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: "module",
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+    "import/resolver": {
+      typescript: true,
+      node: {
+        paths: ["src"],
+        extensions: [".js", ".jsx", ".ts", ".tsx"],
+      },
+      alias: {
+        map: [["@", "./src"]],
+      },
+    },
+  },
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
+    "react/react-in-jsx-scope": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["off"],
+    "@typescript-eslint/no-explicit-any": "off",
+    quotes: ["error"],
+    "no-undef": "off",
   },
-}
+};

.gitattributes

@@ -0,0 +1,3 @@
+* text=auto eol=lf
+
+*.{png,jpg,jpeg,gif,webp,woff,woff2} binary

.github/workflows/lint-test.yml

@@ -0,0 +1,31 @@
+name: lint and test
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+
+# cancel currently running workflow from the same PR or branch
+concurrency:
+  group: ${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "yarn"
+      - run: yarn install
+      - run: yarn run lint
+      - run: yarn run build

.gitignore

@@ -22,6 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-#*.lock 
 
-.env
+*.env
+*.env.local

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install lint-staged

.prettierrc

@@ -0,0 +1,22 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "singleAttributePerLine": false,
+  "bracketSameLine": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "embeddedLanguageFormatting": "auto",
+  "vueIndentScriptAndStyle": false
+}

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -1,7 +1,9 @@
 # AODN Portal RC1
+
 Release Candidate 1 - for limited release to key stakeholders of priority features.
 
 ## Running the app locally
+
 For testing the app locally ensure you have Vite, React, Yarn installed globally.
 
 1. Clone the repositiory to your local machine

commitlint.config.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+  extends: ["gitmoji"],
+  rules: {
+    "header-max-length": [2, "always", 72],
+    "type-enum": [0],
+    "subject-empty": [0],
+    "type-empty": [0],
+  },
+};

docker-compose.yml

@@ -1,12 +1,12 @@
-version: '3.1'
+version: "3.1"
 
 services:
   aodnportal:
     container_name: aodn-portal-v2
     build: .
-    image: http://ec2-13-239-6-54.ap-southeast-2.compute.amazonaws.com:8081
+    image: https://ogcapi-edge.mvp.aodn.org.au/
     network_mode: "host"
     env_file:
-      - .env
+      - sample.env
     volumes:
-      - /tmp:/tmp
+      - /tmp:/tmp

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
     />
     <!-- <link rel="apple-touch-icon" href="/logo192.png" /> -->
     <!--

nginx/nginx.conf

@@ -6,19 +6,27 @@ server {
         try_files $uri $uri/ /index.html =404;
     }
     location /api/v1/ogc/collections {
-        proxy_pass http://http://ec2-13-239-6-54.ap-southeast-2.compute.amazonaws.com:8081; # Replace with your backend API server address
+        proxy_pass https://ogcapi-edge.mvp.aodn.org.au/; # Replace with your backend API server address
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_cache_bypass off;
         proxy_redirect off;
     }
     location /api/v1/ogc/tiles {
-        proxy_pass http://ec2-13-239-6-54.ap-southeast-2.compute.amazonaws.com:8081; # Replace with your backend API server address
+        proxy_pass https://ogcapi-edge.mvp.aodn.org.au/; # Replace with your backend API server address
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_cache_bypass off;
         proxy_redirect off;
     }
-}
+    location /api/v1/ogc/ext/autocomplete {
+        proxy_pass https://ogcapi-edge.mvp.aodn.org.au/; # Replace with your backend API server address
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_cache_bypass off;
+        proxy_redirect off;
+    }
+}

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "postinstall": "husky"
   },
   "dependencies": {
     "@emotion/styled": "^11.11.0",
@@ -33,30 +34,58 @@
     "axios": "^1.6.7",
     "dayjs": "^1.11.10",
     "http-proxy-middleware": "^2.0.6",
+    "mapbox-gl": "^3.2.0",
     "maplibre-gl": "^4.0.0",
+    "media-typer": "^1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ipynb-renderer": "^2.1.4",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.0",
     "react-window": "^1.8.10",
+    "react-youtube": "^10.1.0",
     "redux-logger": "^3.0.6",
     "svgo": "^3.2.0",
     "web-vitals": "^3.5.2",
     "wellknown": "^0.5.0"
   },
   "devDependencies": {
+    "@commitlint/cli": "^18.6.1",
+    "@commitlint/config-conventional": "^18.6.2",
+    "commitlint-config-gitmoji": "^2.3.1",
     "@emotion/react": "^11.11.3",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
-    "eslint": "^8.55.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-import-resolver-ts-bundled": "^5.1.2",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "react-redux": "^9.1.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.8"
+    "typescript": "^5.4.2",
+    "typescript-eslint": "^7.2.0",
+    "vite": "^5.0.8",
+    "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^1.3.1"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx}": [
+      "eslint --fix"
+    ],
+    "**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+      "prettier --write --ignore-unknown"
+    ]
   }
 }

sample.env

@@ -3,4 +3,4 @@
 # an ngnix proxy is setup to do the reverse proxy.
 
 # This is a sample file, please copy and paste this file as .env when setupProxy.js is needed.
-VITE_API_HOST=http://ec2-13-239-6-54.ap-southeast-2.compute.amazonaws.com:8081/
+VITE_API_HOST=https://ogcapi-edge.mvp.aodn.org.au/

src/App.css

@@ -2,7 +2,7 @@
   text-align: center;
 }
 
-.logo {
+/* .logo {
   height: 6em;
   padding: 1.5em;
   will-change: filter;
@@ -36,4 +36,4 @@
 
 .read-the-docs {
   color: #888;
-}
+} */

src/App.tsx

@@ -1,29 +1,16 @@
-import React from 'react';
-import './App.css';
-import { RouterProvider } from 'react-router-dom';
+// React import is not required in React 17 or later
+import { RouterProvider } from "react-router-dom";
 
-import Fallback from './pages/Fallback';
-import { ThemeProvider } from '@mui/material/styles';
-import AppTheme from './utils/AppTheme';
-import AppRouter from './utils/AppRouter';
-import Footer from './components/footer/footer';
+import Fallback from "./pages/Fallback";
+import { ThemeProvider } from "@mui/material/styles";
+import AppTheme from "./utils/AppTheme";
+import AppRouter from "./utils/AppRouter";
 
 const app = () => {
   return (
-    <div
-      style={
-        {
-          //backgroundImage: 'url(/landing_page_bg.png)',
-          //backgroundPosition: 'center',
-          //backgroundRepeat: 'no-repeat',
-          //backgroundSize: 'cover',
-          //height: '100%',
-        }
-      }
-    >
+    <div>
       <ThemeProvider theme={AppTheme}>
         <RouterProvider router={AppRouter} fallbackElement={<Fallback />} />
-        <Footer />
       </ThemeProvider>
     </div>
   );

src/Globals.d.ts

@@ -1 +1 @@
-declare module "*.module.css";
+declare module "*.module.css";