@koine/react 1.0.9 → 1.0.10

package/hooks/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/hooks/index.js",
-  "types": "./index.d.ts"
-}

package/hooks/useDateLocale.d.ts

@@ -1,7 +0,0 @@
-/**
- * Dynamically import the date-fns correct locale
- *
- * Inspired by:
- * @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
- */
-export declare function useDateLocale(locale?: string, defaultLocale?: string): globalThis.Locale | undefined;

package/hooks/useDateLocale.js

@@ -1,29 +0,0 @@
-import { useEffect, useState } from "react";
-/**
- * Dynamically import the date-fns correct locale
- *
- * Inspired by:
- * @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
- */
-export function useDateLocale(locale, defaultLocale = "en") {
-    const [data, setData] = useState();
-    const [current, setCurrent] = useState(defaultLocale);
-    // const [ready, setReady] = useState(false);
-    // If the user changes the locale listen to the change and import the locale that is now required.
-    useEffect(() => {
-        const importLocaleFile = async () => {
-            // This webpack option stops all of the date-fns files being imported and chunked.
-            const localeToSet = await import(
-            /* webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
-            `date-fns/locale/${locale}/index.js`);
-            setCurrent(locale || current);
-            setData(localeToSet.default);
-            // setReady(true);
-        };
-        // If the locale has not yet been loaded.
-        if (locale !== current) {
-            importLocaleFile();
-        }
-    }, [locale, current]);
-    return data;
-}

package/hooks/useFocus.d.ts

@@ -1,4 +0,0 @@
-/**
- * @see https://stackoverflow.com/a/54159564/1938970
- */
-export declare const useFocus: () => (import("react").RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | (() => void))[];

package/hooks/useFocus.js

@@ -1,11 +0,0 @@
-import { useRef } from "react";
-/**
- * @see https://stackoverflow.com/a/54159564/1938970
- */
-export const useFocus = () => {
-    const element = useRef(null);
-    const setFocus = () => {
-        element.current && element.current.focus();
-    };
-    return [element, setFocus];
-};

package/hooks/usePrevious.d.ts

@@ -1 +0,0 @@
-export declare function usePrevious<T>(value: T): T | undefined;

package/hooks/usePrevious.js

@@ -1,8 +0,0 @@
-import { useEffect, useRef } from "react";
-export function usePrevious(value) {
-    const ref = useRef();
-    useEffect(() => {
-        ref.current = value;
-    });
-    return ref.current;
-}

package/hooks/useScrollPosition.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-declare type Position = {
-    x: number;
-    y: number;
-};
-declare type ElementRef = React.MutableRefObject<HTMLElement | undefined>;
-/**
- * @borrows [@n8tb1t/use-scroll-position@2.0.3](https://github.com/n8tb1t/use-scroll-position) by `n8tb1t <n8tb1t@gmail.com>`
- *
- * We've just:
- * - reused internal helper functions
- * - compacted object arguments in functions as plain argument list to improve compression
- */
-export declare const useScrollPosition: (effect: (currentPosition: Position, prevPosition: Position) => void, deps?: import("react").DependencyList, element?: ElementRef | undefined, useWindow?: boolean | undefined, wait?: number | undefined, boundingElement?: ElementRef | undefined) => void;
-export {};

package/hooks/useScrollPosition.js

@@ -1,75 +0,0 @@
-import { useRef } from "react";
-import useIsomorphicLayoutEffect from "react-use/esm/useIsomorphicLayoutEffect";
-import { isBrowser } from "@koine/utils";
-const zeroPosition = { x: 0, y: 0 };
-const getClientRect = (element) => element?.getBoundingClientRect();
-const getScrollPosition = (element, useWindow, boundingElement) => {
-    if (!isBrowser) {
-        return zeroPosition;
-    }
-    if (useWindow) {
-        return { x: window.scrollX, y: window.scrollY };
-    }
-    const targetPosition = getClientRect(element?.current || document.body);
-    const containerPosition = getClientRect(boundingElement?.current);
-    if (!targetPosition) {
-        return zeroPosition;
-    }
-    return containerPosition
-        ? {
-            x: (containerPosition.x || 0) - (targetPosition.x || 0),
-            y: (containerPosition.y || 0) - (targetPosition.y || 0),
-        }
-        : { x: targetPosition.left, y: targetPosition.top };
-};
-/**
- * @borrows [@n8tb1t/use-scroll-position@2.0.3](https://github.com/n8tb1t/use-scroll-position) by `n8tb1t <n8tb1t@gmail.com>`
- *
- * We've just:
- * - reused internal helper functions
- * - compacted object arguments in functions as plain argument list to improve compression
- */
-export const useScrollPosition = (effect, deps = [], element, useWindow, wait, boundingElement) => {
-    const position = useRef(getScrollPosition(null, useWindow, boundingElement));
-    let throttleTimeout = null;
-    const callBack = () => {
-        const current = getScrollPosition(element, useWindow, boundingElement);
-        effect(current, position.current);
-        position.current = current;
-        throttleTimeout = null;
-    };
-    useIsomorphicLayoutEffect(() => {
-        if (!isBrowser) {
-            return undefined;
-        }
-        const handleScroll = () => {
-            if (wait) {
-                if (throttleTimeout === null) {
-                    throttleTimeout = window.setTimeout(callBack, wait);
-                }
-            }
-            else {
-                callBack();
-            }
-        };
-        if (boundingElement) {
-            boundingElement.current?.addEventListener("scroll", handleScroll, {
-                passive: true,
-            });
-        }
-        else {
-            window.addEventListener("scroll", handleScroll, { passive: true });
-        }
-        return () => {
-            if (boundingElement) {
-                boundingElement.current?.removeEventListener("scroll", handleScroll);
-            }
-            else {
-                window.removeEventListener("scroll", handleScroll);
-            }
-            if (throttleTimeout) {
-                clearTimeout(throttleTimeout);
-            }
-        };
-    }, deps);
-};

package/hooks/useScrollTo.d.ts

@@ -1 +0,0 @@
-export declare function useScrollTo(id?: string, offset?: number): void;

package/hooks/useScrollTo.js

@@ -1,19 +0,0 @@
-import { isBrowser } from "@koine/utils";
-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);
-}

package/hooks/useTraceUpdate.d.ts

@@ -1,4 +0,0 @@
-/**
- * @see https://stackoverflow.com/a/51082563/9122820
- */
-export declare function useTraceUpdate(props: any): void;

package/hooks/useTraceUpdate.js

@@ -1,20 +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.log("Changed props:", changedProps);
-        }
-        prev.current = props;
-    });
-}

