@onepercentio/one-ui 0.28.8 → 0.29.0

package/src/components/FileInput/FileInput.tsx

@@ -0,0 +1,75 @@
+import React, {
+  ChangeEventHandler,
+  ReactElement,
+  useCallback,
+  useRef,
+} from "react";
+import { useOneUIView } from "../../context/OneUIProvider";
+import Styles from "./FileInput.module.scss";
+
+export type FileInputProps = {
+  states: {
+    waitingFile: {
+      /** The reason why this file is being requested */
+      title: string | ReactElement;
+      /** Shown below the title */
+      description?: string;
+      /** The label to show on the button */
+      button?: string;
+    };
+    fileProvided: {
+      /** Text show when the file has been provided */
+      title: string | ReactElement;
+      /** Shown below the title */
+      description?: string;
+      /** Shown on the button to remove the file */
+      button?: string;
+    };
+  };
+  footer: string;
+  file?: File;
+  onFile: (file: File | undefined) => void;
+  progress?: number;
+  disabled?: boolean;
+} & React.HTMLProps<HTMLInputElement>;
+
+/**
+ * A component to provide the upload of a file
+ **/
+function FileInput({ onFile, ...props }: FileInputProps) {
+  const View = useOneUIView("component.fileInput.View", "FileInput");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onFileSelected = useCallback(
+    ((e) => {
+      const file = e.target.files!.item(0);
+      onFile(file || undefined);
+    }) as ChangeEventHandler<HTMLInputElement>,
+    []
+  );
+
+  return (
+    <View
+      {...props}
+      onAction={() => {
+        if (props.file) {
+          inputRef.current!.value = "";
+          onFile(undefined);
+        } else {
+          inputRef.current!.click();
+        }
+      }}
+      inputEl={
+        <input
+          {...props}
+          ref={inputRef}
+          onChange={onFileSelected}
+          type={"file"}
+          className={Styles.hidden}
+        />
+      }
+    />
+  );
+}
+
+export default FileInput;

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

@@ -0,0 +1,20 @@
+@import "../../../../assets/styles/index.scss";
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: $fileInputBackgroundColor;
+  padding: 72px;
+  border: 1px solid;
+  border-color: $fileInputBorderColor;
+  position: relative;
+  margin-bottom: 28px;
+}
+
+.footer {
+  position: absolute;
+  bottom: -24px;
+  left: 0px;
+}

package/src/components/FileInput/View/BigFactory/BigFactory.tsx

@@ -0,0 +1,48 @@
+import React, {
+  ChangeEventHandler,
+  ReactElement,
+  useCallback,
+  useRef,
+} from "react";
+import Styles from "./BigFactory.module.scss";
+import { FileInputViewProps } from "../View.types";
+import Spacing from "../../../Spacing/Spacing";
+import Text from "../../../Text/Text";
+import Button from "../../../Button/Button";
+
+/**
+ * The file input layout with a big appearance
+ **/
+export default function BigFactory(IconComponent: () => ReactElement) {
+  return function Big({
+    states: {
+      fileProvided: { title: fileProvided, button: removeFile },
+      waitingFile: { button, title: reason },
+    },
+    file,
+    footer,
+    className,
+    inputEl,
+    onAction: onRemoveFile
+  }: FileInputViewProps) {
+    return (
+      <div className={`${Styles.container} ${className ?? ""}`}>
+        <IconComponent />
+        <Spacing size="small" />
+        <Text type="description">{file ? fileProvided : reason}</Text>
+        <Spacing size="small" />
+        <Button
+          variant="filled"
+          onClick={onRemoveFile}
+        >
+          {file ? removeFile : button}
+        </Button>
+        {inputEl}
+
+        <Text className={Styles.footer} type="caption">
+          {footer}
+        </Text>
+      </div>
+    );
+  };
+}

package/src/components/FileInput/View/BigFactory/index.tsx

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

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

@@ -0,0 +1,68 @@
+@import "../../../../assets/styles/index.scss";
+
+.root {
+  padding: 14px 22px;
+  background-color: $fileInputBackgroundColor;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .button {
+    margin-right: 24px;
+  }
+}
+
+.root,
+.icon {
+  &.disabled {
+    pointer-events: none;
+    cursor: initial;
+  }
+  .button {
+    padding: 0px;
+    min-width: initial;
+  }
+  > :first-child svg {
+    height: 46px;
+  }
+  > div {
+    p {
+      margin: 0px;
+    }
+    p:nth-child(1) {
+      font-weight: bold;
+      font-size: 14px;
+      font-family: $mainFontFamily;
+    }
+    p:nth-child(2) {
+      font-size: 12px;
+      font-family: $mainFontFamily;
+    }
+    p:nth-child(3) {
+      margin-top: 8px;
+      font-size: 16px;
+      font-family: $mainFontFamily;
+    }
+  }
+  svg {
+    --svg-color: #{$digitalBlue};
+    &.loading {
+      circle {
+        transition: stroke-dasharray 250ms ease-out;
+        stroke-dasharray: var(--progress-stroke-dasharray);
+      }
+    }
+    &.completed {
+      circle {
+        fill: var(--svg-color);
+      }
+      polyline {
+        stroke-width: 3;
+      }
+    }
+    &.waiting {
+      circle {
+        stroke-dasharray: 10%;
+      }
+    }
+  }
+}

