@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/context/OneUIProvider.tsx

@@ -1,308 +0,0 @@
-import { JSX } from "react";
-import get from "lodash/get";
-import merge from "lodash/merge";
-import clone from "lodash/cloneDeep";
-import { Get } from "type-fest";
-import React, { ComponentProps, ReactElement, ReactNode, useMemo } from "react";
-import { createContext, PropsWithChildren, useContext } from "react";
-import { ImageScales } from "@muritavo/webpack-microfrontend-scripts/bin/types/ImageScales";
-import { UploadTask } from "firebase/storage";
-import { FieldPath } from "../type-utils";
-import useAdaptiveImage from "../hooks/ui/useAdaptiveImage";
-import Button from "../components/Button";
-import CheckBox from "../components/CheckBox";
-import Radio from "../components/Radio/Radio";
-import { FileInputViewProps } from "../components/FileInput/View/View.types";
-import {
-  AnswerByField,
-  GenericFormFieldProps,
-} from "../components/Form/v2/FormField/FormField.types";
-import { BaseQuestion } from "../components/Form/v2/Form.types";
-
-type DeepPartial<T> = {
-  [P in keyof T]?: NonNullable<T[P]> extends Function
-  ? T[P]
-  : DeepPartial<T[P]>;
-};
-
-export type OneUIContextSpecs = {
-  component: {
-    spacing: {
-      variants: {
-        [k in OnepercentUtility.UIElements.SpacingVariants]: string;
-      };
-    };
-    collapsable: {
-      className: string;
-    };
-    form: {
-      titleVariant: OnepercentUtility.UIElements.TextVariants;
-      labelVariant: OnepercentUtility.UIElements.TextVariants;
-      /** Label shown when a field is optional */
-      optionalLabel: string;
-
-      /** Label shown when a required field was not provided */
-      requiredLabel: string;
-
-      onFileUpload(questionId: string, file: File): UploadTask;
-
-      extensions?: {
-        [K in OnepercentUtility.UIElements.FormExtension["fields"]["type"]]: {
-          Input: (props: GenericFormFieldProps<K>) => ReactElement;
-          validator: (
-            answer: AnswerByField<{ type: K }>,
-            question: BaseQuestion &
-              (OnepercentUtility.UIElements.FormExtension["fields"] & {
-                type: K;
-              })
-          ) => {
-            isValid: boolean;
-            error?: string;
-          };
-        };
-      };
-    };
-    text?: {
-      className?: {
-        [k in React.ComponentProps<
-          typeof import("../components/Text")["default"]
-        >["type"]]?: string;
-      };
-      htmlTag?: {
-        [k in React.ComponentProps<
-          typeof import("../components/Text")["default"]
-        >["type"]]?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-      };
-    };
-    button?: {
-      className?: {
-        [k in NonNullable<
-          React.ComponentProps<
-            typeof import("../components/Button")["default"]
-          >["variant"]
-        >]?: string;
-      };
-      Component?: (props: ComponentProps<typeof Button>) => ReactElement;
-    };
-    input: {
-      className: string;
-      border: boolean;
-    };
-    fileInput: {
-      View: (props: FileInputViewProps) => ReactElement;
-    };
-    passwordInput: {
-      iconSrc: {
-        passwordHidden: string;
-        passwordVisible: string;
-      };
-    };
-    asyncWrapper: {
-      LoadingComponent?: () => JSX.Element;
-      messages: {
-        error: {
-          title: string;
-          retryBtn: string;
-        };
-      };
-    };
-    select: {
-      StateIndicator: (props: { open: boolean }) => JSX.Element;
-      className?: {
-        dropdown?: string;
-        item?: string;
-        selectedItem?: string;
-        input?: string;
-      };
-    };
-    header: {
-      LogoImage: () => JSX.Element;
-      MoreOptions: ({ open }: { open: boolean }) => JSX.Element;
-    };
-    table: {
-      controls: {
-        PrevPage: ({ disabled }: { disabled: boolean }) => JSX.Element;
-        NextPage: ({ disabled }: { disabled: boolean }) => JSX.Element;
-      };
-    };
-    tooltip: {
-      className?: string;
-    };
-    adaptiveDialog: {
-      dialogClassName: string;
-      backdropClassName: string;
-      variant: {
-        [k in OnepercentUtility.UIElements.AdaptiveDialogVariants]: string;
-      };
-    };
-    adaptiveSidebar: {
-      className: string;
-      controlClassName: string;
-    };
-    checkbox: {
-      Component?: (props: ComponentProps<typeof CheckBox>) => ReactElement;
-    };
-    radio: {
-      Component?: (props: ComponentProps<typeof Radio>) => ReactElement;
-    };
-  };
-  hook: {
-    ui: {
-      usePaginationControls: {
-        LeftControl: () => ReactElement;
-        RightControl: () => ReactElement;
-        className?: string;
-      };
-    };
-  };
-  state: {
-    imageScale: ImageScales;
-  };
-};
-
-type ContextConfigSpecs = DeepPartial<OneUIContextSpecs>;
-
-const Context = createContext<ContextConfigSpecs>(null as any);
-
-function OneUIProvider({
-  children,
-  config,
-}: PropsWithChildren<{ config: ContextConfigSpecs }>) {
-  const prevCtx = useContext(Context);
-  const scale = useAdaptiveImage();
-  const mergedConfig = useMemo(() => {
-    return merge(clone(prevCtx), config, {
-      state: {
-        imageScale: scale,
-      },
-    });
-  }, [prevCtx, config, scale]);
-
-  return <Context.Provider value={mergedConfig}>{children}</Context.Provider>;
-}
-
-export default OneUIProvider;
-
-function pathToJson(
-  path: string,
-  key?: string | Symbol,
-  exampleConfig = "THE_MISSING_CONFIG"
-) {
-  if (!key) {
-    key = path.split(".").slice(-1)[0];
-    path = path.replace(`.${key}`, "");
-  }
-
-  return path
-    .split(".")
-    .concat(key as string)
-    .reduce((result, key, idx, arr) => {
-      (arr.slice(0, idx).reduce((r, k) => (r as any)[k], result) as any)[key] =
-        idx === arr.length - 1 ? exampleConfig : {};
-      return result;
-    }, {});
-}
-
-function ErrorWrapper(
-  originalObject: any,
-  path: string = "config"
-): typeof Proxy {
-  return new Proxy(
-    typeof originalObject !== "object" ? {} : originalObject || {},
-    {
-      get(_target, key) {
-        if (key === Symbol.toPrimitive) {
-          return () => _target[key];
-        }
-        try {
-          const value = originalObject[key];
-          if (typeof value === "undefined") return undefined;
-          if (typeof value === "object")
-            return ErrorWrapper(value, [path, key].filter(Boolean).join("."));
-          return value;
-        } catch (e) {
-          const pathJson = pathToJson(path, key);
-          throw new Error(
-            `A component is using the UI config ${[path, key].join(".")}.
-
-Please define it using:
-import OneUIProvider from "@onepercent/one-ui/dist/context/OneUIProvider";
-
-  ...
-${`<OneUIProvider config={${JSON.stringify(pathJson, null, 4)}}>
-...
-</OneUIProvider>`.replace(/[ ]/g, "-")}`
-          );
-        }
-      },
-    }
-  );
-}
-
-export function useOneUIContext() {
-  const context = useContext(Context);
-
-  if (process.env.NODE_ENV === "development")
-    return ErrorWrapper(context) as unknown as OneUIContextSpecs;
-
-  return context as OneUIContextSpecs;
-}
-
-export function useOneUIView<P extends FieldPath<OneUIContextSpecs>>(
-  oneuiConfigPath: P,
-  componentName: string
-) {
-  const providedValue = useOneUIConfig(oneuiConfigPath);
-  if (!providedValue) {
-    throw new Error(`The component ${componentName} requires a view to be set on OneUI initialization
-
-Views ready for use with this component shall be available at:
-import SomeView from "@onepercentio/one-ui/dist/components/${componentName}/View/SomeView";
-    
-Please define it using:
-import OneUIProvider from "@onepercentio/one-ui/dist/context/OneUIProvider";
-
-  ...
-${`<OneUIProvider config={${JSON.stringify(
-      pathToJson(oneuiConfigPath, undefined, "SomeView"),
-      null,
-      4
-    )}}>
-...
-</OneUIProvider>`.replace(/[ ]/g, "-")}`);
-  }
-
-  return providedValue;
-}
-
-export function useOneUIConfig<
-  P extends FieldPath<OneUIContextSpecs>,
-  T extends Get<OneUIContextSpecs, P>
->(prop: P, defaultValue?: T): NonNullable<Get<OneUIContextSpecs, P>> {
-  const context = useContext(Context);
-  if (process.env.NODE_ENV === "development") {
-    const val = useMemo(() => {
-      return get(context, prop);
-    }, [context, prop]);
-    if (
-      typeof val === "string" ||
-      typeof val === "function" ||
-      prop.endsWith(".Component") ||
-      prop.endsWith(".View")
-    )
-      return (val as any) || defaultValue;
-
-    if (typeof val === "boolean") return val as any;
-    return ErrorWrapper(val || defaultValue) as unknown as NonNullable<T>;
-  }
-  const value = useMemo(() => {
-    return get(context, prop);
-  }, [context, prop]);
-  return value || defaultValue;
-}
-
-export function useCurrentImageScale() {
-  const context = useContext(Context);
-
-  return context.state!.imageScale!;
-}

