@koine/react 2.0.0-beta.14 → 2.0.0-beta.16

package/hooks/useScrollThreshold.mjs

@@ -1,33 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import noop from "@koine/utils/noop";
-import listenScroll from "@koine/dom/listenScroll";
-export const useScrollThreshold = (threshold, callback)=>{
-    const [isBelow, setIsBelow] = useState(false);
-    const handler = useCallback(()=>{
-        if (threshold) {
-            const posY = window.scrollY; // * -1;
-            const isAbove = posY < threshold;
-            const isBelow = posY > threshold;
-            // console.log("useScrollThreshold setIsBelow", isBelow, posY, threshold);
-            setIsBelow(isBelow);
-            if (callback) callback(isAbove, isBelow);
-        }
-    }, [
-        threshold,
-        callback
-    ]);
-    useEffect(()=>{
-        if (threshold) {
-            // const listener = listenScrollThrottled(0, handler, 50);
-            const listener = listenScroll(handler);
-            handler();
-            return listener;
-        }
-        return noop;
-    }, [
-        threshold,
-        handler
-    ]);
-    return isBelow;
-};
-export default useScrollThreshold;

package/hooks/useScrollTo.mjs

@@ -1,20 +0,0 @@
-import isBrowser from "@koine/utils/isBrowser";
-import useHeader from "../Header/useHeader";
-export function useScrollTo(id = "", offset = 0) {
-    const [, , headerHeight] = useHeader();
-    if (!isBrowser) {
-        return;
-    }
-    const headerOffset = headerHeight || 0;
-    let element = document.getElementById(id);
-    let top = 0;
-    if (element && element.offsetParent) {
-        do {
-            top += element.offsetTop;
-        }while (element = element.offsetParent)
-    }
-    top -= offset;
-    top -= headerOffset;
-    window.scroll(0, top);
-}
-export default useScrollTo;

package/hooks/useSmoothScroll.mjs

@@ -1,35 +0,0 @@
-import { useCallback } from "react";
-import isNumber from "@koine/utils/isNumber";
-import getOffsetTopSlim from "@koine/dom/getOffsetTopSlim";
-import scrollTo from "@koine/dom/scrollTo";
-import useFixedOffset from "./useFixedOffset";
-/**
- *
- * @param disregardAutomaticFixedOffset When the `to` scroll argument is a DOM
- * selector we will keep into account the _fixedOffset_ despite this option.
- * @returns
- */ export function useSmoothScroll(disregardAutomaticFixedOffset) {
-    const fixedOffset = useFixedOffset();
-    const scroll = useCallback((to, customOffset, callback, fallbackTimeout, behavior)=>{
-        let top = undefined;
-        let toIsElement = false;
-        if (isNumber(to)) {
-            top = to;
-        } else if (to) {
-            const el = document.getElementById(to);
-            if (el) {
-                top = getOffsetTopSlim(el) - fixedOffset.current;
-                toIsElement = true;
-            }
-        }
-        if (isNumber(top)) {
-            top = top + (customOffset || 0) + (disregardAutomaticFixedOffset || toIsElement ? 0 : fixedOffset.current);
-            scrollTo(top, callback, fallbackTimeout, behavior);
-        }
-    }, [
-        disregardAutomaticFixedOffset,
-        fixedOffset
-    ]);
-    return scroll;
-}
-export default useSmoothScroll;

package/hooks/useSpinDelay.d.ts

@@ -1,14 +0,0 @@
-/**
- * Wraps your booleans only returning true after the `delay`, and for a minimum
- * time of `minDuration`. This way you're sure that you don't show unnecessary
- * or very short living spinners.
- *
- * @borrows [smeijer/spin-delay](https://github.com/smeijer/spin-delay)
- *
- * - Smaller footprint and options object as argument
- *
- * @param delay [500]
- * @param minDuration [200]
- */
-export declare function useSpinDelay(loading: boolean, delay?: number, minDuration?: number): boolean;
-export default useSpinDelay;

package/hooks/useSpinDelay.mjs

