@onepercentio/one-ui 0.28.8 → 0.28.9

package/src/components/Form/Form.tsx

@@ -0,0 +1,243 @@
+import React, {
+  ComponentProps,
+  ForwardedRef,
+  forwardRef,
+  FunctionComponent,
+  RefObject,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from "react";
+import Input from "../Input";
+import Button from "../Button";
+import Loader from "../Loader";
+import EmailInput from "../EmailInput";
+import AdaptiveButton from "../AdaptiveButton";
+
+export type BaseForm = { [k: string]: string | number | any };
+export type FormForm = { [k: string]: string | number };
+
+export type FieldTypes = "email" | "text" | "textarea" | "select" | "number";
+
+export type FieldDefinition<
+  M extends BaseForm,
+  F extends keyof M,
+  T extends FieldTypes
+> = {
+  validator: (v: M[F] | undefined, f: Partial<M>) => string | true;
+  placeholder?: string;
+} & (T extends "select"
+  ? {
+      type: "select";
+      choices: ComponentProps<typeof import("../Select")["default"]>["items"];
+    }
+  : T extends "email"
+  ? { type: "email"; messages: ComponentProps<typeof EmailInput>["messages"] }
+  : T extends "textarea"
+  ? {
+      type: "textarea";
+      lines: number;
+    }
+  : {
+      type: "text" | "number";
+      inputProps?: ComponentProps<typeof Input>;
+    });
+
+export type ClassName = string;
+
+function AdvancedAction({
+  config,
+  submited,
+  submitting,
+  isValid,
+  onClick,
+  btnProps,
+}: Pick<FirebaseFormProps<{}>, "submited" | "submitting"> & {
+  config: Exclude<FirebaseFormProps<{}>["submitBtn"], string>;
+  isValid: boolean;
+  onClick: () => void;
+  btnProps: ComponentProps<typeof Button>;
+}) {
+  const [key, Element, className] =
+    submited === false
+      ? ["error", ...config.error]
+      : submited === true
+      ? ["success", ...config.success]
+      : submitting
+      ? ["loading", ...config.loading]
+      : ["default", ...config.label];
+
+  const salt = useMemo(() => Date.now(), [key]);
+
+  return (
+    <AdaptiveButton
+      variant="filled"
+      className={className}
+      disabled={!isValid}
+      onClick={onClick}
+      {...btnProps}
+    >
+      <Element key={key + salt} />
+    </AdaptiveButton>
+  );
+}
+
+export type FormInterface = {
+  clear: () => void;
+};
+
+export type FirebaseFormProps<M extends FormForm> = {
+  ref?: RefObject<FormInterface>;
+  submitting: boolean;
+  onSubmit: (data: M) => void;
+  submited?: boolean;
+  config: { [k in keyof M]: FieldDefinition<M, k, FieldTypes> };
+  submitBtn:
+    | string
+    | {
+        label: [FunctionComponent] | [FunctionComponent, ClassName];
+        loading: [FunctionComponent] | [FunctionComponent, ClassName];
+        error: [FunctionComponent] | [FunctionComponent, ClassName];
+        success: [FunctionComponent] | [FunctionComponent, ClassName];
+      };
+  btnProps?: ComponentProps<typeof Button>;
+};
+function _FirebaseForm<M extends BaseForm>(
+  {
+    submitting,
+    onSubmit,
+    submited,
+    config,
+    submitBtn,
+    btnProps = {},
+  }: FirebaseFormProps<M>,
+  ref: ForwardedRef<FormInterface>
+) {
+  const [form, setform] = useState<Partial<M>>({});
+  const isValid = useMemo(
+    () =>
+      !Object.keys(config).some(
+        (a) => typeof config[a].validator(form[a], form) === "string"
+      ),
+    [form]
+  );
+
+  async function sendContact(_form: typeof form) {
+    onSubmit(_form as M);
+  }
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      clear: () => setform({}),
+    }),
+    [ref]
+  );
+
+  return (
+    <>
+      {Object.keys(config).map((c) => {
+        const fieldConfig = config[c];
+        const invalidMessage = fieldConfig.validator(form[c], form);
+        switch (fieldConfig.type) {
+          case "select":
+            return null;
+          case "text":
+          case "number":
+            const isNumber = fieldConfig.type === "number";
+            return (
+              <Input
+                {...fieldConfig.inputProps}
+                key={c}
+                name={c}
+                error={
+                  form[c] && invalidMessage !== true
+                    ? invalidMessage
+                    : undefined
+                }
+                placeholder={config[c].placeholder}
+                value={!isNumber ? form[c] || "" : undefined}
+                hideError={"onfocus"}
+                onChange={({ target: { value } }: any) => {
+                  let _value = isNumber ? Number(value) : value;
+                  if (isNumber && Number.isNaN(_value)) {
+                    _value = undefined;
+                  }
+                  setform({
+                    ...form,
+                    [c]: _value,
+                  });
+                }}
+              />
+            );
+          case "email":
+            return (
+              <EmailInput
+                key={c}
+                {...fieldConfig}
+                name={c}
+                hideError={"onfocus"}
+                error={
+                  form[c] && invalidMessage !== true
+                    ? invalidMessage
+                    : undefined
+                }
+                placeholder={config[c].placeholder}
+                value={(form[c] as string) || ""}
+                onChange={(email) =>
+                  setform({
+                    ...form,
+                    [c]: email,
+                  })
+                }
+              />
+            );
+          case "textarea":
+            return (
+              <Input
+                key={c}
+                name={c}
+                hideError={"onfocus"}
+                error={
+                  form[c] && invalidMessage !== true
+                    ? invalidMessage
+                    : undefined
+                }
+                placeholder={config[c].placeholder}
+                value={form[c] || ""}
+                onChange={({ target: { value } }: any) =>
+                  setform({
+                    ...form,
+                    [c]: value,
+                  })
+                }
+                multiline={fieldConfig.lines}
+              />
+            );
+        }
+      })}
+      {typeof submitBtn === "string" ? (
+        <Button
+          variant="filled"
+          disabled={submitting || !isValid || submited !== undefined}
+          onClick={() => sendContact(form as any)}
+          {...btnProps}
+        >
+          {submitBtn}&nbsp;
+          {submitting && <Loader />}
+        </Button>
+      ) : (
+        <AdvancedAction
+          config={submitBtn}
+          isValid={isValid}
+          onClick={() => sendContact(form as any)}
+          submitting={submitting}
+          submited={submited}
+          btnProps={btnProps}
+        />
+      )}
+    </>
+  );
+}
+const FirebaseForm = forwardRef(_FirebaseForm);
+export default FirebaseForm;