package/src/hooks/logs/useDependencyChangeDetection.ts

@@ -1,25 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export default function useDependencyChangeDetection(
-  tag: string,
-  dependencyArray: any[]
-) {
-  for (let dependencyIndex in dependencyArray) {
-    const prevValue = useRef<any>(undefined);
-    useEffect(() => {
-      if (!prevValue.current) return;
-      if (process.env.NODE_ENV === "development")
-        require('../../models/DebugLogger').default(
-          `${useDependencyChangeDetection.name}:${tag}`,
-          `Element index ${dependencyIndex} (prev: ${JSON.stringify(
-            prevValue.current
-          )}) (new: ${JSON.stringify(
-            dependencyArray[dependencyIndex]
-          )}) has changed`
-        );
-    }, [dependencyArray[dependencyIndex]]);
-    useEffect(() => {
-      prevValue.current = dependencyArray[dependencyIndex];
-    }, [dependencyArray[dependencyIndex]]);
-  }
-}

package/src/hooks/logs/useIsMounting.ts

@@ -1,7 +0,0 @@
-import { useEffect } from "react";
-
-export default function useIsMounting(tag: string) {
-    useEffect(() => {
-        console.log(tag + " is mounting")
-    }, []);
-}

package/src/hooks/persistence/useLocalStorage.ts

