feat(i18n): static type on i18n (#2225)

packages/component/src/components/changeLog/index.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, NewIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
 import { useState } from 'react';
@@ -20,7 +20,7 @@ type ChangeLogProps = {
 export const ChangeLog = (props: ChangeLogProps) => {
   const { onCloseWhatsNew } = props;
   const [isClose, setIsClose] = useState(false);
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   const handleClose = () => {
     setIsClose(true);
     onCloseWhatsNew();
@@ -47,7 +47,7 @@ export const ChangeLog = (props: ChangeLogProps) => {
           }}
         >
           <NewIcon className={iconStyle} />
-          {t("Discover what's new!")}
+          {t["Discover what's new!"]()}
         </div>
         <IconButton
           className={iconButtonStyle}

packages/component/src/components/contact-modal/index.tsx

@@ -4,7 +4,7 @@ import {
   ModalCloseButton,
   ModalWrapper,
 } from '@affine/component';
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
 import {
   DiscordIcon,
@@ -64,17 +64,17 @@ export const ContactModal = ({
   onClose,
   logoSrc,
 }: ContactModalProps): JSX.Element => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   const topLinkList = [
     {
       icon: <LogoIcon />,
-      title: t('Official Website'),
+      title: t['Official Website'](),
       subTitle: 'AFFiNE.pro',
       link: 'https://affine.pro',
     },
     {
       icon: <DocIcon />,
-      title: t('Check Our Docs'),
+      title: t['Check Our Docs'](),
       subTitle: 'Open Source',
       link: 'https://community.affine.pro',
     },
@@ -109,7 +109,7 @@ export const ContactModal = ({
           })}
         </FlexWrapper>
         <StyledSubTitle>
-          {t('Get in touch! Join our communities.')}
+          {t['Get in touch! Join our communities.']()}
         </StyledSubTitle>
         <FlexWrapper justifyContent="center">
           {linkList.map(({ icon, title, link }) => {

packages/component/src/components/share-menu/Export.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ContentParser } from '@blocksuite/blocks/content-parser';
 import { ExportToHtmlIcon, ExportToMarkdownIcon } from '@blocksuite/icons';
 import type { FC } from 'react';
@@ -16,11 +16,11 @@ import type { ShareMenuProps } from './ShareMenu';
 
 export const Export: FC<ShareMenuProps> = props => {
   const contentParserRef = useRef<ContentParser>();
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   return (
     <div className={menuItemStyle}>
       <div className={descriptionStyle}>
-        {t('Export Shared Pages Description')}
+        {t['Export Shared Pages Description']()}
       </div>
       <div className={actionsStyle}>
         <Button
@@ -33,7 +33,7 @@ export const Export: FC<ShareMenuProps> = props => {
           }}
         >
           <ExportToHtmlIcon className={svgStyle} />
-          {t('Export to HTML')}
+          {t['Export to HTML']()}
         </Button>
         <Button
           className={exportButtonStyle}
@@ -45,7 +45,7 @@ export const Export: FC<ShareMenuProps> = props => {
           }}
         >
           <ExportToMarkdownIcon className={svgStyle} />
-          {t('Export to Markdown')}
+          {t['Export to Markdown']()}
         </Button>
       </div>
     </div>

packages/component/src/components/share-menu/SharePage.tsx

@@ -1,5 +1,6 @@
 import { prefixUrl } from '@affine/env';
-import { Trans, useTranslation } from '@affine/i18n';
+import { Trans } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { LocalWorkspace } from '@affine/workspace/type';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { useBlockSuiteWorkspacePageIsPublic } from '@toeverything/hooks/use-block-suite-workspace-page-is-public';
@@ -23,17 +24,17 @@ import {
 } from './styles';
 
 export const LocalSharePage: FC<ShareMenuProps> = props => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   return (
     <div className={menuItemStyle}>
-      <div className={descriptionStyle}>{t('Shared Pages Description')}</div>
+      <div className={descriptionStyle}>{t['Shared Pages Description']()}</div>
       <StyledButton
         data-testid="share-menu-enable-affine-cloud-button"
         onClick={() => {
           props.onEnableAffineCloud(props.workspace as LocalWorkspace);
         }}
       >
-        {t('Enable AFFiNE Cloud')}
+        {t['Enable AFFiNE Cloud']()}
       </StyledButton>
     </div>
   );
@@ -44,7 +45,7 @@ export const AffineSharePage: FC<ShareMenuProps> = props => {
     props.currentPage
   );
   const [showDisable, setShowDisable] = useState(false);
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   const sharingUrl = useMemo(() => {
     return `${prefixUrl}public-workspace/${props.workspace.id}/${props.currentPage.id}`;
   }, [props.workspace.id, props.currentPage.id]);
@@ -53,13 +54,13 @@ export const AffineSharePage: FC<ShareMenuProps> = props => {
   }, [setIsPublic]);
   const onClickCopyLink = useCallback(() => {
     navigator.clipboard.writeText(sharingUrl);
-    toast(t('Copied link to clipboard'));
+    toast(t['Copied link to clipboard']());
   }, [sharingUrl, t]);
 
   return (
     <div className={menuItemStyle}>
       <div className={descriptionStyle}>
-        {t('Create Shared Link Description')}
+        {t['Create Shared Link Description']()}
       </div>
       <div className={inputButtonRowStyle}>
         <StyledInput
@@ -72,7 +73,7 @@ export const AffineSharePage: FC<ShareMenuProps> = props => {
             data-testid="affine-share-create-link"
             onClick={onClickCreateLink}
           >
-            {t('Create')}
+            {t['Create']()}
           </StyledButton>
         )}
         {isPublic && (
@@ -80,7 +81,7 @@ export const AffineSharePage: FC<ShareMenuProps> = props => {
             data-testid="affine-share-copy-link"
             onClick={onClickCopyLink}
           >
-            {t('Copy Link')}
+            {t['Copy Link']()}
           </StyledButton>
         )}
       </div>
@@ -100,7 +101,7 @@ export const AffineSharePage: FC<ShareMenuProps> = props => {
       {isPublic && (
         <>
           <StyledDisableButton onClick={() => setShowDisable(true)}>
-            {t('Disable Public Link')}
+            {t['Disable Public Link']()}
           </StyledDisableButton>
           <PublicLinkDisableModal
             page={props.currentPage}

packages/component/src/components/share-menu/ShareWorkspace.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { AffineWorkspace, LocalWorkspace } from '@affine/workspace/type';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import type { FC } from 'react';
@@ -8,11 +8,11 @@ import type { ShareMenuProps } from './ShareMenu';
 import { StyledButton } from './styles';
 
 const ShareLocalWorkspace: FC<ShareMenuProps<LocalWorkspace>> = props => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   return (
     <div className={menuItemStyle}>
       <div className={descriptionStyle}>
-        {t('Share Menu Public Workspace Description1')}
+        {t['Share Menu Public Workspace Description1']()}
       </div>
       <StyledButton
         data-testid="share-menu-enable-affine-cloud-button"
@@ -20,7 +20,7 @@ const ShareLocalWorkspace: FC<ShareMenuProps<LocalWorkspace>> = props => {
           props.onOpenWorkspaceSettings(props.workspace);
         }}
       >
-        {t('Open Workspace Settings')}
+        {t['Open Workspace Settings']()}
       </StyledButton>
     </div>
   );
@@ -28,13 +28,13 @@ const ShareLocalWorkspace: FC<ShareMenuProps<LocalWorkspace>> = props => {
 
 const ShareAffineWorkspace: FC<ShareMenuProps<AffineWorkspace>> = props => {
   const isPublicWorkspace = props.workspace.public;
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   return (
     <div className={menuItemStyle}>
       <div className={descriptionStyle}>
         {isPublicWorkspace
-          ? t('Share Menu Public Workspace Description2')
-          : t('Share Menu Public Workspace Description1')}
+          ? t['Share Menu Public Workspace Description2']()
+          : t['Share Menu Public Workspace Description1']()}
       </div>
       <StyledButton
         data-testid="share-menu-publish-to-web-button"
@@ -42,7 +42,7 @@ const ShareAffineWorkspace: FC<ShareMenuProps<AffineWorkspace>> = props => {
           props.onOpenWorkspaceSettings(props.workspace);
         }}
       >
-        {t('Open Workspace Settings')}
+        {t['Open Workspace Settings']()}
       </StyledButton>
     </div>
   );

packages/component/src/components/share-menu/disable-public-link/index.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { Page } from '@blocksuite/store';
 import { useBlockSuiteWorkspacePageIsPublic } from '@toeverything/hooks/use-block-suite-workspace-page-is-public';
 import { useCallback } from 'react';
@@ -24,7 +24,7 @@ export const PublicLinkDisableModal = ({
   open,
   onClose,
 }: PublicLinkDisableProps) => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   const [, setIsPublic] = useBlockSuiteWorkspacePageIsPublic(page);
   const handleDisable = useCallback(() => {
     setIsPublic(false);
@@ -37,20 +37,20 @@ export const PublicLinkDisableModal = ({
     <Modal open={open} onClose={onClose}>
       <StyledModalWrapper>
         <ModalCloseButton onClick={onClose} top={12} right={12} />
-        <StyledModalHeader>{t('Disable Public Link ?')}</StyledModalHeader>
+        <StyledModalHeader>{t['Disable Public Link ?']()}</StyledModalHeader>
 
         <StyledTextContent>
-          {t('Disable Public Link Description')}
+          {t['Disable Public Link Description']()}
         </StyledTextContent>
 
         <StyledButtonContent>
-          <StyledButton onClick={onClose}>{t('Cancel')}</StyledButton>
+          <StyledButton onClick={onClose}>{t['Cancel']()}</StyledButton>
           <StyledDangerButton
             data-testid="disable-public-link-confirm-button"
             onClick={handleDisable}
             style={{ marginLeft: '24px' }}
           >
-            {t('Disable')}
+            {t['Disable']()}
           </StyledDangerButton>
         </StyledButtonContent>
       </StyledModalWrapper>

packages/component/src/components/workspace-card/index.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { PermissionType } from '@affine/workspace/affine/api';
 import type { AffineWorkspace, LocalWorkspace } from '@affine/workspace/type';
 import { WorkspaceFlavour } from '@affine/workspace/type';
@@ -46,7 +46,7 @@ const PublishIcon = () => {
 };
 
 const WorkspaceType: FC<WorkspaceTypeProps> = ({ workspace }) => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   let isOwner = true;
   if (workspace.flavour === WorkspaceFlavour.AFFINE) {
     isOwner = workspace.permission === PermissionType.Owner;
@@ -56,22 +56,22 @@ const WorkspaceType: FC<WorkspaceTypeProps> = ({ workspace }) => {
 
   if (workspace.flavour === WorkspaceFlavour.LOCAL) {
     return (
-      <p title={t('Local Workspace')}>
+      <p title={t['Local Workspace']()}>
         <LocalWorkspaceIcon />
-        <span>{t('Local Workspace')}</span>
+        <span>{t['Local Workspace']()}</span>
       </p>
     );
   }
 
   return isOwner ? (
-    <p title={t('Cloud Workspace')}>
+    <p title={t['Cloud Workspace']()}>
       <CloudWorkspaceIcon />
-      <span>{t('Cloud Workspace')}</span>
+      <span>{t['Cloud Workspace']()}</span>
     </p>
   ) : (
-    <p title={t('Joined Workspace')}>
+    <p title={t['Joined Workspace']()}>
       <JoinedWorkspaceIcon />
-      <span>{t('Joined Workspace')}</span>
+      <span>{t['Joined Workspace']()}</span>
     </p>
   );
 };
@@ -89,7 +89,7 @@ export const WorkspaceCard: FC<WorkspaceCardProps> = ({
   onSettingClick,
   currentWorkspaceId,
 }) => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   const [name] = useBlockSuiteWorkspaceName(workspace.blockSuiteWorkspace);
 
   return (
@@ -106,15 +106,15 @@ export const WorkspaceCard: FC<WorkspaceCardProps> = ({
         <StyleWorkspaceTitle>{name}</StyleWorkspaceTitle>
         <WorkspaceType workspace={workspace} />
         {workspace.flavour === WorkspaceFlavour.LOCAL && (
-          <p title={t('Available Offline')}>
+          <p title={t['Available Offline']()}>
             <LocalDataIcon />
-            <span>{t('Available Offline')}</span>
+            <span>{t['Available Offline']()}</span>
           </p>
         )}
         {workspace.flavour === WorkspaceFlavour.AFFINE && workspace.public && (
-          <p title={t('Published to Web')}>
+          <p title={t['Published to Web']()}>
             <PublishIcon />
-            <span>{t('Published to Web')}</span>
+            <span>{t['Published to Web']()}</span>
           </p>
         )}
       </StyleWorkspaceInfo>

packages/component/src/ui/confirm/Confirm.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
 import { Button } from '../button';
 import type { ModalProps } from '../modal';
@@ -38,7 +38,7 @@ export const Confirm = ({
   cancelButtonTestId = '',
   confirmButtonTestId = '',
 }: ConfirmProps) => {
-  const { t } = useTranslation();
+  const t = useAFFiNEI18N();
   return (
     <Modal open={open} disablePortal={false}>
       <StyledModalWrapper>
@@ -60,7 +60,7 @@ export const Confirm = ({
               style={{ marginRight: '24px' }}
               data-testid={cancelButtonTestId}
             >
-              {cancelText === 'Cancel' ? t('Cancel') : cancelText}
+              {cancelText === 'Cancel' ? t['Cancel']() : cancelText}
             </Button>
             <Button
               type={confirmType}
@@ -102,7 +102,7 @@ export const Confirm = ({
               }}
               data-testid={cancelButtonTestId}
             >
-              {cancelText === 'Cancel' ? t('Cancel') : cancelText}
+              {cancelText === 'Cancel' ? t['Cancel']() : cancelText}
             </Button>
           </StyledColumnButtonWrapper>
         )}