@onepercentio/one-ui 0.28.7 → 0.28.9

package/src/components/Collapsable/Collapsable.tsx

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

@@ -0,0 +1 @@
+export { default } from './Collapsable';

package/src/components/Countdown/Countdown.tsx

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

@@ -0,0 +1 @@
+export { default } from './Countdown';

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

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

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

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

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

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

package/src/components/Divider/Divider.tsx

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

@@ -0,0 +1 @@
+export { default } from './Divider';

package/src/components/EmailInput/EmailInput.tsx

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

@@ -0,0 +1 @@
+export { default, validateEmail } from './EmailInput';

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

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

package/src/components/FadeIn/FadeIn.tsx

@@ -0,0 +1,77 @@
+import React, {
+  createRef,
+  ForwardedRef,
+  forwardRef,
+  PropsWithChildren,
+  RefObject,
+  SyntheticEvent,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import Styles from "./FadeIn.module.scss";
+
+type FadeInProps = PropsWithChildren<{
+  className?: string;
+  active?: boolean;
+  onClick?: (e: SyntheticEvent<HTMLDivElement>) => void;
+  onHidden?: () => void;
+  "data-testid"?: string;
+  style?: any;
+}>;
+function _FadeIn(
+  {
+    onHidden,
+    children,
+    className = "",
+    active,
+    onClick,
+    ...props
+  }: FadeInProps,
+  divRef: ForwardedRef<HTMLDivElement>
+) {
+  if (!divRef) {
+    divRef = createRef();
+  }
+  const [, trigger] = useState(0);
+  const prevChildren = useRef<typeof children>(undefined);
+  prevChildren.current = children || prevChildren.current;
+
+  useEffect(() => {
+    const el = (divRef as RefObject<HTMLDivElement>).current!;
+    const isElHidden = active !== undefined ? !active : !children;
+
+    if (isElHidden) {
+      el.classList.remove(Styles.active);
+      const handler = () => {
+        prevChildren.current = null;
+        trigger((a) => a + 1);
+        if (onHidden && !el.classList.contains(Styles.active)) onHidden();
+      };
+      el.addEventListener("transitionend", handler);
+      return () => {
+        el.removeEventListener("transitionend", handler);
+      };
+    } else {
+      setTimeout(() => {
+        el.classList.add(Styles.active);
+      }, 0);
+    }
+  }, [children, active]);
+  return (
+    <div
+      ref={divRef}
+      className={`${Styles.container} ${className}`}
+      onClick={onClick}
+      {...props}
+    >
+      {prevChildren.current}
+    </div>
+  );
+}
+
+/**
+ * Receives a children and displays it with a fade in animation, also when it's removed, it hides with a fadeout
+ **/
+const FadeIn = forwardRef<HTMLDivElement, FadeInProps>(_FadeIn);
+export default FadeIn;

package/src/components/FadeIn/index.tsx

@@ -0,0 +1 @@
+export { default } from './FadeIn';

package/src/components/FileInput/FileInput.module.scss

@@ -0,0 +1,6 @@
+.hidden {
+  width: 0px;
+  height: 0px;
+  position: fixed;
+  opacity: 0.01;
+}