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

package/Typography/TextLoop.mjs

@@ -1,90 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnimatePresence, m } from "framer-motion";
-import { useEffect, useRef, useState } from "react";
-export const TextLoopPiece = ({ text = "", style = {}, className = "", direction = "up", inline = true, noOverflow = true, delay = 400 })=>{
-    const placeholderRef = useRef(null);
-    const [content, setContent] = useState({
-        data: "",
-        key: ""
-    });
-    const [width, setWidth] = useState(inline ? 0 : "auto");
-    useEffect(()=>{
-        const timeoutId = setTimeout(()=>{
-            if (!placeholderRef.current) return;
-            placeholderRef.current.innerHTML = text + "";
-            if (inline) setWidth(placeholderRef.current.offsetWidth);
-            setContent({
-                data: text + "",
-                key: new Date() + ""
-            });
-        }, delay);
-        return ()=>clearTimeout(timeoutId);
-    }, [
-        text,
-        delay,
-        inline
-    ]);
-    return /*#__PURE__*/ _jsxs("div", {
-        className: className,
-        style: {
-            ...style,
-            position: "relative",
-            display: inline ? "inline-block" : "block",
-            width,
-            whiteSpace: inline ? "nowrap" : "normal"
-        },
-        children: [
-            /*#__PURE__*/ _jsx("span", {
-                ref: placeholderRef,
-                style: {
-                    visibility: "hidden"
-                }
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                style: {
-                    overflow: noOverflow ? "hidden" : "visible",
-                    display: "block",
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    height: "100%",
-                    width: "100%"
-                },
-                children: /*#__PURE__*/ _jsx(AnimatePresence, {
-                    children: /*#__PURE__*/ _jsx(m.div, {
-                        style: {
-                            position: "absolute"
-                        },
-                        initial: {
-                            opacity: 0,
-                            y: direction === "down" ? "-100%" : "100%"
-                        },
-                        animate: {
-                            opacity: 1,
-                            y: 0
-                        },
-                        exit: {
-                            opacity: 0,
-                            y: direction === "down" ? "100%" : "-100%"
-                        },
-                        children: content.data
-                    }, content.key)
-                })
-            })
-        ]
-    });
-};
-export const TextLoop = ({ texts, interval = 3000, ...props })=>{
-    const [index, setIndex] = useState(0);
-    useEffect(()=>{
-        const intervalId = setInterval(()=>setIndex((index)=>index + 1), interval // every 3 seconds
-        );
-        return ()=>clearTimeout(intervalId);
-    }, [
-        interval
-    ]);
-    return /*#__PURE__*/ _jsx(TextLoopPiece, {
-        ...props,
-        text: texts[index % texts.length]
-    });
-};

package/Typography/TypeStairs.mjs

@@ -1,61 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
-export const TypeStairs = /*#__PURE__*/ forwardRef(({ children, limit }, ref)=>{
-    // split in rows or just use one row if there is no limit
-    const rows = limit ? splitTextIntoRows(children, limit) : [
-        children
-    ];
-    return rows.length > 1 ? /*#__PURE__*/ _jsx(_Fragment, {
-        children: rows.map((row, rowIndex)=>{
-            return /*#__PURE__*/ _jsxs("span", {
-                children: [
-                    renderRow(row, rowIndex, ref),
-                    rowIndex !== rows.length - 1 && /*#__PURE__*/ _jsx("br", {})
-                ]
-            }, `row-${rowIndex}`);
-        })
-    }) : renderRow(rows[0], 0, ref);
-});
-/**
- * every number chars find a space and break, then restart the gradient weight
- * @see https://stackoverflow.com/a/25770787
- */ function splitTextIntoRows(input = "", limit = 18) {
-    const rows = [];
-    const arr = input.split(" ");
-    let currow = arr[0];
-    let rowlen = currow.length;
-    for(let i = 1; i < arr.length; i++){
-        const word = arr[i];
-        rowlen += word.length + 1;
-        if (rowlen <= limit) {
-            currow += " " + word;
-        } else {
-            rows.push(currow);
-            currow = word;
-            rowlen = word.length;
-        }
-    }
-    rows.push(currow);
-    return rows;
-}
-function renderRow(row, rowIndex, ref) {
-    const letters = row.split("");
-    let fontWeightIdx = 1;
-    // const fontWeight = Math.min(fontWeightIdx * 100, 800);
-    return /*#__PURE__*/ _jsx(_Fragment, {
-        children: letters.map((letter, letterIndex)=>{
-            const fontWeight = Math.min(fontWeightIdx * 100, 800);
-            // don't waste a fontWeight for a white space
-            if (letter !== " ") {
-                fontWeightIdx++;
-            }
-            return /*#__PURE__*/ _jsx("span", {
-                style: {
-                    fontWeight
-                },
-                ref: ref,
-                children: letter
-            }, `letter-${rowIndex}-${letterIndex}`);
-        })
-    });
-}

