twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-23 03:51:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

TWNTY-3825 - ESLint rule: const naming (#4171)

Browse Source 
* ESLint rule: const naming

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>

* refactor: Reverts changes on `twenty-server`

Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>
This commit is contained in:
gitstart-app[bot] 2024-02-25 13:52:48 +01:00 committed by GitHub
parent a108d36040
commit f543191552
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
184 changed files with 1121 additions and 828 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
.eslintrc.js
View File

@ -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 }],
},
},
],
};

1
package.json
View File

@ -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",

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

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

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

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

8
packages/twenty-front/.storybook/preview.ts
View File

@ -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,

4
packages/twenty-front/src/effect-components/CommandMenuEffect.tsx
View File

@ -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]);

2
packages/twenty-front/src/index.tsx
View File

@ -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';

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

@ -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)};

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

@ -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>

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

@ -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';

0
packages/twenty-front/src/modules/activities/emails/constants/messaging.constants.ts → packages/twenty-front/src/modules/activities/emails/constants/Messaging.ts
View File

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

@ -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';

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

@ -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';

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

@ -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';

0
packages/twenty-front/src/modules/activities/tasks/constants/tasksTabListComponentId.ts → packages/twenty-front/src/modules/activities/tasks/constants/TasksTabListComponentId.ts
View File

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

@ -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';

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

@ -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';

0
packages/twenty-front/src/modules/activities/timeline/constants/FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY.ts → packages/twenty-front/src/modules/activities/timeline/constants/FindManyTimelineActivitiesOrderBy.ts
View File

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

@ -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',

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

@ -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(

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

@ -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

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

@ -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>

18
packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/KeyboardShortcutsGeneral.ts Normal file
View File

@ -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,
},
];

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

@ -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,
},
];

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

@ -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<

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

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

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

