TWNTY-3825 - ESLint rule: const naming

.eslintrc.js

@@ -1,7 +1,13 @@
 module.exports = {
   root: true,
   extends: ['plugin:prettier/recommended'],
-  plugins: ['@nx', 'prefer-arrow', 'simple-import-sort', 'unused-imports'],
+  plugins: [
+    '@nx',
+    'prefer-arrow',
+    'simple-import-sort',
+    'unused-imports',
+    'unicorn',
+  ],
   rules: {
     'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
     'no-console': ['warn', { allow: ['group', 'groupCollapsed', 'groupEnd'] }],
@@ -95,5 +101,26 @@ module.exports = {
       },
       rules: {},
     },
+    {
+      files: ['**/constants/*.ts', '**/*.constants.ts'],
+      rules: {
+        '@typescript-eslint/naming-convention': [
+          'error',
+          {
+            selector: 'variable',
+            format: ['UPPER_CASE'],
+          },
+        ],
+        'unicorn/filename-case': [
+          'warn',
+          {
+            cases: {
+              pascalCase: true,
+            },
+          },
+        ],
+        '@nx/workspace-max-consts-per-file': ['error', { max: 1 }],
+      },
+    },
   ],
 };

package.json

@@ -257,6 +257,7 @@
     "eslint-plugin-react-refresh": "^0.4.4",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-unicorn": "^51.0.1",
     "eslint-plugin-unused-imports": "^3.0.0",
     "http-server": "^14.1.1",
     "jest": "29.7.0",

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/background.ts

@@ -1,4 +1,3 @@
-/* eslint-disable twenty/no-hardcoded-colors */
 import DarkNoise from '../assets/dark-noise.jpg';
 import LightNoise from '../assets/light-noise.png';
 

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/colors.ts

