@onepercentio/one-ui 0.1.6 → 0.2.1

package/dist/components/PixelatedScan/PixelatedScan.js

@@ -1,105 +1,105 @@
-"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 = __importStar(require("react"));
-const PixelatedScan_module_scss_1 = __importDefault(require("./PixelatedScan.module.scss"));
-const chroma_js_1 = __importDefault(require("chroma-js"));
-const AnimDuration = Number(PixelatedScan_module_scss_1.default.animationDuration);
-/**
- * This effect scans up and down on the div with a following pixelated trail
- **/
-function PixelatedScan({ squaresByLine, color, className = "", }) {
-    const iteration = (0, react_1.useRef)(0);
-    const tableRef = (0, react_1.useRef)(null);
-    const [config, setConfig] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
-        const squareSize = tableRef.current.clientWidth / squaresByLine;
-        const howMuchLines = tableRef.current.clientHeight / squareSize;
-        setConfig({
-            squareSize,
-            howMuchLines,
-        });
-    }, []);
-    const rowsDef = (0, react_1.useMemo)(() => {
-        return new Array(Math.ceil((config === null || config === void 0 ? void 0 : config.howMuchLines) || 0)).fill(undefined);
-    }, [config]);
-    const lineDef = (0, react_1.useMemo)(() => {
-        return new Array(squaresByLine).fill(undefined);
-    }, [config]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: `${PixelatedScan_module_scss_1.default.grid} ${PixelatedScan_module_scss_1.default.iterate} ${className}`, ref: tableRef },
-            rowsDef.map((_, iRow, _rows) => (react_1.default.createElement(GridRow, { key: `${iRow}`, squares: lineDef, size: config.squareSize, baseColor: color, lineCount: config.howMuchLines, lineIndex: iRow, onFinish: iRow === _rows.length - 6
-                    ? () => {
-                        tableRef.current.classList.remove(PixelatedScan_module_scss_1.default.iterate);
-                        iteration.current += 1;
-                        if (iteration.current % 2 === 1)
-                            tableRef.current.classList.add(PixelatedScan_module_scss_1.default.inverse);
-                        else
-                            tableRef.current.classList.remove(PixelatedScan_module_scss_1.default.inverse);
-                        setTimeout(() => {
-                            tableRef.current.classList.add(PixelatedScan_module_scss_1.default.iterate);
-                        }, 100);
-                    }
-                    : undefined }))),
-            react_1.default.createElement("div", { className: PixelatedScan_module_scss_1.default.guide }))));
-}
-exports.default = PixelatedScan;
-function GridRow({ onFinish, squares, size, baseColor, lineCount, lineIndex, }) {
-    const ref = (0, react_1.useRef)(null);
-    const gridItemsRefs = (0, react_1.useRef)([]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        function updateColor() {
-            gridItemsRefs.current.forEach((i) => i === null || i === void 0 ? void 0 : i.updateColor());
-        }
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("animationend", updateColor);
-        return () => {
-            var _a;
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("animationend", updateColor);
-        };
-    }, []);
-    return (react_1.default.createElement("div", { className: PixelatedScan_module_scss_1.default.gridAnimate, onAnimationEnd: onFinish, style: {
-            animationDelay: `${(AnimDuration / lineCount) * (lineIndex - 1)}ms`,
-        } }, squares.map((_, i) => (react_1.default.createElement(GridItem, { ref: (refNode) => (gridItemsRefs.current[i] = refNode), key: i, size: size, baseColor: baseColor })))));
-}
-function _GridItem({ size, baseColor = "#ff0", }, externalRef) {
-    const ref = (0, react_1.useRef)(null);
-    function calculateNewRandomColorStrength() {
-        const color = chroma_js_1.default.hex(baseColor).alpha(1 - Math.random() * 0.3);
-        return color;
-    }
-    const [randomColorStrength, setRandomColorStrength] = (0, react_1.useState)(calculateNewRandomColorStrength);
-    (0, react_1.useImperativeHandle)(externalRef, () => ({
-        updateColor: () => {
-            setRandomColorStrength(calculateNewRandomColorStrength());
-        },
-    }), []);
-    return (react_1.default.createElement("div", { ref: ref, className: PixelatedScan_module_scss_1.default.gridItem, style: Object.assign({ width: size, height: size }, { "--pixel-color": randomColorStrength.hex() }) }));
-}
-const GridItem = (0, react_1.forwardRef)(_GridItem);
+"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 = __importStar(require("react"));
+const PixelatedScan_module_scss_1 = __importDefault(require("./PixelatedScan.module.scss"));
+const chroma_js_1 = __importDefault(require("chroma-js"));
+const AnimDuration = Number(PixelatedScan_module_scss_1.default.animationDuration);
+/**
+ * This effect scans up and down on the div with a following pixelated trail
+ **/
+function PixelatedScan({ squaresByLine, color, className = "", }) {
+    const iteration = (0, react_1.useRef)(0);
+    const tableRef = (0, react_1.useRef)(null);
+    const [config, setConfig] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        const squareSize = tableRef.current.clientWidth / squaresByLine;
+        const howMuchLines = tableRef.current.clientHeight / squareSize;
+        setConfig({
+            squareSize,
+            howMuchLines,
+        });
+    }, []);
+    const rowsDef = (0, react_1.useMemo)(() => {
+        return new Array(Math.ceil((config === null || config === void 0 ? void 0 : config.howMuchLines) || 0)).fill(undefined);
+    }, [config]);
+    const lineDef = (0, react_1.useMemo)(() => {
+        return new Array(squaresByLine).fill(undefined);
+    }, [config]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: `${PixelatedScan_module_scss_1.default.grid} ${PixelatedScan_module_scss_1.default.iterate} ${className}`, ref: tableRef },
+            rowsDef.map((_, iRow, _rows) => (react_1.default.createElement(GridRow, { key: `${iRow}`, squares: lineDef, size: config.squareSize, baseColor: color, lineCount: config.howMuchLines, lineIndex: iRow, onFinish: iRow === _rows.length - 6
+                    ? () => {
+                        tableRef.current.classList.remove(PixelatedScan_module_scss_1.default.iterate);
+                        iteration.current += 1;
+                        if (iteration.current % 2 === 1)
+                            tableRef.current.classList.add(PixelatedScan_module_scss_1.default.inverse);
+                        else
+                            tableRef.current.classList.remove(PixelatedScan_module_scss_1.default.inverse);
+                        setTimeout(() => {
+                            tableRef.current.classList.add(PixelatedScan_module_scss_1.default.iterate);
+                        }, 100);
+                    }
+                    : undefined }))),
+            react_1.default.createElement("div", { className: PixelatedScan_module_scss_1.default.guide }))));
+}
+exports.default = PixelatedScan;
+function GridRow({ onFinish, squares, size, baseColor, lineCount, lineIndex, }) {
+    const ref = (0, react_1.useRef)(null);
+    const gridItemsRefs = (0, react_1.useRef)([]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        function updateColor() {
+            gridItemsRefs.current.forEach((i) => i === null || i === void 0 ? void 0 : i.updateColor());
+        }
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("animationend", updateColor);
+        return () => {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("animationend", updateColor);
+        };
+    }, []);
+    return (react_1.default.createElement("div", { className: PixelatedScan_module_scss_1.default.gridAnimate, onAnimationEnd: onFinish, style: {
+            animationDelay: `${(AnimDuration / lineCount) * (lineIndex - 1)}ms`,
+        } }, squares.map((_, i) => (react_1.default.createElement(GridItem, { ref: (refNode) => (gridItemsRefs.current[i] = refNode), key: i, size: size, baseColor: baseColor })))));
+}
+function _GridItem({ size, baseColor = "#ff0", }, externalRef) {
+    const ref = (0, react_1.useRef)(null);
+    function calculateNewRandomColorStrength() {
+        const color = chroma_js_1.default.hex(baseColor).alpha(1 - Math.random() * 0.3);
+        return color;
+    }
+    const [randomColorStrength, setRandomColorStrength] = (0, react_1.useState)(calculateNewRandomColorStrength);
+    (0, react_1.useImperativeHandle)(externalRef, () => ({
+        updateColor: () => {
+            setRandomColorStrength(calculateNewRandomColorStrength());
+        },
+    }), []);
+    return (react_1.default.createElement("div", { ref: ref, className: PixelatedScan_module_scss_1.default.gridItem, style: Object.assign({ width: size, height: size }, { "--pixel-color": randomColorStrength.hex() }) }));
+}
+const GridItem = (0, react_1.forwardRef)(_GridItem);
 //# sourceMappingURL=PixelatedScan.js.map

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

