Add Twenty Shared package to centralize utilities and fix profile pic…

…ture issue (#8601).

package.json

@@ -365,6 +365,7 @@
       "packages/twenty-zapier",
       "packages/twenty-website",
       "packages/twenty-e2e-testing",
+      "packages/twenty-shared",
       "tools/eslint-rules"
     ]
   }

packages/twenty-emails/src/emails/send-invite-link.email.tsx

@@ -10,7 +10,7 @@ import { MainText } from 'src/components/MainText';
 import { Title } from 'src/components/Title';
 import { WhatIsTwenty } from 'src/components/WhatIsTwenty';
 import { capitalize } from 'src/utils/capitalize';
-import { getImageAbsoluteURI } from 'src/utils/getImageAbsoluteURI';
+import { getImageAbsoluteURI } from 'twenty-shared';
 
 type SendInviteLinkEmailProps = {
   link: string;
@@ -28,7 +28,10 @@ export const SendInviteLinkEmail = ({
   sender,
   serverUrl,
 }: SendInviteLinkEmailProps) => {
-  const workspaceLogo = getImageAbsoluteURI(workspace.logo, serverUrl);
+  const workspaceLogo = getImageAbsoluteURI(
+    workspace.logo ?? '',
+    serverUrl ?? '',
+  );
   return (
     <BaseEmail width={333}>
       <Title value="Join your team on Twenty" />

packages/twenty-emails/tsconfig.json

@@ -6,7 +6,10 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "types": ["vite/client"],
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "twenty-shared": ["packages/twenty-shared/dist"]
+    }
   },
   "files": [],
   "include": [],

packages/twenty-front/src/modules/auth/components/Logo.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
+import { getImageAbsoluteURI } from 'twenty-shared';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 
 type LogoProps = {
   primaryLogo?: string | null;
@@ -48,8 +49,12 @@ export const Logo = (props: LogoProps) => {
 
   const primaryLogoUrl = getImageAbsoluteURI(
     props.primaryLogo ?? defaultPrimaryLogoUrl,
+    REACT_APP_SERVER_BASE_URL,
+  );
+  const secondaryLogoUrl = getImageAbsoluteURI(
+    props.secondaryLogo ?? '',
+    REACT_APP_SERVER_BASE_URL,
   );
-  const secondaryLogoUrl = getImageAbsoluteURI(props.secondaryLogo);
 
   return (
     <StyledContainer>

packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx

@@ -8,7 +8,8 @@ import {
   NavigationDrawerProps,
 } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
 import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
+import { getImageAbsoluteURI } from 'twenty-shared';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 
 import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
 
@@ -43,7 +44,10 @@ export const AppNavigationDrawer = ({
     : {
         logo:
           (currentWorkspace?.logo &&
-            getImageAbsoluteURI(currentWorkspace.logo)) ??
+            getImageAbsoluteURI(
+              currentWorkspace.logo,
+              REACT_APP_SERVER_BASE_URL,
+            )) ??
           undefined,
         title: currentWorkspace?.displayName ?? undefined,
         children: <MainNavigationDrawerItems />,

packages/twenty-front/src/modules/object-metadata/utils/getAvatarUrl.ts

@@ -2,9 +2,9 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { getLogoUrlFromDomainName } from '~/utils';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
+import { getImageAbsoluteURI } from 'twenty-shared';
 import { isDefined } from '~/utils/isDefined';
-
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { Company } from '@/companies/types/Company';
 import { getCompanyDomainName } from '@/object-metadata/utils/getCompanyDomainName';
 import { getImageIdentifierFieldValue } from './getImageIdentifierFieldValue';
@@ -25,7 +25,9 @@ export const getAvatarUrl = (
   }
 
   if (objectNameSingular === CoreObjectNameSingular.Person) {
-    return getImageAbsoluteURI(record.avatarUrl) ?? '';
+    return (
+      getImageAbsoluteURI(record.avatarUrl, REACT_APP_SERVER_BASE_URL) ?? ''
+    );
   }
 
   const imageIdentifierFieldValue = getImageIdentifierFieldValue(

packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx

@@ -2,8 +2,9 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import React, { useMemo } from 'react';
 import { Button, IconPhotoUp, IconTrash, IconUpload, IconX } from 'twenty-ui';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
+import { getImageAbsoluteURI } from 'twenty-shared';
 import { isDefined } from '~/utils/isDefined';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -109,7 +110,10 @@ export const ImageInput = ({
     hiddenFileInput.current?.click();
   };
 
-  const pictureURI = useMemo(() => getImageAbsoluteURI(picture), [picture]);
+  const pictureURI = useMemo(
+    () => getImageAbsoluteURI(picture ?? '', REACT_APP_SERVER_BASE_URL),
+    [picture],
+  );
 
   return (
     <StyledContainer className={className}>

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx

@@ -14,9 +14,10 @@ import styled from '@emotion/styled';
 import { useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { IconChevronDown, MenuItemSelectAvatar } from 'twenty-ui';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
+import { getImageAbsoluteURI } from 'twenty-shared';
 import { Link } from 'react-router-dom';
 import { useUrlManager } from '@/url-manager/hooks/useUrlManager';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 
 const StyledLink = styled(Link)`
   text-decoration: none;
@@ -104,9 +105,12 @@ export const MultiWorkspaceDropdownButton = ({
           isNavigationDrawerExpanded={isNavigationDrawerExpanded}
         >
           <StyledLogo
-            logo={getImageAbsoluteURI(
-              currentWorkspace?.logo ?? DEFAULT_WORKSPACE_LOGO,
-            )}
+            logo={
+              getImageAbsoluteURI(
+                currentWorkspace?.logo ?? '',
+                REACT_APP_SERVER_BASE_URL,
+              ) ?? ''
+            }
           />
           <NavigationDrawerAnimatedCollapseWrapper>
             <StyledLabel>{currentWorkspace?.displayName ?? ''}</StyledLabel>
@@ -130,9 +134,12 @@ export const MultiWorkspaceDropdownButton = ({
                 text={workspace.displayName ?? ''}
                 avatar={
                   <StyledLogo
-                    logo={getImageAbsoluteURI(
-                      workspace.logo ?? DEFAULT_WORKSPACE_LOGO,
-                    )}
+                    logo={
+                      getImageAbsoluteURI(
+                        workspace.logo ?? DEFAULT_WORKSPACE_LOGO,
+                        REACT_APP_SERVER_BASE_URL,
+                      ) ?? ''
+                    }
                   />
                 }
                 selected={currentWorkspace?.id === workspace.id}

packages/twenty-front/src/pages/settings/admin-panel/SettingsAdminFeatureFlags.tsx

@@ -17,7 +17,6 @@ import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import {
   Button,
-  getImageAbsoluteURI,
   H1Title,
   H1TitleFontColor,
   H2Title,
@@ -26,6 +25,8 @@ import {
   Section,
   Toggle,
 } from 'twenty-ui';
+import { getImageAbsoluteURI } from 'twenty-shared';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 
 const StyledLinkContainer = styled.div`
   margin-right: ${({ theme }) => theme.spacing(2)};
@@ -107,7 +108,8 @@ export const SettingsAdminFeatureFlags = () => {
       title: workspace.name,
       logo:
         getImageAbsoluteURI(
-          workspace.logo === null ? DEFAULT_WORKSPACE_LOGO : workspace.logo,
+          workspace.logo ?? DEFAULT_WORKSPACE_LOGO,
+          REACT_APP_SERVER_BASE_URL,
         ) ?? '',
     })) ?? [];
 

packages/twenty-front/src/pages/settings/serverless-functions/__stories__/SettingsServerlessFunctionDetail.stories.tsx

@@ -7,7 +7,8 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
+import { getImageAbsoluteURI } from 'twenty-shared';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { sleep } from '~/utils/sleep';
 
 const SOURCE_CODE_FULL_PATH =
@@ -43,9 +44,15 @@ const meta: Meta<PageDecoratorArgs> = {
             },
           });
         }),
-        http.get(getImageAbsoluteURI(SOURCE_CODE_FULL_PATH) || '', () => {
-          return HttpResponse.text('export const handler = () => {}');
-        }),
+        http.get(
+          getImageAbsoluteURI(
+            SOURCE_CODE_FULL_PATH,
+            REACT_APP_SERVER_BASE_URL,
+          ) || '',
+          () => {
+            return HttpResponse.text('export const handler = () => {}');
+          },
+        ),
       ],
     },
   },

packages/twenty-front/tsconfig.json

@@ -24,7 +24,8 @@
       "@/*": ["packages/twenty-front/src/modules/*"],
       "~/*": ["packages/twenty-front/src/*"],
       "twenty-ui": ["packages/twenty-ui/src/index.ts"],
-      "@ui/*": ["packages/twenty-ui/src/*"]
+      "@ui/*": ["packages/twenty-ui/src/*"],
+      "twenty-shared": ["packages/twenty-shared/src"]
     }
   },
   "files": [],

