@koine/react 2.0.0-beta.21 → 2.0.0-beta.22

package/calendar/useCalendar.js

@@ -0,0 +1,176 @@
+import { __assign, __awaiter, __generator, __read } from "tslib";
+import { useCallback, useEffect, useReducer, useState } from "react";
+import { getCalendarsEventsFromGoogle } from "./calendar-api-google.js";
+import { getEndDate, getNextDate, getPrevDate, getStartDate, isTodayInView, } from "./utils.js";
+export function useCalendar(_a) {
+    var _this = this;
+    var locale = _a.locale, apiKey = _a.apiKey, calendars = _a.calendars, initialEvents = _a.events, initialStart = _a.start, initialEnd = _a.end, _b = _a.view, initialView = _b === void 0 ? "month" : _b, _c = _a.timeZone, timeZone = _c === void 0 ? "" : _c, onError = _a.onError;
+    var _d = __read(useState(initialView), 2), view = _d[0], setView = _d[1];
+    var start = initialStart || getStartDate(new Date(), view);
+    var end = initialEnd || getEndDate(start, view);
+    var _e = __read(useState([start, end]), 2), range = _e[0], setRange = _e[1];
+    var _f = __read(useState(isTodayInView(start, end)), 2), todayInView = _f[0], setTodayInView = _f[1];
+    var _g = __read(useState(initialEvents || {}), 2), events = _g[0], setEvents = _g[1];
+    var _h = __read(useState(null), 2), eventHovered = _h[0], setEventHovered = _h[1];
+    var _j = __read(useState(null), 2), eventClicked = _j[0], setEventClicked = _j[1];
+    var _k = __read(useReducer(function (state, action) {
+        var _a;
+        var type = action.type;
+        switch (type) {
+            case "events": {
+                var events_1 = action.payload;
+                return Object.entries(state).reduce(function (map, _a) {
+                    var _b = __read(_a, 2), id = _b[0], calendar = _b[1];
+                    map[id] = __assign(__assign({}, calendar), { events: events_1[id] || 0 });
+                    return map;
+                }, {});
+            }
+            case "visibility": {
+                var visible_1 = action.payload;
+                if (typeof visible_1 === "string") {
+                    return __assign(__assign({}, state), (_a = {}, _a[visible_1] = __assign(__assign({}, state[visible_1]), { on: !state[visible_1].on }), _a));
+                }
+                else {
+                    return Object.entries(state).reduce(function (map, _a) {
+                        var _b = __read(_a, 2), id = _b[0], calendar = _b[1];
+                        map[id] = __assign(__assign({}, calendar), { on: visible_1.indexOf(id) > -1 });
+                        return map;
+                    }, {});
+                }
+            }
+            default:
+                return state;
+        }
+    }, calendars.reduce(function (map, calendar) {
+        map[calendar.id] = __assign(__assign({}, calendar), { name: calendar.name || "", on: true, events: 0 });
+        return map;
+    }, {})), 2), calendarsMap = _k[0], updateCalendars = _k[1];
+    var toggleCalendarVisibility = useCallback(function (idOrIds) {
+        updateCalendars({ type: "visibility", payload: idOrIds });
+    }, [updateCalendars]);
+    var updateCalendarsBasedOnEvents = useCallback(function (events) {
+        var payload = {};
+        for (var uid in events) {
+            var id = events[uid].calendar.id;
+            payload[id] = payload[id] || 0;
+            payload[id]++;
+        }
+        updateCalendars({ type: "events", payload: payload });
+    }, []);
+    var loadCalendars = useCallback(function (calendars, start, end) { return __awaiter(_this, void 0, void 0, function () {
+        var newEvents, e_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4, getCalendarsEventsFromGoogle({
+                            apiKey: apiKey,
+                            calendars: calendars,
+                            timeZone: timeZone,
+                            start: start,
+                            end: end,
+                        })];
+                case 1:
+                    newEvents = _a.sent();
+                    setEvents(newEvents);
+                    return [3, 3];
+                case 2:
+                    e_1 = _a.sent();
+                    if (onError)
+                        onError(e_1);
+                    return [3, 3];
+                case 3: return [2];
+            }
+        });
+    }); }, [setEvents, apiKey, timeZone, onError]);
+    var handleToday = useCallback(function () {
+        var _a = __read(range, 2), start = _a[0], end = _a[1];
+        var newStart = getStartDate(new Date(), view);
+        var newEnd = getEndDate(newStart, view);
+        setRange([newStart, newEnd]);
+        if (start.getTime() !== newStart.getTime() ||
+            end.getTime() !== newEnd.getTime()) {
+            setEventClicked(null);
+            setEventHovered(null);
+        }
+    }, [view, range]);
+    var handlePrev = useCallback(function () {
+        setRange(function (_a) {
+            var _b = __read(_a, 1), start = _b[0];
+            var newStart = getPrevDate(start, view);
+            var newEnd = getEndDate(newStart, view);
+            return [newStart, newEnd];
+        });
+        setEventClicked(null);
+        setEventHovered(null);
+    }, [view]);
+    var handleNext = useCallback(function () {
+        setRange(function (_a) {
+            var _b = __read(_a, 1), start = _b[0];
+            var newStart = getNextDate(start, view);
+            var newEnd = getEndDate(newStart, view);
+            return [newStart, newEnd];
+        });
+        setEventClicked(null);
+        setEventHovered(null);
+    }, [view]);
+    var handleView = useCallback(function (newView) {
+        var newStart = getStartDate(start, newView);
+        var newEnd = getEndDate(newStart, newView);
+        setRange([newStart, newEnd]);
+        setView(newView);
+        setEventClicked(null);
+        setEventHovered(null);
+    }, [start]);
+    useEffect(function () {
+        var _a = __read(range, 2), start = _a[0], end = _a[1];
+        loadCalendars(calendars, start, end);
+        setTodayInView(isTodayInView(start, end));
+    }, [range]);
+    useEffect(function () {
+        if (events) {
+            updateCalendarsBasedOnEvents(events);
+        }
+    }, [events, updateCalendarsBasedOnEvents]);
+    useEffect(function () {
+        if (eventClicked) {
+            if (!calendarsMap[eventClicked.calendar.id].on) {
+                setEventClicked(null);
+            }
+        }
+    }, [calendarsMap, eventClicked, setEventClicked]);
+    return {
+        view: view,
+        eventClicked: eventClicked,
+        setEventClicked: setEventClicked,
+        eventHovered: eventHovered,
+        setEventHovered: setEventHovered,
+        getDaygridNavProps: function () { return ({
+            locale: locale,
+            handlePrev: handlePrev,
+            handleNext: handleNext,
+            handleToday: handleToday,
+            handleView: handleView,
+            todayInView: todayInView,
+            range: range,
+            view: view,
+        }); },
+        getDaygridTableProps: function () { return ({
+            locale: locale,
+            events: events,
+            eventClicked: eventClicked,
+            setEventClicked: setEventClicked,
+            eventHovered: eventHovered,
+            setEventHovered: setEventHovered,
+            handlePrev: handlePrev,
+            handleNext: handleNext,
+            calendarsMap: calendarsMap,
+            range: range,
+            view: view,
+        }); },
+        getLegendProps: function () { return ({
+            calendarsMap: calendarsMap,
+            toggleCalendarVisibility: toggleCalendarVisibility,
+        }); },
+    };
+}

