@onepercentio/one-ui 0.6.0 → 0.6.3

package/dist/components/PasswordInput/PasswordInput.test.js

@@ -1,157 +1,157 @@
-"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-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 react_2 = require("@testing-library/react");
-const PasswordInput_1 = __importDefault(require("./PasswordInput"));
-const user_event_1 = __importDefault(require("@testing-library/user-event"));
-const Text_module_scss_1 = __importDefault(require("../Text/Text.module.scss"));
-const passwordInputRulesDescription = {
-    duplication: "MOCK_passwordInputRulesDescription_duplication",
-    size: "MOCK_passwordInputRulesDescription_size",
-};
-jest.unmock("../../../ux/components/elements/icon/icon");
-const MOCKED_CREATION_MESSAGES = {
-    invalidRules: { duplication: "d", size: "s" },
-    rulesTitle: "t",
-};
-function Wrapper(props) {
-    const [s, ss] = (0, react_1.useState)(props.value);
-    return (react_1.default.createElement(PasswordInput_1.default, Object.assign({}, props, { value: s, onChange: (...args) => {
-            ss(args[0]);
-            props.onChange(...args);
-        } })));
-}
-function renderScreen(props) {
-    return (0, react_2.render)(react_1.default.createElement(Wrapper, Object.assign({}, props)));
-}
-it("Should at least render :)", () => {
-    renderScreen({ value: "", mode: "input", onChange: jest.fn() });
-});
-it.each([
-    ["creation", true],
-    ["input", false],
-])("Should have a validation mode, where it should display all the validations that are being made over the informed password %s", (mode, shouldShow) => {
-    const changeCb = jest.fn();
-    const w = renderScreen(mode === "creation"
-        ? {
-            mode: mode,
-            value: "",
-            onChange: changeCb,
-            messages: MOCKED_CREATION_MESSAGES,
-        }
-        : { mode: mode, value: "", onChange: changeCb });
-    if (shouldShow)
-        expect(w.getByTestId("password-rules"));
-    else
-        expect(w.queryByTestId("password-rules")).toBeNull();
-});
-it("Should reject small passwords < 8", () => __awaiter(void 0, void 0, void 0, function* () {
-    const changeCb = jest.fn();
-    const w = renderScreen({
-        mode: "creation",
-        value: "",
-        onChange: changeCb,
-        messages: MOCKED_CREATION_MESSAGES,
-    });
-    yield user_event_1.default.type(w.container.querySelector("input"), "Short", {
-        delay: 50,
-    });
-    expect(changeCb).toHaveBeenLastCalledWith("Short", false);
-    expect(w.getByText(`- ${passwordInputRulesDescription.size}`).className).toContain(Text_module_scss_1.default.error);
-}));
-it.each([
-    ["abc123senha", false],
-    ["teste123", false],
-    ["mnolol1997", false],
-    ["UMASENHASECRETA", true],
-    ["1928371281923", true],
-    ["Netspaces", true],
-])("when %s should reject = %s sequencial numbers or letters ", (pass, isValid) => __awaiter(void 0, void 0, void 0, function* () {
-    const changeCb = jest.fn();
-    const w = renderScreen({
-        mode: "creation",
-        value: "",
-        onChange: changeCb,
-        messages: MOCKED_CREATION_MESSAGES,
-    });
-    yield user_event_1.default.type(w.container.querySelector("input"), pass, {
-        delay: 50,
-    });
-    expect(changeCb).toHaveBeenLastCalledWith(pass, isValid);
-    const expectation = expect(w.getByText(`- ${passwordInputRulesDescription.duplication}`).className);
-    if (isValid)
-        expectation.not.toContain(Text_module_scss_1.default.error);
-    else
-        expectation.toContain(Text_module_scss_1.default.error);
-}));
-function createMouseEvent(type) {
-    const e = new MouseEvent(type);
-    e.initEvent(type, true, true);
-    return e;
-}
-it("Should be able to show password temporarly when mouseenter and hiding onmouseexit", () => __awaiter(void 0, void 0, void 0, function* () {
-    const w = renderScreen({ mode: "input", value: "", onChange: jest.fn() });
-    const icon = w.container.querySelector("i");
-    const input = w.container.querySelector("input");
-    expect(input.getAttribute("type")).toEqual("password");
-    icon.dispatchEvent(createMouseEvent("mousedown"));
-    yield (0, react_2.waitFor)(() => expect(input.getAttribute("type")).toEqual(""));
-    icon.dispatchEvent(createMouseEvent("mouseup"));
-    yield (0, react_2.waitFor)(() => expect(input.getAttribute("type")).toEqual("password"));
-}));
-it("Should be able to validate against a previous password", () => __awaiter(void 0, void 0, void 0, function* () {
-    const changeCb = jest.fn();
-    const w = renderScreen({
-        mode: "comparision",
-        value: "",
-        otherPassword: "Senhaigual",
-        onChange: changeCb,
-        messages: {
-            passwordsAreDifferent: "d",
-        },
-    });
-    yield user_event_1.default.type(w.container.querySelector("input"), "Senhaigua", {
-        delay: 50,
-    });
-    expect(changeCb).toHaveBeenLastCalledWith("Senhaigua", false);
-    yield user_event_1.default.type(w.container.querySelector("input"), "l", {
-        delay: 50,
-    });
-    expect(changeCb).toHaveBeenLastCalledWith("Senhaigual", true);
-}));
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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 react_2 = require("@testing-library/react");
+const PasswordInput_1 = __importDefault(require("./PasswordInput"));
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const Text_module_scss_1 = __importDefault(require("../Text/Text.module.scss"));
+const passwordInputRulesDescription = {
+    duplication: "MOCK_passwordInputRulesDescription_duplication",
+    size: "MOCK_passwordInputRulesDescription_size",
+};
+jest.unmock("../../../ux/components/elements/icon/icon");
+const MOCKED_CREATION_MESSAGES = {
+    invalidRules: { duplication: "d", size: "s" },
+    rulesTitle: "t",
+};
+function Wrapper(props) {
+    const [s, ss] = (0, react_1.useState)(props.value);
+    return (react_1.default.createElement(PasswordInput_1.default, Object.assign({}, props, { value: s, onChange: (...args) => {
+            ss(args[0]);
+            props.onChange(...args);
+        } })));
+}
+function renderScreen(props) {
+    return (0, react_2.render)(react_1.default.createElement(Wrapper, Object.assign({}, props)));
+}
+it("Should at least render :)", () => {
+    renderScreen({ value: "", mode: "input", onChange: jest.fn() });
+});
+it.each([
+    ["creation", true],
+    ["input", false],
+])("Should have a validation mode, where it should display all the validations that are being made over the informed password %s", (mode, shouldShow) => {
+    const changeCb = jest.fn();
+    const w = renderScreen(mode === "creation"
+        ? {
+            mode: mode,
+            value: "",
+            onChange: changeCb,
+            messages: MOCKED_CREATION_MESSAGES,
+        }
+        : { mode: mode, value: "", onChange: changeCb });
+    if (shouldShow)
+        expect(w.getByTestId("password-rules"));
+    else
+        expect(w.queryByTestId("password-rules")).toBeNull();
+});
+it("Should reject small passwords < 8", () => __awaiter(void 0, void 0, void 0, function* () {
+    const changeCb = jest.fn();
+    const w = renderScreen({
+        mode: "creation",
+        value: "",
+        onChange: changeCb,
+        messages: MOCKED_CREATION_MESSAGES,
+    });
+    yield user_event_1.default.type(w.container.querySelector("input"), "Short", {
+        delay: 50,
+    });
+    expect(changeCb).toHaveBeenLastCalledWith("Short", false);
+    expect(w.getByText(`- ${passwordInputRulesDescription.size}`).className).toContain(Text_module_scss_1.default.error);
+}));
+it.each([
+    ["abc123senha", false],
+    ["teste123", false],
+    ["mnolol1997", false],
+    ["UMASENHASECRETA", true],
+    ["1928371281923", true],
+    ["Netspaces", true],
+])("when %s should reject = %s sequencial numbers or letters ", (pass, isValid) => __awaiter(void 0, void 0, void 0, function* () {
+    const changeCb = jest.fn();
+    const w = renderScreen({
+        mode: "creation",
+        value: "",
+        onChange: changeCb,
+        messages: MOCKED_CREATION_MESSAGES,
+    });
+    yield user_event_1.default.type(w.container.querySelector("input"), pass, {
+        delay: 50,
+    });
+    expect(changeCb).toHaveBeenLastCalledWith(pass, isValid);
+    const expectation = expect(w.getByText(`- ${passwordInputRulesDescription.duplication}`).className);
+    if (isValid)
+        expectation.not.toContain(Text_module_scss_1.default.error);
+    else
+        expectation.toContain(Text_module_scss_1.default.error);
+}));
+function createMouseEvent(type) {
+    const e = new MouseEvent(type);
+    e.initEvent(type, true, true);
+    return e;
+}
+it("Should be able to show password temporarly when mouseenter and hiding onmouseexit", () => __awaiter(void 0, void 0, void 0, function* () {
+    const w = renderScreen({ mode: "input", value: "", onChange: jest.fn() });
+    const icon = w.container.querySelector("i");
+    const input = w.container.querySelector("input");
+    expect(input.getAttribute("type")).toEqual("password");
+    icon.dispatchEvent(createMouseEvent("mousedown"));
+    yield (0, react_2.waitFor)(() => expect(input.getAttribute("type")).toEqual(""));
+    icon.dispatchEvent(createMouseEvent("mouseup"));
+    yield (0, react_2.waitFor)(() => expect(input.getAttribute("type")).toEqual("password"));
+}));
+it("Should be able to validate against a previous password", () => __awaiter(void 0, void 0, void 0, function* () {
+    const changeCb = jest.fn();
+    const w = renderScreen({
+        mode: "comparision",
+        value: "",
+        otherPassword: "Senhaigual",
+        onChange: changeCb,
+        messages: {
+            passwordsAreDifferent: "d",
+        },
+    });
+    yield user_event_1.default.type(w.container.querySelector("input"), "Senhaigua", {
+        delay: 50,
+    });
+    expect(changeCb).toHaveBeenLastCalledWith("Senhaigua", false);
+    yield user_event_1.default.type(w.container.querySelector("input"), "l", {
+        delay: 50,
+    });
+    expect(changeCb).toHaveBeenLastCalledWith("Senhaigual", true);
+}));
 //# sourceMappingURL=PasswordInput.test.js.map

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

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

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

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

@@ -1,8 +1,8 @@
-/**
- * This effect scans up and down on the div with a following pixelated trail
- **/
-export default function PixelatedScan({ squaresByLine, color, className, }: {
-    squaresByLine: number;
-    color: string;
-    className?: string;
-}): JSX.Element;
+/**
+ * This effect scans up and down on the div with a following pixelated trail
+ **/
+export default function PixelatedScan({ squaresByLine, color, className, }: {
+    squaresByLine: number;
+    color: string;
+    className?: string;
+}): JSX.Element;

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;