packages/twenty-shared/.eslintrc.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  extends: ['../../.eslintrc.cjs', '../../.eslintrc.react.cjs'],
+  ignorePatterns: ['!**/*'],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      parserOptions: {
+        project: ['packages/twenty-shared/tsconfig.{json,*.json}'],
+      },
+      rules: {
+        '@nx/dependency-checks': 'error',
+      },
+    },
+  ],
+};

packages/twenty-shared/jest.config.ts

@@ -0,0 +1,37 @@
+import { JestConfigWithTsJest, pathsToModuleNameMapper } from 'ts-jest';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const tsConfig = require('./tsconfig.json');
+process.env.TZ = 'GMT';
+
+const jestConfig: JestConfigWithTsJest = {
+  silent: true,
+  displayName: 'twenty-shared',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['./setupTests.ts'],
+  testEnvironment: 'node',
+  transformIgnorePatterns: ['../../node_modules/'],
+  transform: {
+    '^.+\\.(ts|js)$': '@swc/jest',
+  },
+  moduleNameMapper: {
+    ...pathsToModuleNameMapper(tsConfig.compilerOptions.paths, { prefix: '<rootDir>/' }),
+  },
+  moduleFileExtensions: ['ts', 'js'],
+  extensionsToTreatAsEsm: ['.ts'],
+  coverageThreshold: {
+    global: {
+      statements: 60,
+      lines: 60,
+      functions: 50,
+    },
+  },
+  collectCoverageFrom: ['<rootDir>/src/**/*.ts'],
+  coveragePathIgnorePatterns: [
+    'types/*',
+    'constants/*',
+  ],
+  coverageDirectory: './coverage',
+};
+
+export default jestConfig;

packages/twenty-shared/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "twenty-shared",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "npx vite build"
+  }
+}