@@ -1,45 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-const DUD = typeof "";
-type AvailablePrimitives = typeof DUD;
-const toString = (val: any) => {
-  switch (typeof val) {
-    case "boolean":
-      return !val ? "0" : "1";
-    case "string":
-      return val;
-    case "object":
-      return JSON.stringify(val);
-    default:
-      throw new Error("Doesn't know how to handle type " + typeof val);
-  }
-};
-const fromString = (type: AvailablePrimitives, value: string) => {
-  switch (type) {
-    case "boolean":
-      return value === "1";
-    case "string":
-      return value;
-    case "object":
-      return JSON.parse(value);
-    default:
-      throw new Error("Doesn't know how to handle type " + type);
-  }
-};
-export default function useLocalStorage<T extends any>(
-  id: string,
-  defaultValue: Exclude<T, undefined>
-) {
-  const [val, setVal] = useState<T>(() => {
-    const persistedValue = localStorage.getItem(id);
-    if (persistedValue === null) return defaultValue as T;
-    return fromString(typeof defaultValue, persistedValue) as T;
-  });
-  useEffect(() => {
-    if (val !== defaultValue) localStorage.setItem(id, toString(val));
-  }, [val]);
-  const del = useCallback(() => {
-    localStorage.removeItem(id);
-    setVal(defaultValue);
-  }, []);
-  return [val, setVal, del] as const;
-}

