Renamed editable field to inline cell in ui folder (#1845)

* renamed editable field to inline cell in ui folder

* renamed table to table-cell in ui folder

front/src/modules/activities/components/ActivityEditor.tsx

@@ -7,7 +7,7 @@ import { ActivityBodyEditor } from '@/activities/components/ActivityBodyEditor';
 import { ActivityComments } from '@/activities/components/ActivityComments';
 import { ActivityTypeDropdown } from '@/activities/components/ActivityTypeDropdown';
 import { GET_ACTIVITIES } from '@/activities/graphql/queries/getActivities';
-import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
+import { PropertyBox } from '@/ui/inline-cell/property-box/components/PropertyBox';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import {

front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx

@@ -1,9 +1,9 @@
-import { InlineCell } from '@/ui/editable-field/components/InlineCell';
-import { EditableFieldHotkeyScope } from '@/ui/editable-field/types/EditableFieldHotkeyScope';
 import { FieldContext } from '@/ui/field/contexts/FieldContext';
 import { FieldDefinition } from '@/ui/field/types/FieldDefinition';
 import { FieldRelationMetadata } from '@/ui/field/types/FieldMetadata';
 import { IconUserCircle } from '@/ui/icon';
+import { InlineCell } from '@/ui/inline-cell/components/InlineCell';
+import { InlineCellHotkeyScope } from '@/ui/inline-cell/types/InlineCellHotkeyScope';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { Company, User, useUpdateActivityMutation } from '~/generated/graphql';
 
@@ -30,7 +30,7 @@ export const ActivityAssigneeEditableField = ({ activity }: OwnProps) => {
           },
         } satisfies FieldDefinition<FieldRelationMetadata>,
         useUpdateEntityMutation: useUpdateActivityMutation,
-        hotkeyScope: EditableFieldHotkeyScope.EditableField,
+        hotkeyScope: InlineCellHotkeyScope.InlineCell,
       }}
     >
       <InlineCell />

