@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/components/CodeInput/CodeInput.tsx

@@ -1,84 +0,0 @@
-import React, { useEffect, useMemo, useRef } from "react";
-import { Uri } from "monaco-editor";
-import Styles from "./CodeInput.module.scss";
-import Loader from "../Loader";
-import useModule from "../../hooks/utility/useModule";
-
-window.MonacoEnvironment = {
-  getWorkerUrl: function (moduleId, label) {
-    if (label === "typescript" || label === "javascript")
-      return "./ts.worker.js";
-    return "./editor.worker.js";
-  },
-};
-
-/**
- * Allows the user to input code using monaco editor
- **/
-export default function CodeInput({
-  codeSample,
-  onChange,
-  mode,
-}: {
-  codeSample?: string;
-  onChange?: (code: string) => void;
-  mode?: "dark" | "light";
-}) {
-  const divRef = useRef<HTMLDivElement>(null);
-  const Monaco = useModule(() => import("monaco-editor"));
-  const content = useMemo(() => {
-    if (!Monaco) return <Loader />;
-    else {
-      return null;
-    }
-  }, [Monaco]);
-  const editorRef =
-    useRef<import("monaco-editor").editor.IStandaloneCodeEditor>(undefined);
-  useEffect(() => {
-    if (Monaco) {
-      Monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-        noSemanticValidation: true,
-      });
-      const editor = Monaco.editor.create(divRef.current!, {
-        language: "typescript",
-        scrollBeyondLastLine: false,
-        minimap: { enabled: false },
-        folding: false,
-        readOnly: !onChange,
-        theme: mode === "dark" ? "vs-dark" : undefined,
-        automaticLayout: true
-      });
-      editor.onDidContentSizeChange(() => {
-        if (!editorRef.current) {
-          editorRef.current = editor;
-        }
-      });
-      editor.onDidChangeModelContent(() => {
-        if (onChange) onChange(editor.getModel()!.getValue());
-      });
-      const model = Monaco.editor.createModel(
-        codeSample || "",
-        "typescript",
-        Uri.file(`example.tsx`)
-      );
-      editor.setModel(model);
-      return () => {
-        model.dispose();
-      };
-    }
-  }, [Monaco]);
-  useEffect(() => {
-    if (!codeSample) return;
-    const editor = editorRef.current;
-    if (!editor) return;
-    const model = editor.getModel();
-    if (!model) return;
-    const currentValue = model.getValue();
-    if (codeSample !== currentValue) model.setValue(codeSample);
-  }, [codeSample]);
-  return (
-    <div ref={divRef} className={Styles.root}>
-      {content}
-    </div>
-  );
-}

package/src/components/CodeInput/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./CodeInput";
-export * from "./CodeInput";

package/src/components/Collapsable/Collapsable.module.scss

@@ -1,42 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-.container {
-  > .title {
-    cursor: pointer;
-    margin: 0px;
-    display: block;
-  }
-}
-
-.open .title::after {
-  transform: translateX(-0.5em) rotateX(180deg) rotateZ(45deg);
-}
-.closed .title::after {
-  transform: translateX(-0.5em) rotateX(0deg) rotateZ(45deg);
-}
-
-.content {
-  width: 100%;
-  max-width: 500px;
-  overflow: hidden;
-  transition: height $fast ease-in;
-  height: 0px;
-  &.float {
-    width: initial;
-    max-width: initial;
-    position: fixed;
-    z-index: 100;
-    background: $mainBackgroundColor;
-    overflow: auto;
-  }
-  &.block {
-    box-sizing: initial;
-  }
-  &.transitionMarginTop {
-    transition: height $fast ease-in, margin-top $fast ease-in;
-  }
-}
-
-.open {
-  transition: height $fast ease-out;
-}

package/src/components/Collapsable/Collapsable.tsx

