@onepercentio/one-ui 0.28.9 → 0.29.1

package/dist-ts/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/dist-ts/components/FileInput/View/Compact/index.d.ts

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

package/dist-ts/components/FileInput/View/Compact/index.js

@@ -0,0 +1,2 @@
+export { default, ProgressIndicator } from './Compact';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/FileInput/View/Compact/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/FileInput/View/Compact/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC"}

package/dist-ts/components/FileInput/View/View.types.d.ts

@@ -0,0 +1,8 @@
+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/dist-ts/components/FileInput/View/View.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=View.types.js.map

package/dist-ts/components/FileInput/View/View.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"View.types.js","sourceRoot":"","sources":["../../../../src/components/FileInput/View/View.types.ts"],"names":[],"mappings":""}

package/dist-ts/components/FileInput/index.d.ts

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

package/dist-ts/components/FileInput/index.js

@@ -0,0 +1,2 @@
+export { default } from './FileInput';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/FileInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FileInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/dist-ts/components/FlowController/FlowController.d.ts

@@ -0,0 +1,23 @@
+import React, { JSX } from "react";
+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, style, wrapper: Wrapper, }: {
+    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]): import("react/jsx-runtime").JSX.Element;
+export declare function HeadingImage({ src }: {
+    src: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/FlowController/FlowController.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "../Button";
+import HeaderCloseBtn from "../HeaderCloseBtn";
+import Transition from "../Transition";
+import Styles from "./FlowController.module.scss";
+/**
+ * Container for a flow, managing the go back and close controller
+ **/
+export default function FlowController({ children, buttons, step, onClose, onBack, fullPage, firstStep = 0, style, wrapper: Wrapper = "div", }) {
+    function _handleBackPress() {
+        if (isAtFirstStep)
+            onClose && onClose();
+        else if (onBack)
+            onBack();
+    }
+    const isAtFirstStep = step === firstStep;
+    const shouldDisplayHeaderButton = (isAtFirstStep && onClose) || (!isAtFirstStep && onBack);
+    return (_jsxs(Wrapper, { onClick: (e) => e.stopPropagation(), className: Styles.container, style: style, children: [_jsx("header", { children: shouldDisplayHeaderButton && (_jsx(HeaderCloseBtn, { mode: isAtFirstStep ? "close" : "back", hidden: !onBack, onClick: _handleBackPress })) }), _jsx(Transition, { step: step, className: Styles.transition, contentClassName: `${fullPage ? Styles.fullHeight : ""} ${Styles.content}`, children: children }), _jsx("footer", { className: buttons.find((b) => b.state === "hidden") ? Styles.hidden : undefined, children: buttons.map((b) => (_jsx(Button, { onClick: b.onClick, disabled: b.state === "hidden" || b.state === "disabled", children: b.label }))) })] }));
+}
+export function HeadingImage({ src }) {
+    return _jsx("img", { src: src, className: Styles.headingImg });
+}
+//# sourceMappingURL=FlowController.js.map

package/dist-ts/components/FlowController/FlowController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowController.js","sourceRoot":"","sources":["../../../src/components/FlowController/FlowController.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAGlD;;IAEI;AACJ,MAAM,CAAC,OAAO,UAAU,cAAc,CAGpC,EACA,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,GAAG,CAAC,EACb,KAAK,EACL,OAAO,EAAE,OAAO,GAAG,KAAY,GAezB;IACN,SAAS,gBAAgB;QACvB,IAAI,aAAa;YAAE,OAAO,IAAI,OAAO,EAAE,CAAC;aACnC,IAAI,MAAM;YAAE,MAAM,EAAE,CAAC;IAC5B,CAAC;IAED,MAAM,aAAa,GAAG,IAAI,KAAK,SAAS,CAAC;IAEzC,MAAM,yBAAyB,GAC7B,CAAC,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,aAAa,IAAI,MAAM,CAAC,CAAC;IAE3D,OAAO,CACL,MAAC,OAAO,IACN,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EAC/C,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,KAAK,EAAE,KAAK,aAEZ,2BACG,yBAAyB,IAAI,CAC5B,KAAC,cAAc,IACb,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EACtC,MAAM,EAAE,CAAC,MAAM,EACf,OAAO,EAAE,gBAAgB,GACzB,CACH,GACM,EACT,KAAC,UAAU,IACT,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,gBAAgB,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IACpD,MAAM,CAAC,OACT,EAAE,YAED,QAAQ,GACE,EACb,iBACE,SAAS,EACP,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YAGtE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAClB,KAAC,MAAM,IACL,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,KAAK,KAAK,UAAU,YAEvD,CAAC,CAAC,KAAK,GACD,CACV,CAAC,GACK,IACD,CACX,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAAE,GAAG,EAAmB;IACnD,OAAO,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,GAAI,CAAC;AACzD,CAAC"}

package/dist-ts/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/dist-ts/components/FlowController/index.d.ts

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

package/dist-ts/components/FlowController/index.js

@@ -0,0 +1,2 @@
+export { default } from './FlowController';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/FlowController/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FlowController/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/dist-ts/components/Form/Form.d.ts

@@ -0,0 +1,49 @@
+import React, { ComponentProps, FunctionComponent, RefObject } from "react";
+import Input from "../Input";
+import Button from "../Button";
+import EmailInput from "../EmailInput";
+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;
+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>;
+};
+declare const FirebaseForm: React.ForwardRefExoticComponent<Omit<FirebaseFormProps<BaseForm>, "ref"> & React.RefAttributes<FormInterface>>;
+export default FirebaseForm;

package/dist-ts/components/Form/Form.js

@@ -0,0 +1,69 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, 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";
+function AdvancedAction({ config, submited, submitting, isValid, onClick, btnProps, }) {
+    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 (_jsx(AdaptiveButton, { variant: "filled", className: className, disabled: !isValid, onClick: onClick, ...btnProps, children: _jsx(Element, {}, key + salt) }));
+}
+function _FirebaseForm({ submitting, onSubmit, submited, config, submitBtn, btnProps = {}, }, ref) {
+    const [form, setform] = useState({});
+    const isValid = useMemo(() => !Object.keys(config).some((a) => typeof config[a].validator(form[a], form) === "string"), [form]);
+    async function sendContact(_form) {
+        onSubmit(_form);
+    }
+    useImperativeHandle(ref, () => ({
+        clear: () => setform({}),
+    }), [ref]);
+    return (_jsxs(_Fragment, { children: [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 (_createElement(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 } }) => {
+                                let _value = isNumber ? Number(value) : value;
+                                if (isNumber && Number.isNaN(_value)) {
+                                    _value = undefined;
+                                }
+                                setform({
+                                    ...form,
+                                    [c]: _value,
+                                });
+                            } }));
+                    case "email":
+                        return (_jsx(EmailInput, { ...fieldConfig, name: c, hideError: "onfocus", error: form[c] && invalidMessage !== true
+                                ? invalidMessage
+                                : undefined, placeholder: config[c].placeholder, value: form[c] || "", onChange: (email) => setform({
+                                ...form,
+                                [c]: email,
+                            }) }, c));
+                    case "textarea":
+                        return (_jsx(Input, { name: c, hideError: "onfocus", error: form[c] && invalidMessage !== true
+                                ? invalidMessage
+                                : undefined, placeholder: config[c].placeholder, value: form[c] || "", onChange: ({ target: { value } }) => setform({
+                                ...form,
+                                [c]: value,
+                            }), multiline: fieldConfig.lines }, c));
+                }
+            }), typeof submitBtn === "string" ? (_jsxs(Button, { variant: "filled", disabled: submitting || !isValid || submited !== undefined, onClick: () => sendContact(form), ...btnProps, children: [submitBtn, "\u00A0", submitting && _jsx(Loader, {})] })) : (_jsx(AdvancedAction, { config: submitBtn, isValid: isValid, onClick: () => sendContact(form), submitting: submitting, submited: submited, btnProps: btnProps }))] }));
+}
+const FirebaseForm = forwardRef(_FirebaseForm);
+export default FirebaseForm;
+//# sourceMappingURL=Form.js.map

