refactor: version up all packages related to web project (#63)

* refactor: all packages version up * fix: nohoist typeorm package
line · Oct 20, 2023 · c219642 · c219642
1 parent 0b42dbb
commit c219642
Show file tree

Hide file tree

Showing 67 changed files with 563 additions and 699 deletions.
diff --git a/.gitignore b/.gitignore
@@ -30,14 +30,14 @@ yarn-error.log*
 .env.production.local
 
 # turbo
-.turbo
+!.turbo/.gitkeep
+**/.turbo
 
 # .env
 .env*
 !.env.example
 !.env.build
 
-
 volumes
 
 dist
diff --git a/apps/api/package.json b/apps/api/package.json
@@ -44,10 +44,10 @@
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
     "dayjs": "^1.11.10",
-    "exceljs": "^4.3.0",
+    "exceljs": "^4.4.0",
     "fast-csv": "^4.3.6",
     "mysql2": "^3.6.2",
-    "nestjs-cls": "^3.5.1",
+    "nestjs-cls": "^3.6.0",
     "nestjs-pino": "^3.5.0",
     "nestjs-typeorm-paginate": "^4.0.4",
     "nodemailer": "^6.9.6",
@@ -76,9 +76,9 @@
     "@types/bcrypt": "^5.0.1",
     "@types/express": "^4.17.20",
     "@types/jest": "^29.5.6",
-    "@types/node": "20.8.6",
-    "@types/nodemailer": "^6.4.11",
-    "@types/supertest": "^2.0.14",
+    "@types/node": "20.8.7",
+    "@types/nodemailer": "^6.4.13",
+    "@types/supertest": "^2.0.15",
     "@ufb/eslint-config": "^0.1.0",
     "@ufb/prettier-config": "^0.1.0",
     "@ufb/tsconfig": "^0.1.0",

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -28,74 +28,67 @@
     "root": true
   },
   "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.2.0",
-    "@floating-ui/react": "^0.24.6",
-    "@headlessui/react": "1.7.13",
-    "@headlessui/tailwindcss": "^0.1.3",
-    "@hookform/resolvers": "^2.9.11",
-    "@mui/base": "^5.0.0-beta.4",
-    "@t3-oss/env-nextjs": "^0.7.0",
-    "@tanstack/react-query": "^4.29.12",
-    "@tanstack/react-table": "^8.10.0",
+    "@headlessui/react": "1.7.17",
+    "@headlessui/tailwindcss": "^0.2.0",
+    "@hookform/resolvers": "^3.3.2",
+    "@t3-oss/env-nextjs": "^0.7.1",
+    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-table": "^8.10.7",
     "@ufb/tailwind": "^0.1.0",
     "@ufb/ui": "^0.1.0",
     "axios": "^1.5.1",
     "axios-auth-refresh": "^3.3.6",
-    "cookies-next": "^2.1.2",
+    "cookies-next": "^4.0.0",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
-    "framer-motion": "^8.5.5",
-    "i18next": "^22.5.1",
-    "immer": "^9.0.21",
+    "framer-motion": "^10.16.4",
+    "i18next": "^23.6.0",
+    "immer": "^10.0.3",
     "iron-session": "^6.3.1",
     "jwt-decode": "^3.1.2",
-    "next": "^13.4.4",
-    "next-i18next": "^13.3.0",
-    "pino": "^8.14.1",
+    "next": "^13.5.6",
+    "next-i18next": "^14.0.3",
+    "pino": "^8.16.0",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
-    "react-datepicker": "^4.12.0",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
+    "react-datepicker": "^4.21.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.44.3",
+    "react-hook-form": "^7.47.0",
     "react-hot-toast": "^2.4.1",
-    "react-i18next": "^12.3.1",
-    "react-select": "^5.7.3",
-    "react-tailwindcss-datepicker": "^1.6.1",
+    "react-i18next": "^13.3.1",
+    "react-select": "^5.7.7",
     "react-use": "^17.4.0",
-    "sharp": "^0.32.1",
+    "sharp": "^0.32.6",
     "tailwind-scrollbar-hide": "^1.1.7",
-    "zod": "^3.21.4",
-    "zustand": "^4.3.8"
+    "zod": "^3.22.4",
+    "zustand": "^4.4.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.1",
-    "@rollup/plugin-commonjs": "^24.1.0",
+    "@babel/core": "^7.23.2",
+    "@rollup/plugin-commonjs": "^25.0.7",
     "@svgr/webpack": "^8.1.0",
     "@swc/core": "^1.3.93",
