@onepercentio/one-ui 0.1.7 → 0.2.2

package/dist/components/Input/Input.js

@@ -1,94 +1,94 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputTestIds = void 0;
-const react_1 = __importStar(require("react"));
-const OneUIProvider_1 = require("../../context/OneUIProvider");
-const Text_1 = __importDefault(require("../Text"));
-const Input_module_scss_1 = __importDefault(require("./Input.module.scss"));
-/**
- * A transparent input with some prebuilt states common to the application
- **/
-function Input(_a, ref) {
-    var { error, placeholder = " ", hideError, icon, Icon, autoFocus, disclaimer, multiline, border: propBorder } = _a, otherProps = __rest(_a, ["error", "placeholder", "hideError", "icon", "Icon", "autoFocus", "disclaimer", "multiline", "border"]);
-    const { component: { input: { className, border: globalBorder = true }, }, } = (0, OneUIProvider_1.useOneUIContext)();
-    const [focused, setFocused] = (0, react_1.useState)(false);
-    const inputRef = (0, react_1.useRef)(null);
-    (0, react_1.useImperativeHandle)(ref, () => inputRef.current, []);
-    const shouldShowError = (0, react_1.useMemo)(() => {
-        if (hideError === "onfocus")
-            return !focused;
-        return !!error;
-    }, [focused, error, hideError]);
-    (0, react_1.useEffect)(() => {
-        if (autoFocus) {
-            const t = setTimeout(() => {
-                inputRef.current.focus();
-            }, 500);
-            return () => clearTimeout(t);
-        }
-    }, [autoFocus]);
-    const Component = multiline ? "textarea" : "input";
-    const withBorder = (0, react_1.useMemo)(() => {
-        if (propBorder !== undefined)
-            return propBorder;
-        return globalBorder;
-    }, [propBorder, globalBorder]);
-    return (react_1.default.createElement("div", { className: `${Input_module_scss_1.default.inputContainer} ${false ? Input_module_scss_1.default.withIcon : ""} ${className}` },
-        react_1.default.createElement(Component, Object.assign({ ref: inputRef, placeholder: placeholder, rows: multiline }, otherProps, { onFocus: (e) => {
-                setFocused(true);
-                if (otherProps.onFocus)
-                    otherProps.onFocus(e);
-            }, onBlur: (e) => {
-                setFocused(false);
-                if (otherProps.onBlur)
-                    otherProps.onBlur(e);
-            } })),
-        withBorder && react_1.default.createElement("div", { className: Input_module_scss_1.default.border }),
-        error && shouldShowError ? (react_1.default.createElement(Text_1.default, { title: error, "data-testid": InputTestIds.ERROR, className: Input_module_scss_1.default.caption, type: "error" }, error)) : disclaimer ? (react_1.default.createElement(Text_1.default, { title: disclaimer, type: "caption", className: Input_module_scss_1.default.caption, "data-testid": InputTestIds.DISCLAIMER }, disclaimer)) : null,
-        Icon && react_1.default.createElement("div", { className: Input_module_scss_1.default.icon }, Icon),
-        icon && react_1.default.createElement("img", Object.assign({ className: Input_module_scss_1.default.icon }, icon))));
-}
-var InputTestIds;
-(function (InputTestIds) {
-    InputTestIds["DISCLAIMER"] = "disclaimer";
-    InputTestIds["ERROR"] = "error";
-})(InputTestIds = exports.InputTestIds || (exports.InputTestIds = {}));
-exports.default = (0, react_1.forwardRef)(Input);
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputTestIds = void 0;
+const react_1 = __importStar(require("react"));
+const OneUIProvider_1 = require("../../context/OneUIProvider");
+const Text_1 = __importDefault(require("../Text"));
+const Input_module_scss_1 = __importDefault(require("./Input.module.scss"));
+/**
+ * A transparent input with some prebuilt states common to the application
+ **/
+function Input(_a, ref) {
+    var { error, placeholder = " ", hideError, icon, Icon, autoFocus, disclaimer, multiline, border: propBorder } = _a, otherProps = __rest(_a, ["error", "placeholder", "hideError", "icon", "Icon", "autoFocus", "disclaimer", "multiline", "border"]);
+    const { component: { input: { className, border: globalBorder = true }, }, } = (0, OneUIProvider_1.useOneUIContext)();
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => inputRef.current, []);
+    const shouldShowError = (0, react_1.useMemo)(() => {
+        if (hideError === "onfocus")
+            return !focused;
+        return !!error;
+    }, [focused, error, hideError]);
+    (0, react_1.useEffect)(() => {
+        if (autoFocus) {
+            const t = setTimeout(() => {
+                inputRef.current.focus();
+            }, 500);
+            return () => clearTimeout(t);
+        }
+    }, [autoFocus]);
+    const Component = multiline ? "textarea" : "input";
+    const withBorder = (0, react_1.useMemo)(() => {
+        if (propBorder !== undefined)
+            return propBorder;
+        return globalBorder;
+    }, [propBorder, globalBorder]);
+    return (react_1.default.createElement("div", { className: `${Input_module_scss_1.default.inputContainer} ${false ? Input_module_scss_1.default.withIcon : ""} ${className}` },
+        react_1.default.createElement(Component, Object.assign({ ref: inputRef, placeholder: placeholder, rows: multiline }, otherProps, { onFocus: (e) => {
+                setFocused(true);
+                if (otherProps.onFocus)
+                    otherProps.onFocus(e);
+            }, onBlur: (e) => {
+                setFocused(false);
+                if (otherProps.onBlur)
+                    otherProps.onBlur(e);
+            } })),
+        withBorder && react_1.default.createElement("div", { className: Input_module_scss_1.default.border }),
+        error && shouldShowError ? (react_1.default.createElement(Text_1.default, { title: error, "data-testid": InputTestIds.ERROR, className: Input_module_scss_1.default.caption, type: "error" }, error)) : disclaimer ? (react_1.default.createElement(Text_1.default, { title: disclaimer, type: "caption", className: Input_module_scss_1.default.caption, "data-testid": InputTestIds.DISCLAIMER }, disclaimer)) : null,
+        Icon && react_1.default.createElement("div", { className: Input_module_scss_1.default.icon }, Icon),
+        icon && react_1.default.createElement("img", Object.assign({ className: Input_module_scss_1.default.icon }, icon))));
+}
+var InputTestIds;
+(function (InputTestIds) {
+    InputTestIds["DISCLAIMER"] = "disclaimer";
+    InputTestIds["ERROR"] = "error";
+})(InputTestIds = exports.InputTestIds || (exports.InputTestIds = {}));
+exports.default = (0, react_1.forwardRef)(Input);
 //# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.stories.d.ts