@@ -1,253 +0,0 @@
-import React, {
-  ForwardedRef,
-  HTMLAttributes,
-  HTMLProps,
-  PropsWithChildren,
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
-import FadeIn from "../FadeIn";
-import Styles from "./Collapsable.module.scss";
-import {
-  AnchoredTooltipAlignment,
-  AnchoredTooltipAnchor,
-  updateTooltipPosition,
-} from "../AnchoredTooltip/AnchoredTooltip";
-import { useOneUIConfig } from "../../context/OneUIProvider";
-function _Collapsable(
-  {
-    children,
-    title,
-    className,
-    onToggleOpen: _onToggleOpen,
-    open: _open,
-    id,
-    mode = "block",
-    contentClassName,
-    onContentClick,
-    keepUnderlayingElement,
-    onClickOut,
-    ...props
-  }: PropsWithChildren<
-    {
-      title: React.ReactNode | ((isOpen: boolean) => React.ReactNode);
-      className?: string;
-      contentClassName?: string;
-      onToggleOpen?: (isOpen: boolean) => void;
-      open?: boolean;
-      id?: string | undefined;
-      "data-testid"?: string;
-      onContentClick?: HTMLAttributes<HTMLInputElement>["onClick"];
-      /**
-       * This flag indicates if the collapsable content should be kept in HTML while it's collapsed
-       *
-       * Usefull for responsive layouts where the collapsable should not "behave" as a collapsable content
-       */
-      keepUnderlayingElement?: boolean;
-
-      /**
-       * To detect when the user clicks out of the container
-       */
-      onClickOut?: () => void;
-    } & (
-      | {
-          /** This will define if the content will be floating under the title or will expand all the container as one */
-          mode?: "block";
-        }
-      | {
-          mode: "float";
-          alignTo: AnchoredTooltipAlignment;
-          anchorTo?: AnchoredTooltipAnchor;
-        }
-    )
-  > &
-    Omit<HTMLAttributes<HTMLDivElement>, "title">,
-  ref: ForwardedRef<{ redimension: () => void }>
-) {
-  const globalClassName = useOneUIConfig("component.collapsable.className", "");
-  const [localOpen, setLocalOpen] = useState(!!_open);
-  const open = _open === undefined ? localOpen : _open;
-  const onToggleOpen =
-    _onToggleOpen === undefined ? setLocalOpen : _onToggleOpen;
-
-  const contentRef = useRef<HTMLDivElement>(null);
-  const toggleRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (open && onClickOut) {
-      window.addEventListener("click", onClickOut);
-      return () => window.removeEventListener("click", onClickOut);
-    }
-  }, [!!onClickOut, open]);
-
-  function redimension(canShrink: boolean = false) {
-    const el = contentRef.current!;
-    const contentEl = el.firstElementChild! as HTMLDivElement;
-    if (open) {
-      el.style.marginTop = ``;
-      el.style.height =
-        Math.min(
-          canShrink ? contentEl.clientHeight : Number.POSITIVE_INFINITY,
-          el.scrollHeight,
-          visualViewport!.height - 16
-        ) + "px";
-      el.parentElement!.style.position = "relative";
-      if (mode === "float") {
-        el.style.minHeight = el.style.height;
-        const { shouldAnchorToBottom } = updateTooltipPosition(
-          el,
-          toggleRef.current!,
-          true,
-          "alignTo" in props ? props.alignTo : AnchoredTooltipAlignment.CENTER,
-          "anchorTo" in props ? props.anchorTo : undefined
-        );
-        el.style.minHeight = "";
-        if (!shouldAnchorToBottom) {
-          el.style.marginTop = el.style.height;
-        }
-        const transitionStart = ({
-          currentTarget,
-          target,
-          propertyName,
-        }: TransitionEvent) => {
-          if (
-            currentTarget === target &&
-            propertyName == "height" &&
-            !shouldAnchorToBottom
-          ) {
-            el.classList.add(Styles.transitionMarginTop);
-            el.style.marginTop = "0px";
-          }
-        };
-        el.addEventListener("transitionstart", transitionStart);
-        return () => el.removeEventListener("transitionstart", transitionStart);
-      }
-      const onTransitionEnd = () => {
-        el.style.height = "auto";
-      };
-      el.addEventListener("transitionend", onTransitionEnd);
-      el.addEventListener("transitionend", () =>
-        el.removeEventListener("transitionend", onTransitionEnd)
-      );
-      return () => {
-        el.removeEventListener("transitionend", onTransitionEnd);
-      };
-    } else {
-      el.style.height = el.clientHeight + "px";
-      setTimeout(() => {
-        if (el.style.marginTop === "0px")
-          el.style.marginTop = `${el.clientHeight}px`;
-        el.style.height = 0 + "px";
-      }, 100);
-      const onTransitionEnd = () => {
-        el.parentElement!.style.position = "initial";
-        el.classList.remove(Styles.transitionMarginTop);
-        el.removeEventListener("transitionend", onTransitionEnd);
-      };
-      el.addEventListener("transitionend", onTransitionEnd);
-      return () => {
-        el.removeEventListener("transitionend", onTransitionEnd);
-      };
-    }
-  }
-
-  useImperativeHandle(ref, () => ({
-    redimension: () => redimension(true),
-  }));
-
-  useLayoutEffect(() => {
-    redimension();
-  }, [open]);
-
-  const propsToSpread = { ...props } as any;
-  delete propsToSpread.alignTo;
-  delete propsToSpread.anchorTo;
-
-  return (
-    <div
-      className={`${Styles.container} ${
-        open ? Styles.open : Styles.closed
-      } ${className} ${globalClassName}`}
-      {...propsToSpread}
-    >
-      <div
-        ref={toggleRef}
-        onClick={(e) => {
-          e.stopPropagation();
-          onToggleOpen(!open);
-        }}
-        id={_collapsableId("header", id)}
-      >
-        {typeof title === "function" ? title(open) : title}
-      </div>
-      <div
-        onClick={(e) => {
-          e.stopPropagation();
-          if (onContentClick) onContentClick(e as any);
-        }}
-        ref={contentRef}
-        className={`${Styles.content} ${
-          Styles[mode] || ""
-        } ${contentClassName}`}
-        id={_collapsableId("content", id)}
-      >
-        <FadeIn>{open || keepUnderlayingElement ? children : null}</FadeIn>
-      </div>
-    </div>
-  );
-}
-
-function _collapsableId(type: "header" | "content", id?: string) {
-  return id ? `collapsable_${type}_${id}` : undefined;
-}
-
-class _CollapsableInterface {
-  _id: string;
-
-  constructor(id: string) {
-    this._id = id;
-  }
-
-  _getElements() {
-    return {
-      header: document.getElementById(_collapsableId("header", this._id)!),
-      content: document.getElementById(_collapsableId("content", this._id)!),
-    };
-  }
-
-  open(onOpened: () => void) {
-    const { header, content } = this._getElements();
-    if ((content?.clientHeight || 0) === 0) {
-      header!.click();
-      content!.addEventListener("transitionend", function _handler() {
-        content!.removeEventListener("transitionend", _handler);
-        onOpened();
-      });
-    } else {
-      onOpened();
-    }
-  }
-
-  getElement(type: "header" | "content"): HTMLDivElement | null {
-    return document.getElementById(
-      _collapsableId(type, this._id)!
-    ) as HTMLDivElement | null;
-  }
-}
-
-/**
- * A helper function for interacting with collapsables without a reference
- */
-export function CollapsableInterface(id: string) {
-  return new _CollapsableInterface(id);
-}
-
-/**
- * Allows collapsing and expanding the wrapped content
- **/
-const Collapsable = forwardRef(_Collapsable);
-export default Collapsable;