package/src/components/Form/index.ts

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

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

@@ -0,0 +1,341 @@
+import { useLayoutEffect, useMemo, useState } from "react";
+import {
+  OneUIContextSpecs,
+  useOneUIConfig,
+} from "../../../context/OneUIProvider";
+import {
+  AnswerAction,
+  AnswerByField,
+  FormField,
+  FormFieldTypes,
+  FormFieldView,
+  FormMode,
+} from "./FormField/FormField.types";
+import { AnswersMap } from "./Form.types";
+import { UploadTask, UploadTaskSnapshot } from "firebase/storage";
+
+export function useFormAnswers<A extends AnswersMap<any> = AnswersMap>(
+  defaultAnswers: A,
+  mode: FormMode
+) {
+  const [answers, setAnswers] = useState<A>(() => {
+    const clone = {
+      ...defaultAnswers,
+    };
+    if (mode === FormMode.READ_ONLY) return clone;
+    return clone;
+  });
+  return {
+    answers,
+    setAnswers,
+  };
+}
+export function useFormState(
+  currentQuestions: FormFieldView[],
+  { answers, setAnswers }: ReturnType<typeof useFormAnswers>
+) {
+  const formConfig = useOneUIConfig("component.form");
+
+  const { isValid: isQuestionsAnswered } = useMemo(() => {
+    return areAllQuestionsAnswered(
+      currentQuestions,
+      answers,
+      formConfig.requiredLabel,
+      formConfig.extensions
+    );
+  }, [answers, currentQuestions]);
+
+  const onAnswerAction = <T extends FormFieldTypes>(
+    questionType: T,
+    id: string,
+    answer:
+      | AnswerAction<{
+          type: T;
+        }>
+      | undefined
+  ) => {
+    switch (questionType) {
+      case "file":
+        const { onFileUpload } = formConfig;
+        setAnswers((prev: any) => {
+          const file = answer as File | undefined;
+          if (file)
+            return {
+              ...prev,
+              [id]: onFileUpload(id, file),
+            };
+          delete prev[id];
+          return { ...prev };
+        });
+        break;
+      default:
+        setAnswers((prev) => ({
+          ...prev,
+          [id]: answer as string,
+        }));
+    }
+  };
+
+  const isFilesUploaded = useFileUploads(currentQuestions, answers);
+
+  return {
+    answers,
+    isQuestionsAnswered,
+    isFilesUploaded,
+    onAnswerAction,
+    questions: currentQuestions,
+  };
+}
+
+export function useForm(
+  currentQuestions: FormFieldView[],
+  defaultAnswers: AnswersMap,
+  mode: FormMode
+) {
+  const answers = useFormAnswers(defaultAnswers, mode);
+  return useFormState(currentQuestions, answers);
+}
+
+function useFileUploads(questions: FormField[], answers: AnswersMap) {
+  const fileUploadQuestions = useMemo(
+    () => questions.filter((a) => a.type === "file"),
+    [questions]
+  );
+  const [fileUploadStatus, setFileUploadStatus] = useState<{
+    [questionID: string]: UploadTaskSnapshot["state"];
+  }>({});
+  useLayoutEffect(() => {
+    const unsubs: ReturnType<UploadTask["on"]>[] = [];
+    for (let fileQuestion of fileUploadQuestions) {
+      const uploadTask = answers[fileQuestion.id] as
+        | AnswerByField<{
+            type: "file";
+          }>
+        | undefined;
+
+      if (!uploadTask)
+        setFileUploadStatus((prev) => ({
+          ...prev,
+          [fileQuestion.id]: "running",
+        }));
+      else if (typeof uploadTask === "boolean") {
+        setFileUploadStatus((prev) => ({
+          ...prev,
+          [fileQuestion.id]: "success",
+        }));
+      } else
+        unsubs.push(
+          uploadTask.on("state_changed", (r) => {
+            setFileUploadStatus((prev) => ({
+              ...prev,
+              [fileQuestion.id]:
+                r.totalBytes === r.bytesTransferred ? "success" : "running",
+            }));
+          })
+        );
+    }
+
+    return () => {
+      unsubs.forEach((unsub) => unsub());
+    };
+  }, [answers, fileUploadQuestions]);
+
+  const areAllFileUploaded = useMemo(() => {
+    return fileUploadQuestions.reduce((r, question) => {
+      const uploadStatus = fileUploadStatus[question.id];
+      return r && uploadStatus === "success";
+    }, true);
+  }, [fileUploadStatus, fileUploadQuestions]);
+
+  return areAllFileUploaded;
+}
+
+export function useFieldErrors<
+  Q extends Readonly<
+    Pick<FormField, "type" | "id" | "optional" | "validator">[]
+  >
+>(currentQuestions: Q, answers: AnswersMap, showAllErrors: boolean) {
+  const { requiredLabel, extensions } = useOneUIConfig("component.form");
+  const errorMap = useMemo(() => {
+    const ans = <T extends FormFieldView["type"]>(
+      question: Pick<FormField, "id"> & {
+        type: T;
+      }
+    ) =>
+      answers[question.id] as AnswerByField<{
+        type: T;
+      }>;
+    const errorsMap: {
+      [questionId: string]: string | undefined;
+    } = {};
+    for (let question of currentQuestions) {
+      const _isValidated = () => {
+        return isValidated(
+          ans(question),
+          !!question.optional,
+          question.validator,
+          requiredLabel
+        );
+      };
+      const updateDefaultError = () => {
+        const validation = _isValidated();
+        errorsMap[question.id] = validation.error;
+      };
+      switch (question.type) {
+        case "check":
+        case "rawcheck":
+          updateDefaultError();
+          if (question.validator)
+            errorsMap[question.id] = question.validator(
+              ans(question) as any
+            ) as string;
+          break;
+        case "number":
+        case "text":
+        case "select":
+        case "radio":
+        case "file":
+          updateDefaultError();
+          const validationResult = _isValidated();
+          if (validationResult.error)
+            errorsMap[question.id] = validationResult.error;
+          break;
+        default:
+          const extendedSupport =
+            extensions?.[
+              question.type as OnepercentUtility.UIElements.FormExtension["fields"]["type"]
+            ];
+          if (extendedSupport) {
+            const validationResultExtend = extendedSupport.validator(
+              ans(question) as any,
+              question as any
+            );
+            if (validationResultExtend.error)
+              errorsMap[question.id] = validationResultExtend.error;
+          } else {
+            updateDefaultError();
+          }
+      }
+    }
+
+    return errorsMap;
+  }, [currentQuestions, answers]);
+
+  const currentErrors = useMemo(() => {
+    return Object.entries(errorMap).reduce(
+      (r, [k, v]) => ({
+        ...r,
+        [k]: showAllErrors ? v : v !== requiredLabel ? v : undefined,
+      }),
+      {}
+    );
+  }, [showAllErrors, errorMap]);
+
+  return currentErrors as { [k in Q[number]["id"]]: string };
+}
+
+export function areAllQuestionsAnswered(
+  currentQuestions: FormField[],
+  answers: AnswersMap,
+  requiredLabel: string,
+  extensions: OneUIContextSpecs["component"]["form"]["extensions"]
+) {
+  const isValid = currentQuestions.reduce((answeredAll, question) => {
+    const ans = <T extends FormFieldView["type"]>(
+      question: FormField & {
+        type: T;
+      }
+    ) =>
+      answers[question.id] as unknown as AnswerByField<{
+        type: T;
+      }>;
+
+    const result =
+      answeredAll &&
+      (() => {
+        switch (question.type) {
+          case "accept":
+            const checks = ans(question) || [];
+            return question.accept.reduce(
+              (r, { optional }, idx) => r && (optional ? true : checks[idx]),
+              true
+            );
+          case "check":
+          case "rawcheck":
+            if (question.optional) return true;
+            if (question.validator)
+              return question.validator(ans(question) as any) as boolean;
+            const checkmarks = ans(question) || [];
+            return checkmarks.includes(true);
+          case "number":
+          case "text":
+          case "select":
+          case "radio":
+          case "file":
+            if (!answers[question.id]) return !!question.optional;
+            const validationResult = isValidated(
+              ans(question),
+              !!question.optional,
+              question.validator,
+              requiredLabel
+            );
+            return validationResult.isValid && answeredAll;
+          default:
+            const extendedSupport =
+              extensions?.[
+                question.type as OnepercentUtility.UIElements.FormExtension["fields"]["type"]
+              ];
+            if (extendedSupport) {
+              const validationResultExtend = extendedSupport.validator(
+                ans(question) as any,
+                question as any
+              );
+              return validationResultExtend.isValid;
+            } else
+              return question.validator
+                ? !!question.validator(ans(question) as any)
+                : !!ans(question);
+        }
+      })();
+    return result;
+  }, true);
+
+  return { isValid: !!isValid };
+}
+
+export const isValidated = (
+    _answer: AnswerByField<{ type: FormFieldTypes }>,
+  isOptional: boolean,
+  validator: ((val: any) => string | boolean) | undefined,
+  requiredFieldLabel: string
+) => {
+  const answer = Array.isArray(_answer) ? _answer[0] : _answer;
+  if (!answer && !isOptional)
+    return {
+      isValid: false,
+      error: requiredFieldLabel,
+    };
+  if (!validator)
+    if (Array.isArray(_answer)) {
+      const [_, isValid, error] = _answer;
+      return {
+        isValid,
+        error,
+      };
+    } else {
+      return {
+        isValid: true,
+        error: "",
+      };
+    }
+  const validationResult = validator(answer);
+  if (typeof validationResult === "string")
+    return {
+      isValid: false,
+      error: validationResult,
+    };
+  return {
+    isValid: validationResult,
+    error: "",
+  };
+};

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