package/src/hooks/shims/ObjectWatchShim.ts

@@ -1,56 +0,0 @@
-// @ts-nocheck
-// object.watch
-if (!Object.prototype.watch) {
-  Object.prototype.watch = function (propsToWatchFor, handler) {
-    (this._handlers || (this._handlers = [])).push(handler)
-    propsToWatchFor.forEach((prop) => {
-      var oldval = this[prop],
-        newval = oldval,
-        getter = function () {
-          return newval;
-        },
-        setter = function (val) {
-          if (this._watchTimer) clearTimeout(this._watchTimer);
-          this._watchTimer = setTimeout(() => {
-            for (let handler of this._handlers)
-              handler.call();
-            clearTimeout(this._watchTimer);
-            delete this._watchTimer;
-          }, 0);
-          oldval = newval;
-          newval = val;
-          return true;
-        };
-      try {
-
-        if (delete this[prop]) {
-          // can't watch constants
-          if (Object.defineProperty) {
-            // ECMAScript 5          
-            Object.defineProperty(this, prop, {
-              get: getter,
-              set: setter,
-            });
-          }
-          else if (
-            Object.prototype.__defineGetter__ &&
-            Object.prototype.__defineSetter__
-          ) {
-            // legacy
-            Object.prototype.__defineGetter__.call(this, prop, getter);
-            Object.prototype.__defineSetter__.call(this, prop, setter);
-          }
-        }
-      } catch (e) { }
-    });
-
-    return () => {
-      this._handlers.splice(this._handlers.indexOf(handler), 1);
-    };
-  };
-  Object.defineProperty(Object.prototype, 'watch', {
-    enumerable: false,
-    configurable: true
-  });
-}
-export {}

package/src/hooks/ui/useAdaptiveImage.tsx

@@ -1,36 +0,0 @@
-import { ImageScales } from "@muritavo/webpack-microfrontend-scripts/bin/types/ImageScales";
-import throttle from "lodash/throttle";
-import { useEffect, useState } from "react";
-
-/**
- * This hooks is built over the implementation of this loader https://github.com/Muritavo/webpack-microfrontend-scripts#imageresolutionoptimizer
- *
- */
-function useAdaptiveImage(): ImageScales {
-  function ScaleFromCurrentWidth() {
-    if ((window as any).PRERENDER) return ImageScales.LARGE;
-    const width = window.visualViewport!.width;
-    if (width < 480) return ImageScales.SMALL;
-    if (width < 800) return ImageScales.NORMAL;
-    if (width < 1280) return ImageScales.BIG;
-    if (width < 1920) return ImageScales.LARGE;
-    else return ImageScales.EXTRA_LARGE;
-  }
-
-  const [currentScale, setCurrentScale] = useState<ImageScales>(() =>
-    ScaleFromCurrentWidth()
-  );
-
-  useEffect(() => {
-    const onResizeThrottle = throttle(() => {
-      setCurrentScale(ScaleFromCurrentWidth());
-    }, 1000 / 4);
-    const onResize = () => onResizeThrottle();
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
-  }, []);
-
-  return currentScale;
-}
-
-export default useAdaptiveImage

package/src/hooks/ui/useAlternating.tsx

