From d5c1a290971287ebcf3607a666f304fd3de858b8 Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Wed, 27 Jul 2022 15:55:15 +0800 Subject: [PATCH] refactor: split mainflow ui language options from admin console --- packages/console/package.json | 1 + .../components/LanguagesForm.tsx | 2 +- .../SignInExperience/components/Preview.tsx | 27 +- packages/phrases-ui/src/index.ts | 2 +- packages/phrases-ui/src/types.ts | 5 + pnpm-lock.yaml | 343 +++++++++++++----- 6 files changed, 274 insertions(+), 106 deletions(-) diff --git a/packages/console/package.json b/packages/console/package.json index 795aece48..29e882dee 100644 --- a/packages/console/package.json +++ b/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", diff --git a/packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx b/packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx index 08b234537..3f87fc376 100644 --- a/packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx +++ b/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'; diff --git a/packages/console/src/pages/SignInExperience/components/Preview.tsx b/packages/console/src/pages/SignInExperience/components/Preview.tsx index 53d63bd8e..379d341f4 100644 --- a/packages/console/src/pages/SignInExperience/components/Preview.tsx +++ b/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) => {