feat: updates dependencies and theme message box (#306)

* feat: updates dependencies and theme message box * chore: revert eslint change due to incompatible next
AtB-AS · Jun 25, 2024 · 88a9050 · 88a9050
1 parent c4a38ba
commit 88a9050
Show file tree

Hide file tree

Showing 5 changed files with 1,522 additions and 1,089 deletions.
diff --git a/package.json b/package.json
@@ -25,82 +25,82 @@
     "postbuild": "next-sitemap --config next-sitemap.js"
   },
   "dependencies": {
-    "@apollo/client": "^3.9.7",
-    "@atb-as/config-specs": "^3.23.0",
-    "@atb-as/theme": "^8.2.2",
-    "@github/combobox-nav": "^2.3.1",
+    "@apollo/client": "^3.10.6",
+    "@atb-as/config-specs": "^3.26.0",
+    "@atb-as/theme": "^10.2.5",
+    "@github/combobox-nav": "^3.0.1",
     "@isaacs/ttlcache": "^1.4.1",
     "@leile/lobo-t": "^1.0.5",
     "@mapbox/polyline": "^1.2.1",
-    "@react-aria/focus": "^3.16.2",
-    "@react-hook/resize-observer": "^1.2.6",
+    "@react-aria/focus": "^3.17.1",
+    "@react-hook/resize-observer": "^2.0.1",
     "@resvg/resvg-js": "^2.6.2",
-    "@turf/centroid": "^7.0.0-alpha.113",
+    "@turf/centroid": "^7.0.0",
     "bunyan": "^1.8.15",
     "compare-versions": "^6.1.0",
-    "cookies-next": "^4.1.1",
+    "cookies-next": "^4.2.1",
     "cors": "^2.8.5",
     "date-fns": "^3.6.0",
     "detect-nearest-browser-locale": "^19.0.0",
     "detect-nearest-locale": "^1.0.1",
-    "downshift": "^8.5.0",
-    "firebase": "^10.9.0",
-    "framer-motion": "^11.0.14",
-    "graphql": "^16.8.1",
-    "haversine-distance": "^1.2.1",
-    "humanize-duration": "^3.31.0",
+    "downshift": "^9.0.6",
+    "firebase": "^10.12.2",
+    "framer-motion": "^11.2.11",
+    "graphql": "^16.9.0",
+    "haversine-distance": "^1.2.3",
+    "humanize-duration": "^3.32.1",
     "iso8601-duration": "^2.1.2",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
-    "mapbox-gl": "^3.2.0",
-    "next": "14.1.3",
+    "mapbox-gl": "^3.4.0",
+    "next": "14.2.4",
     "next-sitemap": "^4.2.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-syntax-highlighter": "^15.5.0",
     "satori": "^0.10.13",
     "swr": "^2.2.5",
-    "uuid": "^9.0.1",
-    "zod": "^3.22.4"
+    "uuid": "^10.0.0",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@atb-as/generate-assets": "^12.1.2",
+    "@atb-as/generate-assets": "^12.1.7",
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/near-operation-file-preset": "^3.0.0",
-    "@graphql-codegen/typescript": "^4.0.6",
+    "@graphql-codegen/typescript": "^4.0.7",
     "@graphql-codegen/typescript-generic-sdk": "^4.0.1",
-    "@graphql-codegen/typescript-operations": "^4.2.0",
-    "@playwright/test": "^1.42.1",
-    "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@graphql-codegen/typescript-operations": "^4.2.1",
+    "@playwright/test": "^1.44.1",
+    "@testing-library/dom": "^10.2.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/bunyan": "^1.8.11",
     "@types/cors": "^2.8.17",
     "@types/humanize-duration": "^3.27.4",
-    "@types/lodash": "^4.17.0",
+    "@types/lodash": "^4.17.5",
     "@types/mapbox-gl": "^3.1.0",
     "@types/mapbox__polyline": "^1.0.5",
-    "@types/node": "20.11.28",
-    "@types/react": "18.2.67",
-    "@types/react-dom": "18.2.22",
-    "@types/react-syntax-highlighter": "^15.5.11",
-    "@types/uuid": "^9.0.8",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitejs/plugin-react-swc": "^3.6.0",
+    "@types/node": "20.14.8",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react-swc": "^3.7.0",
     "copyfiles": "^2.4.1",
-    "eslint": "8.57.0",
-    "eslint-config-next": "14.1.3",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.2.4",
     "graphql-tag": "^2.12.6",
-    "happy-dom": "^13.10.0",
-    "next-router-mock": "^0.9.12",
+    "happy-dom": "^14.12.3",
+    "next-router-mock": "^0.9.13",
     "patch-package": "^8.0.0",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^3.2.5",
-    "rimraf": "^5.0.1",
-    "typescript": "5.4.2",
-    "vite": "^5.1.6",
-    "vite-plugin-dts": "^3.7.3",
-    "vitest": "^1.4.0"
+    "prettier": "^3.3.2",
+    "rimraf": "^5.0.7",
+    "typescript": "5.5.2",
+    "vite": "^5.3.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^1.6.0"
   }
 }
