[REFACTOR] twenty-shared multi barrel and CJS/ESM build with preconstruct (#11083)

# Introduction

In this PR we've migrated `twenty-shared` from a `vite` app
[libary-mode](https://vite.dev/guide/build#library-mode) to a
[preconstruct](https://preconstruct.tools/) "atomic" application ( in
the future would like to introduce preconstruct to handle of all our
atomic dependencies such as `twenty-emails` `twenty-ui` etc it will be
integrated at the monorepo's root directly, would be to invasive in the
first, starting incremental via `twenty-shared`)

For more information regarding the motivations please refer to nor:
- https://github.com/twentyhq/core-team-issues/issues/587
-
https://github.com/twentyhq/core-team-issues/issues/281#issuecomment-2630949682

close https://github.com/twentyhq/core-team-issues/issues/589
close https://github.com/twentyhq/core-team-issues/issues/590

## How to test
In order to ease the review this PR will ship all the codegen at the
very end, the actual meaning full diff is `+2,411 −114`
In order to migrate existing dependent packages to `twenty-shared` multi
barrel new arch you need to run in local:
```sh
yarn tsx packages/twenty-shared/scripts/migrateFromSingleToMultiBarrelImport.ts && \
npx nx run-many -t lint --fix -p twenty-front twenty-ui twenty-server twenty-emails twenty-shared twenty-zapier
```
Note that `migrateFromSingleToMultiBarrelImport` is idempotent, it's atm
included in the PR but should not be merged. ( such as codegen will be
added before merging this script will be removed )

## Misc
- related opened issue preconstruct
https://github.com/preconstruct/preconstruct/issues/617

## Closed related PR
- https://github.com/twentyhq/twenty/pull/11028
- https://github.com/twentyhq/twenty/pull/10993
- https://github.com/twentyhq/twenty/pull/10960

## Upcoming enhancement: ( in others dedicated PRs )
- 1/ refactor generate barrel to export atomic module instead of `*`
- 2/ generate barrel own package with several files and tests
- 3/ Migration twenty-ui the same way
- 4/ Use `preconstruct` at monorepo global level

## Conclusion
As always any suggestions are welcomed !

packages/twenty-ui/src/display/avatar-chip/components/AvatarChipLeftComponent.tsx

@@ -3,8 +3,8 @@ import styled from '@emotion/styled';
 import { Avatar } from '@ui/display/avatar/components/Avatar';
 import { AvatarType } from '@ui/display/avatar/types/AvatarType';
 import { IconComponent } from '@ui/display/icon/types/IconComponent';
-import { isDefined } from 'twenty-shared';
 import { Nullable } from 'vitest';
+import { isDefined } from 'twenty-shared/utils';
 
 const StyledInvertedIconContainer = styled.div<{ backgroundColor: string }>`
   display: flex;

packages/twenty-ui/src/display/avatar/components/Avatar.tsx

@@ -11,7 +11,7 @@ import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { ThemeContext } from '@ui/theme';
 import { Nullable, stringToHslColor } from '@ui/utilities';
 import { REACT_APP_SERVER_BASE_URL } from '@ui/utilities/config';
-import { getImageAbsoluteURI } from 'twenty-shared';
+import { getImageAbsoluteURI } from 'twenty-shared/utils';
 
 const StyledAvatar = styled.div<{
   size: AvatarSize;

packages/twenty-ui/src/display/tag/components/Tag.tsx

@@ -9,7 +9,7 @@ import {
   ThemeContext,
   ThemeType,
 } from '@ui/theme';
-import { isDefined } from 'twenty-shared';
+import { isDefined } from 'twenty-shared/utils';
 
 const spacing5 = THEME_COMMON.spacing(5);
 const spacing2 = THEME_COMMON.spacing(2);

packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx

@@ -3,9 +3,8 @@ import { useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { THEME_COMMON } from '@ui/theme';
-
-import { isDefined } from 'twenty-shared';
 import { AppTooltip, TooltipDelay } from './AppTooltip';
+import { isDefined } from 'twenty-shared/utils';
 
 const spacing4 = THEME_COMMON.spacing(4);
 

packages/twenty-ui/src/feedback/progress-bar/hooks/useProgressAnimation.ts

@@ -5,8 +5,7 @@ import {
   ValueAnimationTransition,
 } from 'framer-motion';
 import { useCallback, useEffect, useState } from 'react';
-
-import { isDefined } from 'twenty-shared';
+import { isDefined } from 'twenty-shared/utils';
 
 export const useProgressAnimation = ({
   autoPlay = true,

packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx

@@ -3,7 +3,7 @@ import { baseTransitionTiming } from '@ui/input/button/components/Button/constan
 import { IconComponent } from '@ui/display';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { isDefined } from 'twenty-shared';
+import { isDefined } from 'twenty-shared/utils';
 
 const StyledIcon = styled.div<{
   isLoading: boolean;

packages/twenty-ui/src/input/button/components/ButtonGroup.tsx

@@ -1,9 +1,8 @@
 import styled from '@emotion/styled';
 import React, { ReactNode } from 'react';
 
-import { isDefined } from 'twenty-shared';
-
 import { ButtonPosition, ButtonProps } from './Button/Button';
+import { isDefined } from 'twenty-shared/utils';
 
 const StyledButtonGroupContainer = styled.div`
   border-radius: ${({ theme }) => theme.border.radius.md};

packages/twenty-ui/src/input/button/components/FloatingButtonGroup.tsx

@@ -1,9 +1,8 @@
 import styled from '@emotion/styled';
 import React from 'react';
 
-import { isDefined } from 'twenty-shared';
-
 import { FloatingButtonPosition, FloatingButtonProps } from './FloatingButton';
+import { isDefined } from 'twenty-shared/utils';
 
 const StyledFloatingButtonGroupContainer = styled.div`
   backdrop-filter: blur(20px);

packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx

@@ -5,7 +5,7 @@ import { Loader } from '@ui/feedback/loader/components/Loader';
 import { codeEditorTheme } from '@ui/input';
 import { editor } from 'monaco-editor';
 import { useState } from 'react';
-import { isDefined } from 'twenty-shared';
+import { isDefined } from 'twenty-shared/utils';
 
 type CodeEditorProps = Omit<EditorProps, 'onChange'> & {
   onChange?: (value: string) => void;

packages/twenty-ui/src/json-visualizer/components/JsonNestedNode.tsx

@@ -9,8 +9,8 @@ import { useJsonTreeContextOrThrow } from '@ui/json-visualizer/hooks/useJsonTree
 import { ANIMATION } from '@ui/theme';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useState } from 'react';
-import { isDefined } from 'twenty-shared';
 import { JsonValue } from 'type-fest';
+import { isDefined } from 'twenty-shared/utils';
 
 const StyledContainer = styled.li`
   display: grid;

packages/twenty-ui/src/json-visualizer/hooks/useJsonTreeContextOrThrow.tsx

@@ -1,6 +1,6 @@
 import { JsonTreeContext } from '@ui/json-visualizer/contexts/JsonTreeContext';
 import { useContext } from 'react';
-import { isDefined } from 'twenty-shared';
+import { isDefined } from 'twenty-shared/utils';
 
 export const useJsonTreeContextOrThrow = () => {
   const value = useContext(JsonTreeContext);

packages/twenty-ui/src/layout/animated-expandable-container/components/AnimatedExpandableContainer.tsx

@@ -8,7 +8,7 @@ import { AnimationSize } from '@ui/layout/animated-expandable-container/types/An
 import { getExpandableAnimationConfig } from '@ui/layout/animated-expandable-container/utils/getExpandableAnimationConfig';
 import { AnimatePresence, motion } from 'framer-motion';
 import { ReactNode, useRef, useState } from 'react';
-import { isDefined } from 'twenty-shared';
+import { isDefined } from 'twenty-shared/utils';
 
 const StyledMotionContainer = styled(motion.div)<{
   containAnimation: boolean;

packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx

@@ -8,12 +8,12 @@ import {
 import { LightIconButtonGroup } from '@ui/input';
 import { MenuItemIconButton } from '@ui/navigation/menu-item/components/MenuItem';
 import { MouseEvent } from 'react';
-import { isDefined } from 'twenty-shared';
 import {
   StyledHoverableMenuItemBase,
   StyledMenuItemLeftContent,
 } from '../internals/components/StyledMenuItemBase';
 import { MenuItemAccent } from '../types/MenuItemAccent';
+import { isDefined } from 'twenty-shared/utils';
 
 export type MenuItemAvatarProps = {
   accent?: MenuItemAccent;

packages/twenty-ui/src/testing/utils/getCanvasElementForDropdownTesting.ts

@@ -1,5 +1,4 @@
-import { isDefined } from 'twenty-shared';
-
+import { isDefined } from 'twenty-shared/utils';
 export const getCanvasElementForDropdownTesting = () => {
   const canvasElement = document.getElementsByClassName(
     'sb-show-main',

packages/twenty-ui/src/theme/utils/getNextThemeColor.ts

@@ -1,5 +1,5 @@
 import { MAIN_COLOR_NAMES, ThemeColor } from '@ui/theme';
-import { isDefined } from 'twenty-shared';
+import { isDefined } from 'twenty-shared/utils';
 
 export const getNextThemeColor = (currentColor?: ThemeColor): ThemeColor => {
   if (!isDefined(currentColor)) {

packages/twenty-ui/src/utilities/utils/getDisplayValueByUrlType.ts

@@ -1,5 +1,5 @@
 import { LinkType } from '@ui/navigation/link';
-import { isDefined } from 'twenty-shared';
+import { isDefined } from 'twenty-shared/utils';
 
 type getUrlDisplayValueByUrlTypeProps = {
   type: LinkType;