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

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>