package/calendar/utils.d.ts

@@ -0,0 +1,11 @@
+import type { CalendarEventsMap, CalendarView, CalendarViewWeeks } from "./types.js";
+export declare function getEventTimestamp(dateLike: number | Date | string): number;
+export declare function getDisplayTime(date: Date): string;
+export declare function getStartDate(date: Date, view: CalendarView): Date;
+export declare function getEndDate(start: Date, view: CalendarView): Date;
+export declare function getPrevDate(date: Date, view: CalendarView): Date;
+export declare function getNextDate(date: Date, view: CalendarView): Date;
+export declare function isTodayInView(start: Date, end: Date): boolean;
+export declare function mergeCalendarEvents(first: CalendarEventsMap, second: CalendarEventsMap): CalendarEventsMap;
+export declare function addCalendarEvents(toAdd: CalendarEventsMap, toExtend: CalendarEventsMap): CalendarEventsMap;
+export declare function processEventsInView(eventsMap: CalendarEventsMap, calendarView: CalendarView, month: number, weeks: Date[]): CalendarViewWeeks;

package/calendar/utils.js

@@ -0,0 +1,185 @@
+import { __assign } from "tslib";
+import { addDays } from "date-fns/addDays";
+import { addMonths } from "date-fns/addMonths";
+import { addWeeks } from "date-fns/addWeeks";
+import { endOfMonth } from "date-fns/endOfMonth";
+import { endOfWeek } from "date-fns/endOfWeek";
+import { isWithinInterval } from "date-fns/isWithinInterval";
+import { startOfWeek } from "date-fns/startOfWeek";
+import { subMonths } from "date-fns/subMonths";
+import { subWeeks } from "date-fns/subWeeks";
+export function getEventTimestamp(dateLike) {
+    var date = new Date(dateLike);
+    date.setHours(0, 0, 0, 0);
+    return date.valueOf() / 1000;
+}
+export function getDisplayTime(date) {
+    return (date.getHours() +
+        ":" +
+        "0".repeat(2 - date.getMinutes().toString().length) +
+        date.getMinutes());
+}
+export function getStartDate(date, view) {
+    date.setHours(0, 0, 0);
+    if (view === "month") {
+        date.setDate(1);
+    }
+    else if (view === "week") {
+        date = startOfWeek(date, { weekStartsOn: 1 });
+    }
+    return date;
+}
+export function getEndDate(start, view) {
+    var end = start;
+    if (view === "month") {
+        end = endOfMonth(start);
+    }
+    else if (view === "week") {
+        end = endOfWeek(start, { weekStartsOn: 1 });
+    }
+    end.setHours(23, 59, 59);
+    return end;
+}
+export function getPrevDate(date, view) {
+    if (view === "month") {
+        return subMonths(date, 1);
+    }
+    return subWeeks(date, 1);
+}
+export function getNextDate(date, view) {
+    if (view === "month") {
+        return addMonths(date, 1);
+    }
+    return addWeeks(date, 1);
+}
+export function isTodayInView(start, end) {
+    return isWithinInterval(new Date(), { start: start, end: end });
+}
+export function mergeCalendarEvents(first, second) {
+    var all = {};
+    addCalendarEvents(first, all);
+    addCalendarEvents(second, all);
+    return all;
+}
+export function addCalendarEvents(toAdd, toExtend) {
+    for (var id in toAdd) {
+        var event_1 = toAdd[id];
+        toExtend[id] = event_1;
+    }
+    return toExtend;
+}
+function getEventsByTimestamp(events) {
+    var output = {};
+    var _loop_1 = function (uid) {
+        var event_2 = events[uid];
+        event_2.days.forEach(function (timestamp) {
+            output[timestamp] = (output[timestamp] || {});
+            output[timestamp][uid] = event_2;
+        });
+    };
+    for (var uid in events) {
+        _loop_1(uid);
+    }
+    return output;
+}
+function getSortedEvents(events) {
+    var output = [];
+    for (var uid in events) {
+        output.push(events[uid]);
+    }
+    output.sort(function (a, b) {
+        var multi = Number(b.multi) - Number(a.multi);
+        var allDay = Number(b.allDay) - Number(a.allDay);
+        var start = a.start.getTime() - b.start.getTime();
+        var created = a.created.getTime() - b.created.getTime();
+        return multi || allDay || start || created;
+    });
+    return output;
+}
+var FREE_SLOT = 0;
+var BUSY_SLOT = 1;
+export function processEventsInView(eventsMap, calendarView, month, weeks) {
+    var eventsByTimestamp = getEventsByTimestamp(eventsMap);
+    var eventsList = getSortedEvents(eventsMap);
+    var todayDate = new Date();
+    var todayTimestamp = getEventTimestamp(todayDate);
+    var startedAtTopMap = {};
+    var viewWeeks = [];
+    var _loop_2 = function (weekIdx) {
+        var viewWeek = {
+            props: { key: "week.".concat(weekIdx) },
+            days: [],
+        };
+        var weekStartDate = weeks[weekIdx];
+        var weekStartDay = weekStartDate.getDate();
+        var weekStartTimestamp = getEventTimestamp(new Date(weekStartDate));
+        var weekEndTimestamp = getEventTimestamp(addDays(new Date(weekStartDate), 6));
+        for (var dayNumber = 0; dayNumber < 7; dayNumber++) {
+            var dayDate = new Date(new Date(weekStartDate).setDate(weekStartDay + dayNumber));
+            var dayTimestamp = getEventTimestamp(dayDate);
+            var $isToday = todayTimestamp === dayTimestamp;
+            var $isOutOfRange = calendarView === "month" && dayDate.getMonth() !== month;
+            var contextualProps = {
+                $isToday: $isToday,
+                $isOutOfRange: $isOutOfRange,
+            };
+            var viewDay = {
+                props: __assign({ key: "day.".concat(dayTimestamp) }, contextualProps),
+                timestamp: dayTimestamp + "",
+                label: dayDate.getDate() + "",
+                events: [],
+            };
+            if (eventsByTimestamp === null || eventsByTimestamp === void 0 ? void 0 : eventsByTimestamp[dayTimestamp]) {
+                var verticalSlots = Object.keys(eventsByTimestamp[dayTimestamp]).map(function () { return FREE_SLOT; });
+                for (var eventIdx = 0; eventIdx < eventsList.length; eventIdx++) {
+                    var event_3 = eventsList[eventIdx];
+                    var width = 1;
+                    var top_1 = 0;
+                    var firstOfMulti = void 0;
+                    if (!event_3.daysMap[dayTimestamp]) {
+                        continue;
+                    }
+                    if (event_3.multi) {
+                        width = event_3.days.filter(function (t) { return t >= weekStartTimestamp && t <= weekEndTimestamp; }).length;
+                        if (event_3.days.indexOf(dayTimestamp) === 0 || dayNumber === 0) {
+                            firstOfMulti = true;
+                        }
+                    }
+                    if (startedAtTopMap[event_3.uid]) {
+                        top_1 = startedAtTopMap[event_3.uid];
+                    }
+                    else {
+                        for (var verticalIdx = 0; verticalIdx < verticalSlots.length; verticalIdx++) {
+                            var freeOrBusy = verticalSlots[verticalIdx];
+                            if (freeOrBusy !== BUSY_SLOT) {
+                                top_1 = verticalIdx;
+                                break;
+                            }
+                        }
+                    }
+                    verticalSlots[top_1] = BUSY_SLOT;
+                    if (firstOfMulti) {
+                        startedAtTopMap[event_3.uid] = top_1;
+                    }
+                    viewDay.events.push(__assign(__assign(__assign({ key: "event.".concat(dayTimestamp, "-").concat(top_1) }, contextualProps), event_3), { isPast: todayDate > event_3.end, firstOfMulti: firstOfMulti, top: top_1, width: width }));
+                }
+                for (var i = 0; i < verticalSlots.length; i++) {
+                    if (verticalSlots[i] !== BUSY_SLOT) {
+                        viewDay.events.push({
+                            key: "event.".concat(dayTimestamp, "-").concat(i, "}"),
+                            placeholder: true,
+                            top: i,
+                        });
+                    }
+                }
+                viewDay.events.sort(function (a, b) { return a.top - b.top; });
+            }
+            viewWeek.days.push(viewDay);
+        }
+        viewWeeks.push(viewWeek);
+    };
+    for (var weekIdx = 0; weekIdx < weeks.length; weekIdx++) {
+        _loop_2(weekIdx);
+    }
+    return viewWeeks;
+}

