[MONOREPO] Twenty-ui as a package

.prettierrc

@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "endOfLine": "auto"
-}
+  "endOfLine": "auto",
+  "plugins": ["prettier-plugin-organize-imports"]
+}

package.json

@@ -325,6 +325,7 @@
     "nx": "18.3.3",
     "playwright": "^1.46.0",
     "prettier": "^3.1.1",
+    "prettier-plugin-organize-imports": "^4.1.0",
     "raw-loader": "^4.0.2",
     "rimraf": "^5.0.5",
     "source-map-support": "^0.5.20",

packages/twenty-front/package.json

@@ -51,7 +51,8 @@
     "file-saver": "^2.0.5",
     "recoil-sync": "^0.2.0",
     "transliteration": "^2.3.5",
-    "twenty-shared": "workspace:*"
+    "twenty-shared": "workspace:*",
+    "twenty-ui": "workspace:*"
   },
   "devDependencies": {
     "@types/file-saver": "^2"

packages/twenty-front/src/modules/activities/copilot/right-drawer/states/copilotQueryState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const copilotQueryState = createState({
   key: 'activities/copilot-query',

packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const emailThreadIdWhenEmailThreadWasClosedState = createState<
   string | null

packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';
 

packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const canCreateActivityState = createState<boolean>({
   key: 'canCreateActivityState',

packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const isActivityInCreateModeState = createState<boolean>({
   key: 'isActivityInCreateModeState',

packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const isUpsertingActivityInDBState = createState<boolean>({
   key: 'isUpsertingActivityInDBState',

packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 import { UserExists } from '~/generated/graphql';
 
 export const availableSSOIdentityProvidersForAuthState = createState<

packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts

@@ -1,7 +1,7 @@
 import { BillingCheckoutSession } from '@/auth/types/billingCheckoutSession.type';
 import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/billing/constants/BillingCheckoutSessionDefaultValue';
-import { createState } from '@ui/utilities/state/utils/createState';
 import { syncEffect } from 'recoil-sync';
+import { createState } from "twenty-shared";
 
 export const billingCheckoutSessionState = createState<BillingCheckoutSession>({
   key: 'billingCheckoutSessionState',

packages/twenty-front/src/modules/auth/states/currentUserState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 import { User } from '~/generated/graphql';
 

packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 

packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersStates.ts

@@ -1,5 +1,5 @@
 import { CurrentWorkspaceMember } from '@/auth/states/currentWorkspaceMemberState';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const currentWorkspaceMembersState = createState<
   CurrentWorkspaceMember[]

packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 import { Workspace } from '~/generated/graphql';
 

packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const isCurrentUserLoadedState = createState<boolean>({
   key: 'isCurrentUserLoadedState',

packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const isVerifyPendingState = createState<boolean>({
   key: 'isVerifyPendingState',

packages/twenty-front/src/modules/auth/states/previousUrlState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const previousUrlState = createState<string>({
   key: 'previousUrlState',

packages/twenty-front/src/modules/auth/states/signInUpModeState.ts

@@ -1,5 +1,5 @@
 import { SignInUpMode } from '@/auth/types/signInUpMode';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const signInUpModeState = createState<SignInUpMode>({
   key: 'signInUpModeState',

packages/twenty-front/src/modules/auth/states/signInUpStepState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export enum SignInUpStep {
   Init = 'init',

packages/twenty-front/src/modules/auth/states/tokenPairState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 import { AuthTokenPair } from '~/generated/graphql';
 import { cookieStorageEffect } from '~/utils/recoil-effects';

packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 import { PublicWorkspaceDataOutput } from '~/generated/graphql';
 
 export const workspacePublicDataState =

packages/twenty-front/src/modules/auth/states/workspaces.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 import { Workspace } from '~/generated/graphql';
 

packages/twenty-front/src/modules/captcha/states/captchaTokenState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const captchaTokenState = createState<string | undefined>({
   key: 'captchaTokenState',

packages/twenty-front/src/modules/captcha/states/isCaptchaScriptLoadedState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const isCaptchaScriptLoadedState = createState<boolean>({
   key: 'isCaptchaScriptLoadedState',

packages/twenty-front/src/modules/captcha/states/isRequestingCaptchaTokenState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const isRequestingCaptchaTokenState = createState<boolean>({
   key: 'isRequestingCaptchaTokenState',

packages/twenty-front/src/modules/chrome-extension-sidecar/states/isLoadingTokensFromExtensionState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const isLoadingTokensFromExtensionState = createState<boolean | null>({
   key: 'isLoadingTokensFromExtensionState',

packages/twenty-front/src/modules/client-config/states/apiConfigState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 import { ApiConfig } from '~/generated/graphql';
 

packages/twenty-front/src/modules/client-config/states/authProvidersState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 import { AuthProviders } from '~/generated/graphql';
 

packages/twenty-front/src/modules/client-config/states/billingState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 import { Billing } from '~/generated/graphql';
 

packages/twenty-front/src/modules/client-config/states/canManageFeatureFlagsState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const canManageFeatureFlagsState = createState<boolean>({
   key: 'canManageFeatureFlagsState',

packages/twenty-front/src/modules/client-config/states/captchaState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 import { Captcha } from '~/generated/graphql';
 

packages/twenty-front/src/modules/client-config/states/chromeExtensionIdState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const chromeExtensionIdState = createState<string | null | undefined>({
   key: 'chromeExtensionIdState',

packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 type ClientConfigApiStatus = {
   isLoaded: boolean;

packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const isAnalyticsEnabledState = createState<boolean>({
   key: 'isAnalyticsEnabled',

packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const isDebugModeState = createState<boolean>({
   key: 'isDebugModeState',

packages/twenty-front/src/modules/client-config/states/isDeveloperDefaultSignInPrefilledState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const isDeveloperDefaultSignInPrefilledState = createState<boolean>({
   key: 'isDeveloperDefaultSignInPrefilledState',

packages/twenty-front/src/modules/client-config/states/isEmailVerificationRequiredState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isEmailVerificationRequiredState = createState<boolean>({
   key: 'isEmailVerificationRequired',

packages/twenty-front/src/modules/client-config/states/isMultiWorkspaceEnabledState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const isMultiWorkspaceEnabledState = createState<boolean>({
   key: 'isMultiWorkspaceEnabled',

packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 import { Sentry } from '~/generated/graphql';
 

packages/twenty-front/src/modules/client-config/states/supportChatState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 import { Support } from '~/generated/graphql';
 

packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts

@@ -1,5 +1,5 @@
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const commandMenuPageState = createState<CommandMenuPages>({
   key: 'command-menu/commandMenuPageState',

packages/twenty-front/src/modules/command-menu/states/commandMenuPageTitle.ts

@@ -1,5 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent, createState } from 'twenty-ui';
 
 export const commandMenuPageInfoState = createState<{
   title: string | undefined;

packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const commandMenuSearchState = createState<string>({
   key: 'command-menu/commandMenuSearchState',

packages/twenty-front/src/modules/context-store/states/mainContextStoreComponentInstanceId.ts

@@ -1,5 +1,5 @@
 import { CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE } from '@/context-store/constants/ContextStoreInstanceIdDefaultValue';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const mainContextStoreComponentInstanceIdState = createState<string>({
   key: 'mainContextStoreComponentInstanceIdState',

packages/twenty-front/src/modules/domain-manager/states/domainConfigurationState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 import { ClientConfig } from '~/generated/graphql';
 
 export const domainConfigurationState = createState<

packages/twenty-front/src/modules/domain-manager/states/lastAuthenticatedWorkspaceDomainState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 import { cookieStorageEffect } from '~/utils/recoil-effects';
 
 export const lastAuthenticatedWorkspaceDomainState = createState<

packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberOrphanFavorites.tsx

@@ -7,10 +7,9 @@ import { isLocationMatchingFavorite } from '@/favorites/utils/isLocationMatching
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import styled from '@emotion/styled';
-import { LightIconButton } from '@ui/input/button/components/LightIconButton';
 import { useContext } from 'react';
 import { useLocation } from 'react-router-dom';
-import { IconHeartOff } from 'twenty-ui';
+import { IconHeartOff, LightIconButton } from 'twenty-ui';
 
 const StyledEmptyContainer = styled.div`
   width: 100%;

packages/twenty-front/src/modules/localization/states/dateTimeFormatState.ts

@@ -1,7 +1,7 @@
 import { DateFormat } from '@/localization/constants/DateFormat';
 import { TimeFormat } from '@/localization/constants/TimeFormat';
 import { detectTimeZone } from '@/localization/utils/detectTimeZone';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const dateTimeFormatState = createState<{
   timeZone: string;

packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const currentMobileNavigationDrawerState = createState<
   'main' | 'settings'

packages/twenty-front/src/modules/object-metadata/states/isAppWaitingForFreshObjectMetadataState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const isAppWaitingForFreshObjectMetadataState = createState<boolean>({
   key: 'isAppWaitingForFreshObjectMetadataState',

packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts

@@ -1,6 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { createState } from "twenty-shared";
 
 export const objectMetadataItemsState = createState<ObjectMetadataItem[]>({
   key: 'objectMetadataItemsState',

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx

@@ -5,7 +5,7 @@ import {
   IconSettings,
   MenuItem,
   UndecoratedLink,
-} from 'twenty-ui';
+} from 'twenty-ui/index';
 
 import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular';
 

packages/twenty-front/src/modules/object-record/record-board/record-board-column/states/aggregateDropdownState.ts

@@ -1,5 +1,5 @@
 import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 type AggregateOperation = {
   operation: AGGREGATE_OPERATIONS | null;

packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const lastShowPageRecordIdState = createState<string | null>({
   key: 'lastShowPageRecordIdState',

packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';

packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFiltersState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
 

packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const recordIndexIsCompactModeActiveState = createState<boolean>({
   key: 'recordIndexIsCompactModeActiveState',

packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanAggregateOperationState.ts

@@ -1,5 +1,5 @@
 import { ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export type KanbanAggregateOperation = {
   operation?: ExtendedAggregateOperations | null;

packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 export const recordIndexKanbanFieldMetadataIdState = createState<string | null>(
   {

packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from "twenty-shared";
 
 import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';