diff --git a/patches/@github+combobox-nav+2.3.1.patch → patches/@github+combobox-nav+3.0.1.patch b/patches/@github+combobox-nav+2.3.1.patch → patches/@github+combobox-nav+3.0.1.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/@github/combobox-nav/dist/index.js b/node_modules/@github/combobox-nav/dist/index.js
-index 977da72..8bc4667 100644
+index 5eeaa65..d266601 100644
 --- a/node_modules/@github/combobox-nav/dist/index.js
 +++ b/node_modules/@github/combobox-nav/dist/index.js
 @@ -34,7 +34,7 @@ export default class Combobox {
@@ -8,7 +8,7 @@ index 977da72..8bc4667 100644
          this.input.addEventListener('keydown', this.keyboardEventHandler);
 -        this.list.addEventListener('click', commitWithElement);
 +        this.list.addEventListener('mousedown', commitWithElement);
-         this.indicateDefaultOption();
+         this.resetSelection();
      }
      stop() {
 @@ -44,7 +44,7 @@ export default class Combobox {
@@ -20,7 +20,7 @@ index 977da72..8bc4667 100644
      }
      indicateDefaultOption() {
          var _a;
-@@ -155,7 +155,7 @@ function commit(input, list) {
+@@ -162,7 +162,7 @@ function commit(input, list) {
          return false;
      if (target.getAttribute('aria-disabled') === 'true')
          return true;

diff --git a/src/components/message-box/index.tsx b/src/components/message-box/index.tsx
@@ -11,8 +11,9 @@ import { Typo } from '@atb/components/typography';
 import style from './message-box.module.css';
 import { colorToOverrideMode } from '@atb/utils/color';
 import { screenReaderPause } from '@atb/components/typography/utils';
+import { HTMLAttributes } from 'react';
 
-export type MessageMode = keyof Theme['static']['status'];
+export type MessageMode = keyof Theme['status'];
 
 export type MessageBoxProps = {
   type: MessageMode;
@@ -33,11 +34,12 @@ export const MessageBox = ({
   onClick,
   borderRadius = true,
 }: MessageBoxProps) => {
-  const { static: staticColors } = useTheme();
+  const { status } = useTheme();
   const { t } = useTranslation();
-  const backgroundColorStyle = {
-    backgroundColor: staticColors['status'][type].background,
-    color: staticColors['status'][type].text,
+  const backgroundColorStyle: HTMLAttributes<HTMLDivElement>['style'] = {
+    borderColor: status[type].primary.background,
+    backgroundColor: status[type].secondary.background,
+    color: status[type].secondary.text,
   };
   const overrideMode = useStatusThemeColor(type);
   const aria = modeToAria(type);
@@ -93,24 +95,22 @@ export const MessageBox = ({
 };
 
 function useStatusThemeColor(mode: MessageMode): MonoIconProps['overrideMode'] {
-  const {
-    static: { status },
-  } = useTheme();
+  const { status } = useTheme();
 
   let overrideColor: MonoIconProps['overrideMode'] = undefined;
 
   switch (mode) {
     case 'error':
-      overrideColor = colorToOverrideMode(status.error.text);
+      overrideColor = colorToOverrideMode(status.error.secondary.text);
       break;
     case 'valid':
-      overrideColor = colorToOverrideMode(status.valid.text);
+      overrideColor = colorToOverrideMode(status.valid.secondary.text);
       break;
     case 'warning':
-      overrideColor = colorToOverrideMode(status.warning.text);
+      overrideColor = colorToOverrideMode(status.warning.secondary.text);
       break;
     case 'info':
-      overrideColor = colorToOverrideMode(status.info.text);
+      overrideColor = colorToOverrideMode(status.info.secondary.text);
       break;
   }
 

diff --git a/src/components/message-box/message-box.module.css b/src/components/message-box/message-box.module.css
@@ -1,6 +1,7 @@
 .container {
   display: flex;
   padding: var(--spacings-medium);
+  border: 1px solid;
 }
 .borderRadius {
   border-radius: var(--border-radius-regular);
@@ -22,4 +23,4 @@
 }
 .icon {
   margin-top: var(--spacings-small);
-}
+}