Merge pull request #651 from cam-inc/update_gatsby_v5

gatsby v5
cam-inc · May 15, 2023 · 1673318 · 1673318
2 parents d98da4c + d02c51a
commit 1673318
Show file tree

Hide file tree

Showing 20 changed files with 38,744 additions and 24,912 deletions.
diff --git a/.changeset/five-toys-search.md b/.changeset/five-toys-search.md
@@ -0,0 +1,5 @@
+---
+"@viron/app": patch
+---
+
+Updated Gatsby version to v5 from v4
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,12 +61,12 @@
     "example/nodejs"
   ],
   "engines": {
-    "node": ">=15.13.0",
-    "npm": ">=7.9.0"
+    "node": ">=18.14.0",
+    "npm": ">=9.3.1"
   },
   "private": true,
   "volta": {
-    "node": "15.14.0",
-    "npm": "7.9.0"
+    "node": "18.14.0",
+    "npm": "9.3.1"
   }
 }
diff --git a/packages/app/gatsby-config.js b/packages/app/gatsby-config.js
@@ -56,9 +56,7 @@ module.exports = {
     },
   ],
   // @see: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/#flags
-  flags: {
-    FAST_DEV: true,
-  },
+  flags: {},
   // @see: https://www.gatsbyjs.com/docs/api-proxy/#advanced-proxying
   developMiddleware: (app) => {
     app.use((req, res, next) => {

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -2,8 +2,12 @@
   "name": "@viron/app",
   "version": "2.2.0",
   "engines": {
-    "node": ">=15.13.0",
-    "npm": ">=7.9.0"
+    "node": ">=18.14.0",
+    "npm": ">=9.3.1"
+  },
+  "volta": {
+    "node": ">=18.14.0",
+    "npm": ">=9.3.1"
   },
   "browserslist": [
     ">5%",
@@ -52,20 +56,19 @@
     "@editorjs/editorjs": "^2.22.1",
     "@heroicons/react": "^1.0.5",
     "@hookform/resolvers": "^2.0.0",
-    "@reach/router": "^1.3.4",
     "@react-icons/all-files": "^4.1.0",
     "@tailwindcss/aspect-ratio": "^0.2.1",
     "@viron/linter": "*",
     "babel-jest": "^27.0.6",
-    "babel-preset-gatsby": "^1.9.0",
+    "babel-preset-gatsby": "^3.6.0",
     "classnames": "^2.2.6",
     "color-blend": "^3.0.1",
-    "gatsby": "^4.2.0",
+    "gatsby": "^5.6.0",
     "gatsby-plugin-alias-imports": "^1.0.5",
-    "gatsby-plugin-lodash": "^5.2.0",
-    "gatsby-plugin-page-creator": "^4.2.0",
-    "gatsby-plugin-postcss": "^5.3.0",
-    "gatsby-plugin-react-helmet-async": "^1.2.0",
+    "gatsby-plugin-lodash": "^6.6.0",
+    "gatsby-plugin-page-creator": "^5.6.0",
+    "gatsby-plugin-postcss": "^6.6.0",
+    "gatsby-plugin-react-helmet-async": "^1.2.3",
     "i18next": "^20.0.0",
     "i18next-browser-languagedetector": "^6.1.0",
     "identity-obj-proxy": "^3.0.0",
@@ -76,17 +79,17 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.4",
     "postcss-preset-env": "^7.0.1",
-    "qrcode": "^1.4.4",
+    "qrcode": "^1.5.1",
     "query-string": "^6.14.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-dnd": "^14.0.3",
     "react-dnd-html5-backend": "^14.0.1",
-    "react-dom": "^17.0.2",
-    "react-helmet-async": "^1.0.9",
+    "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
     "react-hook-form": "^7.22.5",
     "react-i18next": "^11.8.10",
-    "react-test-renderer": "^17.0.2",
-    "recoil": "^0.5.2",
+    "react-test-renderer": "^18.2.0",
+    "recoil": "^0.7.7",
     "store2": "^2.12.0",
     "swr": "^1.1.0",
     "tailwindcss": "^3.0.0",
@@ -99,29 +102,29 @@
     "@storybook/addon-actions": "^6.1.21",
     "@storybook/addon-essentials": "^6.1.21",
     "@storybook/addon-links": "^6.1.21",
-    "@storybook/react": "^6.1.21",
+    "@storybook/react": "^6.5.16",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^13.4.0",
     "@types/classnames": "^2.2.11",
     "@types/jest": "^26.0.24",
     "@types/markdown-it": "^12.2.1",
     "@types/qrcode": "^1.4.0",
-    "@types/react-dom": "^17.0.2",
+    "@types/react-dom": "^18.0.10",
     "@types/react-test-renderer": "^17.0.1",
     "@types/recoil": "^0.0.1",
     "@types/tailwindcss": "^2.0.6",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
     "babel-loader": "^8.2.2",
-    "babel-preset-react-app": "^10.0.0",
+    "babel-preset-react-app": "^10.0.1",
     "cypress": "^9.4.1",
     "eslint": "^7.21.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "gatsby-cypress": "^2.7.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "gatsby-cypress": "^3.6.0",
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",
     "start-server-and-test": "^1.12.6",

diff --git a/packages/app/src/components/index.ts b/packages/app/src/components/index.ts
@@ -5,6 +5,7 @@ import { ClassName, ColorSystem } from '~/types/index';
 export type Props<T extends string = 'on'> = {
   style?: CSSProperties;
   className?: ClassName;
+  children?: React.ReactNode;
 } & {
   [P in T]: ColorSystem;
 };
diff --git a/packages/app/src/components/schema/types/array/index.tsx b/packages/app/src/components/schema/types/array/index.tsx
@@ -43,12 +43,12 @@ const SchemaOfTypeArray: React.FC<Props> = ({
       return;
     }
 
-    const errorMessages: ReturnType<Validate<any[]>>[] = [];
+    const errorMessages: ReturnType<Validate<any[], any>>[] = [];
     const registerOptions = getRegisterOptions({ required, schema });
     _.forEach(
-      registerOptions.validate as Record<string, Validate<any[]>>,
+      registerOptions.validate as Record<string, Validate<any[], any>>,
       (v) => {
-        const result = v(data || []);
+        const result = v(data || [], undefined);
         if (result !== true) {
           errorMessages.push(result);
         }

diff --git a/packages/app/src/components/schema/types/object/index.tsx b/packages/app/src/components/schema/types/object/index.tsx
@@ -33,15 +33,16 @@ const SchemaOfTypeObject: React.FC<Props> = ({
         clearErrors(nameForError);
         return;
       }
-      const errorMessages: ReturnType<Validate<Record<string, any>>>[] = [];
+      const errorMessages: ReturnType<Validate<Record<string, any>, any>>[] =
+        [];
       const registerOptions = getRegisterOptions({ required, schema });
       _.forEach(
         registerOptions.validate as Record<
           string,
-          Validate<Record<string, any>>
+          Validate<Record<string, any>, any>
         >,
         function (v) {
-          const result = v(data);
+          const result = v(data, undefined);
           if (result !== true) {
             errorMessages.push(result);
           }

diff --git a/packages/app/src/components/schema/types/string/index.tsx b/packages/app/src/components/schema/types/string/index.tsx
@@ -61,11 +61,11 @@ const SchemaOfTypeString: React.FC<Props> = ({
           clearErrors(nameForError);
           return;
         }
-        const errorMessages: ReturnType<Validate<string>>[] = [];
+        const errorMessages: ReturnType<Validate<string, any>>[] = [];
         _.forEach(
-          registerOptions.validate as Record<string, Validate<string>>,
+          registerOptions.validate as Record<string, Validate<string, any>>,
           function (v) {
-            const result = v(_data);
+            const result = v(_data, undefined);
             if (result !== true) {
               errorMessages.push(result);
             }

diff --git a/packages/app/src/components/select/index.tsx b/packages/app/src/components/select/index.tsx
@@ -5,7 +5,11 @@ import { ClassName } from '~/types';
 
 export type Props<T = unknown> = BaseProps & {
   list: T[];
-  Select: React.FC<{ id: string; className: ClassName }>;
+  Select: React.FC<{
+    id: string;
+    className: ClassName;
+    children: React.ReactNode;
+  }>;
   Option: React.FC<{ className: ClassName; data: T }>;
   OptionBlank?: React.FC<{ className: ClassName }>;
   label?: string;

diff --git a/packages/app/src/pages/dashboard/endpoints/_/body/item/qrcode/index.tsx b/packages/app/src/pages/dashboard/endpoints/_/body/item/qrcode/index.tsx
@@ -27,7 +27,7 @@ const QRCode: React.FC<Props> = ({ endpoint }) => {
     const data = `${
       new URL(location.href).origin
     }/endpointimport?endpoint=${encodeURIComponent(JSON.stringify(endpoint))}`;
-    qrcode.toCanvas(canvasElement, data, function (error: Error) {
+    qrcode.toCanvas(canvasElement, data, function (error) {
       if (error) {
         setError(new BaseError(error.message));
       }

diff --git a/packages/app/src/pages/theme/_/body/mode/index.tsx b/packages/app/src/pages/theme/_/body/mode/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { HSL } from '~/types';
 import { Mode } from '~/utils/colorSystem';
 
@@ -123,15 +123,17 @@ const _Mode: React.FC<Props> = ({ title, mode }) => {
 };
 export default _Mode;
 
-const Chip: React.FC<{
-  title: string;
-  ground: HSL;
-  on: HSL;
-  onHigh: HSL;
-  onLow: HSL;
-  onSlight: HSL;
-  onFaint: HSL;
-}> = ({ title, ground, on, onHigh, onLow, onSlight, onFaint, children }) => {
+const Chip: React.FC<
+  PropsWithChildren<{
+    title: string;
+    ground: HSL;
+    on: HSL;
+    onHigh: HSL;
+    onLow: HSL;
+    onSlight: HSL;
+    onFaint: HSL;
+  }>
+> = ({ title, ground, on, onHigh, onLow, onSlight, onFaint, children }) => {
   return (
     <div
       className="p-2"

diff --git a/packages/app/src/portals/drawer/index.tsx b/packages/app/src/portals/drawer/index.tsx
@@ -1,13 +1,19 @@
 import classnames from 'classnames';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import Portal, { TARGET } from '~/portals';
 
 type Props = {
   isOpened: boolean;
   onRequestClose: () => void;
   position: 'left' | 'right';
 };
-const Drawer: React.FC<Props> = ({
+const Drawer: React.FC<PropsWithChildren<Props>> = ({
   isOpened,
   onRequestClose,
   position,

diff --git a/packages/app/src/portals/index.tsx b/packages/app/src/portals/index.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import ReactDOM from 'react-dom';
 import { BaseError } from '~/errors';
+import { isBrowser } from '~/utils';
+import { error } from '~/utils/logger';
 import { ID as DRAWER_WRAPPER_ID } from '~/wrappers/drawer';
 import { ID as MODAL_WRAPPER_ID } from '~/wrappers/modal';
 import { ID as NOTIFICATION_WRAPPER_ID } from '~/wrappers/notification';
 import { ID as POPOVER_WRAPPER_ID } from '~/wrappers/popover';
 import { ID as PROGRESS_WRAPPER_ID } from '~/wrappers/progress';
-import { isBrowser } from '~/utils';
-import { error } from '~/utils/logger';
 
 export const TARGET = {
   DRAWER: DRAWER_WRAPPER_ID,
@@ -16,12 +16,12 @@ export const TARGET = {
   POPOVER: POPOVER_WRAPPER_ID,
   PROGRESS: PROGRESS_WRAPPER_ID,
 } as const;
-export type Target = typeof TARGET[keyof typeof TARGET];
+export type Target = (typeof TARGET)[keyof typeof TARGET];
 
 type Props = {
   target: Target;
 };
-const Portal: React.FC<Props> = ({ target, children }) => {
+const Portal: React.FC<PropsWithChildren<Props>> = ({ target, children }) => {
   if (!isBrowser) {
     return null;
   }

diff --git a/packages/app/src/portals/modal/index.tsx b/packages/app/src/portals/modal/index.tsx
@@ -1,5 +1,11 @@
 import classnames from 'classnames';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import XCircleIcon from '~/components/icon/xCircle/outline';
 import Portal, { TARGET } from '~/portals';
 
@@ -8,7 +14,11 @@ type Props = {
   onRequestClose: () => void;
 };
 
-const Modal: React.FC<Props> = ({ isOpened, onRequestClose, children }) => {
+const Modal: React.FC<PropsWithChildren<Props>> = ({
+  isOpened,
+  onRequestClose,
+  children,
+}) => {
   const [isVisible, setIsVisible] = useState<boolean>(isOpened);
   useEffect(() => {
     setIsVisible(isOpened);

diff --git a/packages/app/src/portals/notification/index.tsx b/packages/app/src/portals/notification/index.tsx
@@ -1,5 +1,11 @@
 import classnames from 'classnames';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import XCircleIcon from '~/components/icon/xCircle/outline';
 import Portal, { TARGET } from '~/portals';
 
@@ -8,7 +14,7 @@ type Props = {
   onRequestClose: () => void;
   timeoutSec?: number;
 };
-const Notification: React.FC<Props> = ({
+const Notification: React.FC<PropsWithChildren<Props>> = ({
   isOpened,
   onRequestClose,
   timeoutSec = 5,

diff --git a/packages/app/src/portals/popover/index.tsx b/packages/app/src/portals/popover/index.tsx
@@ -1,5 +1,6 @@
 import classnames from 'classnames';
 import React, {
+  PropsWithChildren,
   useCallback,
   useEffect,
   useMemo,
@@ -18,7 +19,7 @@ const PLACEMENT = {
   BOTTOM: 'Bottom',
   BOTTOM_LEFT: 'BottomLeft',
 } as const;
-type Placement = typeof PLACEMENT[keyof typeof PLACEMENT];
+type Placement = (typeof PLACEMENT)[keyof typeof PLACEMENT];
 
 type Props = {
   isOpened: boolean;
@@ -40,7 +41,7 @@ const Popover: React.FC<Props> = (props) => {
 };
 export default Popover;
 
-const PopoverLg: React.FC<Props> = ({
+const PopoverLg: React.FC<PropsWithChildren<Props>> = ({
   isOpened,
   isHidden,
   onRequestClose,
@@ -315,7 +316,7 @@ const PopoverLg: React.FC<Props> = ({
     </Portal>
   );
 };
-const PopoverNotLg: React.FC<Props> = ({
+const PopoverNotLg: React.FC<PropsWithChildren<Props>> = ({
   isOpened,
   isHidden,
   onRequestClose,