@@ -1,4 +1,3 @@
-/* eslint-disable twenty/no-hardcoded-colors */
 import hexRgb from 'hex-rgb';
 
 export const grayScale = {

packages/twenty-front/.storybook/preview.ts

@@ -3,7 +3,9 @@ import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 import { Preview, ReactRenderer } from '@storybook/react';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
 
-import { darkTheme, lightTheme } from '../src/modules/ui/theme/constants/theme';
+import { THEME_DARK } from '@/ui/theme/constants/ThemeDark';
+import { THEME_LIGHT } from '@/ui/theme/constants/ThemeLight';
+
 import { RootDecorator } from '../src/testing/decorators/RootDecorator';
 import { mockedUserJWT } from '../src/testing/mock-data/jwt';
 
@@ -29,8 +31,8 @@ const preview: Preview = {
   decorators: [
     withThemeFromJSXProvider<ReactRenderer>({
       themes: {
-        light: lightTheme,
-        dark: darkTheme,
+        light: THEME_LIGHT,
+        dark: THEME_DARK,
       },
       defaultTheme: 'light',
       Provider: ThemeProvider,

packages/twenty-front/src/effect-components/CommandMenuEffect.tsx

@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
 import { useSetRecoilState } from 'recoil';
 
-import { commandMenuCommands } from '@/command-menu/constants/commandMenuCommands';
+import { COMMAND_MENU_COMMANDS } from '@/command-menu/constants/CommandMenuCommands';
 import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
 
 export const CommandMenuEffect = () => {
   const setCommands = useSetRecoilState(commandMenuCommandsState);
 
-  const commands = commandMenuCommands;
+  const commands = COMMAND_MENU_COMMANDS;
   useEffect(() => {
     setCommands(commands);
   }, [commands, setCommands]);

packages/twenty-front/src/index.tsx

@@ -19,7 +19,7 @@ import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogMa
 import { SnackBarProvider } from '@/ui/feedback/snack-bar-manager/components/SnackBarProvider';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
-import { ThemeType } from '@/ui/theme/constants/theme';
+import { ThemeType } from '@/ui/theme/constants/ThemeLight';
 import { UserProvider } from '@/users/components/UserProvider';
 import { PageChangeEffect } from '~/effect-components/PageChangeEffect';
 

packages/twenty-front/src/modules/activities/emails/components/EmailThreadFetchMoreLoader.tsx

@@ -1,7 +1,7 @@
 import { useInView } from 'react-intersection-observer';
 import styled from '@emotion/styled';
 
-import { grayScale } from '@/ui/theme/constants/colors';
+import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
 
 type EmailThreadFetchMoreLoaderProps = {
   loading: boolean;
@@ -11,7 +11,7 @@ type EmailThreadFetchMoreLoaderProps = {
 const StyledText = styled.div`
   align-items: center;
   box-shadow: none;
-  color: ${grayScale.gray40};
+  color: ${GRAY_SCALE.gray40};
   display: flex;
   height: 32px;
   margin-left: ${({ theme }) => theme.spacing(8)};

packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { grayScale } from '@/ui/theme/constants/colors';
+import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
 import { Avatar } from '@/users/components/Avatar';
 import { TimelineThread } from '~/generated/graphql';
 import { formatToHumanReadableDate } from '~/utils';
@@ -129,8 +129,8 @@ export const EmailThreadPreview = ({
               avatarUrl={finalAvatarUrl}
               placeholder={finalDisplayedName}
               type="rounded"
-              color={isCountIcon ? grayScale.gray50 : undefined}
-              backgroundColor={isCountIcon ? grayScale.gray10 : undefined}
+              color={isCountIcon ? GRAY_SCALE.gray50 : undefined}
+              backgroundColor={isCountIcon ? GRAY_SCALE.gray10 : undefined}
             />
           )}
         </StyledParticipantsContainer>

packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx

@@ -6,7 +6,7 @@ import { useRecoilState } from 'recoil';
 import { EmailLoader } from '@/activities/emails/components/EmailLoader';
 import { EmailThreadFetchMoreLoader } from '@/activities/emails/components/EmailThreadFetchMoreLoader';
 import { EmailThreadPreview } from '@/activities/emails/components/EmailThreadPreview';
-import { TIMELINE_THREADS_DEFAULT_PAGE_SIZE } from '@/activities/emails/constants/messaging.constants';
+import { TIMELINE_THREADS_DEFAULT_PAGE_SIZE } from '@/activities/emails/constants/Messaging';
 import { useEmailThreadStates } from '@/activities/emails/hooks/internal/useEmailThreadStates';
 import { useEmailThread } from '@/activities/emails/hooks/useEmailThread';
 import { getTimelineThreadsFromCompanyId } from '@/activities/emails/queries/getTimelineThreadsFromCompanyId';

packages/twenty-front/src/modules/activities/notes/hooks/useNotes.ts

@@ -3,7 +3,7 @@ import { useRecoilState } from 'recoil';
 
 import { useActivities } from '@/activities/hooks/useActivities';
 import { currentNotesQueryVariablesState } from '@/activities/notes/states/currentNotesQueryVariablesState';
-import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY';
+import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FindManyTimelineActivitiesOrderBy';
 import { Note } from '@/activities/types/Note';
 import { ObjectRecordQueryVariables } from '@/object-record/types/ObjectRecordQueryVariables';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';

packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx

@@ -16,7 +16,7 @@ import { temporaryActivityForEditorState } from '@/activities/states/temporaryAc
 import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
 import { currentCompletedTaskQueryVariablesState } from '@/activities/tasks/states/currentCompletedTaskQueryVariablesState';
 import { currentIncompleteTaskQueryVariablesState } from '@/activities/tasks/states/currentIncompleteTaskQueryVariablesState';
-import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY';
+import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FindManyTimelineActivitiesOrderBy';
 import { objectShowPageTargetableObjectState } from '@/activities/timeline/states/objectShowPageTargetableObjectIdState';
 import { Activity } from '@/activities/types/Activity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';

packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
-import { TASKS_TAB_LIST_COMPONENT_ID } from '@/activities/tasks/constants/tasksTabListComponentId';
+import { TASKS_TAB_LIST_COMPONENT_ID } from '@/activities/tasks/constants/TasksTabListComponentId';
 import { useTasks } from '@/activities/tasks/hooks/useTasks';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { IconPlus } from '@/ui/display/icon';

packages/twenty-front/src/modules/activities/tasks/hooks/useTasks.ts

@@ -6,7 +6,7 @@ import { useRecoilState } from 'recoil';
 import { useActivities } from '@/activities/hooks/useActivities';
 import { currentCompletedTaskQueryVariablesState } from '@/activities/tasks/states/currentCompletedTaskQueryVariablesState';
 import { currentIncompleteTaskQueryVariablesState } from '@/activities/tasks/states/currentIncompleteTaskQueryVariablesState';
-import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY';
+import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FindManyTimelineActivitiesOrderBy';
 import { Activity } from '@/activities/types/Activity';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';

packages/twenty-front/src/modules/activities/timeline/components/TimelineQueryEffect.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil';
 
 import { useActivities } from '@/activities/hooks/useActivities';
-import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY';
+import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FindManyTimelineActivitiesOrderBy';
 import { objectShowPageTargetableObjectState } from '@/activities/timeline/states/objectShowPageTargetableObjectIdState';
 import { timelineActivitiesFammilyState } from '@/activities/timeline/states/timelineActivitiesFamilyState';
 import { timelineActivitiesForGroupState } from '@/activities/timeline/states/timelineActivitiesForGroupState';

packages/twenty-front/src/modules/command-menu/constants/commandMenuCommands.ts → packages/twenty-front/src/modules/command-menu/constants/CommandMenuCommands.ts

@@ -8,7 +8,7 @@ import {
 
 import { Command, CommandType } from '../types/Command';
 
-export const commandMenuCommands: Command[] = [
+export const COMMAND_MENU_COMMANDS: Command[] = [
   {
     id: 'go-to-people',
     to: '/objects/people',

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -6,7 +6,7 @@ import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectab
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 
-import { commandMenuCommands } from '../constants/commandMenuCommands';
+import { COMMAND_MENU_COMMANDS } from '../constants/CommandMenuCommands';
 import { commandMenuCommandsState } from '../states/commandMenuCommandsState';
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
 import { Command } from '../types/Command';
@@ -62,7 +62,7 @@ export const useCommandMenu = () => {
   );
 
   const setToInitialCommandMenu = () => {
-    setCommands(commandMenuCommands);
+    setCommands(COMMAND_MENU_COMMANDS);
   };
 
   const onItemClick = useCallback(

packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx

@@ -8,7 +8,7 @@ import {
   RecordBoardDeprecatedProps,
 } from '@/object-record/record-board-deprecated/components/RecordBoardDeprecated';
 import { RecordBoardDeprecatedEffect } from '@/object-record/record-board-deprecated/components/RecordBoardDeprecatedEffect';
-import { BoardOptionsDropdownId } from '@/object-record/record-board-deprecated/constants/BoardOptionsDropdownId';
+import { BOARD_OPTIONS_DROPDOWN_ID } from '@/object-record/record-board-deprecated/constants/BoardOptionsDropdownId';
 import { RecordBoardDeprecatedOptionsDropdown } from '@/object-record/record-board-deprecated/options/components/RecordBoardDeprecatedOptionsDropdown';
 import { BoardColumnDefinition } from '@/object-record/record-board-deprecated/types/BoardColumnDefinition';
 import { ViewBar } from '@/views/components/ViewBar';
@@ -66,7 +66,7 @@ export const CompanyBoard = ({
             onStageAdd={onStageAdd}
           />
         }
-        optionsDropdownScopeId={BoardOptionsDropdownId}
+        optionsDropdownScopeId={BOARD_OPTIONS_DROPDOWN_ID}
       />
 
       <HooksCompanyBoardEffect

packages/twenty-front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenu.tsx

@@ -2,13 +2,11 @@ import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { KEYBOARD_SHORTCUTS_GENERAL } from '@/keyboard-shortcut-menu/constants/KeyboardShortcutsGeneral';
+import { KEYBOARD_SHORTCUTS_TABLE } from '@/keyboard-shortcut-menu/constants/KeyboardShortcutsTable';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 
-import {
-  keyboardShortcutsGeneral,
-  keyboardShortcutsTable,
-} from '../constants/keyboardShortcuts';
 import { useKeyboardShortcutMenu } from '../hooks/useKeyboardShortcutMenu';
 import { isKeyboardShortcutMenuOpenedState } from '../states/isKeyboardShortcutMenuOpenedState';
 
@@ -48,12 +46,12 @@ export const KeyboardShortcutMenu = () => {
       {isKeyboardShortcutMenuOpened && (
         <KeyboardMenuDialog onClose={toggleKeyboardShortcutMenu}>
           <KeyboardMenuGroup heading="Table">
-            {keyboardShortcutsTable.map((TableShortcut, index) => (
+            {KEYBOARD_SHORTCUTS_TABLE.map((TableShortcut, index) => (
               <KeyboardMenuItem shortcut={TableShortcut} key={index} />
             ))}
           </KeyboardMenuGroup>
           <KeyboardMenuGroup heading="General">
-            {keyboardShortcutsGeneral.map((GeneralShortcut) => (
+            {KEYBOARD_SHORTCUTS_GENERAL.map((GeneralShortcut) => (
               <KeyboardMenuItem shortcut={GeneralShortcut} />
             ))}
           </KeyboardMenuGroup>

packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/KeyboardShortcutsGeneral.ts

@@ -0,0 +1,18 @@
+import { Shortcut, ShortcutType } from '../types/Shortcut';
+
+export const KEYBOARD_SHORTCUTS_GENERAL: Shortcut[] = [
+  {
+    label: 'Open search',
+    type: ShortcutType.General,
+    firstHotKey: '⌘',
+    secondHotKey: 'K',
+    areSimultaneous: false,
+  },
+  {
+    label: 'Mark as favourite',
+    type: ShortcutType.General,
+    firstHotKey: '⇧',
+    secondHotKey: 'F',
+    areSimultaneous: false,
+  },
+];

packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/keyboardShortcuts.ts → packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/KeyboardShortcutsTable.ts

@@ -1,6 +1,6 @@
 import { Shortcut, ShortcutType } from '../types/Shortcut';
 
-export const keyboardShortcutsTable: Shortcut[] = [
+export const KEYBOARD_SHORTCUTS_TABLE: Shortcut[] = [
   {
     label: 'Move right',
     type: ShortcutType.Table,
@@ -20,20 +20,3 @@ export const keyboardShortcutsTable: Shortcut[] = [
     areSimultaneous: true,
   },
 ];
-
-export const keyboardShortcutsGeneral: Shortcut[] = [
-  {
-    label: 'Open search',
-    type: ShortcutType.General,
-    firstHotKey: '⌘',
-    secondHotKey: 'K',
-    areSimultaneous: false,
-  },
-  {
-    label: 'Mark as favourite',
-    type: ShortcutType.General,
-    firstHotKey: '⇧',
-    secondHotKey: 'F',
-    areSimultaneous: false,
-  },
-];

packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts

@@ -1,4 +1,4 @@
-import { ThemeColor } from '@/ui/theme/constants/colors';
+import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 import { Field, Relation } from '~/generated-metadata/graphql';
 
 export type FieldMetadataItem = Omit<

packages/twenty-front/src/modules/object-metadata/types/FieldMetadataOption.ts

@@ -1,4 +1,4 @@
-import { ThemeColor } from '@/ui/theme/constants/colors';
+import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 
 export type FieldMetadataOption = {
   color?: ThemeColor;

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx

@@ -1,18 +1,17 @@
+import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { IconPlus } from '@/ui/display/icon';
 import { LightButton } from '@/ui/input/button/components/LightButton';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 
-import { ObjectFilterDropdownId } from '../constants/ObjectFilterDropdownId';
-
 type AddObjectFilterFromDetailsButtonProps = {
   filterDropdownId?: string;
 };
 
 export const AddObjectFilterFromDetailsButton = ({
   filterDropdownId,
 }: AddObjectFilterFromDetailsButtonProps) => {
-  const { toggleDropdown } = useDropdown(ObjectFilterDropdownId);
+  const { toggleDropdown } = useDropdown(OBJECT_FILTER_DROPDOWN_ID);
 
   const { resetFilter } = useFilterDropdown({
     filterDropdownId: filterDropdownId,

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersButton.tsx

@@ -1,14 +1,13 @@
+import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 
-import { ObjectFilterDropdownId } from '../constants/ObjectFilterDropdownId';
-
 export const MultipleFiltersButton = () => {
   const { resetFilter } = useFilterDropdown();
 
   const { isDropdownOpen, toggleDropdown } = useDropdown(
-    ObjectFilterDropdownId,
+    OBJECT_FILTER_DROPDOWN_ID,
   );
 
   const handleClick = () => {

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton.tsx

@@ -1,9 +1,8 @@
+import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
-import { ObjectFilterDropdownId } from '../constants/ObjectFilterDropdownId';
-
 import { MultipleFiltersButton } from './MultipleFiltersButton';
 import { MultipleFiltersDropdownContent } from './MultipleFiltersDropdownContent';
 
@@ -18,7 +17,7 @@ export const MultipleFiltersDropdownButton = ({
 
   return (
     <Dropdown
-      dropdownId={ObjectFilterDropdownId}
+      dropdownId={OBJECT_FILTER_DROPDOWN_ID}
       onClose={resetFilter}
       clickableComponent={<MultipleFiltersButton />}
       dropdownComponents={<MultipleFiltersDropdownContent />}