@@ -1,22 +1,22 @@
-import React from "react";
-import { InputProps } from "./Input";
-declare const _default: {
-    component: React.ForwardRefExoticComponent<{
-        error?: string | undefined;
-        hideError?: "onfocus" | undefined;
-        placeholder?: string | undefined;
-        disclaimer?: string | undefined;
-        multiline?: number | undefined;
-        border?: boolean | undefined;
-        icon?: ({
-            onClick?: (() => void) | undefined;
-        } & React.ClassAttributes<any> & React.ImgHTMLAttributes<HTMLImageElement>) | undefined;
-        Icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    } & Omit<React.HTMLProps<HTMLInputElement | HTMLTextAreaElement>, "ref"> & React.RefAttributes<any>>;
-    title: string;
-};
-export default _default;
-export declare const Primary: {
-    (args: InputProps): JSX.Element;
-    args: InputProps;
-};
+import React from "react";
+import { InputProps } from "./Input";
+declare const _default: {
+    component: React.ForwardRefExoticComponent<{
+        error?: string | undefined;
+        hideError?: "onfocus" | undefined;
+        placeholder?: string | undefined;
+        disclaimer?: string | undefined;
+        multiline?: number | undefined;
+        border?: boolean | undefined;
+        icon?: ({
+            onClick?: (() => void) | undefined;
+        } & React.ClassAttributes<any> & React.ImgHTMLAttributes<HTMLImageElement>) | undefined;
+        Icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    } & Omit<React.HTMLProps<HTMLInputElement | HTMLTextAreaElement>, "ref"> & React.RefAttributes<any>>;
+    title: string;
+};
+export default _default;
+export declare const Primary: {
+    (args: InputProps): JSX.Element;
+    args: InputProps;
+};

