feat: enforce @/ alias for imports and fix all relative parent imports (#16787)

## Summary This PR enforces the use of `@/` alias for imports instead of relative parent imports (`../`). ## Changes ### ESLint Configuration - Added `no-restricted-imports` pattern in `eslint.config.react.mjs` to block `../*` imports with the message "Relative parent imports are not allowed. Use @/ alias instead." - Removed the non-working `import/no-relative-parent-imports` rule (doesn't work properly in ESLint flat config) ### VS Code Settings - Added `javascript.preferences.importModuleSpecifier: non-relative` to `.vscode/settings.json` (TypeScript setting was already there) ### Code Fixes - Fixed **941 relative parent imports** across **706 files** in `packages/twenty-front` - All `../` imports converted to use `@/` alias ## Why - Consistent import style across the codebase - Easier to move files without breaking imports - Better IDE support for auto-imports - Clearer understanding of where imports come from
2025-12-23 22:57:51 +01:00
parent 781b96e80b
commit b27a97f2c5
725 changed files with 1114 additions and 1041 deletions
@@ -4,7 +4,7 @@ import { useRecoilValue } from 'recoil';
 import {
  COMMAND_MENU_WIDTH_VAR,
  commandMenuWidthState,
-} from '../states/commandMenuWidthState';
+} from '@/command-menu/states/commandMenuWidthState';

 export const CommandMenuWidthEffect = () => {
  const commandMenuWidth = useRecoilValue(commandMenuWidthState);
@@ -32,7 +32,7 @@ import { HttpResponse, graphql } from 'msw';
 import { IconDotsVertical } from 'twenty-ui/display';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { JestContextStoreSetter } from '~/testing/jest/JestContextStoreSetter';
-import { type CommandMenu } from '../CommandMenu';
+import { type CommandMenu } from '@/command-menu/components/CommandMenu';

 const openTimeout = 50;

@@ -3,7 +3,7 @@ import { renderHook } from '@testing-library/react';
 import { act } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { RecoilRoot, useRecoilValue } from 'recoil';
-import { useCommandMenuOnItemClick } from '../useCommandMenuOnItemClick';
+import { useCommandMenuOnItemClick } from '@/command-menu/hooks/useCommandMenuOnItemClick';

 const Wrapper = ({ children }: { children: React.ReactNode }) => (
  <RecoilRoot>
@@ -3,7 +3,7 @@ import { ActionScope } from '@/action-menu/actions/types/ActionScope';
 import { ActionType } from '@/action-menu/actions/types/ActionType';
 import { renderHook } from '@testing-library/react';
 import { IconPlus } from 'twenty-ui/display';
-import { useFilterActionsWithCommandMenuSearch } from '../useFilterActionsWithCommandMenuSearch';
+import { useFilterActionsWithCommandMenuSearch } from '@/command-menu/hooks/useFilterActionsWithCommandMenuSearch';

 const MockComponent = <div>Mock Component</div>;

@@ -20,7 +20,7 @@ import { act } from 'react';
 import { IconBolt, IconSettingsAutomation, useIcons } from 'twenty-ui/display';
 import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
 import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockObjectMetadataItems';
-import { useWorkflowCommandMenu } from '../useWorkflowCommandMenu';
+import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';

 jest.mock('uuid', () => ({
  v4: jest.fn().mockReturnValue('mocked-uuid'),
@@ -13,7 +13,7 @@ import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks
 import { t } from '@lingui/core/macro';
 import { useCallback } from 'react';
 import { IconDotsVertical } from 'twenty-ui/display';
-import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
+import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';

 export const useCommandMenu = () => {
  const { navigateCommandMenu } = useNavigateCommandMenu();
@@ -10,7 +10,7 @@ import {
 import { MessageParticipantRole } from 'twenty-shared/types';
 import { generateEmptyJestRecordNode } from '~/testing/jest/generateEmptyJestRecordNode';
 import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';
-import { useEmailThreadInCommandMenu } from '../useEmailThreadInCommandMenu';
+import { useEmailThreadInCommandMenu } from '@/command-menu/pages/message-thread/hooks/useEmailThreadInCommandMenu';

 const mocks = [
  {
@@ -14,7 +14,7 @@ import {
  GraphOrderBy,
  GraphType,
 } from '~/generated-metadata/graphql';
-import { useChartSettingsValues } from '../useChartSettingsValues';
+import { useChartSettingsValues } from '@/command-menu/pages/page-layout/hooks/useChartSettingsValues';

 const mockObjectMetadataItem: ObjectMetadataItem = {
  id: 'obj-1',
@@ -5,7 +5,7 @@ import {
  GraphOrderBy,
  type PieChartConfiguration,
 } from '~/generated/graphql';
-import { buildChartGroupByFieldConfigUpdate } from '../buildChartGroupByFieldConfigUpdate';
+import { buildChartGroupByFieldConfigUpdate } from '@/command-menu/pages/page-layout/utils/buildChartGroupByFieldConfigUpdate';

 describe('buildChartGroupByFieldConfigUpdate', () => {
  it('sets default orderBy and dateGranularity for primary axis', () => {
@@ -19,7 +19,7 @@ import { SORT_BY_GROUP_BY_FIELD_SETTING } from '@/command-menu/pages/page-layout
 import { STACKED_BARS_SETTING } from '@/command-menu/pages/page-layout/constants/settings/StackedBarsSetting';
 import { IconAxisX, IconAxisY } from 'twenty-ui/display';
 import { GraphType } from '~/generated-metadata/graphql';
-import { getBarChartSettings } from '../getBarChartSettings';
+import { getBarChartSettings } from '@/command-menu/pages/page-layout/utils/getBarChartSettings';

 describe('getBarChartSettings', () => {
  describe('Vertical bar chart', () => {
@@ -2,7 +2,7 @@ import {
  type AggregateChartConfiguration,
  type BarChartConfiguration,
 } from '~/generated/graphql';
-import { isAggregateChartConfiguration } from '../isAggregateChartConfiguration';
+import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration';

 describe('isAggregateChartConfiguration', () => {
  it('should return true for AggregateChartConfiguration', () => {
@@ -2,7 +2,7 @@ import {
  type BarChartConfiguration,
  type LineChartConfiguration,
 } from '~/generated/graphql';
-import { isBarChartConfiguration } from '../isBarChartConfiguration';
+import { isBarChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarChartConfiguration';

 describe('isBarChartConfiguration', () => {
  it('should return true for BarChartConfiguration', () => {
@@ -3,7 +3,7 @@ import {
  type LineChartConfiguration,
  type PieChartConfiguration,
 } from '~/generated/graphql';
-import { isBarOrLineChartConfiguration } from '../isBarOrLineChartConfiguration';
+import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration';

 describe('isBarOrLineChartConfiguration', () => {
  it('should return true for BarChartConfiguration', () => {
@@ -7,7 +7,7 @@ import {
  type PieChartConfiguration,
  type StandaloneRichTextConfiguration,
 } from '~/generated/graphql';
-import { isChartConfiguration } from '../isChartConfiguration';
+import { isChartConfiguration } from '@/command-menu/pages/page-layout/utils/isChartConfiguration';

 describe('isChartConfiguration', () => {
  it('should return true for BarChartConfiguration', () => {
@@ -1,6 +1,6 @@
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { FieldMetadataType } from 'twenty-shared/types';
-import { isFieldOrRelationNestedFieldDateKind } from '../isFieldOrNestedFieldDateKind';
+import { isFieldOrRelationNestedFieldDateKind } from '@/command-menu/pages/page-layout/utils/isFieldOrNestedFieldDateKind';

 describe('isFieldOrNestedFieldDateKind', () => {
  it('returns false when fieldId is null', () => {
@@ -2,7 +2,7 @@ import {
  type BarChartConfiguration,
  type GaugeChartConfiguration,
 } from '~/generated/graphql';
-import { isGaugeChartConfiguration } from '../isGaugeChartConfiguration';
+import { isGaugeChartConfiguration } from '@/command-menu/pages/page-layout/utils/isGaugeChartConfiguration';

 describe('isGaugeChartConfiguration', () => {
  it('should return true for GaugeChartConfiguration', () => {
@@ -2,7 +2,7 @@ import {
  type BarChartConfiguration,
  type IframeConfiguration,
 } from '~/generated/graphql';
-import { isIframeConfiguration } from '../isIframeConfiguration';
+import { isIframeConfiguration } from '@/command-menu/pages/page-layout/utils/isIframeConfiguration';

 describe('isIframeConfiguration', () => {
  it('should return true for IframeConfiguration', () => {
@@ -2,7 +2,7 @@ import {
  type BarChartConfiguration,
  type LineChartConfiguration,
 } from '~/generated/graphql';
-import { isLineChartConfiguration } from '../isLineChartConfiguration';
+import { isLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isLineChartConfiguration';

 describe('isLineChartConfiguration', () => {
  it('should return true for LineChartConfiguration', () => {
@@ -2,7 +2,7 @@ import {
  type BarChartConfiguration,
  type PieChartConfiguration,
 } from '~/generated/graphql';
-import { isPieChartConfiguration } from '../isPieChartConfiguration';
+import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration';

 describe('isPieChartConfiguration', () => {
  it('should return true for PieChartConfiguration', () => {
@@ -5,7 +5,7 @@ import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataI
 import { msg } from '@lingui/core/macro';
 import { FieldMetadataType } from 'twenty-shared/types';
 import { IconChartBar } from 'twenty-ui/display';
-import { shouldHideChartSetting } from '../shouldHideChartSetting';
+import { shouldHideChartSetting } from '@/command-menu/pages/page-layout/utils/shouldHideChartSetting';

 describe('shouldHideChartSetting', () => {
  const mockItemWithoutDependencies: ChartSettingsItem = {
@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { lazy, Suspense } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { useRecoilValue } from 'recoil';
-import { viewableRichTextComponentState } from '../states/viewableRichTextComponentState';
+import { viewableRichTextComponentState } from '@/command-menu/pages/rich-text-page/states/viewableRichTextComponentState';

 const ActivityRichTextEditor = lazy(() =>
  import('@/activities/components/ActivityRichTextEditor').then((module) => ({