@koine/react 2.0.0-beta.12 → 2.0.0-beta.120

package/Calendar/utils.mjs

@@ -1,209 +0,0 @@
-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) {
-    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: {
-                    key: `day.${dayTimestamp}`,
-                    ...contextualProps
-                },
-                timestamp: dayTimestamp + "",
-                label: dayDate.getDate() + "",
-                events: []
-            };
-            // check that we have events in this day
-            if (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({
-                        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.d.ts

@@ -1 +0,0 @@
-export declare const KoineCarousel: null;

package/Carousel/Carousel.mjs

@@ -1,377 +0,0 @@
-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.d.ts

@@ -1,35 +0,0 @@
-/// <reference types="react" />
-import { ColProps, RowProps } from "../Grid";
-export declare const CarouselCssRow: any;
-export declare const CarouselCssCol: any;
-export type KoineCarouselCssProps = ColProps & {
-    /**
-     * Override the `<Row>` gutter, if not specified `$gutter` prop is used
-     */
-    $gutterRow?: RowProps["$gutter"];
-    /**
-     * Override the `<Col>` gutter, if not specified `$gutter` prop is used
-     */
-    $gutterCol?: ColProps["$gutter"];
-    /**
-     * If items are not passed solely children are used
-     */
-    items?: JSX.Element[];
-    /**
-     * @default undefined (in percentage)
-     */
-    $proportion?: number;
-    /**
-     * @default "start"
-     */
-    $snap?: React.CSSProperties["scrollSnapAlign"];
-    /**
-     * Carousel's slide width
-     */
-    width?: number;
-};
-export type CarouselCssProps = React.PropsWithChildren<KoineCarouselCssProps>;
-/**
- * For programmatic usage an example here @see https://stackoverflow.com/a/65902068/9122820
- */
-export declare const KoineCarouselCss: ({ items, $gutterRow, $gutterCol, $gutter, $proportion, $snap, width, children, ...colProps }: CarouselCssProps) => import("react/jsx-runtime").JSX.Element | null;

package/Carousel/CarouselCss.mjs

@@ -1,44 +0,0 @@
-/// <reference types="csstype" />
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, useId } from "react";
-import styled from "styled-components";
-import { Col, GRID_GUTTER_DEFAULT as DF, Row } 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 = ({ items, $gutterRow, $gutterCol, $gutter = "quarter", $proportion, $snap = "center", width, children, ...colProps })=>{
-    const slides = children ? Children.toArray(children) : items;
-    const id = useId();
-    if (!slides) return null;
-    return /*#__PURE__*/ _jsx(CarouselCssRow, {
-        $noWrap: true,
-        $gutter: $gutterRow || $gutter,
-        children: slides.map((_slide, idx)=>/*#__PURE__*/ _jsx(CarouselCssCol, {
-                ...colProps,
-                $gutter: $gutterCol || $gutter,
-                $width: width,
-                children: slides[idx]
-            }, `CarouselCssCol-${id}-${idx}`))
-    });
-};

package/Carousel/index.d.ts

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

package/Carousel/index.mjs

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

package/Collapsable/Collapsable.d.ts

@@ -1 +0,0 @@
-export declare const Collapsable: null;

package/Collapsable/Collapsable.mjs

@@ -1 +0,0 @@
-export const Collapsable = null;