Feat/rename and color picker (#780)

* WIP

* Add menu for rename/color select

* Add stories

* Remove useless code

* Fix color name, add icon for selected color

* Remove useless comment

* Unify color vocabulary

* Fix rebase

* Rename story

* Improve hotkeys and imports

front/src/modules/ui/board/components/BoardColumn.tsx

@@ -1,9 +1,14 @@
-import React, { ChangeEvent } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
+import { Key } from 'ts-key-enum';
 
-import { debounce } from '~/utils/debounce';
+import { usePreviousHotkeyScope } from '@/ui/hotkey/hooks/usePreviousHotkeyScope';
+import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
+import { Tag } from '@/ui/tag/components/Tag';
 
-import { EditColumnTitleInput } from './EditColumnTitleInput';
+import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
+
+import { BoardColumnMenu } from './BoardColumnMenu';
 
 export const StyledColumn = styled.div<{ isFirstColumn: boolean }>`
   background-color: ${({ theme }) => theme.background.primary};
@@ -29,10 +34,14 @@ const StyledHeader = styled.div`
   width: 100%;
 `;
 
-export const StyledColumnTitle = styled.h3`
+export const StyledColumnTitle = styled.h3<{
+  colorHexCode?: string;
+  colorName?: string;
+}>`
   align-items: center;
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ color }) => color};
+  color: ${({ colorHexCode, colorName, theme }) =>
+    colorName ? theme.tag.text[colorName] : colorHexCode};
   display: flex;
   flex-direction: row;
   font-size: ${({ theme }) => theme.font.size.md};
@@ -52,49 +61,67 @@ const StyledAmount = styled.div`
 `;
 
 type OwnProps = {
-  colorCode?: string;
+  color?: string;
   title: string;
   pipelineStageId?: string;
   onTitleEdit: (title: string) => void;
+  onColumnColorEdit: (color: string) => void;
   totalAmount?: number;
   children: React.ReactNode;
   isFirstColumn: boolean;
 };
 
 export function BoardColumn({
-  colorCode,
+  color,
   title,
   onTitleEdit,
+  onColumnColorEdit,
   totalAmount,
   children,
   isFirstColumn,
 }: OwnProps) {
-  const [isEditing, setIsEditing] = React.useState(false);
-  const [internalValue, setInternalValue] = React.useState(title);
+  const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] =
+    React.useState(false);
 
-  const debouncedOnUpdate = debounce(onTitleEdit, 200);
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setInternalValue(event.target.value);
-    debouncedOnUpdate(event.target.value);
-  };
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+
+  useScopedHotkeys(
+    [Key.Escape, Key.Enter],
+    handleClose,
+    BoardColumnHotkeyScope.BoardColumn,
+    [],
+  );
+
+  function handleTitleClick() {
+    setIsBoardColumnMenuOpen(true);
+    setHotkeyScopeAndMemorizePreviousScope(BoardColumnHotkeyScope.BoardColumn, {
+      goto: false,
+    });
+  }
+
+  function handleClose() {
+    goBackToPreviousHotkeyScope();
+    setIsBoardColumnMenuOpen(false);
+  }
 
   return (
     <StyledColumn isFirstColumn={isFirstColumn}>
-      <StyledHeader onClick={() => setIsEditing(true)}>
-        <StyledColumnTitle color={colorCode}>
-          {isEditing ? (
-            <EditColumnTitleInput
-              color={colorCode}
-              onFocusLeave={() => setIsEditing(false)}
-              value={internalValue}
-              onChange={handleChange}
-            />
-          ) : (
-            <div>{title}</div>
-          )}
-        </StyledColumnTitle>
+      <StyledHeader>
+        <Tag onClick={handleTitleClick} color={color} text={title} />
         {!!totalAmount && <StyledAmount>${totalAmount}</StyledAmount>}
       </StyledHeader>
+      {isBoardColumnMenuOpen && (
+        <BoardColumnMenu
+          onClose={() => setIsBoardColumnMenuOpen(false)}
+          onTitleEdit={onTitleEdit}
+          onColumnColorEdit={onColumnColorEdit}
+          title={title}
+          color={color}
+        />
+      )}
       {children}
     </StyledColumn>
   );