Refactor UI folder (#2016)

* Added Overview page

* Revised Getting Started page

* Minor revision

* Edited readme, minor modifications to docs

* Removed sweep.yaml, .devcontainer, .ergomake

* Moved security.md to .github, added contributing.md

* changes as per code review

* updated contributing.md

* fixed broken links & added missing links in doc, improved structure

* fixed link in wsl setup

* fixed server link, added https cloning in yarn-setup

* removed package-lock.json

* added doc card, admonitions

* removed underline from nav buttons

* refactoring modules/ui

* refactoring modules/ui

* Change folder case

* Fix theme location

* Fix case 2

* Fix storybook

---------

Co-authored-by: Nimra Ahmed <nimra1408@gmail.com>
Co-authored-by: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>

front/src/modules/ui/layout/board/components/BoardColumnEditTitleMenu.tsx

@@ -0,0 +1,147 @@
+import { ChangeEvent, useCallback, useState } from 'react';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { IconTrash } from '@/ui/display/icon';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { StyledDropdownMenuSeparator } from '@/ui/layout/dropdown/components/StyledDropdownMenuSeparator';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor';
+import { ThemeColor } from '@/ui/theme/constants/colors';
+import { textInputStyle } from '@/ui/theme/constants/effects';
+import { debounce } from '~/utils/debounce';
+
+import { boardColumnsState } from '../states/boardColumnsState';
+
+const StyledEditTitleContainer = styled.div`
+  --vertical-padding: ${({ theme }) => theme.spacing(1)};
+
+  align-items: center;
+
+  display: flex;
+  flex-direction: row;
+  height: calc(36px - 2 * var(--vertical-padding));
+  padding: var(--vertical-padding) 0;
+
+  width: calc(100%);
+`;
+
+const StyledEditModeInput = styled.input`
+  ${textInputStyle}
+
+  background: ${({ theme }) => theme.background.transparent.lighter};
+  border-color: ${({ theme }) => theme.color.blue};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: 0px 0px 0px 3px rgba(25, 97, 237, 0.1);
+  font-size: ${({ theme }) => theme.font.size.sm};
+  height: 100%;
+  width: 100%;
+`;
+
+export type BoardColumnEditTitleMenuProps = {
+  onClose: () => void;
+  onDelete?: (id: string) => void;
+  title: string;
+  onTitleEdit: (title: string, color: string) => void;
+  color: ThemeColor;
+  stageId: string;
+};
+
+type ColumnColorOption = {
+  name: string;
+  id: ThemeColor;
+};
+
+export const COLUMN_COLOR_OPTIONS: ColumnColorOption[] = [
+  { name: 'Green', id: 'green' },
+  { name: 'Turquoise', id: 'turquoise' },
+  { name: 'Sky', id: 'sky' },
+  { name: 'Blue', id: 'blue' },
+  { name: 'Purple', id: 'purple' },
+  { name: 'Pink', id: 'pink' },
+  { name: 'Red', id: 'red' },
+  { name: 'Orange', id: 'orange' },
+  { name: 'Yellow', id: 'yellow' },
+  { name: 'Gray', id: 'gray' },
+];
+
+export const BoardColumnEditTitleMenu = ({
+  onClose,
+  onDelete,
+  stageId,
+  onTitleEdit,
+  title,
+  color,
+}: BoardColumnEditTitleMenuProps) => {
+  const [internalValue, setInternalValue] = useState(title);
+  const [, setBoardColumns] = useRecoilState(boardColumnsState);
+  const debouncedOnUpdateTitle = debounce(
+    (newTitle) => onTitleEdit(newTitle, color),
+    200,
+  );
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const title = event.target.value;
+    setInternalValue(title);
+    debouncedOnUpdateTitle(title);
+
+    setBoardColumns((previousBoardColumns) =>
+      previousBoardColumns.map((column) =>
+        column.id === stageId ? { ...column, title: title } : column,
+      ),
+    );
+  };
+
+  const handleColorChange = (newColor: ThemeColor) => {
+    onTitleEdit(title, newColor);
+    onClose();
+    setBoardColumns((previousBoardColumns) =>
+      previousBoardColumns.map((column) =>
+        column.id === stageId
+          ? { ...column, colorCode: newColor ? newColor : 'gray' }
+          : column,
+      ),
+    );
+  };
+
+  const handleDelete = useCallback(() => {
+    setBoardColumns((previousBoardColumns) =>
+      previousBoardColumns.filter((column) => column.id !== stageId),
+    );
+    onDelete?.(stageId);
+    onClose();
+  }, [onClose, onDelete, setBoardColumns, stageId]);
+
+  return (
+    <DropdownMenuItemsContainer>
+      <StyledEditTitleContainer>
+        <StyledEditModeInput
+          value={internalValue}
+          onChange={handleChange}
+          autoComplete="off"
+          autoFocus
+        />
+      </StyledEditTitleContainer>
+      <StyledDropdownMenuSeparator />
+      {COLUMN_COLOR_OPTIONS.map((colorOption) => (
+        <MenuItemSelectColor
+          key={colorOption.name}
+          onClick={() => {
+            handleColorChange(colorOption.id);
+          }}
+          color={colorOption.id}
+          selected={colorOption.id === color}
+          text={colorOption.name}
+        />
+      ))}
+      <StyledDropdownMenuSeparator />
+      <MenuItem
+        onClick={handleDelete}
+        LeftIcon={IconTrash}
+        text="Delete"
+        accent="danger"
+      />
+    </DropdownMenuItemsContainer>
+  );
+};