refactor(console): reorganize sie code files (#2493)

packages/console/src/pages/SignInExperience/components/Preview/index.tsx

@@ -16,7 +16,7 @@ import TabNav, { TabNavItem } from '@/components/TabNav';
 import type { RequestError } from '@/hooks/use-api';
 import useUiLanguages from '@/hooks/use-ui-languages';
 
-import * as styles from './Preview.module.scss';
+import * as styles from './index.module.scss';
 
 type Props = {
   signInExperience?: SignInExperience;

packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignInDiffSection.tsx

@@ -3,10 +3,10 @@ import { detailedDiff } from 'deep-object-diff';
 import get from 'lodash.get';
 import { useTranslation } from 'react-i18next';
 
-import type { SignInMethod } from '../SignInMethodEditBox/types';
+import type { SignInMethod, SignInMethodsObject } from '@/pages/SignInExperience/types';
+
 import DiffSegment from './DiffSegment';
 import * as styles from './index.module.scss';
-import type { SignInMethodsObject } from './types';
 import { convertToSignInMethodsObject } from './utilities';
 
 type Props = {

packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/utilities.ts

@@ -1,8 +1,7 @@
 import type { SignInExperience } from '@logto/schemas';
 import { diff } from 'deep-object-diff';
 
-import type { SignInMethod } from '../SignInMethodEditBox/types';
-import type { SignInMethodsObject } from './types';
+import type { SignInMethod, SignInMethodsObject } from '@/pages/SignInExperience/types';
 
 export const isSignUpDifferent = (
   before: SignInExperience['signUp'],

packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/index.tsx

@@ -1,15 +1,15 @@
 import type { SignInExperience } from '@logto/schemas';
 import { useTranslation } from 'react-i18next';
 
-import SignUpAndSignInDiffSection from '../tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection';
-import * as styles from './SignInMethodsChangePreview.module.scss';
+import SignUpAndSignInDiffSection from './SignUpAndSignInDiffSection';
+import * as styles from './index.module.scss';
 
 type Props = {
   before: SignInExperience;
   after: SignInExperience;
 };
 
-const SignInMethodsChangePreview = ({ before, after }: Props) => {
+const SignUpAndSignInChangePreview = ({ before, after }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -29,4 +29,4 @@ const SignInMethodsChangePreview = ({ before, after }: Props) => {
   );
 };
 
-export default SignInMethodsChangePreview;
+export default SignUpAndSignInChangePreview;

packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx

@@ -16,15 +16,15 @@ import useSettings from '@/hooks/use-settings';
 import useUserPreferences from '@/hooks/use-user-preferences';
 import * as modalStyles from '@/scss/modal.module.scss';
 
-import usePreviewConfigs from '../hooks';
-import type { SignInExperienceForm } from '../types';
-import { signInExperienceParser } from '../utilities';
-import BrandingForm from './BrandingForm';
-import ColorForm from './ColorForm';
+import usePreviewConfigs from '../../hooks/use-preview-configs';
+import BrandingForm from '../../tabs/Branding/BrandingForm';
+import ColorForm from '../../tabs/Branding/ColorForm';
+import LanguagesForm from '../../tabs/Others/LanguagesForm';
+import TermsForm from '../../tabs/Others/TermsForm';
+import type { SignInExperienceForm } from '../../types';
+import { signInExperienceParser } from '../../utilities';
+import Preview from '../Preview';
 import * as styles from './GuideModal.module.scss';
-import LanguagesForm from './LanguagesForm';
-import Preview from './Preview';
-import TermsForm from './TermsForm';
 
 type Props = {
   isOpen: boolean;

packages/console/src/pages/SignInExperience/components/Welcome/index.tsx

@@ -10,7 +10,7 @@ import CardTitle from '@/components/CardTitle';
 import { useTheme } from '@/hooks/use-theme';
 
 import GuideModal from './GuideModal';
-import * as styles from './Welcome.module.scss';
+import * as styles from './index.module.scss';
 
 type Props = {
   mutate: () => void;

packages/console/src/pages/SignInExperience/hooks/use-preview-configs.ts

@@ -1,8 +1,8 @@
 import type { SignInExperience } from '@logto/schemas';
 import { useMemo } from 'react';
 
-import type { SignInExperienceForm } from './types';
-import { signInExperienceParser } from './utilities';
+import type { SignInExperienceForm } from '../types';
+import { signInExperienceParser } from '../utilities';
 
 const usePreviewConfigs = (
   formData: SignInExperienceForm,

packages/console/src/pages/SignInExperience/index.tsx

@@ -20,14 +20,14 @@ import useUiLanguages from '@/hooks/use-ui-languages';
 import * as detailsStyles from '@/scss/details.module.scss';
 
 import Preview from './components/Preview';
-import SignInMethodsChangePreview from './components/SignInMethodsChangePreview';
+import SignUpAndSignInChangePreview from './components/SignUpAndSignInChangePreview';
 import Skeleton from './components/Skeleton';
 import Welcome from './components/Welcome';
-import usePreviewConfigs from './hooks';
+import usePreviewConfigs from './hooks/use-preview-configs';
 import * as styles from './index.module.scss';
-import BrandingTab from './tabs/BrandingTab';
-import OthersTab from './tabs/OthersTab';
-import SignUpAndSignInTab from './tabs/SignUpAndSignInTab';
+import Branding from './tabs/Branding';
+import Others from './tabs/Others';
+import SignUpAndSignIn from './tabs/SignUpAndSignIn';
 import type { SignInExperienceForm } from './types';
 import { compareSignUpAndSignInConfigs, signInExperienceParser } from './utilities';
 
@@ -139,9 +139,9 @@ const SignInExperience = () => {
             <FormProvider {...methods}>
               <form className={styles.formWrapper} onSubmit={onSubmit}>
                 <div className={classNames(detailsStyles.body, styles.form)}>
-                  {tab === 'branding' && <BrandingTab />}
-                  {tab === 'sign-up-and-sign-in' && <SignUpAndSignInTab />}
-                  {tab === 'others' && <OthersTab />}
+                  {tab === 'branding' && <Branding />}
+                  {tab === 'sign-up-and-sign-in' && <SignUpAndSignIn />}
+                  {tab === 'others' && <Others />}
                 </div>
                 <div className={detailsStyles.footer}>
                   <div className={detailsStyles.footerMain}>
@@ -170,7 +170,7 @@ const SignInExperience = () => {
             await saveData();
           }}
         >
-          {dataToCompare && <SignInMethodsChangePreview before={data} after={dataToCompare} />}
+          {dataToCompare && <SignUpAndSignInChangePreview before={data} after={dataToCompare} />}
         </ConfirmModal>
       )}
       <UnsavedChangesAlertModal hasUnsavedChanges={isDirty} />

packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx

@@ -7,8 +7,8 @@ import RadioGroup, { Radio } from '@/components/RadioGroup';
 import TextInput from '@/components/TextInput';
 import { uriValidator } from '@/utilities/validator';
 
-import type { SignInExperienceForm } from '../types';
-import * as styles from './index.module.scss';
+import type { SignInExperienceForm } from '../../types';
+import * as styles from '../index.module.scss';
 
 const BrandingForm = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });

packages/console/src/pages/SignInExperience/tabs/Branding/ColorForm.tsx

@@ -8,8 +8,8 @@ import ColorPicker from '@/components/ColorPicker';
 import FormField from '@/components/FormField';
 import Switch from '@/components/Switch';
 
-import type { SignInExperienceForm } from '../types';
-import * as styles from './index.module.scss';
+import type { SignInExperienceForm } from '../../types';
+import * as styles from '../index.module.scss';
 
 const ColorForm = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });

packages/console/src/pages/SignInExperience/tabs/Branding/index.tsx

@@ -0,0 +1,11 @@
+import BrandingForm from './BrandingForm';
+import ColorForm from './ColorForm';
+
+const Branding = () => (
+  <>
+    <ColorForm />
+    <BrandingForm />
+  </>
+);
+
+export default Branding;

packages/console/src/pages/SignInExperience/tabs/BrandingTab.tsx

@@ -1,11 +0,0 @@
-import BrandingForm from '../components/BrandingForm';
-import ColorForm from '../components/ColorForm';
-
-const BrandingTab = () => (
-  <>
-    <ColorForm />
-    <BrandingForm />
-  </>
-);
-
-export default BrandingTab;

packages/console/src/pages/SignInExperience/tabs/Others/AuthenticationForm.tsx

@@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next';
 import FormField from '@/components/FormField';
 import Switch from '@/components/Switch';
 
-import type { SignInExperienceForm } from '../types';
-import * as styles from './index.module.scss';
+import type { SignInExperienceForm } from '../../types';
+import * as styles from '../index.module.scss';
 
 const AuthenticationForm = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });

packages/console/src/pages/SignInExperience/tabs/Others/LanguagesForm.tsx

@@ -11,9 +11,9 @@ import Switch from '@/components/Switch';
 import type { RequestError } from '@/hooks/use-api';
 import useUiLanguages from '@/hooks/use-ui-languages';
 
-import type { SignInExperienceForm } from '../types';
-import ManageLanguageButton from './ManageLanguage/ManageLanguageButton';
-import * as styles from './index.module.scss';
+import type { SignInExperienceForm } from '../../types';
+import * as styles from '../index.module.scss';
+import ManageLanguageButton from './components/ManageLanguage/ManageLanguageButton';
 
 type Props = {
   isManageLanguageVisible?: boolean;

packages/console/src/pages/SignInExperience/tabs/Others/TermsForm.tsx

@@ -6,8 +6,8 @@ import Switch from '@/components/Switch';
 import TextInput from '@/components/TextInput';
 import { uriValidator } from '@/utilities/validator';
 
-import type { SignInExperienceForm } from '../types';
-import * as styles from './index.module.scss';
+import type { SignInExperienceForm } from '../../types';
+import * as styles from '../index.module.scss';
 
 const TermsForm = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });

packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageDetails.tsx

@@ -20,7 +20,7 @@ import useApi, { RequestError } from '@/hooks/use-api';
 import useUiLanguages from '@/hooks/use-ui-languages';
 import type { CustomPhraseResponse } from '@/types/custom-phrase';
 