package/dist-ts/components/Form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"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"}

package/dist-ts/components/Form/index.d.ts

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

package/dist-ts/components/Form/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Form";
+//# sourceMappingURL=index.js.map

package/dist-ts/components/Form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/dist-ts/components/Form/v2/Form.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { FormViewProps } from "./Form.types";
+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;
+};
+/**
+ * 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
+ **/
+declare const _default: React.ForwardRefExoticComponent<FormViewProps<FormFieldView[]> & React.RefAttributes<FormRef<FormFieldView[]>>>;
+export default _default;

package/dist-ts/components/Form/v2/Form.hook.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { OneUIContextSpecs } from "../../../context/OneUIProvider";
+import { AnswerAction, AnswerByField, FormField, FormFieldTypes, FormFieldView, FormMode } from "./FormField/FormField.types";
+import { AnswersMap } from "./Form.types";
+export declare function useFormAnswers<A extends AnswersMap<any> = AnswersMap>(defaultAnswers: A, mode: FormMode): {
+    answers: A;
+    setAnswers: import("react").Dispatch<import("react").SetStateAction<A>>;
+};
+export declare function useFormState(currentQuestions: FormFieldView[], { answers, setAnswers }: ReturnType<typeof useFormAnswers>): {
+    answers: Partial<{
+        [x: string]: any;
+    }>;
+    isQuestionsAnswered: boolean;
+    isFilesUploaded: boolean;
+    onAnswerAction: <T extends FormFieldTypes>(questionType: T, id: string, answer: AnswerAction<{
+        type: T;
+    }> | undefined) => void;
+    questions: FormFieldView[];
+};
+export declare function useForm(currentQuestions: FormFieldView[], defaultAnswers: AnswersMap, mode: FormMode): {
+    answers: Partial<{
+        [x: string]: any;
+    }>;
+    isQuestionsAnswered: boolean;
+    isFilesUploaded: boolean;
+    onAnswerAction: <T extends FormFieldTypes>(questionType: T, id: string, answer: AnswerAction<{
+        type: T;
+    }> | undefined) => void;
+    questions: FormFieldView[];
+};
+export declare function useFieldErrors<Q extends Readonly<Pick<FormField, "type" | "id" | "optional" | "validator">[]>>(currentQuestions: Q, answers: AnswersMap, showAllErrors: boolean): { [k in Q[number]["id"]]: string; };
+export declare function areAllQuestionsAnswered(currentQuestions: FormField[], answers: AnswersMap, requiredLabel: string, extensions: OneUIContextSpecs["component"]["form"]["extensions"]): {
+    isValid: boolean;
+};
+export declare const isValidated: (_answer: AnswerByField<{
+    type: FormFieldTypes;
+}>, isOptional: boolean, validator: ((val: any) => string | boolean) | undefined, requiredFieldLabel: string) => {
+    isValid: any;
+    error: any;
+};

