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/EntityBoardCard.tsx

@@ -0,0 +1,53 @@
+import { Draggable } from '@hello-pangea/dnd';
+import { useSetRecoilState } from 'recoil';
+
+import { contextMenuIsOpenState } from '@/ui/navigation/context-menu/states/contextMenuIsOpenState';
+import { contextMenuPositionState } from '@/ui/navigation/context-menu/states/contextMenuPositionState';
+
+import { useCurrentCardSelected } from '../hooks/useCurrentCardSelected';
+import { BoardOptions } from '../types/BoardOptions';
+
+export const EntityBoardCard = ({
+  boardOptions,
+  cardId,
+  index,
+}: {
+  boardOptions: BoardOptions;
+  cardId: string;
+  index: number;
+}) => {
+  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
+  const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
+
+  const { setCurrentCardSelected } = useCurrentCardSelected();
+
+  const handleContextMenu = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setCurrentCardSelected(true);
+    setContextMenuPosition({
+      x: event.clientX,
+      y: event.clientY,
+    });
+    setContextMenuOpenState(true);
+  };
+
+  return (
+    <Draggable key={cardId} draggableId={cardId} index={index}>
+      {(draggableProvided) => (
+        <div
+          ref={draggableProvided?.innerRef}
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...draggableProvided?.dragHandleProps}
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...draggableProvided?.draggableProps}
+          className="entity-board-card"
+          data-selectable-id={cardId}
+          data-select-disable
+          onContextMenu={handleContextMenu}
+        >
+          {<boardOptions.CardComponent />}
+        </div>
+      )}
+    </Draggable>
+  );
+};