Translation followup (#9735)

Address PR comments and more progress on translation
2025-01-19 13:29:19 +01:00
parent 052331685f
commit 056cb7c66d
97 changed files with 3981 additions and 402 deletions
--- a/packages/twenty-front/src/modules/ui/feedback/dialog-manager/scopes/DialogManagerScope.tsx
+++ b/packages/twenty-front/src/modules/ui/feedback/dialog-manager/scopes/DialogManagerScope.tsx
@ -13,9 +13,7 @@ export const DialogManagerScope = ({
 }: DialogManagerScopeProps) => {
  return (
    <DialogManagerScopeInternalContext.Provider
-      value={{
-        scopeId: dialogManagerScopeId,
-      }}
+      value={{ scopeId: dialogManagerScopeId }}
    >
      {children}
    </DialogManagerScopeInternalContext.Provider>
--- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx
+++ b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx
@ -1,5 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
 import { isUndefined } from '@sniptt/guards';
 import { ComponentPropsWithoutRef, ReactNode, useMemo } from 'react';
 import {
@ -122,6 +123,7 @@ export const SnackBar = ({
  variant = SnackBarVariant.Default,
 }: SnackBarProps) => {
  const theme = useTheme();
+  const { t } = useLingui();
  const { animation: progressAnimation, value: progressValue } =
    useProgressAnimation({
      autoPlay: isUndefined(overrideProgressValue),
@ -193,10 +195,10 @@ export const SnackBar = ({
        <StyledIcon>{icon}</StyledIcon>
        <StyledMessage>{message}</StyledMessage>
        <StyledActions>
-          {!!onCancel && <LightButton title="Cancel" onClick={onCancel} />}
+          {!!onCancel && <LightButton title={t`Cancel`} onClick={onCancel} />}

          {!!onClose && (
-            <LightIconButton title="Close" Icon={IconX} onClick={onClose} />
+            <LightIconButton title={t`Close`} Icon={IconX} onClick={onClose} />
          )}
        </StyledActions>
      </StyledHeader>
--- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/stories/SnackBar.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/stories/SnackBar.stories.tsx
@ -8,6 +8,7 @@ import {
 } from '@ui/testing';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';

+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { SnackBar, SnackBarVariant } from '../SnackBar';

 const meta: Meta<typeof SnackBar> = {
@ -33,7 +34,7 @@ export default meta;
 type Story = StoryObj<typeof SnackBar>;

 export const Default: Story = {
-  decorators: [ComponentDecorator],
+  decorators: [ComponentDecorator, I18nFrontDecorator],
  parameters: {
    chromatic: { disableSnapshot: true },
  },
@ -43,7 +44,7 @@ export const Catalog: CatalogStory<Story, typeof SnackBar> = {
  args: {
    onCancel: fn(),
  },
-  decorators: [CatalogDecorator],
+  decorators: [CatalogDecorator, I18nFrontDecorator],
  parameters: {
    catalog: {
      dimensions: [
--- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope.tsx
+++ b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope.tsx
@ -13,9 +13,7 @@ export const SnackBarProviderScope = ({
 }: SnackBarProviderScopeProps) => {
  return (
    <SnackBarManagerScopeInternalContext.Provider
-      value={{
-        scopeId: snackBarManagerScopeId,
-      }}
+      value={{ scopeId: snackBarManagerScopeId }}
    >
      {children}
    </SnackBarManagerScopeInternalContext.Provider>
--- a/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx
@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useLingui } from '@lingui/react/macro';
+import { Trans, useLingui } from '@lingui/react/macro';

 import { isNonEmptyString } from '@sniptt/guards';
 import React from 'react';
@ -175,7 +175,7 @@ export const ImageInput = ({
          />
        </StyledButtonContainer>
        <StyledText>
-          We support your square PNGs, JPEGs and GIFs under 10MB
+          <Trans>We support your square PNGs, JPEGs and GIFs under 10MB</Trans>
        </StyledText>
        {errorMessage && <StyledErrorText>{errorMessage}</StyledErrorText>}
      </StyledContent>
--- a/packages/twenty-front/src/modules/ui/input/components/stories/ImageInput.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/stories/ImageInput.stories.tsx
@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from 'twenty-ui';

-import { i18nFrontDecorator } from '~/testing/decorators/i18nFrontDecorator';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { workspaceLogoUrl } from '~/testing/mock-data/users';

 import { ImageInput } from '../ImageInput';
@ -9,7 +9,7 @@ import { ImageInput } from '../ImageInput';
 const meta: Meta<typeof ImageInput> = {
  title: 'UI/Input/ImageInput/ImageInput',
  component: ImageInput,
-  decorators: [ComponentDecorator, i18nFrontDecorator],
+  decorators: [ComponentDecorator, I18nFrontDecorator],
 };

 export default meta;
--- a/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
@ -15,6 +15,7 @@ import { useDebouncedCallback } from 'use-debounce';
 import { TextInput } from '@/ui/input/components/TextInput';

 import { Modal, ModalVariants } from '@/ui/layout/modal/components/Modal';
+import { useLingui } from '@lingui/react/macro';

 export type ConfirmationModalProps = {
  isOpen: boolean;
@ -69,13 +70,14 @@ export const ConfirmationModal = ({
  subtitle,
  setIsOpen,
  onConfirmClick,
-  deleteButtonText = 'Delete',
+  deleteButtonText = `Delete`,
  confirmationValue,
  confirmationPlaceholder,
  confirmButtonAccent = 'danger',
  AdditionalButtons,
  modalVariant = 'primary',
 }: ConfirmationModalProps) => {
+  const { t } = useLingui();
  const [inputConfirmationValue, setInputConfirmationValue] =
    useState<string>('');
  const [isValidValue, setIsValidValue] = useState(!confirmationValue);
@ -146,7 +148,7 @@ export const ConfirmationModal = ({
                setIsOpen(false);
              }}
              variant="secondary"
-              title="Cancel"
+              title={t`Cancel`}
              fullWidth
            />

--- a/packages/twenty-front/src/modules/ui/layout/modal/components/stories/ConfirmationModal.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/stories/ConfirmationModal.stories.tsx
@ -1,12 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from 'twenty-ui';

+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { ConfirmationModal } from '../ConfirmationModal';

 const meta: Meta<typeof ConfirmationModal> = {
  title: 'UI/Layout/Modal/ConfirmationModal',
  component: ConfirmationModal,
-  decorators: [ComponentDecorator],
+  decorators: [ComponentDecorator, I18nFrontDecorator],
 };
 export default meta;

--- a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
@ -98,9 +98,7 @@ export const DefaultLayout = () => {
                  2
                : 0,
          }}
-          transition={{
-            duration: theme.animation.duration.normal,
-          }}
+          transition={{ duration: theme.animation.duration.normal }}
        >
          {showAuthModal ? (
            <StyledAppNavigationDrawerMock />
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
@ -83,9 +83,7 @@ export const RightDrawer = () => {
      isRightDrawerMinimized={isRightDrawerMinimized}
      animate={targetVariantForAnimation}
      variants={RIGHT_DRAWER_ANIMATION_VARIANTS}
-      transition={{
-        duration: theme.animation.duration.normal,
-      }}
+      transition={{ duration: theme.animation.duration.normal }}
      onAnimationComplete={handleAnimationComplete}
    >
      <StyledRightDrawer>
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
@ -108,9 +108,7 @@ export const ShowPageAddButton = ({
            />
          </DropdownMenuItemsContainer>
        }
-        dropdownHotkeyScope={{
-          scope: PageHotkeyScope.ShowPage,
-        }}
+        dropdownHotkeyScope={{ scope: PageHotkeyScope.ShowPage }}
      />
    </StyledContainer>
  );
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
@ -101,9 +101,7 @@ export const NavigationDrawer = ({
      className={className}
      initial={false}
      animate={navigationDrawerAnimate}
-      transition={{
-        duration: theme.animation.duration.normal,
-      }}
+      transition={{ duration: theme.animation.duration.normal }}
      isSettings={isSettingsDrawer}
    >
      <StyledContainer
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx
@ -43,9 +43,7 @@ export const NavigationDrawerAnimatedCollapseWrapper = ({
    <StyledAnimatedContainer
      initial={false}
      animate={animate}
-      transition={{
-        duration: theme.animation.duration.normal,
-      }}
+      transition={{ duration: theme.animation.duration.normal }}
    >
      {children}
    </StyledAnimatedContainer>
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerInput.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerInput.tsx
@ -117,9 +117,7 @@ export const NavigationDrawerInput = ({
      <StyledItemElementsContainer>
        {Icon && (
          <Icon
-            style={{
-              minWidth: theme.icon.size.md,
-            }}
+            style={{ minWidth: theme.icon.size.md }}
            size={theme.icon.size.md}
            stroke={theme.icon.stroke.md}
            color="currentColor"