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/draggable-list/__stories__/DraggableItem.stories.tsx

@@ -0,0 +1,43 @@
+import { DragDropContext, Droppable } from '@hello-pangea/dnd';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { IconBell } from '@/ui/display/icon';
+import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { DraggableItem } from '../components/DraggableItem';
+
+const meta: Meta<typeof DraggableItem> = {
+  title: 'UI/DraggableList/DraggableItem',
+  component: DraggableItem,
+  decorators: [
+    (Story) => (
+      <DragDropContext onDragEnd={() => jest.fn()}>
+        <Droppable droppableId="droppable-id">
+          {(_provided) => <Story />}
+        </Droppable>
+      </DragDropContext>
+    ),
+    ComponentDecorator,
+  ],
+  parameters: {
+    container: { width: 100 },
+  },
+  argTypes: {
+    itemComponent: { control: { disable: true } },
+  },
+  args: {
+    draggableId: 'draggable-1',
+    index: 0,
+    isDragDisabled: false,
+    itemComponent: (
+      <MenuItemDraggable LeftIcon={IconBell} text="Draggable item 1" />
+    ),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DraggableItem>;
+
+export const Default: Story = {};

front/src/modules/ui/layout/draggable-list/__stories__/DraggableList.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { IconBell } from '@/ui/display/icon';
+import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { DraggableItem } from '../components/DraggableItem';
+import { DraggableList } from '../components/DraggableList';
+
+const meta: Meta<typeof DraggableList> = {
+  title: 'UI/DraggableList/DraggableList',
+  component: DraggableList,
+  decorators: [ComponentDecorator],
+  parameters: {
+    onDragEnd: () => console.log('dragged'),
+  },
+  argTypes: {
+    draggableItems: { control: false },
+  },
+  args: {
+    draggableItems: (
+      <>
+        <DraggableItem
+          draggableId="draggable-1"
+          index={0}
+          isDragDisabled={false}
+          itemComponent={
+            <MenuItemDraggable
+              LeftIcon={IconBell}
+              text="Non Draggable item 1"
+            />
+          }
+        />
+        <DraggableItem
+          draggableId="draggable-2"
+          index={1}
+          itemComponent={
+            <MenuItemDraggable LeftIcon={IconBell} text="Draggable item 2" />
+          }
+        />
+        <DraggableItem
+          draggableId="draggable-3"
+          index={2}
+          itemComponent={
+            <MenuItemDraggable LeftIcon={IconBell} text="Draggable item 3" />
+          }
+        />
+      </>
+    ),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DraggableItem>;
+
+export const Default: Story = {};

front/src/modules/ui/layout/draggable-list/components/DraggableItem.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import { Draggable } from '@hello-pangea/dnd';
+
+type DraggableItemProps = {
+  draggableId: string;
+  isDragDisabled?: boolean;
+  index: number;
+  itemComponent: JSX.Element;
+};
+
+export const DraggableItem = ({
+  draggableId,
+  isDragDisabled = false,
+  index,
+  itemComponent,
+}: DraggableItemProps) => {
+  const theme = useTheme();
+  return (
+    <Draggable
+      key={draggableId}
+      draggableId={draggableId}
+      index={index}
+      isDragDisabled={isDragDisabled}
+    >
+      {(draggableProvided, draggableSnapshot) => {
+        const draggableStyle = draggableProvided.draggableProps.style;
+        const isDragged = draggableSnapshot.isDragging;
+        return (
+          <div
+            ref={draggableProvided.innerRef}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...draggableProvided.draggableProps}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...draggableProvided.dragHandleProps}
+            style={{
+              ...draggableStyle,
+              left: 'auto',
+              top: 'auto',
+              transform: draggableStyle?.transform?.replace(
+                /\(-?\d+px,/,
+                '(0,',
+              ),
+              background: isDragged
+                ? theme.background.transparent.light
+                : 'none',
+            }}
+          >
+            {itemComponent}
+          </div>
+        );
+      }}
+    </Draggable>
+  );
+};

front/src/modules/ui/layout/draggable-list/components/DraggableList.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import {
+  DragDropContext,
+  Droppable,
+  OnDragEndResponder,
+} from '@hello-pangea/dnd';
+import { v4 } from 'uuid';
+type DraggableListProps = {
+  draggableItems: React.ReactNode;
+  onDragEnd: OnDragEndResponder;
+};
+
+const StyledDragDropItemsWrapper = styled.div`
+  width: 100%;
+`;
+
+export const DraggableList = ({
+  draggableItems,
+  onDragEnd,
+}: DraggableListProps) => {
+  const [v4Persistable] = useState(v4());
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <StyledDragDropItemsWrapper>
+        <Droppable droppableId={v4Persistable}>
+          {(provided) => (
+            <div
+              ref={provided.innerRef}
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...provided.droppableProps}
+            >
+              {draggableItems}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </StyledDragDropItemsWrapper>
+    </DragDropContext>
+  );
+};