package/src/components/FileInput/View/Compact/Compact.tsx

@@ -0,0 +1,151 @@
+import React, {
+  PropsWithChildren,
+  ReactElement,
+  ReactNode,
+  useMemo,
+} from "react";
+import Styles from "./Compact.module.scss";
+import { FileInputViewProps } from "../View.types";
+import _UncontrolledTransition from "../../../UncontrolledTransition/UncontrolledTransition";
+import { TransitionAnimationTypes } from "../../../Transition";
+import Button from "../../../Button/Button";
+
+/**
+ * Shows the file submission input in a more compact form
+ **/
+function Compact({
+  states,
+  file,
+  footer,
+  inputEl,
+  onAction,
+  progress,
+  className,
+  disabled,
+}: FileInputViewProps) {
+  const state = states[file ? "fileProvided" : "waitingFile"];
+
+  const progressDashArray = useMemo(() => {
+    if (progress !== undefined) {
+      const strokePercent = (progress * 300) / 100;
+
+      return `${strokePercent}% ${300 - strokePercent}%`;
+    }
+  }, [progress]);
+
+  return (
+    <div
+      className={`${Styles.root} ${className} ${
+        disabled ? Styles.disabled : ""
+      }`}
+      onClick={onAction}
+      style={
+        {
+          "--progress-stroke-dasharray": progressDashArray,
+        } as any
+      }
+    >
+      <ProgressIndicator file={file} progress={progress} />
+      <div>
+        <p>{state.title}</p>
+        {state.description && <p>{state.description}</p>}
+        <p>{footer}</p>
+      </div>
+      {inputEl}
+    </div>
+  );
+}
+
+export function ProgressIndicator({
+  progress,
+  file,
+  defaultIcon,
+  Wrapper = Button,
+}: Pick<FileInputViewProps, "progress" | "file"> & {
+  defaultIcon?: ReactElement;
+  Wrapper?: (p: PropsWithChildren<any>) => ReactNode;
+}) {
+  const statusClass =
+    progress !== undefined && progress < 100
+      ? "loading"
+      : file
+      ? "completed"
+      : "waiting";
+
+  const polylines = useMemo(() => {
+    switch (statusClass) {
+      case "completed":
+        return [
+          "rotate(45, 23, 23.5)",
+          "14 23.9, 23 23.9, 32 23.9",
+          "23 14.8 23 33",
+        ];
+      case "loading":
+        return ["", "18 23.9, 23 18.8, 28 23.9", "23 18.8 23 29"];
+      default:
+        return ["", "18 23.9, 23 23.9, 28 23.9", "23 18.8 23 29"];
+    }
+  }, [statusClass]);
+  return (
+    <_UncontrolledTransition
+      transitionType={TransitionAnimationTypes.COIN_FLIP}
+      className={Styles.icon}
+    >
+      <Wrapper variant="transparent" key={`${Styles.button} ${statusClass}`}>
+        <svg
+          viewBox="0 0 46 47"
+          className={Styles[statusClass]}
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="23"
+            cy="23.859"
+            r="22"
+            style={{ stroke: "var(--svg-color, #000)" }}
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          {statusClass === "completed" ? (
+            <g transform="translate(11, 11)">
+              <path
+                d="M22 11.0801V12.0001C21.9988 14.1565 21.3005 16.2548 20.0093 17.9819C18.7182 19.7091 16.9033 20.9726 14.8354 21.584C12.7674 22.1954 10.5573 22.122 8.53447 21.3747C6.51168 20.6274 4.78465 19.2462 3.61096 17.4372C2.43727 15.6281 1.87979 13.4882 2.02168 11.3364C2.16356 9.18467 2.99721 7.13643 4.39828 5.49718C5.79935 3.85793 7.69279 2.71549 9.79619 2.24025C11.8996 1.76502 14.1003 1.98245 16.07 2.86011"
+                stroke="white"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M22 4L12 14.01L9 11.01"
+                stroke="white"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </g>
+          ) : (
+            defaultIcon || (
+              <g transform={polylines[0]}>
+                <polyline
+                  points={polylines[1]}
+                  strokeWidth="2.8"
+                  style={{ stroke: "var(--svg-color, #000)" }}
+                  stroke-linecap="round"
+                />
+                <polyline
+                  points={polylines[2]}
+                  strokeWidth="2.8"
+                  style={{ stroke: "var(--svg-color, #000)" }}
+                  stroke-linecap="round"
+                />
+              </g>
+            )
+          )}
+        </svg>
+      </Wrapper>
+    </_UncontrolledTransition>
+  );
+}
+
+export default Compact;