package/classed.d.ts

@@ -4,5 +4,5 @@ type ClassedAugmentedProps<Props> = Props & {
     ref?: React.Ref<any>;
 };
 type ClassedFinalProps<Props, Component> = Component extends React.ReactHTML ? React.HTMLProps<Component> & ClassedAugmentedProps<Props> : ClassedAugmentedProps<Props>;
-export declare function classed<Props, Component extends React.ElementType = any>(component: Component): (strings: TemplateStringsArray, ...args: string[] | ((props: Props) => string)[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<ClassedFinalProps<Props, Component>> & React.RefAttributes<Component>>;
+export declare function classed<Props, Component extends React.ElementType = any>(component: Component): (strings: TemplateStringsArray, ...args: ((props: Props) => string)[] | string[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<ClassedFinalProps<Props, Component>> & React.RefAttributes<Component>>;
 export default classed;

package/forms/antispam.d.ts

@@ -0,0 +1,27 @@
+import { type ObjectShape } from "@kuus/yup";
+export declare function encodeForm<T extends ObjectShape = {}>(validationRules: T): {
+    encodedSchema: import("@kuus/yup").ObjectSchema<{
+        [x: string]: T[keyof T] extends import("@kuus/yup").ISchema<any, any, any, any> ? T[keyof T]["__outputType"] : T[keyof T] extends {
+            readonly key: string;
+            readonly isContext: boolean;
+            readonly isValue: boolean;
+            readonly isSibling: boolean;
+            readonly path: any;
+            readonly getter: (data: unknown) => unknown;
+            readonly map?: ((value: unknown) => infer T) | undefined;
+            readonly __isYupRef: boolean;
+            getValue(value: any, parent?: {} | undefined, context?: {} | undefined): infer T;
+            cast(value: any, options?: {
+                parent?: {} | undefined;
+                context?: {} | undefined;
+            } | undefined): infer T;
+            resolve(): any;
+            describe(): import("@kuus/yup").SchemaRefDescription;
+            toString(): string;
+        } ? T : unknown;
+    }, import("@kuus/yup").AnyObject, {
+        [x: string]: T[keyof T] extends import("@kuus/yup").ISchema<any, import("@kuus/yup").AnyObject, any, any> ? T[keyof T]["__default"] : undefined;
+    }, "">;
+    encodedNames: Record<keyof T, string>;
+};
+export declare function decodeForm<ReturnAs extends Record<string, unknown> = {}, FormData extends Record<string, unknown> = {}>(formData: FormData): ReturnAs;

package/forms/antispam.js

@@ -0,0 +1,29 @@
+import { object } from "@kuus/yup";
+import { decode, encode, isUndefined } from "@koine/utils";
+export function encodeForm(validationRules) {
+    var encoded = {};
+    var encodedNames = {};
+    for (var name_1 in validationRules) {
+        if (!name_1.startsWith("_")) {
+            var encodedName = encode(name_1);
+            encoded[encodedName] = validationRules[name_1];
+            encodedNames[name_1] = encodedName;
+        }
+    }
+    var encodedSchema = object(encoded).required();
+    return { encodedSchema: encodedSchema, encodedNames: encodedNames };
+}
+export function decodeForm(formData) {
+    var json = {};
+    for (var encodedName in formData) {
+        var decodedName = decode(encodedName);
+        if (encodedName.startsWith("_")) {
+            json[encodedName.substring(1)] = formData[encodedName];
+        }
+        else if (!isUndefined(formData[encodedName]) &&
+            formData[decodedName] === "") {
+            json[decodedName] = formData[encodedName];
+        }
+    }
+    return json;
+}

package/forms/index.d.ts

@@ -0,0 +1 @@
+export * from "./antispam.js";

package/forms/index.js

@@ -0,0 +1 @@
+export * from "./antispam.js";

package/index.d.ts

@@ -22,4 +22,5 @@ export { useSpinDelay } from "./useSpinDelay.js";
 export { useTraceUpdate } from "./useTraceUpdate.js";
 export { useUpdateEffect } from "./useUpdateEffect.js";
 export { useWindowSize } from "./useWindowSize.js";
+export type { Polymorphic } from "./Polymorphic.js";
 export type { Translate, Option } from "./types.js";

package/mergeRefs.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare function mergeRefs<T = Element>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T>;
 export default mergeRefs;

package/package.json

@@ -2,56 +2,28 @@
   "name": "@koine/react",
   "sideEffects": false,
   "dependencies": {
-    "@koine/dom": "2.0.0-beta.21",
-    "@koine/utils": "2.0.0-beta.21"
+    "@koine/dom": "2.0.0-beta.22",
+    "@koine/utils": "2.0.0-beta.22"
   },
   "peerDependenciesMeta": {
-    "@hookform/resolvers": {
-      "optional": true
-    },
     "@kuus/yup": {
       "optional": true
     },
-    "@mui/base": {
-      "optional": true
-    },
-    "@tiptap/react": {
-      "optional": true
-    },
-    "@tiptap/starter-kit": {
-      "optional": true
-    },
     "date-fns": {
       "optional": true
     },
-    "framer-motion": {
-      "optional": true
-    },
     "react-hook-form": {
       "optional": true
     },
-    "react-icons": {
-      "optional": true
-    },
-    "react-is": {
-      "optional": true
-    },
-    "react-popper": {
-      "optional": true
-    },
     "react-swipeable": {
       "optional": true
     },
-    "styled-components": {
-      "optional": true
-    },
     "tailwindcss": {
       "optional": true
     }
   },
-  "types": "./index.d.ts",
-  "type": "module",
   "module": "./index.js",
+  "type": "module",
   "exports": {
     ".": {
       "import": "./index.js"
@@ -437,6 +409,9 @@
     "./Pill": {
       "import": "./Pill/index.js"
     },
+    "./Polymorphic": {
+      "import": "./Polymorphic.js"
+    },
     "./Progress/ProgressCircular": {
       "import": "./Progress/ProgressCircular.js"
     },
@@ -521,6 +496,33 @@
     "./Typography": {
       "import": "./Typography/index.js"
     },
+    "./calendar/CalendarDaygridCell": {
+      "import": "./calendar/CalendarDaygridCell.js"
+    },
+    "./calendar/CalendarDaygridNav": {
+      "import": "./calendar/CalendarDaygridNav.js"
+    },
+    "./calendar/CalendarDaygridTable": {
+      "import": "./calendar/CalendarDaygridTable.js"
+    },
+    "./calendar/CalendarLegend": {
+      "import": "./calendar/CalendarLegend.js"
+    },
+    "./calendar/calendar-api-google": {
+      "import": "./calendar/calendar-api-google.js"
+    },
+    "./calendar": {
+      "import": "./calendar/index.js"
+    },
+    "./calendar/types": {
+      "import": "./calendar/types.js"
+    },
+    "./calendar/useCalendar": {
+      "import": "./calendar/useCalendar.js"
+    },
+    "./calendar/utils": {
+      "import": "./calendar/utils.js"
+    },
     "./classed": {
       "import": "./classed.js"
     },
@@ -533,6 +535,12 @@
     "./extendComponent": {
       "import": "./extendComponent.js"
     },
+    "./forms/antispam": {
+      "import": "./forms/antispam.js"
+    },
+    "./forms": {
+      "import": "./forms/index.js"
+    },
     "./m/MotionProvider": {
       "import": "./m/MotionProvider.js"
     },
@@ -629,6 +637,9 @@
     "./usePreviousRef": {
       "import": "./usePreviousRef.js"
     },
+    "./useReveal": {
+      "import": "./useReveal.js"
+    },
     "./useScrollPosition": {
       "import": "./useScrollPosition.js"
     },
@@ -655,5 +666,5 @@
     }
   },
   "peerDependencies": {},
-  "version": "2.0.0-beta.21"
+  "version": "2.0.0-beta.22"
 }

package/types.d.ts

@@ -1,4 +1,3 @@
-export type { KoineImgSmartWrapProps, KoineImgSmartProps } from "./Img/types.js";
 export type Translate = (i18nKey: any, query?: any, options?: any) => string;
 export type Option = {
     value: string;