houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rework atom naming (#18240)

Browse Source 
## Summary

- **Enhanced the `matching-state-variable` ESLint rule** to enforce
consistent naming for `ComponentState`, `FamilyState`, and
`ComponentFamilyState` hooks — previously it only covered `useAtomState`
and `useAtomStateValue`
- **The rule now checks 12 hooks** across three categories: value hooks
(`useAtomComponentStateValue`, `useAtomFamilyStateValue`, etc.), state
hooks (`useAtomComponentState`, `useAtomComponentFamilyState`), and
setter hooks (`useSetAtomState`, `useSetAtomComponentState`,
`useSetAtomFamilyState`, `useSetAtomComponentFamilyState`)
- **Fixed all 225 resulting lint violations** across 151 files, renaming
variables to match their state atom names (e.g. `currentViewId` →
`contextStoreCurrentViewId`, `selectedRecord` → `recordStore`). Cases
where the same state is accessed with different family keys/instance IDs
are suppressed with `eslint-disable-next-line`.

## Naming convention

| Hook | State argument | Valid | Invalid |
|------|---------------|-------|---------|
| `useAtomStateValue` | `fooState` | `const foo = ...` | `const bar =
...` |
| `useAtomComponentStateValue` | `fooComponentState` | `const foo = ...`
| `const bar = ...` |
| `useAtomFamilyStateValue` | `fooFamilyState` | `const foo = ...` |
`const bar = ...` |
| `useAtomComponentFamilyStateValue` | `fooComponentFamilyState` |
`const foo = ...` | `const bar = ...` |
| `useAtomState` | `fooState` | `const [foo, setFoo] = ...` | `const
[bar, setBar] = ...` |
| `useAtomComponentState` | `fooComponentState` | `const [foo, setFoo] =
...` | `const [bar, setBar] = ...` |
| `useAtomComponentFamilyState` | `fooComponentFamilyState` | `const
[foo, setFoo] = ...` | `const [bar, setBar] = ...` |
| `useSetAtomState` | `fooState` | `const setFoo = ...` | `const setBar
= ...` |
| `useSetAtomComponentState` | `fooComponentState` | `const setFoo =
...` | `const setBar = ...` |
| `useSetAtomFamilyState` | `fooFamilyState` | `const setFoo = ...` |
`const setBar = ...` |
| `useSetAtomComponentFamilyState` | `fooComponentFamilyState` | `const
setFoo = ...` | `const setBar = ...` |
This commit is contained in:
Charles Bochet
2026-02-25 22:28:25 +01:00
committed by GitHub
parent 1b805a36f3
commit bc4ae35bc4
321 changed files with 1824 additions and 1518 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx
+8 -8
View File
@@ -104,11 +104,11 @@ export const PageLayoutGridLayout = ({ tabId }: PageLayoutGridLayoutProps) => {
pageLayoutCurrentBreakpointComponentState,
);
const setDraggingWidgetId = useSetAtomComponentState(
const setPageLayoutDraggingWidgetId = useSetAtomComponentState(
pageLayoutDraggingWidgetIdComponentState,
);
const setResizingWidgetId = useSetAtomComponentState(
const setPageLayoutResizingWidgetId = useSetAtomComponentState(
pageLayoutResizingWidgetIdComponentState,
);
@@ -137,7 +137,7 @@ export const PageLayoutGridLayout = ({ tabId }: PageLayoutGridLayoutProps) => {
const pageLayoutDraggedArea = useAtomComponentStateValue(
pageLayoutDraggedAreaComponentState,
);
const draggingWidgetId = useAtomComponentStateValue(
const pageLayoutDraggingWidgetId = useAtomComponentStateValue(
pageLayoutDraggingWidgetIdComponentState,
);
@@ -167,7 +167,7 @@ export const PageLayoutGridLayout = ({ tabId }: PageLayoutGridLayoutProps) => {
[activeTabWidgets, hasPendingPlaceholder],
);
const shouldDisableTransitions = !isDefined(draggingWidgetId);
const shouldDisableTransitions = !isDefined(pageLayoutDraggingWidgetId);
return (
<StyledGridContainer
@@ -202,16 +202,16 @@ export const PageLayoutGridLayout = ({ tabId }: PageLayoutGridLayoutProps) => {
}
resizeHandles={['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw']}
onDragStart={(_layout, _oldItem, newItem) => {
setDraggingWidgetId(newItem.i);
setPageLayoutDraggingWidgetId(newItem.i);
}}
onDragStop={() => {
setDraggingWidgetId(null);
setPageLayoutDraggingWidgetId(null);
}}
onResizeStart={(_layout, _oldItem, newItem) => {
setResizingWidgetId(newItem.i);
setPageLayoutResizingWidgetId(newItem.i);
}}
onResizeStop={() => {
setResizingWidgetId(null);
setPageLayoutResizingWidgetId(null);
}}
onLayoutChange={handleLayoutChangeWithoutPendingPlaceholder}
onBreakpointChange={(newBreakpoint) =>
packages/twenty-front/src/modules/page-layout/components/PageLayoutInitializationQueryEffect.tsx
+6 -7
View File
@@ -22,9 +22,8 @@ export const PageLayoutInitializationQueryEffect = ({
pageLayoutId,
onInitialized,
}: PageLayoutInitializationQueryEffectProps) => {
const [isInitialized, setIsInitialized] = useAtomComponentState(
pageLayoutIsInitializedComponentState,
);
const [pageLayoutIsInitialized, setPageLayoutIsInitialized] =
useAtomComponentState(pageLayoutIsInitializedComponentState);
const basePageLayout = useBasePageLayout(pageLayoutId);
@@ -70,17 +69,17 @@ export const PageLayoutInitializationQueryEffect = ({
);
useEffect(() => {
if (!isInitialized && isDefined(pageLayout)) {
if (!pageLayoutIsInitialized && isDefined(pageLayout)) {
initializePageLayout(pageLayout);
onInitialized?.(pageLayout);
setIsInitialized(true);
setPageLayoutIsInitialized(true);
}
}, [
initializePageLayout,
isInitialized,
pageLayoutIsInitialized,
pageLayout,
onInitialized,
setIsInitialized,
setPageLayoutIsInitialized,
]);
return null;
packages/twenty-front/src/modules/page-layout/components/PageLayoutRelationWidgetsSyncEffect.tsx
+3 -3
View File
@@ -25,7 +25,7 @@ export const PageLayoutRelationWidgetsSyncEffect = ({
}: PageLayoutRelationWidgetsSyncEffectProps) => {
const { targetRecordIdentifier, layoutType } = useLayoutRenderingContext();
const isInitialized = useAtomComponentStateValue(
const pageLayoutIsInitialized = useAtomComponentStateValue(
pageLayoutIsInitializedComponentState,
);
@@ -75,7 +75,7 @@ export const PageLayoutRelationWidgetsSyncEffect = ({
);
useEffect(() => {
if (!isInitialized) {
if (!pageLayoutIsInitialized) {
return;
}
@@ -97,7 +97,7 @@ export const PageLayoutRelationWidgetsSyncEffect = ({
}, [
basePageLayout,
boxedRelationFieldMetadataItems,
isInitialized,
pageLayoutIsInitialized,
layoutType,
syncPageLayoutWithRelationWidgets,
]);
packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
+2 -2
View File
@@ -63,7 +63,7 @@ export const PageLayoutRendererContent = () => {
const { createPageLayoutTab } = useCreatePageLayoutTab(currentPageLayout?.id);
const { reorderTabs } = useReorderPageLayoutTabs(currentPageLayout?.id ?? '');
const setTabSettingsOpenTabId = useSetAtomComponentState(
const setPageLayoutTabSettingsOpenTabId = useSetAtomComponentState(
pageLayoutTabSettingsOpenTabIdComponentState,
);
const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();
@@ -79,7 +79,7 @@ export const PageLayoutRendererContent = () => {
shouldEnableTabEditingFeatures(currentPageLayout.type)
? () => {
const newTabId = createPageLayoutTab(t`Untitled`);
setTabSettingsOpenTabId(newTabId);
setPageLayoutTabSettingsOpenTabId(newTabId);
navigatePageLayoutCommandMenu({
commandMenuPage: CommandMenuPages.PageLayoutTabSettings,
focusTitleInput: true,
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx
+16 -10
View File
@@ -143,7 +143,7 @@ export const PageLayoutTabList = ({
const { openDropdown } = useOpenDropdown();
const { toggleClickOutside } = useClickOutsideListener(dropdownId);
const setIsTabDragging = useSetAtomComponentState(
const setIsPageLayoutTabDragging = useSetAtomComponentState(
isPageLayoutTabDraggingComponentState,
componentInstanceId,
);
@@ -188,9 +188,9 @@ export const PageLayoutTabList = ({
};
const handleDragStart = useCallback<OnDragStartResponder>(() => {
setIsTabDragging(true);
setIsPageLayoutTabDragging(true);
toggleClickOutside(false);
}, [setIsTabDragging, toggleClickOutside]);
}, [setIsPageLayoutTabDragging, toggleClickOutside]);
const handleDragEnd = useCallback<OnDragEndResponder>(
(result, provided) => {
@@ -199,7 +199,7 @@ export const PageLayoutTabList = ({
PAGE_LAYOUT_TAB_LIST_DROPPABLE_IDS.OVERFLOW_TABS;
if (!droppedInOverflow) {
setIsTabDragging(false);
setIsPageLayoutTabDragging(false);
}
toggleClickOutside(true);
@@ -216,18 +216,24 @@ export const PageLayoutTabList = ({
});
}
},
[onReorder, setIsTabDragging, toggleClickOutside, openDropdown, dropdownId],
[
onReorder,
setIsPageLayoutTabDragging,
toggleClickOutside,
openDropdown,
dropdownId,
],
);
const isPageLayoutInEditMode = useAtomComponentStateValue(
isPageLayoutInEditModeComponentState,
pageLayoutId,
);
const tabSettingsOpenTabId = useAtomComponentStateValue(
const pageLayoutTabSettingsOpenTabId = useAtomComponentStateValue(
pageLayoutTabSettingsOpenTabIdComponentState,
pageLayoutId,
);
const setTabSettingsOpenTabId = useSetAtomComponentState(
const setPageLayoutTabSettingsOpenTabId = useSetAtomComponentState(
pageLayoutTabSettingsOpenTabIdComponentState,
pageLayoutId,
);
@@ -235,16 +241,16 @@ export const PageLayoutTabList = ({
const openTabSettings = useCallback(
(tabId: string) => {
setTabSettingsOpenTabId(tabId);
setPageLayoutTabSettingsOpenTabId(tabId);
navigatePageLayoutCommandMenu({
commandMenuPage: CommandMenuPages.PageLayoutTabSettings,
resetNavigationStack: true,
});
},
[setTabSettingsOpenTabId, navigatePageLayoutCommandMenu],
[setPageLayoutTabSettingsOpenTabId, navigatePageLayoutCommandMenu],
);
const isTabSettingsOpen = isDefined(tabSettingsOpenTabId);
const isTabSettingsOpen = isDefined(pageLayoutTabSettingsOpenTabId);
const handleSelectTab = useCallback(
(tabId: string) => {
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableOverflowDropdown.tsx
+6 -6
View File
@@ -81,17 +81,17 @@ export const PageLayoutTabListReorderableOverflowDropdown = ({
const shouldShowEditButton =
isPageLayoutInEditMode && shouldEnableTabEditingFeatures(pageLayoutType);
const isTabDragging = useAtomComponentStateValue(
const isPageLayoutTabDragging = useAtomComponentStateValue(
isPageLayoutTabDraggingComponentState,
instanceId,
);
const setIsTabDragging = useSetAtomComponentState(
const setIsPageLayoutTabDragging = useSetAtomComponentState(
isPageLayoutTabDraggingComponentState,
instanceId,
);
const setTabSettingsOpenTabId = useSetAtomComponentState(
const setPageLayoutTabSettingsOpenTabId = useSetAtomComponentState(
pageLayoutTabSettingsOpenTabIdComponentState,
pageLayoutId,
);
@@ -99,19 +99,19 @@ export const PageLayoutTabListReorderableOverflowDropdown = ({
const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();
const handleClose = () => {
if (!isTabDragging) {
if (!isPageLayoutTabDragging) {
onClose();
}
};
const handleTabSelect = (tabId: string) => {
setIsTabDragging(false);
setIsPageLayoutTabDragging(false);
onSelect(tabId);
handleClose();
};
const handleEditClick = (tabId: string) => {
setTabSettingsOpenTabId(tabId);
setPageLayoutTabSettingsOpenTabId(tabId);
navigatePageLayoutCommandMenu({
commandMenuPage: CommandMenuPages.PageLayoutTabSettings,
});
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableTab.tsx
+2 -2
View File
@@ -27,11 +27,11 @@ export const PageLayoutTabListReorderableTab = ({
disabled,
onSelect,
}: PageLayoutTabListReorderableTabProps) => {
const tabSettingsOpenTabId = useAtomComponentStateValue(
const pageLayoutTabSettingsOpenTabId = useAtomComponentStateValue(
pageLayoutTabSettingsOpenTabIdComponentState,
);
const isSettingsOpenForThisTab = tabSettingsOpenTabId === tab.id;
const isSettingsOpenForThisTab = pageLayoutTabSettingsOpenTabId === tab.id;
return (
<Draggable draggableId={tab.id} index={index} isDragDisabled={disabled}>
{(draggableProvided, draggableSnapshot) => (
packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListEditor.tsx
+3 -3
View File
@@ -61,17 +61,17 @@ export const PageLayoutVerticalListEditor = ({
isInRightDrawer,
});
const setDraggingWidgetId = useSetAtomComponentState(
const setPageLayoutDraggingWidgetId = useSetAtomComponentState(
pageLayoutDraggingWidgetIdComponentState,
);
return (
<DragDropContext
onDragStart={(result) => {
setDraggingWidgetId(result.draggableId);
setPageLayoutDraggingWidgetId(result.draggableId);
}}
onDragEnd={(result) => {
setDraggingWidgetId(null);
setPageLayoutDraggingWidgetId(null);
onReorder(result);
}}
>