package/src/components/FileInput/View/Compact/index.tsx

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

package/src/components/FileInput/View/View.types.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { FileInputProps } from "../FileInput";
+
+export type FileInputViewProps = {
+  inputEl: ReactNode;
+  onAction: () => void;
+  /** A range from 0-100 to indicate some file upload progress */
+  progress?: number;
+} & Pick<
+  FileInputProps,
+  "states" | "file" | "footer" | "className" | "disabled"
+>;

package/src/components/FileInput/index.tsx

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

package/src/components/FlowController/FlowController.module.scss

@@ -0,0 +1,47 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+  .headingImg {
+    width: 100%;
+    margin: 0px -33px;
+  }
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  button {
+    width: 100%;
+    border-top: 1px solid $lightGray;
+  }
+  .transition {
+    margin-top: -105px;
+    height: 100%;
+    .content {
+      padding: 0px 33px 33px 33px;
+      margin-top: 105px;
+      max-height: calc(100% - 105px);
+
+      &.fullHeight {
+        margin-top: 0px;
+        max-height: 100%;
+        height: 100%;
+      }
+    }
+    section {
+      border-top: 1px solid $lightGray;
+      margin: 0px -33px;
+      padding: 0px 33px;
+    }
+  }
+  header {
+    margin: 55px 33px;
+    margin-bottom: 33px;
+  }
+  footer {
+    transition: opacity $fast;
+    opacity: 1;
+  }
+  footer.hidden {
+    opacity: 0;
+  }
+}

package/src/components/FlowController/FlowController.tsx

@@ -0,0 +1,93 @@
+import React, { JSX, MouseEvent, useEffect, useMemo, useRef, useState } from "react";
+import Button from "../Button";
+import HeaderCloseBtn from "../HeaderCloseBtn";
+import Transition from "../Transition";
+import Styles from "./FlowController.module.scss";
+
+export type FlowControlState = "disabled" | "enabled" | "hidden";
+/**
+ * Container for a flow, managing the go back and close controller
+ **/
+export default function FlowController<
+  E extends Pick<JSX.IntrinsicElements, "div" | "form">,
+  W extends keyof E
+>({
+  children,
+  buttons,
+  step,
+  onClose,
+  onBack,
+  fullPage,
+  firstStep = 0,
+  style,
+  wrapper: Wrapper = "div" as any,
+}: {
+  onClose?: () => void;
+  onBack?: () => void;
+  step: number;
+  firstStep?: number;
+  buttons: {
+    label: string;
+    onClick: () => void;
+    state: FlowControlState;
+  }[];
+  children: React.ReactElement[];
+  fullPage?: boolean;
+  style?: React.CSSProperties;
+  wrapper?: React.ElementType;
+} & E[W]) {
+  function _handleBackPress() {
+    if (isAtFirstStep) onClose && onClose();
+    else if (onBack) onBack();
+  }
+
+  const isAtFirstStep = step === firstStep;
+
+  const shouldDisplayHeaderButton =
+    (isAtFirstStep && onClose) || (!isAtFirstStep && onBack);
+
+  return (
+    <Wrapper
+      onClick={(e: MouseEvent) => e.stopPropagation()}
+      className={Styles.container}
+      style={style}
+    >
+      <header>
+        {shouldDisplayHeaderButton && (
+          <HeaderCloseBtn
+            mode={isAtFirstStep ? "close" : "back"}
+            hidden={!onBack}
+            onClick={_handleBackPress}
+          />
+        )}
+      </header>
+      <Transition
+        step={step}
+        className={Styles.transition}
+        contentClassName={`${fullPage ? Styles.fullHeight : ""} ${
+          Styles.content
+        }`}
+      >
+        {children}
+      </Transition>
+      <footer
+        className={
+          buttons.find((b) => b.state === "hidden") ? Styles.hidden : undefined
+        }
+      >
+        {buttons.map((b) => (
+          <Button
+            onClick={b.onClick}
+            disabled={b.state === "hidden" || b.state === "disabled"}
+          >
+            {b.label}
+          </Button>
+        ))}
+      </footer>
+    </Wrapper>
+  );
+}
+
+export function HeadingImage({ src }: { src: string }) {
+  return <img src={src} className={Styles.headingImg} />;
+}

package/src/components/FlowController/index.tsx

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