[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-chrome-extension/src/background/index.ts

@@ -1,5 +1,4 @@
-import { isDefined } from 'twenty-shared';
-
+import { isDefined } from 'twenty-shared/utils';
 // Open options page programmatically in a new tab.
 // chrome.runtime.onInstalled.addListener((details) => {
 //   if (details.reason === 'install') {

packages/twenty-chrome-extension/src/contentScript/createButton.ts

@@ -1,5 +1,4 @@
-import { isDefined } from 'twenty-shared';
-
+import { isDefined } from 'twenty-shared/utils';
 interface CustomDiv extends HTMLDivElement {
   onClickHandler: (newHandler: () => void) => void;
 }

packages/twenty-chrome-extension/src/contentScript/extractCompanyProfile.ts

@@ -1,10 +1,10 @@
-import { isDefined } from 'twenty-shared';
 import { createDefaultButton } from '~/contentScript/createButton';
 import changeSidePanelUrl from '~/contentScript/utils/changeSidepanelUrl';
 import extractCompanyLinkedinLink from '~/contentScript/utils/extractCompanyLinkedinLink';
 import extractDomain from '~/contentScript/utils/extractDomain';
 import { createCompany, fetchCompany } from '~/db/company.db';
 import { CompanyInput } from '~/db/types/company.types';
+import { isDefined } from 'twenty-shared/utils';
 
 export const checkIfCompanyExists = async () => {
   const { tab: activeTab } = await chrome.runtime.sendMessage({

packages/twenty-chrome-extension/src/contentScript/extractPersonProfile.ts

@@ -1,9 +1,9 @@
-import { isDefined } from 'twenty-shared';
 import { createDefaultButton } from '~/contentScript/createButton';
 import changeSidePanelUrl from '~/contentScript/utils/changeSidepanelUrl';
 import extractFirstAndLastName from '~/contentScript/utils/extractFirstAndLastName';
 import { createPerson, fetchPerson } from '~/db/person.db';
 import { PersonInput } from '~/db/types/person.types';
+import { isDefined } from 'twenty-shared/utils';
 
 export const checkIfPersonExists = async () => {
   const { tab: activeTab } = await chrome.runtime.sendMessage({

packages/twenty-chrome-extension/src/contentScript/index.ts

@@ -1,6 +1,6 @@
-import { isDefined } from 'twenty-shared';
 import { insertButtonForCompany } from '~/contentScript/extractCompanyProfile';
 import { insertButtonForPerson } from '~/contentScript/extractPersonProfile';
+import { isDefined } from 'twenty-shared/utils';
 
 // Inject buttons into the DOM when SPA is reloaded on the resource url.
 // e.g. reload the page when on https://www.linkedin.com/in/mabdullahabaid/

packages/twenty-chrome-extension/src/contentScript/insertSettingsButton.ts

@@ -1,5 +1,4 @@
-import { isDefined } from 'twenty-shared';
-
+import { isDefined } from 'twenty-shared/utils';
 const btn = document.getElementById('twenty-settings-btn');
 if (!isDefined(btn)) {
   const div = document.createElement('div');

packages/twenty-chrome-extension/src/contentScript/utils/changeSidepanelUrl.ts

@@ -1,5 +1,4 @@
-import { isDefined } from 'twenty-shared';
-
+import { isDefined } from 'twenty-shared/utils';
 const changeSidePanelUrl = async (url: string) => {
   if (isDefined(url)) {
     chrome.storage.local.set({ navigateSidepanel: 'sidepanel' });

packages/twenty-chrome-extension/src/contentScript/utils/extractCompanyLinkedinLink.ts

@@ -1,7 +1,4 @@
-// Extract "https://www.linkedin.com/company/twenty/" from any of the following urls, which the user can visit while on the company page.
-
-import { isDefined } from 'twenty-shared';
-
+import { isDefined } from 'twenty-shared/utils';
 // "https://www.linkedin.com/company/twenty/" "https://www.linkedin.com/company/twenty/about/" "https://www.linkedin.com/company/twenty/people/".
 const extractCompanyLinkedinLink = (activeTabUrl: string) => {
   // Regular expression to match the company ID

packages/twenty-chrome-extension/src/db/auth.db.ts

@@ -1,4 +1,3 @@
-import { isDefined } from 'twenty-shared';
 import {
   ExchangeAuthCodeInput,
   ExchangeAuthCodeResponse,
@@ -6,6 +5,7 @@ import {
 } from '~/db/types/auth.types';
 import { EXCHANGE_AUTHORIZATION_CODE } from '~/graphql/auth/mutations';
 import { callMutation } from '~/utils/requestDb';
+import { isDefined } from 'twenty-shared/utils';
 
 export const exchangeAuthorizationCode = async (
   exchangeAuthCodeInput: ExchangeAuthCodeInput,

packages/twenty-chrome-extension/src/db/company.db.ts

@@ -1,4 +1,3 @@
-import { isDefined } from 'twenty-shared';
 import {
   CompanyInput,
   CreateCompanyResponse,
@@ -9,6 +8,7 @@ import { CREATE_COMPANY } from '~/graphql/company/mutations';
 import { FIND_COMPANY } from '~/graphql/company/queries';
 
 import { callMutation, callQuery } from '../utils/requestDb';
+import { isDefined } from 'twenty-shared/utils';
 
 export const fetchCompany = async (
   companyfilerInput: CompanyFilterInput,

packages/twenty-chrome-extension/src/db/person.db.ts

@@ -1,4 +1,3 @@
-import { isDefined } from 'twenty-shared';
 import {
   CreatePersonResponse,
   FindPersonResponse,
@@ -9,6 +8,7 @@ import { CREATE_PERSON } from '~/graphql/person/mutations';
 import { FIND_PERSON } from '~/graphql/person/queries';
 
 import { callMutation, callQuery } from '../utils/requestDb';
+import { isDefined } from 'twenty-shared/utils';
 
 export const fetchPerson = async (
   personFilterData: PersonFilterInput,

packages/twenty-chrome-extension/src/db/token.db.ts

@@ -1,8 +1,7 @@
 import { ApolloClient, InMemoryCache } from '@apollo/client';
-
-import { isDefined } from 'twenty-shared';
 import { Tokens } from '~/db/types/auth.types';
 import { RENEW_TOKEN } from '~/graphql/auth/mutations';
+import { isDefined } from 'twenty-shared/utils';
 
 export const renewToken = async (
   appToken: string,

packages/twenty-chrome-extension/src/options/App.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
-
-import { isDefined } from 'twenty-shared';
 import Settings from '~/options/Settings';
 import Sidepanel from '~/options/Sidepanel';
+import { isDefined } from 'twenty-shared/utils';
 
 const App = () => {
   const [currentScreen, setCurrentScreen] = useState('');

packages/twenty-chrome-extension/src/options/Settings.tsx

@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react';
 
 import { MainButton } from '@/ui/input/button/MainButton';
 import { TextInput } from '@/ui/input/components/TextInput';
-import { isDefined } from 'twenty-shared';
 import { clearStore } from '~/utils/apolloClient';
+import { isDefined } from 'twenty-shared/utils';
 
 const StyledWrapper = styled.div`
   align-items: center;

packages/twenty-chrome-extension/src/options/Sidepanel.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { MainButton } from '@/ui/input/button/MainButton';
-import { isDefined } from 'twenty-shared';
+import { isDefined } from 'twenty-shared/utils';
 
 const StyledIframe = styled.iframe`
   display: block;

packages/twenty-chrome-extension/src/options/modules/ui/input/components/Toggle.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
-
-import { isDefined } from 'twenty-shared';
+import { isDefined } from 'twenty-shared/utils';
 
 export type ToggleSize = 'small' | 'medium';
 

packages/twenty-chrome-extension/src/utils/apolloClient.ts

@@ -1,8 +1,7 @@
 import { ApolloClient, from, HttpLink, InMemoryCache } from '@apollo/client';
 import { setContext } from '@apollo/client/link/context';
 import { onError } from '@apollo/client/link/error';
-
-import { isDefined } from 'twenty-shared';
+import { isDefined } from 'twenty-shared/utils';
 
 export const clearStore = () => {
   chrome.storage.local.remove([

packages/twenty-chrome-extension/src/utils/requestDb.ts

@@ -1,8 +1,7 @@
 import { OperationVariables } from '@apollo/client';
 import { DocumentNode } from 'graphql';
-
-import { isDefined } from 'twenty-shared';
 import getApolloClient from '~/utils/apolloClient';
+import { isDefined } from 'twenty-shared/utils';
 
 export const callQuery = async <T>(
   query: DocumentNode,