Rework atom naming (#18240)

## 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 = ...` |
2026-02-25 22:28:25 +01:00
parent 1b805a36f3
commit bc4ae35bc4
321 changed files with 1824 additions and 1518 deletions
@@ -54,7 +54,7 @@ export const ObjectOptionsDropdownCustomView = ({
      }
    : null;

-  const recordGroupFieldMetadata = useAtomComponentStateValue(
+  const recordIndexGroupFieldMetadataItem = useAtomComponentStateValue(
    recordIndexGroupFieldMetadataItemComponentState,
  );

@@ -224,7 +224,7 @@ export const ObjectOptionsDropdownCustomView = ({
              <SelectableListItem
                itemId="Group"
                onEnter={() =>
-                  isDefined(recordGroupFieldMetadata)
+                  isDefined(recordIndexGroupFieldMetadataItem)
                    ? onContentChange('recordGroups')
                    : onContentChange('recordGroupFields')
                }
@@ -232,7 +232,7 @@ export const ObjectOptionsDropdownCustomView = ({
                <MenuItem
                  focused={selectedItemId === 'Group'}
                  onClick={() =>
-                    isDefined(recordGroupFieldMetadata)
+                    isDefined(recordIndexGroupFieldMetadataItem)
                      ? onContentChange('recordGroups')
                      : onContentChange('recordGroupFields')
                  }
@@ -241,7 +241,7 @@ export const ObjectOptionsDropdownCustomView = ({
                  contextualText={
                    isDefaultView
                      ? t`Not available on Default View`
-                      : recordGroupFieldMetadata?.label
+                      : recordIndexGroupFieldMetadataItem?.label
                  }
                  contextualTextPosition="right"
                  hasSubMenu
@@ -36,7 +36,7 @@ export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {
    viewType,
  } = useObjectOptionsDropdown();

-  const recordGroupFieldMetadata = useAtomComponentStateValue(
+  const recordIndexGroupFieldMetadataItem = useAtomComponentStateValue(
    recordIndexGroupFieldMetadataItemComponentState,
  );

@@ -61,7 +61,7 @@ export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {

  const viewGroupSettingsUrl = getSettingsPath(SettingsPath.ObjectFieldEdit, {
    objectNamePlural,
-    fieldName: recordGroupFieldMetadata?.name ?? '',
+    fieldName: recordIndexGroupFieldMetadataItem?.name ?? '',
  });

  const location = useLocation();
@@ -88,10 +88,10 @@ export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {
          />
        }
      >
-        {t`Hidden`} {recordGroupFieldMetadata?.label}
+        {t`Hidden`} {recordIndexGroupFieldMetadataItem?.label}
      </DropdownMenuHeader>
      <RecordGroupsVisibilityDropdownSection
-        title={`${t`Hidden`} ${recordGroupFieldMetadata?.label}`}
+        title={`${t`Hidden`} ${recordIndexGroupFieldMetadataItem?.label}`}
        recordGroupIds={hiddenRecordGroupIds}
        onVisibilityChange={handleRecordGroupVisibilityChange}
        isDraggable={false}
@@ -66,7 +66,7 @@ export const ObjectOptionsDropdownLayoutContent = () => {
  const recordIndexCalendarLayout = useAtomStateValue(
    recordIndexCalendarLayoutState,
  );
-  const recordGroupFieldMetadata = useAtomComponentStateValue(
+  const recordIndexGroupFieldMetadataItem = useAtomComponentStateValue(
    recordIndexGroupFieldMetadataItemComponentState,
  );

@@ -282,7 +282,7 @@ export const ObjectOptionsDropdownLayoutContent = () => {
              <SelectableListItem
                itemId="Group"
                onEnter={() => {
-                  isDefined(recordGroupFieldMetadata)
+                  isDefined(recordIndexGroupFieldMetadataItem)
                    ? onContentChange('recordGroups')
                    : onContentChange('recordGroupFields');
                }}
@@ -290,13 +290,13 @@ export const ObjectOptionsDropdownLayoutContent = () => {
                <MenuItem
                  focused={selectedItemId === 'Group'}
                  onClick={() =>
-                    isDefined(recordGroupFieldMetadata)
+                    isDefined(recordIndexGroupFieldMetadataItem)
                      ? onContentChange('recordGroups')
                      : onContentChange('recordGroupFields')
                  }
                  LeftIcon={IconLayoutList}
                  text={t`Group`}
-                  contextualText={recordGroupFieldMetadata?.label}
+                  contextualText={recordIndexGroupFieldMetadataItem?.label}
                  contextualTextPosition="right"
                  hasSubMenu
                />
@@ -52,7 +52,7 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
    hiddenRecordGroupIdsComponentSelector,
  );

-  const recordGroupFieldMetadata = useAtomComponentStateValue(
+  const recordIndexGroupFieldMetadataItem = useAtomComponentStateValue(
    recordIndexGroupFieldMetadataItemComponentState,
  );

@@ -109,7 +109,7 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
        StartComponent={
          <DropdownMenuHeaderLeftComponent
            onClick={() =>
-              isDefined(recordGroupFieldMetadata)
+              isDefined(recordIndexGroupFieldMetadataItem)
                ? onContentChange('recordGroups')
                : resetContent()
            }
@@ -130,14 +130,16 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
        {viewType === ViewType.Table && (
          <MenuItemSelect
            text={t`None`}
-            selected={!isDefined(recordGroupFieldMetadata)}
+            selected={!isDefined(recordIndexGroupFieldMetadataItem)}
            onClick={handleResetRecordGroupField}
          />
        )}
        {filteredRecordGroupFieldMetadataItems.map((fieldMetadataItem) => (
          <MenuItemSelect
            key={fieldMetadataItem.id}
-            selected={fieldMetadataItem.id === recordGroupFieldMetadata?.id}
+            selected={
+              fieldMetadataItem.id === recordIndexGroupFieldMetadataItem?.id
+            }
            onClick={() => handleRecordGroupFieldChange(fieldMetadataItem)}
            LeftIcon={getIcon(fieldMetadataItem.icon)}
            text={fieldMetadataItem.label}
@@ -31,12 +31,11 @@ export const ObjectOptionsDropdownRecordGroupSortContent = () => {
    hiddenRecordGroupIdsComponentSelector,
  );

-  const [recordGroupSort, setRecordGroupSort] = useAtomComponentState(
-    recordIndexRecordGroupSortComponentState,
-  );
+  const [recordIndexRecordGroupSort, setRecordIndexRecordGroupSort] =
+    useAtomComponentState(recordIndexRecordGroupSortComponentState);

  const handleRecordGroupSortChange = (sort: RecordGroupSort) => {
-    setRecordGroupSort(sort);
+    setRecordIndexRecordGroupSort(sort);
  };

  const selectedItemId = useAtomComponentStateValue(
@@ -87,7 +86,7 @@ export const ObjectOptionsDropdownRecordGroupSortContent = () => {
              }
              LeftIcon={IconHandMove}
              text={RecordGroupSort.Manual}
-              selected={recordGroupSort === RecordGroupSort.Manual}
+              selected={recordIndexRecordGroupSort === RecordGroupSort.Manual}
              focused={selectedItemId === RecordGroupSort.Manual}
            />
          </SelectableListItem>
@@ -103,7 +102,9 @@ export const ObjectOptionsDropdownRecordGroupSortContent = () => {
              }
              LeftIcon={IconSortAZ}
              text={RecordGroupSort.Alphabetical}
-              selected={recordGroupSort === RecordGroupSort.Alphabetical}
+              selected={
+                recordIndexRecordGroupSort === RecordGroupSort.Alphabetical
+              }
              focused={selectedItemId === RecordGroupSort.Alphabetical}
            />
          </SelectableListItem>
@@ -119,7 +120,10 @@ export const ObjectOptionsDropdownRecordGroupSortContent = () => {
              }
              LeftIcon={IconSortZA}
              text={RecordGroupSort.ReverseAlphabetical}
-              selected={recordGroupSort === RecordGroupSort.ReverseAlphabetical}
+              selected={
+                recordIndexRecordGroupSort ===
+                RecordGroupSort.ReverseAlphabetical
+              }
              focused={selectedItemId === RecordGroupSort.ReverseAlphabetical}
            />
          </SelectableListItem>
@@ -48,7 +48,7 @@ export const ObjectOptionsDropdownRecordGroupsContent = () => {

  const { currentView } = useGetCurrentViewOnly();

-  const recordGroupFieldMetadata = useAtomComponentStateValue(
+  const recordIndexGroupFieldMetadataItem = useAtomComponentStateValue(
    recordIndexGroupFieldMetadataItemComponentState,
  );

@@ -61,14 +61,16 @@ export const ObjectOptionsDropdownRecordGroupsContent = () => {
    hiddenRecordGroupIdsComponentSelector,
  );

-  const hideEmptyRecordGroup = useAtomComponentStateValue(
+  const recordIndexShouldHideEmptyRecordGroups = useAtomComponentStateValue(
    recordIndexShouldHideEmptyRecordGroupsComponentState,
  );

  const shouldHideEmptyGroups =
-    hideEmptyRecordGroup ?? currentView?.shouldHideEmptyGroups ?? false;
+    recordIndexShouldHideEmptyRecordGroups ??
+    currentView?.shouldHideEmptyGroups ??
+    false;

-  const recordGroupSort = useAtomComponentStateValue(
+  const recordIndexRecordGroupSort = useAtomComponentStateValue(
    recordIndexRecordGroupSortComponentState,
  );

@@ -136,7 +138,7 @@ export const ObjectOptionsDropdownRecordGroupsContent = () => {
                  onClick={() => onContentChange('recordGroupFields')}
                  LeftIcon={IconLayoutList}
                  text={t`Group by`}
-                  contextualText={recordGroupFieldMetadata?.label}
+                  contextualText={recordIndexGroupFieldMetadataItem?.label}
                  contextualTextPosition="right"
                  hasSubMenu
                />
@@ -150,7 +152,7 @@ export const ObjectOptionsDropdownRecordGroupsContent = () => {
                  onClick={() => onContentChange('recordGroupSort')}
                  LeftIcon={IconSortDescending}
                  text={t`Sort`}
-                  contextualText={recordGroupSort}
+                  contextualText={recordIndexRecordGroupSort}
                  contextualTextPosition="right"
                  hasSubMenu
                />
@@ -201,7 +203,7 @@ export const ObjectOptionsDropdownRecordGroupsContent = () => {
                <MenuItemNavigate
                  onClick={() => onContentChange('hiddenRecordGroups')}
                  LeftIcon={IconEyeOff}
-                  text={`${t`Hidden`} ${recordGroupFieldMetadata?.label ?? ''}`}
+                  text={`${t`Hidden`} ${recordIndexGroupFieldMetadataItem?.label ?? ''}`}
                />
              </SelectableListItem>
            </SelectableList>
@@ -7,12 +7,14 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
 export const useSearchRecordGroupField = () => {
  const { objectMetadataItem } = useRecordIndexContextOrThrow();

-  const [recordGroupFieldSearchInput, setRecordGroupFieldSearchInput] =
-    useAtomComponentState(objectOptionsDropdownSearchInputComponentState);
+  const [
+    objectOptionsDropdownSearchInput,
+    setObjectOptionsDropdownSearchInput,
+  ] = useAtomComponentState(objectOptionsDropdownSearchInputComponentState);

  const filteredRecordGroupFieldMetadataItems = useMemo(() => {
    const searchInputLowerCase =
-      recordGroupFieldSearchInput.toLocaleLowerCase();
+      objectOptionsDropdownSearchInput.toLocaleLowerCase();

    return objectMetadataItem.readableFields.filter(
      (field) =>
@@ -20,11 +22,11 @@ export const useSearchRecordGroupField = () => {
        field.isActive &&
        field.label.toLocaleLowerCase().includes(searchInputLowerCase),
    );
-  }, [objectMetadataItem.readableFields, recordGroupFieldSearchInput]);
+  }, [objectMetadataItem.readableFields, objectOptionsDropdownSearchInput]);

  return {
-    recordGroupFieldSearchInput,
-    setRecordGroupFieldSearchInput,
+    recordGroupFieldSearchInput: objectOptionsDropdownSearchInput,
+    setRecordGroupFieldSearchInput: setObjectOptionsDropdownSearchInput,
    filteredRecordGroupFieldMetadataItems,
  };
 };
@@ -16,11 +16,11 @@ export const useUpdateObjectViewOptions = () => {
    recordIndexOpenRecordInState,
  );

-  const setRecordIndexViewName = useSetAtomComponentState(
+  const setViewPickerInputName = useSetAtomComponentState(
    viewPickerInputNameComponentState,
  );

-  const setRecordIndexViewIcon = useSetAtomComponentState(
+  const setViewPickerSelectedIcon = useSetAtomComponentState(
    viewPickerSelectedIconComponentState,
  );

@@ -41,23 +41,23 @@ export const useUpdateObjectViewOptions = () => {
  const setAndPersistViewName = useCallback(
    (viewName: string, view: GraphQLView | undefined) => {
      if (!view) return;
-      setRecordIndexViewName(viewName);
+      setViewPickerInputName(viewName);
      updateCurrentView({
        name: viewName,
      });
    },
-    [setRecordIndexViewName, updateCurrentView],
+    [setViewPickerInputName, updateCurrentView],
  );

  const setAndPersistViewIcon = useCallback(
    (viewIcon: string, view: GraphQLView | undefined) => {
      if (!view) return;
-      setRecordIndexViewIcon(viewIcon);
+      setViewPickerSelectedIcon(viewIcon);
      updateCurrentView({
        icon: viewIcon,
      });
    },
-    [setRecordIndexViewIcon, updateCurrentView],
+    [setViewPickerSelectedIcon, updateCurrentView],
  );

  return {