-import { createEmptyUiTranslation, flattenTranslation } from '../../../utilities';
+import { createEmptyUiTranslation, flattenTranslation } from '../../../../../utilities';
 import EditSection from './EditSection';
 import * as style from './LanguageDetails.module.scss';
 import { LanguageEditorContext } from './use-language-editor-context';

packages/console/src/pages/SignInExperience/tabs/Others/index.tsx

@@ -0,0 +1,13 @@
+import AuthenticationForm from './AuthenticationForm';
+import LanguagesForm from './LanguagesForm';
+import TermsForm from './TermsForm';
+
+const Others = () => (
+  <>
+    <TermsForm />
+    <LanguagesForm isManageLanguageVisible />
+    <AuthenticationForm />
+  </>
+);
+
+export default Others;

packages/console/src/pages/SignInExperience/tabs/OthersTab.tsx

@@ -1,13 +0,0 @@
-import AuthenticationForm from '../components/AuthenticationForm';
-import LanguagesForm from '../components/LanguagesForm';
-import TermsForm from '../components/TermsForm';
-
-const OthersTab = () => (
-  <>
-    <TermsForm />
-    <LanguagesForm isManageLanguageVisible />
-    <AuthenticationForm />
-  </>
-);
-
-export default OthersTab;

packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/SignInMethodItem.tsx

@@ -10,10 +10,10 @@ import Minus from '@/assets/images/minus.svg';
 import SwitchArrowIcon from '@/assets/images/switch-arrow.svg';
 import Checkbox from '@/components/Checkbox';
 import IconButton from '@/components/IconButton';
+import type { SignInMethod } from '@/pages/SignInExperience/types';
 
 import ConnectorSetupWarning from '../ConnectorSetupWarning';
 import * as styles from './index.module.scss';
-import type { SignInMethod } from './types';
 
 type Props = {
   signInMethod: SignInMethod;

packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/index.tsx

@@ -2,7 +2,7 @@ import SignInForm from './SignInForm';
 import SignUpForm from './SignUpForm';
 import SocialSignInForm from './SocialSignInForm';
 
-const SignUpAndSignInTab = () => (
+const SignUpAndSignIn = () => (
   <>
     <SignUpForm />
     <SignInForm />
@@ -10,4 +10,4 @@ const SignUpAndSignInTab = () => (
   </>
 );
 
-export default SignUpAndSignInTab;
+export default SignUpAndSignIn;

packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/types.ts

@@ -1,3 +0,0 @@
-import type { SignInExperience } from '@logto/schemas';
-
-export type SignInMethod = SignInExperience['signIn']['methods'][number];

packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/types.ts

@@ -1,6 +0,0 @@
-import type { SignInIdentifier } from '@logto/schemas';
-
-export type SignInMethodsObject = Record<
-  SignInIdentifier,
-  { password: boolean; verificationCode: boolean }
->;

packages/console/src/pages/SignInExperience/types.ts

@@ -1,6 +1,13 @@
-import type { SignInExperience, SignUp } from '@logto/schemas';
+import type { SignInExperience, SignInIdentifier, SignUp } from '@logto/schemas';
 
-export type SignInExperienceForm = Omit<SignInExperience, 'signInMethods' | 'signUp'> & {
+export type SignInExperienceForm = Omit<SignInExperience, 'signUp'> & {
   signUp?: SignUp;
   createAccountEnabled: boolean;
 };
+
+export type SignInMethod = SignInExperience['signIn']['methods'][number];
+
+export type SignInMethodsObject = Record<
+  SignInIdentifier,
+  { password: boolean; verificationCode: boolean }
+>;

packages/console/src/pages/SignInExperience/utilities.ts

@@ -7,7 +7,7 @@ import {
   isSignInMethodsDifferent,
   isSignUpDifferent,
   isSocialTargetsDifferent,
-} from './tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/utilities';
+} from './components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/utilities';
 import type { SignInExperienceForm } from './types';
 
 export const signInExperienceParser = {