@onepercentio/one-ui 0.29.0 → 0.29.2

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

@@ -0,0 +1,11 @@
+import { PropsWithChildren, ReactElement, ReactNode } from "react";
+import { FileInputViewProps } from "../View.types";
+/**
+ * Shows the file submission input in a more compact form
+ **/
+declare function Compact({ states, file, footer, inputEl, onAction, progress, className, disabled, }: FileInputViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressIndicator({ progress, file, defaultIcon, Wrapper, }: Pick<FileInputViewProps, "progress" | "file"> & {
+    defaultIcon?: ReactElement;
+    Wrapper?: (p: PropsWithChildren<any>) => ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export default Compact;

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, } from "react";
+import Styles from "./Compact.module.scss";
+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, }) {
+    const state = states[file ? "fileProvided" : "waitingFile"];
+    const progressDashArray = useMemo(() => {
+        if (progress !== undefined) {
+            const strokePercent = (progress * 300) / 100;
+            return `${strokePercent}% ${300 - strokePercent}%`;
+        }
+    }, [progress]);
+    return (_jsxs("div", { className: `${Styles.root} ${className} ${disabled ? Styles.disabled : ""}`, onClick: onAction, style: {
+            "--progress-stroke-dasharray": progressDashArray,
+        }, children: [_jsx(ProgressIndicator, { file: file, progress: progress }), _jsxs("div", { children: [_jsx("p", { children: state.title }), state.description && _jsx("p", { children: state.description }), _jsx("p", { children: footer })] }), inputEl] }));
+}
+export function ProgressIndicator({ progress, file, defaultIcon, Wrapper = Button, }) {
+    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 (_jsx(_UncontrolledTransition, { transitionType: TransitionAnimationTypes.COIN_FLIP, className: Styles.icon, children: _jsx(Wrapper, { variant: "transparent", children: _jsxs("svg", { viewBox: "0 0 46 47", className: Styles[statusClass], fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "23", cy: "23.859", r: "22", style: { stroke: "var(--svg-color, #000)" }, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), statusClass === "completed" ? (_jsxs("g", { transform: "translate(11, 11)", children: [_jsx("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" }), _jsx("path", { d: "M22 4L12 14.01L9 11.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })) : (defaultIcon || (_jsxs("g", { transform: polylines[0], children: [_jsx("polyline", { points: polylines[1], strokeWidth: "2.8", style: { stroke: "var(--svg-color, #000)" }, "stroke-linecap": "round" }), _jsx("polyline", { points: polylines[2], strokeWidth: "2.8", style: { stroke: "var(--svg-color, #000)" }, "stroke-linecap": "round" })] })))] }) }, `${Styles.button} ${statusClass}`) }));
+}
+export default Compact;
+//# sourceMappingURL=Compact.js.map

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

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

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,2 @@
+export { default } from "./Compact";
+export * from "./Compact";

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

@@ -0,0 +1,3 @@
+export { default } from "./Compact";
+export * 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,MAAM,WAAW,CAAC;AACpC,cAAc,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,2 @@
+export { default } from "./FileInput";
+export * from "./FileInput";

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

@@ -0,0 +1,3 @@
+export { default } from "./FileInput";
+export * 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;AACtC,cAAc,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,2 @@
+export { default } from "./FlowController";
+export * from "./FlowController";

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

@@ -0,0 +1,3 @@
+export { default } from "./FlowController";
+export * 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;AAC3C,cAAc,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,2 @@
+export { default } from "./Form";
+export * from "./Form";

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

@@ -0,0 +1,3 @@
+export { default } from "./Form";
+export * 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;AACjC,cAAc,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;
+};