Refactor Editable Cell (#191)

front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { CellBaseContainer } from '@/ui/components/editable-cell/CellBaseContainer';
 import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 
 import { CellCommentChip } from '../CellCommentChip';
@@ -46,10 +45,8 @@ export const TooManyComments: Story = {
 export const InCellDefault: Story = {
   render: getRenderWrapperForComponent(
     <TestCellContainer>
-      <CellBaseContainer>
+      <StyledFakeCellText>Fake short text</StyledFakeCellText>
-        <StyledFakeCellText>Fake short text</StyledFakeCellText>
+      <CellCommentChip count={12} />
-        <CellCommentChip count={12} />
-      </CellBaseContainer>
     </TestCellContainer>,
   ),
 };
@@ -57,12 +54,10 @@ export const InCellDefault: Story = {
 export const InCellOverlappingBlur: Story = {
   render: getRenderWrapperForComponent(
     <TestCellContainer>
-      <CellBaseContainer>
+      <StyledFakeCellText>
-        <StyledFakeCellText>
+        Fake long text to demonstrate blur effect
-          Fake long text to demonstrate blur effect
+      </StyledFakeCellText>
-        </StyledFakeCellText>
+      <CellCommentChip count={12} />
-        <CellCommentChip count={12} />
-      </CellBaseContainer>
     </TestCellContainer>,
   ),
 };

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

@@ -1,5 +1,5 @@
 import { useOpenCommentRightDrawer } from '@/comments/hooks/useOpenCommentRightDrawer';
-import EditableChip from '@/ui/components/editable-cell/EditableChip';
+import EditableChip from '@/ui/components/editable-cell/types/EditableChip';
 import { getLogoUrlFromDomainName } from '@/utils/utils';
 
 import { Company } from '../interfaces/company.interface';

front/src/modules/people/components/EditablePeopleFullName.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import styled from '@emotion/styled';
 
 import { CellCommentChip } from '@/comments/components/comments/CellCommentChip';
-import { EditableDoubleText } from '@/ui/components/editable-cell/EditableDoubleText';
+import { EditableDoubleText } from '@/ui/components/editable-cell/types/EditableDoubleText';
 
 import { PersonChip } from './PersonChip';
 

front/src/modules/people/components/PeopleCompanyCell.tsx

@@ -10,7 +10,7 @@ import {
 } from '@/companies/interfaces/company.interface';
 import { SearchConfigType } from '@/search/interfaces/interface';
 import { SEARCH_COMPANY_QUERY } from '@/search/services/search';
-import { EditableRelation } from '@/ui/components/editable-cell/EditableRelation';
+import { EditableRelation } from '@/ui/components/editable-cell/types/EditableRelation';
 import { getLogoUrlFromDomainName } from '@/utils/utils';
 import {
   QueryMode,

front/src/modules/people/components/PeopleCompanyCreateCell.tsx

@@ -1,8 +1,6 @@
 import { useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
-import { CellBaseContainer } from '@/ui/components/editable-cell/CellBaseContainer';
-import { CellEditModeContainer } from '@/ui/components/editable-cell/CellEditModeContainer';
 import { DoubleTextInput } from '@/ui/components/inputs/DoubleTextInput';
 import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
 
@@ -43,16 +41,12 @@ export function PeopleCompanyCreateCell({
   }
 
   return (
-    <CellBaseContainer ref={containerRef}>
+    <DoubleTextInput
-      <CellEditModeContainer editModeVerticalPosition="over">
+      leftValue={companyDomainName}
-        <DoubleTextInput
+      rightValue={companyName}
-          leftValue={companyDomainName}
+      leftValuePlaceholder="URL"
-          rightValue={companyName}
+      rightValuePlaceholder="Name"
-          leftValuePlaceholder="URL"
+      onChange={handleDoubleTextChange}
-          rightValuePlaceholder="Name"
+    />
-          onChange={handleDoubleTextChange}
-        />
-      </CellEditModeContainer>
-    </CellBaseContainer>
   );
 }

front/src/modules/ui/components/editable-cell/CellBaseContainer.tsx

@@ -1,12 +0,0 @@
-import styled from '@emotion/styled';
-
-export const CellBaseContainer = styled.div`
-  position: relative;
-  box-sizing: border-box;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  cursor: pointer;
-  user-select: none;
-`;

front/src/modules/ui/components/editable-cell/CellEditModeContainer.tsx

@@ -1,29 +0,0 @@
-import styled from '@emotion/styled';
-
-import { overlayBackground } from '../../layout/styles/themes';
-
-type OwnProps = {
-  editModeHorizontalAlign?: 'left' | 'right';
-  editModeVerticalPosition?: 'over' | 'below';
-};
-
-export const CellEditModeContainer = styled.div<OwnProps>`
-  display: flex;
-  align-items: center;
-  min-width: 100%;
-  min-height: 100%;
-  padding-left: ${(props) => props.theme.spacing(2)};
-  padding-right: ${(props) => props.theme.spacing(2)};
-  margin-left: -2px;
-  position: absolute;
-  left: ${(props) =>
-    props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
-  right: ${(props) =>
-    props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
-  top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
-
-  border: 1px solid ${(props) => props.theme.primaryBorder};
-  z-index: 1;
-  border-radius: 4px;
-  ${overlayBackground}
-`;

front/src/modules/ui/components/editable-cell/CellNormalModeContainer.tsx

@@ -1,12 +0,0 @@
-import styled from '@emotion/styled';
-
-export const CellNormalModeContainer = styled.div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  padding-left: ${(props) => props.theme.spacing(2)};
-  padding-right: ${(props) => props.theme.spacing(2)};
-`;

front/src/modules/ui/components/editable-cell/EditableCell.tsx

@@ -1,12 +1,23 @@
 import { ReactElement } from 'react';
+import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
 import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
 
-import { CellBaseContainer } from './CellBaseContainer';
+import { EditableCellDisplayMode } from './EditableCellDisplayMode';
-import { CellNormalModeContainer } from './CellNormalModeContainer';
 import { EditableCellEditMode } from './EditableCellEditMode';
 
+export const CellBaseContainer = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  user-select: none;
+`;
+
 type OwnProps = {
   editModeContent: ReactElement;
   nonEditModeContent: ReactElement;
@@ -42,16 +53,15 @@ export function EditableCell({
     <CellBaseContainer onClick={handleOnClick}>
       {isEditMode ? (
         <EditableCellEditMode
-          editModeContent={editModeContent}
           editModeHorizontalAlign={editModeHorizontalAlign}
           editModeVerticalPosition={editModeVerticalPosition}
           isEditMode={isEditMode}
           onOutsideClick={onOutsideClick}
-        />
+        >
+          {editModeContent}
+        </EditableCellEditMode>
       ) : (
-        <CellNormalModeContainer>
+        <EditableCellDisplayMode>{nonEditModeContent}</EditableCellDisplayMode>
-          <>{nonEditModeContent}</>
-        </CellNormalModeContainer>
       )}
     </CellBaseContainer>
   );

front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx

@@ -0,0 +1,35 @@
+import { ReactElement } from 'react';
+import styled from '@emotion/styled';
+
+export const EditableCellNormalModeOuterContainer = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  padding-left: ${(props) => props.theme.spacing(2)};
+  padding-right: ${(props) => props.theme.spacing(2)};
+`;
+
+export const EditableCellNormalModeInnerContainer = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+`;
+
+type OwnProps = {
+  children: ReactElement;
+};
+
+export function EditableCellDisplayMode({ children }: OwnProps) {
+  return (
+    <EditableCellNormalModeOuterContainer>
+      <EditableCellNormalModeInnerContainer>
+        {children}
+      </EditableCellNormalModeInnerContainer>
+    </EditableCellNormalModeOuterContainer>
+  );
+}

front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx

@@ -1,16 +1,35 @@
 import { ReactElement, useMemo, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
+import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
 import { debounce } from '@/utils/debounce';
 
 import { useListenClickOutsideArrayOfRef } from '../../hooks/useListenClickOutsideArrayOfRef';
+import { overlayBackground } from '../../layout/styles/themes';
 import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
 
-import { CellEditModeContainer } from './CellEditModeContainer';
+export const EditableCellEditModeContainer = styled.div<OwnProps>`
+  display: flex;
+  align-items: center;
+  min-width: calc(100% + 20px);
+  min-height: 100%;
+  margin-left: -2px;
+  position: absolute;
+  left: ${(props) =>
+    props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
+  right: ${(props) =>
+    props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
+  top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
+
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+  z-index: 1;
+  border-radius: 4px;
+  ${overlayBackground}
+`;
 
 type OwnProps = {
-  editModeContent: ReactElement;
+  children: ReactElement;
   editModeHorizontalAlign?: 'left' | 'right';
   editModeVerticalPosition?: 'over' | 'below';
   isEditMode?: boolean;
@@ -21,7 +40,7 @@ type OwnProps = {
 export function EditableCellEditMode({
   editModeHorizontalAlign,
   editModeVerticalPosition,
-  editModeContent,
+  children,
   isEditMode,
   onOutsideClick,
 }: OwnProps) {
@@ -77,13 +96,13 @@ export function EditableCellEditMode({
   );
 
   return (
-    <CellEditModeContainer
+    <EditableCellEditModeContainer
       data-testid="editable-cell-edit-mode-container"
       ref={wrapperRef}
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeVerticalPosition={editModeVerticalPosition}
     >
-      {editModeContent}
+      {children}
-    </CellEditModeContainer>
+    </EditableCellEditModeContainer>
   );
 }

front/src/modules/ui/components/editable-cell/EditableCellMenu.tsx

@@ -1,67 +0,0 @@
-import { ReactElement } from 'react';
-import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
-
-import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
-
-import { CellBaseContainer } from './CellBaseContainer';
-import { EditableCellMenuEditMode } from './EditableCellMenuEditMode';
-
-const EditableCellMenuNormalModeContainer = styled.div`
-  display: flex;
-  align-items: center;
-  width: calc(100% - ${(props) => props.theme.spacing(5)});
-  height: 100%;
-  overflow: hidden;
-`;
-
-type OwnProps = {
-  editModeContent: ReactElement;
-  nonEditModeContent: ReactElement;
-  editModeHorizontalAlign?: 'left' | 'right';
-  editModeVerticalPosition?: 'over' | 'below';
-  isEditMode?: boolean;
-  isCreateMode?: boolean;
-  onOutsideClick?: () => void;
-  onInsideClick?: () => void;
-};
-
-// TODO: refactor
-export function EditableCellMenu({
-  editModeContent,
-  nonEditModeContent,
-  editModeHorizontalAlign = 'left',
-  editModeVerticalPosition = 'over',
-  isEditMode = false,
-  onOutsideClick,
-  onInsideClick,
-}: OwnProps) {
-  const [isSomeInputInEditMode, setIsSomeInputInEditMode] = useRecoilState(
-    isSomeInputInEditModeState,
-  );
-
-  function handleOnClick() {
-    if (!isSomeInputInEditMode) {
-      onInsideClick?.();
-      setIsSomeInputInEditMode(true);
-    }
-  }
-
-  return (
-    <CellBaseContainer onClick={handleOnClick}>
-      <EditableCellMenuNormalModeContainer>
-        {nonEditModeContent}
-      </EditableCellMenuNormalModeContainer>
-      {isEditMode && (
-        <EditableCellMenuEditMode
-          editModeContent={editModeContent}
-          editModeHorizontalAlign={editModeHorizontalAlign}
-          editModeVerticalPosition={editModeVerticalPosition}
-          isEditMode={isEditMode}
-          onOutsideClick={onOutsideClick}
-          onInsideClick={onInsideClick}
-        />
-      )}
-    </CellBaseContainer>
-  );
-}

front/src/modules/ui/components/editable-cell/EditableCellMenuEditMode.tsx

@@ -1,88 +0,0 @@
-import { ReactElement, useMemo, useRef } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { useRecoilState } from 'recoil';
-
-import { debounce } from '@/utils/debounce';
-
-import { useListenClickOutsideArrayOfRef } from '../../hooks/useListenClickOutsideArrayOfRef';
-import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
-
-import { EditableCellMenuEditModeContainer } from './EditableCellMenuEditModeContainer';
-
-type OwnProps = {
-  editModeContent: ReactElement;
-  editModeHorizontalAlign?: 'left' | 'right';
-  editModeVerticalPosition?: 'over' | 'below';
-  isEditMode?: boolean;
-  onOutsideClick?: () => void;
-  onInsideClick?: () => void;
-};
-
-export function EditableCellMenuEditMode({
-  editModeHorizontalAlign,
-  editModeVerticalPosition,
-  editModeContent,
-  isEditMode,
-  onOutsideClick,
-}: OwnProps) {
-  const wrapperRef = useRef(null);
-
-  const [, setIsSomeInputInEditMode] = useRecoilState(
-    isSomeInputInEditModeState,
-  );
-
-  const debouncedSetIsSomeInputInEditMode = useMemo(() => {
-    return debounce(setIsSomeInputInEditMode, 20);
-  }, [setIsSomeInputInEditMode]);
-
-  useListenClickOutsideArrayOfRef([wrapperRef], () => {
-    if (isEditMode) {
-      debouncedSetIsSomeInputInEditMode(false);
-      onOutsideClick?.();
-    }
-  });
-
-  useHotkeys(
-    'esc',
-    () => {
-      if (isEditMode) {
-        onOutsideClick?.();
-
-        debouncedSetIsSomeInputInEditMode(false);
-      }
-    },
-    {
-      preventDefault: true,
-      enableOnContentEditable: true,
-      enableOnFormTags: true,
-    },
-    [isEditMode, onOutsideClick, debouncedSetIsSomeInputInEditMode],
-  );
-
-  useHotkeys(
-    'enter',
-    () => {
-      if (isEditMode) {
-        onOutsideClick?.();
-
-        debouncedSetIsSomeInputInEditMode(false);
-      }
-    },
-    {
-      preventDefault: true,
-      enableOnContentEditable: true,
-      enableOnFormTags: true,
-    },
-    [isEditMode, onOutsideClick, debouncedSetIsSomeInputInEditMode],
-  );
-
-  return (
-    <EditableCellMenuEditModeContainer
-      ref={wrapperRef}
-      editModeHorizontalAlign={editModeHorizontalAlign}
-      editModeVerticalPosition={editModeVerticalPosition}
-    >
-      {editModeContent}
-    </EditableCellMenuEditModeContainer>
-  );
-}

front/src/modules/ui/components/editable-cell/EditableCellMenuEditModeContainer.tsx

@@ -1,27 +0,0 @@
-import styled from '@emotion/styled';
-
-import { overlayBackground } from '../../layout/styles/themes';
-
-type OwnProps = {
-  editModeHorizontalAlign?: 'left' | 'right';
-  editModeVerticalPosition?: 'over' | 'below';
-};
-
-// TODO: refactor
-export const EditableCellMenuEditModeContainer = styled.div<OwnProps>`
-  display: flex;
-  align-items: center;
-  min-width: 100%;
-  min-height: 100%;
-  position: absolute;
-  left: ${(props) =>
-    props.editModeHorizontalAlign === 'right' ? 'auto' : '-1px'};
-  right: ${(props) =>
-    props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
-  top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
-
-  border: 1px solid ${(props) => props.theme.primaryBorder};
-  z-index: 1;
-  border-radius: 4px;
-  ${overlayBackground}
-`;

front/src/modules/ui/components/editable-cell/types/EditableChip.tsx

@@ -2,10 +2,9 @@ import { ChangeEvent, ComponentType, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 
 import { CellCommentChip } from '@/comments/components/comments/CellCommentChip';
+import { textInputStyle } from '@/ui/layout/styles/themes';
 
-import { textInputStyle } from '../../layout/styles/themes';
+import { EditableCell } from '../EditableCell';
-
-import { EditableCell } from './EditableCell';
 
 export type EditableChipProps = {
   placeholder?: string;
@@ -30,11 +29,6 @@ const StyledInplaceInput = styled.input`
 const StyledInplaceShow = styled.div`
   display: flex;
   width: 100%;
-
-  &::placeholder {
-    font-weight: 'bold';
-    color: props.theme.text20;
-  }
 `;
 
 function EditableChip({

front/src/modules/ui/components/editable-cell/types/EditableDate.tsx

@@ -3,9 +3,8 @@ import styled from '@emotion/styled';
 
 import { humanReadableDate } from '@/utils/utils';
 
-import DatePicker from '../form/DatePicker';
+import DatePicker from '../../form/DatePicker';
-
+import { EditableCell } from '../EditableCell';
-import { EditableCell } from './EditableCell';
 
 export type EditableDateProps = {
   value: Date;
@@ -16,6 +15,7 @@ export type EditableDateProps = {
 const StyledContainer = styled.div`
   display: flex;
   align-items: center;
+  margin: 0px ${(props) => props.theme.spacing(2)};
 `;
 
 export type StyledCalendarContainerProps = {
@@ -78,9 +78,7 @@ export function EditableDate({
         </StyledContainer>
       }
       nonEditModeContent={
-        <StyledContainer>
+        <div>{inputValue && humanReadableDate(inputValue)}</div>
-          <div>{inputValue && humanReadableDate(inputValue)}</div>
-        </StyledContainer>
       }
     ></EditableCell>
   );

front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx

@@ -1,9 +1,9 @@
 import { ChangeEvent, ReactElement, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 
-import { textInputStyle } from '../../layout/styles/themes';
+import { textInputStyle } from '@/ui/layout/styles/themes';
 
-import { EditableCell } from './EditableCell';
+import { EditableCell } from '../EditableCell';
 
 type OwnProps = {
   firstValue: string;
@@ -28,6 +28,7 @@ const StyledContainer = styled.div`
 const StyledEditInplaceInput = styled.input`
   width: 45%;
   height: 18px;
+  margin: 0px ${(props) => props.theme.spacing(2)};
 
   ${textInputStyle}
 `;

front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx

@@ -2,9 +2,10 @@ import { ChangeEvent, MouseEvent, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
 
-import Link from '../link/Link';
+import { textInputStyle } from '@/ui/layout/styles/themes';
 
-import { EditableCell } from './EditableCell';
+import Link from '../../link/Link';
+import { EditableCell } from '../EditableCell';
 
 type OwnProps = {
   placeholder?: string;
@@ -19,13 +20,8 @@ type StyledEditModeProps = {
 // TODO: refactor
 const StyledEditInplaceInput = styled.input<StyledEditModeProps>`
   width: 100%;
-  border: none;
+  margin: 0px ${(props) => props.theme.spacing(2)};
-  outline: none;
+  ${textInputStyle}
-
-  &::placeholder {
-    font-weight: bold;
-    color: ${(props) => props.theme.text20};
-  }
 `;
 
 export function EditablePhone({ value, placeholder, changeHandler }: OwnProps) {

front/src/modules/ui/components/editable-cell/types/EditableRelation.tsx

@@ -5,22 +5,19 @@ import { useRecoilState } from 'recoil';
 
 import { SearchConfigType } from '@/search/interfaces/interface';
 import { useSearch } from '@/search/services/search';
+import { textInputStyle } from '@/ui/layout/styles/themes';
+import { isSomeInputInEditModeState } from '@/ui/tables/states/isSomeInputInEditModeState';
 import { AnyEntity } from '@/utils/interfaces/generic.interface';
 import { isDefined } from '@/utils/type-guards/isDefined';
 import { isNonEmptyString } from '@/utils/type-guards/isNonEmptyString';
 
-import { textInputStyle } from '../../layout/styles/themes';
+import { EditableCell } from '../EditableCell';
-import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
+import { HoverableMenuItem } from '../HoverableMenuItem';
 
-import { CellNormalModeContainer } from './CellNormalModeContainer';
-import { EditableCellMenu } from './EditableCellMenu';
 import { EditableRelationCreateButton } from './EditableRelationCreateButton';
-import { HoverableMenuItem } from './HoverableMenuItem';
 
 const StyledEditModeContainer = styled.div`
   width: 200px;
-  // margin-left: calc(-1 * ${(props) => props.theme.spacing(2)});
-  // margin-right: calc(-1 * ${(props) => props.theme.spacing(2)});
 `;
 
 const StyledEditModeSelectedContainer = styled.div`
@@ -144,7 +141,7 @@ export function EditableRelation<
 
   return (
     <>
-      <EditableCellMenu
+      <EditableCell
         editModeHorizontalAlign={editModeHorizontalAlign}
         isEditMode={isEditMode}
         onOutsideClick={() => setIsEditMode(false)}
@@ -207,13 +204,13 @@ export function EditableRelation<
           </StyledEditModeContainer>
         }
         nonEditModeContent={
-          <CellNormalModeContainer>
+          <>
             {relation ? (
               <ChipComponent {...chipComponentPropsMapper(relation)} />
             ) : (
               <></>
             )}
-          </CellNormalModeContainer>
+          </>
         }
       />
     </>

front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx

@@ -16,9 +16,4 @@ export const EditableRelationCreateButton = styled.button`
   height: 31px;
   background: none;
   gap: 8px;
-  // :hover {
-  //   background: rgba(0, 0, 0, 0.04);
-  //   color: ${(props) => props.theme.text100};
-  // }
-  // margin-bottom: calc(${(props) => props.theme.spacing(1)} / 2);
 `;

front/src/modules/ui/components/editable-cell/types/EditableText.tsx

@@ -1,9 +1,9 @@
 import { ChangeEvent, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 
-import { textInputStyle } from '../../layout/styles/themes';
+import { textInputStyle } from '@/ui/layout/styles/themes';
 
-import { EditableCell } from './EditableCell';
+import { EditableCell } from '../EditableCell';
 
 type OwnProps = {
   placeholder?: string;
@@ -19,6 +19,7 @@ type StyledEditModeProps = {
 // TODO: refactor
 const StyledInplaceInput = styled.input<StyledEditModeProps>`
   width: 100%;
+  margin: 0px ${(props) => props.theme.spacing(2)};
   ${textInputStyle}
 `;
 

front/src/pages/companies/companies-columns.tsx

@@ -18,9 +18,9 @@ import {
 } from '@/people/components/PersonChip';
 import { SearchConfigType } from '@/search/interfaces/interface';
 import { SEARCH_USER_QUERY } from '@/search/services/search';
-import { EditableDate } from '@/ui/components/editable-cell/EditableDate';
+import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
-import { EditableRelation } from '@/ui/components/editable-cell/EditableRelation';
+import { EditableRelation } from '@/ui/components/editable-cell/types/EditableRelation';
-import { EditableText } from '@/ui/components/editable-cell/EditableText';
+import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
 import { CheckboxCell } from '@/ui/components/table/CheckboxCell';
 import { ColumnHead } from '@/ui/components/table/ColumnHead';
 import { SelectAllCheckbox } from '@/ui/components/table/SelectAllCheckbox';

front/src/pages/people/people-columns.tsx

@@ -13,9 +13,9 @@ import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullNa
 import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
 import { Person } from '@/people/interfaces/person.interface';
 import { updatePerson } from '@/people/services';
-import { EditableDate } from '@/ui/components/editable-cell/EditableDate';
+import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
-import { EditablePhone } from '@/ui/components/editable-cell/EditablePhone';
+import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone';
-import { EditableText } from '@/ui/components/editable-cell/EditableText';
+import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
 import { CheckboxCell } from '@/ui/components/table/CheckboxCell';
 import { ColumnHead } from '@/ui/components/table/ColumnHead';
 import { SelectAllCheckbox } from '@/ui/components/table/SelectAllCheckbox';