package/hooks/useWindowSize.d.ts

@@ -1 +0,0 @@
-export declare function useWindowSize(): number[];

package/hooks/useWindowSize.js

@@ -1,13 +0,0 @@
-import { useEffect, useState } from "react";
-export function useWindowSize() {
-    const [size, setSize] = useState([0, 0]);
-    useEffect(() => {
-        function updateSize() {
-            setSize([window.innerWidth, window.innerHeight]);
-        }
-        window.addEventListener("resize", updateSize);
-        updateSize();
-        return () => window.removeEventListener("resize", updateSize);
-    }, []);
-    return size;
-}

package/index.d.ts

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

package/index.js

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

@@ -1,37 +0,0 @@
-/// <reference types="react" />
-import { LazyProps } from "framer-motion";
-export declare type MotionProviderFeatures = LazyProps["features"];
-export declare type MotionProviderProps = LazyProps & React.PropsWithChildren<{}>;
-/**
- * `<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 declare const MotionProvider: ({ features, children }: MotionProviderProps) => JSX.Element;

package/m/MotionProvider.js

@@ -1,37 +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 _jsx(LazyMotion, { features: features, children: children });
-};

package/m/index.d.ts

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

package/m/index.js

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

package/m/lite.d.ts

@@ -1,2 +0,0 @@
-import { domAnimation } from "framer-motion";
-export default domAnimation;

package/m/lite.js

@@ -1,2 +0,0 @@
-import { domAnimation } from "framer-motion";
-export default domAnimation;

package/m/max.d.ts

@@ -1,2 +0,0 @@
-import { domMax } from "framer-motion";
-export default domMax;

package/m/max.js

@@ -1,2 +0,0 @@
-import { domMax } from "framer-motion";
-export default domMax;

package/m/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/m/index.js",
-  "types": "./index.d.ts"
-}

package/node/Alert/Alert.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Alert = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const AlertRoot = styled_components_1.default.div `
-  font-size: 12px;
-  ${(p) => (p.$danger ? `color: var(--danger)` : "")}
-`;
-const AlertInner = styled_components_1.default.div `
-  padding: 1em;
-  background-color: rgba(0, 0, 0, 0.05);
-  /* border: 1px solid var(--grey700); */
-  /* background: pink; */
-  /* color: red; */
-`;
-const Alert = ({ $danger, children, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(AlertRoot, { "$danger": $danger, ...props, children: (0, jsx_runtime_1.jsx)(AlertInner, { children: children }) }));
-};
-exports.Alert = Alert;

package/node/Alert/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Alert"), exports);

package/node/Animations/Reveal.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Reveal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const framer_motion_1 = require("framer-motion");
-const useReveal_1 = require("./useReveal");
-const Reveal = ({ children, direction, offsetStartY, offsetEndY, offsetStartX, ...props }) => {
-    const effectOptions = { direction, offsetStartY, offsetEndY, offsetStartX };
-    const prefersReducedMotion = (0, framer_motion_1.useReducedMotion)();
-    const { ref, startY, endY, startX } = (0, useReveal_1.useReveal)(effectOptions);
-    const { scrollYProgress } = (0, framer_motion_1.useViewportScroll)();
-    const xRange = (0, framer_motion_1.useTransform)(scrollYProgress, [startY, endY], [startX, 0]);
-    const opacityRange = (0, framer_motion_1.useTransform)(scrollYProgress, [startY, endY], [0, 1]);
-    const x = (0, framer_motion_1.useSpring)(xRange, { stiffness: 400, damping: 90 });
-    const opacity = (0, framer_motion_1.useSpring)(opacityRange);
-    // console.log("start, end", startY, endY)
-    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ...props, ref: ref, style: prefersReducedMotion ? {} : { x, opacity }, children: children }));
-};
-exports.Reveal = Reveal;

package/node/Animations/Underline.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UnderlineSkewed = void 0;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const framer_motion_1 = require("framer-motion");
-exports.UnderlineSkewed = (0, styled_components_1.default)(framer_motion_1.m.i) `
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 15%;
-  right: 15%;
-  height: 20px;
-  margin-top: -10px;
-  z-index: 0;
-  pointer-events: none;
-  background: var(--accent400);
-  transform: skewY(-5deg);
-`;

package/node/Animations/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Reveal"), exports);
-tslib_1.__exportStar(require("./Underline"), exports);
-tslib_1.__exportStar(require("./useReveal"), exports);

package/node/Animations/useReveal.js

@@ -1,74 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useReveal = void 0;
-const react_1 = require("react");
-function useReveal({ direction = "left", offsetStartY = -2, offsetEndY = 0, offsetStartX = "all", }) {
-    const ref = (0, react_1.useRef)(null);
-    const [startY, setStartY] = (0, react_1.useState)(0);
-    const [endY, setEndY] = (0, react_1.useState)(0);
-    const [startX, setStartX] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
-        if (!ref.current) {
-            return;
-        }
-        const rect = ref.current.getBoundingClientRect();
-        // scroll position from top of the window
-        const scrollTop = window.scrollY || document.documentElement.scrollTop;
-        const elementHeight = rect.height;
-        // rect.top is the distance from the currently visible viewport to the top
-        // of the given element
-        // so distanceTop is the distance between the top edge of the window and the
-        // top edge of the given element
-        const elementTop = rect.top;
-        const distanceTop = elementTop + scrollTop;
-        const offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
-        const offsetBottom = offsetEndY ? elementHeight * offsetEndY : offsetTop;
-        // the distance of the element from the top divided by the full height
-        // of the window gives back the start position of the given element in
-        // a scale from 0 to 1
-        const startY = (distanceTop + offsetTop) / document.body.clientHeight;
-        // same for the end, we just add the given element height to the first value
-        const endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
-        let startX;
-        if (offsetStartX === "all") {
-            startX = direction === "left" ? -rect.right : rect.left;
-        }
-        else {
-            startX = rect.width * offsetStartX;
-            startX = direction === "left" ? -startX : startX;
-        }
-        // addMarker(startY + "px");
-        // addMarker(endY + "px");
-        // console.log("start", startY, "end", endY, "startX", startX)
-        setStartY(startY);
-        setEndY(endY);
-        setStartX(startX);
-        // addMarker(startY * 100 + "%", "blue", "fixed");
-        // addMarker(endY * 100 + "%", "blue", "fixed");
-    }, [
-        setStartY,
-        setEndY,
-        setStartX,
-        offsetStartY,
-        offsetEndY,
-        offsetStartX,
-        direction,
-    ]);
-    return { ref, startY, endY, startX };
-}
-exports.useReveal = useReveal;
-// function addMarker(top: string, color = "red", position = "absolute") {
-//   const div = document.createElement("div");
-//   div.setAttribute(
-//     "style",
-//     `
-//     position: ${position};
-//     top: ${top};
-//     left: 0;
-//     right: 0;
-//     height: 1px;
-//     background: ${color};
-//   `
-//   );
-//   document.body.appendChild(div);
-// }