-    "@swc/jest": "^0.2.26",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.5",
-    "@types/node": "20.8.6",
-    "@types/react": "^18.2.8",
-    "@types/react-beautiful-dnd": "^13.1.4",
-    "@types/react-datepicker": "^4.11.2",
-    "@types/react-dom": "^18.2.4",
+    "@swc/jest": "^0.2.29",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.6",
+    "@types/node": "20.8.7",
+    "@types/react": "^18.2.30",
+    "@types/react-beautiful-dnd": "^13.1.6",
+    "@types/react-datepicker": "^4.19.1",
+    "@types/react-dom": "^18.2.14",
     "@ufb/eslint-config": "^0.1.0",
     "@ufb/prettier-config": "^0.1.0",
     "@ufb/tsconfig": "^0.1.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.50.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.51.0",
     "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "openapi-typescript": "^6.2.6",
-    "postcss": "^8.4.24",
-    "tailwindcss": "^3.3.2",
+    "jest-environment-jsdom": "^29.7.0",
+    "openapi-typescript": "^6.7.0",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.3",
     "ts-toolbelt": "^9.6.0",
     "typescript": "^5.2.2"
   }

diff --git a/apps/web/src/components/etc/OAuthLoginButton/OAuthLoginButton.tsx b/apps/web/src/components/etc/OAuthLoginButton/OAuthLoginButton.tsx
@@ -30,7 +30,7 @@ const OAuthLoginButton: React.FC<IProps> = () => {
   const callback_url = useMemo(() => {
     return router.query.callback_url
       ? (router.query.callback_url as string)
-      : undefined;
+      : '';
   }, [router.query]);
 
   const { data } = useOAIQuery({

diff --git a/apps/web/src/components/etc/TableSearchInput/TableSearchInput.tsx b/apps/web/src/components/etc/TableSearchInput/TableSearchInput.tsx
@@ -61,7 +61,7 @@ const TableSearchInput: React.FC<IProps> = ({
   const [inputValue, setInputValue] = useState('');
 
   const editingName = useMemo(() => {
-    if (!inputRef.current || !inputRef.current.selectionEnd) return;
+    if (!inputRef.current || !inputRef.current.selectionEnd) return '';
     const { selectionEnd } = inputRef.current;
 
     const targetInput = inputValue.slice(0, selectionEnd);
@@ -73,7 +73,7 @@ const TableSearchInput: React.FC<IProps> = ({
       startIndex === endIndex ? inputValue.length : endIndex,
     );
     return value.indexOf(':') === -1
-      ? null
+      ? ''
       : value.slice(0, value.indexOf(':')).trim();
   }, [inputValue, inputRef]);
 
@@ -183,7 +183,7 @@ const TableSearchInput: React.FC<IProps> = ({
         />
       </button>
       <Combobox.Options className="bg-primary absolute left-0 top-full z-10 mt-2 w-full rounded border">
-        {!editingName
+        {editingName === ''
           ? searchItems
               .filter(
                 (v) =>

diff --git a/apps/web/src/components/etc/TableSearchInput/TableSearchInputPopover.tsx b/apps/web/src/components/etc/TableSearchInput/TableSearchInputPopover.tsx
@@ -14,7 +14,7 @@
  * under the License.
  */
 import { useCallback, useState } from 'react';
-import produce from 'immer';
+import { produce } from 'immer';
 import { useTranslation } from 'next-i18next';
 
 import { Icon } from '@ufb/ui';

diff --git a/apps/web/src/components/layouts/setting-menu/SettingMenuSubtitle.tsx b/apps/web/src/components/layouts/setting-menu/SettingMenuSubtitle.tsx
@@ -33,12 +33,12 @@ const SettingMenuSubtitle: React.FC<IProps> = (props) => {
   const { data: channelData } = useChannels(projectId);
 
   const projectName = useMemo(
-    () => projectData?.items.find((v) => v.id === projectId)?.name,
+    () => projectData?.items.find((v) => v.id === projectId)?.name ?? '',
     [projectData, projectId],
   );
 
   const channelName = useMemo(
-    () => channelData?.items.find((v) => v.id === channelId)?.name,
+    () => channelData?.items.find((v) => v.id === channelId)?.name ?? '',
     [channelData, channelId],
   );
 

diff --git a/apps/web/src/containers/my-profile/ChangePasswordForm.tsx b/apps/web/src/containers/my-profile/ChangePasswordForm.tsx
@@ -53,7 +53,7 @@ const ChangePasswordForm: React.FC<IProps> = () => {
     { resolver: zodResolver(schema) },
   );
 
-  const { mutate, isLoading } = useOAIMutation({
+  const { mutate, isPending } = useOAIMutation({
     method: 'post',
     path: '/api/users/password/change',
     queryOptions: {
@@ -84,7 +84,7 @@ const ChangePasswordForm: React.FC<IProps> = () => {
         <button
           form="reset_password"
           className="btn btn-md btn-primary min-w-[120px]"
-          disabled={isLoading}
+          disabled={isPending}
         >
           {t('button.save')}
         </button>

diff --git a/apps/web/src/containers/my-profile/DeleteMyAccountButton.tsx b/apps/web/src/containers/my-profile/DeleteMyAccountButton.tsx
@@ -28,7 +28,7 @@ const DeleteMyAccountButton: React.FC<IProps> = () => {
 
   const { user, signOut } = useUser();
 
-  const { mutate, isLoading } = useOAIMutation({
+  const { mutate, isPending } = useOAIMutation({
     method: 'delete',
     path: '/api/users/{id}',
     pathParams: { id: user?.id ?? -1 },
@@ -62,7 +62,7 @@ const DeleteMyAccountButton: React.FC<IProps> = () => {
           children: t('button.delete'),
           onClick: () => mutate(undefined),
           className: 'bg-red-primary',
-          disabled: isLoading,
+          disabled: isPending,
         }}
       >
         <h2 className="font-20-bold mb-3 text-center">

diff --git a/apps/web/src/containers/my-profile/MyProfileForm.tsx b/apps/web/src/containers/my-profile/MyProfileForm.tsx
@@ -56,23 +56,21 @@ const MyProfileForm: React.FC<IProps> = () => {
     reset(user);
   }, [user]);
 
-  const { mutate } = useMutation(
-    ['put', '/api/users/{id}', user],
-    async (input: IForm & { userId: number }) => {
+  const { mutate } = useMutation({
+    mutationKey: ['put', '/api/users/{id}', user],
+    mutationFn: async (input: IForm & { userId: number }) => {
       const { userId, ...body } = input;
       await client.put({
         path: '/api/users/{id}',
         body,
         pathParams: { id: userId },
       });
     },
-    {
-      async onSuccess() {
-        await refetch();
-        toast.positive({ title: t('toast.save') });
-      },
+    async onSuccess() {
+      await refetch();
+      toast.positive({ title: t('toast.save') });
     },
-  );
+  });
 
   return (
     <div className="flex flex-col gap-6">

diff --git a/apps/web/src/containers/setting-menu/APIKeySetting/APIKeyDeleteButton.tsx b/apps/web/src/containers/setting-menu/APIKeySetting/APIKeyDeleteButton.tsx
@@ -30,7 +30,7 @@ const APIKeyDeleteButton: React.FC<IProps> = (props) => {
   const { projectId, refetch, apiKeyId, disabled } = props;
   const { t } = useTranslation();
 
-  const { mutate: deleteAPiKey, isLoading } = useOAIMutation({
+  const { mutate: deleteAPiKey, isPending } = useOAIMutation({
     method: 'delete',
     path: '/api/projects/{projectId}/api-keys/{apiKeyId}',
     pathParams: { projectId, apiKeyId },
@@ -48,7 +48,7 @@ const APIKeyDeleteButton: React.FC<IProps> = (props) => {
     <button
       className="icon-btn icon-btn-tertiary icon-btn-sm"
       onClick={() => deleteAPiKey(undefined)}
-      disabled={disabled || isLoading}
+      disabled={disabled || isPending}
     >
       <Icon name="TrashFill" />
     </button>

diff --git a/apps/web/src/containers/setting-menu/APIKeySetting/APIKeyEditButton.tsx b/apps/web/src/containers/setting-menu/APIKeySetting/APIKeyEditButton.tsx
@@ -43,7 +43,7 @@ const APIKeyEditButton: React.FC<IProps> = (props) => {
 
   const [isUsed, setIsUsed] = useState(!deletedAt);
 
-  const { mutate: softDelete, isLoading: softDeleteLoading } = useOAIMutation({
+  const { mutate: softDelete, isPending: softDeletePending } = useOAIMutation({
     method: 'delete',
     path: '/api/projects/{projectId}/api-keys/{apiKeyId}/soft',
     pathParams: { apiKeyId, projectId },
@@ -58,7 +58,7 @@ const APIKeyEditButton: React.FC<IProps> = (props) => {
       },
     },
   });
-  const { mutate: recover, isLoading: recoverLoading } = useOAIMutation({
+  const { mutate: recover, isPending: recoverPending } = useOAIMutation({
     method: 'delete',
     path: '/api/projects/{projectId}/api-keys/{apiKeyId}/recover',
     pathParams: { apiKeyId, projectId },
@@ -102,7 +102,7 @@ const APIKeyEditButton: React.FC<IProps> = (props) => {
         submitButton={{
           children: t('button.save'),
           disabled:
-            isUsed === !deletedAt || softDeleteLoading || recoverLoading,
+            isUsed === !deletedAt || softDeletePending || recoverPending,
           className: 'btn-primary',
           onClick: () => handleSave(),
         }}

diff --git a/apps/web/src/containers/setting-menu/APIKeySetting/APIKeySetting.tsx b/apps/web/src/containers/setting-menu/APIKeySetting/APIKeySetting.tsx
@@ -145,7 +145,7 @@ const APIKeySetting: React.FC<IProps> = ({ projectId }) => {
     data: rows,
   });
 
-  const { mutate: createApiKey, isLoading } = useOAIMutation({
+  const { mutate: createApiKey, status } = useOAIMutation({
     method: 'post',
     path: '/api/projects/{projectId}/api-keys',
     pathParams: { projectId },
@@ -166,7 +166,8 @@ const APIKeySetting: React.FC<IProps> = ({ projectId }) => {
       actionBtn={{
         children: t('main.setting.button.create-api-key'),
         onClick: () => createApiKey(undefined),
-        disabled: !perms.includes('project_apikey_create') || isLoading,
+        disabled:
+          !perms.includes('project_apikey_create') || status === 'pending',
       }}
     >
       <table className="table ">

diff --git a/apps/web/src/containers/setting-menu/ChannelDeleteSetting/ChannelDeleteSetting.tsx b/apps/web/src/containers/setting-menu/ChannelDeleteSetting/ChannelDeleteSetting.tsx
@@ -52,7 +52,7 @@ const ChannelDeleteSetting: React.FC<IProps> = (props) => {
     variables: { channelId, projectId },
   });
 
-  const { mutate, isLoading } = useOAIMutation({
+  const { mutate, isPending } = useOAIMutation({
     method: 'delete',
     path: '/api/projects/{projectId}/channels/{channelId}',
     pathParams: { channelId, projectId },
@@ -94,7 +94,7 @@ const ChannelDeleteSetting: React.FC<IProps> = (props) => {
             }}
             submitButton={{
               children: t('button.delete'),
-              disabled: inputChannelName !== data?.name || isLoading,
+              disabled: inputChannelName !== data?.name || isPending,
               className: 'btn-red',
               onClick: () => mutate(undefined),
             }}

diff --git a/apps/web/src/containers/setting-menu/ChannelInfoSetting/ChannelInfoSetting.tsx b/apps/web/src/containers/setting-menu/ChannelInfoSetting/ChannelInfoSetting.tsx
@@ -56,7 +56,7 @@ const ChannelInfoSetting: React.FC<IProps> = ({ projectId, channelId }) => {
   });
   const { refetch: refetchChannelList } = useChannels(projectId);
 
-  const { mutate, isLoading } = useOAIMutation({
+  const { mutate, isPending } = useOAIMutation({
     method: 'put',
     path: '/api/projects/{projectId}/channels/channels/{channelId}',
     pathParams: { channelId, projectId },
@@ -91,7 +91,7 @@ const ChannelInfoSetting: React.FC<IProps> = ({ projectId, channelId }) => {
         form: 'form',
         type: 'submit',
         disabled:
-          !perms.includes('channel_update') || !formState.isDirty || isLoading,
+          !perms.includes('channel_update') || !formState.isDirty || isPending,
       }}
     >
       <form id="form" className="flex flex-col gap-6">

diff --git a/apps/web/src/containers/setting-menu/FieldSetting/FeedbackRequestPopover.tsx b/apps/web/src/containers/setting-menu/FieldSetting/FeedbackRequestPopover.tsx
@@ -46,12 +46,12 @@ const FeedbackRequestPopover: React.FC<IProps> = ({ channelId, projectId }) => {
     variables: { projectId },
   });
   const apiKey = useMemo(
-    () => apiKeysData?.items.find((v) => !v.deletedAt),
+    () => apiKeysData?.items.find((v) => !v.deletedAt) ?? null,
     [apiKeysData],
   );
 
   const snippetBody = useMemo(() => {
-    if (!channelData?.fields) return;
+    if (!channelData?.fields) return null;
     const body: Record<string, any> = {};
     for (const field of channelData.fields) {
       if (field.type !== 'API' || field.status === 'INACTIVE') continue;