@@ -1,52 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-var State;
-(function(State) {
-    State[State["IDLE"] = 0] = "IDLE";
-    State[State["DELAY"] = 1] = "DELAY";
-    State[State["DISPLAY"] = 2] = "DISPLAY";
-    State[State["EXPIRE"] = 3] = "EXPIRE";
-})(State || (State = {}));
-/**
- * Wraps your booleans only returning true after the `delay`, and for a minimum
- * time of `minDuration`. This way you're sure that you don't show unnecessary
- * or very short living spinners.
- *
- * @borrows [smeijer/spin-delay](https://github.com/smeijer/spin-delay)
- *
- * - Smaller footprint and options object as argument
- *
- * @param delay [500]
- * @param minDuration [200]
- */ export function useSpinDelay(loading, delay = 500, minDuration = 200) {
-    const [state, setState] = useState(0);
-    const timeout = useRef();
-    useEffect(()=>{
-        if (loading && state === 0) {
-            clearTimeout(timeout.current);
-            timeout.current = setTimeout(()=>{
-                if (!loading) {
-                    return setState(0);
-                }
-                timeout.current = setTimeout(()=>{
-                    setState(3);
-                }, minDuration);
-                setState(2);
-            }, delay);
-            setState(1);
-        }
-        if (!loading && state !== 2) {
-            clearTimeout(timeout.current);
-            setState(0);
-        }
-    }, [
-        loading,
-        state,
-        delay,
-        minDuration
-    ]);
-    useEffect(()=>{
-        return ()=>clearTimeout(timeout.current);
-    }, []);
-    return state === 2 || state === 3;
-}
-export default useSpinDelay;

package/hooks/useTraceUpdate.mjs

@@ -1,23 +0,0 @@
-import { useEffect, useRef } from "react";
-/**
- * @see https://stackoverflow.com/a/51082563/9122820
- */ export function useTraceUpdate(props) {
-    const prev = useRef(props);
-    useEffect(()=>{
-        const changedProps = Object.entries(props).reduce((ps, [k, v])=>{
-            if (prev.current[k] !== v) {
-                // @ts-expect-error Does not matter here...
-                ps[k] = [
-                    prev.current[k],
-                    v
-                ];
-            }
-            return ps;
-        }, {});
-        if (Object.keys(changedProps).length > 0) {
-            console.info("[@koine/react:useTraceUpdate] changed props:", changedProps);
-        }
-        prev.current = props;
-    });
-}
-export default useTraceUpdate;

package/hooks/useUpdateEffect.mjs

