mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refacto clickoutside componentv2 (#11644)

Browse Source 
Switch to ComponentV2

Friday morning refacto & chill with @charles

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Guillim
2025-04-18 17:48:30 +02:00
committed by GitHub
parent cf5649a1df
commit 8512904c0a
25 changed files with 151 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/twenty-front/src/modules/action-menu/actions/display/components/ActionButton.tsx
View File

@ -50,7 +50,6 @@ export const ActionButton = ({
/>
<StyledWrapper>
<AppTooltip
// eslint-disable-next-line
anchorSelect={`#action-menu-entry-${action.key}`}
content={label}
delay={TooltipDelay.longDelay}

4
packages/twenty-front/src/modules/captcha/hooks/useRequestFreshCaptchaToken.ts
View File

@ -4,9 +4,9 @@ import { captchaTokenState } from '@/captcha/states/captchaTokenState';
import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState';
import { isCaptchaRequiredForPath } from '@/captcha/utils/isCaptchaRequiredForPath';
import { captchaState } from '@/client-config/states/captchaState';
import { useLocation } from 'react-router-dom';
import { CaptchaDriverType } from '~/generated-metadata/graphql';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
import { useLocation } from 'react-router-dom';
declare global {
interface Window {
@ -52,8 +52,6 @@ export const useRequestFreshCaptchaToken = () => {
});
break;
case CaptchaDriverType.Turnstile:
// TODO: fix workspace-no-hardcoded-colors rule
// eslint-disable-next-line @nx/workspace-no-hardcoded-colors
captchaWidget = window.turnstile.render('#captcha-widget', {
sitekey: captcha.siteKey,
});

1
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx
View File

@ -153,7 +153,6 @@ export const ObjectOptionsDropdownMenuContent = () => {
</div>
{currentView?.key === 'INDEX' && (
<AppTooltip
// eslint-disable-next-line
anchorSelect={`#delete-view-menu-item`}
content={t`Not available on Default View`}
noArrow

10
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx
View File

@ -17,8 +17,8 @@ import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useState } from 'react';
import { useDebouncedCallback } from 'use-debounce';
import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display';
import { useDebouncedCallback } from 'use-debounce';
const StyledDropdownMenuIconAndNameContainer = styled.div`
align-items: center;
@ -52,11 +52,13 @@ const StyledMainText = styled.div`
max-width: 100%;
`;
type ObjectOptionsDropdownMenuViewNameProps = {
currentView: View;
};
export const ObjectOptionsDropdownMenuViewName = ({
currentView,
}: {
currentView: View;
}) => {
}: ObjectOptionsDropdownMenuViewNameProps) => {
const [viewPickerSelectedIcon, setViewPickerSelectedIcon] =
useRecoilComponentStateV2(viewPickerSelectedIconComponentState);

6
packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
View File

@ -62,7 +62,7 @@ export const RecordBoard = () => {
useContext(RecordBoardContext);
const boardRef = useRef<HTMLDivElement>(null);
const { toggleClickOutsideListener } = useClickOutsideListener(
const { toggleClickOutside } = useClickOutsideListener(
RECORD_BOARD_CLICK_OUTSIDE_LISTENER_ID,
);
@ -73,11 +73,11 @@ export const RecordBoard = () => {
const handleDragSelectionStart = () => {
closeDropdown(actionMenuId);
toggleClickOutsideListener(false);
toggleClickOutside(false);
};
const handleDragSelectionEnd = () => {
toggleClickOutsideListener(true);
toggleClickOutside(true);
};
const visibleRecordGroupIds = useRecoilComponentFamilyValueV2(

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

@ -24,6 +24,7 @@ const StyledNewButtonContainer = styled.div`
padding-bottom: ${({ theme }) => theme.spacing(4)};
`;
// eslint-disable-next-line @nx/workspace-no-hardcoded-colors
const StyledSkeletonCardContainer = styled.div`
background-color: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.background.quaternary};

5
packages/twenty-front/src/modules/object-record/record-table/__stories__/RecordTable.stories.tsx
View File

@ -62,6 +62,11 @@ export const HeaderMenuOpen: Story = {
};
export const ScrolledLeft: Story = {
parameters: {
container: {
width: 1000,
},
},
play: async () => {
const canvas = within(document.body);
await canvas.findByText('Linkedin');

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

@ -20,7 +20,7 @@ export const RecordTable = () => {
const tableBodyRef = useRef<HTMLTableElement>(null);
const { toggleClickOutsideListener } = useClickOutsideListener(
const { toggleClickOutside } = useClickOutsideListener(
RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
);
@ -57,11 +57,11 @@ export const RecordTable = () => {
const handleDragSelectionStart = () => {
resetTableRowSelection();
toggleClickOutsideListener(false);
toggleClickOutside(false);
};
const handleDragSelectionEnd = () => {
toggleClickOutsideListener(true);
toggleClickOutside(true);
};
return (

6
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/internal/useCloseRecordTableCellInGroup.ts
View File

@ -15,7 +15,7 @@ export const useCloseRecordTableCellInGroup = () => {
const setHotkeyScope = useSetHotkeyScope();
const { setDragSelectionStartEnabled } = useDragSelect();
const { toggleClickOutsideListener } = useClickOutsideListener(
const { toggleClickOutside } = useClickOutsideListener(
FOCUS_CLICK_OUTSIDE_LISTENER_ID,
);
@ -24,7 +24,7 @@ export const useCloseRecordTableCellInGroup = () => {
const closeTableCellInGroup = useRecoilCallback(
() => () => {
toggleClickOutsideListener(true);
toggleClickOutside(true);
setDragSelectionStartEnabled(true);
closeCurrentTableCellInEditMode();
setHotkeyScope(TableHotkeyScope.TableFocus);
@ -33,7 +33,7 @@ export const useCloseRecordTableCellInGroup = () => {
closeCurrentTableCellInEditMode,
setDragSelectionStartEnabled,
setHotkeyScope,
toggleClickOutsideListener,
toggleClickOutside,
],
);

6
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/internal/useCloseRecordTableCellNoGroup.ts
View File

@ -15,7 +15,7 @@ export const useCloseRecordTableCellNoGroup = () => {
const { setDragSelectionStartEnabled } = useDragSelect();
const { toggleClickOutsideListener } = useClickOutsideListener(
const { toggleClickOutside } = useClickOutsideListener(
FOCUS_CLICK_OUTSIDE_LISTENER_ID,
);
@ -23,7 +23,7 @@ export const useCloseRecordTableCellNoGroup = () => {
useCloseCurrentTableCellInEditMode(recordTableId);
const closeTableCellNoGroup = useCallback(() => {
toggleClickOutsideListener(true);
toggleClickOutside(true);
setDragSelectionStartEnabled(true);
closeCurrentTableCellInEditMode();
setHotkeyScope(TableHotkeyScope.TableFocus);
@ -31,7 +31,7 @@ export const useCloseRecordTableCellNoGroup = () => {
closeCurrentTableCellInEditMode,
setDragSelectionStartEnabled,
setHotkeyScope,
toggleClickOutsideListener,
toggleClickOutside,
]);
return {

22
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts
View File

@ -24,7 +24,9 @@ import { recordTableCellEditModePositionComponentState } from '@/object-record/r
import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
import { useNavigate } from 'react-router-dom';
@ -46,9 +48,11 @@ export type OpenTableCellArgs = {
};
export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
const { getClickOutsideListenerIsActivatedState } =
useClickOustideListenerStates(RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID);
const clickOutsideListenerIsActivatedState =
useRecoilComponentCallbackStateV2(
clickOutsideListenerIsActivatedComponentState,
RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
);
const { indexIdentifierUrl } = useRecordIndexContextOrThrow();
const setCurrentTableCellInEditModePosition = useSetRecoilComponentStateV2(
recordTableCellEditModePositionComponentState,
@ -58,7 +62,7 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
const { setDragSelectionStartEnabled } = useDragSelect();
const leaveTableFocus = useLeaveTableFocus(tableScopeId);
const { toggleClickOutsideListener } = useClickOutsideListener(
const { toggleClickOutside } = useClickOutsideListener(
FOCUS_CLICK_OUTSIDE_LISTENER_ID,
);
@ -94,7 +98,7 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
return;
}
set(getClickOutsideListenerIsActivatedState, false);
set(clickOutsideListenerIsActivatedState, false);
const isFirstColumnCell = cellPosition.column === 0;
@ -163,7 +167,7 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
),
});
toggleClickOutsideListener(false);
toggleClickOutside(false);
setActiveDropdownFocusIdAndMemorizePrevious(
getDropdownFocusIdForRecordField(
@ -174,12 +178,12 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
);
},
[
getClickOutsideListenerIsActivatedState,
clickOutsideListenerIsActivatedState,
setDragSelectionStartEnabled,
openFieldInput,
setCurrentTableCellInEditModePosition,
initDraftValue,
toggleClickOutsideListener,
toggleClickOutside,
setActiveDropdownFocusIdAndMemorizePrevious,
leaveTableFocus,
navigate,

1
packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx
View File

@ -22,6 +22,7 @@ interface BlockEditorProps {
readonly?: boolean;
}
// eslint-disable-next-line @nx/workspace-no-hardcoded-colors
const StyledEditor = styled.div`
width: 100%;

15
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useClickOutsideListener.test.tsx
View File

@ -1,8 +1,9 @@
import { act, renderHook } from '@testing-library/react';
import { RecoilRoot, useRecoilValue } from 'recoil';
import { RecoilRoot } from 'recoil';
import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
const componentId = 'componentId';
@ -10,12 +11,12 @@ describe('useClickOutsideListener', () => {
it('should toggle the click outside listener activation state', async () => {
const { result } = renderHook(
() => {
const { getClickOutsideListenerIsActivatedState } =
useClickOustideListenerStates(componentId);
return {
useClickOutside: useClickOutsideListener(componentId),
isActivated: useRecoilValue(getClickOutsideListenerIsActivatedState),
isActivated: useRecoilComponentValueV2(
clickOutsideListenerIsActivatedComponentState,
componentId,
),
};
},
{
@ -23,7 +24,7 @@ describe('useClickOutsideListener', () => {
},
);
const toggle = result.current.useClickOutside.toggleClickOutsideListener;
const toggle = result.current.useClickOutside.toggleClickOutside;
act(() => {
toggle(true);

29
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOustideListenerStates.ts
View File

@ -1,29 +0,0 @@
import { clickOutsideListenerCallbacksComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksComponentState';
import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
import { clickOutsideListenerIsMouseDownInsideComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState';
import { clickOutsideListenerMouseDownHappenedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerMouseDownHappenedComponentState';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
export const useClickOustideListenerStates = (componentId: string) => {
const scopeId = componentId;
return {
scopeId,
getClickOutsideListenerCallbacksState: extractComponentState(
clickOutsideListenerCallbacksComponentState,
scopeId,
),
getClickOutsideListenerIsMouseDownInsideState: extractComponentState(
clickOutsideListenerIsMouseDownInsideComponentState,
scopeId,
),
getClickOutsideListenerIsActivatedState: extractComponentState(
clickOutsideListenerIsActivatedComponentState,
scopeId,
),
getClickOutsideListenerMouseDownHappenedState: extractComponentState(
clickOutsideListenerMouseDownHappenedComponentState,
scopeId,
),
};
};

128
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOutsideListener.ts
View File

@ -1,126 +1,38 @@
import { useEffect } from 'react';
import { useRecoilCallback } from 'recoil';
import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
import { clickOutsideListenerMouseDownHappenedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerMouseDownHappenedComponentState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { ClickOutsideListenerCallback } from '@/ui/utilities/pointer-event/types/ClickOutsideListenerCallback';
import { toSpliced } from '~/utils/array/toSpliced';
import { isDefined } from 'twenty-shared/utils';
export const useClickOutsideListener = (instanceId: string) => {
const clickOutsideListenerIsActivatedState =
useRecoilComponentCallbackStateV2(
clickOutsideListenerIsActivatedComponentState,
instanceId,
);
export const useClickOutsideListener = (componentId: string) => {
const {
getClickOutsideListenerIsActivatedState,
getClickOutsideListenerCallbacksState,
getClickOutsideListenerMouseDownHappenedState,
} = useClickOustideListenerStates(componentId);
const clickOutsideListenerMouseDownHappenedState =
useRecoilComponentCallbackStateV2(
clickOutsideListenerMouseDownHappenedComponentState,
instanceId,
);
const toggleClickOutsideListener = useRecoilCallback(
const toggleClickOutside = useRecoilCallback(
({ set }) =>
(activated: boolean) => {
set(getClickOutsideListenerIsActivatedState, activated);
set(clickOutsideListenerIsActivatedState, activated);
if (!activated) {
set(getClickOutsideListenerMouseDownHappenedState, false);
set(clickOutsideListenerMouseDownHappenedState, false);
}
},
[
getClickOutsideListenerIsActivatedState,
getClickOutsideListenerMouseDownHappenedState,
clickOutsideListenerIsActivatedState,
clickOutsideListenerMouseDownHappenedState,
],
);
const registerOnClickOutsideCallback = useRecoilCallback(
({ set, snapshot }) =>
({ callbackFunction, callbackId }: ClickOutsideListenerCallback) => {
const existingCallbacks = snapshot
.getLoadable(getClickOutsideListenerCallbacksState)
.getValue();
const existingCallbackWithSameId = existingCallbacks.find(
(callback) => callback.callbackId === callbackId,
);
if (!isDefined(existingCallbackWithSameId)) {
const existingCallbacksWithNewCallback = existingCallbacks.concat({
callbackId,
callbackFunction,
});
set(
getClickOutsideListenerCallbacksState,
existingCallbacksWithNewCallback,
);
} else {
const existingCallbacksWithOverwrittenCallback = [
...existingCallbacks,
];
const indexOfExistingCallbackWithSameId =
existingCallbacksWithOverwrittenCallback.findIndex(
(callback) => callback.callbackId === callbackId,
);
existingCallbacksWithOverwrittenCallback[
indexOfExistingCallbackWithSameId
] = {
callbackId,
callbackFunction,
};
set(
getClickOutsideListenerCallbacksState,
existingCallbacksWithOverwrittenCallback,
);
}
},
[getClickOutsideListenerCallbacksState],
);
const unregisterOnClickOutsideCallback = useRecoilCallback(
({ set, snapshot }) =>
({ callbackId }: { callbackId: string }) => {
const existingCallbacks = snapshot
.getLoadable(getClickOutsideListenerCallbacksState)
.getValue();
const indexOfCallbackToUnsubscribe = existingCallbacks.findIndex(
(callback) => callback.callbackId === callbackId,
);
const callbackToUnsubscribeIsFound = indexOfCallbackToUnsubscribe > -1;
if (callbackToUnsubscribeIsFound) {
const newCallbacksWithoutCallbackToUnsubscribe = toSpliced(
existingCallbacks,
indexOfCallbackToUnsubscribe,
1,
);
set(
getClickOutsideListenerCallbacksState,
newCallbacksWithoutCallbackToUnsubscribe,
);
}
},
[getClickOutsideListenerCallbacksState],
);
const useRegisterClickOutsideListenerCallback = (
callback: ClickOutsideListenerCallback,
) => {
useEffect(() => {
registerOnClickOutsideCallback(callback);
return () => {
unregisterOnClickOutsideCallback({
callbackId: callback.callbackId,
});
};
}, [callback]);
};
return {
toggleClickOutsideListener,
useRegisterClickOutsideListenerCallback,
toggleClickOutside,
};
};

52
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts
View File

@ -1,8 +1,10 @@
import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
import { clickOutsideListenerIsMouseDownInsideComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState';
import { clickOutsideListenerMouseDownHappenedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerMouseDownHappenedComponentState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import React, { useEffect } from 'react';
import { useRecoilCallback } from 'recoil';
import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
const CLICK_OUTSIDE_DEBUG_MODE = false;
export enum ClickOutsideMode {
@ -27,20 +29,30 @@ export const useListenClickOutside = <T extends Element>({
listenerId,
enabled = true,
}: ClickOutsideListenerProps<T>) => {
const {
getClickOutsideListenerIsMouseDownInsideState,
getClickOutsideListenerIsActivatedState,
getClickOutsideListenerMouseDownHappenedState,
} = useClickOustideListenerStates(listenerId);
const clickOutsideListenerIsMouseDownInsideState =
useRecoilComponentCallbackStateV2(
clickOutsideListenerIsMouseDownInsideComponentState,
listenerId,
);
const clickOutsideListenerIsActivatedState =
useRecoilComponentCallbackStateV2(
clickOutsideListenerIsActivatedComponentState,
listenerId,
);
const clickOutsideListenerMouseDownHappenedState =
useRecoilComponentCallbackStateV2(
clickOutsideListenerMouseDownHappenedComponentState,
listenerId,
);
const handleMouseDown = useRecoilCallback(
({ snapshot, set }) =>
(event: MouseEvent | TouchEvent) => {
const clickOutsideListenerIsActivated = snapshot
.getLoadable(getClickOutsideListenerIsActivatedState)
.getLoadable(clickOutsideListenerIsActivatedState)
.getValue();
set(getClickOutsideListenerMouseDownHappenedState, true);
set(clickOutsideListenerMouseDownHappenedState, true);
const isListening = clickOutsideListenerIsActivated && enabled;
@ -55,7 +67,7 @@ export const useListenClickOutside = <T extends Element>({
.some((ref) => ref.current?.contains(event.target as Node));
set(
getClickOutsideListenerIsMouseDownInsideState,
clickOutsideListenerIsMouseDownInsideState,
clickedOnAtLeastOneRef,
);
break;
@ -93,7 +105,7 @@ export const useListenClickOutside = <T extends Element>({
});
set(
getClickOutsideListenerIsMouseDownInsideState,
clickOutsideListenerIsMouseDownInsideState,
clickedOnAtLeastOneRef,
);
break;
@ -105,12 +117,12 @@ export const useListenClickOutside = <T extends Element>({
}
},
[
getClickOutsideListenerIsActivatedState,
getClickOutsideListenerMouseDownHappenedState,
clickOutsideListenerIsActivatedState,
clickOutsideListenerMouseDownHappenedState,
enabled,
mode,
refs,
getClickOutsideListenerIsMouseDownInsideState,
clickOutsideListenerIsMouseDownInsideState,
],
);
@ -118,17 +130,17 @@ export const useListenClickOutside = <T extends Element>({
({ snapshot }) =>
(event: MouseEvent | TouchEvent) => {
const clickOutsideListenerIsActivated = snapshot
.getLoadable(getClickOutsideListenerIsActivatedState)
.getLoadable(clickOutsideListenerIsActivatedState)
.getValue();
const isListening = clickOutsideListenerIsActivated && enabled;
const isMouseDownInside = snapshot
.getLoadable(getClickOutsideListenerIsMouseDownInsideState)
.getLoadable(clickOutsideListenerIsMouseDownInsideState)
.getValue();
const hasMouseDownHappened = snapshot
.getLoadable(getClickOutsideListenerMouseDownHappenedState)
.getLoadable(clickOutsideListenerMouseDownHappenedState)
.getValue();
const clickedElement = event.target as HTMLElement;
@ -241,10 +253,10 @@ export const useListenClickOutside = <T extends Element>({
}
},
[
getClickOutsideListenerIsActivatedState,
clickOutsideListenerIsActivatedState,
enabled,
getClickOutsideListenerIsMouseDownInsideState,
getClickOutsideListenerMouseDownHappenedState,
clickOutsideListenerIsMouseDownInsideState,
clickOutsideListenerMouseDownHappenedState,
mode,
refs,
excludeClassNames,

9
packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksComponentState.ts
View File

@ -1,9 +0,0 @@
import { ClickOutsideListenerCallback } from '@/ui/utilities/pointer-event/types/ClickOutsideListenerCallback';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const clickOutsideListenerCallbacksComponentState = createComponentState<
ClickOutsideListenerCallback[]
>({
key: 'clickOutsideListenerCallbacksComponentState',
defaultValue: [],
});

6
packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState.ts
View File

@ -1,7 +1,9 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { ClickOutsideListenerComponentInstanceContext } from '@/ui/utilities/pointer-event/states/contexts/ClickOutsideListenerComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const clickOutsideListenerIsActivatedComponentState =
createComponentState<boolean>({
createComponentStateV2<boolean>({
key: 'clickOutsideListenerIsActivatedComponentState',
defaultValue: true,
componentInstanceContext: ClickOutsideListenerComponentInstanceContext,
});

6
packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState.ts
View File

@ -1,7 +1,9 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { ClickOutsideListenerComponentInstanceContext } from '@/ui/utilities/pointer-event/states/contexts/ClickOutsideListenerComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const clickOutsideListenerIsMouseDownInsideComponentState =
createComponentState<boolean>({
createComponentStateV2<boolean>({
key: 'clickOutsideListenerIsMouseDownInsideComponentState',
defaultValue: false,
componentInstanceContext: ClickOutsideListenerComponentInstanceContext,
});

6
packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerMouseDownHappenedComponentState.ts
View File

@ -1,7 +1,9 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { ClickOutsideListenerComponentInstanceContext } from '@/ui/utilities/pointer-event/states/contexts/ClickOutsideListenerComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const clickOutsideListenerMouseDownHappenedComponentState =
createComponentState<boolean>({
createComponentStateV2<boolean>({
key: 'clickOutsideListenerMouseDownHappenedComponentState',
defaultValue: false,
componentInstanceContext: ClickOutsideListenerComponentInstanceContext,
});

4
packages/twenty-front/src/modules/ui/utilities/pointer-event/states/contexts/ClickOutsideListenerComponentInstanceContext.ts Normal file
View File

@ -0,0 +1,4 @@
import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
export const ClickOutsideListenerComponentInstanceContext =
createComponentInstanceContext();

10
packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx
View File

@ -13,6 +13,7 @@ import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort
import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { RecordTableBodyContextProvider } from '@/object-record/record-table/contexts/RecordTableBodyContext';
import { RecordTableContextProvider } from '@/object-record/record-table/contexts/RecordTableContext';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/utils/getRecordIndexIdFromObjectNamePluralAndViewId';
@ -21,6 +22,7 @@ import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewCompon
import { View } from '@/views/types/View';
import { useEffect, useMemo } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { getCompaniesMock } from '~/testing/mock-data/companies';
import { mockedViewFieldsData } from '~/testing/mock-data/view-fields';
import { mockedViewsData } from '~/testing/mock-data/views';
@ -31,6 +33,8 @@ const InternalTableStateLoaderEffect = ({
}) => {
const { loadRecordIndexStates } = useLoadRecordIndexStates();
const { setRecordTableData } = useRecordTable();
const view = useMemo(() => {
return {
...mockedViewsData[0],
@ -42,7 +46,11 @@ const InternalTableStateLoaderEffect = ({
useEffect(() => {
loadRecordIndexStates(view, objectMetadataItem);
}, [loadRecordIndexStates, objectMetadataItem, view]);
setRecordTableData({
records: getCompaniesMock(),
totalCount: getCompaniesMock().length,
});
}, [loadRecordIndexStates, objectMetadataItem, setRecordTableData, view]);
return null;
};

1
tools/eslint-rules/jest.config.ts
View File

@ -1,6 +1,7 @@
/* eslint-disable */
export default {
displayName: 'eslint-rules',
silent: false,
preset: '../../jest.preset.js',
transform: {
'^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],

16
tools/eslint-rules/rules/no-hardcoded-colors.spec.ts
View File

@ -51,5 +51,21 @@ ruleTester.run(RULE_NAME, rule, {
},
],
},
{
code: 'const myCss = css`color: #123; background-color: ${theme.background.secondary};`',
errors: [
{
messageId: 'hardcodedColor',
},
],
},
{
code: 'const myCss = styled.div`color: ${({ theme }) => theme.font.color.primary};flex-shrink: 0;background-color: #123;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;`',
errors: [
{
messageId: 'hardcodedColor',
},
],
},
],
});

11
tools/eslint-rules/rules/no-hardcoded-colors.ts
View File

@ -21,7 +21,7 @@ export const rule = ESLintUtils.RuleCreator(() => __filename)({
defaultOptions: [],
create: (context) => {
const testHardcodedColor = (
literal: TSESTree.Literal | TSESTree.TemplateLiteral,
literal: TSESTree.Literal | TSESTree.TemplateLiteral
) => {
const colorRegex = /(?:rgba?\()|(?:#[0-9a-fA-F]{3,6})\b/i;
@ -39,7 +39,8 @@ export const rule = ESLintUtils.RuleCreator(() => __filename)({
});
}
} else if (literal.type === TSESTree.AST_NODE_TYPES.TemplateLiteral) {
const firstStringValue = literal.quasis[0]?.value.raw;
for (const quasi of literal.quasis) {
const firstStringValue = quasi.value.raw;
if (colorRegex.test(firstStringValue)) {
context.report({
@ -51,11 +52,13 @@ export const rule = ESLintUtils.RuleCreator(() => __filename)({
});
}
}
}
};
return {
Literal: testHardcodedColor,
TemplateLiteral: testHardcodedColor,
Literal: (literal: TSESTree.Literal) => testHardcodedColor(literal),
TemplateLiteral: (templateLiteral: TSESTree.TemplateLiteral) =>
testHardcodedColor(templateLiteral),
};
},
});