Feat/harmonize chips cell fields (#724)

* Wip

* Finished

* Fix lint

front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx

@@ -0,0 +1,51 @@
+import styled from '@emotion/styled';
+
+type Props = {
+  softFocus?: boolean;
+  onClick?: () => void;
+};
+
+export const EditableCellDisplayModeOuterContainer = styled.div<
+  Pick<Props, 'softFocus'>
+>`
+  align-items: center;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
+
+  ${(props) =>
+    props.softFocus
+      ? `background: ${props.theme.background.transparent.secondary};
+         border-radius: ${props.theme.border.radius.sm};
+         box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};`
+      : ''}
+`;
+
+export const EditableCellDisplayModeInnerContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+`;
+
+export function EditableCellDisplayContainer({
+  children,
+  softFocus,
+  onClick,
+}: React.PropsWithChildren<Props>) {
+  return (
+    <EditableCellDisplayModeOuterContainer
+      onClick={onClick}
+      softFocus={softFocus}
+    >
+      <EditableCellDisplayModeInnerContainer>
+        {children}
+      </EditableCellDisplayModeInnerContainer>
+    </EditableCellDisplayModeOuterContainer>
+  );
+}

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

@@ -1,51 +1,19 @@
-import styled from '@emotion/styled';
-
 import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';
 
-type Props = {
-  softFocus?: boolean;
-};
-
-export const EditableCellNormalModeOuterContainer = styled.div<Props>`
-  align-items: center;
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-
-  padding-left: ${({ theme }) => theme.spacing(2)};
-  padding-right: ${({ theme }) => theme.spacing(1)};
-  width: 100%;
-
-  ${(props) =>
-    props.softFocus
-      ? `background: ${props.theme.background.transparent.secondary};
-         border-radius: ${props.theme.border.radius.sm};
-         box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};`
-      : ''}
-`;
-
-export const EditableCellNormalModeInnerContainer = styled.div`
-  align-items: center;
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-  width: 100%;
-`;
+import { EditableCellDisplayContainer } from './EditableCellContainer';
 
 export function EditableCellDisplayMode({
   children,
 }: React.PropsWithChildren<unknown>) {
   const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
 
-  function handleOnClick() {
+  function handleClick() {
     setSoftFocusOnCurrentCell();
   }
 
   return (
-    <EditableCellNormalModeOuterContainer onClick={handleOnClick}>
-      <EditableCellNormalModeInnerContainer>
-        {children}
-      </EditableCellNormalModeInnerContainer>
-    </EditableCellNormalModeOuterContainer>
+    <EditableCellDisplayContainer onClick={handleClick}>
+      {children}
+    </EditableCellDisplayContainer>
   );
 }

front/src/modules/ui/table/editable-cell/components/EditableCellSoftFocusMode.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PropsWithChildren } from 'react';
 
 import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
@@ -7,15 +7,16 @@ import { isNonTextWritingKey } from '@/ui/hotkey/utils/isNonTextWritingKey';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 import { useEditableCell } from '../hooks/useEditableCell';
 
-import {
-  EditableCellNormalModeInnerContainer,
-  EditableCellNormalModeOuterContainer,
-} from './EditableCellDisplayMode';
+import { EditableCellDisplayContainer } from './EditableCellContainer';
+
+type OwnProps = PropsWithChildren<{
+  editHotkeyScope?: HotkeyScope;
+}>;
 
 export function EditableCellSoftFocusMode({
   children,
   editHotkeyScope,
-}: React.PropsWithChildren<{ editHotkeyScope?: HotkeyScope }>) {
+}: OwnProps) {
   const { openEditableCell } = useEditableCell();
 
   function openEditMode() {
@@ -61,13 +62,8 @@ export function EditableCellSoftFocusMode({
   }
 
   return (
-    <EditableCellNormalModeOuterContainer
-      onClick={handleClick}
-      softFocus={true}
-    >
-      <EditableCellNormalModeInnerContainer>
-        {children}
-      </EditableCellNormalModeInnerContainer>
-    </EditableCellNormalModeOuterContainer>
+    <EditableCellDisplayContainer onClick={handleClick} softFocus>
+      {children}
+    </EditableCellDisplayContainer>
   );
 }