package/dist/components/Input/Input.stories.js

@@ -1,21 +1,21 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Primary = void 0;
-const react_1 = __importDefault(require("react"));
-const Input_1 = __importDefault(require("./Input"));
-exports.default = {
-    component: Input_1.default,
-    title: "Input simples",
-};
-const Primary = (args) => react_1.default.createElement(Input_1.default, Object.assign({}, args));
-exports.Primary = Primary;
-exports.Primary.args = {
-    disclaimer: "Some disclaimer info",
-    error: "Some error that only shows when unfocused",
-    autoFocus: true,
-    hideError: "onfocus",
-};
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const react_1 = __importDefault(require("react"));
+const Input_1 = __importDefault(require("./Input"));
+exports.default = {
+    component: Input_1.default,
+    title: "Input simples",
+};
+const Primary = (args) => react_1.default.createElement(Input_1.default, Object.assign({}, args));
+exports.Primary = Primary;
+exports.Primary.args = {
+    disclaimer: "Some disclaimer info",
+    error: "Some error that only shows when unfocused",
+    autoFocus: true,
+    hideError: "onfocus",
+};
 //# sourceMappingURL=Input.stories.js.map

package/dist/components/Input/Input.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/components/Input/Input.test.js

@@ -1,58 +1,58 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
-const Input_1 = __importStar(require("./Input"));
-it("Should at least render :)", () => {
-    (0, react_2.render)(react_1.default.createElement(Input_1.default, null));
-});
-it("Should be able to show errors based on prop", () => {
-    const w = (0, react_2.render)(react_1.default.createElement(Input_1.default, null));
-    expect(w.queryByTestId(Input_1.InputTestIds.ERROR)).toBeNull();
-    w.rerender(react_1.default.createElement(Input_1.default, { error: "Some obnoxious error" }));
-    expect(w.getByTestId(Input_1.InputTestIds.ERROR).textContent).toEqual("Some obnoxious error");
-});
-describe("Disclaimer", () => {
-    it("Should not show disclaimer if not provided", () => {
-        const { queryByTestId } = (0, react_2.render)(react_1.default.createElement(Input_1.default, null));
-        const disclaimerEl = queryByTestId(Input_1.InputTestIds.DISCLAIMER);
-        expect(disclaimerEl).toBeNull();
-    });
-    it("Should show the disclaimer when there is no error", () => {
-        const exampleDisclaimer = "DISCLAIMER";
-        const exampleError = "ERROR";
-        const { getByTestId, queryByTestId, rerender } = (0, react_2.render)(react_1.default.createElement(Input_1.default, { disclaimer: exampleDisclaimer }));
-        getByTestId(Input_1.InputTestIds.DISCLAIMER);
-        expect(queryByTestId(Input_1.InputTestIds.ERROR)).toBeNull();
-        rerender(react_1.default.createElement(Input_1.default, { disclaimer: exampleDisclaimer, error: exampleError }));
-        getByTestId(Input_1.InputTestIds.ERROR);
-        expect(queryByTestId(Input_1.InputTestIds.DISCLAIMER)).toBeNull();
-    });
-});
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Input_1 = __importStar(require("./Input"));
+it("Should at least render :)", () => {
+    (0, react_2.render)(react_1.default.createElement(Input_1.default, null));
+});
+it("Should be able to show errors based on prop", () => {
+    const w = (0, react_2.render)(react_1.default.createElement(Input_1.default, null));
+    expect(w.queryByTestId(Input_1.InputTestIds.ERROR)).toBeNull();
+    w.rerender(react_1.default.createElement(Input_1.default, { error: "Some obnoxious error" }));
+    expect(w.getByTestId(Input_1.InputTestIds.ERROR).textContent).toEqual("Some obnoxious error");
+});
+describe("Disclaimer", () => {
+    it("Should not show disclaimer if not provided", () => {
+        const { queryByTestId } = (0, react_2.render)(react_1.default.createElement(Input_1.default, null));
+        const disclaimerEl = queryByTestId(Input_1.InputTestIds.DISCLAIMER);
+        expect(disclaimerEl).toBeNull();
+    });
+    it("Should show the disclaimer when there is no error", () => {
+        const exampleDisclaimer = "DISCLAIMER";
+        const exampleError = "ERROR";
+        const { getByTestId, queryByTestId, rerender } = (0, react_2.render)(react_1.default.createElement(Input_1.default, { disclaimer: exampleDisclaimer }));
+        getByTestId(Input_1.InputTestIds.DISCLAIMER);
+        expect(queryByTestId(Input_1.InputTestIds.ERROR)).toBeNull();
+        rerender(react_1.default.createElement(Input_1.default, { disclaimer: exampleDisclaimer, error: exampleError }));
+        getByTestId(Input_1.InputTestIds.ERROR);
+        expect(queryByTestId(Input_1.InputTestIds.DISCLAIMER)).toBeNull();
+    });
+});
 //# sourceMappingURL=Input.test.js.map

