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/ui/layout/dropdown/hooks/__tests__/useCloseDropdown.test.tsx
+10 -8
View File
@@ -44,12 +44,13 @@ describe('useCloseDropdown', () => {
it('should close dropdown from inside component instance context', async () => {
const { result } = renderHook(
() => {
// eslint-disable-next-line twenty/matching-state-variable
const isOutsideDropdownOpen = useAtomComponentStateValue(
isDropdownOpenComponentState,
outsideDropdownId,
);
const isInsideDropdownOpen = useAtomComponentStateValue(
const isDropdownOpen = useAtomComponentStateValue(
isDropdownOpenComponentState,
);
@@ -58,7 +59,7 @@ describe('useCloseDropdown', () => {
return {
isOutsideDropdownOpen,
isInsideDropdownOpen,
isDropdownOpen,
closeDropdown,
openDropdown,
};
@@ -72,26 +73,27 @@ describe('useCloseDropdown', () => {
result.current.openDropdown();
});
expect(result.current.isInsideDropdownOpen).toBe(true);
expect(result.current.isDropdownOpen).toBe(true);
expect(result.current.isOutsideDropdownOpen).toBe(false);
act(() => {
result.current.closeDropdown();
});
expect(result.current.isInsideDropdownOpen).toBe(false);
expect(result.current.isDropdownOpen).toBe(false);
expect(result.current.isOutsideDropdownOpen).toBe(false);
});
it('should close dropdown from outside component instance context', async () => {
const { result } = renderHook(
() => {
// eslint-disable-next-line twenty/matching-state-variable
const isOutsideDropdownOpen = useAtomComponentStateValue(
isDropdownOpenComponentState,
outsideDropdownId,
);
const isInsideDropdownOpen = useAtomComponentStateValue(
const isDropdownOpen = useAtomComponentStateValue(
isDropdownOpenComponentState,
);
@@ -100,7 +102,7 @@ describe('useCloseDropdown', () => {
return {
isOutsideDropdownOpen,
isInsideDropdownOpen,
isDropdownOpen,
closeDropdown,
openDropdown,
};
@@ -116,14 +118,14 @@ describe('useCloseDropdown', () => {
});
});
expect(result.current.isInsideDropdownOpen).toBe(false);
expect(result.current.isDropdownOpen).toBe(false);
expect(result.current.isOutsideDropdownOpen).toBe(true);
act(() => {
result.current.closeDropdown(outsideDropdownId);
});
expect(result.current.isInsideDropdownOpen).toBe(false);
expect(result.current.isDropdownOpen).toBe(false);
expect(result.current.isOutsideDropdownOpen).toBe(false);
});
});
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useOpenDropdown.test.tsx
+10 -8
View File
@@ -42,57 +42,59 @@ describe('useOpenDropdown', () => {
it('should open dropdown from inside component instance context', async () => {
const { result } = renderHook(
() => {
// eslint-disable-next-line twenty/matching-state-variable
const isOutsideDropdownOpen = useAtomComponentStateValue(
isDropdownOpenComponentState,
outsideDropdownId,
);
const isInsideDropdownOpen = useAtomComponentStateValue(
const isDropdownOpen = useAtomComponentStateValue(
isDropdownOpenComponentState,
);
const { openDropdown } = useOpenDropdown();
return { isOutsideDropdownOpen, isInsideDropdownOpen, openDropdown };
return { isOutsideDropdownOpen, isDropdownOpen, openDropdown };
},
{
wrapper: Wrapper,
},
);
expect(result.current.isInsideDropdownOpen).toBe(false);
expect(result.current.isDropdownOpen).toBe(false);
expect(result.current.isOutsideDropdownOpen).toBe(false);
act(() => {
result.current.openDropdown();
});
expect(result.current.isInsideDropdownOpen).toBe(true);
expect(result.current.isDropdownOpen).toBe(true);
expect(result.current.isOutsideDropdownOpen).toBe(false);
});
it('should open dropdown from outside component instance context', async () => {
const { result } = renderHook(
() => {
// eslint-disable-next-line twenty/matching-state-variable
const isOutsideDropdownOpen = useAtomComponentStateValue(
isDropdownOpenComponentState,
outsideDropdownId,
);
const isInsideDropdownOpen = useAtomComponentStateValue(
const isDropdownOpen = useAtomComponentStateValue(
isDropdownOpenComponentState,
);
const { openDropdown } = useOpenDropdown();
return { isInsideDropdownOpen, isOutsideDropdownOpen, openDropdown };
return { isDropdownOpen, isOutsideDropdownOpen, openDropdown };
},
{
wrapper: Wrapper,
},
);
expect(result.current.isInsideDropdownOpen).toBe(false);
expect(result.current.isDropdownOpen).toBe(false);
expect(result.current.isOutsideDropdownOpen).toBe(false);
act(() => {
@@ -101,7 +103,7 @@ describe('useOpenDropdown', () => {
});
});
expect(result.current.isInsideDropdownOpen).toBe(false);
expect(result.current.isDropdownOpen).toBe(false);
expect(result.current.isOutsideDropdownOpen).toBe(true);
});
});
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useToggleDropdown.test.tsx
+14 -12
View File
@@ -43,69 +43,71 @@ describe('useToggleDropdown', () => {
it('should toggle dropdown from inside component instance context', async () => {
const { result } = renderHook(
() => {
// eslint-disable-next-line twenty/matching-state-variable
const isOutsideDropdownOpen = useAtomComponentStateValue(
isDropdownOpenComponentState,
outsideDropdownId,
);
const isInsideDropdownOpen = useAtomComponentStateValue(
const isDropdownOpen = useAtomComponentStateValue(
isDropdownOpenComponentState,
);
const { toggleDropdown } = useToggleDropdown();
return { isOutsideDropdownOpen, isInsideDropdownOpen, toggleDropdown };
return { isOutsideDropdownOpen, isDropdownOpen, toggleDropdown };
},
{
wrapper: Wrapper,
},
);
expect(result.current.isInsideDropdownOpen).toBe(false);
expect(result.current.isDropdownOpen).toBe(false);
expect(result.current.isOutsideDropdownOpen).toBe(false);
act(() => {
result.current.toggleDropdown();
});
expect(result.current.isInsideDropdownOpen).toBe(true);
expect(result.current.isDropdownOpen).toBe(true);
expect(result.current.isOutsideDropdownOpen).toBe(false);
act(() => {
result.current.toggleDropdown();
});
expect(result.current.isInsideDropdownOpen).toBe(false);
expect(result.current.isDropdownOpen).toBe(false);
expect(result.current.isOutsideDropdownOpen).toBe(false);
act(() => {
result.current.toggleDropdown();
});
expect(result.current.isInsideDropdownOpen).toBe(true);
expect(result.current.isDropdownOpen).toBe(true);
expect(result.current.isOutsideDropdownOpen).toBe(false);
});
it('should toggle dropdown from outside component instance context', async () => {
const { result } = renderHook(
() => {
// eslint-disable-next-line twenty/matching-state-variable
const isOutsideDropdownOpen = useAtomComponentStateValue(
isDropdownOpenComponentState,
outsideDropdownId,
);
const isInsideDropdownOpen = useAtomComponentStateValue(
const isDropdownOpen = useAtomComponentStateValue(
isDropdownOpenComponentState,
);
const { toggleDropdown } = useToggleDropdown();
return { isOutsideDropdownOpen, isInsideDropdownOpen, toggleDropdown };
return { isOutsideDropdownOpen, isDropdownOpen, toggleDropdown };
},
{
wrapper: Wrapper,
},
);
expect(result.current.isInsideDropdownOpen).toBe(false);
expect(result.current.isDropdownOpen).toBe(false);
expect(result.current.isOutsideDropdownOpen).toBe(false);
act(() => {
@@ -114,7 +116,7 @@ describe('useToggleDropdown', () => {
});
});
expect(result.current.isInsideDropdownOpen).toBe(false);
expect(result.current.isDropdownOpen).toBe(false);
expect(result.current.isOutsideDropdownOpen).toBe(true);
act(() => {
@@ -123,7 +125,7 @@ describe('useToggleDropdown', () => {
});
});
expect(result.current.isInsideDropdownOpen).toBe(false);
expect(result.current.isDropdownOpen).toBe(false);
expect(result.current.isOutsideDropdownOpen).toBe(false);
act(() => {
@@ -132,7 +134,7 @@ describe('useToggleDropdown', () => {
});
});
expect(result.current.isInsideDropdownOpen).toBe(false);
expect(result.current.isDropdownOpen).toBe(false);
expect(result.current.isOutsideDropdownOpen).toBe(true);
});
});