Merge pull request #1689 from logto-io/charles-log-3844-split-ui-language-options-from-ac

refactor: split mainflow ui language options from admin console

packages/console/package.json

@@ -19,6 +19,7 @@
   "devDependencies": {
     "@fontsource/roboto-mono": "^4.5.7",
     "@logto/phrases": "^1.0.0-beta.2",
+    "@logto/phrases-ui": "^1.0.0-beta.2",
     "@logto/react": "^1.0.0-alpha.2",
     "@logto/schemas": "^1.0.0-beta.2",
     "@logto/shared": "^1.0.0-beta.1",

packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx

@@ -1,4 +1,4 @@
-import { languageOptions } from '@logto/phrases';
+import { languageOptions } from '@logto/phrases-ui';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 

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

@@ -1,4 +1,4 @@
-import { Language } from '@logto/phrases';
+import { Language, languageOptions } from '@logto/phrases-ui';
 import { AppearanceMode, ConnectorDto, ConnectorMetadata, SignInExperience } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
 import classNames from 'classnames';
@@ -49,28 +49,25 @@ const Preview = ({ signInExperience, className }: Props) => {
     }
   }, [modeOptions, mode]);
 
-  const languageOptions = useMemo(() => {
-    const options = [
-      { value: Language.English, title: t('sign_in_exp.preview.languages.english') },
-      { value: Language.Chinese, title: t('sign_in_exp.preview.languages.chinese') },
-    ];
-
+  const availableLanguageOptions = useMemo(() => {
     if (signInExperience && !signInExperience.languageInfo.autoDetect) {
-      return options.filter(({ value }) => value === signInExperience.languageInfo.fixedLanguage);
+      return languageOptions.filter(
+        ({ value }) => value === signInExperience.languageInfo.fixedLanguage
+      );
     }
 
-    return options;
-  }, [signInExperience, t]);
+    return languageOptions;
+  }, [signInExperience]);
 
   useEffect(() => {
-    if (!languageOptions[0]) {
+    if (!availableLanguageOptions[0]) {
       return;
     }
 
-    if (!languageOptions.some(({ value }) => value === language)) {
-      setLanguage(languageOptions[0].value);
+    if (!availableLanguageOptions.some(({ value }) => value === language)) {
+      setLanguage(availableLanguageOptions[0].value);
     }
-  }, [language, languageOptions]);
+  }, [language, availableLanguageOptions]);
 
   const config = useMemo(() => {
     if (!allConnectors || !signInExperience) {
@@ -130,7 +127,7 @@ const Preview = ({ signInExperience, className }: Props) => {
           <Select
             size="small"
             value={language}
-            options={languageOptions}
+            options={availableLanguageOptions}
             onChange={(value) => {
               if (value) {
                 setLanguage(value);

packages/phrases-ui/src/index.ts

@@ -4,7 +4,7 @@ import en from './locales/en';
 import zhCN from './locales/zh-cn';
 import { Resource, Language } from './types';
 
-export { Language } from './types';
+export { Language, languageOptions } from './types';
 
 export type I18nKey = NormalizeKeyPaths<typeof en.translation>;
 

packages/phrases-ui/src/types.ts

@@ -9,3 +9,8 @@ export enum Language {
   English = 'en',
   Chinese = 'zh-CN',
 }
+
+export const languageOptions = [
+  { value: Language.English, title: 'English' },
+  { value: Language.Chinese, title: '中文' },
+];