@@ -1,15 +1,15 @@
-import PixelatedScan from "./PixelatedScan";
-declare const _default: {
-    component: typeof PixelatedScan;
-    title: string;
-};
-export default _default;
-export declare const InitialImplementation: {
-    (args: any): JSX.Element;
-    args: Partial<{
-        squaresByLine: number;
-        color: string;
-        className?: string | undefined;
-    }>;
-};
-export declare const PreciseImplementation: (args: any) => JSX.Element;
+import PixelatedScan from "./PixelatedScan";
+declare const _default: {
+    component: typeof PixelatedScan;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        squaresByLine: number;
+        color: string;
+        className?: string | undefined;
+    }>;
+};
+export declare const PreciseImplementation: (args: any) => JSX.Element;

package/dist/components/PixelatedScan/PixelatedScan.stories.js

@@ -1,40 +1,40 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreciseImplementation = exports.InitialImplementation = void 0;
-const react_1 = __importDefault(require("react"));
-const PixelatedScan_1 = __importDefault(require("./PixelatedScan"));
-exports.default = {
-    component: PixelatedScan_1.default,
-    title: "Pixelated Scan",
-};
-const InitialImplementation = (args) => (react_1.default.createElement("div", { style: {
-        position: "relative",
-        backgroundColor: "red",
-        height: "441px",
-        width: "300px",
-    } },
-    react_1.default.createElement(PixelatedScan_1.default, Object.assign({}, args))));
-exports.InitialImplementation = InitialImplementation;
-const PreciseImplementation = (args) => (react_1.default.createElement("div", { style: { display: "flex" } },
-    react_1.default.createElement("div", { style: {
-            position: "relative",
-            backgroundColor: "red",
-            height: "500px",
-            width: "250px",
-        } },
-        react_1.default.createElement(PixelatedScan_1.default, Object.assign({ squaresByLine: 10 }, args))),
-    react_1.default.createElement("div", { style: {
-            position: "relative",
-            backgroundColor: "red",
-            height: "1000px",
-            width: "250px",
-        } },
-        react_1.default.createElement(PixelatedScan_1.default, Object.assign({ squaresByLine: 10 }, args)))));
-exports.PreciseImplementation = PreciseImplementation;
-exports.InitialImplementation.args = {
-    squaresByLine: 10,
-};
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreciseImplementation = exports.InitialImplementation = void 0;
+const react_1 = __importDefault(require("react"));
+const PixelatedScan_1 = __importDefault(require("./PixelatedScan"));
+exports.default = {
+    component: PixelatedScan_1.default,
+    title: "Pixelated Scan",
+};
+const InitialImplementation = (args) => (react_1.default.createElement("div", { style: {
+        position: "relative",
+        backgroundColor: "red",
+        height: "441px",
+        width: "300px",
+    } },
+    react_1.default.createElement(PixelatedScan_1.default, Object.assign({}, args))));
+exports.InitialImplementation = InitialImplementation;
+const PreciseImplementation = (args) => (react_1.default.createElement("div", { style: { display: "flex" } },
+    react_1.default.createElement("div", { style: {
+            position: "relative",
+            backgroundColor: "red",
+            height: "500px",
+            width: "250px",
+        } },
+        react_1.default.createElement(PixelatedScan_1.default, Object.assign({ squaresByLine: 10 }, args))),
+    react_1.default.createElement("div", { style: {
+            position: "relative",
+            backgroundColor: "red",
+            height: "1000px",
+            width: "250px",
+        } },
+        react_1.default.createElement(PixelatedScan_1.default, Object.assign({ squaresByLine: 10 }, args)))));
+exports.PreciseImplementation = PreciseImplementation;
+exports.InitialImplementation.args = {
+    squaresByLine: 10,
+};
 //# sourceMappingURL=PixelatedScan.stories.js.map

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

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

