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>
2023-10-14 00:04:29 +02:00
parent a35ea5e8f9
commit 258685467b
732 changed files with 1106 additions and 1010 deletions
--- a/front/src/modules/ui/layout/board/components/BoardColumnMenu.tsx
+++ b/front/src/modules/ui/layout/board/components/BoardColumnMenu.tsx
@ -0,0 +1,189 @@
+import { useCallback, useContext, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+import { Key } from 'ts-key-enum';
+
+import { useCreateCompanyProgress } from '@/companies/hooks/useCreateCompanyProgress';
+import { useFilteredSearchCompanyQuery } from '@/companies/hooks/useFilteredSearchCompanyQuery';
+import {
+  IconArrowLeft,
+  IconArrowRight,
+  IconPencil,
+  IconPlus,
+} from '@/ui/display/icon';
+import { useSnackBar } from '@/ui/feedback/snack-bar/hooks/useSnackBar';
+import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
+import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { StyledDropdownMenu } from '@/ui/layout/dropdown/components/StyledDropdownMenu';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { logError } from '~/utils/logError';
+
+import { BoardColumnContext } from '../contexts/BoardColumnContext';
+import { useBoardColumns } from '../hooks/useBoardColumns';
+import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
+
+import { BoardColumnEditTitleMenu } from './BoardColumnEditTitleMenu';
+const StyledMenuContainer = styled.div`
+  position: absolute;
+  top: ${({ theme }) => theme.spacing(10)};
+  width: 200px;
+  z-index: 1;
+`;
+
+type BoardColumnMenuProps = {
+  onClose: () => void;
+  onDelete?: (id: string) => void;
+  onTitleEdit: (title: string, color: string) => void;
+  stageId: string;
+};
+
+type Menu = 'actions' | 'add' | 'title';
+
+export const BoardColumnMenu = ({
+  onClose,
+  onDelete,
+  onTitleEdit,
+  stageId,
+}: BoardColumnMenuProps) => {
+  const [currentMenu, setCurrentMenu] = useState('actions');
+  const column = useContext(BoardColumnContext);
+
+  const boardColumnMenuRef = useRef(null);
+
+  const { enqueueSnackBar } = useSnackBar();
+  const createCompanyProgress = useCreateCompanyProgress();
+  const { handleMoveBoardColumn } = useBoardColumns();
+
+  const handleCompanySelected = (
+    selectedCompany: EntityForSelect | null | undefined,
+  ) => {
+    if (!selectedCompany?.id) {
+      enqueueSnackBar(
+        'There was a problem with the company selection, please retry.',
+        {
+          variant: 'error',
+        },
+      );
+
+      logError('There was a problem with the company selection, please retry.');
+      return;
+    }
+
+    createCompanyProgress(selectedCompany.id, stageId);
+    closeMenu();
+  };
+
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+
+  const closeMenu = useCallback(() => {
+    goBackToPreviousHotkeyScope();
+    onClose();
+  }, [goBackToPreviousHotkeyScope, onClose]);
+
+  const setMenu = (menu: Menu) => {
+    if (menu === 'add') {
+      setHotkeyScopeAndMemorizePreviousScope(
+        RelationPickerHotkeyScope.RelationPicker,
+      );
+    }
+    setCurrentMenu(menu);
+  };
+  const [relationPickerSearchFilter] = useRecoilScopedState(
+    relationPickerSearchFilterScopedState,
+  );
+  const companies = useFilteredSearchCompanyQuery({
+    searchFilter: relationPickerSearchFilter,
+  });
+
+  useListenClickOutside({
+    refs: [boardColumnMenuRef],
+    callback: closeMenu,
+  });
+
+  useScopedHotkeys(
+    [Key.Escape, Key.Enter],
+    closeMenu,
+    BoardColumnHotkeyScope.BoardColumn,
+    [],
+  );
+
+  if (!column) return <></>;
+
+  const { isFirstColumn, isLastColumn, columnDefinition } = column;
+
+  const handleColumnMoveLeft = () => {
+    closeMenu();
+    if (isFirstColumn) {
+      return;
+    }
+    handleMoveBoardColumn('left', columnDefinition);
+  };
+
+  const handleColumnMoveRight = () => {
+    closeMenu();
+    if (isLastColumn) {
+      return;
+    }
+    handleMoveBoardColumn('right', columnDefinition);
+  };
+
+  return (
+    <StyledMenuContainer ref={boardColumnMenuRef}>
+      <StyledDropdownMenu data-select-disable>
+        {currentMenu === 'actions' && (
+          <DropdownMenuItemsContainer>
+            <MenuItem
+              onClick={() => setMenu('title')}
+              LeftIcon={IconPencil}
+              text="Edit"
+            />
+            <MenuItem
+              LeftIcon={IconArrowLeft}
+              onClick={handleColumnMoveLeft}
+              text="Move left"
+            />
+            <MenuItem
+              LeftIcon={IconArrowRight}
+              onClick={handleColumnMoveRight}
+              text="Move right"
+            />
+            <MenuItem
+              onClick={() => setMenu('add')}
+              LeftIcon={IconPlus}
+              text="New opportunity"
+            />
+          </DropdownMenuItemsContainer>
+        )}
+        {currentMenu === 'title' && (
+          <BoardColumnEditTitleMenu
+            color={columnDefinition.colorCode ?? 'gray'}
+            onClose={closeMenu}
+            onTitleEdit={onTitleEdit}
+            title={columnDefinition.title}
+            onDelete={onDelete}
+            stageId={stageId}
+          />
+        )}
+        {currentMenu === 'add' && (
+          <SingleEntitySelect
+            disableBackgroundBlur
+            entitiesToSelect={companies.entitiesToSelect}
+            loading={companies.loading}
+            onCancel={closeMenu}
+            onEntitySelected={handleCompanySelected}
+            selectedEntity={companies.selectedEntities[0]}
+          />
+        )}
+      </StyledDropdownMenu>
+    </StyledMenuContainer>
+  );
+};