@isma91/react-scheduler 4.0.0

package/src/lib/views/MonthAgenda.tsx

@@ -0,0 +1,84 @@
+import { useMemo } from "react";
+import { format, isSameMonth, getDaysInMonth, isToday } from "date-fns";
+import { AgendaDiv } from "../styles/styles";
+import { DefaultResource, ProcessedEvent } from "../types";
+import useStore from "../hooks/useStore";
+import { Typography } from "@mui/material";
+import { filterTodayAgendaEvents, isTimeZonedToday } from "../helpers/generals";
+import AgendaEventsList from "../components/events/AgendaEventsList";
+import EmptyAgenda from "../components/events/EmptyAgenda";
+
+type Props = {
+  events: ProcessedEvent[];
+  resource?: DefaultResource;
+};
+const MonthAgenda = ({ events, resource }: Props) => {
+  const {
+    month,
+    handleGotoDay,
+    locale,
+    timeZone,
+    selectedDate,
+    translations,
+    alwaysShowAgendaDays,
+    stickyNavigationOffset,
+    stickyNavigationHeight,
+  } = useStore();
+  const { disableGoToDay, headRenderer } = month!;
+  const daysOfMonth = getDaysInMonth(selectedDate);
+  const daysList = Array.from({ length: daysOfMonth }, (_, i) => i + 1);
+
+  const monthEvents = useMemo(() => {
+    return events.filter((event) => isSameMonth(event.start, selectedDate));
+  }, [events, selectedDate]);
+
+  if (!alwaysShowAgendaDays && !monthEvents.length) {
+    return <EmptyAgenda />;
+  }
+
+  return (
+    <AgendaDiv stickyOffset={stickyNavigationOffset} stickyHeight={stickyNavigationHeight}>
+      {daysList.map((i) => {
+        const day = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), i);
+        const today = isTimeZonedToday({ dateLeft: day, timeZone });
+        const dayEvents = filterTodayAgendaEvents(events, day);
+
+        if (!alwaysShowAgendaDays && !dayEvents.length) return null;
+
+        return (
+          <div key={i} className={`rs__agenda_row ${isToday(day) ? "rs__today_cell" : ""}`}>
+            <div className="rs__cell rs__agenda__cell">
+              {typeof headRenderer === "function" ? (
+                <div>{headRenderer({ day, events, resource })}</div>
+              ) : (
+                <Typography
+                  sx={{ fontWeight: today ? "bold" : "inherit" }}
+                  color={today ? "primary" : "inherit"}
+                  variant="body2"
+                  className={!disableGoToDay ? "rs__hover__op" : ""}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (!disableGoToDay) {
+                      handleGotoDay(day);
+                    }
+                  }}
+                >
+                  {format(day, "dd E", { locale })}
+                </Typography>
+              )}
+            </div>
+            <div className="rs__cell rs__agenda_items">
+              {dayEvents.length > 0 ? (
+                <AgendaEventsList day={day} events={dayEvents} />
+              ) : (
+                <Typography sx={{ padding: 1 }}>{translations.noDataToDisplay}</Typography>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </AgendaDiv>
+  );
+};
+
+export { MonthAgenda };

package/src/lib/views/Week.tsx

@@ -0,0 +1,92 @@
+import { useEffect, useCallback } from "react";
+import { startOfWeek, addDays, eachMinuteOfInterval, endOfDay, startOfDay, set } from "date-fns";
+import { DefaultResource } from "../types";
+import { calcCellHeight, calcMinuteHeight, getResourcedEvents } from "../helpers/generals";
+import { WithResources } from "../components/common/WithResources";
+import useStore from "../hooks/useStore";
+import { WeekAgenda } from "./WeekAgenda";
+import WeekTable from "../components/week/WeekTable";
+
+const Week = () => {
+  const {
+    week,
+    selectedDate,
+    height,
+    events,
+    getRemoteEvents,
+    triggerLoading,
+    handleState,
+    resources,
+    resourceFields,
+    fields,
+    agenda,
+  } = useStore();
+  const { weekStartOn, weekDays, startHour, endHour, step } = week!;
+  const _weekStart = startOfWeek(selectedDate, { weekStartsOn: weekStartOn });
+  const daysList = weekDays.map((d) => addDays(_weekStart, d));
+  const weekStart = startOfDay(daysList[0]);
+  const weekEnd = endOfDay(daysList[daysList.length - 1]);
+  const START_TIME = set(selectedDate, { hours: startHour, minutes: 0, seconds: 0 });
+  const END_TIME = set(selectedDate, { hours: endHour, minutes: -step, seconds: 0 });
+  const hours = eachMinuteOfInterval(
+    {
+      start: START_TIME,
+      end: END_TIME,
+    },
+    { step }
+  );
+  const CELL_HEIGHT = calcCellHeight(height, hours.length);
+  const MINUTE_HEIGHT = calcMinuteHeight(CELL_HEIGHT, step);
+
+  const fetchEvents = useCallback(async () => {
+    try {
+      triggerLoading(true);
+
+      const events = await getRemoteEvents!({
+        start: weekStart,
+        end: weekEnd,
+        view: "week",
+      });
+      if (Array.isArray(events)) {
+        handleState(events, "events");
+      }
+    } catch (error) {
+      throw error;
+    } finally {
+      triggerLoading(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getRemoteEvents]);
+
+  useEffect(() => {
+    if (getRemoteEvents instanceof Function) {
+      fetchEvents();
+    }
+  }, [fetchEvents, getRemoteEvents]);
+
+  const renderTable = (resource?: DefaultResource) => {
+    let resourcedEvents = events;
+    if (resource) {
+      resourcedEvents = getResourcedEvents(events, resource, resourceFields, fields);
+    }
+
+    if (agenda) {
+      return <WeekAgenda daysList={daysList} resource={resource} events={resourcedEvents} />;
+    }
+
+    return (
+      <WeekTable
+        resourcedEvents={resourcedEvents}
+        resource={resource}
+        hours={hours}
+        cellHeight={CELL_HEIGHT}
+        minutesHeight={MINUTE_HEIGHT}
+        daysList={daysList}
+      />
+    );
+  };
+
+  return resources.length ? <WithResources renderChildren={renderTable} /> : renderTable();
+};
+
+export { Week };

package/src/lib/views/WeekAgenda.tsx

@@ -0,0 +1,81 @@
+import { useMemo } from "react";
+import { format, isToday } from "date-fns";
+import { AgendaDiv } from "../styles/styles";
+import { DefaultResource, ProcessedEvent } from "../types";
+import useStore from "../hooks/useStore";
+import { Typography } from "@mui/material";
+import { filterTodayAgendaEvents, isTimeZonedToday } from "../helpers/generals";
+import AgendaEventsList from "../components/events/AgendaEventsList";
+import EmptyAgenda from "../components/events/EmptyAgenda";
+
+type Props = {
+  daysList: Date[];
+  resource?: DefaultResource;
+  events: ProcessedEvent[];
+};
+const WeekAgenda = ({ daysList, resource, events }: Props) => {
+  const {
+    week,
+    handleGotoDay,
+    locale,
+    timeZone,
+    translations,
+    alwaysShowAgendaDays,
+    stickyNavigationOffset,
+    stickyNavigationHeight,
+  } = useStore();
+  const { disableGoToDay, headRenderer } = week!;
+
+  const hasEvents = useMemo(() => {
+    return daysList.some((day) => filterTodayAgendaEvents(events, day).length > 0);
+  }, [daysList, events]);
+
+  if (!alwaysShowAgendaDays && !hasEvents) {
+    return <EmptyAgenda />;
+  }
+
+  return (
+    <AgendaDiv stickyOffset={stickyNavigationOffset} stickyHeight={stickyNavigationHeight}>
+      {daysList.map((day, i) => {
+        const today = isTimeZonedToday({ dateLeft: day, timeZone });
+        const dayEvents = filterTodayAgendaEvents(events, day);
+
+        if (!alwaysShowAgendaDays && !dayEvents.length) return null;
+
+        return (
+          <div key={i} className={`rs__agenda_row ${isToday(day) ? "rs__today_cell" : ""}`}>
+            <div className="rs__cell rs__agenda__cell">
+              {typeof headRenderer === "function" ? (
+                <div>{headRenderer({ day, events, resource })}</div>
+              ) : (
+                <Typography
+                  sx={{ fontWeight: today ? "bold" : "inherit" }}
+                  color={today ? "primary" : "inherit"}
+                  variant="body2"
+                  className={!disableGoToDay ? "rs__hover__op" : ""}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (!disableGoToDay) {
+                      handleGotoDay(day);
+                    }
+                  }}
+                >
+                  {format(day, "dd E", { locale })}
+                </Typography>
+              )}
+            </div>
+            <div className="rs__cell rs__agenda_items">
+              {dayEvents.length > 0 ? (
+                <AgendaEventsList day={day} events={dayEvents} />
+              ) : (
+                <Typography sx={{ padding: 1 }}>{translations.noDataToDisplay}</Typography>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </AgendaDiv>
+  );
+};
+
+export { WeekAgenda };

package/src/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+/// <reference types="vite-plugin-svgr/client" />

package/tsconfig.build.json

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/lib/**/*"],
+  "exclude": ["node_modules", "**/__tests__/**"]
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "incremental": true,
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/vite.config.js

@@ -0,0 +1,40 @@
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+import tsconfigPaths from "vite-tsconfig-paths";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig(() => ({
+  plugins: [
+    react(),
+    tsconfigPaths({
+      configNames: ["tsconfig.json"],
+    }),
+    dts({ tsconfigPath: "./tsconfig.build.json" }),
+    peerDepsExternal(),
+  ],
+  server: {
+    port: 3000,
+    host: true,
+  },
+  preview: {
+    port: 3000,
+  },
+  build: {
+    lib: {
+      entry: {
+        index: resolve(__dirname, "src/lib/index.tsx"),
+      },
+      name: "Scheduler",
+      formats: ["es"],
+    },
+    copyPublicDir: false,
+  },
+  resolve: {
+    extensions: [".js", ".ts", ".tsx", ".jsx"],
+  },
+}));