@onepercentio/one-ui 0.28.7 → 0.28.9

package/src/hooks/useAsyncControl.ts

@@ -0,0 +1,101 @@
+import { SetStateAction, useCallback, useMemo, useState } from "react";
+import { Primitive } from "type-fest";
+
+type Arr<X> = [X, React.Dispatch<SetStateAction<X>>];
+export type FunctionMap = {
+  [f: string]: ((...args: any[]) => Promise<any>) | Object | Primitive;
+};
+export type Control<E extends any = any> = {
+  error?: E;
+  loading: boolean;
+};
+export function useRawAsynControl<E = any, F extends FunctionMap = {}>(
+  functionsToWrap: F | undefined,
+  [error, setError]: Arr<E | undefined>,
+  [loading, setLoading]: Arr<boolean>
+) {
+  const _process = useCallback(async (asyncFn: (() => Promise<any>) | Promise<any>) => {
+    try {
+      setLoading(true);
+      setError(undefined);
+      if (asyncFn instanceof Promise) await asyncFn;
+      else return await asyncFn();
+    } catch (e) {
+      if (process.env.NODE_ENV === "development") console.error(e);
+      setError(e as E);
+      throw e;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const { functionsToMemoize, other } = Object.entries(
+    functionsToWrap || {}
+  ).reduce(
+    (r, [k, func]) => {
+      return {
+        ...r,
+        ...(typeof func === "function"
+          ? {
+              functionsToMemoize: {
+                ...r.functionsToMemoize,
+                [k]: func,
+              },
+            }
+          : {
+              other: {
+                ...r.other,
+                [k]: func,
+              },
+            }),
+      };
+    },
+    {
+      functionsToMemoize: {},
+      other: {},
+    } as {
+      functionsToMemoize: F;
+      other: F;
+    }
+  );
+
+  return {
+    process: _process,
+    loading,
+    error,
+    setError,
+    setLoading,
+    ...other,
+    ...Object.entries(functionsToMemoize).reduce(
+      (r, [k, v]) => ({
+        ...r,
+        [k]: useMemo(
+          () =>
+            (...args: any[]) =>
+              _process(() => (v as any)(...args)),
+          [v]
+        ),
+      }),
+      {} as F
+    ),
+  };
+}
+
+export function useAsyncControl<
+  E = any,
+  F extends {
+    [f: string]: ((...args: any[]) => Promise<any>) | Object | Primitive;
+  } = {}
+>(functionsToWrap?: F) {
+  const error = useState<E | Error>();
+  const loading = useState<boolean>(false);
+
+  return useRawAsynControl(functionsToWrap, error, loading);
+}
+
+/**
+ * This hook provides a way to handle async operations storing the loading state, or the error when it fails, it does not store information returned from the functions.
+ * @param functionsToWrap The functions to wrap in control.
+ * @returns
+ */
+export default useAsyncControl;

package/src/hooks/useContainedRepositioning.ts

@@ -0,0 +1,110 @@
+import debounce from "lodash/debounce";
+import { useEffect, useRef } from "react";
+
+/**
+ * This hook takes an html and checks if its outside its parent
+ * If it is, it should move it so it can be totally visible inside the container
+ */
+export default function useContainedRepositioning(
+  focused: boolean,
+  getParent: (el: HTMLElement) => HTMLElement,
+  {
+    offset = 16,
+    scale = 1,
+    offsetLimit = Number.POSITIVE_INFINITY,
+  }: {
+    /** The offset the element will be moved by from the closest bound */
+    offset?: number;
+
+    /** The scaled element width to be considered. usefull for when the focused element will change size */
+    scale?: number;
+
+    /** Limit offset */
+    offsetLimit?: number;
+  } = {}
+) {
+  const elementToCheck = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = elementToCheck.current;
+    if (!el) return;
+
+    const curr = el;
+    const relativeParent = getParent(curr);
+
+    if (process.env.NODE_ENV === "development") {
+      if (window.getComputedStyle(el).position !== "relative")
+        throw new Error(
+          "The target element MUST have position relative so it can be moved"
+        );
+      if (window.getComputedStyle(relativeParent).position !== "relative")
+        throw new Error(
+          "The relative to element MUST have position relative so it can calculate correctly the target position"
+        );
+    }
+
+    if (focused) {
+      curr.style.right = `0px`;
+      const reposition = debounce(() => {
+        const alreadyRight = Number(curr.style.right.replace("px", ""));
+        const limitOffset =
+          relativeParent.scrollLeft + relativeParent.clientWidth;
+        const elWidth = curr.clientWidth * scale;
+        const offsetOfScale = (elWidth - curr.clientWidth) / 2;
+        const cardLimit =
+          curr.offsetLeft - offsetOfScale + alreadyRight + elWidth;
+        const exceedingSpace = cardLimit - limitOffset;
+        const offsetLeft =
+          curr.offsetLeft -
+          offsetOfScale +
+          alreadyRight -
+          relativeParent.scrollLeft;
+        const isOverflowedRight = exceedingSpace > 0;
+        const isOverflowedLeft = offsetLeft < 0;
+        const limit = exceedingSpace + -offsetLeft;
+
+        if (isOverflowedRight) {
+          const val = Math.min(
+            exceedingSpace - -Math.min(Math.abs(limit / 2), offset),
+            offsetLimit
+          );
+          curr.style.right = `${val}px`;
+        }
+        if (isOverflowedLeft) {
+          const val = Math.max(
+            offsetLeft - Math.min(Math.abs(limit) / 2, offset),
+            -offsetLimit
+          );
+          curr.style.right = `${val}px`;
+        }
+        if (isOverflowedLeft || isOverflowedRight) {
+          curr.style.zIndex = "1000";
+        }
+      }, 50);
+      reposition();
+      reposition.flush();
+
+      relativeParent.addEventListener("scroll", reposition, {
+        passive: true
+      });
+      return () => {
+        reposition.cancel();
+        relativeParent.removeEventListener("scroll", reposition);
+        el.style.right = `0px`;
+        const restore = ({ propertyName, currentTarget }: TransitionEvent) => {
+          const targetTransformation = window.getComputedStyle(
+            currentTarget as HTMLDivElement
+          ).right;
+          if (propertyName === "right" && targetTransformation === "0px") {
+            curr.style.zIndex = "";
+            el.removeEventListener("transitionend", restore);
+          }
+        };
+        el.addEventListener("transitionend", restore);
+      };
+    }
+  }, [focused]);
+
+  return {
+    elementToCheck,
+  };
+}

package/src/hooks/useCustomHistory.ts

@@ -0,0 +1,14 @@
+import { useHistory, useLocation } from "react-router-dom"
+import { CustomState } from "../context/CustomBrowserRouter";
+
+export default function useCustomHistory() {
+    const customHistory = useHistory();
+    const { state } = useLocation<CustomState | undefined>();
+    return {
+        ...customHistory,
+        goBackWithFallback(fallbackRoute: string) {
+            if (state?.internalNavigation) customHistory.goBack();
+            else customHistory.push(fallbackRoute);
+        }
+    }
+}

package/src/hooks/useElementFit.ts

@@ -0,0 +1,82 @@
+import { RefObject, useEffect, useLayoutEffect, useRef, useState } from "react";
+
+/**
+ * This hook receives a base width of an element and returns how much items fit **vertically** inside the referenced html element
+ *
+ * @param baseWidth The base width of each element
+ */
+export default function useElementFit(
+  baseWidth: number,
+  baseHeight?: number
+): {
+  /** The amount of items that are able to fit in the available width */
+  howManyItemsFit?: number;
+  /** The amount of items that are able to fit in the available visible space + a row more so it can be scrollable */
+  howManyItemsFitWithExtraRow?: number;
+  /** How many items would fit a single row */
+  howManyItemsByRow?: number;
+  /** How many items until it overflows width */
+  anItemMore?: number;
+
+  /** The ref to be sent to the element that will receive the items */
+  ref: RefObject<HTMLDivElement | undefined>;
+} {
+  const ref = useRef<HTMLDivElement>(undefined);
+  function calculateDimension() {
+    function howManyItemsStackVertically() {
+      if (!ref.current || baseHeight === undefined) return 1;
+      return Math.floor(ref.current!.clientHeight / baseHeight);
+    }
+    if ((window as any).PRERENDER)
+      return {
+        howManyItemsWillBeVisible: 4,
+        byRow: 4,
+      };
+
+    const width = ref.current?.clientWidth || window.visualViewport!.width;
+    const maxItemsHorizontally = Math.floor(width / baseWidth) || 1;
+
+    if (process.env.NODE_ENV === "development")
+      require("../models/DebugLogger").default(
+        `${useElementFit.name}:clientWidth`,
+        ref.current?.clientWidth
+      );
+    return {
+      howManyItemsWillBeVisible:
+        maxItemsHorizontally * howManyItemsStackVertically(),
+      byRow: maxItemsHorizontally,
+    };
+  }
+  const [itemsToShow, setItemsToShow] = useState<
+    ReturnType<typeof calculateDimension> | undefined
+  >(
+    (window as any).PRERENDER
+      ? {
+          byRow: 4,
+          howManyItemsWillBeVisible: 4,
+        }
+      : undefined
+  );
+  useEffect(() => {
+    setItemsToShow(calculateDimension());
+    function onResize() {
+      setItemsToShow(calculateDimension());
+    }
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  return {
+    howManyItemsFit: itemsToShow?.howManyItemsWillBeVisible,
+    howManyItemsFitWithExtraRow: itemsToShow
+      ? itemsToShow.howManyItemsWillBeVisible + itemsToShow.byRow
+      : undefined,
+    anItemMore: itemsToShow
+      ? itemsToShow.howManyItemsWillBeVisible + 1
+      : undefined,
+    howManyItemsByRow: itemsToShow?.byRow,
+    ref,
+  };
+}

package/src/hooks/useFirestoreWatch.ts

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import { DocumentChangeType, Unsubscribe } from "firebase/firestore";
+
+type SnapshotFactoryCb<D extends any> = (changes: {
+    doc: D,
+    type: DocumentChangeType
+}[]) => void
+
+export type SnapshotFactoryReturn<D extends { id: string }> = (cb: SnapshotFactoryCb<D>) => Unsubscribe
+
+export default function useFirestoreWatch<D extends { id: string }, P extends any[]>(queryFactory: (...params: P) => SnapshotFactoryReturn<D>, params: P) {
+    const [docsList, updateList] = useState<D[]>();
+
+    useEffect(() => {
+        const unsub = queryFactory(...params)((changes) => {
+            updateList((prevList = []) => {
+                for (let docChange of changes) {
+                    if (docChange.type === undefined) {
+                      const existing = prevList.find((f) => f.id === docChange.doc.id);
+                      if (existing) docChange.type = "modified"
+                      else docChange.type = "added"
+                    }
+                    switch (docChange.type) {
+                        case 'added':
+                            if (!prevList.find((f) => f.id === docChange.doc.id)) {
+                                prevList.unshift(docChange.doc)
+                            }
+                            break
+                        case 'modified':
+                            prevList = prevList!.map((item) => {
+                                if (item.id === docChange.doc.id)
+                                    for (let key in docChange.doc) {
+                                        item[key] = docChange.doc[key];
+                                    }
+                                return item
+                            })
+                            break
+                        case 'removed':
+                            prevList = prevList!.filter(
+                                (item) => item.id !== docChange.doc.id
+                            )
+                            break
+                    }
+                }
+
+                return [...prevList]
+            })
+
+        })
+        return unsub;
+    }, params);
+
+    return docsList;
+}

package/src/hooks/useForm.ts

@@ -0,0 +1,49 @@
+import { Context, useMemo, useState } from "react"
+import { BaseForm, FieldDefinition, FieldTypes } from "../components/Form/Form";
+
+type Intermediary<F extends BaseForm> = {
+    form: F,
+    formValidation: {
+        [k in keyof F]: string
+    } & { isValid: string | true },
+    set: <K extends keyof F>(k: K, value: F[K]) => void
+}
+export type FormControls<C extends FormConfig<any>> = Intermediary<C extends FormConfig<infer F> ? F : never>
+export type FormConfig<T extends BaseForm> = { [k in keyof T]: FieldDefinition<T, k, FieldTypes> };
+export default function useContextForm<T extends BaseForm>(
+    config: FormConfig<T>,
+    initialState: T
+): FormControls<FormConfig<T>> {
+    const [form, setForm] = useState<Partial<T>>(initialState);
+    const isValid = useMemo(
+        () =>
+            !Object.keys(config).some(
+                (a) => typeof config[a].validator(form[a], form) === "string"
+            ),
+        [form]
+    );
+
+    const _setFormField: <K extends keyof T>(k: K, value: T[K]) => void = (key, value) => {
+        setForm(prev => ({
+            ...prev,
+            [key]: value
+        }))
+    }
+
+    const validFormFields = useMemo(() => {
+        return Object.keys(config).reduce((result, field: keyof T) => {
+            const fieldConfig = config[field];
+            const invalidMessage = fieldConfig.validator(form[field], form);
+            return {
+                ...result,
+                [field]: invalidMessage
+            }
+        }, { isValid } as { [k in keyof T]: string | true } & { isValid: boolean })
+    }, [form, isValid]);
+
+    return {
+        form: form,
+        formValidation: validFormFields,
+        set: _setFormField
+    } as any
+}

package/src/hooks/useFreeze.ts

@@ -0,0 +1,12 @@
+import { useRef } from "react";
+
+/**
+ * This hook pipes a data and when it is set to a falsy value ("", undefined, null, 0),
+ * it returns the previous valid value
+ */
+export default function useFreeze<T>(something: T) {
+  const currChildOrPrev = useRef<T>(undefined);
+  currChildOrPrev.current =
+    something === undefined ? currChildOrPrev.current : something;
+  return currChildOrPrev.current;
+}

package/src/hooks/useHero.module.scss

@@ -0,0 +1,41 @@
+@import "../assets/styles/index.scss";
+
+$timing: cubic-bezier(0.5, -0.45, 0.44, 1.37);
+// $timing: cubic-bezier(0.73, -0.49, 0.16, 1.4);
+
+.acceleration {
+  --animation--speed-fast: 1s;
+  animation-name: acceleration;
+  animation-duration: var(--animation--speed-fast);
+  animation-timing-function: $timing;
+  transition-timing-function: $timing !important;
+  transform-origin: var(--origin-1);
+}
+
+@keyframes acceleration {
+  0% {
+    transform: rotateY(0deg);
+  }
+  10% {
+    transform-origin: var(--origin-1);
+    transform: var(--stage-1);
+  }
+
+  70% {
+    transform: var(--stage-1);
+    transform-origin: var(--origin-1);
+  }
+  85% {
+    transform-origin: var(--origin-2);
+    transform: var(--stage-2);
+  }
+  100% {
+    transform: rotateY(0deg);
+  }
+}
+
+.component:not([data-hero-clone]) {
+  transition: height $fast linear, opacity $fast linear, min-height $fast linear,
+    max-height $fast linear !important;
+  overflow: hidden;
+}