package/src/components/Collapsable/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./Collapsable";
-export * from "./Collapsable";

package/src/components/Countdown/Countdown.tsx

@@ -1,130 +0,0 @@
-import React, {
-  Fragment,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useState,
-} from "react";
-
-export type TimeObject = {
-  hours: number;
-  minutes: number;
-  seconds: number;
-};
-
-export function calculateTimeFromTimespan(timespan: number): TimeObject {
-  const seconds = Math.floor(timespan / 1000);
-  const minutes = Math.floor(seconds / 60);
-  const hours = Math.floor(minutes / 60);
-  return {
-    hours,
-    minutes: minutes % 60,
-    seconds: seconds % 60,
-  };
-}
-
-const IntegerFormatter = new Intl.NumberFormat(undefined, {
-  minimumIntegerDigits: 2,
-});
-
-export enum CountdownTextModel {
-  /** This shows the countdown on the format 00:00:00 */
-  CLOCK,
-  /** This shows the countdown on the format 00h 00m 00s */
-  SHORT,
-}
-
-/**
- * You five it some time, and a countdown is shown
- **/
-export default function Countdown({
-  timeRemaining,
-  onFinish,
-  model = CountdownTextModel.CLOCK,
-  options,
-}: {
-  timeRemaining: number;
-  onFinish?: () => void;
-  model?: CountdownTextModel;
-  options?: {
-    /** Controls if the hours fragment should be shown */
-    hours: boolean;
-  };
-}) {
-  const [t, setT] = useState<TimeObject>(() =>
-    calculateTimeFromTimespan(timeRemaining)
-  );
-
-  useLayoutEffect(() => {
-    setT(calculateTimeFromTimespan(timeRemaining));
-  }, [timeRemaining]);
-
-  useEffect(() => {
-    const cl = setInterval(() => {
-      setT((prev) => {
-        let nextSecond = prev!.seconds - 1;
-        let nextMinute = prev!.minutes;
-        let nextHour = prev!.hours;
-        if (nextSecond < 0) {
-          nextSecond = 59;
-          nextMinute -= 1;
-          if (nextMinute < 0) {
-            nextMinute = 59;
-            nextHour -= 1;
-          }
-        }
-
-        if (nextHour === 0 && nextMinute === 0 && nextSecond === 0) {
-          if (onFinish) onFinish();
-          clearInterval(cl);
-        }
-
-        return {
-          seconds: nextSecond,
-          minutes: nextMinute,
-          hours: nextHour,
-        };
-      });
-    }, 1000);
-
-    return () => {
-      clearInterval(cl);
-    };
-  }, [timeRemaining]);
-
-  const txt = useMemo(() => {
-    switch (model) {
-      case CountdownTextModel.CLOCK:
-        const hourFragment =
-          options?.hours ?? true ? `${IntegerFormatter.format(t!.hours)}:` : "";
-        return (
-          <Fragment>
-            {`${hourFragment}${IntegerFormatter.format(
-              t!.minutes
-            )}:${IntegerFormatter.format(t!.seconds)}`}
-          </Fragment>
-        );
-      case CountdownTextModel.SHORT:
-        const hourFragmentS =
-          options?.hours ?? true ? (
-            <>
-              {IntegerFormatter.format(t!.hours)}
-              <span>h</span>&nbsp;
-            </>
-          ) : (
-            ""
-          );
-        return (
-          <Fragment>
-            {hourFragmentS}
-            {IntegerFormatter.format(t!.minutes)}
-            <span>m</span>&nbsp;
-            {IntegerFormatter.format(t!.seconds)}
-            <span>s</span>
-          </Fragment>
-        );
-    }
-  }, [t, model]);
-
-  return <span>{txt}</span>;
-}