@ -1,10 +1,9 @@
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;
};
@ -12,7 +11,7 @@ type AddObjectFilterFromDetailsButtonProps = {
export const AddObjectFilterFromDetailsButton = ({
filterDropdownId,
}: AddObjectFilterFromDetailsButtonProps) => {
const { toggleDropdown } = useDropdown(ObjectFilterDropdownId);
const { toggleDropdown } = useDropdown(OBJECT_FILTER_DROPDOWN_ID);
const { resetFilter } = useFilterDropdown({
filterDropdownId: filterDropdownId,

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

@ -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 = () => {

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

@ -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 />}

4
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect.tsx
View File

@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
import { ObjectFilterDropdownId } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { SingleEntitySelectMenuItems } from '@/object-record/relation-picker/components/SingleEntitySelectMenuItems';
import { EntitiesForMultipleEntitySelect } from '@/object-record/relation-picker/types/EntitiesForMultipleEntitySelect';
@ -22,7 +22,7 @@ export const ObjectFilterDropdownEntitySearchSelect = ({
selectFilter,
} = useFilterDropdown();
const { closeDropdown } = useDropdown(ObjectFilterDropdownId);
const { closeDropdown } = useDropdown(OBJECT_FILTER_DROPDOWN_ID);
const [isAllEntitySelected, setIsAllEntitySelected] = useState(false);

2
packages/twenty-front/src/modules/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId.ts
View File

@ -1 +1 @@
export const ObjectFilterDropdownId = 'filter';
export const OBJECT_FILTER_DROPDOWN_ID = 'filter';

6
packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
View File

@ -1,5 +1,6 @@
import { useCallback, useState } from 'react';
import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
import { useSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useSortDropdown';
import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope';
import { IconChevronDown } from '@/ui/display/icon';
@ -13,7 +14,6 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { ObjectSortDropdownId } from '../constants/ObjectSortDropdownId';
import { SortDefinition } from '../types/SortDefinition';
import { SORT_DIRECTIONS, SortDirection } from '../types/SortDirection';
@ -41,7 +41,7 @@ export const ObjectSortDropdownButton = ({
sortDropdownId: sortDropdownId,
});
const { toggleDropdown } = useDropdown(ObjectSortDropdownId);
const { toggleDropdown } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
const handleButtonClick = () => {
toggleDropdown();
@ -70,7 +70,7 @@ export const ObjectSortDropdownButton = ({
return (
<ObjectSortDropdownScope sortScopeId={sortDropdownId}>
<Dropdown
dropdownId={ObjectSortDropdownId}
dropdownId={OBJECT_SORT_DROPDOWN_ID}
dropdownHotkeyScope={hotkeyScope}
dropdownOffset={{ y: 8 }}
clickableComponent={

2
packages/twenty-front/src/modules/object-record/object-sort-dropdown/constants/ObjectSortDropdownId.ts
View File

@ -1 +1 @@
export const ObjectSortDropdownId = 'sort-dropdown';
export const OBJECT_SORT_DROPDOWN_ID = 'sort-dropdown';

11
packages/twenty-front/src/modules/object-record/record-board-deprecated/components/RecordBoardDeprecatedColumnEditTitleMenu.tsx
View File

@ -7,8 +7,11 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor';
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
import { textInputStyle } from '@/ui/theme/constants/effects';
import {
MAIN_COLOR_NAMES,
ThemeColor,
} from '@/ui/theme/constants/MainColorNames';
import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
import { BoardColumnContext } from '../contexts/BoardColumnContext';
import { useRecordBoardDeprecated } from '../hooks/useRecordBoardDeprecated';
@ -27,7 +30,7 @@ const StyledEditTitleContainer = styled.div`
`;
const StyledEditModeInput = styled.input`
${textInputStyle}
${TEXT_INPUT_STYLE}
background: ${({ theme }) => theme.background.transparent.lighter};
border-color: ${({ theme }) => theme.color.blue};
@ -109,7 +112,7 @@ export const RecordBoardDeprecatedColumnEditTitleMenu = ({
/>
</StyledEditTitleContainer>
<DropdownMenuSeparator />
{mainColorNames.map((colorName) => (
{MAIN_COLOR_NAMES.map((colorName) => (
<MenuItemSelectColor
key={colorName}
onClick={() => handleColorChange(colorName)}

2
packages/twenty-front/src/modules/object-record/record-board-deprecated/constants/BoardOptionsDropdownId.ts
View File

@ -1 +1 @@
export const BoardOptionsDropdownId = 'board-options-dropdown-id';
export const BOARD_OPTIONS_DROPDOWN_ID = 'board-options-dropdown-id';

4
packages/twenty-front/src/modules/object-record/record-board-deprecated/options/components/RecordBoardDeprecatedOptionsDropdown.tsx
View File

@ -1,4 +1,4 @@
import { BoardOptionsDropdownId } from '@/object-record/record-board-deprecated/constants/BoardOptionsDropdownId';
import { BOARD_OPTIONS_DROPDOWN_ID } from '@/object-record/record-board-deprecated/constants/BoardOptionsDropdownId';
import { useViewBar } from '@/views/hooks/useViewBar';
import { Dropdown } from '../../../../ui/layout/dropdown/components/Dropdown';
@ -23,7 +23,7 @@ export const RecordBoardDeprecatedOptionsDropdown = ({
return (
<Dropdown
dropdownId={BoardOptionsDropdownId}
dropdownId={BOARD_OPTIONS_DROPDOWN_ID}
clickableComponent={<RecordBoardDeprecatedOptionsDropdownButton />}
dropdownComponents={
<RecordBoardDeprecatedOptionsDropdownContent

4
packages/twenty-front/src/modules/object-record/record-board-deprecated/options/components/RecordBoardDeprecatedOptionsDropdownButton.tsx
View File

@ -1,10 +1,10 @@
import { BoardOptionsDropdownId } from '@/object-record/record-board-deprecated/constants/BoardOptionsDropdownId';
import { BOARD_OPTIONS_DROPDOWN_ID } from '@/object-record/record-board-deprecated/constants/BoardOptionsDropdownId';
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
export const RecordBoardDeprecatedOptionsDropdownButton = () => {
const { isDropdownOpen, toggleDropdown } = useDropdown(
BoardOptionsDropdownId,
BOARD_OPTIONS_DROPDOWN_ID,
);
const handleClick = () => {

4
packages/twenty-front/src/modules/object-record/record-board-deprecated/options/components/RecordBoardDeprecatedOptionsDropdownContent.tsx
View File

@ -4,7 +4,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
import { Key } from 'ts-key-enum';
import { v4 } from 'uuid';
import { BoardOptionsDropdownId } from '@/object-record/record-board-deprecated/constants/BoardOptionsDropdownId';
import { BOARD_OPTIONS_DROPDOWN_ID } from '@/object-record/record-board-deprecated/constants/BoardOptionsDropdownId';
import { useRecordBoardDeprecatedScopedStates } from '@/object-record/record-board-deprecated/hooks/internal/useRecordBoardDeprecatedScopedStates';
import {
IconBaselineDensitySmall,
@ -106,7 +106,7 @@ export const RecordBoardDeprecatedOptionsDropdownContent = ({
recordBoardScopeId: recordBoardId,
});
const { closeDropdown } = useDropdown(BoardOptionsDropdownId);
const { closeDropdown } = useDropdown(BOARD_OPTIONS_DROPDOWN_ID);
const handleReorderField: OnDragEndResponder = useCallback(
(result) => {

2
packages/twenty-front/src/modules/object-record/record-board-deprecated/types/BoardColumnDefinition.ts
View File

@ -1,4 +1,4 @@
import { ThemeColor } from '@/ui/theme/constants/colors';
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
export type BoardColumnDefinition = {
id: string;

4
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx
View File

@ -3,12 +3,12 @@ import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
import { grayScale } from '@/ui/theme/constants/colors';
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
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)};

2
packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnDefinition.ts
View File

@ -1,5 +1,5 @@
import { RecordBoardColumnAction } from '@/object-record/record-board/types/RecordBoardColumnAction';
import { ThemeColor } from '@/ui/theme/constants/colors';
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
export type RecordBoardColumnDefinition = {
id: string;

2
packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts
View File

@ -1,6 +1,6 @@
import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues';
import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
import { ThemeColor } from '@/ui/theme/constants/colors';
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
import { CurrencyCode } from './CurrencyCode';

4
packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts
View File

@ -6,7 +6,7 @@ import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils
import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { signInBackgroundMockCompanies } from '@/sign-in-background-mock/constants/signInBackgroundMockCompanies';
import { SIGN_IN_BACKGROUND_MOCK_COMPANIES } from '@/sign-in-background-mock/constants/SignInBackgroundMockCompanies';
import { useFindManyRecords } from '../../hooks/useFindManyRecords';
@ -59,7 +59,7 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => {
records:
currentWorkspace?.activationStatus === 'active'
? records
: signInBackgroundMockCompanies,
: SIGN_IN_BACKGROUND_MOCK_COMPANIES,
totalCount: totalCount || 0,
loading,
fetchMoreRecords,

6
packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
View File

@ -9,7 +9,7 @@ import { RecordTableHeader } from '@/object-record/record-table/components/Recor
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
import { rgba } from '@/ui/theme/constants/colors';
import { RGBA } from '@/ui/theme/constants/Rgba';
const StyledTable = styled.table`
border-radius: ${({ theme }) => theme.border.radius.sm};
@ -87,8 +87,8 @@ const StyledTable = styled.table`
box-shadow: ${({ theme }) =>
`4px 0px 4px -4px ${
theme.name === 'dark'
? rgba(theme.grayScale.gray50, 0.8)
: rgba(theme.grayScale.gray100, 0.25)
? RGBA(theme.grayScale.gray50, 0.8)
: RGBA(theme.grayScale.gray100, 0.25)
} inset`};
}

4
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx
View File

@ -5,7 +5,7 @@ import { useRecoilCallback, useRecoilValue } from 'recoil';
import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
import { grayScale } from '@/ui/theme/constants/colors';
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
type RecordTableBodyFetchMoreLoaderProps = {
objectNameSingular: string;
@ -14,7 +14,7 @@ type RecordTableBodyFetchMoreLoaderProps = {
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)};

2
packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts
View File

@ -1 +1 @@
export const ColumnHeadDropdownId = 'table-head-options-dropdown-id';
export const COLUMN_HEAD_DROPDOWN_ID = 'table-head-options-dropdown-id';

3
packages/twenty-front/src/modules/object-record/record-table/constants/TableHiddenFieldsDropdownId.ts
View File

@ -1,2 +1,3 @@
// We should either apply the constant all caps case or maybe define a more general enum to store those ids ?
export const TableHiddenFieldsDropdownId = 'table-hidden-fields-dropdown-id';
export const TABLE_HIDDEN_FIELDS_DROPDOWN_ID =
'table-hidden-fields-dropdown-id';

4
packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelect.tsx
View File

@ -5,7 +5,7 @@ import debounce from 'lodash.debounce';
import { MultipleObjectRecordOnClickOutsideEffect } from '@/object-record/relation-picker/components/MultipleObjectRecordOnClickOutsideEffect';
import { MultipleObjectRecordSelectItem } from '@/object-record/relation-picker/components/MultipleObjectRecordSelectItem';
import { MultiObjectRecordSelectSelectableListId } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
import { MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
import {
ObjectRecordForSelect,
SelectedObjectRecordId,
@ -140,7 +140,7 @@ export const MultipleObjectRecordSelect = ({
) : (
<>
<SelectableList
selectableListId={MultiObjectRecordSelectSelectableListId}
selectableListId={MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID}
selectableItemIdArray={selectableItemIds}
hotkeyScope={RelationPickerHotkeyScope.RelationPicker}
onEnter={(recordId) => {

4
packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx
View File

@ -2,7 +2,7 @@ import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { v4 } from 'uuid';
import { MultiObjectRecordSelectSelectableListId } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
import { MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
import { ObjectRecordForSelect } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
@ -24,7 +24,7 @@ export const MultipleObjectRecordSelectItem = ({
selected: boolean;
}) => {
const { isSelectedItemIdSelector } = useSelectableList(
MultiObjectRecordSelectSelectableListId,
MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID,
);
const isSelectedByKeyboard = useRecoilValue(

1
packages/twenty-front/src/modules/object-record/relation-picker/constants/CreateButtonId.ts Normal file
View File

@ -0,0 +1 @@
export const CREATE_BUTTON_ID = 'create-button';

1
packages/twenty-front/src/modules/object-record/relation-picker/constants/EmptyButtonId.ts Normal file
View File

@ -0,0 +1 @@
export const EMPTY_BUTTON_ID = 'empty-button';

2
packages/twenty-front/src/modules/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId.ts
View File

@ -1,2 +1,2 @@
export const MultiObjectRecordSelectSelectableListId =
export const MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID =
'multi-object-record-select-selectable-list';

2
packages/twenty-front/src/modules/object-record/relation-picker/constants/index.ts
View File

@ -1,2 +0,0 @@
export const CreateButtonId = 'create-button';
export const EmptyButtonId = 'empty-button';

4
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarTimeZoneSelect.tsx
View File

@ -1,4 +1,4 @@
import { availableTimeZoneOptions } from '@/settings/accounts/constants/timeZoneSelectOptions';
import { AVAILABLE_TIMEZONE_OPTIONS } from '@/settings/accounts/constants/AvailableTimezoneOptions';
import { detectTimeZone } from '@/settings/accounts/utils/detectTimeZone';
import { findAvailableTimeZoneOption } from '@/settings/accounts/utils/findAvailableTimeZoneOption';
import { Select } from '@/ui/input/components/Select';
@ -18,7 +18,7 @@ export const SettingsAccountsCalendarTimeZoneSelect = ({
label="Time zone"
fullWidth
value={findAvailableTimeZoneOption(value)?.value}
options={availableTimeZoneOptions}
options={AVAILABLE_TIMEZONE_OPTIONS}
onChange={onChange}
withSearchInput
/>

7
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsColorSettingCard.tsx
View File

@ -3,7 +3,10 @@ import styled from '@emotion/styled';
import { ColorPickerButton } from '@/ui/input/button/components/ColorPickerButton';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
import {
MAIN_COLOR_NAMES,
ThemeColor,
} from '@/ui/theme/constants/MainColorNames';
type SettingsAccountsColorSettingCardProps = {
onChange: (nextValue: ThemeColor) => void;
@ -22,7 +25,7 @@ export const SettingsAccountsColorSettingCard = ({
}: SettingsAccountsColorSettingCardProps) => (
<Card>
<StyledCardContent>
{mainColorNames.map((colorName) => (
{MAIN_COLOR_NAMES.map((colorName) => (
<ColorPickerButton
colorName={colorName}
isSelected={value === colorName}

18
packages/twenty-front/src/modules/settings/accounts/constants/AvailableTimezoneOptions.ts Normal file
View File

@ -0,0 +1,18 @@
/* eslint-disable @nx/workspace-max-consts-per-file */
import { getTimezoneOffset } from 'date-fns-tz';
import { AVAILABLE_TIME_ZONE_OPTIONS_BY_LABEL } from '@/settings/accounts/constants/AvailableTimezoneOptionsByLabel';
export const AVAILABLE_TIMEZONE_OPTIONS = Object.values(
AVAILABLE_TIME_ZONE_OPTIONS_BY_LABEL,
).sort((optionA, optionB) => {
// eslint-disable-next-line @typescript-eslint/naming-convention
const difference =
getTimezoneOffset(optionA.value) - getTimezoneOffset(optionB.value);
return difference === 0
? // Sort alphabetically if the time zone offsets are the same.
optionA.label.localeCompare(optionB.label)
: // Sort by time zone offset if different.
difference;
});

21
packages/twenty-front/src/modules/settings/accounts/constants/timeZoneSelectOptions.ts → packages/twenty-front/src/modules/settings/accounts/constants/AvailableTimezoneOptionsByLabel.ts
View File

@ -1,10 +1,10 @@
import { getTimezoneOffset } from 'date-fns-tz';
import { ianaTimeZones } from '@/settings/accounts/constants/ianaTimeZones';
/* eslint-disable @typescript-eslint/naming-convention */
/* eslint-disable @nx/workspace-max-consts-per-file */
import { IANA_TIME_ZONES } from '@/settings/accounts/constants/IanaTimeZones';
import { formatTimeZoneLabel } from '@/settings/accounts/utils/formatTimeZoneLabel';
import { SelectOption } from '@/ui/input/components/Select';
export const availableTimeZoneOptionsByLabel = ianaTimeZones.reduce<
export const AVAILABLE_TIME_ZONE_OPTIONS_BY_LABEL = IANA_TIME_ZONES.reduce<
Record<string, SelectOption<string>>
>((result, ianaTimeZone) => {
const timeZoneLabel = formatTimeZoneLabel(ianaTimeZone);
@ -28,16 +28,3 @@ export const availableTimeZoneOptionsByLabel = ianaTimeZones.reduce<
[timeZoneLabel]: { label: timeZoneLabel, value: ianaTimeZone },
};
}, {});
export const availableTimeZoneOptions = Object.values(
availableTimeZoneOptionsByLabel,
).sort((optionA, optionB) => {
const difference =
getTimezoneOffset(optionA.value) - getTimezoneOffset(optionB.value);
return difference === 0
? // Sort alphabetically if the time zone offsets are the same.
optionA.label.localeCompare(optionB.label)
: // Sort by time zone offset if different.
difference;
});

2
packages/twenty-front/src/modules/settings/accounts/constants/ianaTimeZones.ts → packages/twenty-front/src/modules/settings/accounts/constants/IanaTimeZones.ts
View File

@ -2,7 +2,7 @@
* Standard IANA time zones.
* @see https://www.iana.org/time-zones
*/
export const ianaTimeZones = [
export const IANA_TIME_ZONES = [
'Africa/Abidjan',
'Africa/Accra',
'Africa/Addis_Ababa',

4
packages/twenty-front/src/modules/settings/accounts/utils/findAvailableTimeZoneOption.ts
View File

@ -1,4 +1,4 @@
import { availableTimeZoneOptionsByLabel } from '@/settings/accounts/constants/timeZoneSelectOptions';
import { AVAILABLE_TIME_ZONE_OPTIONS_BY_LABEL } from '@/settings/accounts/constants/AvailableTimezoneOptionsByLabel';
import { formatTimeZoneLabel } from '@/settings/accounts/utils/formatTimeZoneLabel';
/**
@ -7,4 +7,4 @@ import { formatTimeZoneLabel } from '@/settings/accounts/utils/formatTimeZoneLab
* @returns the matching available IANA time zone select option or undefined
*/
export const findAvailableTimeZoneOption = (value: string) =>
availableTimeZoneOptionsByLabel[formatTimeZoneLabel(value)];
AVAILABLE_TIME_ZONE_OPTIONS_BY_LABEL[formatTimeZoneLabel(value)];

5
packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx
View File

@ -1,6 +1,6 @@
import styled from '@emotion/styled';
import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
import { OBJECT_SETTINGS_WIDTH } from '@/settings/data-model/constants/ObjectSettings';
const StyledSettingsPageContainer = styled.div<{ width?: number }>`
display: flex;
@ -8,7 +8,8 @@ const StyledSettingsPageContainer = styled.div<{ width?: number }>`
gap: ${({ theme }) => theme.spacing(8)};
overflow: auto;
padding: ${({ theme }) => theme.spacing(8)};
width: ${({ width }) => (width ? width + 'px' : objectSettingsWidth + 'px')};
width: ${({ width }) =>
width ? width + 'px' : OBJECT_SETTINGS_WIDTH + 'px'};
`;
export { StyledSettingsPageContainer as SettingsPageContainer };

4
packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldCurrencyForm.tsx
View File

@ -2,7 +2,7 @@ import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
import { Select } from '@/ui/input/components/Select';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { settingsFieldCurrencyCodes } from '../constants/settingsFieldCurrencyCodes';
import { SETTINGS_FIELD_CURRENCY_CODES } from '../constants/SettingsFieldCurrencyCodes';
export type SettingsObjectFieldCurrencyFormValues = {
currencyCode: CurrencyCode;
@ -26,7 +26,7 @@ export const SettingsObjectFieldCurrencyForm = ({
label="Unit"
dropdownId="currency-unit-select"
value={values.currencyCode}
options={Object.entries(settingsFieldCurrencyCodes).map(
options={Object.entries(SETTINGS_FIELD_CURRENCY_CODES).map(
([value, { label, Icon }]) => ({
label,
value: value as CurrencyCode,

4
packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
View File

@ -9,7 +9,7 @@ import { Select } from '@/ui/input/components/Select';
import { TextInput } from '@/ui/input/components/TextInput';
import { Field } from '~/generated-metadata/graphql';
import { relationTypes } from '../constants/relationTypes';
import { RELATION_TYPES } from '../constants/RelationTypes';
import { RelationType } from '../types/RelationType';
export type SettingsObjectFieldRelationFormValues = {
@ -75,7 +75,7 @@ export const SettingsObjectFieldRelationForm = ({
fullWidth
disabled={disableRelationEdition}
value={values.type}
options={Object.entries(relationTypes)
options={Object.entries(RELATION_TYPES)
.filter(([value]) => 'ONE_TO_ONE' !== value)
.map(([value, { label, Icon }]) => ({
label,

11
packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
View File

@ -8,7 +8,10 @@ import { CardContent } from '@/ui/layout/card/components/CardContent';
import { CardFooter } from '@/ui/layout/card/components/CardFooter';
import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
import {
MAIN_COLOR_NAMES,
ThemeColor,
} from '@/ui/theme/constants/MainColorNames';
import { moveArrayItem } from '~/utils/array/moveArrayItem';
import { SettingsObjectFieldSelectFormOption } from '../types/SettingsObjectFieldSelectFormOption';
@ -48,11 +51,11 @@ const StyledButton = styled(LightButton)`
`;
const getNextColor = (currentColor: ThemeColor) => {
const currentColorIndex = mainColorNames.findIndex(
const currentColorIndex = MAIN_COLOR_NAMES.findIndex(
(color) => color === currentColor,
);
const nextColorIndex = (currentColorIndex + 1) % mainColorNames.length;
return mainColorNames[nextColorIndex];
const nextColorIndex = (currentColorIndex + 1) % MAIN_COLOR_NAMES.length;
return MAIN_COLOR_NAMES[nextColorIndex];
};
export const SettingsObjectFieldSelectForm = ({

4
packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx
View File

@ -19,7 +19,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor';
import { mainColorNames } from '@/ui/theme/constants/colors';
import { MAIN_COLOR_NAMES } from '@/ui/theme/constants/MainColorNames';
import { SettingsObjectFieldSelectFormOption } from '../types/SettingsObjectFieldSelectFormOption';
@ -89,7 +89,7 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
dropdownComponents={
<DropdownMenu>
<DropdownMenuItemsContainer>
{mainColorNames.map((colorName) => (
{MAIN_COLOR_NAMES.map((colorName) => (
<MenuItemSelectColor
key={colorName}
onClick={() => {

13
packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx
View File

@ -1,13 +1,12 @@
import styled from '@emotion/styled';
import { RELATION_TYPES } from '@/settings/data-model/constants/RelationTypes';
import { SETTINGS_FIELD_METADATA_TYPES } from '@/settings/data-model/constants/SettingsFieldMetadataTypes';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Select } from '@/ui/input/components/Select';
import { Section } from '@/ui/layout/section/components/Section';
import { Field, FieldMetadataType } from '~/generated-metadata/graphql';
import { relationTypes } from '../constants/relationTypes';
import { settingsFieldMetadataTypes } from '../constants/settingsFieldMetadataTypes';
import {
SettingsObjectFieldCurrencyForm,
SettingsObjectFieldCurrencyFormValues,
@ -71,7 +70,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
const relationFormConfig = values.relation;
const selectFormConfig = values.select;
const fieldTypeOptions = Object.entries(settingsFieldMetadataTypes)
const fieldTypeOptions = Object.entries(SETTINGS_FIELD_METADATA_TYPES)
.filter(([key]) => !excludedFieldTypes?.includes(key as FieldMetadataType))
.map(([key, dataTypeConfig]) => ({
value: key as FieldMetadataType,
@ -124,11 +123,11 @@ export const SettingsObjectFieldTypeSelectSection = ({
!!relationFormConfig.objectMetadataId && (
<>
<StyledRelationImage
src={relationTypes[relationFormConfig.type].imageSrc}
src={RELATION_TYPES[relationFormConfig.type].imageSrc}
flip={
relationTypes[relationFormConfig.type].isImageFlipped
RELATION_TYPES[relationFormConfig.type].isImageFlipped
}
alt={relationTypes[relationFormConfig.type].label}
alt={RELATION_TYPES[relationFormConfig.type].label}
/>
<StyledSettingsObjectFieldPreview
fieldMetadata={{

1
packages/twenty-front/src/modules/settings/data-model/constants/DefaultDateValue.ts Normal file
View File

@ -0,0 +1 @@
export const DEFAULT_DATE_VALUE = new Date();

1
packages/twenty-front/src/modules/settings/data-model/constants/ObjectSettings.ts Normal file
View File

@ -0,0 +1 @@
export const OBJECT_SETTINGS_WIDTH = 512;

2
packages/twenty-front/src/modules/settings/data-model/constants/relationTypes.ts → packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts
View File

@ -6,7 +6,7 @@ import OneToManySvg from '../assets/OneToMany.svg';
import OneToOneSvg from '../assets/OneToOne.svg';
import { RelationType } from '../types/RelationType';
export const relationTypes: Record<
export const RELATION_TYPES: Record<
RelationType,
{
label: string;

2
packages/twenty-front/src/modules/settings/data-model/constants/settingsFieldCurrencyCodes.ts → packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts
View File

@ -9,7 +9,7 @@ import {
} from '@/ui/display/icon';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
export const settingsFieldCurrencyCodes: Record<
export const SETTINGS_FIELD_CURRENCY_CODES: Record<
CurrencyCode,
{ label: string; Icon: IconComponent }
> = {

8
packages/twenty-front/src/modules/settings/data-model/constants/settingsFieldMetadataTypes.ts → packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldMetadataTypes.ts
View File

@ -1,4 +1,5 @@
import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
import { DEFAULT_DATE_VALUE } from '@/settings/data-model/constants/DefaultDateValue';
import {
IconCalendarEvent,
IconCheck,
@ -17,10 +18,9 @@ import { IconTwentyStar } from '@/ui/display/icon/components/IconTwentyStar';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { FieldMetadataType } from '~/generated-metadata/graphql';
const defaultDateValue = new Date();
defaultDateValue.setFullYear(defaultDateValue.getFullYear() + 2);
DEFAULT_DATE_VALUE.setFullYear(DEFAULT_DATE_VALUE.getFullYear() + 2);
export const settingsFieldMetadataTypes: Partial<
export const SETTINGS_FIELD_METADATA_TYPES: Partial<
Record<
FieldMetadataType,
{ label: string; Icon: IconComponent; defaultValue?: unknown }
@ -60,7 +60,7 @@ export const settingsFieldMetadataTypes: Partial<
[FieldMetadataType.DateTime]: {
label: 'Date & Time',
Icon: IconCalendarEvent,
defaultValue: defaultDateValue.toISOString(),
defaultValue: DEFAULT_DATE_VALUE.toISOString(),
},
[FieldMetadataType.Select]: {
label: 'Select',

1
packages/twenty-front/src/modules/settings/data-model/constants/objectSettings.ts
View File

@ -1 +0,0 @@
export const objectSettingsWidth = 512;

4
packages/twenty-front/src/modules/settings/data-model/hooks/useFieldPreview.ts
View File

@ -1,8 +1,8 @@
import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
import { SETTINGS_FIELD_METADATA_TYPES } from '@/settings/data-model/constants/SettingsFieldMetadataTypes';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { Field, FieldMetadataType } from '~/generated-metadata/graphql';
import { settingsFieldMetadataTypes } from '../constants/settingsFieldMetadataTypes';
import { SettingsObjectFieldSelectFormOption } from '../types/SettingsObjectFieldSelectFormOption';
import { useFieldPreviewValue } from './useFieldPreviewValue';
@ -46,7 +46,7 @@ export const useFieldPreview = ({
});
const settingsFieldMetadataType =
settingsFieldMetadataTypes[fieldMetadata.type];
SETTINGS_FIELD_METADATA_TYPES[fieldMetadata.type];
const defaultSelectValue = selectOptions?.[0];
const selectValue =

7
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
View File

@ -1,12 +1,11 @@
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { SETTINGS_FIELD_METADATA_TYPES } from '@/settings/data-model/constants/SettingsFieldMetadataTypes';
import { IconTwentyStar } from '@/ui/display/icon/components/IconTwentyStar';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { settingsFieldMetadataTypes } from '../../constants/settingsFieldMetadataTypes';
type SettingsObjectFieldDataTypeProps = {
onClick?: () => void;
Icon?: IconComponent;
@ -50,8 +49,8 @@ const StyledLabelContainer = styled.div`
export const SettingsObjectFieldDataType = ({
onClick,
value,
Icon = settingsFieldMetadataTypes[value]?.Icon ?? IconTwentyStar,
label = settingsFieldMetadataTypes[value]?.label,
Icon = SETTINGS_FIELD_METADATA_TYPES[value]?.Icon ?? IconTwentyStar,
label = SETTINGS_FIELD_METADATA_TYPES[value]?.label,
}: SettingsObjectFieldDataTypeProps) => {
const theme = useTheme();

8
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
View File

@ -6,14 +6,14 @@ import styled from '@emotion/styled';
import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
import { SETTINGS_FIELD_METADATA_TYPES } from '@/settings/data-model/constants/SettingsFieldMetadataTypes';
import { FieldIdentifierType } from '@/settings/data-model/types/FieldIdentifierType';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import { Nullable } from '~/types/Nullable';
import { relationTypes } from '../../constants/relationTypes';
import { settingsFieldMetadataTypes } from '../../constants/settingsFieldMetadataTypes';
import { RELATION_TYPES } from '../../constants/RelationTypes';
import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';
@ -51,7 +51,7 @@ export const SettingsObjectFieldItemTableRow = ({
// TODO: parse with zod and merge types with FieldType (create a subset of FieldType for example)
const fieldDataTypeIsSupported =
fieldMetadataItem.type in settingsFieldMetadataTypes;
fieldMetadataItem.type in SETTINGS_FIELD_METADATA_TYPES;
const getRelationMetadata = useGetRelationMetadata();
@ -64,7 +64,7 @@ export const SettingsObjectFieldItemTableRow = ({
if (!fieldDataTypeIsSupported) return null;
const RelationIcon = relationType
? relationTypes[relationType].Icon
? RELATION_TYPES[relationType].Icon
: undefined;
return (

2
packages/twenty-front/src/modules/settings/data-model/types/SettingsObjectFieldSelectFormOption.ts
View File

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

2
packages/twenty-front/src/modules/settings/developers/constants/expirationDates.ts → packages/twenty-front/src/modules/settings/developers/constants/ExpirationDates.ts
View File

@ -1,4 +1,4 @@
export const ExpirationDates: {
export const EXPIRATION_DATES: {
value: number | null;
label: string;
}[] = [

22
packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx
View File

@ -4,12 +4,10 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
import { useRecordActionBar } from '@/object-record/record-action-bar/hooks/useRecordActionBar';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import {
signInBackgroundMockColumnDefinitions,
signInBackgroundMockFilterDefinitions,
signInBackgroundMockSortDefinitions,
} from '@/sign-in-background-mock/constants/signInBackgroundMockDefinitions';
import { signInBackgroundMockViewFields } from '@/sign-in-background-mock/constants/signInBackgroundMockViewFields';
import { SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS } from '@/sign-in-background-mock/constants/SignInBackgroundMockColumnDefinitions';
import { SIGN_IN_BACKGROUND_MOCK_FILTER_DEFINITIONS } from '@/sign-in-background-mock/constants/SignInBackgroundMockFilterDefinitions';
import { SIGN_IN_BACKGROUND_MOCK_SORT_DEFINITIONS } from '@/sign-in-background-mock/constants/SignInBackgroundMockSortDefinitions';
import { SIGN_IN_BACKGROUND_MOCK_VIEW_FIELDS } from '@/sign-in-background-mock/constants/SignInBackgroundMockViewFields';
import { useViewBar } from '@/views/hooks/useViewBar';
import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';
@ -52,16 +50,16 @@ export const SignInBackgroundMockContainerEffect = ({
useEffect(() => {
setViewObjectMetadataId?.(objectMetadataItem.id);
setAvailableSortDefinitions?.(signInBackgroundMockSortDefinitions);
setAvailableFilterDefinitions?.(signInBackgroundMockFilterDefinitions);
setAvailableFieldDefinitions?.(signInBackgroundMockColumnDefinitions);
setAvailableSortDefinitions?.(SIGN_IN_BACKGROUND_MOCK_SORT_DEFINITIONS);
setAvailableFilterDefinitions?.(SIGN_IN_BACKGROUND_MOCK_FILTER_DEFINITIONS);
setAvailableFieldDefinitions?.(SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS);
setAvailableTableColumns(signInBackgroundMockColumnDefinitions);
setAvailableTableColumns(SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS);
setTableColumns(
mapViewFieldsToColumnDefinitions({
viewFields: signInBackgroundMockViewFields,
columnDefinitions: signInBackgroundMockColumnDefinitions,
viewFields: SIGN_IN_BACKGROUND_MOCK_VIEW_FIELDS,
columnDefinitions: SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS,
}),
);
}, [

96
packages/twenty-front/src/modules/sign-in-background-mock/constants/signInBackgroundMockDefinitions.ts → packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockColumnDefinitions.ts
View File

@ -1,10 +1,8 @@
import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
export const signInBackgroundMockColumnDefinitions = (
export const SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS = (
[
{
position: 0,
@ -254,95 +252,3 @@ export const signInBackgroundMockColumnDefinitions = (
},
] satisfies ColumnDefinition<FieldMetadata>[]
).filter(filterAvailableTableColumns);
export const signInBackgroundMockFilterDefinitions = [
{
fieldMetadataId: '20202020-5e4e-4007-a630-8a2617914889',
label: 'Domain Name',
iconName: 'IconLink',
type: 'TEXT',
},
{
fieldMetadataId: '20202020-7fbd-41ad-b64d-25a15ff62f04',
label: 'Employees',
iconName: 'IconUsers',
type: 'NUMBER',
},
{
fieldMetadataId: '20202020-6d30-4111-9f40-b4301906fd3c',
label: 'Name',
iconName: 'IconBuildingSkyscraper',
type: 'TEXT',
},
{
fieldMetadataId: '20202020-ad10-4117-a039-3f04b7a5f939',
label: 'Address',
iconName: 'IconMap',
type: 'TEXT',
},
{
fieldMetadataId: '20202020-0739-495d-8e70-c0807f6b2268',
label: 'Account Owner',
iconName: 'IconUserCircle',
relationObjectMetadataNamePlural: 'workspaceMembers',
relationObjectMetadataNameSingular: 'workspaceMember',
type: 'RELATION',
},
{
fieldMetadataId: '20202020-4dc2-47c9-bb15-6e6f19ba9e46',
label: 'Creation date',
iconName: 'IconCalendar',
type: 'DATE_TIME',
},
{
fieldMetadataId: '20202020-a61d-4b78-b998-3fd88b4f73a1',
label: 'Linkedin',
iconName: 'IconBrandLinkedin',
type: 'LINK',
},
{
fieldMetadataId: '20202020-46e3-479a-b8f4-77137c74daa6',
label: 'X',
iconName: 'IconBrandX',
type: 'LINK',
},
{
fieldMetadataId: '20202020-4a5a-466f-92d9-c3870d9502a9',
label: 'ARR',
iconName: 'IconMoneybag',
type: 'CURRENCY',
},
] as FilterDefinition[];
export const signInBackgroundMockSortDefinitions = [
{
fieldMetadataId: '20202020-5e4e-4007-a630-8a2617914889',
label: 'Domain Name',
iconName: 'IconLink',
},
{
fieldMetadataId: '20202020-7fbd-41ad-b64d-25a15ff62f04',
label: 'Employees',
iconName: 'IconUsers',
},
{
fieldMetadataId: '20202020-6d30-4111-9f40-b4301906fd3c',
label: 'Name',
iconName: 'IconBuildingSkyscraper',
},
{
fieldMetadataId: '20202020-ad10-4117-a039-3f04b7a5f939',
label: 'Address',
iconName: 'IconMap',
},
{
fieldMetadataId: '20202020-4dc2-47c9-bb15-6e6f19ba9e46',
label: 'Creation date',
iconName: 'IconCalendar',
},
{
fieldMetadataId: '20202020-9e9f-4235-98b2-c76f3e2d281e',
label: 'ICP',
iconName: 'IconTarget',
},
] as SortDefinition[];

2
packages/twenty-front/src/modules/sign-in-background-mock/constants/signInBackgroundMockCompanies.ts → packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockCompanies.ts
View File

@ -1,4 +1,4 @@
export const signInBackgroundMockCompanies = [
export const SIGN_IN_BACKGROUND_MOCK_COMPANIES = [
{
__typename: 'Company',
id: '04b2e9f5-0713-40a5-8216-82802401d33e',

60
packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockFilterDefinitions.ts Normal file
View File

@ -0,0 +1,60 @@
import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
export const SIGN_IN_BACKGROUND_MOCK_FILTER_DEFINITIONS = [
{
fieldMetadataId: '20202020-5e4e-4007-a630-8a2617914889',
label: 'Domain Name',
iconName: 'IconLink',
type: 'TEXT',
},
{
fieldMetadataId: '20202020-7fbd-41ad-b64d-25a15ff62f04',
label: 'Employees',
iconName: 'IconUsers',
type: 'NUMBER',
},
{
fieldMetadataId: '20202020-6d30-4111-9f40-b4301906fd3c',
label: 'Name',
iconName: 'IconBuildingSkyscraper',
type: 'TEXT',
},
{
fieldMetadataId: '20202020-ad10-4117-a039-3f04b7a5f939',
label: 'Address',
iconName: 'IconMap',
type: 'TEXT',
},
{
fieldMetadataId: '20202020-0739-495d-8e70-c0807f6b2268',
label: 'Account Owner',
iconName: 'IconUserCircle',
relationObjectMetadataNamePlural: 'workspaceMembers',
relationObjectMetadataNameSingular: 'workspaceMember',
type: 'RELATION',
},
{
fieldMetadataId: '20202020-4dc2-47c9-bb15-6e6f19ba9e46',
label: 'Creation date',
iconName: 'IconCalendar',
type: 'DATE_TIME',
},
{
fieldMetadataId: '20202020-a61d-4b78-b998-3fd88b4f73a1',
label: 'Linkedin',
iconName: 'IconBrandLinkedin',
type: 'LINK',
},
{
fieldMetadataId: '20202020-46e3-479a-b8f4-77137c74daa6',
label: 'X',
iconName: 'IconBrandX',
type: 'LINK',
},
{
fieldMetadataId: '20202020-4a5a-466f-92d9-c3870d9502a9',
label: 'ARR',
iconName: 'IconMoneybag',
type: 'CURRENCY',
},
] as FilterDefinition[];

34
packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockSortDefinitions.ts Normal file
View File

@ -0,0 +1,34 @@
import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
export const SIGN_IN_BACKGROUND_MOCK_SORT_DEFINITIONS = [
{
fieldMetadataId: '20202020-5e4e-4007-a630-8a2617914889',
label: 'Domain Name',
iconName: 'IconLink',
},
{
fieldMetadataId: '20202020-7fbd-41ad-b64d-25a15ff62f04',
label: 'Employees',
iconName: 'IconUsers',
},
{
fieldMetadataId: '20202020-6d30-4111-9f40-b4301906fd3c',
label: 'Name',
iconName: 'IconBuildingSkyscraper',
},
{
fieldMetadataId: '20202020-ad10-4117-a039-3f04b7a5f939',
label: 'Address',
iconName: 'IconMap',
},
{
fieldMetadataId: '20202020-4dc2-47c9-bb15-6e6f19ba9e46',
label: 'Creation date',
iconName: 'IconCalendar',
},
{
fieldMetadataId: '20202020-9e9f-4235-98b2-c76f3e2d281e',
label: 'ICP',
iconName: 'IconTarget',
},
] as SortDefinition[];

2
packages/twenty-front/src/modules/sign-in-background-mock/constants/signInBackgroundMockViewFields.ts → packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockViewFields.ts
View File

@ -1,6 +1,6 @@
import { ViewField } from '@/views/types/ViewField';
export const signInBackgroundMockViewFields = [
export const SIGN_IN_BACKGROUND_MOCK_VIEW_FIELDS = [
{
__typename: 'ViewField',
id: '5168be09-f200-40f5-9e04-29d607de06e5',

2
packages/twenty-front/src/modules/spreadsheet-import/components/ModalWrapper.tsx
View File

@ -2,7 +2,7 @@ import styled from '@emotion/styled';
import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
import { Modal } from '@/ui/layout/modal/components/Modal';
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
import { ModalCloseButton } from './ModalCloseButton';

10
packages/twenty-front/src/modules/spreadsheet-import/components/Table.tsx
View File

@ -3,14 +3,14 @@ import DataGrid, { DataGridProps } from 'react-data-grid';
import styled from '@emotion/styled';
import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
import { rgba } from '@/ui/theme/constants/colors';
import { RGBA } from '@/ui/theme/constants/Rgba';
const StyledDataGrid = styled(DataGrid)`
--rdg-background-color: ${({ theme }) => theme.background.primary};
--rdg-border-color: ${({ theme }) => theme.border.color.medium};
--rdg-color: ${({ theme }) => theme.font.color.primary};
--rdg-error-cell-background-color: ${({ theme }) =>
rgba(theme.color.red, 0.4)};
RGBA(theme.color.red, 0.4)};
--rdg-font-size: ${({ theme }) => theme.font.size.sm};
--rdg-frozen-cell-box-shadow: none;
--rdg-header-background-color: ${({ theme }) => theme.background.primary};
@ -67,15 +67,15 @@ const StyledDataGrid = styled(DataGrid)`
}
.rdg-cell-error {
background-color: ${({ theme }) => rgba(theme.color.red, 0.08)};
background-color: ${({ theme }) => RGBA(theme.color.red, 0.08)};
}
.rdg-cell-warning {
background-color: ${({ theme }) => rgba(theme.color.orange, 0.08)};
background-color: ${({ theme }) => RGBA(theme.color.orange, 0.08)};
}
.rdg-cell-info {
background-color: ${({ theme }) => rgba(theme.color.blue, 0.08)};
background-color: ${({ theme }) => RGBA(theme.color.blue, 0.08)};
}
.rdg-static {

2
packages/twenty-front/src/modules/spreadsheet-import/steps/components/Steps.tsx
View File

@ -5,7 +5,7 @@ import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpre
import { Modal } from '@/ui/layout/modal/components/Modal';
import { StepBar } from '@/ui/navigation/step-bar/components/StepBar';
import { useStepBar } from '@/ui/navigation/step-bar/hooks/useStepBar';
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
import { UploadFlow } from './UploadFlow';

2
packages/twenty-front/src/modules/ui/display/color/components/ColorSample.tsx
View File

@ -1,7 +1,7 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { ThemeColor } from '@/ui/theme/constants/colors';
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
export type ColorSampleVariant = 'default' | 'pipeline';

2
packages/twenty-front/src/modules/ui/display/status/components/Status.tsx
View File

@ -1,6 +1,6 @@
import styled from '@emotion/styled';
import { ThemeColor } from '@/ui/theme/constants/colors';
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
const StyledStatus = styled.h3<{

7
packages/twenty-front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx
View File

@ -1,7 +1,10 @@
import { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, within } from '@storybook/test';
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
import {
MAIN_COLOR_NAMES,
ThemeColor,
} from '@/ui/theme/constants/MainColorNames';
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { CatalogStory } from '~/testing/types';
@ -55,7 +58,7 @@ export const Catalog: CatalogStory<Story, typeof Status> = {
dimensions: [
{
name: 'colors',
values: mainColorNames,
values: MAIN_COLOR_NAMES,
props: (color: ThemeColor) => ({ color }),
},
],

2
packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx
View File

@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { ThemeColor } from '@/ui/theme/constants/colors';
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
const StyledTag = styled.h3<{

7
packages/twenty-front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx
View File

@ -1,7 +1,10 @@
import { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, within } from '@storybook/test';
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
import {
MAIN_COLOR_NAMES,
ThemeColor,
} from '@/ui/theme/constants/MainColorNames';
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { CatalogStory } from '~/testing/types';
@ -55,7 +58,7 @@ export const Catalog: CatalogStory<Story, typeof Tag> = {
dimensions: [
{
name: 'colors',
values: mainColorNames,
values: MAIN_COLOR_NAMES,
props: (color: ThemeColor) => ({ color }),
},
],

4
packages/twenty-front/src/modules/ui/display/tooltip/AppTooltip.tsx
View File

@ -1,7 +1,7 @@
import { PlacesType, PositionStrategy, Tooltip } from 'react-tooltip';
import styled from '@emotion/styled';
import { rgba } from '../../theme/constants/colors';
import { RGBA } from '@/ui/theme/constants/Rgba';
export enum TooltipPosition {
Top = 'top',
@ -12,7 +12,7 @@ export enum TooltipPosition {
const StyledAppTooltip = styled(Tooltip)`
backdrop-filter: ${({ theme }) => theme.blur.strong};
background-color: ${({ theme }) => rgba(theme.color.gray80, 0.8)};
background-color: ${({ theme }) => RGBA(theme.color.gray80, 0.8)};
border-radius: ${({ theme }) => theme.border.radius.sm};
box-shadow: ${({ theme }) => theme.boxShadow.light};

6
packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx
View File

@ -7,7 +7,7 @@ import {
ProgressBar,
ProgressBarControls,
} from '@/ui/feedback/progress-bar/components/ProgressBar';
import { rgba } from '@/ui/theme/constants/colors';
import { RGBA } from '@/ui/theme/constants/Rgba';
import { usePausableTimeout } from '../hooks/usePausableTimeout';
@ -85,7 +85,7 @@ const StyledCloseButton = styled.button<Pick<SnackBarProps, 'variant'>>`
width: 24px;
&:hover {
background-color: ${({ theme }) => rgba(theme.grayScale.gray0, 0.1)};
background-color: ${({ theme }) => RGBA(theme.grayScale.gray0, 0.1)};
}
`;
@ -167,7 +167,7 @@ export const SnackBar = ({
<ProgressBar
ref={progressBarRef}
barHeight={5}
barColor={rgba(theme.grayScale.gray0, 0.3)}
barColor={RGBA(theme.grayScale.gray0, 0.3)}
duration={duration}
/>
</StyledProgressBarContainer>

4
packages/twenty-front/src/modules/ui/field/input/components/FieldInputOverlay.tsx
View File

@ -1,11 +1,11 @@
import styled from '@emotion/styled';
import { overlayBackground } from '@/ui/theme/constants/effects';
import { OVERLAY_BACKGROUND } from '@/ui/theme/constants/OverlayBackground';
const StyledFieldInputOverlay = styled.div`
border: ${({ theme }) => `1px solid ${theme.border.color.light}`};
border-radius: ${({ theme }) => theme.border.radius.sm};
${overlayBackground}
${OVERLAY_BACKGROUND}
display: flex;
height: 32px;
margin: -1px;

4
packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
View File

@ -3,7 +3,7 @@ import TextareaAutosize from 'react-textarea-autosize';
import styled from '@emotion/styled';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { textInputStyle } from '@/ui/theme/constants/effects';
import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
export type TextAreaInputProps = {
disabled?: boolean;
@ -21,7 +21,7 @@ export type TextAreaInputProps = {
};
const StyledTextArea = styled(TextareaAutosize)`
${textInputStyle}
${TEXT_INPUT_STYLE}
width: 100%;
resize: none;
box-shadow: ${({ theme }) => theme.boxShadow.strong};

4
packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx
View File

@ -2,11 +2,11 @@ import { ChangeEvent, useEffect, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { textInputStyle } from '@/ui/theme/constants/effects';
import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
export const StyledInput = styled.input`
margin: 0;
${textInputStyle}
${TEXT_INPUT_STYLE}
width: 100%;
`;

4
packages/twenty-front/src/modules/ui/input/components/Radio.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { rgba } from '@/ui/theme/constants/colors';
import { RGBA } from '@/ui/theme/constants/Rgba';
import { RadioGroup } from './RadioGroup';
@ -58,7 +58,7 @@ const StyledRadioInput = styled(motion.input)<RadioInputProps>`
if (!checked) {
return theme.background.tertiary;
}
return rgba(theme.color.blue, 0.12);
return RGBA(theme.color.blue, 0.12);
}};
}

4
packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx
View File

@ -5,7 +5,7 @@ import styled from '@emotion/styled';
import { IconCalendarX } from '@/ui/display/icon';
import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
import { StyledHoverableMenuItemBase } from '@/ui/navigation/menu-item/internals/components/StyledMenuItemBase';
import { overlayBackground } from '@/ui/theme/constants/effects';
import { OVERLAY_BACKGROUND } from '@/ui/theme/constants/OverlayBackground';
import 'react-datepicker/dist/react-datepicker.css';
@ -90,7 +90,7 @@ const StyledContainer = styled.div`
& .react-datepicker__month-dropdown,
& .react-datepicker__year-dropdown {
border: ${({ theme }) => theme.border.color.light};
${overlayBackground}
${OVERLAY_BACKGROUND}
overflow-y: scroll;
top: ${({ theme }) => theme.spacing(2)};
}

18
packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/AnimatedPlaceholder.tsx
View File

@ -4,12 +4,10 @@ import styled from '@emotion/styled';
import { motion, useMotionValue, useTransform } from 'framer-motion';
import { animate } from 'framer-motion';
import {
Background,
DarkBackground,
DarkMovingImage,
MovingImage,
} from '@/ui/layout/animated-placeholder/constants/AnimatedImages';
import { BACKGROUND } from '@/ui/layout/animated-placeholder/constants/Background';
import { DARK_BACKGROUND } from '@/ui/layout/animated-placeholder/constants/DarkBackground';
import { DARK_MOVING_IMAGE } from '@/ui/layout/animated-placeholder/constants/DarkMovingImage';
import { MOVING_IMAGE } from '@/ui/layout/animated-placeholder/constants/MovingImage';
const StyledContainer = styled.div`
display: flex;
@ -39,7 +37,7 @@ const StyledMovingImage = styled(motion.img)<StyledImageProps>`
`;
interface AnimatedPlaceholderProps {
type: keyof typeof Background | keyof typeof MovingImage;
type: keyof typeof BACKGROUND | keyof typeof MOVING_IMAGE;
}
const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
@ -89,12 +87,14 @@ const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
return (
<StyledContainer>
<StyledBackgroundImage
src={theme.name === 'dark' ? DarkBackground[type] : Background[type]}
src={theme.name === 'dark' ? DARK_BACKGROUND[type] : BACKGROUND[type]}
alt="Background"
type={type}
/>
<StyledMovingImage
src={theme.name === 'dark' ? DarkMovingImage[type] : MovingImage[type]}
src={
theme.name === 'dark' ? DARK_MOVING_IMAGE[type] : MOVING_IMAGE[type]
}
alt="Moving"
style={{ translateX, translateY }}
transition={{ type: 'spring', stiffness: 100, damping: 10 }}

59
packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/AnimatedImages.ts
View File

@ -1,59 +0,0 @@
export const Background: Record<string, string> = {
noFile: '/images/placeholders/background/no_file_bg.png',
noNote: '/images/placeholders/background/no_note_bg.png',
noRecord: '/images/placeholders/background/no_record_bg.png',
noMatchRecord: '/images/placeholders/background/no_match_record_bg.png',
noTask: '/images/placeholders/background/no_task_bg.png',
errorIndex: '/images/placeholders/background/error_index_bg.png',
emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png',
loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
emptyInbox: '/images/placeholders/background/empty_inbox_bg.png',
error404: '/images/placeholders/background/404_bg.png',
error500: '/images/placeholders/background/500_bg.png',
};
export const MovingImage: Record<string, string> = {
noFile: '/images/placeholders/moving-image/no_file.png',
noNote: '/images/placeholders/moving-image/no_note.png',
noRecord: '/images/placeholders/moving-image/no_record.png',
noMatchRecord: '/images/placeholders/moving-image/no_match_record.png',
noTask: '/images/placeholders/moving-image/no_task.png',
errorIndex: '/images/placeholders/moving-image/error_index.png',
emptyTimeline: '/images/placeholders/moving-image/empty_timeline.png',
loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
loadingAccounts: '/images/placeholders/moving-image/loading_accounts.png',
emptyInbox: '/images/placeholders/moving-image/empty_inbox.png',
error404: '/images/placeholders/moving-image/404.png',
error500: '/images/placeholders/moving-image/500.png',
};
export const DarkBackground: Record<string, string> = {
noFile: '/images/placeholders/dark-background/no_file_bg.png',
noNote: '/images/placeholders/dark-background/no_note_bg.png',
noRecord: '/images/placeholders/dark-background/no_record_bg.png',
noMatchRecord: '/images/placeholders/dark-background/no_match_record_bg.png',
noTask: '/images/placeholders/dark-background/no_task_bg.png',
errorIndex: '/images/placeholders/dark-background/error_index_bg.png',
emptyTimeline: '/images/placeholders/dark-background/empty_timeline_bg.png',
emptyInbox: '/images/placeholders/dark-background/empty_inbox_bg.png',
error404: '/images/placeholders/dark-background/404_bg.png',
error500: '/images/placeholders/dark-background/500_bg.png',
loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
};
export const DarkMovingImage: Record<string, string> = {
noFile: '/images/placeholders/dark-moving-image/no_file.png',
noNote: '/images/placeholders/dark-moving-image/no_note.png',
noRecord: '/images/placeholders/dark-moving-image/no_record.png',
noMatchRecord: '/images/placeholders/dark-moving-image/no_match_record.png',
noTask: '/images/placeholders/dark-moving-image/no_task.png',
errorIndex: '/images/placeholders/dark-moving-image/error_index.png',
emptyTimeline: '/images/placeholders/dark-moving-image/empty_timeline.png',
emptyInbox: '/images/placeholders/dark-moving-image/empty_inbox.png',
error404: '/images/placeholders/dark-moving-image/404.png',
error500: '/images/placeholders/dark-moving-image/500.png',
loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
loadingAccounts: '/images/placeholders/moving-image/loading_accounts.png',
};

14
packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/Background.ts Normal file
View File

@ -0,0 +1,14 @@
export const BACKGROUND: Record<string, string> = {
noFile: '/images/placeholders/background/no_file_bg.png',
noNote: '/images/placeholders/background/no_note_bg.png',
noRecord: '/images/placeholders/background/no_record_bg.png',
noMatchRecord: '/images/placeholders/background/no_match_record_bg.png',
noTask: '/images/placeholders/background/no_task_bg.png',
errorIndex: '/images/placeholders/background/error_index_bg.png',
emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png',
loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
emptyInbox: '/images/placeholders/background/empty_inbox_bg.png',
error404: '/images/placeholders/background/404_bg.png',
error500: '/images/placeholders/background/500_bg.png',
};

Some files were not shown because too many files have changed in this diff Show More