package/dist/components/Input/index.d.ts

@@ -1 +1 @@
-export { default } from './Input';
+export { default } from './Input';

package/dist/components/Input/index.js

@@ -1,9 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var Input_1 = require("./Input");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Input_1).default; } });
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Input_1 = require("./Input");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Input_1).default; } });
 //# sourceMappingURL=index.js.map

package/dist/components/InstantCounter/InstantCounter.d.ts

@@ -1,13 +1,13 @@
-import React from "react";
-import { FormatNumberOptions } from "react-intl";
-declare const _default: React.ForwardRefExoticComponent<{
-    from?: number | undefined;
-    to: number;
-    framesPerSecond?: number | undefined;
-    durationInSeconds: number;
-    formatOptions?: FormatNumberOptions | undefined;
-    autoStart?: boolean | undefined;
-} & React.RefAttributes<{
-    start: () => void;
-}>>;
-export default _default;
+import React from "react";
+import { FormatNumberOptions } from "react-intl";
+declare const _default: React.ForwardRefExoticComponent<{
+    from?: number | undefined;
+    to: number;
+    framesPerSecond?: number | undefined;
+    durationInSeconds: number;
+    formatOptions?: FormatNumberOptions | undefined;
+    autoStart?: boolean | undefined;
+} & React.RefAttributes<{
+    start: () => void;
+}>>;
+export default _default;

package/dist/components/InstantCounter/InstantCounter.js

