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/EntityBoardColumn.tsx
+++ b/front/src/modules/ui/layout/board/components/EntityBoardColumn.tsx
@ -0,0 +1,123 @@
+import { useContext } from 'react';
+import styled from '@emotion/styled';
+import { Draggable, Droppable, DroppableProvided } from '@hello-pangea/dnd';
+import { useRecoilValue } from 'recoil';
+
+import { BoardColumn } from '@/ui/layout/board/components/BoardColumn';
+import { BoardCardIdContext } from '@/ui/layout/board/contexts/BoardCardIdContext';
+import { BoardColumnContext } from '@/ui/layout/board/contexts/BoardColumnContext';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+import { boardCardIdsByColumnIdFamilyState } from '../states/boardCardIdsByColumnIdFamilyState';
+import { boardColumnTotalsFamilySelector } from '../states/selectors/boardColumnTotalsFamilySelector';
+import { BoardOptions } from '../types/BoardOptions';
+
+import { EntityBoardCard } from './EntityBoardCard';
+
+const StyledPlaceholder = styled.div`
+  min-height: 1px;
+`;
+
+const StyledNewCardButtonContainer = styled.div`
+  padding-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledColumnCardsContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+`;
+
+type BoardColumnCardsContainerProps = {
+  children: React.ReactNode;
+  droppableProvided: DroppableProvided;
+};
+
+type EntityBoardColumnProps = {
+  boardOptions: BoardOptions;
+  onDelete?: (columnId: string) => void;
+  onTitleEdit: (columnId: string, title: string, color: string) => void;
+};
+
+const BoardColumnCardsContainer = ({
+  children,
+  droppableProvided,
+}: BoardColumnCardsContainerProps) => {
+  return (
+    <StyledColumnCardsContainer
+      ref={droppableProvided?.innerRef}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...droppableProvided?.droppableProps}
+    >
+      {children}
+      <StyledPlaceholder>{droppableProvided?.placeholder}</StyledPlaceholder>
+    </StyledColumnCardsContainer>
+  );
+};
+
+export const EntityBoardColumn = ({
+  boardOptions,
+  onDelete,
+  onTitleEdit,
+}: EntityBoardColumnProps) => {
+  const column = useContext(BoardColumnContext);
+
+  const boardColumnId = column?.id || '';
+
+  const boardColumnTotal = useRecoilValue(
+    boardColumnTotalsFamilySelector(boardColumnId),
+  );
+
+  const cardIds = useRecoilValue(
+    boardCardIdsByColumnIdFamilyState(boardColumnId),
+  );
+
+  const handleTitleEdit = (title: string, color: string) => {
+    onTitleEdit(boardColumnId, title, color);
+  };
+
+  if (!column) return <></>;
+
+  return (
+    <Droppable droppableId={column.id}>
+      {(droppableProvided) => (
+        <BoardColumn
+          onTitleEdit={handleTitleEdit}
+          onDelete={onDelete}
+          totalAmount={boardColumnTotal}
+          numChildren={cardIds.length}
+          stageId={column.id}
+        >
+          <BoardColumnCardsContainer droppableProvided={droppableProvided}>
+            {cardIds.map((cardId, index) => (
+              <BoardCardIdContext.Provider value={cardId} key={cardId}>
+                <EntityBoardCard
+                  index={index}
+                  cardId={cardId}
+                  boardOptions={boardOptions}
+                />
+              </BoardCardIdContext.Provider>
+            ))}
+            <Draggable
+              draggableId={`new-${column.id}`}
+              index={cardIds.length}
+              isDragDisabled={true}
+            >
+              {(draggableProvided) => (
+                <div
+                  ref={draggableProvided?.innerRef}
+                  // eslint-disable-next-line react/jsx-props-no-spreading
+                  {...draggableProvided?.draggableProps}
+                >
+                  <StyledNewCardButtonContainer>
+                    <RecoilScope>{boardOptions.newCardComponent}</RecoilScope>
+                  </StyledNewCardButtonContainer>
+                </div>
+              )}
+            </Draggable>
+          </BoardColumnCardsContainer>
+        </BoardColumn>
+      )}
+    </Droppable>
+  );
+};