front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableFieldEditMode.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 import { ActivityAssigneePicker } from '@/activities/components/ActivityAssigneePicker';
-import { useInlineCell } from '@/ui/editable-field/hooks/useInlineCell';
+import { useInlineCell } from '@/ui/inline-cell/hooks/useInlineCell';
 import { Activity, User } from '~/generated/graphql';
 
 const StyledContainer = styled.div`

front/src/modules/activities/editable-fields/components/ActivityEditorDateField.tsx

@@ -1,9 +1,9 @@
-import { InlineCell } from '@/ui/editable-field/components/InlineCell';
-import { EditableFieldHotkeyScope } from '@/ui/editable-field/types/EditableFieldHotkeyScope';
 import { FieldContext } from '@/ui/field/contexts/FieldContext';
 import { FieldDefinition } from '@/ui/field/types/FieldDefinition';
 import { FieldDateMetadata } from '@/ui/field/types/FieldMetadata';
 import { IconCalendar } from '@/ui/icon/index';
+import { InlineCell } from '@/ui/inline-cell/components/InlineCell';
+import { InlineCellHotkeyScope } from '@/ui/inline-cell/types/InlineCellHotkeyScope';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { useUpdateActivityMutation } from '~/generated/graphql';
 
@@ -28,7 +28,7 @@ export const ActivityEditorDateField = ({ activityId }: OwnProps) => {
             },
           } satisfies FieldDefinition<FieldDateMetadata>,
           useUpdateEntityMutation: useUpdateActivityMutation,
-          hotkeyScope: EditableFieldHotkeyScope.EditableField,
+          hotkeyScope: InlineCellHotkeyScope.InlineCell,
         }}
       >
         <InlineCell />

front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx

@@ -1,7 +1,7 @@
 import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
-import { InlineCellContainer } from '@/ui/editable-field/components/InlineCellContainer';
-import { FieldRecoilScopeContext } from '@/ui/editable-field/states/recoil-scope-contexts/FieldRecoilScopeContext';
 import { IconArrowUpRight } from '@/ui/icon';
+import { InlineCellContainer } from '@/ui/inline-cell/components/InlineCellContainer';
+import { FieldRecoilScopeContext } from '@/ui/inline-cell/states/recoil-scope-contexts/FieldRecoilScopeContext';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Activity, ActivityTarget, Company, Person } from '~/generated/graphql';

front/src/modules/activities/editable-fields/components/ActivityRelationEditableFieldEditMode.tsx

@@ -5,7 +5,7 @@ import { useHandleCheckableActivityTargetChange } from '@/activities/hooks/useHa
 import { flatMapAndSortEntityForSelectArrayOfArrayByName } from '@/activities/utils/flatMapAndSortEntityForSelectArrayByName';
 import { useFilteredSearchCompanyQuery } from '@/companies/hooks/useFilteredSearchCompanyQuery';
 import { useFilteredSearchPeopleQuery } from '@/people/hooks/useFilteredSearchPeopleQuery';
-import { useInlineCell } from '@/ui/editable-field/hooks/useInlineCell';
+import { useInlineCell } from '@/ui/inline-cell/hooks/useInlineCell';
 import { MultipleEntitySelect } from '@/ui/input/relation-picker/components/MultipleEntitySelect';
 import { Activity, ActivityTarget } from '~/generated/graphql';
 import { assertNotNull } from '~/utils/assert';

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -7,9 +7,9 @@ import { useBoardContext } from '@/ui/board/hooks/useBoardContext';
 import { useCurrentCardSelected } from '@/ui/board/hooks/useCurrentCardSelected';
 import { visibleBoardCardFieldsScopedSelector } from '@/ui/board/states/selectors/visibleBoardCardFieldsScopedSelector';
 import { EntityChipVariant } from '@/ui/chip/components/EntityChip';
-import { InlineCell } from '@/ui/editable-field/components/InlineCell';
-import { EditableFieldHotkeyScope } from '@/ui/editable-field/types/EditableFieldHotkeyScope';
 import { FieldContext } from '@/ui/field/contexts/FieldContext';
+import { InlineCell } from '@/ui/inline-cell/components/InlineCell';
+import { InlineCellHotkeyScope } from '@/ui/inline-cell/types/InlineCellHotkeyScope';
 import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql';
@@ -172,7 +172,7 @@ export const CompanyBoardCard = () => {
                     useEditButton: viewField.useEditButton,
                   },
                   useUpdateEntityMutation: useUpdateOnePipelineProgressMutation,
-                  hotkeyScope: EditableFieldHotkeyScope.EditableField,
+                  hotkeyScope: InlineCellHotkeyScope.InlineCell,
                 }}
               >
                 <InlineCell />

front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 
-import { FieldRecoilScopeContext } from '@/ui/editable-field/states/recoil-scope-contexts/FieldRecoilScopeContext';
+import { FieldRecoilScopeContext } from '@/ui/inline-cell/states/recoil-scope-contexts/FieldRecoilScopeContext';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
 

front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { FieldRecoilScopeContext } from '@/ui/editable-field/states/recoil-scope-contexts/FieldRecoilScopeContext';
+import { FieldRecoilScopeContext } from '@/ui/inline-cell/states/recoil-scope-contexts/FieldRecoilScopeContext';
 import { EntityTitleDoubleTextInput } from '@/ui/input/components/EntityTitleDoubleTextInput';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Person, useUpdateOnePersonMutation } from '~/generated/graphql';

front/src/modules/ui/editable-field/contexts/EditableFieldMutationContext.ts

@@ -1,3 +0,0 @@
-import { createContext } from 'react';
-
-export const EditableFieldMutationContext = createContext<any>(undefined);

front/src/modules/ui/editable-field/types/EditableFieldHotkeyScope.ts

@@ -1,3 +0,0 @@
-export enum EditableFieldHotkeyScope {
-  EditableField = 'editable-field',
-}

front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx

@@ -1,50 +0,0 @@
-import { InlineCellContainer } from '@/ui/editable-field/components/InlineCellContainer';
-import { FieldRecoilScopeContext } from '@/ui/editable-field/states/recoil-scope-contexts/FieldRecoilScopeContext';
-import { DateDisplay } from '@/ui/field/meta-types/display/content-display/components/DateDisplay';
-import { IconComponent } from '@/ui/icon/types/IconComponent';
-import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
-import { parseDate } from '~/utils/date-utils';
-
-import { EditableFieldEditModeDate } from './EditableFieldEditModeDate';
-
-type OwnProps = {
-  Icon?: IconComponent;
-  label?: string;
-  value: string | null | undefined;
-  onSubmit?: (newValue: string) => void;
-  hotkeyScope: string;
-};
-
-export const DateEditableField = ({
-  Icon,
-  value,
-  label,
-  onSubmit,
-  hotkeyScope,
-}: OwnProps) => {
-  const handleChange = async (newValue: string) => {
-    onSubmit?.(newValue);
-  };
-
-  const internalDateValue = value ? parseDate(value).toJSDate() : null;
-
-  return (
-    <RecoilScope CustomRecoilScopeContext={FieldRecoilScopeContext}>
-      <InlineCellContainer
-        IconLabel={Icon}
-        label={label}
-        editModeContent={
-          <EditableFieldEditModeDate
-            value={value || new Date().toISOString()}
-            onChange={(newValue: string) => {
-              handleChange(newValue);
-            }}
-            parentHotkeyScope={hotkeyScope}
-          />
-        }
-        displayModeContent={<DateDisplay value={internalDateValue} />}
-        isDisplayModeContentEmpty={!value}
-      />
-    </RecoilScope>
-  );
-};

front/src/modules/ui/editable-field/variants/components/EditableFieldEditModeDate.tsx

@@ -1,51 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { DateInput } from '@/ui/input/components/DateInput';
-import { Nullable } from '~/types/Nullable';
-import { parseDate } from '~/utils/date-utils';
-
-import { useInlineCell } from '../../hooks/useInlineCell';
-
-type OwnProps = {
-  value: string;
-  onChange?: (newValue: string) => void;
-  parentHotkeyScope: string;
-};
-
-// TODO: refactor this component to use the same logic as the GenericDateField component
-export const EditableFieldEditModeDate = ({
-  value,
-  onChange,
-  parentHotkeyScope,
-}: OwnProps) => {
-  const [internalValue, setInternalValue] = useState(value);
-
-  useEffect(() => {
-    setInternalValue(value);
-  }, [value]);
-
-  const { closeInlineCell: closeEditableField } = useInlineCell();
-
-  const handleClickOutside = () => {
-    closeEditableField();
-  };
-
-  const handleEnter = (newValue: Nullable<Date>) => {
-    onChange?.(newValue?.toISOString() ?? '');
-    closeEditableField();
-  };
-
-  const handleEscape = () => {
-    closeEditableField();
-  };
-
-  return (
-    <DateInput
-      value={internalValue ? parseDate(internalValue).toJSDate() : new Date()}
-      hotkeyScope={parentHotkeyScope}
-      onClickOutside={handleClickOutside}
-      onEnter={handleEnter}
-      onEscape={handleEscape}
-    />
-  );
-};

front/src/modules/ui/editable-field/variants/components/__stories__/DateEditableField.stories.tsx

@@ -1,31 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { IconCalendar } from '@/ui/icon';
-import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
-
-import { DateEditableField } from '../DateEditableField';
-
-const meta: Meta<typeof DateEditableField> = {
-  title: 'UI/EditableField/DateEditableField',
-  component: DateEditableField,
-  decorators: [ComponentDecorator],
-  argTypes: {
-    Icon: {
-      type: 'boolean',
-      mapping: {
-        true: IconCalendar,
-        false: undefined,
-      },
-    },
-    value: { control: { type: 'date' } },
-  },
-  args: {
-    value: new Date().toISOString(),
-    Icon: IconCalendar,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof DateEditableField>;
-
-export const Default: Story = {};

front/src/modules/ui/inline-cell/components/InlineCellDisplayMode.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
-const StyledEditableFieldNormalModeOuterContainer = styled.div<
+const StyledInlineCellNormalModeOuterContainer = styled.div<
   Pick<
     OwnProps,
     | 'isDisplayModeContentEmpty'
@@ -32,7 +32,7 @@ const StyledEditableFieldNormalModeOuterContainer = styled.div<
   }}
 `;
 
