Shed legacy deps: flatpickr/react-select → native+MUI, auto-animate 0.9

README.md

@@ -5,3 +5,7 @@ Made with ❤️ by [Rahul](https://github.com/rchalamala/), [Eric](https://gith
 In addition, thanks to [Armeet](https://github.com/armeetjatyani/) and others for suggestions/contributions!
 
 Favicon art by Audrey Wong.
+
+## Dependency notes
+
+- `preact` and `@preact/signals` are never imported in `src/` directly — they are runtime peer dependencies of the Schedule-X calendar (`@schedule-x/*`) and must not be removed.

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@formkit/auto-animate": "^0.8.2",
+    "@formkit/auto-animate": "^0.9.0",
     "@hello-pangea/dnd": "^18.0.1",
     "@mui/icons-material": "^9.1.0",
     "@mui/material": "^9.1.0",
@@ -14,16 +14,13 @@
     "@schedule-x/events-service": "^4.6.0",
     "@schedule-x/react": "^4.1.0",
     "@schedule-x/theme-default": "^4.6.0",
-    "flatpickr": "^4.6.13",
     "fzf": "^0.5.1",
     "ics": "^3.12.0",
     "lz-string": "^1.5.0",
     "motion": "^12.40.0",
     "preact": "^10.29.2",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "react-flatpickr": "^4.0.11",
-    "react-select": "^5.9.0",
     "temporal-polyfill": "^0.3.0",
     "usehooks-ts": "^3.1.1"
   },

src/Planner.tsx

@@ -6,15 +6,45 @@ import { createViewWeek, CalendarConfig } from "@schedule-x/calendar";
 import { createEventsServicePlugin } from "@schedule-x/events-service";
 import { useCalendarApp, ScheduleXCalendar } from "@schedule-x/react";
 import { Temporal } from "temporal-polyfill";
-import Flatpickr from "react-flatpickr";
 
 import "@schedule-x/theme-default/dist/index.css";
-import "flatpickr/dist/themes/airbnb.css";
 
 import "./css/planner.css";
 
 const hasWeekendCourse = false;
 
+function formatTime(date: Date): string {
+  return `${String(date.getHours()).padStart(2, "0")}:${String(
+    date.getMinutes(),
+  ).padStart(2, "0")}`;
+}
+
+function TimeInput({
+  value,
+  onChange,
+  label,
+}: {
+  value: Date;
+  onChange: (day: Date) => void;
+  label: string;
+}) {
+  return (
+    <input
+      type="time"
+      className="planner-time-input"
+      aria-label={label}
+      value={formatTime(value)}
+      onChange={(e) => {
+        if (!e.target.value) return;
+        const [hours, minutes] = e.target.value.split(":").map(Number);
+        const day = new Date(value);
+        day.setHours(hours, minutes, 0, 0);
+        onChange(day);
+      }}
+    />
+  );
+}
+
 function CourseToDates(courses: CourseStorage[]): DateData[] {
   const dates: DateData[] = [];
 
@@ -162,27 +192,17 @@ function Planner() {
               className={`flex min-w-0 flex-col items-center gap-y-2 px-0.5 ${idx === 0 ? "col-start-2" : ""}`}
               key={idx}
             >
-              <Flatpickr
-                data-enable-time
-                options={{
-                  dateFormat: "H:i",
-                  enableTime: true,
-                  noCalendar: true,
-                }}
+              <TimeInput
+                label={`Day ${idx + 1} available start time`}
                 value={state.availableTimes[idx][0]}
-                onChange={([day]) => {
+                onChange={(day) => {
                   state.updateAvailableTimes(idx, true, day);
                 }}
               />
-              <Flatpickr
-                data-enable-time
-                options={{
-                  dateFormat: "H:i",
-                  enableTime: true,
-                  noCalendar: true,
-                }}
+              <TimeInput
+                label={`Day ${idx + 1} available end time`}
                 value={state.availableTimes[idx][1]}
-                onChange={([day]) => {
+                onChange={(day) => {
                   state.updateAvailableTimes(idx, false, day);
                 }}
               />