package/dist-ts/components/Form/v2/Form.hook.js

@@ -0,0 +1,222 @@
+import { useLayoutEffect, useMemo, useState } from "react";
+import { useOneUIConfig, } from "../../../context/OneUIProvider";
+import { FormMode, } from "./FormField/FormField.types";
+export function useFormAnswers(defaultAnswers, mode) {
+    const [answers, setAnswers] = useState(() => {
+        const clone = {
+            ...defaultAnswers,
+        };
+        if (mode === FormMode.READ_ONLY)
+            return clone;
+        return clone;
+    });
+    return {
+        answers,
+        setAnswers,
+    };
+}
+export function useFormState(currentQuestions, { answers, setAnswers }) {
+    const formConfig = useOneUIConfig("component.form");
+    const { isValid: isQuestionsAnswered } = useMemo(() => {
+        return areAllQuestionsAnswered(currentQuestions, answers, formConfig.requiredLabel, formConfig.extensions);
+    }, [answers, currentQuestions]);
+    const onAnswerAction = (questionType, id, answer) => {
+        switch (questionType) {
+            case "file":
+                const { onFileUpload } = formConfig;
+                setAnswers((prev) => {
+                    const file = answer;
+                    if (file)
+                        return {
+                            ...prev,
+                            [id]: onFileUpload(id, file),
+                        };
+                    delete prev[id];
+                    return { ...prev };
+                });
+                break;
+            default:
+                setAnswers((prev) => ({
+                    ...prev,
+                    [id]: answer,
+                }));
+        }
+    };
+    const isFilesUploaded = useFileUploads(currentQuestions, answers);
+    return {
+        answers,
+        isQuestionsAnswered,
+        isFilesUploaded,
+        onAnswerAction,
+        questions: currentQuestions,
+    };
+}
+export function useForm(currentQuestions, defaultAnswers, mode) {
+    const answers = useFormAnswers(defaultAnswers, mode);
+    return useFormState(currentQuestions, answers);
+}
+function useFileUploads(questions, answers) {
+    const fileUploadQuestions = useMemo(() => questions.filter((a) => a.type === "file"), [questions]);
+    const [fileUploadStatus, setFileUploadStatus] = useState({});
+    useLayoutEffect(() => {
+        const unsubs = [];
+        for (let fileQuestion of fileUploadQuestions) {
+            const uploadTask = answers[fileQuestion.id];
+            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(currentQuestions, answers, showAllErrors) {
+    const { requiredLabel, extensions } = useOneUIConfig("component.form");
+    const errorMap = useMemo(() => {
+        const ans = (question) => answers[question.id];
+        const errorsMap = {};
+        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));
+                    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];
+                    if (extendedSupport) {
+                        const validationResultExtend = extendedSupport.validator(ans(question), question);
+                        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;
+}
+export function areAllQuestionsAnswered(currentQuestions, answers, requiredLabel, extensions) {
+    const isValid = currentQuestions.reduce((answeredAll, question) => {
+        const ans = (question) => answers[question.id];
+        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));
+                        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];
+                        if (extendedSupport) {
+                            const validationResultExtend = extendedSupport.validator(ans(question), question);
+                            return validationResultExtend.isValid;
+                        }
+                        else
+                            return question.validator
+                                ? !!question.validator(ans(question))
+                                : !!ans(question);
+                }
+            })();
+        return result;
+    }, true);
+    return { isValid: !!isValid };
+}
+export const isValidated = (_answer, isOptional, validator, requiredFieldLabel) => {
+    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: "",
+    };
+};
+//# sourceMappingURL=Form.hook.js.map