Add eslint rule and fix as many issues as possible

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

@@ -1,21 +1,21 @@
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { Meta, StoryObj } from '@storybook/react';
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { Button } from './Button';
+import { Button } from "./Button";
 
 const meta: Meta<typeof Button> = {
-  title: 'Components/Button',
+  title: "Components/Button",
   component: Button,
-  tags: ['v2'],
+  tags: ["v2"],
   argTypes: {
     isRounded: {
       defaultValue: true,
-      type: 'boolean'
+      type: "boolean"
     },
     isFullWidth: {
       defaultValue: false,
-      type: 'boolean'
+      type: "boolean"
     }
   }
 };
@@ -26,71 +26,71 @@ type Story = StoryObj<typeof Button>;
 // More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
 export const Primary: Story = {
   args: {
-    children: 'Hello Infisical'
+    children: "Hello Infisical"
   }
 };
 
 export const Secondary: Story = {
   args: {
-    children: 'Hello Infisical',
-    colorSchema: 'secondary',
-    variant: 'outline'
+    children: "Hello Infisical",
+    colorSchema: "secondary",
+    variant: "outline"
   }
 };
 
 export const Star: Story = {
   args: {
-    children: 'Hello Infisical',
-    variant: 'star'
+    children: "Hello Infisical",
+    variant: "star"
   }
 };
 
 export const Danger: Story = {
   args: {
-    children: 'Hello Infisical',
-    colorSchema: 'danger',
-    variant: 'solid'
+    children: "Hello Infisical",
+    colorSchema: "danger",
+    variant: "solid"
   }
 };
 
 export const Plain: Story = {
   args: {
-    children: 'Hello Infisical',
-    variant: 'plain'
+    children: "Hello Infisical",
+    variant: "plain"
   }
 };
 
 export const Disabled: Story = {
   args: {
-    children: 'Hello Infisical',
+    children: "Hello Infisical",
     disabled: true
   }
 };
 
 export const FullWidth: Story = {
   args: {
-    children: 'Hello Infisical',
+    children: "Hello Infisical",
     isFullWidth: true
   }
 };
 
 export const Loading: Story = {
   args: {
-    children: 'Hello Infisical',
+    children: "Hello Infisical",
     isLoading: true
   }
 };
 
 export const LeftIcon: Story = {
   args: {
-    children: 'Hello Infisical',
+    children: "Hello Infisical",
     leftIcon: <FontAwesomeIcon icon={faPlus} className="pr-0.5" />
   }
 };
 
 export const RightIcon: Story = {
   args: {
-    children: 'Hello Infisical',
+    children: "Hello Infisical",
     rightIcon: <FontAwesomeIcon icon={faPlus} className="pr-0.5" />
   }
 };

frontend/src/components/v2/Button/Button.tsx

@@ -1,6 +1,6 @@
-import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react';
-import { cva, VariantProps } from 'cva';
-import { twMerge } from 'tailwind-merge';
+import { ButtonHTMLAttributes, forwardRef, ReactNode } from "react";
+import { cva, VariantProps } from "cva";
+import { twMerge } from "tailwind-merge";
 
 type Props = {
   children: ReactNode;
@@ -13,120 +13,120 @@ type Props = {
 
 const buttonVariants = cva(
   [
-    'button',
-    'transition-all',
-    'font-inter font-medium',
-    'cursor-pointer',
-    'inline-flex items-center justify-center',
-    'relative',
-    'whitespace-nowrap'
+    "button",
+    "transition-all",
+    "font-inter font-medium",
+    "cursor-pointer",
+    "inline-flex items-center justify-center",
+    "relative",
+    "whitespace-nowrap"
   ],
   {
     variants: {
       colorSchema: {
-        primary: ['bg-primary', 'text-black', 'border-primary bg-opacity-90 hover:bg-opacity-100'],
-        secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-opacity-80'],
-        danger: ['bg-red', 'text-white', 'border-red hover:bg-opacity-90'],
-        gray: ['bg-bunker-500', 'text-bunker-200']
+        primary: ["bg-primary", "text-black", "border-primary bg-opacity-90 hover:bg-opacity-100"],
+        secondary: ["bg-mineshaft", "text-gray-300", "border-mineshaft hover:bg-opacity-80"],
+        danger: ["bg-red", "text-white", "border-red hover:bg-opacity-90"],
+        gray: ["bg-bunker-500", "text-bunker-200"]
       },
       variant: {
-        solid: '',
-        outline: ['bg-transparent', 'border-2', 'border-solid'],
-        plain: '',
-        selected: '',
-        outline_bg: '',
+        solid: "",
+        outline: ["bg-transparent", "border-2", "border-solid"],
+        plain: "",
+        selected: "",
+        outline_bg: "",
         // a constant color not in use on hover or click goes colorSchema color
-        star: 'text-bunker-200 bg-mineshaft-700 border-mineshaft-600'
+        star: "text-bunker-200 bg-mineshaft-700 border-mineshaft-600"
       },
       isDisabled: {
-        true: 'bg-mineshaft-700 border border-mineshaft-600 text-white opacity-50 cursor-not-allowed',
-        false: 'border'
+        true: "bg-mineshaft-700 border border-mineshaft-600 text-white opacity-50 cursor-not-allowed",
+        false: "border"
       },
       isFullWidth: {
-        true: 'w-full',
-        false: ''
+        true: "w-full",
+        false: ""
       },
       isRounded: {
-        true: 'rounded-md',
-        false: ''
+        true: "rounded-md",
+        false: ""
       },
       size: {
-        xs: ['text-xs', 'py-1', 'px-1'],
-        sm: ['text-sm', 'py-2', 'px-2'],
-        md: ['text-md', 'py-2', 'px-4'],
-        lg: ['text-lg', 'py-2', 'px-8']
+        xs: ["text-xs", "py-1", "px-1"],
+        sm: ["text-sm", "py-2", "px-2"],
+        md: ["text-md", "py-2", "px-4"],
+        lg: ["text-lg", "py-2", "px-8"]
       }
     },
     compoundVariants: [
       {
-        colorSchema: 'primary',
-        variant: 'star',
-        className: 'bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary hover:text-black hover:border-primary-400 duration-100'
+        colorSchema: "primary",
+        variant: "star",
+        className: "bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary hover:text-black hover:border-primary-400 duration-100"
       },
       {
-        colorSchema: 'primary',
-        variant: 'solid',
-        className: 'bg-primary-500 bg-opacity-90 hover:bg-primary-500 hover:text-black'
+        colorSchema: "primary",
+        variant: "solid",
+        className: "bg-primary-500 bg-opacity-90 hover:bg-primary-500 hover:text-black"
       },
       {
-        colorSchema: 'primary',
-        variant: 'selected',
-        className: 'bg-primary/10 border border-primary/50 text-bunker-200'
+        colorSchema: "primary",
+        variant: "selected",
+        className: "bg-primary/10 border border-primary/50 text-bunker-200"
       },
       {
-        colorSchema: 'primary',
-        variant: 'outline_bg',
-        className: 'bg-mineshaft-600 border border-mineshaft-500 hover:bg-primary/[0.1] hover:border-primary/40 text-bunker-200'
+        colorSchema: "primary",
+        variant: "outline_bg",
+        className: "bg-mineshaft-600 border border-mineshaft-500 hover:bg-primary/[0.1] hover:border-primary/40 text-bunker-200"
       },
       {
-        colorSchema: 'secondary',
-        variant: 'star',
-        className: 'bg-mineshaft-700 border border-mineshaft-600 hover:bg-mineshaft hover:text-white'
+        colorSchema: "secondary",
+        variant: "star",
+        className: "bg-mineshaft-700 border border-mineshaft-600 hover:bg-mineshaft hover:text-white"
       },
       {
-        colorSchema: 'danger',
-        variant: 'star',
-        className: 'hover:bg-red hover:text-white'
+        colorSchema: "danger",
+        variant: "star",
+        className: "hover:bg-red hover:text-white"
       },
       {
-        colorSchema: 'primary',
-        variant: 'outline',
-        className: 'text-primary hover:bg-primary hover:text-black'
+        colorSchema: "primary",
+        variant: "outline",
+        className: "text-primary hover:bg-primary hover:text-black"
       },
       {
-        colorSchema: 'secondary',
-        variant: 'outline',
-        className: 'border-mineshaft-700 hover:border-mineshaft-500'
+        colorSchema: "secondary",
+        variant: "outline",
+        className: "border-mineshaft-700 hover:border-mineshaft-500"
       },
       {
-        colorSchema: 'danger',
-        variant: 'outline',
-        className: 'text-red hover:bg-red hover:text-black'
+        colorSchema: "danger",
+        variant: "outline",
+        className: "text-red hover:bg-red hover:text-black"
       },
       {
-        colorSchema: 'primary',
-        variant: 'plain',
-        className: 'text-primary'
+        colorSchema: "primary",
+        variant: "plain",
+        className: "text-primary"
       },
       {
-        colorSchema: 'gray',
-        variant: 'plain',
-        className: 'bg-transparent text-bunker-200'
+        colorSchema: "gray",
+        variant: "plain",
+        className: "bg-transparent text-bunker-200"
       },
       {
-        colorSchema: 'secondary',
-        variant: 'plain',
-        className: 'text-mineshaft-300 hover:text-mineshaft-200 border-none'
+        colorSchema: "secondary",
+        variant: "plain",
+        className: "text-mineshaft-300 hover:text-mineshaft-200 border-none"
       },
       {
-        colorSchema: 'danger',
-        variant: 'plain',
-        className: 'text-red'
+        colorSchema: "danger",
+        variant: "plain",
+        className: "text-red"
       },
       {
-        colorSchema: ['danger', 'primary', 'secondary'],
-        variant: ['plain'],
-        className: 'bg-transparent py-1 px-1'
+        colorSchema: ["danger", "primary", "secondary"],
+        variant: ["plain"],
+        className: "bg-transparent py-1 px-1"
       }
     ]
   }
@@ -141,20 +141,20 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     {
       children,
       isDisabled = false,
-      className = '',
-      size = 'sm',
-      variant = 'solid',
+      className = "",
+      size = "sm",
+      variant = "solid",
       isFullWidth,
       isRounded = true,
       leftIcon,
       rightIcon,
       isLoading,
-      colorSchema = 'primary',
+      colorSchema = "primary",
       ...props
     },
     ref
   ): JSX.Element => {
-    const loadingToggleClass = isLoading ? 'opacity-0' : 'opacity-100';
+    const loadingToggleClass = isLoading ? "opacity-0" : "opacity-100";
 
     return (
       <button
@@ -185,20 +185,20 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         )}
         <div
           className={twMerge(
-            'inline-flex shrink-0 cursor-pointer items-center justify-center transition-all',
+            "inline-flex shrink-0 cursor-pointer items-center justify-center transition-all",
             loadingToggleClass,
-            leftIcon && 'ml-2',
-            size === 'xs' ? 'mr-1' : 'mr-2'
+            leftIcon && "ml-2",
+            size === "xs" ? "mr-1" : "mr-2"
           )}
         >
           {leftIcon}
         </div>
-        <span className={twMerge('transition-all', isFullWidth ? 'w-full' : 'w-min', loadingToggleClass)}>{children}</span>
+        <span className={twMerge("transition-all", isFullWidth ? "w-full" : "w-min", loadingToggleClass)}>{children}</span>
         <div
           className={twMerge(
-            'inline-flex shrink-0 cursor-pointer items-center justify-center transition-all',
+            "inline-flex shrink-0 cursor-pointer items-center justify-center transition-all",
             loadingToggleClass,
-            size === 'xs' ? 'ml-1' : 'ml-2'
+            size === "xs" ? "ml-1" : "ml-2"
           )}
         >
           {rightIcon}
@@ -208,4 +208,4 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   }
 );
 
