@koine/react 1.0.3 → 1.0.8

package/Calendar/utils.js

@@ -0,0 +1,197 @@
+import isWithinInterval from "date-fns/isWithinInterval";
+import endOfMonth from "date-fns/endOfMonth";
+import startOfWeek from "date-fns/startOfWeek";
+import endOfWeek from "date-fns/endOfWeek";
+import subMonths from "date-fns/subMonths";
+import addMonths from "date-fns/addMonths";
+import subWeeks from "date-fns/subWeeks";
+import addWeeks from "date-fns/addWeeks";
+import addDays from "date-fns/addDays";
+export function getEventTimestamp(dateLike) {
+    const 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) {
+    let 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, end });
+}
+export function mergeCalendarEvents(first, second) {
+    const all = {};
+    addCalendarEvents(first, all);
+    addCalendarEvents(second, all);
+    return all;
+}
+export function addCalendarEvents(toAdd, toExtend) {
+    for (const id in toAdd) {
+        const event = toAdd[id];
+        toExtend[id] = event;
+    }
+    return toExtend;
+}
+function getEventsByTimestamp(events) {
+    const output = {};
+    for (const uid in events) {
+        const event = events[uid];
+        event.days.forEach((timestamp) => {
+            output[timestamp] = (output[timestamp] || {});
+            output[timestamp][uid] = event;
+        });
+    }
+    return output;
+}
+function getSortedEvents(events) {
+    const output = [];
+    for (const uid in events) {
+        output.push(events[uid]);
+    }
+    // sort events first multi, then all day then by start then by created date
+    output.sort((a, b) => {
+        const multi = Number(b.multi) - Number(a.multi);
+        const allDay = Number(b.allDay) - Number(a.allDay);
+        const start = a.start.getTime() - b.start.getTime();
+        const created = a.created.getTime() - b.created.getTime();
+        return multi || allDay || start || created;
+    });
+    return output;
+}
+const FREE_SLOT = 0;
+const BUSY_SLOT = 1;
+export function processEventsInView(eventsMap, calendarView, month, weeks) {
+    const eventsByTimestamp = getEventsByTimestamp(eventsMap);
+    const eventsList = getSortedEvents(eventsMap);
+    const todayDate = new Date();
+    const todayTimestamp = getEventTimestamp(todayDate);
+    const startedAtTopMap = {};
+    const viewWeeks = [];
+    for (let weekIdx = 0; weekIdx < weeks.length; weekIdx++) {
+        const viewWeek = {
+            props: { key: `week.${weekIdx}` },
+            days: [],
+        };
+        const weekStartDate = weeks[weekIdx];
+        const weekStartDay = weekStartDate.getDate();
+        const weekStartTimestamp = getEventTimestamp(new Date(weekStartDate));
+        const weekEndTimestamp = getEventTimestamp(addDays(new Date(weekStartDate), 6));
+        for (let dayNumber = 0; dayNumber < 7; dayNumber++) {
+            const dayDate = new Date(new Date(weekStartDate).setDate(weekStartDay + dayNumber));
+            const dayTimestamp = getEventTimestamp(dayDate);
+            const $isToday = todayTimestamp === dayTimestamp;
+            const $isOutOfRange = calendarView === "month" && dayDate.getMonth() !== month;
+            const contextualProps = {
+                $isToday,
+                $isOutOfRange,
+            };
+            const viewDay = {
+                props: Object.assign({ key: `day.${dayTimestamp}` }, contextualProps),
+                timestamp: dayTimestamp + "",
+                label: dayDate.getDate() + "",
+                events: [],
+            };
+            // check that we have events in this day
+            if (eventsByTimestamp === null || eventsByTimestamp === void 0 ? void 0 : eventsByTimestamp[dayTimestamp]) {
+                const verticalSlots = Object.keys(eventsByTimestamp[dayTimestamp]).map(() => FREE_SLOT);
+                for (let eventIdx = 0; eventIdx < eventsList.length; eventIdx++) {
+                    const event = eventsList[eventIdx];
+                    let width = 1;
+                    let top = 0;
+                    let firstOfMulti;
+                    if (!event.daysMap[dayTimestamp]) {
+                        continue;
+                    }
+                    // only for multi days events:
+                    if (event.multi) {
+                        // filter out the days outside of the current week view to avoid
+                        // making a multi-days event chip wider than the week row or shorter
+                        // than it should be (when event spans across weeks)
+                        width = event.days.filter((t) => t >= weekStartTimestamp && t <= weekEndTimestamp).length;
+                        // flag the first day of multi-days events, consider that an event
+                        // might start in a day earlier (hence outside) of the current
+                        // week/month view, so we always check for Mondays (dayNumber === 0)
+                        if (event.days.indexOf(dayTimestamp) === 0 || dayNumber === 0) {
+                            firstOfMulti = true;
+                        }
+                    }
+                    // if we already have the information on when the event has been
+                    // vertically positioned use that index
+                    if (startedAtTopMap[event.uid]) {
+                        top = startedAtTopMap[event.uid];
+                    }
+                    else {
+                        // now look for a free slot and use its index as `top`
+                        for (let verticalIdx = 0; verticalIdx < verticalSlots.length; verticalIdx++) {
+                            const freeOrBusy = verticalSlots[verticalIdx];
+                            if (freeOrBusy !== BUSY_SLOT) {
+                                top = verticalIdx;
+                                break;
+                            }
+                        }
+                    }
+                    // now mark the slot as busy
+                    verticalSlots[top] = BUSY_SLOT;
+                    // store the slot vertical position consistently for multi-days events
+                    if (firstOfMulti) {
+                        startedAtTopMap[event.uid] = top;
+                    }
+                    // push the event, they will be sorted later
+                    viewDay.events.push(Object.assign(Object.assign(Object.assign({ key: `event.${dayTimestamp}-${top}` }, contextualProps), event), { isPast: todayDate > event.end, firstOfMulti,
+                        top,
+                        width }));
+                }
+                // fill the empty slots with events' placeholders
+                for (let i = 0; i < verticalSlots.length; i++) {
+                    if (verticalSlots[i] !== BUSY_SLOT) {
+                        viewDay.events.push({
+                            key: `event.${dayTimestamp}-${i}}`,
+                            placeholder: true,
+                            top: i,
+                        });
+                    }
+                }
+                // sort events and events placeholders by top position
+                viewDay.events.sort((a, b) => a.top - b.top);
+            }
+            viewWeek.days.push(viewDay);
+        }
+        viewWeeks.push(viewWeek);
+    }
+    return viewWeeks;
+}

