@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/hooks/useAsyncControl.ts

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

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

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

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

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

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

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

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