[WEB-4841] chore: calendar component migration UI to propel

apps/web/app/(all)/layout.tsx

@@ -5,7 +5,7 @@ import { PreloadResources } from "./layout.preload";
 // styles
 import "@/styles/command-pallette.css";
 import "@/styles/emoji.css";
-import "@/styles/react-day-picker.css";
+import "@plane/propel/styles/react-day-picker";
 
 export const metadata: Metadata = {
   robots: {

apps/web/core/components/core/filters/date-filter-modal.tsx

@@ -5,7 +5,8 @@ import { Controller, useForm } from "react-hook-form";
 import { X } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 
-import { Button, Calendar } from "@plane/ui";
+import { Calendar } from "@plane/propel/calendar";
+import { Button } from "@plane/ui";
 
 import { renderFormattedPayloadDate, renderFormattedDate, getDate } from "@plane/utils";
 import { DateFilterSelect } from "./date-filter-select";

apps/web/core/components/dropdowns/date-range.tsx

@@ -3,14 +3,14 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
-import { DateRange, Matcher } from "react-day-picker";
 import { usePopper } from "react-popper";
 import { ArrowRight, CalendarCheck2, CalendarDays, X } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 // ui
-import { ComboDropDown, Calendar } from "@plane/ui";
+import { Calendar, DateRange, Matcher } from "@plane/propel/calendar";
+import { ComboDropDown } from "@plane/ui";
 import { cn, renderFormattedDate } from "@plane/utils";
 // helpers
 // hooks

apps/web/core/components/dropdowns/date.tsx

@@ -1,12 +1,12 @@
 import React, { useRef, useState } from "react";
 import { observer } from "mobx-react";
-import { Matcher } from "react-day-picker";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 import { CalendarDays, X } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // ui
-import { ComboDropDown, Calendar } from "@plane/ui";
+import { Calendar, Matcher } from "@plane/propel/calendar";
+import { ComboDropDown } from "@plane/ui";
 import { cn, renderFormattedDate, getDate } from "@plane/utils";
 // helpers
 // hooks

apps/web/core/components/inbox/modals/snooze-issue-modal.tsx

@@ -4,7 +4,8 @@ import { FC, Fragment, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 // ui
 import { useTranslation } from "@plane/i18n";
-import { Button, Calendar } from "@plane/ui";
+import { Calendar } from "@plane/propel/calendar";
+import { Button } from "@plane/ui";
 
 export type InboxIssueSnoozeModalProps = {
   isOpen: boolean;

apps/web/package.json

@@ -52,7 +52,6 @@
     "posthog-js": "^1.131.3",
     "react": "catalog:",
     "react-color": "^2.19.3",
-    "react-day-picker": "9.5.0",
     "react-dom": "catalog:",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "7.51.5",

packages/propel/.storybook/preview.ts

@@ -1,5 +1,6 @@
 import type { Preview } from "@storybook/react-vite";
 import "@plane/tailwind-config/global.css";
+import "../src/styles/react-day-picker.css";
 
 const parameters: Preview["parameters"] = {
   controls: {

packages/propel/package.json

@@ -18,6 +18,7 @@
   "exports": {
     "./accordion": "./dist/accordion/index.js",
     "./avatar": "./dist/avatar/index.js",
+    "./calendar": "./dist/calendar/index.js",
     "./card": "./dist/card/index.js",
     "./charts/*": "./dist/charts/*/index.js",
     "./combobox": "./dist/combobox/index.js",
@@ -29,6 +30,7 @@
     "./popover": "./dist/popover/index.js",
     "./skeleton": "./dist/skeleton/index.js",
     "./styles/fonts": "./dist/styles/fonts/index.css",
+    "./styles/react-day-picker": "./dist/styles/react-day-picker.css",
     "./switch": "./dist/switch/index.js",
     "./table": "./dist/table/index.js",
     "./tabs": "./dist/tabs/index.js",
@@ -47,6 +49,7 @@
     "frimousse": "^0.3.0",
     "lucide-react": "catalog:",
     "react": "catalog:",
+    "react-day-picker": "9.5.0",
     "react-dom": "catalog:",
     "recharts": "^2.15.1",
     "tailwind-merge": "^3.3.1",

packages/propel/src/calendar/calendar.stories.tsx

@@ -0,0 +1,32 @@
+import { ComponentProps, useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Calendar } from "./root";
+
+type CalendarProps = ComponentProps<typeof Calendar>;
+
+const meta: Meta<CalendarProps> = {
+  title: "Components/Calendar",
+  component: Calendar,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    showOutsideDays: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<CalendarProps>;
+
+export const Default: Story = {
+  args: {},
+  render: (args: CalendarProps) => {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+
+    return (
+      <div className="p-4">
+        <Calendar {...args} mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
+      </div>
+    );
+  },
+};

packages/propel/src/calendar/index.ts

@@ -0,0 +1,2 @@
+export * from "./root";
+export type { Matcher, DateRange } from "react-day-picker";

packages/propel/src/calendar/root.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "../utils";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+export const Calendar = ({ className, showOutsideDays = true, ...props }: CalendarProps) => {
+  const currentYear = new Date().getFullYear();
+  const thirtyYearsAgoFirstDay = new Date(currentYear - 30, 0, 1);
+  const thirtyYearsFromNowFirstDay = new Date(currentYear + 30, 11, 31);
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      weekStartsOn={props.weekStartsOn}
+      components={{
+        Chevron: ({ className, ...props }) => (
+          <ChevronLeft
+            className={cn(
+              "size-4",
+              { "rotate-180": props.orientation === "right", "-rotate-90": props.orientation === "down" },
+              className
+            )}
+            {...props}
+          />
+        ),
+      }}
+      startMonth={thirtyYearsAgoFirstDay}
+      endMonth={thirtyYearsFromNowFirstDay}
+      {...props}
+    />
+  );
+};

packages/propel/tsdown.config.ts

@@ -4,6 +4,7 @@ export default defineConfig({
   entry: [
     "src/accordion/index.ts",
     "src/avatar/index.ts",
+    "src/calendar/index.ts",
     "src/card/index.ts",
     "src/charts/*/index.ts",
     "src/combobox/index.ts",

packages/ui/src/index.ts

@@ -2,7 +2,6 @@ export * from "./avatar";
 export * from "./badge";
 export * from "./breadcrumbs";
 export * from "./button";
-export * from "./calendar";
 export * from "./card";
 export * from "./collapsible";
 export * from "./color-picker";