@@ -1,59 +1,59 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const react_intl_1 = require("react-intl");
-/**
- * Increments the numbers from 0 to X
- **/
-function InstantCounter({ from = 0, to, framesPerSecond = 30, durationInSeconds, formatOptions = {}, autoStart = true, }, ref) {
-    const [started, setStarted] = (0, react_1.useState)(autoStart);
-    const initialValue = (0, react_1.useRef)(from);
-    const spanRef = (0, react_1.useRef)(null);
-    const { formatNumber } = (0, react_intl_1.useIntl)();
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        start: () => setStarted(true),
-    }), []);
-    (0, react_1.useEffect)(() => {
-        if (started) {
-            const incrementBy = (to - initialValue.current) / (framesPerSecond * durationInSeconds);
-            spanRef.current.innerHTML = formatNumber(initialValue.current, formatOptions);
-            const intervalId = setInterval(() => {
-                initialValue.current += incrementBy;
-                spanRef.current.innerHTML = formatNumber(Math.round(initialValue.current), formatOptions);
-                if (Math.round(initialValue.current) === to) {
-                    clearInterval(intervalId);
-                }
-            }, 1000 / framesPerSecond);
-            return () => {
-                clearInterval(intervalId);
-            };
-        }
-    }, [started]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("span", { ref: spanRef })));
-}
-exports.default = (0, react_1.forwardRef)(InstantCounter);
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_intl_1 = require("react-intl");
+/**
+ * Increments the numbers from 0 to X
+ **/
+function InstantCounter({ from = 0, to, framesPerSecond = 30, durationInSeconds, formatOptions = {}, autoStart = true, }, ref) {
+    const [started, setStarted] = (0, react_1.useState)(autoStart);
+    const initialValue = (0, react_1.useRef)(from);
+    const spanRef = (0, react_1.useRef)(null);
+    const { formatNumber } = (0, react_intl_1.useIntl)();
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        start: () => setStarted(true),
+    }), []);
+    (0, react_1.useEffect)(() => {
+        if (started) {
+            const incrementBy = (to - initialValue.current) / (framesPerSecond * durationInSeconds);
+            spanRef.current.innerHTML = formatNumber(initialValue.current, formatOptions);
+            const intervalId = setInterval(() => {
+                initialValue.current += incrementBy;
+                spanRef.current.innerHTML = formatNumber(Math.round(initialValue.current), formatOptions);
+                if (Math.round(initialValue.current) === to) {
+                    clearInterval(intervalId);
+                }
+            }, 1000 / framesPerSecond);
+            return () => {
+                clearInterval(intervalId);
+            };
+        }
+    }, [started]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("span", { ref: spanRef })));
+}
+exports.default = (0, react_1.forwardRef)(InstantCounter);
 //# sourceMappingURL=InstantCounter.js.map

package/dist/components/InstantCounter/InstantCounter.stories.d.ts

@@ -1,28 +1,28 @@
-import React from 'react';
-declare const _default: {
-    component: React.ForwardRefExoticComponent<{
-        from?: number | undefined;
-        to: number;
-        framesPerSecond?: number | undefined;
-        durationInSeconds: number;
-        formatOptions?: import("react-intl").FormatNumberOptions | undefined;
-        autoStart?: boolean | undefined;
-    } & React.RefAttributes<{
-        start: () => void;
-    }>>;
-    title: string;
-};
-export default _default;
-export declare const InitialImplementation: {
-    (args: any): JSX.Element;
-    args: Partial<{
-        from?: number | undefined;
-        to: number;
-        framesPerSecond?: number | undefined;
-        durationInSeconds: number;
-        formatOptions?: import("react-intl").FormatNumberOptions | undefined;
-        autoStart?: boolean | undefined;
-    } & React.RefAttributes<{
-        start: () => void;
-    }>>;
-};
+import React from 'react';
+declare const _default: {
+    component: React.ForwardRefExoticComponent<{
+        from?: number | undefined;
+        to: number;
+        framesPerSecond?: number | undefined;
+        durationInSeconds: number;
+        formatOptions?: import("react-intl").FormatNumberOptions | undefined;
+        autoStart?: boolean | undefined;
+    } & React.RefAttributes<{
+        start: () => void;
+    }>>;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        from?: number | undefined;
+        to: number;
+        framesPerSecond?: number | undefined;
+        durationInSeconds: number;
+        formatOptions?: import("react-intl").FormatNumberOptions | undefined;
+        autoStart?: boolean | undefined;
+    } & React.RefAttributes<{
+        start: () => void;
+    }>>;
+};