feat(ui): added datepicker component

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DatePicker } from "./DatePicker";
+
+const meta: Meta<typeof DatePicker> = {
+  title: "Components/DatePicker",
+  component: DatePicker,
+  tags: ["v2"],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  args: {}
+};

frontend/src/components/v2/DatePicker/DatePicker.tsx

@@ -0,0 +1,37 @@
+import { DayPicker, DayPickerProps } from "react-day-picker";
+import { faCalendar } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { PopoverContentProps, PopoverProps } from "@radix-ui/react-popover";
+import { format } from "date-fns";
+
+import { Button } from "../Button";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popoverv2";
+
+export type DatePickerProps = Omit<DayPickerProps, "selected"> & {
+  value?: Date;
+  onChange: (date?: Date) => void;
+  popUpProps: PopoverProps;
+  popUpContentProps: PopoverContentProps;
+};
+
+// Doc: https://react-day-picker.js.org/
+export const DatePicker = ({
+  value,
+  onChange,
+  popUpProps,
+  popUpContentProps,
+  ...props
+}: DatePickerProps) => {
+  return (
+    <Popover {...popUpProps}>
+      <PopoverTrigger asChild>
+        <Button variant="outline_bg" leftIcon={<FontAwesomeIcon icon={faCalendar} />}>
+          {value ? format(value, "PPP") : "Pick a date"}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-fit p-2" {...popUpContentProps}>
+        <DayPicker {...props} mode="single" selected={value} onSelect={onChange} />
+      </PopoverContent>
+    </Popover>
+  );
+};

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

@@ -0,0 +1,2 @@
+export type { DatePickerProps } from "./DatePicker";
+export { DatePicker } from "./DatePicker";

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

@@ -49,6 +49,7 @@ export type DropdownMenuItemProps<T extends ElementType> =
     icon?: ReactNode;
     as?: T;
     inputRef?: Ref<T>;
+    iconPos?: "left" | "right";
   };
 
 export const DropdownMenuItem = <T extends ElementType = "button">({
@@ -57,6 +58,7 @@ export const DropdownMenuItem = <T extends ElementType = "button">({
   className,
   icon,
   as: Item = "button",
+  iconPos = "left",
   ...props
 }: DropdownMenuItemProps<T> & ComponentPropsWithRef<T>) => (
   <DropdownMenuPrimitive.Item
@@ -67,8 +69,9 @@ export const DropdownMenuItem = <T extends ElementType = "button">({
     )}
   >
     <Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
-      {icon && <span className="flex items-center mr-2">{icon}</span>}
+      {icon && iconPos === "left" && <span className="flex items-center mr-2">{icon}</span>}
       <span className="flex-grow text-left">{children}</span>
+      {icon && iconPos === "right" && <span className="flex items-center ml-2">{icon}</span>}
     </Item>
   </DropdownMenuPrimitive.Item>
 );

frontend/src/components/v2/index.tsx

@@ -1,6 +1,7 @@
 export * from "./Button";
 export * from "./Card";
 export * from "./Checkbox";
+export * from "./DatePicker";
 export * from "./DeleteActionModal";
 export * from "./Drawer";
 export * from "./Dropdown";
@@ -12,6 +13,7 @@ export * from "./IconButton";
 export * from "./Input";
 export * from "./Menu";
 export * from "./Modal";
+export * from "./Pagination";
 export * from "./Popoverv2";
 export * from "./SecretInput";
 export * from "./Select";