package/src/components/Countdown/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./Countdown";
-export * from "./Countdown";

package/src/components/CurrencyInput/CurrencyInput.hook.ts

@@ -1,37 +0,0 @@
-import { useLayoutEffect, useMemo, useRef } from "react";
-import { currencyFormatterFactory } from "../../utils/formatters";
-
-export function useCurrencyInput(
-  amount: string | undefined,
-  locale: string,
-  currency: string,
-  onChange?: (formattedCurrency: string) => void
-) {
-  const formatter = useMemo(
-    () => currencyFormatterFactory(locale, currency),
-    []
-  );
-  const number = useMemo(
-    () => Number(amount?.replace(/[^0-9]/g, "") || 0) / 100,
-    [amount]
-  );
-  const moneyFormat = useMemo(() => {
-    return formatter.format(number);
-  }, [number, formatter]);
-
-  const lastPosition = useRef(0);
-  const inputRef = useRef<HTMLInputElement>(null);
-  useLayoutEffect(() => {
-    const el = inputRef.current!;
-    const putCaretOn = el.value.length - lastPosition.current;
-    el.setSelectionRange(putCaretOn, putCaretOn);
-
-    onChange?.(moneyFormat);
-  }, [moneyFormat]);
-
-  return {
-    inputRef,
-    moneyFormat,
-    lastPosition,
-  };
-}

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -1,25 +0,0 @@
-import React, { ComponentProps } from "react"
-import Input from "../Input"
-import { useCurrencyInput } from "./CurrencyInput.hook"
-
-export default function CurrencyInput({ locale, value: amount, currency, onChange, placeholder, error, ...props }: Omit<ComponentProps<typeof Input>, 'onChange'> & { currency: string, onChange?: (formatted: string) => void, locale: string }) {
-    const { inputRef, moneyFormat, lastPosition } = useCurrencyInput(amount, locale, currency, onChange)
-    return (
-        <>
-            <Input
-                ref={inputRef}
-                placeholder={placeholder}
-                value={moneyFormat}
-                error={error as string}
-                data-testid={props['data-testid']}
-                onChange={({
-                    target: { value, selectionStart = value.length },
-                }) => {
-                    const diffFromEndToStart = value.length - selectionStart!
-                    lastPosition.current = diffFromEndToStart
-                    onChange?.(value)
-                }}
-            />
-        </>
-    )
-}

