refactor: move createState to twenty-ui (#4716)

Split from https://github.com/twentyhq/twenty/pull/4518

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

packages/twenty-front/src/modules/activities/calendar/states/viewableCalendarEventIdState.ts

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

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-ui';
 
 export const emailThreadIdWhenEmailThreadWasClosedState = createState<
   string | null

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

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

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

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

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-ui';
 
 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-ui';
 
 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-ui';
 
 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-ui';
 
 export const isUpsertingActivityInDBState = createState<boolean>({
   key: 'isUpsertingActivityInDBState',

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

@@ -1,5 +1,6 @@
+import { createState } from 'twenty-ui';
+
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
-import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const targetableObjectsInDrawerState = createState<
   ActivityTargetableObject[]

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

@@ -1,5 +1,6 @@
+import { createState } from 'twenty-ui';
+
 import { ActivityForEditor } from '@/activities/types/ActivityForEditor';
-import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const temporaryActivityForEditorState =
   createState<ActivityForEditor | null>({

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

@@ -1,4 +1,4 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const viewableActivityIdState = createState<string | null>({
   key: 'activities/viewable-activity-id',

packages/twenty-front/src/modules/activities/tasks/states/currentUserTaskCountState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const currentUserDueTaskCountState = createState<number>({
   defaultValue: 0,

packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesForGroupState.ts

@@ -1,5 +1,6 @@
+import { createState } from 'twenty-ui';
+
 import { ActivityForActivityGroup } from '@/activities/timeline/utils/groupActivitiesByMonth';
-import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const timelineActivitiesForGroupState = createState<
   ActivityForActivityGroup[]

packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesNetworkingState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const timelineActivitiesNetworkingState = createState<{
   initialized: boolean;

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

@@ -1,4 +1,5 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
+
 import { User } from '~/generated/graphql';
 
 export type CurrentUser = Pick<

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

@@ -1,4 +1,5 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
+
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 
 export const currentWorkspaceMemberState = createState<Omit<

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

@@ -1,4 +1,5 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
+
 import { Workspace } from '~/generated/graphql';
 
 export type CurrentWorkspace = Pick<

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-ui';
 
 export const isVerifyPendingState = createState<boolean>({
   key: 'isVerifyPendingState',

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

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

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

@@ -1,4 +1,5 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
+
 import { Workspace } from '~/generated/graphql';
 
 export type Workspaces = Pick<Workspace, 'id' | 'logo' | 'displayName'>;

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

@@ -1,4 +1,5 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
+
 import { AuthProviders } from '~/generated/graphql';
 
 export const authProvidersState = createState<AuthProviders>({

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

@@ -1,4 +1,5 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
+
 import { Billing } from '~/generated/graphql';
 
 export const billingState = createState<Billing | null>({

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-ui';
 
 export const isDebugModeState = createState<boolean>({
   key: 'isDebugModeState',

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

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

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

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

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

@@ -1,4 +1,5 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
+
 import { Sentry } from '~/generated/graphql';
 
 export const sentryConfigState = createState<Sentry | null>({

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

@@ -1,4 +1,5 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
+
 import { Support } from '~/generated/graphql';
 
 export const supportChatState = createState<Support>({

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

@@ -1,4 +1,5 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
+
 import { Telemetry } from '~/generated/graphql';
 
 export const telemetryState = createState<Telemetry>({

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

@@ -1,4 +1,4 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { Command, CommandType } from '../types/Command';
 

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-ui';
 
 export const commandMenuSearchState = createState<string>({
   key: 'command-menu/commandMenuSearchState',

packages/twenty-front/src/modules/favorites/states/favoritesState.ts

@@ -1,5 +1,6 @@
+import { createState } from 'twenty-ui';
+
 import { Favorite } from '@/favorites/types/Favorite';
-import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const favoritesState = createState<Favorite[]>({
   key: 'favoritesState',

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-ui';
 
 export const currentMobileNavigationDrawerState = createState<
   'main' | 'settings'

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

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

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

@@ -1,6 +1,7 @@
+import { createState } from 'twenty-ui';
+
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
-import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const recordIndexFieldDefinitionsState = createState<
   ColumnDefinition<FieldMetadata>[]

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

@@ -1,5 +1,6 @@
+import { createState } from 'twenty-ui';
+
 import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
-import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const recordIndexFiltersState = createState<Filter[]>({
   key: 'recordIndexFiltersState',

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-ui';
 
 export const recordIndexIsCompactModeActiveState = createState<boolean>({
   key: 'recordIndexIsCompactModeActiveState',

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-ui';
 
 export const recordIndexKanbanFieldMetadataIdState = createState<string | null>(
   {

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

@@ -1,5 +1,6 @@
+import { createState } from 'twenty-ui';
+
 import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
-import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const recordIndexSortsState = createState<Sort[]>({
   key: 'recordIndexSortsState',

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

@@ -1,4 +1,5 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
+
 import { ViewType } from '@/views/types/ViewType';
 
 export const recordIndexViewTypeState = createState<ViewType | undefined>({

packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts

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

packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportState.ts

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

packages/twenty-front/src/modules/ui/display/icon/states/iconsState.ts

@@ -1,5 +1,6 @@
+import { createState } from 'twenty-ui';
+
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const iconsState = createState<Record<string, IconComponent>>({
   key: 'iconsState',

packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts

@@ -1,7 +1,7 @@
+import { createState } from 'twenty-ui';
 import { IconApps } from 'twenty-ui';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-import { createState } from '@/ui/utilities/state/utils/createState';
 
 type IconPickerState = {
   Icon: IconComponent;

packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerExpandedState.ts

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

packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerOpenState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isRightDrawerOpenState = createState<boolean>({
   key: 'ui/layout/is-right-drawer-open',

packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerCloseEventsState.ts

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

packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts

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

packages/twenty-front/src/modules/ui/navigation/action-bar/states/actionBarEntriesState.ts

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

packages/twenty-front/src/modules/ui/navigation/action-bar/states/actionBarIsOpenState.ts

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

packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuEntriesState.ts

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

packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuIsOpenState.ts

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

packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuPositionState.ts

@@ -1,5 +1,6 @@
+import { createState } from 'twenty-ui';
+
 import { PositionType } from '@/ui/navigation/context-menu/types/PositionType';
-import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const contextMenuPositionState = createState<PositionType>({
   key: 'contextMenuPositionState',

packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts

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

packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export type StepsState = {
   activeStep: number;

packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { INITIAL_HOTKEYS_SCOPE } from '../../constants/InitialHotkeysScope';
 import { HotkeyScope } from '../../types/HotkeyScope';

packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts

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

packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts

@@ -1,6 +1,5 @@
 import { Keys } from 'react-hotkeys-hook/dist/types';
-
+import { createState } from 'twenty-ui';
-import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const pendingHotkeyState = createState<Keys | null>({
   key: 'pendingHotkeyState',

packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts

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

packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts

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

packages/twenty-front/src/modules/ui/utilities/pointer-event/states/lockedListenerIdState.ts

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

packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollLeftState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const scrollLeftState = createState<number>({
   key: 'scroll/scrollLeftState',

packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollTopState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const scrollTopState = createState<number>({
   key: 'scroll/scrollTopState',

packages/twenty-ui/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './display';
 export * from './theme';
+export * from './utilities';

packages/twenty-ui/src/utilities/index.ts

@@ -0,0 +1 @@
+export * from './state/utils/createState';

packages/twenty-ui/vite.config.ts

@@ -41,7 +41,7 @@ export default defineConfig({
     },
     rollupOptions: {
       // External packages that should not be bundled into your library.
-      external: [],
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
     },
   },
 });