feat(ui): added ui components for new dashboard

frontend/src/components/v2/Drawer/Drawer.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button';
+import { Drawer, DrawerContent, DrawerContentProps, DrawerTrigger } from './Drawer';
+
+const meta: Meta<typeof Drawer> = {
+  title: 'Components/Drawer',
+  component: Drawer,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof DrawerContent>;
+
+const Template = (args: DrawerContentProps) => (
+  <Drawer>
+    <DrawerTrigger asChild>
+      <Button>Open</Button>
+    </DrawerTrigger>
+    <DrawerContent {...args}>Hello world</DrawerContent>
+  </Drawer>
+);
+
+export const Basic: Story = {
+  render: (args) => <Template {...args} />,
+  args: {
+    title: 'Title',
+    subTitle: 'Something as subtitle',
+    footerContent: 'footer content'
+  }
+};

frontend/src/components/v2/Drawer/Drawer.tsx

@@ -0,0 +1,84 @@
+import { forwardRef, ReactNode } from 'react';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cva, VariantProps } from 'cva';
+import { twMerge } from 'tailwind-merge';
+
+import { Card, CardBody, CardFooter, CardTitle } from '../Card';
+import { IconButton } from '../IconButton';
+
+export type DrawerContentProps = DialogPrimitive.DialogContentProps & {
+  title?: ReactNode;
+  subTitle?: ReactNode;
+  footerContent?: ReactNode;
+  onClose?: () => void;
+} & VariantProps<typeof drawerContentVariation>;
+
+const drawerContentVariation = cva(
+  'fixed ease-in-out duration-300 z-[90] border border-mineshaft-600 drop-shadow-2xl',
+  {
+    variants: {
+      direction: {
+        right: [
+          'right-0 top-0',
+          'h-full w-96',
+          'data-[state=open]:animate-drawerRightIn data-[state=closed]:animate-drawerRightOut'
+        ]
+      }
+    }
+  }
+);
+
+export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
+  (
+    { children, title, subTitle, className, footerContent, direction = 'right', onClose, ...props },
+    forwardedRef
+  ) => (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay
+        className="fixed inset-0 z-[70] h-full w-full"
+        style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)' }}
+      />
+      <DialogPrimitive.Content
+        {...props}
+        ref={forwardedRef}
+        className={twMerge(drawerContentVariation({ direction, className }))}
+      >
+        <Card isRounded={false} className="h-full w-full">
+          {title && (
+            <CardTitle subTitle={subTitle} className="px-4">
+              {title}
+            </CardTitle>
+          )}
+          <CardBody className="flex-grow overflow-y-auto overflow-x-hidden px-4">
+            {children}
+          </CardBody>
+          {footerContent && <CardFooter>{footerContent}</CardFooter>}{' '}
+          <DialogPrimitive.Close aria-label="Close" asChild onClick={onClose}>
+            <IconButton
+              variant="plain"
+              ariaLabel="close"
+              className="absolute top-4 right-6 rounded text-bunker-400 hover:text-bunker-50"
+            >
+              <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
+            </IconButton>
+          </DialogPrimitive.Close>
+        </Card>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  )
+);
+
+DrawerContent.displayName = 'ModalContent';
+
+export type DrawerProps = Omit<DialogPrimitive.DialogProps, 'open'> & { isOpen?: boolean };
+export const Drawer = ({ isOpen, ...props }: DrawerProps) => (
+  <DialogPrimitive.Root open={isOpen} {...props} />
+);
+
+export const DrawerTrigger = DialogPrimitive.Trigger;
+export type DrawerTriggerProps = DialogPrimitive.DialogTriggerProps;
+
+export const DrawerClose = DialogPrimitive.Close;
+export type DrawerCloseProps = DialogPrimitive.DialogCloseProps;

frontend/src/components/v2/Drawer/index.tsx

@@ -0,0 +1 @@
+export { Drawer, DrawerClose,DrawerContent, DrawerTrigger } from './Drawer';