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/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>
-  </StyledEditableFieldNormalModeOuterContainer>
+    </StyledInlineCellNormalModeInnerContainer>
+  </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(
-        EditableFieldHotkeyScope.EditableField,
-      );
+      setHotkeyScopeAndMemorizePreviousScope(InlineCellHotkeyScope.InlineCell);
     }
   };
 

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 { useTableCell } from '../editable-cell/hooks/useTableCell';
+import { useCurrentTableCellEditMode } from '../table-cell/hooks/useCurrentTableCellEditMode';
+import { useTableCell } from '../table-cell/hooks/useTableCell';
 
 import { useMoveSoftFocus } from './useMoveSoftFocus';