package/Typography/index.mjs

@@ -1,5 +0,0 @@
-export * from "./CopyPasteVisible";
-export * from "./Native";
-export * from "./ReadMore";
-export * from "./TextLoop";
-export * from "./TypeStairs";

package/css/index.mjs

@@ -1,30 +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/css/bare"; // export * from "../Form";
- // 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/helpers/classed.mjs

@@ -1,65 +0,0 @@
-import React, { createElement, forwardRef } from "react";
-/**
- * This utility allows to extend a component a là `styled-components` but for
- * a className based styling solution like Tailwind,
- *
- * It also plays nicely with tailwind intellisense:
- * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
- *
- * For references about tagged functions:
- * - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
- * - https://makersden.io/blog/reverse-engineering-styled-components
- * - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
- * - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
- *
- * Similar projects:
- * - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
- *
- * Discussions and Q/A:
- * - https://stackoverflow.com/q/73055695/1938970
- */ export function classed(component) {
-    // @ts-expect-error nevermind for now...
-    const type = component.type || component;
-    return function(strings, ...args) {
-        const WrappedComponent = /*#__PURE__*/ forwardRef(function(props, ref) {
-            const argResolved = args.map((arg, index)=>{
-                let result = "";
-                if (typeof arg === "function") {
-                    result = arg(props);
-                } else if (typeof arg !== "undefined") {
-                    result = arg.toString();
-                }
-                return strings[index] + result;
-            }).join("");
-            const isNativeHtmlElement = typeof type === "string";
-            const propsToForward = isNativeHtmlElement ? {} : props;
-            if (isNativeHtmlElement) {
-                for(const key in props){
-                    // like styled-components `transient` props
-                    if (!key.startsWith("$")) {
-                        // FIXME: for react 18 we need: @ts-expect-error
-                        propsToForward[key] = props[key];
-                    }
-                }
-            }
-            // get the tagged function string outcome
-            let className = argResolved || strings[0];
-            // check if we need to clean it or not from the optional structure `< class="..."`
-            className = className.match(/class="([^"]*)/)?.[1] || className;
-            // add the custom classes from props
-            className += props?.className ? " " + props?.className : "";
-            return /*#__PURE__*/ createElement(type, {
-                // ...props,
-                ...propsToForward,
-                // only add ot props if it is not an empty string
-                className: className || undefined,
-                // add ref to props
-                ref
-            });
-        });
-        // FIXME: not sure if this is needed
-        // WrappedComponent.displayName = type.toString();
-        return WrappedComponent; // as unknown as React.ReactElement<typeof props>;
-    };
-}
-export default classed;

package/helpers/classed.stories.mjs

