@onepercentio/one-ui 0.29.4 → 0.29.5

package/src/components/Form/v2/Form.types.ts

@@ -1,118 +0,0 @@
-import { SelectItem } from "../../Select/Select";
-import { UploadTask } from "firebase/storage";
-import { ReactElement } from "react";
-
-import {
-  AnswerAction,
-  AnswerByField,
-  FormField,
-} from "./FormField/FormField.types";
-
-export type BaseQuestion = { id: string; type: FormField["type"] };
-export type FormState<Q extends BaseQuestion[] = []> = [
-  answers: AnswersMap<Q>,
-  isValid: boolean
-];
-
-export enum DataStatus {
-  /** Form is empty */
-  PENDING,
-  /** Form is partially filled */
-  INCOMPLETE,
-  /** Form is completed */
-  COMPLETE,
-  /** Form has error */
-  ERROR,
-}
-
-export enum StepStatus {
-  /** When the data is empty and needs to be filled */
-  INCOMPLETE,
-  /** When data has already been filled */
-  COMPLETED,
-  /** When the step is the current selected */
-  CURRENT,
-  /** When the step has error */
-  ERROR,
-}
-
-export enum FormStep {
-  PERSONAL_DATA,
-  ADDITIONAL_DATA,
-  DOCUMENTS,
-  INVEST_PROFILE,
-  CONTRACTS,
-}
-
-export enum FormMode {
-  READ_ONLY,
-  WRITE,
-}
-
-export type FormFieldView = FormField & {
-  title: string;
-};
-
-export type FormProps = {
-  onFormSubmitted: () => void;
-  savedAnswers: Partial<{
-    [questionId: string]: AnswerByField<FormField>;
-  }>;
-  startAt: FormStep;
-  onGoBack: () => void;
-};
-export type StepFormProps = Pick<FormProps, "savedAnswers"> & {
-  step: FormStep;
-} & ModeProps;
-
-export type ModeProps =
-  | {
-      mode: FormMode.READ_ONLY;
-    }
-  | {
-      mode: FormMode.WRITE;
-      onFinish: () => void;
-      onCancel: () => void;
-    };
-export type FormViewProps<Q extends BaseQuestion[]> = {
-  questions: Q;
-} & (
-  | {
-      mode?: FormMode.WRITE;
-      initialAnswers?: AnswersMap;
-      onFormUpdate: (...args: FormState<Q>) => void;
-      /** When provided (true) show all current errors that are blocking the completion of the form */
-      showAllErrors?: boolean;
-    }
-  | {
-      initialAnswers: AnswersMap;
-      mode: FormMode.READ_ONLY;
-    }
-);
-
-export type AnswersMap<
-  Q extends Readonly<BaseQuestion[]> = [
-    { type: BaseQuestion["type"]; id: string }
-  ]
-> = Partial<
-  {
-    [questionId in Q[number]["id"]]: AnswerByField<
-      Q[number] & { id: questionId }
-    >;
-  }
->;
-
-export enum INVESTOR_PROFILE {
-  /**
-   * User can only spend up to 20k
-   */
-  RESTRICTED,
-  /**
-   * User can only spend up to 10% of it's income
-   */
-  LIMITED,
-  /**
-   * User doesn't have restrictions
-   */
-  UNLIMITED,
-}

package/src/components/Form/v2/FormField/Extensions/DateField/DateField.tsx

@@ -1,73 +0,0 @@
-import React, { ReactNode } from "react";
-import InputMask from "react-input-mask";
-import Styles from "./DateField.module.scss";
-import Text from "../../../../../Text";
-import { useOneUIConfig } from "../../../../../../context/OneUIProvider";
-import { AnswerByField, GenericFormFieldProps } from "../../FormField.types";
-import Input from "../../../../../Input";
-import { isValidated } from "../../../Form.hook";
-
-/**
- * Allows inputing a date
- **/
-export default function dateFieldFactory(dateFormat: string) {
-  return function DateField({
-    onAnswer,
-    question,
-    value,
-    error,
-  }: GenericFormFieldProps<"date">) {
-    const { titleVariant } = useOneUIConfig("component.form");
-    return (
-      <>
-        <Text type={titleVariant}>{question.title}</Text>
-        <InputMask
-          mask={dateFormat}
-          value={value}
-          onChange={({ target: { value } }: any) => {
-            onAnswer("date", question.id, value as string);
-          }}
-        >
-          {
-            ((inputProps: any) => (
-              <Input
-                {...inputProps}
-                placeholder={question.title}
-                error={error}
-              />
-            )) as unknown as ReactNode
-          }
-        </InputMask>
-      </>
-    );
-  };
-}
-
-const parseDate = (formattedDate: string) => {
-  const providedDate = formattedDate;
-  const dateParts = providedDate.split("/").map(Number);
-  if (dateParts.length < 2) return false;
-  const [day, month, year] = dateParts;
-  const parsedDate = new Date(year, month - 1, day);
-
-  return parsedDate;
-};
-
-export const dateFieldValidatorFactory =
-  (invalidDateLabel: string, requiredFieldLabel: string) =>
-  (answer: AnswerByField<{ type: "date" }>) => {
-    const providedDate = answer || "";
-    const parsedDate = parseDate(providedDate);
-    if (!parsedDate)
-      return {
-        isValid: false,
-        error: invalidDateLabel,
-      };
-    const dateValidation = isValidated(
-      providedDate,
-      false,
-      undefined,
-      requiredFieldLabel
-    );
-    return dateValidation;
-  };