package/src/components/CurrencyInput/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./CurrencyInput";
-export * from "./CurrencyInput";

package/src/components/Divider/Divider.module.scss

@@ -1,7 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-.container {
-  margin: 16px 0px;
-  height: 1px;
-  background-color: $lightGray;
-}

package/src/components/Divider/Divider.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-import Styles from "./Divider.module.scss";
-
-/**
- * Guess what this does
- **/
-export default function Divider({className = ""}: {className?: string}) {
-  return (
-    <>
-      <div className={`${Styles.container} ${className}`} />
-    </>
-  );
-}

package/src/components/Divider/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./Divider";
-export * from "./Divider";

package/src/components/EmailInput/EmailInput.tsx

@@ -1,51 +0,0 @@
-import React, {
-  ChangeEvent,
-  ForwardedRef,
-  forwardRef,
-  useImperativeHandle,
-  useState,
-} from "react";
-import Input from "../Input";
-
-export function validateEmail(email: string) {
-  return /@.*\./.test(email);
-}
-function _EmailInput(
-  props: Omit<React.ComponentProps<typeof Input>, "onChange" | "value"> & {
-    onChange: (email: string, isValid: boolean) => void;
-    value: string;
-    messages: {
-      invalidEmail: string;
-    };
-  },
-  ref: ForwardedRef<{
-    validateEmail: (email: string) => boolean;
-  }>
-) {
-  const [localWarning, setLocalWarning] = useState(
-    props.value ? !validateEmail(props.value) : false
-  );
-  useImperativeHandle(ref, () => ({
-    validateEmail: validateEmail,
-  }));
-  function _handleInputChange(e: ChangeEvent<HTMLInputElement>) {
-    props.onChange(e.target.value, validateEmail(e.target.value));
-  }
-  return (
-    <Input
-      {...props}
-      error={localWarning ? props.messages.invalidEmail : props.error}
-      onBlur={({ target: { value } }) => {
-        setLocalWarning(!!value && !validateEmail(value));
-      }}
-      onFocus={() => setLocalWarning(false)}
-      onChange={_handleInputChange}
-    />
-  );
-}
-
-/**
- * A Input based wrapper to handle inputs of email
- **/
-const EmailInput = forwardRef(_EmailInput);
-export default EmailInput;

package/src/components/EmailInput/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./EmailInput";
-export * from "./EmailInput";

package/src/components/FadeIn/FadeIn.module.scss

@@ -1,9 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-.container {
-  opacity: 0;
-  transition: opacity $normal;
-  &.active {
-    opacity: 1;
-  }
-}