refactor: Refactor for migration to esm.

src/admin/components/Routes/Collection/CreateFirstCollection/index.tsx

@@ -2,9 +2,9 @@ import { Button, Stack } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2/Grid2';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import RouterLink from '../../../elements/Link';
+import { RouterLink } from '../../../elements/Link/index.js';
 
-const CreateFirstCollection: React.FC = () => {
+export const CreateFirstCollection: React.FC = () => {
   const { t } = useTranslation();
 
   return (
@@ -36,5 +36,3 @@ const CreateFirstCollection: React.FC = () => {
     </Stack>
   );
 };
-
-export default CreateFirstCollection;

src/admin/components/Routes/Collection/index.tsx

@@ -1,19 +1,24 @@
-import React, { lazy, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Navigate } from 'react-router-dom';
-import { Collection } from '../../../../shared/types';
-import Edit from '../../../pages/collections/Edit';
-import List from '../../../pages/collections/List';
-import { collectionsGroupNavItems } from '../../../utilities/groupNavItems';
-import Loader from '../../elements/Loader';
-import MainLayout from '../../layouts/Main';
-import { useAuth } from '../../utilities/Auth';
-import { useConfig } from '../../utilities/Config';
+import { Collection } from '../../../../config/types.js';
+import { EditCollectionPage as Edit } from '../../../pages/collections/Edit/index.js';
+import List from '../../../pages/collections/List/index.js';
+import { collectionsGroupNavItems } from '../../../utilities/groupNavItems.js';
+import lazy from '../../../utilities/lazy.js';
+import { Loader } from '../../elements/Loader/index.js';
+import { MainLayout } from '../../layouts/Main/index.js';
+import { useAuth } from '../../utilities/Auth/index.js';
+import { useConfig } from '../../utilities/Config/index.js';
 
-const NotFound = Loader(lazy(() => import('../../../pages/NotFound')));
-const CollectionNotFound = Loader(lazy(() => import('./NotFound')));
-const CreateFirstCollection = Loader(lazy(() => import('./CreateFirstCollection')));
+const NotFound = Loader(lazy(() => import('../../../pages/NotFound/index.js'), 'NotFound'));
+const CollectionNotFound = Loader(
+  lazy(() => import('../../../pages/CollectionNotFound/index.js'), 'CollectionNotFound')
+);
+const CreateFirstCollection = Loader(
+  lazy(() => import('./CreateFirstCollection/index.js'), 'CreateFirstCollection')
+);
 
-const CollectionRoutes = () => {
+export const CollectionRoutes = () => {
   const { user, permissions } = useAuth();
   const { collections } = useConfig();
 
@@ -22,7 +27,7 @@ const CollectionRoutes = () => {
     if (user.adminAccess) return collections;
 
     return collections.filter((collection) =>
-      permissions.some((permission) => permission.collection === collection.collection)
+      permissions?.some((permission) => permission.collection === collection.collection)
     );
   };
 
@@ -73,5 +78,3 @@ const CollectionRoutes = () => {
     ],
   };
 };
-
-export default CollectionRoutes;

src/admin/components/Routes/Setting/index.tsx

@@ -1,25 +1,36 @@
-import React, { lazy } from 'react';
+import React from 'react';
 import { Navigate } from 'react-router-dom';
-import { settingsGroupNavItems } from '../../../utilities/groupNavItems';
-import Loader from '../../elements/Loader';
-import MainLayout from '../../layouts/Main';
-import { useAuth } from '../../utilities/Auth';
-import { DocumentInfoProvider } from '../../utilities/DocumentInfo';
+import { settingsGroupNavItems } from '../../../utilities/groupNavItems.js';
+import lazy from '../../../utilities/lazy.js';
+import { Loader } from '../../elements/Loader/index.js';
+import { MainLayout } from '../../layouts/Main/index.js';
+import { useAuth } from '../../utilities/Auth/index.js';
+import { DocumentInfoProvider } from '../../utilities/DocumentInfo/index.js';
 
-const Project = Loader(lazy(() => import('../../../pages/Project')));
-const Role = Loader(lazy(() => import('../../../pages/Role')));
-const CreateRole = Loader(lazy(() => import('../../../pages/Role/Create')));
-const EditRole = Loader(lazy(() => import('../../../pages/Role/Edit')));
-const ContentType = Loader(lazy(() => import('../../../pages/ContentType')));
-const CreateContentType = Loader(lazy(() => import('../../../pages/ContentType/Create')));
-const EditContentType = Loader(lazy(() => import('../../../pages/ContentType/Edit')));
-const User = Loader(lazy(() => import('../../../pages/User')));
-const CreateUser = Loader(lazy(() => import('../../../pages/User/Create')));
-const EditUser = Loader(lazy(() => import('../../../pages/User/Edit')));
-const NotFound = Loader(lazy(() => import('../../../pages/NotFound')));
+const Project = Loader(lazy(() => import('../../../pages/Project/index.js'), 'Project'));
+const Role = Loader(lazy(() => import('../../../pages/Role/index.js'), 'RolePage'));
+const CreateRole = Loader(
+  lazy(() => import('../../../pages/Role/Create/index.js'), 'CreateRolePage')
+);
+const EditRole = Loader(lazy(() => import('../../../pages/Role/Edit/index.js'), 'EditRolePage'));
+const ContentType = Loader(
+  lazy(() => import('../../../pages/ContentType/index.js'), 'ContentTypePage')
+);
+const CreateContentType = Loader(
+  lazy(() => import('../../../pages/ContentType/Create/index.js'), 'CreateContentTypePage')
+);
+const EditContentType = Loader(
+  lazy(() => import('../../../pages/ContentType/Edit/index.js'), 'EditContentTypePage')
+);
+const User = Loader(lazy(() => import('../../../pages/User/index.js'), 'UserPage'));
+const CreateUser = Loader(
+  lazy(() => import('../../../pages/User/Create/index.js'), 'CreateUserPage')
+);
+const EditUser = Loader(lazy(() => import('../../../pages/User/Edit/index.js'), 'EditUserPage'));
+const NotFound = Loader(lazy(() => import('../../../pages/NotFound/index.js'), 'NotFound'));
 const group = settingsGroupNavItems();
 
-const SettingRoutes = () => {
+export const SettingRoutes = () => {
   const { user } = useAuth();
 
   if (!user) {
@@ -142,5 +153,3 @@ const SettingRoutes = () => {
     ],
   };
 };
-
-export default SettingRoutes;

src/admin/components/Routes/index.ts

@@ -1,12 +1,10 @@
 import { useRoutes } from 'react-router-dom';
-import AuthRoutes from './Auth';
-import CollectionRoutes from './Collection';
-import NoRoutes from './NoRoutes';
-import RootRoutes from './Root';
-import SettingRoutes from './Setting';
+import { AuthRoutes } from './Auth/index.js';
+import { CollectionRoutes } from './Collection/index.js';
+import { NoRoutes } from './NoRoutes/index.js';
+import { RootRoutes } from './Root/index.js';
+import { SettingRoutes } from './Setting/index.js';
 
-const Routes = () => {
+export const Routes = () => {
   return useRoutes([RootRoutes(), CollectionRoutes(), SettingRoutes(), AuthRoutes, NoRoutes()]);
 };
-
-export default Routes;

src/admin/components/elements/DeleteDocument/index.tsx

@@ -13,7 +13,7 @@ import { ComposeWrapper } from '../../utilities/ComposeWrapper/index.js';
 import { DocumentContextProvider, useDocument } from '../DeleteDocument/Context/index.js';
 import { Props } from './types.js';
 
-const _DeleteDocument: React.FC<Props> = ({ id, slug, openState, onSuccess, onClose }) => {
+const DeleteDocumentImpl: React.FC<Props> = ({ id, slug, openState, onSuccess, onClose }) => {
   const { t } = useTranslation();
   const { enqueueSnackbar } = useSnackbar();
   const { deleteDocument } = useDocument();
@@ -55,4 +55,6 @@ const _DeleteDocument: React.FC<Props> = ({ id, slug, openState, onSuccess, onCl
   );
 };
 
-export const DeleteDocument = ComposeWrapper({ context: DocumentContextProvider })(_DeleteDocument);
+export const DeleteDocument = ComposeWrapper({ context: DocumentContextProvider })(
+  DeleteDocumentImpl
+);

src/admin/components/elements/Link/index.tsx

@@ -2,7 +2,8 @@ import { useTheme } from '@mui/material';
 import React from 'react';
 import { NavLink, LinkProps as RouterLinkProps } from 'react-router-dom';
 
-const RouterLink = React.forwardRef<HTMLAnchorElement, RouterLinkProps>((props, ref) => {
+// eslint-disable-next-line react/display-name
+export const RouterLink = React.forwardRef<HTMLAnchorElement, RouterLinkProps>((props, ref) => {
   const theme = useTheme();
 
   return (
@@ -16,5 +17,3 @@ const RouterLink = React.forwardRef<HTMLAnchorElement, RouterLinkProps>((props,
     />
   );
 });
-
-export default RouterLink;

src/admin/components/elements/Logo/index.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable max-len */
 import React from 'react';
-import { useColorMode } from '../../utilities/ColorMode';
-import RenderCustomComponent from '../../utilities/RenderCustomComponent';
+import { useColorMode } from '../../utilities/ColorMode/index.js';
 
-const Logo: React.FC = () => {
-  return <RenderCustomComponent CustomComponent={undefined} DefaultComponent={DefaultLogo} />;
+export const Logo: React.FC = () => {
+  return <DefaultLogo />;
 };
 
 const DefaultLogo: React.FC = () => {
@@ -30,5 +29,3 @@ const logoLight = (
     </g>
   </svg>
 );
-
-export default Logo;

src/admin/components/elements/NavItem/types.ts

@@ -1,10 +1,4 @@
-import { SvgIconProps } from '@mui/material';
-
-export type GroupItem = {
-  label: string;
-  href: string;
-  Icon: (props: SvgIconProps) => JSX.Element;
-};
+import { SvgIconComponent } from '@mui/icons-material';
 
 export type Group = {
   label: string;
@@ -14,3 +8,9 @@ export type Group = {
 export type Props = {
   item: GroupItem;
 };
+
+export type GroupItem = {
+  label: string;
+  href: string;
+  Icon: SvgIconComponent;
+};

src/admin/components/elements/Table/index.tsx

@@ -9,14 +9,14 @@ import {
 } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import Cell from './Cell';
-import { Props } from './types';
+import { Cell } from './Cell/index.js';
+import { Props } from './types.js';
 
-const Table: React.FC<Props> = ({ columns, rows }) => {
+export const Table: React.FC<Props> = ({ columns, rows }) => {
   const { t } = useTranslation();
   const key = (row: unknown): String => {
-    const data = row as Record<keyof { id: number }, unknown>;
-    return data ? data.id.toString() : '';
+    const data = row as Record<keyof { id: number }, string>;
+    return data?.id || '';
   };
 
   return rows.length > 0 ? (
@@ -58,5 +58,3 @@ const Table: React.FC<Props> = ({ columns, rows }) => {
     <span>{t('no_contents')}</span>
   );
 };
-
-export default Table;

src/admin/components/forms/RenderFields/types.ts

@@ -1,5 +1,5 @@
 import { Control, FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form';
-import { Field } from '../../../../shared/types';
+import { Field } from '../../../../config/types.js';
 
 export type Props = {
   control: Control<FieldValues, any>;

src/admin/components/forms/fieldTypes/DateTime/index.tsx

@@ -24,7 +24,7 @@ export const DateTimeType: React.FC<Props> = ({ register, control, errors, field
           <DateTimePicker
             {...register(meta.field, { ...required })}
             format="YYYY-MM-DD HH:mm"
-            onChange={(date: Date) => {
+            onChange={(date: Date | null) => {
               // Converts a date string from the local timezone to UTC.
               field.onChange(dayjs(date).utc().format('YYYY-MM-DD HH:mm'));
             }}

src/admin/components/forms/fieldTypes/Input/index.tsx

@@ -1,7 +1,7 @@
 import { TextField } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Props } from '../types';
+import { Props } from '../types.js';
 
 export const InputType: React.FC<Props> = ({ register, errors, field }) => {
   const { t } = useTranslation();
@@ -10,7 +10,6 @@ export const InputType: React.FC<Props> = ({ register, errors, field }) => {
   return (
     <TextField
       type="text"
-      name={field.field}
       disabled={Boolean(field.readonly)}
       {...register(field.field, { ...required })}
       error={errors[field.field] !== undefined}

src/admin/components/forms/fieldTypes/InputMultiline/index.tsx

@@ -1,7 +1,7 @@
 import { TextField } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Props } from '../types';
+import { Props } from '../types.js';
 
 export const InputMultilineType: React.FC<Props> = ({ register, errors, field }) => {
   const { t } = useTranslation();
@@ -12,7 +12,6 @@ export const InputMultilineType: React.FC<Props> = ({ register, errors, field })
       type="text"
       multiline
       rows={5}
-      name={field.field}
       disabled={Boolean(field.readonly)}
       {...register(field.field, { ...required })}
       error={errors[field.field] !== undefined}

src/admin/components/forms/fieldTypes/SelectDropdown/index.tsx

@@ -25,7 +25,7 @@ export const SelectDropdownType: React.FC<Props> = ({ control, register, field:
           <MenuItem value="">
             <em>None</em>
           </MenuItem>
-          {meta.fieldOption.choices.map((choice) => (
+          {meta.fieldOption?.choices?.map((choice) => (
             <MenuItem value={choice.value} key={choice.value}>
               {choice.label}
             </MenuItem>

src/admin/components/forms/fieldTypes/types.ts

@@ -1,5 +1,5 @@
 import { Control, FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form';
-import { Field } from '../../../../shared/types';
+import { Field } from '../../../../config/types.js';
 
 export type Props = {
   control: Control<FieldValues, any>;

src/admin/components/utilities/ComposeWrapper/index.tsx

@@ -8,23 +8,24 @@ type ComposedWrapperProps<T extends {}, CW> = T & {
   [key in keyof CW]?: CW[key] & Partial<{ disable?: boolean }>;
 } & Partial<{ unwrap?: boolean }>;
 
-function omit(obj, ...keys) {
+function omit(obj: any, ...keys: string[][]) {
   const keysToRemove = new Set(keys.flat());
   return Object.fromEntries(Object.entries(obj).filter(([k]) => !keysToRemove.has(k)));
 }
 
-function pick(obj, ...keys) {
-  const ret = {};
+function pick(obj: any, ...keys: string[][]) {
+  const ret: Record<string, any> = {};
   keys.flat().forEach((key) => {
     if (obj[key]) ret[key] = obj[key];
   });
   return ret;
 }
 
-const ComposeWrapper = <CW,>(wrappers: ComposedWrappers<CW>) => {
+export const ComposeWrapper = <CW,>(wrappers: ComposedWrappers<CW>) => {
   return function <T extends object, R>(Component: React.FC<T>) {
+    // eslint-disable-next-line react/display-name
     return forwardRef<R, ComposedWrapperProps<T, CW>>(({ unwrap = false, ...allProps }, ref) => {
-      const keys = Object.keys(wrappers).filter((k) => !allProps[k]?.disable);
+      const keys = Object.keys(wrappers).filter((k) => !allProps[k as keyof CW]?.disable);
       const props = omit(allProps, keys) as T;
       const restProps = pick(allProps, keys);
 
@@ -35,7 +36,7 @@ const ComposeWrapper = <CW,>(wrappers: ComposedWrappers<CW>) => {
       return (
         <>
           {keys.reduceRight((children, currentKey) => {
-            const CurrentWrapper = wrappers[currentKey];
+            const CurrentWrapper = wrappers[currentKey as keyof CW];
             const currentWrapperProps = restProps?.[currentKey] ?? {};
 
             return <CurrentWrapper {...currentWrapperProps}>{children}</CurrentWrapper>;
@@ -45,5 +46,3 @@ const ComposeWrapper = <CW,>(wrappers: ComposedWrappers<CW>) => {
     });
   };
 };
-
-export default ComposeWrapper;

src/admin/fields/schemas/authentications/resetPassword.ts

@@ -1,13 +1,13 @@
 import { TFunction } from 'i18next';
 import { ObjectSchema } from 'yup';
-import yup from '../../yup';
+import { yup } from '../../yup.js';
 
 export type FormValues = {
   password: string;
   token: string;
 };
 
-export const resetPasswordSchema = (t: TFunction): ObjectSchema<FormValues> => {
+export const resetPassword = (t: TFunction): ObjectSchema<FormValues> => {
   return yup.object().shape({
     password: yup
       .string()
@@ -16,7 +16,8 @@ export const resetPasswordSchema = (t: TFunction): ObjectSchema<FormValues> => {
       .matches(/[@$!%*#?&]+/, t('yup.custom.one_special_character'))
       .required()
       .min(8)
-      .max(250),
-    token: yup.string(),
+      .max(250)
+      .required(),
+    token: yup.string().required(),
   });
 };