-Button.displayName = 'Button';
+Button.displayName = "Button";

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

@@ -1,2 +1,2 @@
-export type { ButtonProps } from './Button';
-export { Button } from './Button';
+export type { ButtonProps } from "./Button";
+export { Button } from "./Button";

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

@@ -1,14 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { Card, CardBody, CardFooter, CardProps, CardTitle } from './Card';
+import { Card, CardBody, CardFooter, CardProps, CardTitle } from "./Card";
 
 const meta: Meta<typeof Card> = {
-  title: 'Components/Card',
+  title: "Components/Card",
   component: Card,
-  tags: ['v2'],
+  tags: ["v2"],
   argTypes: {
     isRounded: {
-      type: 'boolean',
+      type: "boolean",
       defaultValue: true
     }
   }

frontend/src/components/v2/Card/Card.tsx

@@ -1,5 +1,5 @@
-import { forwardRef, ReactNode } from 'react';
-import { twMerge } from 'tailwind-merge';
+import { forwardRef, ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
 
 export type CardTitleProps = {
   children: ReactNode;
@@ -10,7 +10,7 @@ export type CardTitleProps = {
 export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
   <div
     className={twMerge(
-      'px-6 py-4 mb-5 font-sans text-lg font-normal border-b border-mineshaft-600 break-words',
+      "px-6 py-4 mb-5 font-sans text-lg font-normal border-b border-mineshaft-600 break-words",
       className
     )}
   >
@@ -25,7 +25,7 @@ export type CardFooterProps = {
 };
 
 export const CardFooter = ({ children, className }: CardFooterProps) => (
-  <div className={twMerge('p-4 pt-0', className)}>{children}</div>
+  <div className={twMerge("p-4 pt-0", className)}>{children}</div>
 );
 
 export type CardBodyProps = {
@@ -34,7 +34,7 @@ export type CardBodyProps = {
 };
 
 export const CardBody = ({ children, className }: CardBodyProps) => (
-  <div className={twMerge('px-6 pb-6 pt-0', className)}>{children}</div>
+  <div className={twMerge("px-6 pb-6 pt-0", className)}>{children}</div>
 );
 
 export type CardProps = {
@@ -52,11 +52,11 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
       <div
         ref={ref}
         className={twMerge(
-          'flex w-full flex-col bg-mineshaft-800 font-inter text-gray-200 shadow-md',
-          isFullHeight && 'h-full',
-          isRounded && 'rounded-md',
-          isPlain && 'shadow-none',
-          isHoverable && 'hover:shadow-xl',
+          "flex w-full flex-col bg-mineshaft-800 font-inter text-gray-200 shadow-md",
+          isFullHeight && "h-full",
+          isRounded && "rounded-md",
+          isPlain && "shadow-none",
+          isHoverable && "hover:shadow-xl",
           className
         )}
       >
@@ -66,4 +66,4 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
   }
 );
 
-Card.displayName = 'Card';
+Card.displayName = "Card";

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

@@ -1,2 +1,2 @@
-export type { CardBodyProps, CardFooterProps, CardProps, CardTitleProps } from './Card';
-export { Card, CardBody, CardFooter, CardTitle } from './Card';
+export type { CardBodyProps, CardFooterProps, CardProps, CardTitleProps } from "./Card";
+export { Card, CardBody, CardFooter, CardTitle } from "./Card";

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

@@ -1,11 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { Checkbox } from './Checkbox';
+import { Checkbox } from "./Checkbox";
 
 const meta: Meta<typeof Checkbox> = {
-  title: 'Components/Checkbox',
+  title: "Components/Checkbox",
   component: Checkbox,
-  tags: ['v2'],
+  tags: ["v2"],
   argTypes: {}
 };
 
@@ -15,20 +15,20 @@ type Story = StoryObj<typeof Checkbox>;
 // More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
 export const Simple: Story = {
   args: {
-    children: 'Accept the condition'
+    children: "Accept the condition"
   }
 };
 
 export const Disabled: Story = {
   args: {
-    children: 'Accept the condition',
+    children: "Accept the condition",
     isDisabled: true
   }
 };
 
 export const Required: Story = {
   args: {
-    children: 'Accept the condition',
+    children: "Accept the condition",
     isRequired: true
   }
 };

frontend/src/components/v2/Checkbox/Checkbox.tsx

@@ -1,12 +1,12 @@
-import { ReactNode } from 'react';
-import { faCheck } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { twMerge } from 'tailwind-merge';
+import { ReactNode } from "react";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { twMerge } from "tailwind-merge";
 
 export type CheckboxProps = Omit<
   CheckboxPrimitive.CheckboxProps,
-  'checked' | 'disabled' | 'required'
+  "checked" | "disabled" | "required"
 > & {
   children: ReactNode;
   id: string;
@@ -28,9 +28,9 @@ export const Checkbox = ({
     <div className="flex items-center font-inter text-bunker-300">
       <CheckboxPrimitive.Root
         className={twMerge(
-          'flex items-center justify-center w-4 h-4 mr-3 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600',
-          isDisabled && 'bg-bunker-400 hover:bg-bunker-400',
-          isChecked && 'bg-primary hover:bg-primary',
+          "flex items-center justify-center w-4 h-4 mr-3 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600",
+          isDisabled && "bg-bunker-400 hover:bg-bunker-400",
+          isChecked && "bg-primary hover:bg-primary",
           className
         )}
         required={isRequired}

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

@@ -1,2 +1,2 @@
-export type { CheckboxProps } from './Checkbox';
-export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from "./Checkbox";
+export { Checkbox } from "./Checkbox";

frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
-import { useToggle } from '@app/hooks';
+import { useToggle } from "@app/hooks";
 
-import { Button } from '../Button';
-import { FormControl } from '../FormControl';
-import { Input } from '../Input';
-import { Modal, ModalClose, ModalContent } from '../Modal';
+import { Button } from "../Button";
+import { FormControl } from "../FormControl";
+import { Input } from "../Input";
+import { Modal, ModalClose, ModalContent } from "../Modal";
 
 type Props = {
   isOpen?: boolean;
@@ -24,11 +24,11 @@ export const DeleteActionModal = ({
   onDeleteApproved,
   title
 }: Props): JSX.Element => {
-  const [inputData, setInputData] = useState('');
+  const [inputData, setInputData] = useState("");
   const [isLoading, setIsLoading] = useToggle();
 
   useEffect(() => {
-    setInputData('');
+    setInputData("");
   }, [isOpen]);
 
   const onDelete = async () => {
@@ -46,7 +46,7 @@ export const DeleteActionModal = ({
     <Modal
       isOpen={isOpen}
       onOpenChange={(isOpenState) => {
-        setInputData('');
+        setInputData("");
         if (onChange) onChange(isOpenState);
       }}
     >
@@ -68,7 +68,7 @@ export const DeleteActionModal = ({
               <Button variant="plain" colorSchema="secondary" onClick={onClose}>
                 Cancel
               </Button>
-            </ModalClose>{' '}
+            </ModalClose>{" "}
           </div>
         }
         onClose={onClose}

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

@@ -1 +1 @@
-export { DeleteActionModal } from './DeleteActionModal';
+export { DeleteActionModal } from "./DeleteActionModal";

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

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

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

@@ -1,12 +1,12 @@
-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 { 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';
+import { Card, CardBody, CardFooter, CardTitle } from "../Card";
+import { IconButton } from "../IconButton";
 
 export type DrawerContentProps = DialogPrimitive.DialogContentProps & {
   title?: ReactNode;
@@ -16,14 +16,14 @@ export type DrawerContentProps = DialogPrimitive.DialogContentProps & {
 } & VariantProps<typeof drawerContentVariation>;
 
 const drawerContentVariation = cva(
-  'fixed ease-in-out duration-300 z-[90] border border-mineshaft-600 drop-shadow-2xl',
+  "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'
+          "right-0 top-0",
+          "h-full w-96",
+          "data-[state=open]:animate-drawerRightIn data-[state=closed]:animate-drawerRightOut"
         ]
       }
     }
@@ -32,13 +32,13 @@ const drawerContentVariation = cva(
 
 export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
   (
-    { children, title, subTitle, className, footerContent, direction = 'right', onClose, ...props },
+    { 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)' }}
+        style={{ backgroundColor: "rgba(0, 0, 0, 0.7)" }}
       />
       <DialogPrimitive.Content
         {...props}
@@ -54,7 +54,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
           <CardBody className="flex-grow overflow-y-auto overflow-x-hidden px-4 dark:[color-scheme:dark]">
             {children}
           </CardBody>
-          {footerContent && <CardFooter>{footerContent}</CardFooter>}{' '}
+          {footerContent && <CardFooter>{footerContent}</CardFooter>}{" "}
           <DialogPrimitive.Close aria-label="Close" asChild onClick={onClose}>
             <IconButton
               variant="plain"
@@ -70,9 +70,9 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
   )
 );
 
-DrawerContent.displayName = 'ModalContent';
+DrawerContent.displayName = "ModalContent";
 
-export type DrawerProps = Omit<DialogPrimitive.DialogProps, 'open'> & { isOpen?: boolean };
+export type DrawerProps = Omit<DialogPrimitive.DialogProps, "open"> & { isOpen?: boolean };
 export const Drawer = ({ isOpen, ...props }: DrawerProps) => (
   <DialogPrimitive.Root open={isOpen} {...props} />
 );

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

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

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

@@ -1,8 +1,8 @@
-import { faPlus, faTrash, faUndo } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { Meta, StoryObj } from '@storybook/react';
+import { faPlus, faTrash, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { IconButton } from '../IconButton';
+import { IconButton } from "../IconButton";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -11,12 +11,12 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger
-} from './Dropdown';
+} from "./Dropdown";
 
 const meta: Meta<typeof DropdownMenu> = {
-  title: 'Components/DropdownMenu',
+  title: "Components/DropdownMenu",
   component: DropdownMenu,
-  tags: ['v2'],
+  tags: ["v2"],
   argTypes: {}
 };
 

frontend/src/components/v2/Dropdown/Dropdown.tsx

@@ -1,6 +1,6 @@
-import { ComponentPropsWithRef, ElementType, forwardRef, ReactNode, Ref } from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { twMerge } from 'tailwind-merge';
+import { ComponentPropsWithRef, ElementType, forwardRef, ReactNode, Ref } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { twMerge } from "tailwind-merge";
 
 // Main menu or parent container
 export type DropdownMenuProps = DropdownMenuPrimitive.DropdownMenuProps;
@@ -21,7 +21,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
           {...props}
           ref={forwardedRef}
           className={twMerge(
-            'min-w-[220px] bg-bunker will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade',
+            "min-w-[220px] bg-bunker will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
             className
           )}
         >
@@ -32,14 +32,14 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
   }
 );
 
-DropdownMenuContent.displayName = 'DropdownMenuContent';
+DropdownMenuContent.displayName = "DropdownMenuContent";
 
 // item label component
 export type DropdownLabelProps = DropdownMenuPrimitive.MenuLabelProps;
 export const DropdownMenuLabel = ({ className, ...props }: DropdownLabelProps) => (
   <DropdownMenuPrimitive.Label
     {...props}
-    className={twMerge('text-xs text-bunker-400 px-4 pt-2 pb-1', className)}
+    className={twMerge("text-xs text-bunker-400 px-4 pt-2 pb-1", className)}
   />
 );
 
@@ -51,18 +51,18 @@ export type DropdownMenuItemProps<T extends ElementType> =
     inputRef?: Ref<T>;
   };
 
-export const DropdownMenuItem = <T extends ElementType = 'button'>({
+export const DropdownMenuItem = <T extends ElementType = "button">({
   children,
   inputRef,
   className,
   icon,
-  as: Item = 'button',
+  as: Item = "button",
   ...props
 }: DropdownMenuItemProps<T> & ComponentPropsWithRef<T>) => (
   <DropdownMenuPrimitive.Item
     {...props}
     className={twMerge(
-      'text-sm block font-inter px-4 py-2 data-[highlighted]:bg-gray-700 outline-none cursor-pointer',
+      "text-sm block font-inter px-4 py-2 data-[highlighted]:bg-gray-700 outline-none cursor-pointer",
       className
     )}
   >
@@ -80,7 +80,7 @@ export const DropdownMenuGroup = forwardRef<HTMLDivElement, DropdownMenuGroupPro
   ({ ...props }, ref) => <DropdownMenuPrimitive.Group {...props} ref={ref} />
 );
 
-DropdownMenuGroup.displayName = 'DropdownMenuGroup';
+DropdownMenuGroup.displayName = "DropdownMenuGroup";
 
 // Divider
 export const DropdownMenuSeparator = forwardRef<
@@ -90,8 +90,8 @@ export const DropdownMenuSeparator = forwardRef<
   <DropdownMenuPrimitive.Separator
     ref={ref}
     {...props}
-    className={twMerge('h-[1px] bg-gray-700 m-1', className)}
+    className={twMerge("h-[1px] bg-gray-700 m-1", className)}
   />
 ));
 
-DropdownMenuSeparator.displayName = 'DropdownMenuSeperator';
+DropdownMenuSeparator.displayName = "DropdownMenuSeperator";

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

@@ -5,7 +5,7 @@ export type {
   DropdownMenuItemProps,
   DropdownMenuProps,
   DropdownMenuTriggerProps
-} from './Dropdown';
+} from "./Dropdown";
 export {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,4 +14,4 @@ export {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger
-} from './Dropdown';
+} from "./Dropdown";

frontend/src/components/v2/EmailServiceSetupModal/EmailServiceSetupModal.tsx

@@ -1,5 +1,5 @@
-import { Button } from '../Button';
-import { Modal, ModalContent } from '../Modal';
+import { Button } from "../Button";
+import { Modal, ModalContent } from "../Modal";
 
 type Props = {
   isOpen?: boolean;

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

@@ -1 +1 @@
-export { EmailServiceSetupModal } from './EmailServiceSetupModal';
+export { EmailServiceSetupModal } from "./EmailServiceSetupModal";

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

@@ -1,14 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { EmptyState } from './EmptyState';
+import { EmptyState } from "./EmptyState";
 
 const meta: Meta<typeof EmptyState> = {
-  title: 'Components/EmptyState',
+  title: "Components/EmptyState",
   component: EmptyState,
-  tags: ['v2'],
+  tags: ["v2"],
   argTypes: {},
   args: {
-    title: 'No members found'
+    title: "No members found"
   }
 };
 

frontend/src/components/v2/EmptyState/EmptyState.tsx

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
-import { SizeProp } from '@fortawesome/fontawesome-svg-core';
-import { faCubesStacked, IconDefinition } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { twMerge } from 'tailwind-merge';
+import { ReactNode } from "react";
+import { SizeProp } from "@fortawesome/fontawesome-svg-core";
+import { faCubesStacked, IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 type Props = {
   title: ReactNode;
@@ -17,11 +17,11 @@ export const EmptyState = ({
   className,
   children,
   icon = faCubesStacked,
-  iconSize = '2x'
+  iconSize = "2x"
 }: Props) => (
   <div
     className={twMerge(
-      'flex w-full flex-col items-center bg-mineshaft-800 px-2 pt-6 text-bunker-300',
+      "flex w-full flex-col items-center bg-mineshaft-800 px-2 pt-6 text-bunker-300",
       className
     )}
   >

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

@@ -1 +1 @@
-export { EmptyState } from './EmptyState';
+export { EmptyState } from "./EmptyState";

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

@@ -1,13 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from "@storybook/react";
 
 // Be careful on dep cycle
-import { Input } from '../Input/Input';
-import { FormControl } from './FormControl';
+import { Input } from "../Input/Input";
+import { FormControl } from "./FormControl";
 
 const meta: Meta<typeof FormControl> = {
-  title: 'Components/FormControl',
+  title: "Components/FormControl",
   component: FormControl,
-  tags: ['v2'],
+  tags: ["v2"],
   argTypes: {}
 };
 
@@ -18,9 +18,9 @@ type Story = StoryObj<typeof FormControl>;
 export const Basic: Story = {
   args: {
     children: <Input />,
-    label: 'Email',
-    id: 'email',
-    helperText: 'Type something..'
+    label: "Email",
+    id: "email",
+    helperText: "Type something.."
   }
 };
 
@@ -34,7 +34,7 @@ export const RequiredInput: Story = {
 export const ErrorInput: Story = {
   args: {
     ...Basic.args,
-    errorText: 'Some random error',
+    errorText: "Some random error",
     isError: true
   }
 };

frontend/src/components/v2/FormControl/FormControl.tsx

@@ -1,8 +1,8 @@
-import { cloneElement, ReactNode } from 'react';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import * as Label from '@radix-ui/react-label';
-import { twMerge } from 'tailwind-merge';
+import { cloneElement, ReactNode } from "react";
+import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Label from "@radix-ui/react-label";
+import { twMerge } from "tailwind-merge";
 
 export type FormLabelProps = {
   id?: string;
@@ -25,8 +25,8 @@ export type FormHelperTextProps = {
 export const FormHelperText = ({ isError, text }: FormHelperTextProps) => (
   <div
     className={twMerge(
-      'mt-2 flex items-center font-inter text-xs text-mineshaft-300 opacity-90',
-      isError && 'text-red-600'
+      "mt-2 flex items-center font-inter text-xs text-mineshaft-300 opacity-90",
+      isError && "text-red-600"
     )}
   >
     {isError && (
@@ -60,13 +60,13 @@ export const FormControl = ({
   className
 }: FormControlProps): JSX.Element => {
   return (
-    <div className={twMerge('mb-4', className)}>
-      {typeof label === 'string' ? (
+    <div className={twMerge("mb-4", className)}>
+      {typeof label === "string" ? (
         <FormLabel label={label} isRequired={isRequired} id={id} />
       ) : (
         label
       )}
-      {cloneElement(children, { isRequired, 'data-required': isRequired, isError })}
+      {cloneElement(children, { isRequired, "data-required": isRequired, isError })}
       {!isError && helperText && <FormHelperText isError={isError} text={helperText} />}
       {isError && errorText && <FormHelperText isError={isError} text={errorText} />}
     </div>

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

@@ -1,2 +1,2 @@
-export type { FormControlProps, FormHelperTextProps, FormLabelProps } from './FormControl';
-export { FormControl, FormHelperText, FormLabel } from './FormControl';
+export type { FormControlProps, FormHelperTextProps, FormLabelProps } from "./FormControl";
+export { FormControl, FormHelperText, FormLabel } from "./FormControl";

frontend/src/components/v2/HoverCard/HoverCard.tsx

@@ -1,6 +1,6 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import * as HoverCard from '@radix-ui/react-hover-card';
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as HoverCard from "@radix-ui/react-hover-card";
 
 type Props = {
   text: string;
@@ -26,7 +26,7 @@ export const HoverObject = ({
     <HoverCard.Portal>
       <HoverCard.Content className="HoverCardContent z-[300]" sideOffset={5}>
         <div className='bg-bunker-700 border border-mineshaft-600 p-2 rounded-md drop-shadow-xl text-bunker-300'>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 15 }}>
+          <div style={{ display: "flex", flexDirection: "column", gap: 15 }}>
             <div>
               <div className="Text bold">{text}</div>
             </div>
@@ -39,4 +39,4 @@ export const HoverObject = ({
   </HoverCard.Root>
 );
 
-HoverObject.displayName = 'HoverCard';
+HoverObject.displayName = "HoverCard";

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

@@ -1,2 +1,2 @@
-export type { HoverCardProps } from './HoverCard';
-export { HoverObject } from './HoverCard';
+export type { HoverCardProps } from "./HoverCard";
+export { HoverObject } from "./HoverCard";

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

@@ -1,17 +1,17 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { Button } from '../Button';
+import { Button } from "../Button";
 import {
   HoverCard,
   HoverCardContent,
   HoverCardContentProps,
   HoverCardTrigger
-} from './HoverCardv2';
+} from "./HoverCardv2";
 
 const meta: Meta<typeof HoverCardContent> = {
-  title: 'Components/HoverCard',
+  title: "Components/HoverCard",
   component: HoverCard,
-  tags: ['v2']
+  tags: ["v2"]
 };
 
 export default meta;

frontend/src/components/v2/HoverCardv2/HoverCardv2.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
-import { twMerge } from 'tailwind-merge';
+import { ReactNode } from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { twMerge } from "tailwind-merge";
 
 export const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
@@ -15,7 +15,7 @@ export const HoverCardContent = ({ children, className, ...props }: HoverCardCon
     <HoverCardPrimitive.Content
       {...props}
       className={twMerge(
-        'relative w-64 rounded-md bg-mineshaft-600 fill-mineshaft-600 p-4 pt-6 font-inter text-gray-200 shadow-md',
+        "relative w-64 rounded-md bg-mineshaft-600 fill-mineshaft-600 p-4 pt-6 font-inter text-gray-200 shadow-md",
         className
       )}
     >

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

@@ -1 +1 @@
-export { HoverCard,HoverCardContent, HoverCardTrigger } from './HoverCardv2';
+export { HoverCard,HoverCardContent, HoverCardTrigger } from "./HoverCardv2";

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

@@ -1,20 +1,20 @@
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { Meta, StoryObj } from '@storybook/react';
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { IconButton } from './IconButton';
+import { IconButton } from "./IconButton";
 
 const meta: Meta<typeof IconButton> = {
-  title: 'Components/IconButton',
+  title: "Components/IconButton",
   component: IconButton,
-  tags: ['v2'],
+  tags: ["v2"],
   argTypes: {
     isRounded: {
       defaultValue: true,
-      type: 'boolean'
+      type: "boolean"
     },
     ariaLabel: {
-      defaultValue: 'Some buttons...'
+      defaultValue: "Some buttons..."
     }
   }
 };
@@ -32,23 +32,23 @@ export const Primary: Story = {
 export const Secondary: Story = {
   args: {
     children: <FontAwesomeIcon icon={faPlus} />,
-    colorSchema: 'secondary',
-    variant: 'outline'
+    colorSchema: "secondary",
+    variant: "outline"
   }
 };
 
 export const Danger: Story = {
   args: {
     children: <FontAwesomeIcon icon={faPlus} />,
-    colorSchema: 'danger',
-    variant: 'solid'
+    colorSchema: "danger",
+    variant: "solid"
   }
 };
 
 export const Plain: Story = {
   args: {
     children: <FontAwesomeIcon icon={faPlus} />,
-    variant: 'plain'
+    variant: "plain"
   }
 };
 

frontend/src/components/v2/IconButton/IconButton.tsx

@@ -1,6 +1,6 @@
-import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react';
-import { cva, VariantProps } from 'cva';
-import { twMerge } from 'tailwind-merge';
+import { ButtonHTMLAttributes, forwardRef, ReactNode } from "react";
+import { cva, VariantProps } from "cva";
+import { twMerge } from "tailwind-merge";
 
 type Props = {
   children: ReactNode;
@@ -12,98 +12,98 @@ type Props = {
 
 const iconButtonVariants = cva(
   [
-    'button',
-    'transition-all',
-    'font-inter font-medium user-select-none',
-    'cursor-pointer',
-    'inline-flex items-center justify-center',
-    'relative'
+    "button",
+    "transition-all",
+    "font-inter font-medium user-select-none",
+    "cursor-pointer",
+    "inline-flex items-center justify-center",
+    "relative"
   ],
   {
     variants: {
       colorSchema: {
-        primary: ['bg-primary', 'text-black', 'border-primary hover:opacity-80'],
-        secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-bunker-400'],
-        danger: ['bg-[#973939]', 'text-white', 'border-red']
+        primary: ["bg-primary", "text-black", "border-primary hover:opacity-80"],
+        secondary: ["bg-mineshaft", "text-gray-300", "border-mineshaft hover:bg-bunker-400"],
+        danger: ["bg-[#973939]", "text-white", "border-red"]
       },
       variant: {
-        solid: '',
-        outline: ['bg-transparent', 'border-2', 'border-solid'],
-        plain: '',
-        star: 'text-bunker-200 bg-mineshaft-500',
-        outline_bg: ''
+        solid: "",
+        outline: ["bg-transparent", "border-2", "border-solid"],
+        plain: "",
+        star: "text-bunker-200 bg-mineshaft-500",
+        outline_bg: ""
       },
       isDisabled: {
-        true: 'bg-opacity-70 cursor-not-allowed',
-        false: ''
+        true: "bg-opacity-70 cursor-not-allowed",
+        false: ""
       },
       isRounded: {
-        true: 'rounded-md',
-        false: ''
+        true: "rounded-md",
+        false: ""
       },
       size: {
-        xs: ['text-xs', 'rounded-sm', 'py-1.5', 'px-2'],
-        sm: ['text-sm', 'py-3', 'px-3'],
-        md: ['text-md', 'py-4', 'px-4'],
-        lg: ['text-lg', 'py-6', 'px-6']
+        xs: ["text-xs", "rounded-sm", "py-1.5", "px-2"],
+        sm: ["text-sm", "py-3", "px-3"],
+        md: ["text-md", "py-4", "px-4"],
+        lg: ["text-lg", "py-6", "px-6"]
       }
     },
     compoundVariants: [
       {
-        colorSchema: 'primary',
-        variant: 'star',
-        className: 'hover:bg-primary hover:text-black'
+        colorSchema: "primary",
+        variant: "star",
+        className: "hover:bg-primary hover:text-black"
       },
       {
-        colorSchema: 'primary',
-        variant: 'outline_bg',
-        className: 'bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60 text-bunker-200 hover:text-bunker-100 duration-100'
+        colorSchema: "primary",
+        variant: "outline_bg",
+        className: "bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60 text-bunker-200 hover:text-bunker-100 duration-100"
       },
       {
-        colorSchema: 'danger',
-        variant: 'star',
-        className: 'hover:bg-red hover:text-white'
+        colorSchema: "danger",
+        variant: "star",
+        className: "hover:bg-red hover:text-white"
       },
       {
-        colorSchema: 'primary',
-        variant: 'outline',
-        className: 'text-primary hover:bg-primary hover:text-black'
+        colorSchema: "primary",
+        variant: "outline",
+        className: "text-primary hover:bg-primary hover:text-black"
       },
       {
-        colorSchema: 'secondary',
-        variant: 'outline',
-        className: 'hover:bg-mineshaft'
+        colorSchema: "secondary",
+        variant: "outline",
+        className: "hover:bg-mineshaft"
       },
       {
-        colorSchema: 'danger',
-        variant: 'outline',
-        className: 'text-red hover:bg-red hover:text-black'
+        colorSchema: "danger",
+        variant: "outline",
+        className: "text-red hover:bg-red hover:text-black"
       },
       {
-        colorSchema: 'primary',
-        variant: 'plain',
-        className: 'hover:text-primary'
+        colorSchema: "primary",
+        variant: "plain",
+        className: "hover:text-primary"
       },
       {
-        colorSchema: 'secondary',
-        variant: 'plain',
-        className: 'text-mineshaft'
+        colorSchema: "secondary",
+        variant: "plain",
+        className: "text-mineshaft"
       },
       {
-        colorSchema: 'danger',
-        variant: 'plain',
-        className: 'hover:text-red'
+        colorSchema: "danger",
+        variant: "plain",
+        className: "hover:text-red"
       },
       {
-        colorSchema: ['danger', 'primary', 'secondary'],
-        variant: ['plain'],
-        className: 'bg-transparent py-1 px-1 text-bunker-300'
+        colorSchema: ["danger", "primary", "secondary"],
+        variant: ["plain"],
+        className: "bg-transparent py-1 px-1 text-bunker-300"
       }
     ]
   }
 );
 
-export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'> &
+export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> &
   VariantProps<typeof iconButtonVariants> &
   Props;
 
@@ -114,10 +114,10 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       ariaLabel,
       isDisabled = false,
       className,
-      size = 'sm',
-      variant = 'solid',
+      size = "sm",
+      variant = "solid",
       isRounded = true,
-      colorSchema = 'primary',
+      colorSchema = "primary",
       ...props
     },
     ref
@@ -145,4 +145,4 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   )
 );
 
-IconButton.displayName = 'IconButton';
+IconButton.displayName = "IconButton";

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

@@ -1,2 +1,2 @@
-export type { IconButtonProps } from './IconButton';
-export { IconButton } from './IconButton';
+export type { IconButtonProps } from "./IconButton";
+export { IconButton } from "./IconButton";

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

@@ -1,21 +1,21 @@
-import { faEye, faMailBulk } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { Meta, StoryObj } from '@storybook/react';
+import { faEye, faMailBulk } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { Input } from './Input';
+import { Input } from "./Input";
 
 const meta: Meta<typeof Input> = {
-  title: 'Components/Input',
+  title: "Components/Input",
   component: Input,
-  tags: ['v2'],
+  tags: ["v2"],
   argTypes: {
     isRounded: {
       defaultValue: true,
-      type: 'boolean'
+      type: "boolean"
     },
     placeholder: {
-      defaultValue: 'Type anything',
-      type: 'string'
+      defaultValue: "Type anything",
+      type: "string"
     }
   }
 };
@@ -30,13 +30,13 @@ export const Filled: Story = {
 
 export const Outline: Story = {
   args: {
-    variant: 'outline'
+    variant: "outline"
   }
 };
 
 export const Plain: Story = {
   args: {
-    variant: 'plain'
+    variant: "plain"
   }
 };
 
@@ -49,7 +49,7 @@ export const Error: Story = {
 export const AutoWidth: Story = {
   args: {
     isFullWidth: false,
-    className: 'w-auto'
+    className: "w-auto"
   }
 };
 

frontend/src/components/v2/Input/Input.tsx

@@ -1,6 +1,6 @@
-import { forwardRef, InputHTMLAttributes, ReactNode } from 'react';
-import { cva, VariantProps } from 'cva';
-import { twMerge } from 'tailwind-merge';
+import { forwardRef, InputHTMLAttributes, ReactNode } from "react";
+import { cva, VariantProps } from "cva";
+import { twMerge } from "tailwind-merge";
 
 type Props = {
   placeholder?: string;
@@ -13,56 +13,56 @@ type Props = {
 };
 
 const inputVariants = cva(
-  'input w-full py-[0.375rem] text-gray-400 placeholder:text-sm placeholder-gray-500 placeholder-opacity-50 outline-none focus:ring-2 hover:ring-[0.05rem] hover:ring-bunker-400/60 duration-100',
+  "input w-full py-[0.375rem] text-gray-400 placeholder:text-sm placeholder-gray-500 placeholder-opacity-50 outline-none focus:ring-2 hover:ring-[0.05rem] hover:ring-bunker-400/60 duration-100",
   {
     variants: {
       size: {
-        xs: ['text-xs'],
-        sm: ['text-sm'],
-        md: ['text-md'],
-        lg: ['text-lg']
+        xs: ["text-xs"],
+        sm: ["text-sm"],
+        md: ["text-md"],
+        lg: ["text-lg"]
       },
       isRounded: {
-        true: ['rounded-md'],
-        false: ''
+        true: ["rounded-md"],
+        false: ""
       },
       variant: {
-        filled: ['bg-mineshaft-900', 'text-gray-400'],
-        outline: ['bg-transparent'],
-        plain: 'bg-transparent outline-none'
+        filled: ["bg-mineshaft-900", "text-gray-400"],
+        outline: ["bg-transparent"],
+        plain: "bg-transparent outline-none"
       },
       isError: {
-        true: 'focus:ring-red/50 placeholder-red-300',
-        false: 'focus:ring-primary-400/50 focus:ring-1'
+        true: "focus:ring-red/50 placeholder-red-300",
+        false: "focus:ring-primary-400/50 focus:ring-1"
       }
     },
     compoundVariants: []
   }
 );
 
-const inputParentContainerVariants = cva('inline-flex font-inter items-center border relative', {
+const inputParentContainerVariants = cva("inline-flex font-inter items-center border relative", {
   variants: {
     isRounded: {
-      true: ['rounded-md'],
-      false: ''
+      true: ["rounded-md"],
+      false: ""
     },
     isError: {
-      true: 'border-red',
-      false: 'border-mineshaft-500'
+      true: "border-red",
+      false: "border-mineshaft-500"
     },
     isFullWidth: {
-      true: 'w-full',
-      false: ''
+      true: "w-full",
+      false: ""
     },
     variant: {
-      filled: ['bg-bunker-800', 'text-gray-400'],
-      outline: ['bg-transparent'],
-      plain: 'border-none'
+      filled: ["bg-bunker-800", "text-gray-400"],
+      outline: ["bg-transparent"],
+      plain: "border-none"
     }
   }
 });
 
-export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> &
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> &
   VariantProps<typeof inputVariants> &
   Props;
 
@@ -77,8 +77,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       isRequired,
       leftIcon,
       rightIcon,
-      variant = 'filled',
-      size = 'md',
+      variant = "filled",
+      size = "md",
       isReadOnly,
       ...props
     },
@@ -94,8 +94,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           readOnly={isReadOnly}
           disabled={isDisabled}
           className={twMerge(
-            leftIcon ? 'pl-10' : 'pl-2.5',
-            rightIcon ? 'pr-10' : 'pr-2.5',
+            leftIcon ? "pl-10" : "pl-2.5",
+            rightIcon ? "pr-10" : "pr-2.5",
             inputVariants({ className, isError, size, isRounded, variant })
           )}
         />
@@ -105,4 +105,4 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
   }
 );
 
-Input.displayName = 'Input';
+Input.displayName = "Input";

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

@@ -1,2 +1,2 @@
-export type { InputProps } from './Input';
-export { Input } from './Input';
+export type { InputProps } from "./Input";
+export { Input } from "./Input";

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

@@ -1,12 +1,12 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from "@storybook/react";
 
-import { Menu, MenuGroup, MenuItem } from './Menu';
+import { Menu, MenuGroup, MenuItem } from "./Menu";
 
 const meta: Meta<typeof Menu> = {
-  title: 'Components/Menu',
+  title: "Components/Menu",
   component: Menu,
-  tags: ['v2'],
+  tags: ["v2"],
   argTypes: {}
 };
 

frontend/src/components/v2/Menu/Menu.tsx

@@ -1,10 +1,10 @@
 // @ts-nocheck
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable global-require */
-import { ComponentPropsWithRef, ElementType, ReactNode, Ref, useRef } from 'react';
-import { motion } from 'framer-motion'
-import Lottie from 'lottie-react'
-import { twMerge } from 'tailwind-merge';
+import { ComponentPropsWithRef, ElementType, ReactNode, Ref, useRef } from "react";
+import { motion } from "framer-motion"
+import Lottie from "lottie-react"
+import { twMerge } from "tailwind-merge";
 
 export type MenuProps = {
   children: ReactNode;
@@ -12,7 +12,7 @@ export type MenuProps = {
 };
 
 export const Menu = ({ children, className }: MenuProps): JSX.Element => {
-  return <ul className={twMerge('p-2', className)}>{children}</ul>;
+  return <ul className={twMerge("p-2", className)}>{children}</ul>;
 };
 
 export type MenuItemProps<T extends ElementType> = {
@@ -27,13 +27,13 @@ export type MenuItemProps<T extends ElementType> = {
   inputRef?: Ref<T>;
 };
 
-export const MenuItem = <T extends ElementType = 'button'>({
+export const MenuItem = <T extends ElementType = "button">({
   children,
   icon,
   className,
   isDisabled,
   isSelected,
-  as: Item = 'button',
+  as: Item = "button",
   description,
   // wrapping in forward ref with generic component causes the loss of ts definitions on props
   inputRef,
@@ -48,9 +48,9 @@ export const MenuItem = <T extends ElementType = 'button'>({
     >
       <li
         className={twMerge(
-          'group px-1 py-2.5 mt-0.5 font-inter flex flex-col text-sm text-bunker-100 transition-all rounded cursor-pointer hover:bg-mineshaft-700 duration-50',
-          isSelected && 'bg-mineshaft-600 hover:bg-mineshaft-600',
-          isDisabled && 'hover:bg-transparent cursor-not-allowed',
+          "group px-1 py-2.5 mt-0.5 font-inter flex flex-col text-sm text-bunker-100 transition-all rounded cursor-pointer hover:bg-mineshaft-700 duration-50",
+          isSelected && "bg-mineshaft-600 hover:bg-mineshaft-600",
+          isDisabled && "hover:bg-transparent cursor-not-allowed",
           className
         )}
       >
@@ -76,7 +76,7 @@ export const MenuItem = <T extends ElementType = 'button'>({
   )
 };
 
-MenuItem.displayName = 'MenuItem';
+MenuItem.displayName = "MenuItem";
 
 export type MenuGroupProps = {
   children: ReactNode;

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

@@ -1,2 +1,2 @@
-export type { MenuGroupProps, MenuItemProps, MenuProps } from './Menu';
-export { Menu, MenuGroup, MenuItem } from './Menu';
+export type { MenuGroupProps, MenuItemProps, MenuProps } from "./Menu";
+export { Menu, MenuGroup, MenuItem } from "./Menu";

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

@@ -1,13 +1,13 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from "@storybook/react";
 
-import { Button } from '../Button';
-import { Modal, ModalContent, ModalContentProps, ModalTrigger } from './Modal';
+import { Button } from "../Button";
+import { Modal, ModalContent, ModalContentProps, ModalTrigger } from "./Modal";
 
 const meta: Meta<typeof Modal> = {
-  title: 'Components/Modal',
+  title: "Components/Modal",
   component: Modal,
-  tags: ['v2'],
+  tags: ["v2"],
   argTypes: {}
 };
 
@@ -26,8 +26,8 @@ const Template = (args: ModalContentProps) => (
 export const Basic: Story = {
   render: (args) => <Template {...args} />,
   args: {
-    title: 'Title',
-    subTitle: 'Something as subtitle',
-    footerContent: 'footer content'
+    title: "Title",
+    subTitle: "Something as subtitle",
+    footerContent: "footer content"
   }
 };

frontend/src/components/v2/Modal/Modal.tsx

@@ -1,11 +1,11 @@
-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 { twMerge } from 'tailwind-merge';
+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 { twMerge } from "tailwind-merge";
 
-import { Card, CardBody, CardFooter, CardTitle } from '../Card';
-import { IconButton } from '../IconButton';
+import { Card, CardBody, CardFooter, CardTitle } from "../Card";
+import { IconButton } from "../IconButton";
 
 export type ModalContentProps = DialogPrimitive.DialogContentProps & {
   title?: ReactNode;
@@ -22,14 +22,14 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
   ) => (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
-        className={twMerge('fixed inset-0 z-[70] h-full w-full animate-fadeIn', overlayClassName)}
-        style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)' }}
+        className={twMerge("fixed inset-0 z-[70] h-full w-full animate-fadeIn", overlayClassName)}
+        style={{ backgroundColor: "rgba(0, 0, 0, 0.7)" }}
       />
       <DialogPrimitive.Content {...props} ref={forwardedRef}>
         <Card
           isRounded
           className={twMerge(
-            'fixed top-1/2 left-1/2 z-[90] max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl',
+            "fixed top-1/2 left-1/2 z-[90] max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl",
             className
           )}
         >
@@ -51,9 +51,9 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
   )
 );
 
-ModalContent.displayName = 'ModalContent';
+ModalContent.displayName = "ModalContent";
 
-export type ModalProps = Omit<DialogPrimitive.DialogProps, 'open'> & { isOpen?: boolean };
+export type ModalProps = Omit<DialogPrimitive.DialogProps, "open"> & { isOpen?: boolean };
 export const Modal = ({ isOpen, ...props }: ModalProps) => (
   <DialogPrimitive.Root open={isOpen} {...props} />
 );

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

@@ -1,2 +1,2 @@
-export type { ModalCloseProps, ModalContentProps, ModalProps, ModalTriggerProps } from './Modal';
-export { Modal, ModalClose, ModalContent, ModalTrigger } from './Modal';
+export type { ModalCloseProps, ModalContentProps, ModalProps, ModalTriggerProps } from "./Modal";
+export { Modal, ModalClose, ModalContent, ModalTrigger } from "./Modal";

frontend/src/components/v2/Popover/Popover.tsx

@@ -1,6 +1,6 @@
-import { faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import * as Popover from '@radix-ui/react-popover';
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Popover from "@radix-ui/react-popover";
 
 type Props = {
   children: any; 
@@ -46,4 +46,4 @@ export const PopoverObject = ({children, text, onChangeHandler, id}: Props) => (
   </Popover.Root>
 );
 
-PopoverObject.displayName = 'Popover';
+PopoverObject.displayName = "Popover";

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

@@ -1,2 +1,2 @@
-export type { PopoverProps } from './Popover';
-export { PopoverObject } from './Popover';
+export type { PopoverProps } from "./Popover";
+export { PopoverObject } from "./Popover";

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

@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { Button } from '../Button';
-import { Popover, PopoverContent, PopoverContentProps, PopoverTrigger } from './Popoverv2';
+import { Button } from "../Button";
+import { Popover, PopoverContent, PopoverContentProps, PopoverTrigger } from "./Popoverv2";
 
 const meta: Meta<typeof PopoverContent> = {
-  title: 'Components/Popover',
+  title: "Components/Popover",
   component: Popover,
-  tags: ['v2']
+  tags: ["v2"]
 };
 
 export default meta;

frontend/src/components/v2/Popoverv2/Popoverv2.tsx

@@ -1,10 +1,10 @@
-import { ReactNode } from 'react';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { twMerge } from 'tailwind-merge';
+import { ReactNode } from "react";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { twMerge } from "tailwind-merge";
 
-import { IconButton } from '../IconButton';
+import { IconButton } from "../IconButton";
 
 export const PopoverTrigger = PopoverPrimitive.Trigger;
 
@@ -25,12 +25,12 @@ export const PopoverContent = ({
     <PopoverPrimitive.Content
       className={twMerge(
         [
-          'relative z-[100] w-64 rounded-md bg-mineshaft-600 fill-mineshaft-600 p-4 pt-6 font-inter text-gray-200 shadow-md',
+          "relative z-[100] w-64 rounded-md bg-mineshaft-600 fill-mineshaft-600 p-4 pt-6 font-inter text-gray-200 shadow-md",
           // animation
-          'data-[state=open]:data-[side=bottom]:animate-slideUpAndFade',
-          'data-[state=open]:data-[side=top]:animate-slideDownAndFade',
-          'data-[state=open]:data-[side=left]:animate-slideRightAndFade',
-          'data-[state=open]:data-[side=right]:animate-slideLeftAndFade'
+          "data-[state=open]:data-[side=bottom]:animate-slideUpAndFade",
+          "data-[state=open]:data-[side=top]:animate-slideDownAndFade",
+          "data-[state=open]:data-[side=left]:animate-slideRightAndFade",
+          "data-[state=open]:data-[side=right]:animate-slideLeftAndFade"
         ],
         className
       )}

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

@@ -1 +1 @@
-export { Popover,PopoverContent, PopoverTrigger } from './Popoverv2';
+export { Popover,PopoverContent, PopoverTrigger } from "./Popoverv2";

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

@@ -1,17 +1,17 @@
-import { useEffect, useState } from 'react';
-import { SelectProps } from '@radix-ui/react-select';
+import { useEffect, useState } from "react";
+import { SelectProps } from "@radix-ui/react-select";
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from "@storybook/react";
 
-import { Select, SelectItem } from './Select';
+import { Select, SelectItem } from "./Select";
 
 const meta: Meta<typeof Select> = {
-  title: 'Components/Select',
+  title: "Components/Select",
   component: Select,
-  tags: ['v2'],
+  tags: ["v2"],
   argTypes: {
     placeholder: {
-      defaultValue: 'Type something...'
+      defaultValue: "Type something..."
     }
   }
 };
@@ -33,7 +33,7 @@ export const Basic: Story = {
 
 const Controlled = (args: SelectProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [selected, setSelected] = useState('');
+  const [selected, setSelected] = useState("");
 
   return (
     <div className="">

frontend/src/components/v2/Select/Select.tsx

@@ -1,11 +1,11 @@
-import { forwardRef, ReactNode } from 'react';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faCaretDown, faCaretUp,faCheck } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { twMerge } from 'tailwind-merge';
+import { forwardRef, ReactNode } from "react";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { faCaretDown, faCaretUp,faCheck } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { twMerge } from "tailwind-merge";
 
-import { Spinner } from '../Spinner';
+import { Spinner } from "../Spinner";
 
 type Props = {
   children: ReactNode;
@@ -13,12 +13,12 @@ type Props = {
   className?: string;
   dropdownContainerClassName?: string;
   isLoading?: boolean;
-  position?: 'item-aligned' | 'popper';
+  position?: "item-aligned" | "popper";
   isDisabled?: boolean;
   icon?: IconProp;
 };
 
-export type SelectProps = Omit<SelectPrimitive.SelectProps, 'disabled'> & Props;
+export type SelectProps = Omit<SelectPrimitive.SelectProps, "disabled"> & Props;
 
 export const Select = forwardRef<HTMLButtonElement, SelectProps>(
   (
@@ -56,11 +56,11 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
         <SelectPrimitive.Portal>
           <SelectPrimitive.Content
             className={twMerge(
-              'relative top-1 z-[100] overflow-hidden rounded-md bg-mineshaft-900 border border-mineshaft-600 font-inter text-bunker-100 shadow-md',
+              "relative top-1 z-[100] overflow-hidden rounded-md bg-mineshaft-900 border border-mineshaft-600 font-inter text-bunker-100 shadow-md",
               dropdownContainerClassName
             )}
             position={position}
-            style={{ width: 'var(--radix-select-trigger-width)' }}
+            style={{ width: "var(--radix-select-trigger-width)" }}
           >
             <SelectPrimitive.ScrollUpButton>
               <div className="flex items-center justify-center">
@@ -89,9 +89,9 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
   }
 );
 
-Select.displayName = 'Select';
+Select.displayName = "Select";
 
-export type SelectItemProps = Omit<SelectPrimitive.SelectItemProps, 'disabled'> & {
+export type SelectItemProps = Omit<SelectPrimitive.SelectItemProps, "disabled"> & {
   isDisabled?: boolean;
   isSelected?: boolean;
   customIcon?: IconProp;
@@ -106,9 +106,9 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
           `relative mb-0.5 flex
           cursor-pointer select-none items-center rounded-md py-2 pl-10 pr-4 text-sm
           outline-none transition-all hover:bg-mineshaft-500`,
-          isSelected && 'bg-primary',
+          isSelected && "bg-primary",
           isDisabled &&
-            'cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600',
+            "cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600",
           className
         )}
         ref={forwardedRef}
@@ -122,4 +122,4 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
   }
 );
 
-SelectItem.displayName = 'SelectItem';
+SelectItem.displayName = "SelectItem";

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

@@ -1,2 +1,2 @@
-export type { SelectItemProps, SelectProps } from './Select';
-export { Select, SelectItem } from './Select';
+export type { SelectItemProps, SelectProps } from "./Select";
+export { Select, SelectItem } from "./Select";

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

@@ -1,11 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { Skeleton } from './Skeleton';
+import { Skeleton } from "./Skeleton";
 
 const meta: Meta<typeof Skeleton> = {
-  title: 'Components/Skeleton',
+  title: "Components/Skeleton",
   component: Skeleton,
-  tags: ['v2'],
+  tags: ["v2"],
   argTypes: {}
 };
 

frontend/src/components/v2/Skeleton/Skeleton.tsx

@@ -1,4 +1,4 @@
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from "tailwind-merge";
 
 export type Props = {
   className?: string;
@@ -8,5 +8,5 @@ export type Props = {
 // Can be used with cards
 // Tables etc
 export const Skeleton = ({ className }: Props) => (
-  <div className={twMerge('h-6 w-full animate-pulse rounded-md bg-mineshaft-800', className)} />
+  <div className={twMerge("h-6 w-full animate-pulse rounded-md bg-mineshaft-800", className)} />
 );

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

@@ -1 +1 @@
-export { Skeleton } from './Skeleton';
+export { Skeleton } from "./Skeleton";

frontend/src/components/v2/Spinner/Spinner.tsx

@@ -1,6 +1,6 @@
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from "tailwind-merge";
 
-type SizeOptions = 'xs' | 'sm' | 'md' | 'lg';
+type SizeOptions = "xs" | "sm" | "md" | "lg";
 
 type Props = {
   className?: string;
@@ -8,19 +8,19 @@ type Props = {
 };
 
 const sizeChart: Record<SizeOptions, string> = {
-  xs: 'w-4 h-4',
-  sm: 'w-6 h-6',
-  md: 'w-8 h-8',
-  lg: 'w-12 h-12'
+  xs: "w-4 h-4",
+  sm: "w-6 h-6",
+  md: "w-8 h-8",
+  lg: "w-12 h-12"
 };
 
-export const Spinner = ({ className, size = 'md' }: Props): JSX.Element => {
+export const Spinner = ({ className, size = "md" }: Props): JSX.Element => {
   return (
     <div role="status">
       <svg
         aria-hidden="true"
         className={twMerge(
-          ' text-gray-200 animate-spin dark:text-gray-600 fill-primary m-1',
+          " text-gray-200 animate-spin dark:text-gray-600 fill-primary m-1",
           sizeChart[size],
           className
         )}

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

@@ -1 +1 @@
-export { Spinner } from './Spinner';
+export { Spinner } from "./Spinner";

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

@@ -1,11 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { Switch } from './Switch';
+import { Switch } from "./Switch";
 
 const meta: Meta<typeof Switch> = {
-  title: 'Components/Switch',
+  title: "Components/Switch",
   component: Switch,
-  tags: ['v2'],
+  tags: ["v2"],
   argTypes: {}
 };
 
@@ -15,20 +15,20 @@ type Story = StoryObj<typeof Switch>;
 // More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
 export const Simple: Story = {
   args: {
-    children: 'Dark mode'
+    children: "Dark mode"
   }
 };
 
 export const Disabled: Story = {
   args: {
-    children: 'Dark mode',
+    children: "Dark mode",
     isDisabled: true
   }
 };
 
 export const Required: Story = {
   args: {
-    children: 'Dark mode',
+    children: "Dark mode",
     isRequired: true
   }
 };

frontend/src/components/v2/Switch/Switch.tsx

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
-import * as SwitchPrimitive from '@radix-ui/react-switch';
-import { twMerge } from 'tailwind-merge';
+import { ReactNode } from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { twMerge } from "tailwind-merge";
 
-export type SwitchProps = Omit<SwitchPrimitive.SwitchProps, 'checked' | 'disabled' | 'required'> & {
+export type SwitchProps = Omit<SwitchPrimitive.SwitchProps, "checked" | "disabled" | "required"> & {
   children: ReactNode;
   id: string;
   isChecked?: boolean;
@@ -30,8 +30,8 @@ export const Switch = ({
       checked={isChecked}
       disabled={isDisabled}
       className={twMerge(
-        'ml-3 h-5 w-9 rounded-full bg-bunker-300 transition-all data-[state=checked]:bg-primary',
-        isDisabled && 'bg-bunker-400 hover:bg-bunker-400',
+        "ml-3 h-5 w-9 rounded-full bg-bunker-300 transition-all data-[state=checked]:bg-primary",
+        isDisabled && "bg-bunker-400 hover:bg-bunker-400",
         className
       )}
       id={id}

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

@@ -1,2 +1,2 @@
-export type { SwitchProps } from './Switch';
-export { Switch } from './Switch';
+export type { SwitchProps } from "./Switch";
+export { Switch } from "./Switch";

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

@@ -1,11 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { Table, TableContainer, TableSkeleton, TBody, Td, Th, THead, Tr } from './Table';
+import { Table, TableContainer, TableSkeleton, TBody, Td, Th, THead, Tr } from "./Table";
 
 const meta: Meta<typeof Table> = {
-  title: 'Components/Table',
+  title: "Components/Table",
   component: Table,
-  tags: ['v2'],
+  tags: ["v2"],
   argTypes: {}
 };
 

frontend/src/components/v2/Table/Table.tsx

@@ -1,7 +1,7 @@
-import { HTMLAttributes, ReactNode, TdHTMLAttributes } from 'react';
-import { twMerge } from 'tailwind-merge';
+import { HTMLAttributes, ReactNode, TdHTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
 
-import { Skeleton } from '../Skeleton';
+import { Skeleton } from "../Skeleton";
 
 export type TableContainerProps = {
   children: ReactNode;
@@ -16,8 +16,8 @@ export const TableContainer = ({
 }: TableContainerProps): JSX.Element => (
   <div
     className={twMerge(
-      'relative w-full overflow-x-auto border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter',
-      isRounded && 'rounded-lg',
+      "relative w-full overflow-x-auto border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter",
+      isRounded && "rounded-lg",
       className
     )}
   >
@@ -34,7 +34,7 @@ export type TableProps = {
 export const Table = ({ children, className }: TableProps): JSX.Element => (
   <table
     className={twMerge(
-      'w-full bg-mineshaft-800 p-2 text-left text-sm text-gray-300',
+      "w-full bg-mineshaft-800 p-2 text-left text-sm text-gray-300",
       className
     )}
   >
@@ -49,7 +49,7 @@ export type THeadProps = {
 };
 
 export const THead = ({ children, className }: THeadProps): JSX.Element => (
-  <thead className={twMerge('bg-mineshaft-800 text-xs uppercase text-bunker-300', className)}>
+  <thead className={twMerge("bg-mineshaft-800 text-xs uppercase text-bunker-300", className)}>
     {children}
   </thead>
 );
@@ -62,7 +62,7 @@ export type TrProps = {
 
 export const Tr = ({ children, className, ...props }: TrProps): JSX.Element => (
   <tr
-    className={twMerge('border border-solid border-mineshaft-700 cursor-default', className)}
+    className={twMerge("border border-solid border-mineshaft-700 cursor-default", className)}
     {...props}
   >
     {children}
@@ -76,7 +76,7 @@ export type ThProps = {
 };
 
 export const Th = ({ children, className }: ThProps): JSX.Element => (
-  <th className={twMerge('bg-mineshaft-800 px-5 pt-4 pb-3.5 font-semibold border-b-2 border-mineshaft-600', className)}>{children}</th>
+  <th className={twMerge("bg-mineshaft-800 px-5 pt-4 pb-3.5 font-semibold border-b-2 border-mineshaft-600", className)}>{children}</th>
 );
 
 // table body
@@ -96,7 +96,7 @@ export type TdProps = {
 } & TdHTMLAttributes<HTMLTableCellElement>;
 
 export const Td = ({ children, className, ...props }: TdProps): JSX.Element => (
-  <td className={twMerge('px-5 py-2 text-left', className)} {...props}>
+  <td className={twMerge("px-5 py-2 text-left", className)} {...props}>
     {children}
   </td>
 );

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

@@ -6,5 +6,5 @@ export type {
   THeadProps,
   ThProps,
   TrProps
-} from './Table';
-export { Table, TableContainer, TableSkeleton,TBody, Td, Th, THead, Tr } from './Table';
+} from "./Table";
+export { Table, TableContainer, TableSkeleton,TBody, Td, Th, THead, Tr } from "./Table";

frontend/src/components/v2/Tabs/Tabs.tsx

@@ -1,7 +1,7 @@
-import { useState } from 'react';
-import { faArrowUpRightFromSquare, faCheck, faClipboard } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import * as Tabs from '@radix-ui/react-tabs';
+import { useState } from "react";
+import { faArrowUpRightFromSquare, faCheck, faClipboard } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Tabs from "@radix-ui/react-tabs";
 
 
 export type TabsProps = Tabs.TabsProps & {};

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

@@ -1,4 +1,4 @@
 export type {
   TabsProps
-} from './Tabs';
-export { TabsObject } from './Tabs';
+} from "./Tabs";
+export { TabsObject } from "./Tabs";

frontend/src/components/v2/Tag/Tag.tsx

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
-import { faClose } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { cva, VariantProps } from 'cva';
-import { twMerge } from 'tailwind-merge';
+import { ReactNode } from "react";
+import { faClose } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { cva, VariantProps } from "cva";
+import { twMerge } from "tailwind-merge";
 
 type Props = {
   children: ReactNode;
@@ -13,16 +13,16 @@ type Props = {
 } & VariantProps<typeof tagVariants>;
 
 const tagVariants = cva(
-  'inline-flex items-center whitespace-nowrap text-sm rounded-sm mr-1.5 text-bunker-200',
+  "inline-flex items-center whitespace-nowrap text-sm rounded-sm mr-1.5 text-bunker-200",
   {
     variants: {
       colorSchema: {
-        gray: 'bg-mineshaft-500',
-        red: 'bg-red/80 text-bunker-100',
-        green: 'bg-primary-800 text-white'
+        gray: "bg-mineshaft-500",
+        red: "bg-red/80 text-bunker-100",
+        green: "bg-primary-800 text-white"
       },
       size: {
-        sm: 'px-2 py-0.5'
+        sm: "px-2 py-0.5"
       }
     }
   }
@@ -31,10 +31,10 @@ const tagVariants = cva(
 export const Tag = ({
   children,
   className,
-  colorSchema = 'gray',
+  colorSchema = "gray",
   color,
   isDisabled,
-  size = 'sm',
+  size = "sm",
   onClose
 }: Props) => (
   <div

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

@@ -1 +1 @@
-export { Tag } from './Tag';
+export { Tag } from "./Tag";

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

@@ -1,15 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { TextArea } from './TextArea';
+import { TextArea } from "./TextArea";
 
 const meta: Meta<typeof TextArea> = {
-  title: 'Components/TextArea',
+  title: "Components/TextArea",
   component: TextArea,
-  tags: ['v2'],
+  tags: ["v2"],
   argTypes: {
     placeholder: {
-      defaultValue: 'Type anything',
-      type: 'string'
+      defaultValue: "Type anything",
+      type: "string"
     }
   }
 };
@@ -24,13 +24,13 @@ export const Filled: Story = {
 
 export const Outline: Story = {
   args: {
-    variant: 'outline'
+    variant: "outline"
   }
 };
 
 export const Plain: Story = {
   args: {
-    variant: 'plain'
+    variant: "plain"
   }
 };
 
@@ -43,6 +43,6 @@ export const Error: Story = {
 export const AutoWidth: Story = {
   args: {
     isFullWidth: false,
-    className: 'w-auto'
+    className: "w-auto"
   }
 };

frontend/src/components/v2/TextArea/TextArea.tsx

@@ -1,50 +1,50 @@
-import { forwardRef, TextareaHTMLAttributes } from 'react';
-import { cva, VariantProps } from 'cva';
-import { twMerge } from 'tailwind-merge';
+import { forwardRef, TextareaHTMLAttributes } from "react";
+import { cva, VariantProps } from "cva";
+import { twMerge } from "tailwind-merge";
 
 type Props = {
   isDisabled?: boolean;
   placeholder?: string;
   isFullWidth?: boolean;
   isRequired?: boolean;
-  reSize?: 'none' | 'both' | 'vertical' | 'horizontal';
+  reSize?: "none" | "both" | "vertical" | "horizontal";
 };
 
 const textAreaVariants = cva(
-  'textarea w-full p-2 focus:ring-2 ring-primary-800 outline-none border border-solid text-gray-400 font-inter placeholder-gray-500 placeholder-opacity-50',
+  "textarea w-full p-2 focus:ring-2 ring-primary-800 outline-none border border-solid text-gray-400 font-inter placeholder-gray-500 placeholder-opacity-50",
   {
     variants: {
       size: {
-        xs: ['text-xs'],
-        sm: ['text-sm'],
-        md: ['text-md'],
-        lg: ['text-lg']
+        xs: ["text-xs"],
+        sm: ["text-sm"],
+        md: ["text-md"],
+        lg: ["text-lg"]
       },
       isRounded: {
-        true: ['rounded-md'],
-        false: ''
+        true: ["rounded-md"],
+        false: ""
       },
       variant: {
-        filled: ['bg-bunker-800', 'text-gray-400'],
-        outline: ['bg-transparent'],
-        plain: 'bg-transparent outline-none'
+        filled: ["bg-bunker-800", "text-gray-400"],
+        outline: ["bg-transparent"],
+        plain: "bg-transparent outline-none"
       },
       isError: {
-        true: 'focus:ring-red/50 placeholder-red-300 border-red',
-        false: 'focus:ring-primary/50 border-mineshaft-400'
+        true: "focus:ring-red/50 placeholder-red-300 border-red",
+        false: "focus:ring-primary/50 border-mineshaft-400"
       }
     },
     compoundVariants: [
       {
-        variant: 'plain',
+        variant: "plain",
         isError: [true, false],
-        className: 'border-none'
+        className: "border-none"
       }
     ]
   }
 );
 
-export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'disabled'> &
+export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "disabled"> &
   VariantProps<typeof textAreaVariants> &
   Props;
 
@@ -56,9 +56,9 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       isDisabled = false,
       isError = false,
       isRequired,
-      variant = 'filled',
-      size = 'md',
-      reSize = 'both',
+      variant = "filled",
+      size = "md",
+      reSize = "both",
       ...props
     },
     ref
@@ -74,4 +74,4 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   )
 );
 
-TextArea.displayName = 'TextArea';
+TextArea.displayName = "TextArea";

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

@@ -1,2 +1,2 @@
-export type { TextAreaProps } from './TextArea';
-export { TextArea } from './TextArea';
+export type { TextAreaProps } from "./TextArea";
+export { TextArea } from "./TextArea";

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

@@ -1,13 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { Tooltip, TooltipProps, TooltipProvider } from './Tooltip';
+import { Tooltip, TooltipProps, TooltipProvider } from "./Tooltip";
 
 const meta: Meta<typeof Tooltip> = {
-  title: 'Components/Tooltip',
+  title: "Components/Tooltip",
   component: Tooltip,
-  tags: ['v2'],
+  tags: ["v2"],
   args: {
-    content: 'Hi'
+    content: "Hi"
   }
 };
 

frontend/src/components/v2/Tooltip/Tooltip.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { twMerge } from 'tailwind-merge';
+import { ReactNode } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { twMerge } from "tailwind-merge";
 
 export type TooltipProps = {
   children: ReactNode;
@@ -10,7 +10,7 @@ export type TooltipProps = {
   asChild?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
   defaultOpen?: boolean;
-} & Omit<TooltipPrimitive.TooltipContentProps, 'open'>;
+} & Omit<TooltipPrimitive.TooltipContentProps, "open">;
 
 export const Tooltip = ({
   children,

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

@@ -1 +1 @@
-export { Tooltip, TooltipProvider } from './Tooltip';
+export { Tooltip, TooltipProvider } from "./Tooltip";

frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx

@@ -1,7 +1,7 @@
-import Link from 'next/link';
+import Link from "next/link";
 
-import { Button } from '../Button';
-import { Modal, ModalClose, ModalContent } from '../Modal';
+import { Button } from "../Button";
+import { Modal, ModalClose, ModalContent } from "../Modal";
 
 type Props = {
   isOpen?: boolean;
@@ -15,7 +15,7 @@ export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Ele
       title="Unleash Infisical's Full Power"
       footerContent={[
         <Link
-          href={`/settings/billing/${localStorage.getItem('projectData.id') as string}`}
+          href={`/settings/billing/${localStorage.getItem("projectData.id") as string}`}
           key="upgrade-plan"
         >
           <Button className="mr-4 ml-2 mb-2">Upgrade Plan</Button>

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

@@ -1 +1 @@
-export { UpgradePlanModal } from './UpgradePlanModal';
+export { UpgradePlanModal } from "./UpgradePlanModal";

frontend/src/components/v2/index.tsx

@@ -1,24 +1,24 @@
-export * from './Button';
-export * from './Card';
-export * from './Checkbox';
-export * from './DeleteActionModal';
-export * from './Drawer';
-export * from './Dropdown';
-export * from './EmailServiceSetupModal'
-export * from './EmptyState';
-export * from './FormControl';
-export * from './HoverCardv2';
-export * from './IconButton';
-export * from './Input';
-export * from './Menu';
-export * from './Modal';
-export * from './Popoverv2';
-export * from './Select';
-export * from './Skeleton';
-export * from './Spinner';
-export * from './Switch';
-export * from './Table';
-export * from './Tag';
-export * from './TextArea';
-export * from './Tooltip';
-export * from './UpgradePlanModal';
+export * from "./Button";
+export * from "./Card";
+export * from "./Checkbox";
+export * from "./DeleteActionModal";
+export * from "./Drawer";
+export * from "./Dropdown";
+export * from "./EmailServiceSetupModal"
+export * from "./EmptyState";
+export * from "./FormControl";
+export * from "./HoverCardv2";
+export * from "./IconButton";
+export * from "./Input";
+export * from "./Menu";
+export * from "./Modal";
+export * from "./Popoverv2";
+export * from "./Select";
+export * from "./Skeleton";
+export * from "./Spinner";
+export * from "./Switch";
+export * from "./Table";
+export * from "./Tag";
+export * from "./TextArea";
+export * from "./Tooltip";
+export * from "./UpgradePlanModal";