@@ -0,0 +1,78 @@
+import React, {
+  ForwardedRef,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+} from "react";
+import { BaseQuestion, FormMode, FormViewProps } from "./Form.types";
+import { useFieldErrors, useForm } from "./Form.hook";
+import FormField from "./FormField";
+import { AnswerByField, FormFieldView } from "./FormField/FormField.types";
+
+export type FormRef<Q extends FormFieldView[]> = {
+  setAnswer<I extends Q[number]["id"]>(
+    questionId: I,
+    ans: AnswerByField<Q[number] & { id: I }>
+  ): void;
+};
+
+function Form<Q extends FormFieldView[]>(
+  { questions, initialAnswers = {}, ...props }: FormViewProps<Q>,
+  ref: ForwardedRef<FormRef<Q>>
+) {
+  const { mode = FormMode.WRITE } = props;
+  const { showAllErrors = false } = props as FormViewProps<Q> & {
+    mode: FormMode.WRITE;
+  };
+  const { answers, onAnswerAction, isQuestionsAnswered, isFilesUploaded } =
+    useForm(questions, initialAnswers, mode);
+  const errors = useFieldErrors(questions, answers, showAllErrors);
+
+  useEffect(() => {
+    if (props.mode !== FormMode.READ_ONLY)
+      props.onFormUpdate(
+        answers as any,
+        isQuestionsAnswered && isFilesUploaded
+      );
+  }, [answers, isQuestionsAnswered, isFilesUploaded]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      setAnswer(id, val) {
+        onAnswerAction(
+          questions.find((q) => q.id === id)!.type,
+          id,
+          val as any
+        );
+      },
+    }),
+    []
+  );
+
+  return (
+    <>
+      {questions.map((q) => (
+        <FormField
+          key={q.id}
+          config={q}
+          onAnswer={onAnswerAction}
+          value={answers[q.id] as any}
+          error={(errors as any)[q.id]}
+          mode={mode}
+        />
+      ))}
+    </>
+  );
+}
+
+/**
+ * Brainstorm:
+ * The answers must be externalized in some way because those answers will be manipulated
+ * There must be a way to disable non validation related errors
+ */
+
+/**
+ * A new and improved version of the one-ui design form
+ **/
+export default forwardRef(Form);