-const StyledEditableFieldNormalModeInnerContainer = styled.div`
+const StyledInlineCellNormalModeInnerContainer = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.primary};
   font-size: 'inherit';
@@ -64,18 +64,18 @@ export const InlineCellDisplayMode = ({
   isDisplayModeFixHeight,
   isHovered,
 }: React.PropsWithChildren<OwnProps>) => (
-  <StyledEditableFieldNormalModeOuterContainer
+  <StyledInlineCellNormalModeOuterContainer
     isDisplayModeContentEmpty={isDisplayModeContentEmpty}
     disableHoverEffect={disableHoverEffect}
     isDisplayModeFixHeight={isDisplayModeFixHeight}
     isHovered={isHovered}
   >
-    <StyledEditableFieldNormalModeInnerContainer>
+    <StyledInlineCellNormalModeInnerContainer>
       {isDisplayModeContentEmpty || !children ? (
         <StyledEmptyField>{'Empty'}</StyledEmptyField>
       ) : (
         children
       )}
-    </StyledEditableFieldNormalModeInnerContainer>
+    </StyledInlineCellNormalModeInnerContainer>
-  </StyledEditableFieldNormalModeOuterContainer>
+  </StyledInlineCellNormalModeOuterContainer>
 );

front/src/modules/ui/inline-cell/contexts/InlineCellMutationContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const InlineCellMutationContext = createContext<any>(undefined);

front/src/modules/ui/inline-cell/hooks/useInlineCell.ts

@@ -6,7 +6,7 @@ import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousH
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { isInlineCellInEditModeScopedState } from '../states/isInlineCellInEditModeScopedState';
-import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
+import { InlineCellHotkeyScope } from '../types/InlineCellHotkeyScope';
 
 export const useInlineCell = () => {
   const { recoilScopeId } = useContext(FieldContext);
@@ -35,9 +35,7 @@ export const useInlineCell = () => {
         customEditHotkeyScopeForField.customScopes,
       );
     } else {
-      setHotkeyScopeAndMemorizePreviousScope(
+      setHotkeyScopeAndMemorizePreviousScope(InlineCellHotkeyScope.InlineCell);
-        EditableFieldHotkeyScope.EditableField,
-      );
     }
   };
 

front/src/modules/ui/inline-cell/types/InlineCellHotkeyScope.ts

@@ -0,0 +1,3 @@
+export enum InlineCellHotkeyScope {
+  InlineCell = 'inline-cell',
+}

front/src/modules/ui/table/components/EntityTableCell.tsx

@@ -12,8 +12,8 @@ import { ColumnContext } from '../contexts/ColumnContext';
 import { ColumnIndexContext } from '../contexts/ColumnIndexContext';
 import { EntityUpdateMutationContext } from '../contexts/EntityUpdateMutationHookContext';
 import { RowIdContext } from '../contexts/RowIdContext';
-import { TableCell } from '../editable-cell/components/TableCell';
 import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
+import { TableCell } from '../table-cell/components/TableCell';
 import { TableHotkeyScope } from '../types/TableHotkeyScope';
 
 export const EntityTableCell = ({ cellIndex }: { cellIndex: number }) => {

front/src/modules/ui/table/hooks/useCellInputEventHandlers.ts

@@ -1,5 +1,5 @@
-import { useCurrentTableCellEditMode } from '../editable-cell/hooks/useCurrentTableCellEditMode';
+import { useCurrentTableCellEditMode } from '../table-cell/hooks/useCurrentTableCellEditMode';
-import { useTableCell } from '../editable-cell/hooks/useTableCell';
+import { useTableCell } from '../table-cell/hooks/useTableCell';
 
 import { useMoveSoftFocus } from './useMoveSoftFocus';
 

front/src/pages/companies/CompanyShow.tsx

@@ -7,11 +7,11 @@ import { useCompanyQuery } from '@/companies/hooks/useCompanyQuery';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { AppPath } from '@/types/AppPath';
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
-import { InlineCell } from '@/ui/editable-field/components/InlineCell';
-import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
-import { EditableFieldHotkeyScope } from '@/ui/editable-field/types/EditableFieldHotkeyScope';
 import { FieldContext } from '@/ui/field/contexts/FieldContext';
 import { IconBuildingSkyscraper } from '@/ui/icon';
+import { InlineCell } from '@/ui/inline-cell/components/InlineCell';
+import { PropertyBox } from '@/ui/inline-cell/property-box/components/PropertyBox';
+import { InlineCellHotkeyScope } from '@/ui/inline-cell/types/InlineCellHotkeyScope';
 import { PageBody } from '@/ui/layout/components/PageBody';
 import { PageContainer } from '@/ui/layout/components/PageContainer';
 import { PageFavoriteButton } from '@/ui/layout/components/PageFavoriteButton';
@@ -102,7 +102,7 @@ export const CompanyShow = () => {
                         recoilScopeId: company.id + fieldDefinition.key,
                         fieldDefinition,
                         useUpdateEntityMutation: useUpdateOneCompanyMutation,
-                        hotkeyScope: EditableFieldHotkeyScope.EditableField,
+                        hotkeyScope: InlineCellHotkeyScope.InlineCell,
                       }}
                     >
                       <InlineCell />

front/src/pages/people/PersonShow.tsx

@@ -8,11 +8,11 @@ import { GET_PERSON } from '@/people/graphql/queries/getPerson';
 import { usePersonQuery } from '@/people/hooks/usePersonQuery';
 import { AppPath } from '@/types/AppPath';
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
-import { InlineCell } from '@/ui/editable-field/components/InlineCell';
-import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
-import { EditableFieldHotkeyScope } from '@/ui/editable-field/types/EditableFieldHotkeyScope';
 import { FieldContext } from '@/ui/field/contexts/FieldContext';
 import { IconUser } from '@/ui/icon';
+import { InlineCell } from '@/ui/inline-cell/components/InlineCell';
+import { PropertyBox } from '@/ui/inline-cell/property-box/components/PropertyBox';
+import { InlineCellHotkeyScope } from '@/ui/inline-cell/types/InlineCellHotkeyScope';
 import { PageBody } from '@/ui/layout/components/PageBody';
 import { PageContainer } from '@/ui/layout/components/PageContainer';
 import { PageFavoriteButton } from '@/ui/layout/components/PageFavoriteButton';
@@ -127,7 +127,7 @@ export const PersonShow = () => {
                         recoilScopeId: person.id + fieldDefinition.name,
                         fieldDefinition,
                         useUpdateEntityMutation: useUpdateOnePersonMutation,
-                        hotkeyScope: EditableFieldHotkeyScope.EditableField,
+                        hotkeyScope: InlineCellHotkeyScope.InlineCell,
                       }}
                       key={person.id + fieldDefinition.name}
                     >