refactor(console): remove superstruct dependency from console (#3808)

packages/console/package.json

@@ -111,7 +111,6 @@
     "recharts": "^2.1.13",
     "remark-gfm": "^3.0.1",
     "stylelint": "^15.0.0",
-    "superstruct": "^0.16.0",
     "swr": "^1.3.0",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",

packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx

@@ -1,5 +1,4 @@
 import { emailRegEx } from '@logto/core-kit';
-import { conditional } from '@silverhand/essentials';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -10,7 +9,7 @@ import { adminTenantEndpoint, meApi } from '@/consts';
 import { useStaticApi } from '@/hooks/use-api';
 
 import MainFlowLikeModal from '../../components/MainFlowLikeModal';
-import { checkLocationState } from '../../utils';
+import { parseLocationState } from '../../utils';
 
 type EmailForm = {
   email: string;
@@ -44,7 +43,7 @@ function LinkEmailModal() {
     })();
   };
 
-  const currentEmail = conditional(checkLocationState(state) && state.email);
+  const { email: currentEmail } = parseLocationState(state);
 
   return (
     <MainFlowLikeModal

packages/console/src/pages/Profile/containers/VerificationCodeModal/index.tsx

@@ -14,7 +14,7 @@ import { useConfirmModal } from '@/hooks/use-confirm-modal';
 import useCurrentUser from '@/hooks/use-current-user';
 
 import MainFlowLikeModal from '../../components/MainFlowLikeModal';
-import { checkLocationState, handleError } from '../../utils';
+import { handleError, parseLocationState } from '../../utils';
 
 import * as styles from './index.module.scss';
 
@@ -40,9 +40,7 @@ function VerificationCodeModal() {
     resourceIndicator: meApi.indicator,
     hideErrorToast: true,
   });
-  const { email, action } = checkLocationState(state)
+  const { email, action } = parseLocationState(state);
-    ? state
-    : { email: undefined, action: undefined };
 
   const { seconds, isRunning, restart } = useTimer({
     autoStart: true,

packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx

@@ -1,4 +1,3 @@
-import { conditional } from '@silverhand/essentials';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -15,7 +14,7 @@ import { adminTenantEndpoint, meApi } from '@/consts';
 import { useStaticApi } from '@/hooks/use-api';
 
 import MainFlowLikeModal from '../../components/MainFlowLikeModal';
-import { checkLocationState, handleError } from '../../utils';
+import { handleError, parseLocationState } from '../../utils';
 
 import * as styles from './index.module.scss';
 
@@ -43,7 +42,7 @@ function VerifyPasswordModal() {
     hideErrorToast: true,
   });
   const [showPassword, setShowPassword] = useState(false);
-  const email = conditional(checkLocationState(state) && state.email);
+  const { email } = parseLocationState(state);
 
   const onClose = () => {
     navigate('/profile');

packages/console/src/pages/Profile/utils.ts

@@ -2,19 +2,13 @@ import type { RequestErrorBody } from '@logto/schemas';
 import { HTTPError } from 'ky';
 import { toast } from 'react-hot-toast';
 
-export type LocationState = {
+import { type LocationState, locationStateGuard } from '@/types/profile';
-  email: string;
-  action: 'changePassword' | 'changeEmail';
-};
 
-export const checkLocationState = (state: unknown): state is LocationState =>
+export const parseLocationState = (state: unknown): Partial<LocationState> => {
-  typeof state === 'object' &&
+  const parsed = locationStateGuard.safeParse(state);
-  state !== null &&
+
-  'email' in state &&
+  return parsed.success ? parsed.data : { email: undefined, action: undefined };
-  'action' in state &&
+};
-  typeof state.email === 'string' &&
-  typeof state.action === 'string' &&
-  ['changePassword', 'changeEmail'].includes(state.action);
 
 export const popupWindow = (url: string, windowName: string, width: number, height: number) => {
   const outerHeight = window.top?.outerHeight ?? 0;

packages/console/src/types/profile.ts

@@ -1,8 +1,9 @@
-import * as s from 'superstruct';
+import { emailRegEx } from '@logto/core-kit';
+import { z } from 'zod';
 
-export const locationStateGuard = s.object({
+export const locationStateGuard = z.object({
-  email: s.string(),
+  email: z.string().regex(emailRegEx),
-  action: s.union([s.literal('changeEmail'), s.literal('changePassword')]),
+  action: z.union([z.literal('changeEmail'), z.literal('changePassword')]),
 });
 
-export type LocationState = s.Infer<typeof locationStateGuard>;
+export type LocationState = z.infer<typeof locationStateGuard>;

pnpm-lock.yaml

@@ -3026,9 +3026,6 @@ importers:
       stylelint:
         specifier: ^15.0.0
         version: 15.0.0
-      superstruct:
-        specifier: ^0.16.0
-        version: 0.16.0
       swr:
         specifier: ^1.3.0
         version: 1.3.0(react@18.2.0)
@@ -18861,10 +18858,6 @@ packages:
       - supports-color
     dev: true
 
-  /superstruct@0.16.0:
-    resolution: {integrity: sha512-IDQtwnnlaan1NhuHqyD/U11lROYvCQ79JyfwlFU9xEVHzqV/Ys/RrwmHPCG0CVH/1g0BuodEjH1msxK2UHxehA==}
-    dev: true
-
   /superstruct@1.0.3:
     resolution: {integrity: sha512-8iTn3oSS8nRGn+C2pgXSKPI3jmpm6FExNazNpjvqS6ZUJQCej3PUXEKM8NjHBOs54ExM+LPW/FBRhymrdcCiSg==}
     engines: {node: '>=14.0.0'}