@koine/react 1.0.8 → 1.0.11

package/hooks/useAsyncFn.js

@@ -0,0 +1,29 @@
+import { useCallback, useRef, useState } from "react";
+import { useMountedState } from "./useMountedState";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts)
+ */
+export function useAsyncFn(fn, deps = [], initialState = { loading: false }) {
+    const lastCallId = useRef(0);
+    const isMounted = useMountedState();
+    const [state, set] = useState(initialState);
+    const callback = useCallback((...args) => {
+        const callId = ++lastCallId.current;
+        if (!state.loading) {
+            set((prevState) => ({ ...prevState, loading: true }));
+        }
+        return fn(...args).then((value) => {
+            isMounted() &&
+                callId === lastCallId.current &&
+                set({ value, loading: false });
+            return value;
+        }, (error) => {
+            isMounted() &&
+                callId === lastCallId.current &&
+                set({ error, loading: false });
+            return error;
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+    return [state, callback];
+}

package/hooks/useDateLocale.d.ts

@@ -1,7 +1,7 @@
-/**
- * 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;
+/**
+ * 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,4 +1,3 @@
-import { __awaiter } from "tslib";
 import { useEffect, useState } from "react";
 /**
  * Dynamically import the date-fns correct locale
@@ -12,15 +11,15 @@ export function useDateLocale(locale, defaultLocale = "en") {
     // 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 = () => __awaiter(this, void 0, void 0, function* () {
+        const importLocaleFile = async () => {
             // This webpack option stops all of the date-fns files being imported and chunked.
-            const localeToSet = yield import(
+            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();

package/hooks/useEffectOnce.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useEffectOnce.ts)
+ */
+export declare const useEffectOnce: (effect: React.EffectCallback) => void;

package/hooks/useEffectOnce.js

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

package/hooks/useFirstMountState.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */
+export declare function useFirstMountState(): boolean;

package/hooks/useFirstMountState.js

@@ -0,0 +1,12 @@
+import { useRef } from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */
+export function useFirstMountState() {
+    const isFirst = useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+}

package/hooks/useFocus.d.ts

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

package/hooks/useId.d.ts

@@ -0,0 +1,4 @@
+/**
+ * FIXME: once we can move to react 18 just replace this import with `{ useId } from "react";`
+ */
+export declare function useId(prefix?: string): string;

package/hooks/useId.js

@@ -0,0 +1,7 @@
+import { uid } from "@koine/utils";
+/**
+ * FIXME: once we can move to react 18 just replace this import with `{ useId } from "react";`
+ */
+export function useId(prefix = "uid") {
+    return `${prefix}-${uid()}`;
+}

package/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,5 @@
+import { useEffect } from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,8 @@
+import { useEffect, useLayoutEffect } from "react";
+import { isBrowser } from "@koine/utils";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */
+export const useIsomorphicLayoutEffect = isBrowser
+    ? useLayoutEffect
+    : useEffect;

package/hooks/useMount.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMount.ts)
+ */
+export declare const useMount: (fn: () => void) => void;

package/hooks/useMount.js

@@ -0,0 +1,9 @@
+import { useEffectOnce } from "./useEffectOnce";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMount.ts)
+ */
+export const useMount = (fn) => {
+    useEffectOnce(() => {
+        fn();
+    });
+};

package/hooks/useMountedState.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMountedState.ts)
+ */
+export declare function useMountedState(): () => boolean;

package/hooks/useMountedState.js

@@ -0,0 +1,15 @@
+import { useCallback, useEffect, useRef } from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMountedState.ts)
+ */
+export function useMountedState() {
+    const mountedRef = useRef(false);
+    const get = useCallback(() => mountedRef.current, []);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    return get;
+}

package/hooks/usePrevious.d.ts

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

package/hooks/useScrollPosition.d.ts

@@ -0,0 +1,15 @@
+/// <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

@@ -0,0 +1,75 @@
+import { useRef } from "react";
+import { isBrowser } from "@koine/utils";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+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

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

package/hooks/useScrollTo.js

@@ -0,0 +1,19 @@
+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 +1,4 @@
-/**
- * @see https://stackoverflow.com/a/51082563/9122820
- */
-export declare function useTraceUpdate(props: any): void;
+/**
+ * @see https://stackoverflow.com/a/51082563/9122820
+ */
+export declare function useTraceUpdate(props: any): void;

package/hooks/useUpdateEffect.d.ts

@@ -0,0 +1,5 @@
+import { useEffect } from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
+ */
+export declare const useUpdateEffect: typeof useEffect;

package/hooks/useUpdateEffect.js

@@ -0,0 +1,14 @@
+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);
+};

package/hooks/useWindowSize.d.ts

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

package/index.d.ts

@@ -1,35 +1 @@
-export * from "./Alert";
-export * from "./Animations";
-export * from "./Autocomplete";
-export * from "./Bg";
-export * from "./Breadcrumbs";
-export * from "./Buttons";
-export * from "./Carousel";
-export * from "./Calendar";
-export * from "./Collapsable";
-export * from "./Debug";
-export * from "./Dialog";
-export * from "./Favicon";
-export * from "./Forms";
-export * from "./Grid";
-export * from "./Hamburger";
-export * from "./Header";
-export * from "./helpers";
-export * from "./Hidden";
-export * from "./hooks";
-export * from "./Img";
-export * from "./Link";
-export * from "./MenuItem";
-export * from "./Meta";
-export * from "./NoJs";
-export * from "./Pagination";
-export * from "./Pill";
-export * from "./Progress";
-export * from "./Rating";
-export * from "./Sidebar";
-export * from "./Spacing";
-export * from "./Sticky";
-export * from "./styles";
-export * from "./Tabs";
-export * from "./Typography";
-export * from "./types";
+export * from "./shared";

package/index.js

@@ -1,36 +1,5 @@
-export * from "./Alert";
-export * from "./Animations";
-export * from "./Autocomplete";
-export * from "./Bg";
-export * from "./Breadcrumbs";
-export * from "./Buttons";
-export * from "./Carousel";
-export * from "./Calendar";
-export * from "./Collapsable";
-export * from "./Debug";
-export * from "./Dialog";
-export * from "./Favicon";
-export * from "./Forms";
-export * from "./Grid";
-export * from "./Hamburger";
-export * from "./Header";
-export * from "./helpers";
-export * from "./Hidden";
-export * from "./hooks";
-export * from "./Img";
-export * from "./Link";
-export * from "./MenuItem";
-export * from "./Meta";
-export * from "./NoJs";
-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";
-export * from "./types";
+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

@@ -0,0 +1,37 @@
+/// <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

@@ -0,0 +1,37 @@
+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

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

package/m/index.js

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

package/m/lite.d.ts

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

package/m/lite.js

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

package/m/max.d.ts

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

package/m/max.js

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

package/m/package.json

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

package/node/Alert/Alert.js

@@ -0,0 +1,21 @@
+"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

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

package/node/Animations/Reveal.js

@@ -0,0 +1,19 @@
+"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

@@ -0,0 +1,19 @@
+"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

@@ -0,0 +1,6 @@
+"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);