Refacto/remaining inplace input cells (#531)

* Add inplace date input component

* Add inplace phone input component

* Add inplace double text input component

* Add inplace chip input component

* Remove useless styled component

* Reduce code through props destructuring

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

@@ -1,6 +1,6 @@
 import { CellCommentChip } from '@/comments/components/CellCommentChip';
 import { useOpenCommentRightDrawer } from '@/comments/hooks/useOpenCommentRightDrawer';
-import EditableChip from '@/ui/components/editable-cell/types/EditableChip';
+import { EditableChipCell } from '@/ui/components/editable-cell/types/EditableChipCell';
 import { getLogoUrlFromDomainName } from '@/utils/utils';
 import {
   CommentableType,
@@ -34,7 +34,7 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
   }
 
   return (
-    <EditableChip
+    <EditableChipCell
       value={company.name || ''}
       placeholder="Name"
       picture={getLogoUrlFromDomainName(company.domainName)}

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

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { CellCommentChip } from '@/comments/components/CellCommentChip';
 import { useOpenCommentRightDrawer } from '@/comments/hooks/useOpenCommentRightDrawer';
-import { EditableDoubleText } from '@/ui/components/editable-cell/types/EditableDoubleText';
+import { EditableDoubleTextCell } from '@/ui/components/editable-cell/types/EditableDoubleTextCell';
 import { CommentableType, Person } from '~/generated/graphql';
 
 import { PersonChip } from './PersonChip';
@@ -52,7 +52,7 @@ export function EditablePeopleFullName({ person, onChange }: OwnProps) {
   }
 
   return (
-    <EditableDoubleText
+    <EditableDoubleTextCell
       firstValue={firstNameValue}
       secondValue={lastNameValue}
       firstValuePlaceholder="First name"

front/src/modules/pipeline-progress/components/CompanyBoardCard.tsx

@@ -3,10 +3,8 @@ import styled from '@emotion/styled';
 import { IconCurrencyDollar } from '@tabler/icons-react';
 
 import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
-import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
+import { InplaceDateInput } from '@/ui/components/inplace-input/types/InplaceDateInput';
 import { InplaceTextInput } from '@/ui/components/inplace-input/types/InplaceTextInput';
-import { CellContext } from '@/ui/tables/states/CellContext';
-import { RowContext } from '@/ui/tables/states/RowContext';
 
 import { Company, PipelineProgress } from '../../../generated/graphql';
 import { Checkbox } from '../../ui/components/form/Checkbox';
@@ -72,17 +70,6 @@ type PipelineProgressProp = Pick<
   'id' | 'amount' | 'closeDate'
 >;
 
-// TODO: Remove when refactoring EditableCell into EditableField
-function HackScope({ children }: { children: React.ReactNode }) {
-  return (
-    <RecoilScope>
-      <RecoilScope SpecificContext={RowContext}>
-        <RecoilScope SpecificContext={CellContext}>{children}</RecoilScope>
-      </RecoilScope>
-    </RecoilScope>
-  );
-}
-
 export function CompanyBoardCard({
   company,
   pipelineProgress,
@@ -112,7 +99,7 @@ export function CompanyBoardCard({
         <StyledBoardCardBody>
           <span>
             <IconCurrencyDollar size={theme.icon.size.md} />
-            <HackScope>
+            <RecoilScope>
               <InplaceTextInput
                 content={pipelineProgress.amount?.toString() || ''}
                 placeholder="Opportunity amount"
@@ -123,12 +110,12 @@ export function CompanyBoardCard({
                   })
                 }
               />
-            </HackScope>
+            </RecoilScope>
           </span>
           <span>
             <IconCalendarEvent size={theme.icon.size.md} />
-            <HackScope>
-              <EditableDate
+            <RecoilScope>
+              <InplaceDateInput
                 value={new Date(pipelineProgress.closeDate || Date.now())}
                 changeHandler={(value) => {
                   onCardUpdate({
@@ -137,7 +124,7 @@ export function CompanyBoardCard({
                   });
                 }}
               />
-            </HackScope>
+            </RecoilScope>
           </span>
         </StyledBoardCardBody>
       </StyledBoardCard>

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

@@ -12,20 +12,12 @@ type OwnProps = {
   editModeVerticalPosition?: 'over' | 'below';
 };
 
-export function EditableCell({
-  editModeHorizontalAlign = 'left',
-  editModeVerticalPosition = 'over',
-  editModeContent,
-  nonEditModeContent,
-}: OwnProps) {
+export function EditableCell(props: OwnProps) {
   const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
   const hasSoftFocus = useIsSoftFocusOnCurrentCell();
   return (
     <InplaceInput
-      editModeHorizontalAlign={editModeHorizontalAlign}
-      editModeVerticalPosition={editModeVerticalPosition}
-      editModeContent={editModeContent}
-      nonEditModeContent={nonEditModeContent}
+      {...props}
       setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
       hasSoftFocus={!!hasSoftFocus}
     />

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

@@ -0,0 +1,33 @@
+import { ComponentType, ReactNode } from 'react';
+
+import { InplaceChipInput } from '../../inplace-input/types/InplaceChipInput';
+import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell';
+import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';
+
+export type OwnProps = {
+  placeholder?: string;
+  value: string;
+  picture: string;
+  changeHandler: (upChipd: string) => void;
+  editModeHorizontalAlign?: 'left' | 'right';
+  ChipComponent: ComponentType<{
+    name: string;
+    picture: string;
+    isOverlapped?: boolean;
+  }>;
+  commentCount?: number;
+  onCommentClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  rightEndContents?: ReactNode[];
+};
+
+export function EditableChipCell(props: OwnProps) {
+  const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
+  const hasSoftFocus = useIsSoftFocusOnCurrentCell();
+  return (
+    <InplaceChipInput
+      {...props}
+      setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
+      hasSoftFocus={hasSoftFocus}
+    />
+  );
+}

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

@@ -0,0 +1,22 @@
+import { InplaceDateInput } from '../../inplace-input/types/InplaceDateInput';
+import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell';
+import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';
+
+type OwnProps = {
+  placeholder?: string;
+  value: Date;
+  changeHandler: (date: Date) => void;
+  editModeHorizontalAlign?: 'left' | 'right';
+};
+
+export function EditableDateCell(props: OwnProps) {
+  const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
+  const hasSoftFocus = useIsSoftFocusOnCurrentCell();
+  return (
+    <InplaceDateInput
+      {...props}
+      setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
+      hasSoftFocus={hasSoftFocus}
+    />
+  );
+}

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

@@ -0,0 +1,26 @@
+import { ReactElement } from 'react';
+
+import { InplaceDoubleTextInput } from '../../inplace-input/types/InplaceDoubleTextInput';
+import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell';
+import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';
+
+type OwnProps = {
+  firstValue: string;
+  secondValue: string;
+  firstValuePlaceholder: string;
+  secondValuePlaceholder: string;
+  nonEditModeContent: ReactElement;
+  onChange: (firstValue: string, secondValue: string) => void;
+};
+
+export function EditableDoubleTextCell(props: OwnProps) {
+  const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
+  const hasSoftFocus = useIsSoftFocusOnCurrentCell();
+  return (
+    <InplaceDoubleTextInput
+      {...props}
+      setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
+      hasSoftFocus={hasSoftFocus}
+    />
+  );
+}

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

@@ -0,0 +1,21 @@
+import { InplacePhoneInput } from '../../inplace-input/types/InplacePhoneInput';
+import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell';
+import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';
+
+type OwnProps = {
+  placeholder?: string;
+  value: string;
+  changeHandler: (Phone: string) => void;
+};
+
+export function EditablePhoneCell(props: OwnProps) {
+  const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
+  const hasSoftFocus = useIsSoftFocusOnCurrentCell();
+  return (
+    <InplacePhoneInput
+      {...props}
+      setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
+      hasSoftFocus={hasSoftFocus}
+    />
+  );
+}

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

@@ -1,19 +0,0 @@
-import styled from '@emotion/styled';
-
-export const EditableRelationCreateButton = styled.button`
-  align-items: center;
-  background: none;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  font-family: 'Inter';
-  font-size: ${({ theme }) => theme.font.size.md};
-  gap: ${({ theme }) => theme.spacing(2)};
-  height: 31px;
-  padding-bottom: ${({ theme }) => theme.spacing(1)};
-  padding-left: ${({ theme }) => theme.spacing(1)};
-  padding-top: ${({ theme }) => theme.spacing(1)};
-  user-select: none;
-  width: 100%;
-`;

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

@@ -9,20 +9,12 @@ type OwnProps = {
   editModeHorizontalAlign?: 'left' | 'right';
 };
 
-export function EditableTextCell({
-  editModeHorizontalAlign = 'left',
-  content,
-  changeHandler,
-  placeholder,
-}: OwnProps) {
+export function EditableTextCell(props: OwnProps) {
   const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
   const hasSoftFocus = useIsSoftFocusOnCurrentCell();
   return (
     <InplaceTextInput
-      editModeHorizontalAlign={editModeHorizontalAlign}
-      content={content}
-      changeHandler={changeHandler}
-      placeholder={placeholder}
+      {...props}
       setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
       hasSoftFocus={hasSoftFocus}
     />

front/src/modules/ui/components/inplace-input/types/InplaceChipInput.tsx

@@ -3,9 +3,9 @@ import styled from '@emotion/styled';
 
 import { textInputStyle } from '@/ui/themes/effects';
 
-import { EditableCell } from '../EditableCell';
+import { InplaceInput } from '../InplaceInput';
 
-export type EditableChipProps = {
+export type OwnProps = {
   placeholder?: string;
   value: string;
   picture: string;
@@ -19,6 +19,8 @@ export type EditableChipProps = {
   commentCount?: number;
   onCommentClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   rightEndContents?: ReactNode[];
+  setSoftFocusOnCurrentInplaceInput?: () => void;
+  hasSoftFocus?: boolean;
 };
 
 // TODO: refactor
@@ -39,7 +41,7 @@ const RightContainer = styled.div`
   margin-left: ${(props) => props.theme.spacing(1)};
 `;
 
-function EditableChip({
+export function InplaceChipInput({
   value,
   placeholder,
   changeHandler,
@@ -47,7 +49,9 @@ function EditableChip({
   editModeHorizontalAlign,
   ChipComponent,
   rightEndContents,
-}: EditableChipProps) {
+  setSoftFocusOnCurrentInplaceInput,
+  hasSoftFocus,
+}: OwnProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(value);
 
@@ -58,7 +62,7 @@ function EditableChip({
   };
 
   return (
-    <EditableCell
+    <InplaceInput
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={
         <StyledInplaceInput
@@ -86,8 +90,8 @@ function EditableChip({
           </RightContainer>
         </NoEditModeContainer>
       }
+      setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput}
+      hasSoftFocus={hasSoftFocus}
     />
   );
 }
-
-export default EditableChip;

front/src/modules/ui/components/inplace-input/types/InplaceDateInput.tsx

@@ -4,12 +4,14 @@ import styled from '@emotion/styled';
 import { humanReadableDate } from '@/utils/utils';
 
 import DatePicker from '../../form/DatePicker';
-import { EditableCell } from '../EditableCell';
+import { InplaceInput } from '../InplaceInput';
 
-export type EditableDateProps = {
+export type OwnProps = {
   value: Date;
   changeHandler: (date: Date) => void;
   editModeHorizontalAlign?: 'left' | 'right';
+  setSoftFocusOnCurrentInplaceInput?: () => void;
+  hasSoftFocus?: boolean;
 };
 
 const StyledContainer = styled.div`
@@ -32,11 +34,13 @@ const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
   top: 10px;
   z-index: 1;
 `;
-export function EditableDate({
+export function InplaceDateInput({
   value,
   changeHandler,
   editModeHorizontalAlign,
-}: EditableDateProps) {
+  setSoftFocusOnCurrentInplaceInput,
+  hasSoftFocus,
+}: OwnProps) {
   const [inputValue, setInputValue] = useState(value);
 
   type DivProps = React.HTMLProps<HTMLDivElement>;
@@ -58,7 +62,7 @@ export function EditableDate({
   };
 
   return (
-    <EditableCell
+    <InplaceInput
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={
         <StyledContainer>
@@ -73,9 +77,11 @@ export function EditableDate({
           />
         </StyledContainer>
       }
+      setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput}
+      hasSoftFocus={hasSoftFocus}
       nonEditModeContent={
         <div>{inputValue && humanReadableDate(inputValue)}</div>
       }
-    ></EditableCell>
+    ></InplaceInput>
   );
 }

front/src/modules/ui/components/inplace-input/types/InplaceDoubleTextInput.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { textInputStyle } from '@/ui/themes/effects';
 
-import { EditableCell } from '../EditableCell';
+import { InplaceInput } from '../InplaceInput';
 
 type OwnProps = {
   firstValue: string;
@@ -12,6 +12,8 @@ type OwnProps = {
   secondValuePlaceholder: string;
   nonEditModeContent: ReactElement;
   onChange: (firstValue: string, secondValue: string) => void;
+  setSoftFocusOnCurrentInplaceInput?: () => void;
+  hasSoftFocus?: boolean;
 };
 
 const StyledContainer = styled.div`
@@ -33,18 +35,20 @@ const StyledEditInplaceInput = styled.input`
   ${textInputStyle}
 `;
 
-export function EditableDoubleText({
+export function InplaceDoubleTextInput({
   firstValue,
   secondValue,
   firstValuePlaceholder,
   secondValuePlaceholder,
   nonEditModeContent,
   onChange,
+  setSoftFocusOnCurrentInplaceInput,
+  hasSoftFocus,
 }: OwnProps) {
   const firstValueInputRef = useRef<HTMLInputElement>(null);
 
   return (
-    <EditableCell
+    <InplaceInput
       editModeContent={
         <StyledContainer>
           <StyledEditInplaceInput
@@ -67,6 +71,8 @@ export function EditableDoubleText({
         </StyledContainer>
       }
       nonEditModeContent={nonEditModeContent}
-    ></EditableCell>
+      setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput}
+      hasSoftFocus={hasSoftFocus}
+    ></InplaceInput>
   );
 }

front/src/modules/ui/components/inplace-input/types/InplacePhoneInput.tsx

@@ -5,12 +5,14 @@ import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
 import { textInputStyle } from '@/ui/themes/effects';
 
 import { RawLink } from '../../links/RawLink';
-import { EditableCell } from '../EditableCell';
+import { InplaceInput } from '../InplaceInput';
 
 type OwnProps = {
   placeholder?: string;
   value: string;
   changeHandler: (updated: string) => void;
+  setSoftFocusOnCurrentInplaceInput?: () => void;
+  hasSoftFocus?: boolean;
 };
 
 const StyledRawLink = styled(RawLink)`
@@ -30,12 +32,18 @@ const StyledEditInplaceInput = styled.input`
   ${textInputStyle}
 `;
 
-export function EditablePhone({ value, placeholder, changeHandler }: OwnProps) {
+export function InplacePhoneInput({
+  value,
+  placeholder,
+  changeHandler,
+  setSoftFocusOnCurrentInplaceInput,
+  hasSoftFocus,
+}: OwnProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(value);
 
   return (
-    <EditableCell
+    <InplaceInput
       editModeContent={
         <StyledEditInplaceInput
           autoFocus
@@ -65,6 +73,8 @@ export function EditablePhone({ value, placeholder, changeHandler }: OwnProps) {
           )}
         </>
       }
+      setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput}
+      hasSoftFocus={hasSoftFocus}
     />
   );
 }

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

@@ -3,7 +3,7 @@ import { createColumnHelper } from '@tanstack/react-table';
 
 import { CompanyAccountOwnerCell } from '@/companies/components/CompanyAccountOwnerCell';
 import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell';
-import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
+import { EditableDateCell } from '@/ui/components/editable-cell/types/EditableDateCell';
 import { EditableTextCell } from '@/ui/components/editable-cell/types/EditableTextCell';
 import { ColumnHead } from '@/ui/components/table/ColumnHead';
 import {
@@ -114,7 +114,7 @@ export const useCompaniesColumns = () => {
           />
         ),
         cell: (props) => (
-          <EditableDate
+          <EditableDateCell
             value={
               props.row.original.createdAt
                 ? new Date(props.row.original.createdAt)

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

@@ -3,8 +3,8 @@ import { createColumnHelper } from '@tanstack/react-table';
 
 import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
 import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
-import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
-import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone';
+import { EditableDateCell } from '@/ui/components/editable-cell/types/EditableDateCell';
+import { EditablePhoneCell } from '@/ui/components/editable-cell/types/EditablePhoneCell';
 import { EditableTextCell } from '@/ui/components/editable-cell/types/EditableTextCell';
 import { ColumnHead } from '@/ui/components/table/ColumnHead';
 import {
@@ -87,7 +87,7 @@ export const usePeopleColumns = () => {
           <ColumnHead viewName="Phone" viewIcon={<IconPhone size={16} />} />
         ),
         cell: (props) => (
-          <EditablePhone
+          <EditablePhoneCell
             placeholder="Phone"
             value={props.row.original.phone || ''}
             changeHandler={async (value: string) => {
@@ -112,7 +112,7 @@ export const usePeopleColumns = () => {
           />
         ),
         cell: (props) => (
-          <EditableDate
+          <EditableDateCell
             value={
               props.row.original.createdAt
                 ? new Date(props.row.original.createdAt)