@@ -1,22 +0,0 @@
-import { useEffect, useState } from "react";
-
-/**
- * Receives a list and keeps alternating between the list elements every 5 seconds
- */
-export default function useAlternating<X>(list: X[]) {
-  const [current, setCurrent] = useState(list[0]);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrent((prev) => {
-        const currentIndex = list.indexOf(prev);
-        if (list[currentIndex + 1]) return list[currentIndex + 1];
-        else return list[0];
-      });
-    }, 5000);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return current;
-}

package/src/hooks/ui/useBreakpoint.tsx

@@ -1,21 +0,0 @@
-import throttle from "lodash/throttle";
-import { useEffect, useState } from "react";
-
-/**
- * A hook to trigger changes when the screen resizes
- * @returns If the current resolution is lower than the specified width
- */
-export default function useBreakpoint(breakInto: number) {
-  const [lowerThanBreakpoint, setIsLowerThanBreakpoint] = useState(
-    () => window.visualViewport!.width < breakInto
-  );
-  useEffect(() => {
-    const onResizeThrottle = throttle(() => {
-      setIsLowerThanBreakpoint(window.visualViewport!.width < breakInto);
-    }, 1000 / 4);
-    const onResize = () => onResizeThrottle();
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
-  }, []);
-  return lowerThanBreakpoint;
-}

package/src/hooks/ui/useCustomScrollbar.module.scss

@@ -1,20 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-.scrollBarRoot {
-  &,
-  &.propagate * {
-    &::-webkit-scrollbar {
-      background-color: transparent;
-      height: 8px;
-      width: 8px;
-      z-index: 1000;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--scrollbar-color, $primaryColor);
-      width: 8px;
-      height: 8px;
-      border-radius: 4px;
-    }
-  }
-}

package/src/hooks/ui/useCustomScrollbar.tsx

@@ -1,22 +0,0 @@
-import { useEffect, useLayoutEffect, useRef } from "react";
-import Styles from "./useCustomScrollbar.module.scss";
-
-export default function useCustomScrollBar({
-  color = "",
-  propagate = false
-}: { color?: string, propagate?: boolean } | undefined = {}) {
-  const elRef = useRef<HTMLDivElement>(null);
-
-  useLayoutEffect(() => {
-    elRef.current!.style.setProperty("--scrollbar-color", color);
-    elRef.current!.classList.add(Styles.scrollBarRoot);
-    if (propagate) {
-        elRef.current!.classList.add(Styles.propagate);
-    }
-  }, []);
-
-  return {
-    /** The element that dhould have a custom scrollbar */
-    elRef,
-  };
-}

package/src/hooks/ui/useEffectIf.ts

@@ -1,11 +0,0 @@
-import { useEffect } from "react";
-
-export default function useEffectIf(
-  effect: Parameters<typeof useEffect>[0],
-  depsToCheck: any[]
-) {
-  useEffect(() => {
-    const someUndefined = depsToCheck.some((dep) => !dep);
-    if (!someUndefined) return effect();
-  }, depsToCheck);
-}

package/src/hooks/ui/useMouseHover.tsx

@@ -1,26 +0,0 @@
-import { useMemo, useState } from "react";
-import ownEvent from "../../utils/ownEvent";
-
-/**
- * A small hook for binding the hover control over some HTML element
- * @returns uiEvents: The events to spread to the html element hovering: the hover state
- */
-export default function useMouseHover() {
-  const [hovering, setHovering] = useState(false);
-  const uiEvents = useMemo(
-    () => ({
-      onMouseEnter: ownEvent<MouseEvent>(() => {
-        setHovering(true);
-      }),
-      onMouseOut: ownEvent<MouseEvent>(() => {
-        setHovering(false);
-      }),
-    }),
-    []
-  );
-
-  return {
-    uiEvents,
-    hovering,
-  };
-}

package/src/hooks/ui/usePaginationControls.module.scss

@@ -1,16 +0,0 @@
-.control {
-  position: absolute;
-  top: 0px;
-  bottom: 0px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.right {
-  right: 0px;
-}
-
-.left {
-  left: 0px;
-}