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/command-menu/components/CommandMenu.tsx
+3 -2
View File
@@ -39,17 +39,18 @@ export const CommandMenu = () => {
commandMenuSearch,
});
// eslint-disable-next-line twenty/matching-state-variable
const previousContextStoreCurrentObjectMetadataItemId =
useAtomComponentStateValue(
contextStoreCurrentObjectMetadataItemIdComponentState,
'command-menu-previous',
);
const objectMetadataItemId = useAtomComponentStateValue(
const contextStoreCurrentObjectMetadataItemId = useAtomComponentStateValue(
contextStoreCurrentObjectMetadataItemIdComponentState,
);
const currentObjectMetadataItem = objectMetadataItems.find(
(item) => item.id === objectMetadataItemId,
(item) => item.id === contextStoreCurrentObjectMetadataItemId,
);
const commandGroups: ActionGroupConfig[] = [
packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
+5 -4
View File
@@ -29,7 +29,7 @@ type CommandMenuContainerProps = {
export const CommandMenuContainer = ({
children,
}: CommandMenuContainerProps) => {
const objectMetadataItemId = useAtomComponentStateValue(
const contextStoreCurrentObjectMetadataItemId = useAtomComponentStateValue(
contextStoreCurrentObjectMetadataItemIdComponentState,
COMMAND_MENU_COMPONENT_INSTANCE_ID,
);
@@ -38,17 +38,18 @@ export const CommandMenuContainer = ({
const objectMetadataItems = useAtomStateValue(objectMetadataItemsState);
const objectMetadataItem = objectMetadataItems.find(
(objectMetadataItem) => objectMetadataItem.id === objectMetadataItemId,
(objectMetadataItem) =>
objectMetadataItem.id === contextStoreCurrentObjectMetadataItemId,
);
const currentViewId = useAtomComponentStateValue(
const contextStoreCurrentViewId = useAtomComponentStateValue(
contextStoreCurrentViewIdComponentState,
COMMAND_MENU_COMPONENT_INSTANCE_ID,
);
const recordIndexId = getRecordIndexIdFromObjectNamePluralAndViewId(
objectMetadataItem?.namePlural ?? '',
currentViewId ?? '',
contextStoreCurrentViewId ?? '',
);
return (
packages/twenty-front/src/modules/command-menu/components/CommandMenuFolderInfo.tsx
+9 -7
View File
@@ -27,11 +27,13 @@ export const CommandMenuFolderInfo = () => {
const { t } = useLingui();
const { getIcon } = useIcons();
const commandMenuPageInfo = useAtomStateValue(commandMenuPageInfoState);
const [shouldFocusTitleInput, setShouldFocusTitleInput] =
useAtomComponentState(
commandMenuShouldFocusTitleInputComponentState,
commandMenuPageInfo.instanceId,
);
const [
commandMenuShouldFocusTitleInput,
setCommandMenuShouldFocusTitleInput,
] = useAtomComponentState(
commandMenuShouldFocusTitleInputComponentState,
commandMenuPageInfo.instanceId,
);
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
);
@@ -106,8 +108,8 @@ export const CommandMenuFolderInfo = () => {
onClickOutside={handleSave}
onTab={handleSave}
onShiftTab={handleSave}
shouldFocus={shouldFocusTitleInput}
onFocus={() => setShouldFocusTitleInput(false)}
shouldFocus={commandMenuShouldFocusTitleInput}
onFocus={() => setCommandMenuShouldFocusTitleInput(false)}
/>
}
/>
packages/twenty-front/src/modules/command-menu/components/CommandMenuItemWithAddToNavigationDrag.tsx
+4 -2
View File
@@ -41,7 +41,9 @@ export const CommandMenuItemWithAddToNavigationDrag = ({
dragIndex,
}: CommandMenuItemWithAddToNavigationDragProps) => {
const { t } = useLingui();
const setRegistry = useSetAtomState(addToNavPayloadRegistryState);
const setAddToNavPayloadRegistry = useSetAtomState(
addToNavPayloadRegistryState,
);
const [isHovered, setIsHovered] = useState(false);
const contextualDescription = isHovered
@@ -59,7 +61,7 @@ export const CommandMenuItemWithAddToNavigationDrag = ({
const registerPayload = () => {
if (dragIndex !== undefined) {
setRegistry((prev) => new Map(prev).set(id, payload));
setAddToNavPayloadRegistry((prev) => new Map(prev).set(id, payload));
}
};
packages/twenty-front/src/modules/command-menu/components/CommandMenuLinkInfo.tsx
+9 -7
View File
@@ -19,11 +19,13 @@ export const CommandMenuLinkInfo = () => {
const theme = useTheme();
const { t } = useLingui();
const commandMenuPageInfo = useAtomStateValue(commandMenuPageInfoState);
const [shouldFocusTitleInput, setShouldFocusTitleInput] =
useAtomComponentState(
commandMenuShouldFocusTitleInputComponentState,
commandMenuPageInfo.instanceId,
);
const [
commandMenuShouldFocusTitleInput,
setCommandMenuShouldFocusTitleInput,
] = useAtomComponentState(
commandMenuShouldFocusTitleInputComponentState,
commandMenuPageInfo.instanceId,
);
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
);
@@ -84,8 +86,8 @@ export const CommandMenuLinkInfo = () => {
onClickOutside={handleSave}
onTab={handleSave}
onShiftTab={handleSave}
shouldFocus={shouldFocusTitleInput}
onFocus={() => setShouldFocusTitleInput(false)}
shouldFocus={commandMenuShouldFocusTitleInput}
onFocus={() => setCommandMenuShouldFocusTitleInput(false)}
/>
}
label={t`link`}
packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfo.tsx
+3 -3
View File
@@ -7,16 +7,16 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
import { isDefined } from 'twenty-shared/utils';
export const CommandMenuPageLayoutInfo = () => {
const objectMetadataId = useAtomComponentStateValue(
const contextStoreCurrentObjectMetadataItemId = useAtomComponentStateValue(
contextStoreCurrentObjectMetadataItemIdComponentState,
);
if (!isDefined(objectMetadataId)) {
if (!isDefined(contextStoreCurrentObjectMetadataItemId)) {
throw new Error('Object metadata ID is not defined');
}
const { objectMetadataItem } = useObjectMetadataItemById({
objectId: objectMetadataId,
objectId: contextStoreCurrentObjectMetadataItemId,
});
const isDashboardContext =
packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfoContent.tsx
+13 -11
View File
@@ -30,17 +30,19 @@ export const CommandMenuPageLayoutInfoContent = ({
const commandMenuPage = useAtomStateValue(commandMenuPageState);
const commandMenuPageInfo = useAtomStateValue(commandMenuPageInfoState);
const [shouldFocusTitleInput, setShouldFocusTitleInput] =
useAtomComponentState(
commandMenuShouldFocusTitleInputComponentState,
commandMenuPageInfo.instanceId,
);
const [
commandMenuShouldFocusTitleInput,
setCommandMenuShouldFocusTitleInput,
] = useAtomComponentState(
commandMenuShouldFocusTitleInputComponentState,
commandMenuPageInfo.instanceId,
);
const handleTitleInputOpen = () => {
setShouldFocusTitleInput(false);
setCommandMenuShouldFocusTitleInput(false);
};
const draftPageLayout = useAtomComponentStateValue(
const pageLayoutDraft = useAtomComponentStateValue(
pageLayoutDraftComponentState,
pageLayoutId,
);
@@ -50,7 +52,7 @@ export const CommandMenuPageLayoutInfoContent = ({
pageLayoutId,
);
const [openTabId] = useAtomComponentState(
const [pageLayoutTabSettingsOpenTabId] = useAtomComponentState(
pageLayoutTabSettingsOpenTabIdComponentState,
pageLayoutId,
);
@@ -63,9 +65,9 @@ export const CommandMenuPageLayoutInfoContent = ({
const headerInfo = usePageLayoutHeaderInfo({
commandMenuPage,
draftPageLayout,
draftPageLayout: pageLayoutDraft,
pageLayoutEditingWidgetId,
openTabId,
openTabId: pageLayoutTabSettingsOpenTabId,
editedTitle,
});
@@ -136,7 +138,7 @@ export const CommandMenuPageLayoutInfoContent = ({
onClickOutside={saveTitle}
onTab={saveTitle}
onShiftTab={saveTitle}
shouldFocus={shouldFocusTitleInput}
shouldFocus={commandMenuShouldFocusTitleInput}
onFocus={handleTitleInputOpen}
/>
}
packages/twenty-front/src/modules/command-menu/components/CommandMenuWorkflowStepInfo.tsx
+5 -5
View File
@@ -39,7 +39,7 @@ export const CommandMenuWorkflowStepInfo = ({
const workflowId = useCommandMenuWorkflowIdOrThrow();
const workflowStepId = useAtomComponentStateValue(
const commandMenuWorkflowStepId = useAtomComponentStateValue(
commandMenuWorkflowStepIdComponentState,
commandMenuPageInstanceId,
);
@@ -71,13 +71,13 @@ export const CommandMenuWorkflowStepInfo = ({
id: undefined,
};
const isTriggerStep = workflowStepId === TRIGGER_STEP_ID;
const isTriggerStep = commandMenuWorkflowStepId === TRIGGER_STEP_ID;
const stepDefinition =
isDefined(workflowStepId) && isDefined(trigger)
isDefined(commandMenuWorkflowStepId) && isDefined(trigger)
? isTriggerStep || isDefined(steps)
? getStepDefinitionOrThrow({
stepId: workflowStepId,
stepId: commandMenuWorkflowStepId,
trigger,
steps,
})
@@ -109,7 +109,7 @@ export const CommandMenuWorkflowStepInfo = ({
if (
!isDefined(workflowId) ||
!isDefined(workflowStepId) ||
!isDefined(commandMenuWorkflowStepId) ||
!isDefined(workflowWithCurrentVersion?.currentVersion) ||
!isDefined(stepDefinition) ||
!isDefined(stepDefinition.definition)