feat(blocks): add calendar view scheduling modes

apps/docs/src/lib/blocks-registry.ts

@@ -1508,15 +1508,22 @@ export default function Page() {
     description: "Monthly calendar view with event markers and day selection.",
     category: "data",
     sourcePath: "data/CalendarView/CalendarView.tsx",
-    code: `import { CalendarView } from "@launchapp/design-system/blocks/data";
+    code: `import { CalendarView, type CalendarEvent } from "@launchapp/design-system/blocks/data";
 
-const events = [
-  { id: "1", date: "2024-01-15", title: "Team standup", color: "blue" },
-  { id: "2", date: "2024-01-20", title: "Product launch", color: "green" },
+const events: CalendarEvent[] = [
+  { id: "1", title: "Team standup", date: new Date(), allDay: true },
+  { id: "2", title: "Design review", date: new Date(), color: "secondary" },
 ];
 
 export default function Page() {
-  return <CalendarView events={events} onDateSelect={(date) => console.log("selected", date)} />;
+  return (
+    <CalendarView
+      events={events}
+      defaultView="week"
+      onEventCreate={(event) => console.log("created", event)}
+      onEventReschedule={(event) => console.log("rescheduled", event)}
+    />
+  );
 }`,
   },
   {

registry.json

@@ -2507,8 +2507,9 @@
         }
       ],
       "dependencies": [
-        "date-fns",
-        "react-day-picker"
+        "@dnd-kit/core",
+        "@dnd-kit/utilities",
+        "date-fns"
       ],
       "devDependencies": []
     },

src/blocks/data/CalendarView/CalendarView.stories.tsx

@@ -1,28 +1,30 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { addDays, startOfToday } from "date-fns";
-import { CalendarView, type CalendarEvent } from "./CalendarView";
+import * as React from "react";
+import { addDays, addHours, setHours, setMinutes, startOfToday } from "date-fns";
+import { CalendarView, type CalendarEvent, type CalendarViewMode } from "./CalendarView";
 
 const today = startOfToday();
 
 const sampleEvents: CalendarEvent[] = [
   {
     id: "1",
-    title: "Product Launch Meeting",
-    date: today,
+    title: "Product launch meeting",
+    date: setMinutes(setHours(today, 9), 0),
+    endDate: setMinutes(setHours(today, 10), 0),
     description: "Final review of launch checklist and go/no-go decision",
     color: "primary",
-    allDay: true,
   },
   {
     id: "2",
-    title: "Design Review",
-    date: addDays(today, 1),
+    title: "Design review",
+    date: setMinutes(setHours(addDays(today, 1), 11), 0),
+    endDate: addHours(setMinutes(setHours(addDays(today, 1), 11), 0), 1),
     description: "Review new dashboard designs with the team",
     color: "secondary",
   },
   {
     id: "3",
-    title: "Sprint Planning",
+    title: "Sprint planning",
     date: addDays(today, 2),
     description: "Plan next two-week sprint",
     color: "default",
@@ -31,14 +33,15 @@ const sampleEvents: CalendarEvent[] = [
   {
     id: "4",
     title: "1:1 with Sarah",
-    date: addDays(today, 3),
+    date: setMinutes(setHours(addDays(today, 3), 14), 30),
+    endDate: setMinutes(setHours(addDays(today, 3), 15), 0),
     description: "Weekly check-in",
     color: "outline",
   },
   {
     id: "5",
     title: "Bug triage",
-    date: addDays(today, 5),
+    date: setMinutes(setHours(addDays(today, 5), 16), 0),
     description: "Review critical bugs from last release",
     color: "destructive",
   },
@@ -78,7 +81,10 @@ export default function Page() {
     <CalendarView
       events={events}
       title="Team Calendar"
+      defaultView="week"
       onEventClick={(event) => console.log(event)}
+      onEventCreate={(event) => console.log("created", event)}
+      onEventReschedule={(event) => console.log("rescheduled", event)}
     />
   );
 }`,
@@ -92,39 +98,74 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => (
-    <div className="h-[500px]">
+    <div className="min-h-[700px]">
       <CalendarView events={sampleEvents} />
     </div>
   ),
 };
 
-export const WithSelectedDay: Story = {
+export const WeekView: Story = {
   render: () => (
-    <div className="h-[500px]">
-      <CalendarView
-        events={sampleEvents}
-        selectedDate={today}
-        onDateSelect={(date) => console.log("Selected:", date)}
-      />
+    <div className="min-h-[700px]">
+      <CalendarView events={sampleEvents} defaultView="week" selectedDate={today} />
+    </div>
+  ),
+};
+
+export const DayView: Story = {
+  render: () => (
+    <div className="min-h-[700px]">
+      <CalendarView events={sampleEvents} defaultView="day" selectedDate={today} />
     </div>
   ),
 };
 
+export const Interactive: Story = {
+  render: function InteractiveCalendarView() {
+    const [events, setEvents] = React.useState(sampleEvents);
+    const [view, setView] = React.useState<CalendarViewMode>("week");
+
+    return (
+      <div className="min-h-[700px]">
+        <CalendarView
+          events={events}
+          view={view}
+          onViewChange={setView}
+          selectedDate={today}
+          onDateSelect={(date) => console.log("Selected:", date)}
+          onEventCreate={(event) =>
+            setEvents((current) => [
+              ...current,
+              {
+                ...event,
+                id: `story-event-${current.length + 1}`,
+              },
+            ])
+          }
+          onEventReschedule={(event) =>
+            setEvents((current) => current.map((item) => (item.id === event.id ? event : item)))
+          }
+        />
+      </div>
+    );
+  },
+};
+
 export const Empty: Story = {
   render: () => (
-    <div className="h-[500px]">
+    <div className="min-h-[700px]">
       <CalendarView />
     </div>
   ),
 };
 
 export const WithCustomTitle: Story = {
   render: () => (
-    <div className="h-[500px]">
+    <div className="min-h-[700px]">
       <CalendarView
         events={sampleEvents}
         title="Team Schedule"
-        description="Q2 Planning Calendar"
+        description="Q2 planning calendar"
       />
     </div>
   ),
@@ -133,7 +174,7 @@ export const WithCustomTitle: Story = {
 export const EventListHidden: Story = {
   name: "Without Event List",
   render: () => (
-    <div className="h-[400px]">
+    <div className="min-h-[600px]">
       <CalendarView events={sampleEvents} showEventList={false} />
     </div>
   ),
@@ -182,7 +223,7 @@ export const ManyEvents: Story = {
       },
     ];
     return (
-      <div className="h-[500px]">
+      <div className="min-h-[700px]">
         <CalendarView events={manyEvents} selectedDate={today} />
       </div>
     );
@@ -198,7 +239,7 @@ export const DarkMode: Story = {
     ),
   ],
   render: () => (
-    <div className="h-[500px]">
+    <div className="min-h-[700px]">
       <CalendarView events={sampleEvents} />
     </div>
   ),
@@ -209,7 +250,7 @@ export const Mobile: Story = {
     viewport: { defaultViewport: "mobile1" },
   },
   render: () => (
-    <div className="h-[600px]">
+    <div className="min-h-[700px]">
       <CalendarView events={sampleEvents} />
     </div>
   ),
@@ -220,7 +261,7 @@ export const Tablet: Story = {
     viewport: { defaultViewport: "tablet" },
   },
   render: () => (
-    <div className="h-[500px]">
+    <div className="min-h-[700px]">
       <CalendarView events={sampleEvents} />
     </div>
   ),