package/dist/components/PixelatedScan/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 PixelatedScan_1 = require("./PixelatedScan");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(PixelatedScan_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 PixelatedScan_1 = require("./PixelatedScan");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(PixelatedScan_1).default; } });
 //# sourceMappingURL=index.js.map

package/dist/components/ProgressTexts/ProgressTexts.d.ts

@@ -1,22 +1,22 @@
-import React, { MouseEvent } from "react";
-declare type Step = {
-    type: "wait" | "final";
-    title?: string;
-    description?: string | React.ReactElement;
-    action?: {
-        label: string;
-        onClick: (e: MouseEvent<HTMLButtonElement>) => void;
-    };
-};
-/**
- * Displays new texts as they are pushed into the steps property allowing for a nice progress follow experience
- **/
-export default function ProgressTexts({ steps, currentStep, spacingOnEachStep, }: {
-    /**
-     * Starts at 0
-     */
-    currentStep: number;
-    steps: Step[];
-    spacingOnEachStep?: boolean;
-}): JSX.Element;
-export {};
+import React, { MouseEvent } from "react";
+declare type Step = {
+    type: "wait" | "final";
+    title?: string;
+    description?: string | React.ReactElement;
+    action?: {
+        label: string;
+        onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+    };
+};
+/**
+ * Displays new texts as they are pushed into the steps property allowing for a nice progress follow experience
+ **/
+export default function ProgressTexts({ steps, currentStep, spacingOnEachStep, }: {
+    /**
+     * Starts at 0
+     */
+    currentStep: number;
+    steps: Step[];
+    spacingOnEachStep?: boolean;
+}): JSX.Element;
+export {};

package/dist/components/ProgressTexts/ProgressTexts.js

