@onepercentio/one-ui 0.2.6 → 0.4.0

package/dist/context/OneUIProvider.d.ts

@@ -1,12 +1,14 @@
+import { Get } from "type-fest";
 import React from "react";
 import { PropsWithChildren } from "react";
+import { FieldPath } from "../utils";
 declare type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends Function ? T[P] : DeepPartial<T[P]>;
 };
 declare type ContextSpecs = {
     component: {
-        text: {
-            className: {
+        text?: {
+            className?: {
                 [k in React.ComponentProps<typeof import("../components/Text")["default"]>["type"]]?: string;
             };
         };
@@ -62,6 +64,6 @@ declare type ContextConfigSpecs = DeepPartial<ContextSpecs>;
 export default function OneUIProvider({ children, config, }: PropsWithChildren<{
     config: ContextConfigSpecs;
 }>): JSX.Element;
-export declare function ProtectVariableAccess(obj?: any, basePath?: string[]): any;
 export declare function useOneUIContext(): ContextSpecs;
+export declare function useOneUIConfig<P extends FieldPath<ContextSpecs>, T extends Get<ContextSpecs, P>>(prop: P, defaultValue?: T): NonNullable<Get<ContextSpecs, P>>;
 export {};

package/dist/context/OneUIProvider.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOneUIContext = exports.ProtectVariableAccess = void 0;
-const lodash_1 = require("lodash");
+exports.useOneUIConfig = exports.useOneUIContext = void 0;
+const get_1 = __importDefault(require("lodash/get"));
 const react_1 = __importDefault(require("react"));
 const react_2 = require("react");
 const Context = (0, react_2.createContext)(null);
@@ -12,60 +12,49 @@ function OneUIProvider({ children, config, }) {
     return react_1.default.createElement(Context.Provider, { value: config }, children);
 }
 exports.default = OneUIProvider;
-const debouncedError = (0, lodash_1.debounce)((message) => {
-    const event = new Event("error");
-    event.error = new Error(message);
-    window.dispatchEvent(event);
-}, 100);
-const IGNORED_KEYS = ["className"];
-function ProtectVariableAccess(obj, basePath = []) {
-    const proxyInstance = new Proxy(() => obj || {}, {
-        apply: (target) => {
-            return String(target());
-        },
-        get: (ctx, variable) => {
-            const value = ctx()[variable];
-            if (variable === Symbol.toPrimitive)
-                return () => value;
-            if (value === undefined) {
-                const path = [...basePath, variable.toString()];
-                if (/[^A-Z]/.test(String(variable).charAt(0))) {
-                    switch (basePath.join(".")) {
-                        case "component.text.className":
-                            return undefined;
-                        case "component.text":
-                        case "component.input":
-                            return {};
-                    }
-                    if (!IGNORED_KEYS.includes(path[path.length - 1]))
-                        debouncedError(`A component is using the UI config ${path.join(".")}.
-          
+function ErrorWrapper(originalObject, path = "config") {
+    return new Proxy(originalObject || {}, {
+        get(_target, key) {
+            if (key === Symbol.toPrimitive) {
+                return () => _target[key];
+            }
+            try {
+                const value = originalObject[key];
+                if (typeof value === "undefined" || typeof value === "object")
+                    return ErrorWrapper(value, [path, key].filter(Boolean).join("."));
+                return value;
+            }
+            catch (e) {
+                const pathJson = path
+                    .split(".")
+                    .concat(key)
+                    .reduce((result, key, idx, arr) => {
+                    arr.slice(0, idx).reduce((r, k) => r[k], result)[key] = idx === arr.length - 1 ? `THE_MISSING_CONFIG` : {};
+                    return result;
+                }, {});
+                throw new Error(`A component is using the UI config ${[path, key].join(".")}.
+
 Please define it using:
 import OneUIProvider from "@onepercent/one-ui/dist/context/OneUIProvider";
+
+  ...
+${`<OneUIProvider config={${JSON.stringify(pathJson, null, 4)}}>
 ...
-  <OneUIProvider config={THE_MISSING_CONFIG}>
-    ...
-  </OneUIProvider>`);
-                }
-                else {
-                    debouncedError.cancel();
-                }
+</OneUIProvider>`.replace(/[ ]/g, "-")}`);
             }
-            if ((typeof value === "object" && !Array.isArray(value)) ||
-                (value === undefined && /[^A-Z]/.test(String(variable).charAt(0))))
-                return ProtectVariableAccess(value, [...basePath, variable.toString()]);
-            return value;
         },
     });
-    return proxyInstance;
 }
-exports.ProtectVariableAccess = ProtectVariableAccess;
 function useOneUIContext() {
     const context = (0, react_2.useContext)(Context);
-    if (process.env.NODE_ENV === "development") {
-        return ProtectVariableAccess(context);
-    }
+    if (process.env.NODE_ENV === "development")
+        return ErrorWrapper(context);
     return context;
 }
 exports.useOneUIContext = useOneUIContext;
+function useOneUIConfig(prop, defaultValue) {
+    const context = (0, react_2.useContext)(Context);
+    return ErrorWrapper((0, get_1.default)(context, prop) || defaultValue);
+}
+exports.useOneUIConfig = useOneUIConfig;
 //# sourceMappingURL=OneUIProvider.js.map

package/dist/context/OneUIProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OneUIProvider.js","sourceRoot":"","sources":["../../src/context/OneUIProvider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"OneUIProvider.js","sourceRoot":"","sources":["../../src/context/OneUIProvider.tsx"],"names":[],"mappings":";;;;;;AACA,qDAA6B;AAE7B,kDAAyC;AACzC,iCAAqE;AA2DrE,MAAM,OAAO,GAAG,IAAA,qBAAa,EAAqB,IAAW,CAAC,CAAC;AAE/D,SAAwB,aAAa,CAAC,EACpC,QAAQ,EACR,MAAM,GAC4C;IAClD,OAAO,8BAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,IAAG,QAAQ,CAAoB,CAAC;AACxE,CAAC;AALD,gCAKC;AAED,SAAS,YAAY,CACnB,cAAmB,EACnB,OAAe,QAAQ;IAEvB,OAAO,IAAI,KAAK,CAAC,cAAc,IAAI,EAAE,EAAE;QACrC,GAAG,CAAC,OAAO,EAAE,GAAG;YACd,IAAI,GAAG,KAAK,MAAM,CAAC,WAAW,EAAE;gBAC9B,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;aAC3B;YACD,IAAI;gBACF,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;gBAClC,IAAI,OAAO,KAAK,KAAK,WAAW,IAAI,OAAO,KAAK,KAAK,QAAQ;oBAC3D,OAAO,YAAY,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;gBACpE,OAAO,KAAK,CAAC;aACd;YAAC,OAAO,CAAC,EAAE;gBACV,MAAM,QAAQ,GAAG,IAAI;qBAClB,KAAK,CAAC,GAAG,CAAC;qBACV,MAAM,CAAC,GAAa,CAAC;qBACrB,MAAM,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE;oBAC/B,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAE,CAAS,CAAC,CAAC,CAAC,EAAE,MAAM,CAAS,CAChE,GAAG,CACJ,GAAG,GAAG,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;oBACvD,OAAO,MAAM,CAAC;gBAChB,CAAC,EAAE,EAAE,CAAC,CAAC;gBACT,MAAM,IAAI,KAAK,CACb,sCAAsC,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;EAMnE,0BAA0B,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;;iBAE5C,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAC/B,CAAC;aACH;QACH,CAAC;KACF,CAAC,CAAC;AACL,CAAC;AAED,SAAgB,eAAe;IAC7B,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,OAAO,CAAC,CAAC;IAEpC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa;QACxC,OAAO,YAAY,CAAC,OAAO,CAA4B,CAAC;IAE1D,OAAO,OAAuB,CAAC;AACjC,CAAC;AAPD,0CAOC;AAED,SAAgB,cAAc,CAG5B,IAAO,EAAE,YAAgB;IACzB,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,OAAO,CAAC,CAAC;IACpC,OAAO,YAAY,CAAC,IAAA,aAAG,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,YAAY,CAAmB,CAAC;AAC5E,CAAC;AAND,wCAMC"}

package/dist/hooks/shims/ObjectWatchShim.js

@@ -3,6 +3,7 @@
 // object.watch
 if (!Object.prototype.watch)
     Object.prototype.watch = function (propsToWatchFor, handler) {
+        (this._handlers || (this._handlers = [])).push(handler);
         propsToWatchFor.forEach((prop) => {
             var oldval = this[prop], newval = oldval, getter = function () {
                 return newval;
@@ -10,7 +11,8 @@ if (!Object.prototype.watch)
                 if (this._watchTimer)
                     clearTimeout(this._watchTimer);
                 this._watchTimer = setTimeout(() => {
-                    handler.call();
+                    for (let handler of this._handlers)
+                        handler.call();
                     clearTimeout(this._watchTimer);
                     delete this._watchTimer;
                 }, 0);
@@ -20,12 +22,13 @@ if (!Object.prototype.watch)
             };
             if (delete this[prop]) {
                 // can't watch constants
-                if (Object.defineProperty)
-                    // ECMAScript 5
+                if (Object.defineProperty) {
+                    // ECMAScript 5          
                     Object.defineProperty(this, prop, {
                         get: getter,
                         set: setter,
                     });
+                }
                 else if (Object.prototype.__defineGetter__ &&
                     Object.prototype.__defineSetter__) {
                     // legacy
@@ -34,15 +37,9 @@ if (!Object.prototype.watch)
                 }
             }
         });
-        function _unwatch(prop) {
-            var val = this[prop];
-            delete this[prop]; // remove accessors
-            this[prop] = val;
-        }
-        this.unwatch = function () {
-            propsToWatchFor.forEach((prop) => {
-                _unwatch(prop);
-            });
+        this.unwatch = () => {
+            this._handlers.splice(this._handlers.indexOf(handler), 1);
         };
+        return this.unwatch;
     };
 //# sourceMappingURL=ObjectWatchShim.js.map

package/dist/hooks/shims/ObjectWatchShim.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectWatchShim.js","sourceRoot":"","sources":["../../../src/hooks/shims/ObjectWatchShim.ts"],"names":[],"mappings":";AAAA,cAAc;AACd,eAAe;AACf,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK;IACzB,MAAM,CAAC,SAAS,CAAC,KAAK,GAAG,UAAU,eAAe,EAAE,OAAO;QACzD,eAAe,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC/B,IAAI,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,EACrB,MAAM,GAAG,MAAM,EACf,MAAM,GAAG;gBACP,OAAO,MAAM,CAAC;YAChB,CAAC,EACD,MAAM,GAAG,UAAU,GAAG;gBACpB,IAAI,IAAI,CAAC,WAAW;oBAAE,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBACrD,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,GAAG,EAAE;oBACjC,OAAO,CAAC,IAAI,EAAE,CAAC;oBACf,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;oBAC/B,OAAO,IAAI,CAAC,WAAW,CAAC;gBAC1B,CAAC,EAAE,CAAC,CAAC,CAAC;gBACN,MAAM,GAAG,MAAM,CAAC;gBAChB,MAAM,GAAG,GAAG,CAAC;gBACb,OAAO,IAAI,CAAC;YACd,CAAC,CAAC;YACJ,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE;gBACrB,wBAAwB;gBACxB,IAAI,MAAM,CAAC,cAAc;oBACvB,eAAe;oBACf,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE;wBAChC,GAAG,EAAE,MAAM;wBACX,GAAG,EAAE,MAAM;qBACZ,CAAC,CAAC;qBACA,IACH,MAAM,CAAC,SAAS,CAAC,gBAAgB;oBACjC,MAAM,CAAC,SAAS,CAAC,gBAAgB,EACjC;oBACA,SAAS;oBACT,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;oBAC3D,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;iBAC5D;aACF;QACH,CAAC,CAAC,CAAC;QACH,SAAS,QAAQ,CAAC,IAAI;YACpB,IAAI,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;YACrB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAmB;YACtC,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC;QACnB,CAAC;QACD,IAAI,CAAC,OAAO,GAAG;YACb,eAAe,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBAC/B,QAAQ,CAAC,IAAI,CAAC,CAAC;YACjB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC,CAAC"}
+{"version":3,"file":"ObjectWatchShim.js","sourceRoot":"","sources":["../../../src/hooks/shims/ObjectWatchShim.ts"],"names":[],"mappings":";AAAA,cAAc;AACd,eAAe;AACf,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK;IACzB,MAAM,CAAC,SAAS,CAAC,KAAK,GAAG,UAAU,eAAe,EAAE,OAAO;QACzD,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QACvD,eAAe,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC/B,IAAI,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,EACrB,MAAM,GAAG,MAAM,EACf,MAAM,GAAG;gBACP,OAAO,MAAM,CAAC;YAChB,CAAC,EACD,MAAM,GAAG,UAAU,GAAG;gBACpB,IAAI,IAAI,CAAC,WAAW;oBAAE,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBACrD,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,GAAG,EAAE;oBACjC,KAAK,IAAI,OAAO,IAAI,IAAI,CAAC,SAAS;wBAChC,OAAO,CAAC,IAAI,EAAE,CAAC;oBACjB,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;oBAC/B,OAAO,IAAI,CAAC,WAAW,CAAC;gBAC1B,CAAC,EAAE,CAAC,CAAC,CAAC;gBACN,MAAM,GAAG,MAAM,CAAC;gBAChB,MAAM,GAAG,GAAG,CAAC;gBACb,OAAO,IAAI,CAAC;YACd,CAAC,CAAC;YACJ,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE;gBACrB,wBAAwB;gBACxB,IAAI,MAAM,CAAC,cAAc,EAAE;oBACzB,yBAAyB;oBACzB,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE;wBAChC,GAAG,EAAE,MAAM;wBACX,GAAG,EAAE,MAAM;qBACZ,CAAC,CAAC;iBACJ;qBACI,IACH,MAAM,CAAC,SAAS,CAAC,gBAAgB;oBACjC,MAAM,CAAC,SAAS,CAAC,gBAAgB,EACjC;oBACA,SAAS;oBACT,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;oBAC3D,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;iBAC5D;aACF;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,OAAO,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;QAC5D,CAAC,CAAC;QAEF,OAAO,IAAI,CAAC,OAAO,CAAA;IACrB,CAAC,CAAC"}

package/dist/hooks/useAsyncControl.js

@@ -13,7 +13,7 @@ const react_1 = require("react");
 function useAsyncControl() {
     const [error, setError] = (0, react_1.useState)();
     const [loading, setLoading] = (0, react_1.useState)(false);
-    const _process = (asyncFn) => __awaiter(this, void 0, void 0, function* () {
+    const _process = (0, react_1.useCallback)((asyncFn) => __awaiter(this, void 0, void 0, function* () {
         try {
             setLoading(true);
             setError(undefined);
@@ -27,7 +27,7 @@ function useAsyncControl() {
         finally {
             setLoading(false);
         }
-    });
+    }), []);
     return {
         process: _process,
         loading,

package/dist/hooks/useAsyncControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAsyncControl.js","sourceRoot":"","sources":["../../src/hooks/useAsyncControl.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,iCAAiC;AAGjC,SAAwB,eAAe;IACrC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,GAAK,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEvD,MAAM,QAAQ,GAAG,CAAO,OAA2B,EAAE,EAAE;QACrD,IAAI;YACF,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,MAAM,OAAO,EAAE,CAAC;SACjB;QAAC,OAAO,CAAC,EAAE;YACV,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa;gBAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC7D,QAAQ,CAAC,kBAAuB,CAAC,CAAC;SACnC;gBAAS;YACR,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;IACH,CAAC,CAAA,CAAC;IAEF,OAAO;QACL,OAAO,EAAE,QAAQ;QACjB,OAAO;QACP,KAAK;QACL,QAAQ;QACR,UAAU;KACX,CAAC;AACJ,CAAC;AAxBD,kCAwBC"}
+{"version":3,"file":"useAsyncControl.js","sourceRoot":"","sources":["../../src/hooks/useAsyncControl.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,iCAA8C;AAG9C,SAAwB,eAAe;IACrC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,GAAK,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEvD,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAAC,CAAO,OAA2B,EAAE,EAAE;QACjE,IAAI;YACF,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,MAAM,OAAO,EAAE,CAAC;SACjB;QAAC,OAAO,CAAC,EAAE;YACV,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa;gBAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC7D,QAAQ,CAAC,kBAAuB,CAAC,CAAC;SACnC;gBAAS;YACR,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;IACH,CAAC,CAAA,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,OAAO,EAAE,QAAQ;QACjB,OAAO;QACP,KAAK;QACL,QAAQ;QACR,UAAU;KACX,CAAC;AACJ,CAAC;AAxBD,kCAwBC"}

package/dist/hooks/useForm.d.ts

@@ -0,0 +1,16 @@
+import { BaseForm, FieldDefinition, FieldTypes } from "../components/Form/Form";
+declare type Intermediary<F extends BaseForm> = {
+    form: F;
+    formValidation: {
+        [k in keyof F]: string;
+    } & {
+        isValid: string | true;
+    };
+    set: <K extends keyof F>(k: K, value: F[K]) => void;
+};
+export declare type FormControls<C extends FormConfig<any>> = Intermediary<C extends FormConfig<infer F> ? F : never>;
+export declare type FormConfig<T extends BaseForm> = {
+    [k in keyof T]: FieldDefinition<T, k, FieldTypes>;
+};
+export default function useContextForm<T extends BaseForm>(config: FormConfig<T>, initialState: T): FormControls<FormConfig<T>>;
+export {};

package/dist/hooks/useForm.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useContextForm(config, initialState) {
+    const [form, setForm] = (0, react_1.useState)(initialState);
+    const isValid = (0, react_1.useMemo)(() => !Object.keys(config).some((a) => typeof config[a].validator(form[a], form) === "string"), [form]);
+    const _setFormField = (key, value) => {
+        setForm(prev => (Object.assign(Object.assign({}, prev), { [key]: value })));
+    };
+    const validFormFields = (0, react_1.useMemo)(() => {
+        return Object.keys(config).reduce((result, field) => {
+            const fieldConfig = config[field];
+            const invalidMessage = fieldConfig.validator(form[field], form);
+            return Object.assign(Object.assign({}, result), { [field]: invalidMessage });
+        }, { isValid });
+    }, [form, isValid]);
+    return {
+        form: form,
+        formValidation: validFormFields,
+        set: _setFormField
+    };
+}
+exports.default = useContextForm;
+//# sourceMappingURL=useForm.js.map

package/dist/hooks/useForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForm.js","sourceRoot":"","sources":["../../src/hooks/useForm.ts"],"names":[],"mappings":";;AAAA,iCAAkD;AAYlD,SAAwB,cAAc,CAClC,MAAqB,EACrB,YAAe;IAEf,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAa,YAAY,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAA,eAAO,EACnB,GAAG,EAAE,CACD,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CACrB,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,QAAQ,CAChE,EACL,CAAC,IAAI,CAAC,CACT,CAAC;IAEF,MAAM,aAAa,GAAmD,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QACjF,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,iCACT,IAAI,KACP,CAAC,GAAG,CAAC,EAAE,KAAK,IACd,CAAC,CAAA;IACP,CAAC,CAAA;IAED,MAAM,eAAe,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACjC,OAAO,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,KAAc,EAAE,EAAE;YACzD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;YAClC,MAAM,cAAc,GAAG,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;YAChE,uCACO,MAAM,KACT,CAAC,KAAK,CAAC,EAAE,cAAc,IAC1B;QACL,CAAC,EAAE,EAAE,OAAO,EAA8D,CAAC,CAAA;IAC/E,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpB,OAAO;QACH,IAAI,EAAE,IAAI;QACV,cAAc,EAAE,eAAe;QAC/B,GAAG,EAAE,aAAa;KACd,CAAA;AACZ,CAAC;AApCD,iCAoCC"}

package/dist/hooks/useObserve.d.ts

@@ -1,2 +1,2 @@
 import "./shims/ObjectWatchShim.js";
-export default function useObserve<T extends any>(object: T, keysToObserve: (keyof T)[]): void;
+export default function useObserve<T extends any>(toObserve: T | T[], keysToObserve: (keyof T)[]): void;

package/dist/hooks/useObserve.js

@@ -2,13 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 require("./shims/ObjectWatchShim.js");
-function useObserve(object, keysToObserve) {
+function useObserve(toObserve, keysToObserve) {
     const [_, ss] = (0, react_1.useState)(0);
     (0, react_1.useLayoutEffect)(() => {
-        return object.watch(keysToObserve, () => {
-            ss((p) => p + 1);
-        });
-    }, [object]);
+        const arr = Array.isArray(toObserve) ? toObserve : [toObserve];
+        for (let object of arr)
+            return object.watch(keysToObserve, () => {
+                ss((p) => {
+                    return p + 1;
+                });
+            });
+    }, [toObserve]);
 }
 exports.default = useObserve;
 //# sourceMappingURL=useObserve.js.map

package/dist/hooks/useObserve.js.map

@@ -1 +1 @@
-{"version":3,"file":"useObserve.js","sourceRoot":"","sources":["../../src/hooks/useObserve.ts"],"names":[],"mappings":";;AAAA,iCAA6D;AAC7D,sCAAoC;AAOpC,SAAwB,UAAU,CAChC,MAAS,EACT,aAA0B;IAE1B,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAC5B,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,OAAQ,MAAiB,CAAC,KAAK,CAAC,aAAoB,EAAE,GAAG,EAAE;YACzD,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,CAAC;AAVD,6BAUC"}
+{"version":3,"file":"useObserve.js","sourceRoot":"","sources":["../../src/hooks/useObserve.ts"],"names":[],"mappings":";;AAAA,iCAA6D;AAC7D,sCAAoC;AAOpC,SAAwB,UAAU,CAChC,SAAkB,EAClB,aAA0B;IAE1B,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAC5B,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;QAC9D,KAAK,IAAI,MAAM,IAAI,GAAG;YACpB,OAAQ,MAAiB,CAAC,KAAK,CAAC,aAAoB,EAAE,GAAG,EAAE;gBACzD,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE;oBACP,OAAO,CAAC,GAAG,CAAC,CAAA;gBACd,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AAClB,CAAC;AAdD,6BAcC"}

package/dist/hooks/useRebound.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * This hook adds a prop that you can toggle and returns to initial
+ * state after a defined time (usefull for notification)
+ */
+export default function useRebound<T extends any>(initialValue: T, timeoutSec?: number): {
+    current: T;
+    setState: import("react").Dispatch<import("react").SetStateAction<T>>;
+};

package/dist/hooks/useRebound.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * This hook adds a prop that you can toggle and returns to initial
+ * state after a defined time (usefull for notification)
+ */
+function useRebound(initialValue, timeoutSec = 1) {
+    const [state, setState] = (0, react_1.useState)(initialValue);
+    (0, react_1.useEffect)(() => {
+        if (state !== initialValue) {
+            const timeout = setTimeout(() => {
+                setState(initialValue);
+            }, timeoutSec * 1000);
+            return () => clearTimeout(timeout);
+        }
+    }, [state]);
+    return {
+        current: state,
+        setState
+    };
+}
+exports.default = useRebound;
+//# sourceMappingURL=useRebound.js.map

package/dist/hooks/useRebound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRebound.js","sourceRoot":"","sources":["../../src/hooks/useRebound.ts"],"names":[],"mappings":";;AAAA,iCAA2C;AAE3C;;;GAGG;AACH,SAAwB,UAAU,CAAgB,YAAe,EAAE,aAAqB,CAAC;IACrF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAI,YAAY,CAAC,CAAA;IAEnD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,KAAK,KAAK,YAAY,EAAE;YACxB,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC5B,QAAQ,CAAC,YAAY,CAAC,CAAA;YAC1B,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC,CAAC;YAEtB,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SACtC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,OAAO;QACH,OAAO,EAAE,KAAK;QACd,QAAQ;KACX,CAAA;AACL,CAAC;AAhBD,6BAgBC"}

package/dist/hooks/useShortIntl.d.ts

@@ -2,6 +2,7 @@ import { IntlFormatters, IntlShape } from "react-intl";
 import { BigNumber } from "bignumber.js";
 export default function useShortIntl(): IntlShape & {
     txt: (id: OnepercentUtility.IntlIds, params?: Parameters<IntlFormatters["formatMessage"]>[1]) => ReturnType<IntlFormatters["formatMessage"]>;
+    formatToDoubleDecimal(number: number, options?: Parameters<IntlFormatters["formatNumber"]>[1]): string;
     formatBigNumber(number: BigNumber, options?: Parameters<IntlFormatters["formatNumber"]>[1]): string;
 };
 declare type StrMap = {

package/dist/hooks/useShortIntl.js

@@ -4,10 +4,13 @@ exports.isolateMessages = void 0;
 const react_intl_1 = require("react-intl");
 function useShortIntl() {
     const intl = (0, react_intl_1.useIntl)();
-    const { formatMessage } = intl;
+    const { formatMessage, formatNumber } = intl;
     return Object.assign(Object.assign({}, intl), { txt: (id, params) => {
             return formatMessage({ id }, params);
-        }, formatBigNumber(bigNumber, options) {
+        }, formatToDoubleDecimal(val, options = {}) {
+            return formatNumber(val, Object.assign({ minimumFractionDigits: 2, maximumFractionDigits: 2 }, options));
+        },
+        formatBigNumber(bigNumber, options) {
             const { decimalSeparator } = intl
                 .formatNumberToParts(1000.1)
                 .reduce((r, a) => {

package/dist/hooks/useShortIntl.js.map

@@ -1 +1 @@
-{"version":3,"file":"useShortIntl.js","sourceRoot":"","sources":["../../src/hooks/useShortIntl.ts"],"names":[],"mappings":";;;AAAA,2CAAgE;AAGhE,SAAwB,YAAY;IAUlC,MAAM,IAAI,GAAG,IAAA,oBAAO,GAAE,CAAC;IACvB,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;IAC/B,uCACK,IAAI,KACP,GAAG,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE;YAClB,OAAO,aAAa,CAAC,EAAE,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC;QACvC,CAAC,EACD,eAAe,CAAC,SAAS,EAAE,OAAO;YAChC,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI;iBAC9B,mBAAmB,CAAC,MAAM,CAAC;iBAC3B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS;oBAAE,uCAAY,CAAC,KAAE,gBAAgB,EAAE,CAAC,CAAC,KAAK,IAAG;gBACrE,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO;oBAAE,uCAAY,CAAC,KAAE,iBAAiB,EAAE,CAAC,CAAC,KAAK,IAAG;gBACpE,OAAO,CAAC,CAAC;YACX,CAAC,EAAE,EAA6D,CAAC,CAAC;YAEpE,MAAM,WAAW,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;YAC9C,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,CAAC,CAAC;YACnE,MAAM,QAAQ,GAAG,SAAS;iBACvB,KAAK,CAAC,WAAW,CAAC;iBAClB,aAAa,CACZ,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,qBAAqB,KAAI,SAAS,CAAC,aAAa,EAAE,EAC3D,CAAC,CACF;iBACA,QAAQ,EAAE;iBACV,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACrB,OAAO,GAAG,OAAO,GACf,QAAQ,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,gBAAgB,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC,EACxD,EAAE,CAAC;QACL,CAAC,IACD;AACJ,CAAC;AAzCD,+BAyCC;AAUD,SAAgB,eAAe,CAC7B,OAAU,EACV,OAAU;IAEV,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,CACnC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iCACV,CAAC,KACJ,CAAC,GAAG,OAAO,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,IACtB,EACF,EAA4C,CAC7C,CAAC;AACJ,CAAC;AAXD,0CAWC"}
+{"version":3,"file":"useShortIntl.js","sourceRoot":"","sources":["../../src/hooks/useShortIntl.ts"],"names":[],"mappings":";;;AAAA,2CAAgE;AAGhE,SAAwB,YAAY;IAWlC,MAAM,IAAI,GAAG,IAAA,oBAAO,GAAE,CAAC;IACvB,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC7C,uCACK,IAAI,KACP,GAAG,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE;YAClB,OAAO,aAAa,CAAC,EAAE,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC;QACvC,CAAC,EACD,qBAAqB,CAAC,GAAW,EAAE,OAAO,GAAG,EAAE;YAC7C,OAAO,YAAY,CAAC,GAAG,kBACrB,qBAAqB,EAAE,CAAC,EACxB,qBAAqB,EAAE,CAAC,IACrB,OAAO,EACV,CAAA;QACJ,CAAC;QACD,eAAe,CAAC,SAAS,EAAE,OAAO;YAChC,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI;iBAC9B,mBAAmB,CAAC,MAAM,CAAC;iBAC3B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS;oBAAE,uCAAY,CAAC,KAAE,gBAAgB,EAAE,CAAC,CAAC,KAAK,IAAG;gBACrE,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO;oBAAE,uCAAY,CAAC,KAAE,iBAAiB,EAAE,CAAC,CAAC,KAAK,IAAG;gBACpE,OAAO,CAAC,CAAC;YACX,CAAC,EAAE,EAA6D,CAAC,CAAC;YAEpE,MAAM,WAAW,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;YAC9C,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,CAAC,CAAC;YACnE,MAAM,QAAQ,GAAG,SAAS;iBACvB,KAAK,CAAC,WAAW,CAAC;iBAClB,aAAa,CACZ,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,qBAAqB,KAAI,SAAS,CAAC,aAAa,EAAE,EAC3D,CAAC,CACF;iBACA,QAAQ,EAAE;iBACV,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACrB,OAAO,GAAG,OAAO,GAAG,QAAQ,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,gBAAgB,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC,EACxE,EAAE,CAAC;QACP,CAAC,IACD;AACJ,CAAC;AAhDD,+BAgDC;AAUD,SAAgB,eAAe,CAC7B,OAAU,EACV,OAAU;IAEV,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,CACnC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iCACV,CAAC,KACJ,CAAC,GAAG,OAAO,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,IACtB,EACF,EAA4C,CAC7C,CAAC;AACJ,CAAC;AAXD,0CAWC"}

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@onepercentio/one-ui",
-  "version": "0.2.6",
+  "version": "0.4.0",
   "description": "A set of reusable components created through the development of Onepercent projects",
   "files": [
     "dist",
     "WebpackConfigs",
     "cypress/support"
   ],
+  "bin": {
+    "start-emulator": "scripts/start-emulator.js"
+  },
   "repository": "git@github.com:onepercentio/one-ui.git",
   "author": "Murilo Oliveira de Araujo <muritavo@outlook.com>",
   "license": "MIT",
@@ -15,6 +18,7 @@
     "@babel/core": "^7.16.0",
     "@cypress/react": "^5.12.5",
     "@firebase/rules-unit-testing": "^2.0.2",
+    "@muritavo/cypress-toolkit": "^0.0.3",
     "@muritavo/webpack-microfrontend-scripts": "^0.0.16",
     "@storybook/addon-actions": "^6.4.18",
     "@storybook/addon-essentials": "^6.4.18",
@@ -36,12 +40,13 @@
     "cpy-cli": "^3.1.1",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^5",
-    "cypress": "^9.7.0",
+    "cypress": "^10.2.0",
     "firebase": "^9.8.1",
     "firebase-admin": "^10.2.0",
     "https-browserify": "^1.0.0",
     "inquirer": "^8.2.4",
     "jest": "^27.3.1",
+    "node-fetch": "^2",
     "node-sass": "^6.0.1",
     "os-browserify": "^0.3.0",
     "react": "^18.0.0",
@@ -54,9 +59,10 @@
     "stream-http": "^3.2.0",
     "style-loader": "^2",
     "ts-jest": "^27.0.7",
+    "type-fest": "^2.13.1",
     "typescript": "^4.5.2",
-    "use-wallet": "0.13.5",
-    "url": "^0.11.0"
+    "url": "^0.11.0",
+    "use-wallet": "0.13.5"
   },
   "dependencies": {
     "@types/chroma-js": "^2.1.3",
@@ -83,11 +89,24 @@
     "postbuild": "cd ..",
     "dev": "tsc --watch",
     "test:watch": "jest --watchAll --coverage",
-    "deploy:storybook": "yarn build-storybook; firebase deploy --only hosting",
+    "deploy:storybook": "yarn build-storybook && firebase deploy --only hosting",
+    "test:e2e:watch": "cypress open --component",
     "prepublish": "yarn build"
   },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "peerDependencies": {
     "chroma-js": "^2.4.2",
     "use-wallet": "0.13.5"
   }
-}
+}

package/scripts/start-emulator.js

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+
+const fetch = require("node-fetch");
+const { spawn } = require("child_process");
+function WaitTimeout(ml = 200) {
+  return new Promise((r) => {
+    setTimeout(() => {
+      r();
+    }, ml);
+  });
+}
+const [, , projectId, databaseToImport] = process.argv;
+
+if (!projectId) {
+  console.error("You need to provide a project id");
+  process.exit(1);
+}
+spawn(
+  `firebase emulators:start -P ${projectId} ${
+    databaseToImport ? `--import ${databaseToImport}` : ""
+  }`,
+  {
+    cwd: undefined,
+    env: process.env,
+    shell: true,
+    detached: true,
+  }
+);
+
+(async function () {
+  let breakLoop = false;
+  const timeout = setTimeout(() => {
+    breakLoop = true;
+    console.error("Could not receive ok from firebase emulator");
+    clearTimeout(timeout);
+    process.exit(1);
+  }, 60000);
+  while (!breakLoop) {
+    try {
+      await fetch(`http://localhost:4000`);
+      console.log("Emulator restarted");
+      clearTimeout(timeout);
+      process.exit(0);
+    } catch (e) {}
+    await WaitTimeout(1000);
+  } 
+  await new Promise((r) => {});
+})();