@@ -1,121 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck These are just wip experiments, we stick to just `./classed.tsx`
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { createElement } from "react";
-import { classed } from "./classed";
-const Classed = classed("div")`< class="bg-red-400 ${(p)=>p.test === "0a" ? "py-3" : "px-3"}`;
-/**
- * Adapted (removed `classnames` dependency) from:
- * @see https://daily.dev/blog/my-tailwind-css-utility-function-for-creating-reusable-react-components-typescript-support
- *
- * See also [classname-hoc](https://www.npmjs.com/package/classname-hoc)
- */ function classedOriginal(type, ...className) {
-    return function(props) {
-        return /*#__PURE__*/ createElement(type, {
-            ...props,
-            className: [
-                props?.className || ""
-            ].concat(className).join(" ")
-        });
-    };
-}
-const ClassedOriginal = classedOriginal("div", "bg-slate-800");
-function classedBind(props) {
-    // @ts-expect-error no time now
-    const classNameImpl = props.className ? " " + props.className : "";
-    // return <this className={this.props.className + classNameImpl} {...props} />;
-    return /*#__PURE__*/ createElement(this.props.as || this.type, {
-        ...props,
-        className: this.props.className + classNameImpl
-    }, // @ts-expect-error no time now
-    props.children);
-}
-const ClassedBind = classedBind.bind(/*#__PURE__*/ _jsx("div", {
-    as: "h2",
-    className: "bg-slate-800"
-}));
-function classedDynamic(ComponentFn) {
-    return function(propsImplementation) {
-        const { props, type } = ComponentFn(propsImplementation);
-        const classNameDefault = props.className ? " " + props.className : "";
-        return /*#__PURE__*/ createElement(props.as || type, {
-            ...props,
-            ...propsImplementation,
-            className: propsImplementation?.className + classNameDefault
-        });
-    };
-}
-const ClassedDynamicIgnoringProps = classedDynamic(()=>/*#__PURE__*/ _jsx("div", {
-        as: "h2",
-        className: "bg-slate-800"
-    }));
-const ClassedDynamicUsingProps = classedDynamic((p)=>{
-    return /*#__PURE__*/ _jsx("div", {
-        as: "h2",
-        className: `bg-slate-800 ${p?.test === "3" ? "py-3" : "px-3"}`
-    });
-});
-// type ExtractComponent<ComponentString extends string> =
-//   ComponentString extends `<${infer ComponentName} class="${infer ClassNames}`
-//     ? { name: ComponentName; className: ClassNames }
-//     : { error: "Cannot parse Component string" };
-// type ExtractedComponent<T extends string> = ExtractComponent<T>;
-function classedTaggedStatic(value = "") {
-    // @ts-expect-error we rely on correct implementation and assume it always matches
-    const componentName = value.match(/<(.*?)\s/)[1];
-    // @ts-expect-error we rely on correct implementation and assume it always matches
-    const classDefault = value.match(/class="(.+)/)[1];
-    return function(props) {
-        // @ts-expect-error no time now
-        const classCustom = props?.className ? " " + props?.className : "";
-        return /*#__PURE__*/ createElement(componentName, {
-            ...props,
-            className: classDefault + classCustom
-        });
-    }; /*  as Component; */ 
-}
-const ClassedTaggedStatic = classedTaggedStatic(`<div class="bg-teal-400`);
-export default {
-    // component: KoineDialog,
-    title: "Helpers/classed"
-};
-const Template = (args)=>{
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx(Classed, {
-                className: "text-yellow-200",
-                test: "0a",
-                children: "Classed taller"
-            }),
-            /*#__PURE__*/ _jsx(Classed, {
-                className: "text-yellow-200",
-                test: "0b",
-                children: "Classed wider"
-            }),
-            /*#__PURE__*/ _jsx(ClassedOriginal, {
-                className: "text-white",
-                children: "ClassedOriginal"
-            }),
-            /*#__PURE__*/ _jsx(ClassedBind, {
-                className: "text-white",
-                children: "ClassedBind"
-            }),
-            /*#__PURE__*/ _jsx(ClassedDynamicIgnoringProps, {
-                className: "text-gray-300",
-                test: "2",
-                children: "ClassedDynamicIgnoringProps"
-            }),
-            /*#__PURE__*/ _jsx(ClassedDynamicUsingProps, {
-                className: "text-gray-600",
-                test: "3",
-                children: "ClassedDynamicUsingProps"
-            }),
-            /*#__PURE__*/ _jsx(ClassedTaggedStatic, {
-                className: "text-gray-600",
-                children: "ClassedTaggedStatic"
-            })
-        ]
-    });
-};
-export const Playground = Template.bind({});
-Playground.args = {};

