refactor(console): remove i18n text context (#3234)

2025-03-03 22:15:32 -05:00 · 2023-02-27 17:55:13 +08:00 · 2023-02-27 17:55:13 +08:00 · 9c31d3837b
commit 9c31d3837b
parent a3e6001887
19 changed files with 62 additions and 49 deletions
--- a/packages/console/package.json
+++ b/packages/console/package.json
@ -85,7 +85,6 @@
    "react-syntax-highlighter": "^15.5.0",
    "recharts": "^2.1.13",
    "remark-gfm": "^3.0.1",
-    "snake-case": "^3.0.4",
    "stylelint": "^15.0.0",
    "swr": "^1.3.0",
    "typescript": "^4.9.4",
--- a/packages/console/src/pages/ConnectorDetails/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/index.tsx
@ -145,9 +145,11 @@ const ConnectorDetails = () => {
                  </>
                )}
                <Status status={inUse ? 'enabled' : 'disabled'} variant="outlined">
-                  {t('connectors.connector_status', {
-                    context: inUse ? 'in_use' : 'not_in_use',
-                  })}
+                  {t(
+                    inUse
+                      ? 'connectors.connector_status_in_use'
+                      : 'connectors.connector_status_not_in_use'
+                  )}
                </Status>
                <div className={styles.verticalBar} />
                <div className={styles.text}>ID</div>