package/Carousel/Carousel.js

@@ -0,0 +1,378 @@
+export const KoineCarousel = null;
+// import React, { useEffect, useState, useRef } from 'react';
+// import Slide from './slide';
+// import { getSliderListStyles } from './slider-list';
+// import { CarouselProps, KeyCodeFunction } from './types';
+// import renderControls from './controls';
+// import defaultProps from './default-carousel-props';
+// import { getIndexes, addEvent, removeEvent } from './utils';
+// import AnnounceSlide from './announce-slide';
+// export const Carousel = (props: CarouselProps): React.ReactElement => {
+//   const count = React.Children.count(props.children);
+//   const [currentSlide, setCurrentSlide] = useState<number>(
+//     props.autoplayReverse ? count - props.slidesToShow : props.slideIndex
+//   );
+//   const [animation, setAnimation] = useState<boolean>(false);
+//   const [pause, setPause] = useState<boolean>(false);
+//   const [dragging, setDragging] = useState<boolean>(false);
+//   const [move, setMove] = useState<number>(0);
+//   const [keyboardMove, setKeyboardMove] = useState<KeyCodeFunction>(null);
+//   const carouselWidth = useRef<number | null>(null);
+//   const focus = useRef<boolean>(false);
+//   const prevMove = useRef<number>(0);
+//   const carouselEl = useRef<HTMLDivElement>(null);
+//   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+//   const isMounted = useRef<boolean>(true);
+//   useEffect(
+//     () => () => {
+//       isMounted.current = false;
+//     },
+//     []
+//   );
+//   const slidesToScroll =
+//     props.animation === 'fade' ? props.slidesToShow : props.slidesToScroll;
+//   const dragThreshold = (carouselWidth.current || 0) / props.slidesToShow / 2;
+//   const carouselRef = props.innerRef || carouselEl;
+//   const moveSlide = (to?: number) => {
+//     const [slide, endSlide] = getIndexes(
+//       currentSlide,
+//       currentSlide - slidesToScroll,
+//       count
+//     );
+//     to && props.beforeSlide(slide, endSlide);
+//     !props.disableAnimation && setAnimation(true);
+//     setCurrentSlide(to ?? currentSlide);
+//     setTimeout(
+//       () => {
+//         if (!isMounted.current) return;
+//         to && props.afterSlide(currentSlide);
+//         !props.disableAnimation && setAnimation(false);
+//       },
+//       !props.disableAnimation ? props.speed || 500 : 40
+//     ); // if animation is disabled decrease the speed to 40
+//   };
+//   const nextSlide = () => {
+//     if (props.wrapAround || currentSlide <= count) {
+//       moveSlide(currentSlide + slidesToScroll);
+//     } else {
+//       moveSlide();
+//     }
+//   };
+//   const prevSlide = () => {
+//     // boundary
+//     if (props.wrapAround || currentSlide > 0) {
+//       moveSlide(currentSlide - slidesToScroll);
+//     } else {
+//       moveSlide();
+//     }
+//   };
+//   useEffect(() => {
+//     if (props.autoplay && !animation && props.wrapAround) {
+//       if (currentSlide > count) {
+//         setCurrentSlide(currentSlide - count);
+//         if (timer?.current) {
+//           clearTimeout(timer.current);
+//         }
+//       } else if (currentSlide < 0) {
+//         setCurrentSlide(count - -currentSlide);
+//         if (timer?.current) {
+//           clearTimeout(timer.current);
+//         }
+//       }
+//     }
+//   }, [animation, currentSlide]);
+//   useEffect(() => {
+//     if (props.autoplay && !pause) {
+//       timer.current = setTimeout(() => {
+//         if (props.autoplayReverse) {
+//           if (!props.wrapAround && currentSlide > 0) {
+//             prevSlide();
+//           } else if (props.wrapAround) {
+//             prevSlide();
+//           }
+//         } else if (
+//           !props.wrapAround &&
+//           currentSlide < count - props.slidesToShow
+//         ) {
+//           nextSlide();
+//         } else if (props.wrapAround) {
+//           nextSlide();
+//         }
+//       }, props.autoplayInterval);
+//     }
+//     // Clear the timeout if user hover on carousel
+//     if (props.autoplay && pause && timer?.current) {
+//       clearTimeout(timer.current);
+//     }
+//     return () => {
+//       if (timer.current) {
+//         clearTimeout(timer.current);
+//       }
+//     };
+//   }, [currentSlide, pause]);
+//   useEffect(() => {
+//     // makes the loop infinity
+//     if (props.wrapAround && !props.autoplay) {
+//       // if animation is disabled decrease the speed to 0
+//       const speed = !props.disableAnimation ? props.speed || 500 : 0;
+//       if (currentSlide <= -props.slidesToShow) {
+//         // prev
+//         setTimeout(() => {
+//           if (!isMounted.current) return;
+//           setCurrentSlide(count - -currentSlide);
+//         }, speed + 10);
+//       } else if (currentSlide >= count) {
+//         // next
+//         setTimeout(() => {
+//           if (!isMounted.current) return;
+//           setCurrentSlide(currentSlide - count);
+//         }, speed + 10);
+//       }
+//     }
+//   }, [currentSlide]);
+//   useEffect(() => {
+//     if (props.enableKeyboardControls && keyboardMove && focus.current) {
+//       switch (keyboardMove) {
+//         case 'nextSlide':
+//           nextSlide(); // set boundaries for !wrapAround
+//           break;
+//         case 'previousSlide':
+//           prevSlide(); // set boundaries for !wrapAround
+//           break;
+//         case 'firstSlide':
+//           setCurrentSlide(0);
+//           break;
+//         case 'lastSlide':
+//           setCurrentSlide(count - props.slidesToShow);
+//           break;
+//         case 'pause':
+//           if (pause && props.autoplay) {
+//             setPause(false);
+//             break;
+//           } else if (props.autoplay) {
+//             setPause(true);
+//             break;
+//           }
+//           break;
+//       }
+//       setKeyboardMove(null);
+//     }
+//   }, [keyboardMove]);
+//   const onKeyPress = (e: Event) => {
+//     if (
+//       props.enableKeyboardControls &&
+//       focus.current &&
+//       (e as KeyboardEvent).keyCode
+//     ) {
+//       const keyConfig = props.keyCodeConfig;
+//       for (const func in keyConfig) {
+//         if (
+//           keyConfig[func as keyof typeof keyConfig]?.includes(
+//             (e as KeyboardEvent).keyCode
+//           )
+//         ) {
+//           setKeyboardMove(func as KeyCodeFunction);
+//         }
+//       }
+//     }
+//   };
+//   useEffect(() => {
+//     if (carouselEl && carouselEl.current) {
+//       carouselWidth.current = carouselEl.current.offsetWidth;
+//     } else if (props.innerRef) {
+//       carouselWidth.current = props.innerRef.current.offsetWidth;
+//     }
+//     if (props.enableKeyboardControls) {
+//       addEvent(document, 'keydown', onKeyPress);
+//     }
+//     return () => {
+//       removeEvent(document, 'keydown', onKeyPress);
+//     };
+//   }, []);
+//   const handleDragEnd = () => {
+//     if (!props.dragging || !dragging) return;
+//     setDragging(false);
+//     if (Math.abs(move) <= dragThreshold) {
+//       moveSlide();
+//       setMove(0);
+//       prevMove.current = 0;
+//       return;
+//     }
+//     if (move > 0) {
+//       nextSlide();
+//     } else {
+//       prevSlide();
+//     }
+//     setMove(0);
+//     prevMove.current = 0;
+//   };
+//   const onTouchStart = () => {
+//     if (!props.swiping) {
+//       return;
+//     }
+//     setDragging(true);
+//   };
+//   const handlePointerMove = (m: number) => {
+//     if (!props.dragging || !dragging) return;
+//     const moveValue = m * 0.75; // Friction
+//     const moveState = move + (moveValue - prevMove.current);
+//     // Exit drag early if passed threshold
+//     if (Math.abs(move) > dragThreshold) {
+//       handleDragEnd();
+//       return;
+//     }
+//     if (
+//       !props.wrapAround &&
+//       props.disableEdgeSwiping &&
+//       ((currentSlide <= 0 && moveState <= 0) ||
+//         (moveState > 0 && currentSlide >= count - props.slidesToShow))
+//     ) {
+//       prevMove.current = moveValue;
+//       return;
+//     }
+//     if (prevMove.current !== 0) {
+//       setMove(moveState);
+//     }
+//     prevMove.current = moveValue;
+//   };
+//   const onTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
+//     if (!props.dragging || !dragging) return;
+//     props.onDragStart(e);
+//     const moveValue = (carouselWidth?.current || 0) - e.touches[0].pageX;
+//     handlePointerMove(moveValue);
+//   };
+//   const onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+//     e?.preventDefault();
+//     carouselRef?.current?.focus();
+//     if (!props.dragging) return;
+//     setDragging(true);
+//   };
+//   const onMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+//     if (!props.dragging || !dragging) return;
+//     props.onDragStart(e);
+//     const offsetX =
+//       e.clientX - (carouselRef.current?.getBoundingClientRect().left || 0);
+//     const moveValue = (carouselWidth?.current || 0) - offsetX;
+//     handlePointerMove(moveValue);
+//   };
+//   const onMouseUp = (e?: React.MouseEvent<HTMLDivElement>) => {
+//     e?.preventDefault();
+//     handleDragEnd();
+//   };
+//   const onMouseEnter = () => {
+//     if (props.pauseOnHover) {
+//       setPause(true);
+//     }
+//   };
+//   const onMouseLeave = () => {
+//     if (props.pauseOnHover) {
+//       setPause(false);
+//     }
+//   };
+//   const renderSlides = (typeOfSlide?: 'prev-cloned' | 'next-cloned') => {
+//     const slides = React.Children.map(props.children, (child, index) => {
+//       const isCurrentSlide = props.wrapAround
+//         ? currentSlide === index ||
+//           currentSlide === index + count ||
+//           currentSlide === index - count
+//         : currentSlide === index;
+//       return (
+//         <Slide
+//           key={`${typeOfSlide}-${index}`}
+//           count={count}
+//           currentSlide={currentSlide}
+//           index={index}
+//           isCurrentSlide={isCurrentSlide}
+//           typeOfSlide={typeOfSlide}
+//           wrapAround={props.wrapAround}
+//           cellSpacing={props.cellSpacing}
+//           animation={props.animation}
+//           slidesToShow={props.slidesToShow}
+//           speed={props.speed}
+//           zoomScale={props.zoomScale}
+//           cellAlign={props.cellAlign}
+//         >
+//           {child}
+//         </Slide>
+//       );
+//     });
+//     return slides;
+//   };
+//   const [slide] = getIndexes(
+//     currentSlide,
+//     currentSlide - slidesToScroll,
+//     count
+//   );
+//   return (
+//     <div
+//       className={'slider-container'}
+//       style={{
+//         position: 'relative',
+//         padding: props.withoutControls ? 0 : '0 60px 50px'
+//       }}
+//       onMouseEnter={onMouseEnter}
+//       onMouseLeave={onMouseLeave}
+//     >
+//       <AnnounceSlide
+//         ariaLive={props.autoplay && !pause ? 'off' : 'polite'}
+//         message={props.renderAnnounceSlideMessage({
+//           currentSlide: slide,
+//           count
+//         })}
+//       />
+//       <div
+//         className={['slider-frame', props.className || ''].join(' ').trim()}
+//         style={{
+//           overflow: 'hidden',
+//           width: '100%',
+//           position: 'relative',
+//           outline: 'none',
+//           ...props.style
+//         }}
+//         aria-label="carousel-slider"
+//         role="region"
+//         tabIndex={0}
+//         onFocus={() => (focus.current = true)}
+//         onBlur={() => (focus.current = false)}
+//         ref={props.innerRef || carouselEl}
+//         onMouseUp={onMouseUp}
+//         onMouseDown={onMouseDown}
+//         onMouseMove={onMouseMove}
+//         onMouseLeave={onMouseUp}
+//         onTouchStart={onTouchStart}
+//         onTouchEnd={handleDragEnd}
+//         onTouchMove={onTouchMove}
+//       >
+//         <div
+//           className="slider-list"
+//           style={getSliderListStyles(
+//             props.children,
+//             currentSlide,
+//             animation,
+//             props.slidesToShow,
+//             props.cellAlign,
+//             props.wrapAround,
+//             props.speed,
+//             move,
+//             props.animation
+//           )}
+//         >
+//           {props.wrapAround ? renderSlides('prev-cloned') : null}
+//           {renderSlides()}
+//           {props.wrapAround ? renderSlides('next-cloned') : null}
+//         </div>
+//       </div>
+//       {renderControls(
+//         props,
+//         count,
+//         currentSlide,
+//         moveSlide,
+//         nextSlide,
+//         prevSlide,
+//         slidesToScroll
+//       )}
+//     </div>
+//   );
+// };
+// Carousel.defaultProps = defaultProps;
+// export default Carousel;