@@ -1,14 +0,0 @@
-import { useEffect } from "react";
-import { useFirstMountState } from "./useFirstMountState";
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
- */ export const useUpdateEffect = (effect, deps)=>{
-    const isFirstMount = useFirstMountState();
-    useEffect(()=>{
-        if (!isFirstMount) {
-            return effect();
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-};
-export default useUpdateEffect;

package/hooks/useWindowSize.d.ts

@@ -1,12 +0,0 @@
-import debounce from "@koine/utils/debounce";
-/**
- * # Use `window` size
- *
- * @param args Optionally pass {@link debounce} arguments (`wait` and `immediate`)
- *
- * @returns An array with:
- * 1) _width_: using `window.innerWidth`
- * 2) _height_: using `window.innerHeight`
- */
-export declare function useWindowSize(wait?: Parameters<typeof debounce>[1], immediate?: Parameters<typeof debounce>[2]): readonly [number, number];
-export default useWindowSize;

package/hooks/useWindowSize.mjs

@@ -1,32 +0,0 @@
-import { useEffect, useState } from "react";
-import listenResize from "@koine/dom/listenResize";
-import listenResizeDebounced from "@koine/dom/listenResizeDebounced";
-/**
- * # Use `window` size
- *
- * @param args Optionally pass {@link debounce} arguments (`wait` and `immediate`)
- *
- * @returns An array with:
- * 1) _width_: using `window.innerWidth`
- * 2) _height_: using `window.innerHeight`
- */ export function useWindowSize(wait, immediate) {
-    const [width, widthSet] = useState(0);
-    const [height, heightSet] = useState(0);
-    useEffect(()=>{
-        function updateSize() {
-            widthSet(window.innerWidth);
-            heightSet(window.innerHeight);
-        }
-        const listener = wait ? listenResizeDebounced(0, updateSize, wait, immediate) : listenResize(updateSize);
-        updateSize();
-        return listener;
-    }, [
-        wait,
-        immediate
-    ]);
-    return [
-        width,
-        height
-    ];
-}
-export default useWindowSize;

package/index.mjs

@@ -1,4 +0,0 @@
-export * from "./shared"; // we need to alias the star export otherwise the named exports would collide
- // export * as css from "./css";
- // export * as sc from "./sc";
- // export * as tw from "./tw";

package/m/MotionProvider.mjs

@@ -1,40 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { LazyMotion } from "framer-motion";
-/**
- * `<LazyMotion />` provider wrapper from `framer-motion`
- *
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/
- *
- * About the difference between `lite` and `max`
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/#available-features
- *
- * @example
- *
- * `lite` version:
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/lite").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- *
- * ### `max` version
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/max").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- */ export const MotionProvider = ({ features, children })=>{
-    return /*#__PURE__*/ _jsx(LazyMotion, {
-        features: features,
-        children: children
-    });
-};
-export default MotionProvider;

package/m/index.mjs

@@ -1,5 +0,0 @@
-/**
- * @file
- *
- * In this file we only have exports related to `framer-motion`
- */ export * from "./MotionProvider";

package/sc/index.mjs

@@ -1,31 +0,0 @@
-export * from "../shared";
-export * from "../Alert";
-export * from "../Animations";
-export * from "../Autocomplete";
-export * from "../Bg";
-export * from "../Breadcrumbs";
-export * from "../Buttons";
-export * from "../Carousel";
-export * from "../Collapsable";
-export * from "../Debug";
-export { KoineDialog } from "../Dialog/sc/bare";
-export { KoineForm } from "../Form/sc/bare";
-export * from "../Forms";
-export * from "../Grid";
-export * from "../Hamburger";
-export * from "../Header";
-export * from "../Hidden";
-export * from "../Img";
-export * from "../Link";
-export * from "../MenuItem";
-export * from "../Pagination";
-export * from "../Pill";
-export * from "../Progress";
-export * from "../Rating";
-// export * from "../Select";
-export * from "../Sidebar";
-export * from "../Spacing";
-export * from "../Sticky";
-export * from "../styles";
-export * from "../Tabs";
-export * from "../Typography";

package/scm/index.mjs

@@ -1,31 +0,0 @@
-export * from "../shared";
-export * from "../Alert";
-export * from "../Animations";
-export * from "../Autocomplete";
-export * from "../Bg";
-export * from "../Breadcrumbs";
-export * from "../Buttons";
-export * from "../Carousel";
-export * from "../Collapsable";
-export * from "../Debug";
-export { KoineDialog } from "../Dialog/sc/framer";
-// export { KoineForm, type KoineFormProps} from "../Form/sc/framer";
-export * from "../Forms";
-export * from "../Grid";
-export * from "../Hamburger";
-export * from "../Header";
-export * from "../Hidden";
-export * from "../Img";
-export * from "../Link";
-export * from "../MenuItem";
-export * from "../Pagination";
-export * from "../Pill";
-export * from "../Progress";
-export * from "../Rating";
-// export * from "../Select";
-export * from "../Sidebar";
-export * from "../Spacing";
-export * from "../Sticky";
-export * from "../styles";
-export * from "../Tabs";
-export * from "../Typography";

package/shared/index.mjs

@@ -1,43 +0,0 @@
-export * from "../Calendar";
-// export {
-//   Calendar,
-//   CalendarDaygridCell,
-//   CalendarDaygridCellComponents,
-//   CalendarDaygridCellEventBtnProps,
-//   CalendarDaygridCellEventProps,
-//   CalendarDaygridCellProps,
-//   CalendarDaygridCellStyledProps,
-//   CalendarDaygridNavProps,
-//   CalendarDaygridNavTitleProps,
-//   CalendarDaygridTableBodyCellDateProps,
-//   CalendarDaygridTableBodyCellProps,
-//   CalendarDaygridTableProps,
-//   CalendarEvent,
-//   CalendarEventsByTimestamp,
-//   CalendarEventsMap,
-//   CalendarLegendItemProps,
-//   CalendarLegendProps,
-//   CalendarRange,
-//   CalendarView,
-//   CalendarViewDay,
-//   CalendarViewDayProps,
-//   CalendarViewEvent,
-//   CalendarViewWeek,
-//   CalendarViewWeeks,
-//   Calendars
-// } from "../Calendar";
-export * from "../Dialog";
-// export {
-//   KoineDialog,
-//   type KoineDialogProps
-// } from "../Dialog";
-export * from "../FaviconTags";
-// export {
-//   FaviconTags,
-//   type FaviconTagsProps
-// } from "../FaviconTags";
-export * from "../helpers";
-export * from "../hooks";
-export * from "../Meta";
-export * from "../NoJs";
-export * from "../types";

package/styles/Body.mjs

@@ -1,16 +0,0 @@
-import styled from "styled-components";
-export const BodyRoot = styled.div`
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-`;
-/**
- * If you have background graphics to overlap you might need to add:
- *
- * ```css
- * z-index: 1;
- * position: relative;
- * ```
- */ export const BodyMain = styled.main`
-  flex: 1;
-`;

package/styles/Global.mjs

@@ -1,49 +0,0 @@
-import { createGlobalStyle } from "styled-components";
-/**
- * App global style
- *
- * For examples of what to do here take a look at [Bootstrap's reset](https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss)
- * and similar.
- *
- * What we do here:
- * - set the base font family on all possible elements including placeholders prevent Chrome showing a standard font when using the autofill feature
- *  - @see https://stackoverflow.com/a/60987373/1938970
- * - set the base font size on all possible elements to prevent weird zooming on input fields on iPhone iOS devices.
- *  - @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
- *  - @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
- */ export const stylesGlobal = `
-  body {
-    margin: 0;
-    padding: 0;
-    overflow-x: hidden;
-    overflow-y: scroll;
-  }
-
-  body,
-  button,
-  input,
-  textarea,
-  select,
-  select:-webkit-autofill::first-line,
-  input:-webkit-autofill::first-line {
-    font-family: var(--font), -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
-      sans-serif;
-    font-size: var(--fontSize);
-  }
-
-  html {
-    box-sizing: border-box;
-    @media (prefers-reduced-motion: no-preference) {
-      scroll-behavior: smooth;
-    }
-  }
-
-  *,
-  *:before,
-  *:after {
-    box-sizing: inherit;
-    -webkit-tap-highlight-color: transparent;
-  }
-`;
-export const StylesGlobal = createGlobalStyle`${stylesGlobal}`;

package/styles/index.mjs

@@ -1,7 +0,0 @@
-export { BodyMain, BodyRoot } from "./Body";
-export { StylesGlobal, stylesGlobal } from "./Global";
-export { MediaDirection, MediaQuery, MediaQueryFunction, between, down, generateMediaQueries, max, min, only, up, useMedia } from "./media";
-export { SpacingArgs, SpacingDevices, SpacingDirection, SpacingDirectionAxis, SpacingFactor, SpacingProperty, SpacingSize, spacing, spacingBottom, spacingTop, spacingVertical } from "./spacing";
-export { colStretch, centered, ellipsis, inset0, invisible, overlay, stateFocus } from "./styled";
-export { breakpoints, createTheme, useTheme } from "./theme";
-export { THEME_DEFAULT, THEME_KEY, ThemeVanillaContext, ThemeVanillaProvider, getInitialThemeFromClient } from "./theme--vanilla";

package/styles/media.mjs

@@ -1,151 +0,0 @@
-/// TODO:FIXME: this should use code from `useMqWidthCreator`
-import { useEffect, useState } from "react";
-import { breakpoints, useTheme } from "./theme";
-export const { min, max, up, down, between, only } = generateMediaQueries(breakpoints);
-export function useMedia(media) {
-    const { breakpoints } = useTheme();
-    const [matches, setMatches] = useState(false);
-    const [direction = "min", breakpoint] = media.split(":");
-    let px = breakpoints[breakpoint];
-    if (direction === "max") {
-        px = px - 0.02;
-    }
-    const query = `(${direction}-width: ${px}px)`;
-    useEffect(()=>{
-        const mq = window.matchMedia(query);
-        const handleChange = (event)=>{
-            setMatches(event.matches);
-        };
-        setMatches(mq.matches);
-        // Safari < 14 can't use addEventListener on a MediaQueryList
-        // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
-        if (!mq.addEventListener) {
-            // Update the state whenever the media query match state changes
-            mq.addListener(handleChange);
-            // Clean up on unmount and if the query changes
-            return ()=>{
-                mq.removeListener(handleChange);
-            };
-        }
-        mq.addEventListener("change", handleChange);
-        return ()=>{
-            mq.removeEventListener("change", handleChange);
-        };
-    }, [
-        query
-    ]);
-    return matches;
-}
-/**
- * Generate media queries helpers
- *
- * Usage:
- * ```jsx
- * import { generateMediaQueries } from "@koine/react";
- *
- * export const breakpoints = {
- *   xs: 0,
- *   sm: 440,
- *   md: 768,
- *   lg: 1024,
- *   xl: 1368,
- *   xxl: 1690,
- * } as const;
- *
- * export const { min, max, up, down, between, only } = generateMediaQueries(breakpoints);
- * ```
- *
- * Consider the following syntaxes, using normal CSS is just slightly
- * longer but it aovid js imports, reduce the js overhead and improve CSS
- * highlighting in the editor.
- *
- * Even if we would reduce the function signature to the bare minimum the advantage
- * in terms of typing would not be much, also loosing in readability.
- *
- * ```css
- * // but unfortunately this does not work
- * @media (min-width: var(--b-sm)) {}
- * @media (min-width: 480px) {}
- *
- * ${media("min", "sm")} {}
- * ${mediaMin("sm")} {}
- * ${min.sm} {}
- * ${p => p.theme.min.sm}``
- * ```
- *
- * Related projects:
- * @see https://github.com/mg901/styled-breakpoints
- * @see https://github.com/morajabi/styled-media-query
- *
- * @see https://www.w3.org/TR/mediaqueries-5/#custom-mq The spec would allow for
- * something like this syntax
- *
- * ```css
- * @custom-media --narrow-window (max-width: 30em);
- * @media (--narrow-window) {}
- * ```
- */ export function generateMediaQueries(breakpoints) {
-    const temp = Object.keys(breakpoints).map((key)=>{
-        const br = key;
-        return [
-            br,
-            breakpoints[br]
-        ];
-    });
-    const sortedKeys = temp.sort((a, b)=>a[1] - b[1]).map((item)=>item[0]);
-    const getNext = (breakpoint)=>{
-        const index = sortedKeys.indexOf(breakpoint);
-        return sortedKeys[index + 1];
-    };
-    /**
-   * It behaves the same as `@media (min-width: ${value}px)`
-   * where value is the given breakpoint value.
-   * For ease of use this can be used both as a function `min("md")` and as an
-   * object literal `min.md`.
-   */ // @ts-expect-error FIXME: at some point
-    const min = (br)=>`@media (min-width: ${breakpoints[br]}px)`;
-    /**
-   * It behaves the same as `@media (max-width: ${value}px)`
-   * where value is the given breakpoint value.
-   * For ease of use this can be used both as a function `max("md")` and as an
-   * object literal `max.md`.
-   */ // @ts-expect-error FIXME: at some point
-    const max = (br)=>`@media (max-width: ${breakpoints[br] - 0.02}px)`;
-    for(const br in breakpoints){
-        const _br = br;
-        min[_br] = `@media (min-width: ${breakpoints[_br]}px)`;
-        max[_br] = `@media (max-width: ${breakpoints[_br] - 0.02}px)`;
-    }
-    /**
-   * It behaves the same as `min`
-   * @inheritdoc {max}
-   */ const up = min;
-    /**
-   * It behaves similarly to `max` but you will use the "next" breakpoint,
-   * specifying CSS that will apply from the given breakpoint and down.
-   */ const down = (br)=>{
-        const brNext = getNext(br);
-        // TODO: if br does not exists otherwise throw Error
-        return brNext && `@media (max-width: ${breakpoints[brNext] - 0.02}px)`;
-    };
-    /**
-   * Media query between the two given breakpoints
-   */ const between = (br1, br2)=>{
-        return `@media (min-width: ${breakpoints[br1]}px) and (max-width: ${breakpoints[br2] - 0.02}px)`;
-    };
-    /**
-   * Media query to apply from the given breakpoint until the next, just for its
-   * full range
-   */ const only = (br)=>{
-        const brNext = getNext(br);
-        return brNext ? between(br, brNext) : min(br);
-    };
-    return {
-        min,
-        max,
-        up,
-        down,
-        between,
-        only
-    };
-}