@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/components/Form/Form.tsx

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

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

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

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

@@ -1,78 +0,0 @@
-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);