@@ -1,38 +1,38 @@
-"use strict";
-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 Spacing_1 = __importDefault(require("../Spacing"));
-const ProgressTexts_module_scss_1 = __importDefault(require("./ProgressTexts.module.scss"));
-const Button_1 = __importDefault(require("../Button"));
-/**
- * Displays new texts as they are pushed into the steps property allowing for a nice progress follow experience
- **/
-function ProgressTexts({ steps, currentStep, spacingOnEachStep = true, }) {
-    const _currentStep = steps[currentStep];
-    return (react_1.default.createElement(react_1.default.Fragment, null, steps.map((s, i) => {
-        function whichClassToUse(step, stepType, currentStep, currentStepType) {
-            const classes = [ProgressTexts_module_scss_1.default.container];
-            // Decides the color
-            if (stepType !== "final")
-                classes.push(step < currentStep ? ProgressTexts_module_scss_1.default.disabled : ProgressTexts_module_scss_1.default.loading);
-            // Decides if should be visible or not
-            classes.push(currentStep !== step && currentStepType === "final"
-                ? ProgressTexts_module_scss_1.default.hidden
-                : "");
-            return classes.join(" ");
-        }
-        return i <= currentStep ? (react_1.default.createElement("div", { key: String(i), ref: (a) => {
-                if (a)
-                    a.style.maxHeight = `${a.scrollHeight}px`;
-            }, className: whichClassToUse(i, s.type, currentStep, _currentStep.type) },
-            s.title && react_1.default.createElement("h1", null, s.title),
-            s.description && react_1.default.createElement("p", null, s.description),
-            s.action && (react_1.default.createElement(Button_1.default, { onClick: s.action.onClick }, s.action.label)),
-            spacingOnEachStep !== false ? react_1.default.createElement(Spacing_1.default, { size: "large" }) : null)) : null;
-    })));
-}
-exports.default = ProgressTexts;
+"use strict";
+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 Spacing_1 = __importDefault(require("../Spacing"));
+const ProgressTexts_module_scss_1 = __importDefault(require("./ProgressTexts.module.scss"));
+const Button_1 = __importDefault(require("../Button"));
+/**
+ * Displays new texts as they are pushed into the steps property allowing for a nice progress follow experience
+ **/
+function ProgressTexts({ steps, currentStep, spacingOnEachStep = true, }) {
+    const _currentStep = steps[currentStep];
+    return (react_1.default.createElement(react_1.default.Fragment, null, steps.map((s, i) => {
+        function whichClassToUse(step, stepType, currentStep, currentStepType) {
+            const classes = [ProgressTexts_module_scss_1.default.container];
+            // Decides the color
+            if (stepType !== "final")
+                classes.push(step < currentStep ? ProgressTexts_module_scss_1.default.disabled : ProgressTexts_module_scss_1.default.loading);
+            // Decides if should be visible or not
+            classes.push(currentStep !== step && currentStepType === "final"
+                ? ProgressTexts_module_scss_1.default.hidden
+                : "");
+            return classes.join(" ");
+        }
+        return i <= currentStep ? (react_1.default.createElement("div", { key: String(i), ref: (a) => {
+                if (a)
+                    a.style.maxHeight = `${a.scrollHeight}px`;
+            }, className: whichClassToUse(i, s.type, currentStep, _currentStep.type) },
+            s.title && react_1.default.createElement("h1", null, s.title),
+            s.description && react_1.default.createElement("p", null, s.description),
+            s.action && (react_1.default.createElement(Button_1.default, { onClick: s.action.onClick }, s.action.label)),
+            spacingOnEachStep !== false ? react_1.default.createElement(Spacing_1.default, { size: "large" }) : null)) : null;
+    })));
+}
+exports.default = ProgressTexts;
 //# sourceMappingURL=ProgressTexts.js.map

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

@@ -1,24 +1,24 @@
-import React from "react";
-import C from "./ProgressTexts";
-declare const _default: {
-    component: typeof C;
-    title: string;
-};
-export default _default;
-export declare function ExemploCompleto(): JSX.Element;
-export declare const Primary: {
-    (args: any): JSX.Element;
-    args: Partial<{
-        currentStep: number;
-        steps: {
-            type: "wait" | "final";
-            title?: string | undefined;
-            description?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-            action?: {
-                label: string;
-                onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-            } | undefined;
-        }[];
-        spacingOnEachStep?: boolean | undefined;
-    }>;
-};
+import React from "react";
+import C from "./ProgressTexts";
+declare const _default: {
+    component: typeof C;
+    title: string;
+};
+export default _default;
+export declare function ExemploCompleto(): JSX.Element;
+export declare const Primary: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        currentStep: number;
+        steps: {
+            type: "wait" | "final";
+            title?: string | undefined;
+            description?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+            action?: {
+                label: string;
+                onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+            } | undefined;
+        }[];
+        spacingOnEachStep?: boolean | undefined;
+    }>;
+};