--- a/packages/console/src/pages/Connectors/components/ConnectorStatus/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorStatus/index.tsx
@ -19,9 +19,7 @@ const ConnectorStatus = ({ connectorGroup }: Props) => {

  return firstConnector ? (
    <Status status={inUse ? 'enabled' : 'disabled'}>
-      {t('connectors.connector_status', {
-        context: inUse ? 'in_use' : 'not_in_use',
-      })}
+      {t(inUse ? 'connectors.connector_status_in_use' : 'connectors.connector_status_not_in_use')}
    </Status>
  ) : (
    <span>-</span>
--- a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignInDiffSection.tsx
+++ b/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignInDiffSection.tsx
@ -3,6 +3,7 @@ import { getSafe } from '@silverhand/essentials';
 import { detailedDiff } from 'deep-object-diff';
 import { useTranslation } from 'react-i18next';

+import { signInIdentifierPhrase } from '@/pages/SignInExperience/constants';
 import type { SignInMethod, SignInMethodsObject } from '@/pages/SignInExperience/types';

 import DiffSegment from './DiffSegment';
@ -54,9 +55,7 @@ const SignInDiffSection = ({ before, after, isAfter = false }: Props) => {
          return (
            <li key={identifierKey}>
              <DiffSegment hasChanged={hasIdentifierChanged(identifierKey)} isAfter={isAfter}>
-                {t('sign_in_exp.sign_up_and_sign_in.identifiers', {
-                  context: identifierKey.toLocaleLowerCase(),
-                })}
+                {String(t(signInIdentifierPhrase[identifierKey]))}
                {hasAuthentication && ' ('}
                {password && (
                  <DiffSegment
--- a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignUpDiffSection.tsx
+++ b/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignUpDiffSection.tsx
@ -2,8 +2,8 @@ import type { SignUp } from '@logto/schemas';
 import { getSafe } from '@silverhand/essentials';
 import { diff } from 'deep-object-diff';
 import { useTranslation } from 'react-i18next';
-import { snakeCase } from 'snake-case';

+import { signUpIdentifierPhrase } from '@/pages/SignInExperience/constants';
 import type { SignUpForm } from '@/pages/SignInExperience/types';
 import { signInExperienceParser } from '@/pages/SignInExperience/utils/form';

@ -34,9 +34,7 @@ const SignUpDiffSection = ({ before, after, isAfter = false }: Props) => {
      <ul className={styles.list}>
        <li>
          <DiffSegment hasChanged={hasChanged('identifier')} isAfter={isAfter}>
-            {t('sign_in_exp.sign_up_and_sign_in.identifiers', {
-              context: snakeCase(identifier),
-            })}
+            {String(t(signUpIdentifierPhrase[identifier]))}
          </DiffSegment>
          {hasAuthentication && ' ('}
          {password && (
--- a/packages/console/src/pages/SignInExperience/constants.ts
+++ b/packages/console/src/pages/SignInExperience/constants.ts
@ -1,3 +1,4 @@
+import type { AdminConsoleKey } from '@logto/phrases';
 import { ConnectorType, SignInIdentifier } from '@logto/schemas';

 import { SignUpIdentifier } from './types';
@ -20,3 +21,35 @@ export const identifierRequiredConnectorMapping: {
  [SignInIdentifier.Email]: ConnectorType.Email,
  [SignInIdentifier.Phone]: ConnectorType.Sms,
 };
+
+type SignInIdentifierPhrase = {
+  [key in SignInIdentifier]: AdminConsoleKey;
+};
+
+export const signInIdentifierPhrase: SignInIdentifierPhrase = Object.freeze({
+  [SignInIdentifier.Email]: 'sign_in_exp.sign_up_and_sign_in.identifiers_email',
+  [SignInIdentifier.Phone]: 'sign_in_exp.sign_up_and_sign_in.identifiers_phone',
+  [SignInIdentifier.Username]: 'sign_in_exp.sign_up_and_sign_in.identifiers_username',
+} as const);
+
+type SignUpIdentifierPhrase = {
+  [key in SignUpIdentifier]: AdminConsoleKey;
+};
+
+export const signUpIdentifierPhrase: SignUpIdentifierPhrase = Object.freeze({
+  [SignUpIdentifier.Email]: 'sign_in_exp.sign_up_and_sign_in.identifiers_email',
+  [SignUpIdentifier.Phone]: 'sign_in_exp.sign_up_and_sign_in.identifiers_phone',
+  [SignUpIdentifier.Username]: 'sign_in_exp.sign_up_and_sign_in.identifiers_username',
+  [SignUpIdentifier.EmailOrSms]: 'sign_in_exp.sign_up_and_sign_in.identifiers_email_or_sms',
+  [SignUpIdentifier.None]: 'sign_in_exp.sign_up_and_sign_in.identifiers_none',
+} as const);
+
+type NoConnectorWarningPhrase = {
+  [key in ConnectorType]: AdminConsoleKey;
+};
+
+export const noConnectorWarningPhrase: NoConnectorWarningPhrase = Object.freeze({
+  [ConnectorType.Email]: 'sign_in_exp.setup_warning.no_connector_email',
+  [ConnectorType.Sms]: 'sign_in_exp.setup_warning.no_connector_sms',
+  [ConnectorType.Social]: 'sign_in_exp.setup_warning.no_connector_social',
+} as const);
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignUpForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignUpForm.tsx
@ -1,7 +1,6 @@
 import { conditional } from '@silverhand/essentials';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { snakeCase } from 'snake-case';

 import Card from '@/components/Card';
 import Checkbox from '@/components/Checkbox';
@ -9,7 +8,11 @@ import FormField from '@/components/FormField';
 import Select from '@/components/Select';
 import useEnabledConnectorTypes from '@/hooks/use-enabled-connector-types';

-import { signUpIdentifiers, signUpIdentifiersMapping } from '../../constants';
+import {
+  signUpIdentifierPhrase,
+  signUpIdentifiers,
+  signUpIdentifiersMapping,
+} from '../../constants';
 import type { SignInExperienceForm } from '../../types';
 import { SignUpIdentifier } from '../../types';
 import {
@ -129,9 +132,7 @@ const SignUpForm = () => {
                value: identifier,
                title: (
                  <div>
-                    {t('sign_in_exp.sign_up_and_sign_in.identifiers', {
-                      context: snakeCase(identifier),
-                    })}
+                    {t(signUpIdentifierPhrase[identifier])}
                    {identifier === SignUpIdentifier.None && (
                      <span className={styles.socialOnlyDescription}>
                        {t(
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning.tsx
@ -4,6 +4,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import Alert from '@/components/Alert';
 import TextLink from '@/components/TextLink';
 import useEnabledConnectorTypes from '@/hooks/use-enabled-connector-types';
+import { noConnectorWarningPhrase } from '@/pages/SignInExperience/constants';

 type Props = {
  requiredConnectors: ConnectorType[];
@ -35,8 +36,7 @@ const ConnectorSetupWarning = ({ requiredConnectors }: Props) => {
              ),
            }}
          >
-            {t('sign_in_exp.setup_warning.no_connector', {
-              context: connectorType.toLowerCase(),
+            {t(noConnectorWarningPhrase[connectorType], {
              link: t('sign_in_exp.setup_warning.setup_link'),
            })}
          </Trans>
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/AddButton.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/AddButton.tsx
@ -1,13 +1,13 @@
 import type { SignInIdentifier } from '@logto/schemas';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { snakeCase } from 'snake-case';

 import CirclePlus from '@/assets/images/circle-plus.svg';
 import Plus from '@/assets/images/plus.svg';
 import ActionMenu from '@/components/ActionMenu';
 import type { Props as ButtonProps } from '@/components/Button';
 import { DropdownItem } from '@/components/Dropdown';
+import { signInIdentifierPhrase } from '@/pages/SignInExperience/constants';

 import * as styles from './index.module.scss';

@ -55,7 +55,7 @@ const AddButton = ({ options, onSelected, hasSelectedIdentifiers }: Props) => {
            onSelected(identifier);
          }}
        >
-          {t('sign_in_exp.sign_up_and_sign_in.identifiers', { context: snakeCase(identifier) })}
+          {t(signInIdentifierPhrase[identifier])}
        </DropdownItem>
      ))}
    </ActionMenu>
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/SignInMethodItem.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/SignInMethodItem.tsx
@ -3,7 +3,6 @@ import { SignInIdentifier } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { snakeCase } from 'snake-case';

 import Draggable from '@/assets/images/draggable.svg';
 import Minus from '@/assets/images/minus.svg';
@ -11,6 +10,7 @@ import SwitchArrowIcon from '@/assets/images/switch-arrow.svg';
 import Checkbox from '@/components/Checkbox';
 import IconButton from '@/components/IconButton';
 import { Tooltip } from '@/components/Tip';
+import { signInIdentifierPhrase } from '@/pages/SignInExperience/constants';
 import type { SignInMethod } from '@/pages/SignInExperience/types';

 import ConnectorSetupWarning from '../ConnectorSetupWarning';
@ -48,13 +48,11 @@ const SignInMethodItem = ({

  return (
    <div>
-      <div key={snakeCase(identifier)} className={styles.signInMethodItem}>
+      <div key={identifier} className={styles.signInMethodItem}>
        <div className={classNames(styles.signInMethod, hasError && styles.error)}>
          <div className={styles.identifier}>
            <Draggable className={styles.draggableIcon} />
-            {t('sign_in_exp.sign_up_and_sign_in.identifiers', {
-              context: snakeCase(identifier),
-            })}
+            {t(signInIdentifierPhrase[identifier])}
          </div>
          <div
            className={classNames(
@ -105,9 +103,7 @@ const SignInMethodItem = ({
          content={conditional(
            !isDeletable &&
              t('sign_in_exp.sign_up_and_sign_in.tip.delete_sign_in_method', {
-                identifier: t('sign_in_exp.sign_up_and_sign_in.identifiers', {
-                  context: snakeCase(identifier),
-                }).toLocaleLowerCase(),
+                identifier: String(t(signInIdentifierPhrase[identifier])).toLocaleLowerCase(),
              })
          )}
        >
--- a/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts
@ -17,7 +17,6 @@ const sign_in_exp = {
      'Bitte beachte, dass die Anmeldeoberfläche für alle Anwendungen unter diesem Konto gilt.',
  },
  sign_up_and_sign_in: {
-    identifiers: 'Sign-up identifiers', // UNTRANSLATED
    identifiers_email: 'Email address', // UNTRANSLATED
    identifiers_phone: 'Phone number', // UNTRANSLATED
    identifiers_username: 'Username', // UNTRANSLATED
@ -146,7 +145,6 @@ const sign_in_exp = {
    },
  },
  setup_warning: {
-    no_connector: '',
    no_connector_sms:
      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_connector_email:
--- a/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
@ -39,7 +39,6 @@ const sign_in_exp = {
    slogan_placeholder: 'Unleash your creativity',
  },
  sign_up_and_sign_in: {
-    identifiers: 'Sign-up identifiers',
    identifiers_email: 'Email address',
    identifiers_phone: 'Phone number',
    identifiers_username: 'Username',
@ -140,7 +139,6 @@ const sign_in_exp = {
    },
  },
  setup_warning: {
-    no_connector: '',
    no_connector_sms:
      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"',
    no_connector_email:
--- a/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
@ -41,7 +41,6 @@ const sign_in_exp = {
    slogan_placeholder: 'Libérez votre créativité',
  },
  sign_up_and_sign_in: {
-    identifiers: 'Sign-up identifiers', // UNTRANSLATED
    identifiers_email: 'Email address', // UNTRANSLATED
    identifiers_phone: 'Phone number', // UNTRANSLATED
    identifiers_username: 'Username', // UNTRANSLATED
@ -142,7 +141,6 @@ const sign_in_exp = {
    },
  },
  setup_warning: {
-    no_connector: '',
    no_connector_sms:
      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_connector_email:
--- a/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts
@ -37,7 +37,6 @@ const sign_in_exp = {
    slogan_placeholder: '상상력을 펼쳐 보세요',
  },
  sign_up_and_sign_in: {
-    identifiers: '회원가입 ID',
    identifiers_email: '이메일 주소',
    identifiers_phone: '휴대전화번호',
    identifiers_username: '사용자 이름',
@ -135,7 +134,6 @@ const sign_in_exp = {
    },
  },
  setup_warning: {
-    no_connector: '',
    no_connector_sms:
      'SMS 연동 설정이 아직 없어요. SMS 연동 구성을 완료할 때까지 로그인할 수 없어요. <a>{{link}}</a> "연동"으로',
    no_connector_email:
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp.ts
@ -40,7 +40,6 @@ const sign_in_exp = {
    slogan_placeholder: 'Use sua criatividade',
  },
  sign_up_and_sign_in: {
-    identifiers: 'Identificadores de inscrição',
    identifiers_email: 'Endereço de e-mail',
    identifiers_phone: 'Número de telefone',
    identifiers_username: 'Nome de usuário',
@ -142,7 +141,6 @@ const sign_in_exp = {
    },
  },
  setup_warning: {
-    no_connector: '',
    no_connector_sms:
      'Nenhum conector SMS configurado ainda. Até terminar de configurar seu conector SMS, você não poderá fazer login. <a>{{link}}</a> em "Conectores"',
    no_connector_email:
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
@ -39,7 +39,6 @@ const sign_in_exp = {
    slogan_placeholder: 'Liberte a sua criatividade',
  },
  sign_up_and_sign_in: {
-    identifiers: 'Sign-up identifiers', // UNTRANSLATED
    identifiers_email: 'Email address', // UNTRANSLATED
    identifiers_phone: 'Phone number', // UNTRANSLATED
    identifiers_username: 'Username', // UNTRANSLATED
@ -140,7 +139,6 @@ const sign_in_exp = {
    },
  },
  setup_warning: {
-    no_connector: '',
    no_connector_sms:
      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_connector_email:
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
@ -40,7 +40,6 @@ const sign_in_exp = {
    slogan_placeholder: 'Yaratıcılığınızı açığa çıkarın',
  },
  sign_up_and_sign_in: {
-    identifiers: 'Sign-up identifiers', // UNTRANSLATED
    identifiers_email: 'Email address', // UNTRANSLATED
    identifiers_phone: 'Phone number', // UNTRANSLATED
    identifiers_username: 'Username', // UNTRANSLATED
@ -141,7 +140,6 @@ const sign_in_exp = {
    },
  },
  setup_warning: {
-    no_connector: '',
    no_connector_sms:
      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_connector_email:
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
@ -38,7 +38,6 @@ const sign_in_exp = {
    slogan_placeholder: '释放你的创意',
  },
  sign_up_and_sign_in: {
-    identifiers: '注册标识',
    identifiers_email: '邮件地址',
    identifiers_phone: '手机号码',
    identifiers_username: '用户名',
@ -132,7 +131,6 @@ const sign_in_exp = {
    },
  },
  setup_warning: {
-    no_connector: '',
    no_connector_sms:
      '你尚未设置 SMS 短信连接器。在完成该配置前，你将无法登录。<a>{{link}}</a>连接器。',
    no_connector_email:
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -226,7 +226,6 @@ importers:
      react-syntax-highlighter: ^15.5.0
      recharts: ^2.1.13
      remark-gfm: ^3.0.1
-      snake-case: ^3.0.4
      stylelint: ^15.0.0
      swr: ^1.3.0
      typescript: ^4.9.4
@ -299,7 +298,6 @@ importers:
      react-syntax-highlighter: 15.5.0_react@18.2.0
      recharts: 2.1.13_v2m5e27vhdewzwhryxwfaorcca
      remark-gfm: 3.0.1
-      snake-case: 3.0.4
      stylelint: 15.0.0
      swr: 1.3.0_react@18.2.0
      typescript: 4.9.4
@ -6256,6 +6254,7 @@ packages:
    dependencies:
      no-case: 3.0.4
      tslib: 2.4.1
+    dev: false

  /dot-prop/5.3.0:
    resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
@ -10263,6 +10262,7 @@ packages:
    resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
    dependencies:
      tslib: 2.4.1
+    dev: false

  /lowercase-keys/1.0.1:
    resolution: {integrity: sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==}
@ -11013,6 +11013,7 @@ packages:
    dependencies:
      lower-case: 2.0.2
      tslib: 2.4.1
+    dev: false

  /node-addon-api/3.2.1:
    resolution: {integrity: sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==}
@ -13404,6 +13405,7 @@ packages:
    dependencies:
      dot-case: 3.0.4
      tslib: 2.4.0
+    dev: false

  /snakecase-keys/5.4.4:
    resolution: {integrity: sha512-YTywJG93yxwHLgrYLZjlC75moVEX04LZM4FHfihjHe1FCXm+QaLOFfSf535aXOAd0ArVQMWUAe8ZPm4VtWyXaA==}
@ -14245,6 +14247,7 @@ packages:

  /tslib/2.4.0:
    resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
+    dev: false

  /tslib/2.4.1:
    resolution: {integrity: sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==}