@koine/react 1.0.8 → 1.0.9

package/Typography/TypeStairs.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-export declare type TypeStairsProps = {
-    children: string;
-    limit?: number;
-};
-export declare const TypeStairs: import("react").ForwardRefExoticComponent<TypeStairsProps & import("react").RefAttributes<unknown>>;
+/// <reference types="react" />
+export declare type TypeStairsProps = {
+    children: string;
+    limit?: number;
+};
+export declare const TypeStairs: import("react").ForwardRefExoticComponent<TypeStairsProps & import("react").RefAttributes<unknown>>;

package/Typography/TypeStairs.js

@@ -41,6 +41,6 @@ function renderRow(row, rowIndex, ref) {
             if (letter !== " ") {
                 fontWeightIdx++;
             }
-            return (_jsx("span", Object.assign({ style: { fontWeight }, ref: ref }, { children: letter }), `letter-${rowIndex}-${letterIndex}`));
+            return (_jsx("span", { style: { fontWeight }, ref: ref, children: letter }, `letter-${rowIndex}-${letterIndex}`));
         }) }));
 }

package/Typography/index.d.ts

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

package/Typography/package.json

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

package/css/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../shared";
+export { KoineDialog } from "../Dialog/css/bare";

package/css/index.js

@@ -0,0 +1,30 @@
+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 "../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/css/package.json

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

package/helpers/classed.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+declare type ClassedAugmentedProps<Props> = Props & {
+    className?: string;
+    ref?: React.Ref<any>;
+};
+declare type ClassedFinalProps<Props, Component> = Component extends React.ReactHTML ? React.HTMLProps<Component> & ClassedAugmentedProps<Props> : ClassedAugmentedProps<Props>;
+/**
+ * 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 @see:
+ *
+ * - 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
+ */
+export declare function classed<Props, Component extends React.ElementType = any>(component: Component): (strings: TemplateStringsArray, ...args: string[] | ((props: Props) => string)[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<ClassedFinalProps<Props, Component>> & React.RefAttributes<Component>>;
+export {};

package/helpers/classed.js

@@ -0,0 +1,64 @@
+import { 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 @see:
+ *
+ * - 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
+ */
+export function classed(component) {
+    // @ts-expect-error nevermind for now...
+    const type = component.type || component;
+    return function (strings, ...args) {
+        const WrappedComponent = 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("$")) {
+                        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 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>;
+    };
+}

package/helpers/extend-component.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+export declare type ExtendableComponent<Props = any> = React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);
+export declare const extendComponent: <Component extends ExtendableComponent<any>, DefaultProps extends {}>(component: Component, defaultProps: DefaultProps) => ((props: React.ComponentProps<Component>) => React.FunctionComponentElement<any>) & DefaultProps & {
+    defaultProps: DefaultProps;
+};
+export interface OverridableComponents {
+    [key: string]: {
+        type: React.ElementType;
+        props: any;
+        motionable?: boolean;
+    };
+}
+/**
+ * Type to define a component that has overridable components.
+ *
+ * Each of them can define its:
+ * - `type`: either as a native HTMLElement (the props for that element will be
+ * automatically inferred) or as a custom React component
+ * - `props`: any additional custom props
+ * - `motionable`: if that component has a possible implementation with `framer-motion`,
+ * in that case we remove some HTMLAttributes props which collides with
+ * `MotionProps` from framer.
+ */
+export declare type WithComponents<Props, Components extends OverridableComponents> = Props & {
+    [Name in keyof Components]: NonNullable<Components[Name]["type"] extends keyof JSX.IntrinsicElements ? React.ElementType<Components[Name]["motionable"] extends true ? Omit<React.ComponentPropsWithoutRef<Components[Name]["type"]>, HtmlAttributesCollidingWithMotionProps> & Components[Name]["props"] : React.ComponentPropsWithoutRef<Components[Name]["type"]> & Components[Name]["props"]> : Components[Name]["type"]>;
+};
+declare type HtmlAttributesCollidingWithMotionProps = "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd";
+export {};

package/helpers/extend-component.js

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

package/helpers/index.d.ts

@@ -1 +1,3 @@
-export declare function useScrollTo(id?: string, offset?: number): void;
+export * from "./classed";
+export * from "./extend-component";
+export { type Simplify } from "type-fest";

package/helpers/index.js

@@ -1,19 +1,2 @@
-import { isBrowser } from "@koine/utils";
-import { useHeader } from "../Header";
-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 * from "./classed";
+export * from "./extend-component";

package/helpers/package.json

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

package/hooks/index.d.ts

@@ -1,5 +1,6 @@
-export * from "./useFocus";
-export * from "./usePrevious";
-export * from "./useDateLocale";
-export * from "./useTraceUpdate";
-export * from "./useWindowSize";
+export * from "./useDateLocale";
+export * from "./useFocus";
+export * from "./usePrevious";
+export * from "./useScrollPosition";
+export * from "./useTraceUpdate";
+export * from "./useWindowSize";

package/hooks/index.js

@@ -1,5 +1,7 @@
+export * from "./useDateLocale";
 export * from "./useFocus";
 export * from "./usePrevious";
-export * from "./useDateLocale";
+export * from "./useScrollPosition";
+// export * from "./useScrollTo";
 export * from "./useTraceUpdate";
 export * from "./useWindowSize";

package/hooks/package.json

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

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/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/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 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

@@ -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/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";