package/helpers/createUseMediaQueryWidth.mjs

@@ -1,178 +0,0 @@
-import { useState } from "react";
-import getMediaQueryWidthResolvers from "@koine/utils/getMediaQueryWidthResolvers";
-import isUndefined from "@koine/utils/isUndefined";
-import useIsomorphicLayoutEffect from "../hooks/useIsomorphicLayoutEffect";
-/**
- * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
- *
- * @param customBreakpoints
- * @returns
- */ export function createUseMediaQueryWidth(customBreakpoints) {
-    const queryResolvers = getMediaQueryWidthResolvers(customBreakpoints);
-    return function useMediaQueryWidth(media, serverValue) {
-        const definition = media.substring(1);
-        let [rule, ruleBreakpoint] = definition.split("-");
-        if (isUndefined(ruleBreakpoint)) {
-            ruleBreakpoint = rule;
-        }
-        if (isUndefined(rule)) {
-            rule = "min";
-        }
-        // with the hook creator approach these breakpoint types cannot be deduced
-        // const [br1, br2] = ruleBreakpoint.split("-") as Split<
-        //   typeof ruleBreakpoint,
-        //   "-"
-        // >;
-        const [br1, br2] = ruleBreakpoint.split("_");
-        const query = queryResolvers[rule](br1, br2);
-        const [matches, setMatches] = useState(isUndefined(serverValue) ? null : serverValue);
-        useIsomorphicLayoutEffect(()=>{
-            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;
-    };
-}
-export default createUseMediaQueryWidth; //// without creator it would be:
- //// ---------------------------------------------------------------------------
- // import { useState, useIsomorphicLayoutEffect, useMemo } from "react";
- // import type { Split } from "@koine/utils";
- // import isBrowser from "@koine/utils/isBrowser";
- // import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
- // import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect"
- // type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
- // type Breakpoints = Record<Breakpoint, number>;
- // type MediaQuery =
- //   | `max:${Breakpoint}`
- //   | `min:${Breakpoint}`
- //   | `down:${Breakpoint}`
- //   | `up:${Breakpoint}`
- //   | `between:${Breakpoint}-${Breakpoint}`
- //   | `only:${Breakpoint}`;
- // const breakpoints: Breakpoints = {
- //   xs: 0,
- //   ...themeBreakpoints,
- // };
- // const sortedBreakpointsNames = (
- //   Object.keys(breakpoints).map((key) => {
- //     const br = key as keyof typeof breakpoints;
- //     return [br, breakpoints[br]];
- //   }) as [Breakpoint, number][]
- // )
- //   .sort((a, b) => a[1] - b[1])
- //   .map((item) => item[0]);
- // const getNextBreakpoint = (breakpoint: Breakpoint) => {
- //   const index = sortedBreakpointsNames.indexOf(breakpoint);
- //   return sortedBreakpointsNames[index + 1];
- // };
- // /**
- //  * It behaves the same as `(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`.
- //  */
- // const min = (br: Breakpoint) => `(min-width: ${breakpoints[br]}px)`;
- // /**
- //  * It behaves the same as `(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`.
- //  */
- // const max = (br: Breakpoint) => `(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: Breakpoint) => {
- //   const brNext = getNextBreakpoint(br);
- //   // TODO: if br does not exists otherwise throw Error
- //   return brNext && `(max-width: ${breakpoints[brNext] - 0.02}px)`;
- // };
- // /**
- //  * Media query between the two given breakpoints
- //  */
- // const between = (br1: Breakpoint, br2?: Breakpoint) => {
- //   return br2
- //     ? `(min-width: ${breakpoints[br1]}px) and (max-width: ${
- //         breakpoints[br2] - 0.02
- //       }px)`
- //     : min(br1);
- // };
- // /**
- //  * Media query to apply from the given breakpoint until the next, just for its
- //  * full range
- //  */
- // const only = (br: Breakpoint) => {
- //   const brNext = getNextBreakpoint(br);
- //   return brNext ? between(br, brNext) : min(br);
- // };
- // const queryResolvers = {
- //   max,
- //   min,
- //   down,
- //   up,
- //   between,
- //   only,
- // };
- // export function useMqWidth(media: MediaQuery) {
- //   const [rule = "min", ruleBreakpoint] = media.split(":") as Split<
- //     MediaQuery,
- //     ":"
- //   >;
- //   const [br1, br2] = ruleBreakpoint.split("-") as Split<
- //     typeof ruleBreakpoint,
- //     "-"
- //   >;
- //   const query = queryResolvers[rule](br1, br2);
- //   const mq = useMemo(
- //     () => (isBrowser ? window.matchMedia(query) : { matches: false }),
- //     [query]
- //   );
- //   const [matches, setMatches] = useState(mq.matches);
- //   useIsomorphicLayoutEffect(() => {
- //     const mq = window.matchMedia(query);
- //     const handleChange = (event: MediaQueryListEvent) => {
- //       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;
- // }

package/helpers/extend-component.mjs

@@ -1,13 +0,0 @@
-import React, { createElement } from "react";
-export const extendComponent = (component, defaultProps)=>{
-    // FIXME: check if we need to forwardRef or not
-    const NewComponent = (props)=>createElement(component, props);
-    // const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
-    //   (props, ref) => createElement(component, { ...props, ref })
-    // );
-    return Object.assign(NewComponent, {
-        ...defaultProps,
-        defaultProps
-    });
-};
-export default extendComponent;

package/helpers/index.mjs

@@ -1,4 +0,0 @@
-export * from "./classed";
-export * from "./createUseMediaQueryWidth";
-export * from "./extend-component";
-export * from "./mergeRefs";

package/hooks/index.mjs

@@ -1,21 +0,0 @@
-export { useAsyncFn } from "./useAsyncFn";
-export { useDateLocale } from "./useDateLocale";
-export { useFirstMountState } from "./useFirstMountState";
-export { useFixedOffset } from "./useFixedOffset";
-export { useFocus } from "./useFocus";
-export { useInterval } from "./useInterval";
-export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
-export { useKeyUp } from "./useKeyUp";
-export { useMeasure } from "./useMeasure";
-export { useMountedState } from "./useMountedState";
-export { useNavigateAway } from "./useNavigateAway";
-export { usePrevious } from "./usePrevious";
-export { usePreviousRef } from "./usePreviousRef";
-export { useScrollPosition } from "./useScrollPosition";
-export { useScrollThreshold } from "./useScrollThreshold";
-// export { useScrollTo } from "./useScrollTo";
-export { useSmoothScroll } from "./useSmoothScroll";
-export { useSpinDelay } from "./useSpinDelay";
-export { useTraceUpdate } from "./useTraceUpdate";
-export { useUpdateEffect } from "./useUpdateEffect";
-export { useWindowSize } from "./useWindowSize";

package/hooks/types.mjs

@@ -1,3 +0,0 @@
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/misc/types.ts)
- */ export { };

package/hooks/useAsyncFn.mjs

@@ -1,39 +0,0 @@
-import React, { 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
-    ];
-}
-export default useAsyncFn;