package/src/components/Form/v2/FormField/Extensions/DateField/index.tsx

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

package/src/components/Form/v2/FormField/Extensions/PhoneField/PhoneField.tsx

@@ -1,91 +0,0 @@
-import React, { useEffect, useMemo } from "react";
-import Styles from "./PhoneField.module.scss";
-import {
-  AnswerByField,
-  FormFieldProps,
-  FormFieldView,
-  GenericFormFieldProps,
-} from "../../FormField.types";
-import useModule from "../../../../../../hooks/utility/useModule";
-import Text from "../../../../../Text";
-import Input from "../../../../../Input";
-import { useOneUIConfig } from "../../../../../../context/OneUIProvider";
-
-/**
- * An extra form field that enables the user to input a phone number
- **/
-export default function phoneFieldFactory(invalidPhoneLabel: string) {
-  return function ({
-    value,
-    question,
-    onAnswer,
-    error,
-  }: GenericFormFieldProps<"phone">) {
-    const { country } = question;
-    const { titleVariant } = useOneUIConfig("component.form");
-    const [phone] = value || ["", false];
-    const phoneFormatter = useModule(() =>
-      import("google-libphonenumber").then((mod) => {
-        return mod.PhoneNumberUtil.getInstance();
-      })
-    );
-    const {
-      phoneFormat,
-      valid,
-      error: phoneError,
-    } = useMemo(() => {
-      if (!phoneFormatter)
-        return {
-          phoneFormat: phone,
-          valid: false,
-          error: "",
-        };
-      try {
-        const phoneInstance = phoneFormatter.parseAndKeepRawInput(
-          phone,
-          country
-        );
-        const isPhoneValid = phoneFormatter.isValidNumber(phoneInstance);
-        return {
-          phoneFormat: phoneFormatter.format(phoneInstance, 2),
-          valid: isPhoneValid,
-          error: isPhoneValid ? "" : invalidPhoneLabel,
-        };
-      } catch (e) {
-        return {
-          phoneFormat: phone,
-          valid: false,
-          error: invalidPhoneLabel,
-        };
-      }
-    }, [phone, phoneFormatter]);
-
-    useEffect(() => {
-      onAnswer("phone", question.id, [phoneFormat, valid, phoneError]);
-    }, [phoneFormat, valid]);
-
-    return (
-      <>
-        <Text type={titleVariant}>{question.title}</Text>
-        <Input
-          placeholder={question.title}
-          value={phoneFormat}
-          onChange={({ target: { value } }) => {
-            onAnswer("phone", question.id, [value, false, phoneError]);
-          }}
-          error={error as string}
-        />
-      </>
-    );
-  };
-}
-
-export const phoneFieldValidator = (
-  answer: AnswerByField<{ type: "phone" }>
-) => {
-  const isValid = !!answer && !!answer[1];
-  return {
-    isValid,
-    error: answer[2],
-  };
-};

package/src/components/Form/v2/FormField/Extensions/PhoneField/index.tsx

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

package/src/components/Form/v2/FormField/FormField.tsx