package/Carousel/CarouselCss.js

@@ -0,0 +1,39 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from "react";
+import styled from "styled-components";
+import { uid } from "@koine/utils";
+import { Row, Col, GRID_GUTTER_DEFAULT as DF, } from "../Grid";
+export const CarouselCssRow = styled(Row) `
+  ${({ $gutter: cs, theme: { gutter } }) => `
+    margin-left: -${cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2}px;
+    margin-right: -${cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2}px;
+    padding-left: ${cs === DF ? gutter[DF] : gutter[DF] - gutter[cs]}px;
+    padding-right: ${cs === DF ? gutter[DF] : gutter[DF] - gutter[cs]}px;
+  `}
+
+  scroll-behavior: smooth;
+  scroll-snap-type: x;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+export const CarouselCssCol = styled(Col) `
+  ${(p) => p.$width && `flex-basis: ${p.$width}px; min-width: ${p.$width}px;`}
+  position: relative;
+  scroll-snap-align: ${(p) => p.$snap};
+`;
+/**
+ * For programmatic usage an example here @see https://stackoverflow.com/a/65902068/9122820
+ */
+export const KoineCarouselCss = (_a) => {
+    var { items, $gutterRow, $gutterCol, $gutter = "quarter", $proportion, $snap = "center", width, children } = _a, colProps = __rest(_a, ["items", "$gutterRow", "$gutterCol", "$gutter", "$proportion", "$snap", "width", "children"]);
+    const slides = children ? Children.toArray(children) : items;
+    const id = uid();
+    if (!slides)
+        return null;
+    return (_jsx(CarouselCssRow, Object.assign({ "$noWrap": true, "$gutter": $gutterRow || $gutter }, { children: slides.map((_slide, idx) => (_jsx(CarouselCssCol, Object.assign({}, colProps, { "$gutter": $gutterCol || $gutter, "$width": width }, { children: slides[idx] }), `CarouselCssCol-${id}-${idx}`))) })));
+};

package/Carousel/index.js

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