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

package/helpers/classed.stories.js

@@ -1,140 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck These are just wip experiments, we stick to just `./classed.tsx`
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    default: function() {
-        return _default;
-    },
-    Playground: function() {
-        return Playground;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _classed = require("./classed");
-const Classed = (0, _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__*/ (0, _react.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__*/ (0, _react.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__*/ (0, _jsxruntime.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__*/ (0, _react.createElement)(props.as || type, {
-            ...props,
-            ...propsImplementation,
-            className: propsImplementation?.className + classNameDefault
-        });
-    };
-}
-const ClassedDynamicIgnoringProps = classedDynamic(()=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-        as: "h2",
-        className: "bg-slate-800"
-    }));
-const ClassedDynamicUsingProps = classedDynamic((p)=>{
-    return /*#__PURE__*/ (0, _jsxruntime.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__*/ (0, _react.createElement)(componentName, {
-            ...props,
-            className: classDefault + classCustom
-        });
-    }; /*  as Component; */ 
-}
-const ClassedTaggedStatic = classedTaggedStatic(`<div class="bg-teal-400`);
-const _default = {
-    // component: KoineDialog,
-    title: "Helpers/classed"
-};
-const Template = (args)=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(Classed, {
-                className: "text-yellow-200",
-                test: "0a",
-                children: "Classed taller"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(Classed, {
-                className: "text-yellow-200",
-                test: "0b",
-                children: "Classed wider"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedOriginal, {
-                className: "text-white",
-                children: "ClassedOriginal"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedBind, {
-                className: "text-white",
-                children: "ClassedBind"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedDynamicIgnoringProps, {
-                className: "text-gray-300",
-                test: "2",
-                children: "ClassedDynamicIgnoringProps"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedDynamicUsingProps, {
-                className: "text-gray-600",
-                test: "3",
-                children: "ClassedDynamicUsingProps"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedTaggedStatic, {
-                className: "text-gray-600",
-                children: "ClassedTaggedStatic"
-            })
-        ]
-    });
-};
-const Playground = Template.bind({});
-Playground.args = {};

package/helpers/createUseMediaQueryWidth.js

@@ -1,193 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    createUseMediaQueryWidth: function() {
-        return createUseMediaQueryWidth;
-    },
-    default: function() {
-        return _default //// 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;
-         // }
-        ;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _react = require("react");
-const _getMediaQueryWidthResolvers = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/getMediaQueryWidthResolvers"));
-const _isUndefined = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isUndefined"));
-const _useIsomorphicLayoutEffect = /*#__PURE__*/ _interop_require_default._(require("../hooks/useIsomorphicLayoutEffect"));
-function createUseMediaQueryWidth(customBreakpoints) {
-    const queryResolvers = (0, _getMediaQueryWidthResolvers.default)(customBreakpoints);
-    return function useMediaQueryWidth(media, serverValue) {
-        const definition = media.substring(1);
-        let [rule, ruleBreakpoint] = definition.split("-");
-        if ((0, _isUndefined.default)(ruleBreakpoint)) {
-            ruleBreakpoint = rule;
-        }
-        if ((0, _isUndefined.default)(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] = (0, _react.useState)((0, _isUndefined.default)(serverValue) ? null : serverValue);
-        (0, _useIsomorphicLayoutEffect.default)(()=>{
-            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;
-    };
-}
-const _default = createUseMediaQueryWidth;

package/helpers/extend-component.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    extendComponent: function() {
-        return extendComponent;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const extendComponent = (component, defaultProps)=>{
-    // FIXME: check if we need to forwardRef or not
-    const NewComponent = (props)=>(0, _react.createElement)(component, props);
-    // const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
-    //   (props, ref) => createElement(component, { ...props, ref })
-    // );
-    return Object.assign(NewComponent, {
-        ...defaultProps,
-        defaultProps
-    });
-};
-const _default = extendComponent;

package/helpers/index.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./classed"), exports);
-_export_star._(require("./createUseMediaQueryWidth"), exports);
-_export_star._(require("./extend-component"), exports);
-_export_star._(require("./mergeRefs"), exports);

package/helpers/mergeRefs.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    mergeRefs: function() {
-        return mergeRefs;
-    },
-    default: function() {
-        return _default;
-    }
-});
-function mergeRefs(refs) {
-    return (value)=>{
-        refs.forEach((ref)=>{
-            if (typeof ref === "function") {
-                ref(value);
-            } else if (ref != null) {
-                ref.current = value;
-            }
-        });
-    };
-}
-const _default = mergeRefs;

package/hooks/index.js

@@ -1,92 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useAsyncFn: function() {
-        return _useAsyncFn.useAsyncFn;
-    },
-    useDateLocale: function() {
-        return _useDateLocale.useDateLocale;
-    },
-    useFirstMountState: function() {
-        return _useFirstMountState.useFirstMountState;
-    },
-    useFixedOffset: function() {
-        return _useFixedOffset.useFixedOffset;
-    },
-    useFocus: function() {
-        return _useFocus.useFocus;
-    },
-    useInterval: function() {
-        return _useInterval.useInterval;
-    },
-    useIsomorphicLayoutEffect: function() {
-        return _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
-    },
-    useKeyUp: function() {
-        return _useKeyUp.useKeyUp;
-    },
-    useMeasure: function() {
-        return _useMeasure.useMeasure;
-    },
-    useMountedState: function() {
-        return _useMountedState.useMountedState;
-    },
-    useNavigateAway: function() {
-        return _useNavigateAway.useNavigateAway;
-    },
-    usePrevious: function() {
-        return _usePrevious.usePrevious;
-    },
-    usePreviousRef: function() {
-        return _usePreviousRef.usePreviousRef;
-    },
-    useScrollPosition: function() {
-        return _useScrollPosition.useScrollPosition;
-    },
-    useScrollThreshold: function() {
-        return _useScrollThreshold.useScrollThreshold;
-    },
-    useSmoothScroll: function() {
-        return _useSmoothScroll.useSmoothScroll;
-    },
-    useSpinDelay: function() {
-        return _useSpinDelay.useSpinDelay;
-    },
-    useTraceUpdate: function() {
-        return _useTraceUpdate.useTraceUpdate;
-    },
-    useUpdateEffect: function() {
-        return _useUpdateEffect.useUpdateEffect;
-    },
-    useWindowSize: function() {
-        return _useWindowSize.useWindowSize;
-    }
-});
-const _useAsyncFn = require("./useAsyncFn");
-const _useDateLocale = require("./useDateLocale");
-const _useFirstMountState = require("./useFirstMountState");
-const _useFixedOffset = require("./useFixedOffset");
-const _useFocus = require("./useFocus");
-const _useInterval = require("./useInterval");
-const _useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect");
-const _useKeyUp = require("./useKeyUp");
-const _useMeasure = require("./useMeasure");
-const _useMountedState = require("./useMountedState");
-const _useNavigateAway = require("./useNavigateAway");
-const _usePrevious = require("./usePrevious");
-const _usePreviousRef = require("./usePreviousRef");
-const _useScrollPosition = require("./useScrollPosition");
-const _useScrollThreshold = require("./useScrollThreshold");
-const _useSmoothScroll = require("./useSmoothScroll");
-const _useSpinDelay = require("./useSpinDelay");
-const _useTraceUpdate = require("./useTraceUpdate");
-const _useUpdateEffect = require("./useUpdateEffect");
-const _useWindowSize = require("./useWindowSize");

package/hooks/types.js

@@ -1,6 +0,0 @@
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/misc/types.ts)
- */ "use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});

package/hooks/useAsyncFn.js

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useAsyncFn: function() {
-        return useAsyncFn;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useMountedState = require("./useMountedState");
-function useAsyncFn(fn, deps = [], initialState = {
-    loading: false
-}) {
-    const lastCallId = (0, _react.useRef)(0);
-    const isMounted = (0, _useMountedState.useMountedState)();
-    const [state, set] = (0, _react.useState)(initialState);
-    const callback = (0, _react.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
-    ];
-}
-const _default = useAsyncFn;

package/hooks/useDateLocale.js

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useDateLocale: function() {
-        return useDateLocale;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = require("react");
-function useDateLocale(locale, defaultLocale = "en") {
-    const [data, setData] = (0, _react.useState)();
-    const [current, setCurrent] = (0, _react.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.
-    (0, _react.useEffect)(()=>{
-        const importLocaleFile = async ()=>{
-            // This webpack option stops all of the date-fns files being imported and chunked.
-            // NB: this makes unnecessary numerous webpack chunks in applications
-            // that do not even use this hook, so we comment out the webpack dynamic
-            // import and its magic comment
-            // const localeToSet = await import(
-            //   /FIXME: * webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
-            //   `date-fns/locale/${locale}/index.js`,
-            // );
-            const localeToSet = await Promise.resolve(`date-fns/locale/en-US/index.js`).then((p)=>/*#__PURE__*/ _interop_require_wildcard._(require(p)));
-            setCurrent(locale || current);
-            setData(localeToSet.default);
-        // setReady(true);
-        };
-        // If the locale has not yet been loaded.
-        if (locale !== current) {
-            importLocaleFile();
-        }
-    }, [
-        locale,
-        current
-    ]);
-    return data;
-}
-const _default = useDateLocale;

package/hooks/useFirstMountState.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useFirstMountState: function() {
-        return useFirstMountState;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _react = require("react");
-function useFirstMountState() {
-    const isFirst = (0, _react.useRef)(true);
-    if (isFirst.current) {
-        isFirst.current = false;
-        return true;
-    }
-    return isFirst.current;
-}
-const _default = useFirstMountState;