@@ -1,378 +0,0 @@
-import { ReactNode, useEffect, useState } from "react";
-import debounce from "lodash/debounce";
-import Styles from "./FormField.module.scss";
-import {
-  AnswerAction,
-  AnswerByField,
-  FormFieldProps,
-  FormFieldView,
-  FormMode,
-} from "./FormField.types";
-import Select from "../../../Select/Select";
-import Input from "../../../Input";
-import OneText from "../../../Text";
-import Button from "../../../Button";
-import Radio from "../../../Radio";
-import { AnchoredTooltipAlignment } from "../../../AnchoredTooltip/AnchoredTooltip";
-import FileInput from "../../../FileInput/FileInput";
-import CheckBox from "../../../CheckBox/CheckBox";
-import Spacing from "../../../Spacing";
-import { useOneUIConfig } from "../../../../context/OneUIProvider";
-// import InputMask from "react-input-mask";
-
-/**
- * The logic for a field of the form
- **/
-export default function FormField<Q extends FormFieldView>({
-  config: c,
-  value,
-  ...props
-}: FormFieldProps<Q>) {
-  const val = <T extends FormFieldView["type"]>() =>
-    value as unknown as
-      | AnswerByField<{
-          type: T;
-        }>
-      | undefined;
-  const ans = <T extends FormFieldView["type"]>(
-    answer:
-      | AnswerAction<{
-          type: T;
-        }>
-      | undefined
-  ) =>
-    answer as unknown as AnswerAction<{
-      type: T;
-    }>;
-  const type = c.type;
-  const { titleVariant, labelVariant, optionalLabel, extensions } =
-    useOneUIConfig("component.form");
-  if (props.mode === FormMode.READ_ONLY) {
-    switch (type) {
-      case "check":
-        const checks = val<typeof type>()! || [];
-        return (
-          <>
-            <OneText type={titleVariant}>{c.title}</OneText>
-            {checks.includes(true) ? (
-              checks.map((checked, i) =>
-                checked ? (
-                  <OneText type={labelVariant}>{c.options[i].value}</OneText>
-                ) : null
-              )
-            ) : (
-              <OneText type={labelVariant}>-</OneText>
-            )}
-            <Spacing size="small" />
-          </>
-        );
-      case "file":
-        const file = val<typeof type>()!;
-        return (
-          <>
-            <FileInput
-              states={{
-                fileProvided: {
-                  title: c.title,
-                  description: c.fileUsageDescription,
-                },
-                waitingFile: {
-                  title: c.title,
-                  description: c.fileUsageDescription,
-                },
-              }}
-              footer={c.footer}
-              onFile={() => {}}
-              file={file === true ? ({} as File) : undefined}
-              progress={file === true ? 100 : undefined}
-              disabled={true}
-            />
-            <Spacing size="small" />
-            {file === true && (
-              <Button
-                variant="link"
-                color="primary"
-                onClick={c.openFile!.action}
-              >
-                {c.openFile!.label}
-              </Button>
-            )}
-            <Spacing size="large" />
-          </>
-        );
-      default:
-        const answer = val<typeof type>() as ReactNode;
-        return (
-          <>
-            <OneText type={titleVariant}>{c.title}</OneText>
-            <OneText type={labelVariant}>{answer || "-"}</OneText>
-            <Spacing size="small" />
-          </>
-        );
-    }
-  }
-  const { onAnswer, error } = props;
-  switch (type) {
-    case "accept":
-      const checks = val<typeof type>() || [];
-      return (
-        <>
-          <div className={Styles.acceptInput}>
-            <div>
-              <OneText type={titleVariant}>{c.title}</OneText>
-              <br />
-              <Button
-                variant="link"
-                color="primary"
-                onClick={c.contract.action}
-              >
-                {c.contract.label}
-              </Button>
-            </div>
-            {error && (
-              <div>
-                <OneText type="caption" color="error">
-                  {error}
-                </OneText>
-                <br />
-              </div>
-            )}
-            <div>
-              {c.accept.map((a, i) => (
-                <OneText type={labelVariant}>
-                  <CheckBox
-                    label={
-                      <span>
-                        <>
-                          {a.label}
-                          {a.optional ? (
-                            <>
-                              <br />
-                              <OneText type="caption">{optionalLabel}</OneText>
-                            </>
-                          ) : (
-                            ""
-                          )}
-                        </>
-                      </span>
-                    }
-                    checked={checks[i]}
-                    onToggle={(checked) => {
-                      const clone = [...checks];
-                      clone[i] = checked;
-                      onAnswer(type, c.id, ans<typeof type>(clone));
-                    }}
-                    groupId={c.id}
-                    value={a.label}
-                  />
-                </OneText>
-              ))}
-            </div>
-          </div>
-          <Spacing size="small" />
-        </>
-      );
-    case "file":
-      const upload = val<typeof type>();
-      const [progress, setProgress] = useState<number | undefined>(() => {
-        if (!upload) return undefined;
-        if (upload === true) return 100;
-        const s = upload.snapshot;
-        return (s.bytesTransferred * 100) / s.totalBytes;
-      });
-      useEffect(() => {
-        if (!upload) return setProgress(undefined);
-        if (upload === true) {
-          setProgress(100);
-          return;
-        }
-        const throttleSetProgress = debounce(setProgress, 250);
-        const unsubscribe = upload.on("state_changed", (s) => {
-          const progress = (s.bytesTransferred * 100) / s.totalBytes;
-          throttleSetProgress(progress);
-        });
-
-        return () => {
-          unsubscribe();
-        };
-      }, [upload]);
-      return (
-        <>
-          <FileInput
-            states={{
-              fileProvided: {
-                title: c.title,
-                description: c.fileUsageDescription,
-              },
-              waitingFile: {
-                title: c.title,
-                description: c.fileUsageDescription,
-              },
-            }}
-            footer={c.footer}
-            onFile={(file) => {
-              onAnswer(type, c.id, ans<typeof type>(file));
-            }}
-            file={upload as unknown as File}
-            progress={upload ? progress || 0 : undefined}
-            accept={c.extensions.map((x) => `.${x}`).join(",")}
-          />
-          {error ? (
-            <OneText type="caption" color="error">
-              {error}
-            </OneText>
-          ) : null}
-          <Spacing size="large" />
-        </>
-      );
-    case "radio":
-      const selected = val<typeof type>();
-      return (
-        <>
-          <OneText type={titleVariant}>{c.title}</OneText>
-          {error && (
-            <OneText type="caption" color="error">
-              {error}
-            </OneText>
-          )}
-          <br />
-          {c.options.map((el) => (
-            <>
-              <OneText type={labelVariant}>
-                <Radio
-                  checked={selected === el.value}
-                  label={el.label}
-                  onToggle={() => onAnswer(type, c.id, el.value)}
-                  groupId={c.id}
-                  value={el.value}
-                />
-              </OneText>
-              <br />
-            </>
-          ))}
-        </>
-      );
-    case "check":
-      const checkError =
-        typeof error === "string" ? c.options.map(() => error) : error;
-      const checkmarks = val<typeof type>() || [];
-      return (
-        <>
-          <OneText type={titleVariant}>{c.title}</OneText>
-          <br />
-          {c.options.map((el, i) => (
-            <>
-              <OneText type={labelVariant}>
-                <CheckBox
-                  checked={checkmarks[i]}
-                  label={
-                    <>
-                      {el.label}
-                      {checkError?.[i] ? (
-                        <OneText type="caption" color="error">
-                          {checkError[i]}
-                        </OneText>
-                      ) : null}
-                    </>
-                  }
-                  onToggle={(checked) => {
-                    const clone = [...checkmarks];
-                    clone[i] = checked;
-                    onAnswer(type, c.id, clone);
-                  }}
-                  groupId={c.id}
-                  value={el.value}
-                />
-              </OneText>
-              <br />
-            </>
-          ))}
-        </>
-      );
-    case "rawcheck":
-      const rawCheckmarks = val<typeof type>() || [];
-      return (
-        <>
-          {error && (
-            <>
-              <OneText type="caption" color="error">
-                {error}
-              </OneText>
-              <br />
-            </>
-          )}
-          {c.options.map((el, i) => (
-            <>
-              <OneText type={labelVariant}>
-                <CheckBox
-                  checked={rawCheckmarks[i]}
-                  label={el.label}
-                  onToggle={(checked) => {
-                    const clone = [...rawCheckmarks];
-                    clone[i] = checked;
-                    onAnswer(type, c.id, clone);
-                  }}
-                  groupId={c.id}
-                  value={el.value}
-                />
-              </OneText>
-              <br />
-            </>
-          ))}
-        </>
-      );
-    case "select":
-      return (
-        <>
-          <OneText type={titleVariant}>{c.title}</OneText>
-          <Select
-            data-testid={`cvm88-${c.id}`}
-            alignTo={AnchoredTooltipAlignment.LEFT}
-            items={c.options}
-            selected={val<typeof type>()!}
-            onClick={(i) => {
-              onAnswer(type, c.id, i.value);
-            }}
-            filter={c.filter}
-            error={error as string}
-          />
-        </>
-      );
-    case "text":
-    case "number":
-      const filter =
-        type === "number"
-          ? (val: string) => val.replace(/[^0-9]+/g, "")
-          : (val: string) => val;
-      return (
-        <>
-          <OneText type={titleVariant}>{c.title}</OneText>
-          <Input
-            multiline={"multiline" in c ? c.multiline : undefined}
-            placeholder={c.title}
-            value={val<typeof type>()}
-            error={error as string}
-            onChange={({ target: { value } }) => {
-              onAnswer(type, c.id, filter(value));
-            }}
-          />
-        </>
-      );
-    default:
-      const registeredExtension = extensions?.[type] as any;
-      if (registeredExtension) {
-        const { Input } = registeredExtension;
-        return (
-          <Input
-            onAnswer={onAnswer}
-            question={c as any}
-            value={value as any}
-            error={error as any}
-          />
-        );
-      }
-      throw new Error(
-        `The form field "${type}" is not implemented yet. Please provide it using OneUIProvider config options for form extensions`
-      );
-  }
-}