@onepercentio/one-ui 0.6.0 → 0.6.3

package/dist/components/UncontrolledTransition/UncontrolledTransition.stories.js

@@ -1,225 +1,225 @@
-"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 });
-exports.BUGFIX_BackwardsInconsistency = exports.CoinFlip = exports.FadeTransition = exports.AnchorBasedTransition = exports.ClickBasedTransition = void 0;
-const react_1 = __importStar(require("react"));
-const _1 = __importDefault(require("."));
-const Button_1 = __importDefault(require("../Button"));
-const Transition_1 = require("../Transition/Transition");
-const UncontrolledTransition_stories_module_scss_1 = __importDefault(require("./UncontrolledTransition.stories.module.scss"));
-exports.default = {
-    title: "Uncontrolled Transition",
-    component: _1.default,
-};
-const ClickBasedTransition = (args) => {
-    const transRef = (0, react_1.useRef)(null);
-    const [nextPage, setNextPage] = (0, react_1.useState)(false);
-    const CurrentPage = () => {
-        if (!nextPage)
-            return (react_1.default.createElement(react_1.default.Fragment, { key: "currPage" },
-                react_1.default.createElement("h1", { style: {
-                        display: "flex",
-                    } },
-                    "Current page",
-                    " ",
-                    react_1.default.createElement("button", { onClick: () => setNextPage((a) => !a), style: { marginLeft: "auto" } }, "Click me to see a cool effect")),
-                react_1.default.createElement("button", { onClick: () => setNextPage((a) => !a), style: { marginRight: "auto" } }, "Hehe"),
-                react_1.default.createElement("h2", null, "Another text"),
-                react_1.default.createElement("button", { onClick: () => setNextPage((a) => !a), style: { margin: "auto" } }, "Or me")));
-        else
-            return (react_1.default.createElement(react_1.default.Fragment, { key: "nextPage" },
-                react_1.default.createElement("h1", { style: {
-                        display: "flex",
-                    } },
-                    "Next page",
-                    " ",
-                    react_1.default.createElement("button", { onClick: () => {
-                            setNextPage((a) => !a);
-                            transRef.current.setOrientation("backward");
-                        }, style: { marginLeft: "auto" } }, "Click me to see a cool effect")),
-                react_1.default.createElement("button", { onClick: () => {
-                        setNextPage((a) => !a);
-                        transRef.current.setOrientation("backward");
-                    }, style: { marginRight: "auto" } }, "Hehe"),
-                react_1.default.createElement("h2", null, "Another text"),
-                react_1.default.createElement("button", { onClick: () => {
-                        setNextPage((a) => !a);
-                        transRef.current.setOrientation("backward");
-                    }, style: { margin: "auto" } }, "Or me")));
-    };
-    return (react_1.default.createElement("div", { style: {
-            backgroundColor: "red",
-            padding: "250px",
-        } },
-        react_1.default.createElement(_1.default, Object.assign({ ref: transRef, transitionType: Transition_1.TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN, contentStyle: {
-                backgroundColor: "white",
-            } }, args), CurrentPage())));
-};
-exports.ClickBasedTransition = ClickBasedTransition;
-const AnchorBasedTransition = (args) => {
-    const transRef = (0, react_1.useRef)(null);
-    const [nextPage, setNextPage] = (0, react_1.useState)(false);
-    const CurrentPage = () => {
-        if (!nextPage)
-            return (react_1.default.createElement(react_1.default.Fragment, { key: "currPage" },
-                react_1.default.createElement("div", { className: UncontrolledTransition_stories_module_scss_1.default.animatedContainer, style: {
-                        width: 100,
-                        height: 100,
-                        color: "white",
-                        backgroundColor: "black",
-                        animationDelay: `${-(Date.now() % 5000)}ms`,
-                    }, id: "anchor" }, "Anchor only present on page 1"),
-                react_1.default.createElement("button", { onClick: () => setNextPage((a) => !a), style: { margin: "auto" } }, "Click me")));
-        else
-            return (react_1.default.createElement(react_1.default.Fragment, { key: "nextPage" },
-                react_1.default.createElement("h1", { style: {
-                        display: "flex",
-                    } },
-                    "Now here comes the cool part",
-                    " "),
-                react_1.default.createElement("button", { onClick: () => {
-                        setNextPage((a) => !a);
-                        transRef.current.setOrientation("backward");
-                    }, style: { marginLeft: "auto" } }, "Click me to go back even though the anchor does not exists anymore")));
-    };
-    return (react_1.default.createElement("div", { style: {
-            backgroundColor: "red",
-            padding: "250px",
-        } },
-        react_1.default.createElement(_1.default, Object.assign({ ref: transRef, transitionType: Transition_1.TransitionAnimationTypes.POP_FROM_ELEMENT_ID, elementId: "anchor", contentStyle: {
-                backgroundColor: "white",
-            } }, args), CurrentPage())));
-};
-exports.AnchorBasedTransition = AnchorBasedTransition;
-const FadeTransition = (args) => {
-    const transRef = (0, react_1.useRef)(null);
-    const [nextPage, setNextPage] = (0, react_1.useState)(false);
-    const CurrentPage = () => {
-        if (!nextPage)
-            return (react_1.default.createElement(react_1.default.Fragment, { key: "currPage" },
-                react_1.default.createElement("h1", null, "First page"),
-                react_1.default.createElement("button", { onClick: () => setNextPage((a) => !a), style: { margin: "auto" } }, "Change page")));
-        else
-            return (react_1.default.createElement(react_1.default.Fragment, { key: "nextPage" },
-                react_1.default.createElement("h1", null, "Second page"),
-                react_1.default.createElement("button", { onClick: () => {
-                        setNextPage((a) => !a);
-                        transRef.current.setOrientation("backward");
-                    }, style: { margin: "auto" } }, "Click me to go back")));
-    };
-    return (react_1.default.createElement("div", { style: {
-            backgroundColor: "red",
-            padding: "250px",
-        } },
-        react_1.default.createElement(_1.default, Object.assign({ ref: transRef, transitionType: Transition_1.TransitionAnimationTypes.FADE, contentStyle: {
-                backgroundColor: "white",
-            } }, args), CurrentPage())));
-};
-exports.FadeTransition = FadeTransition;
-const firstEmoji = 0x1f604;
-const emojisCount = 0x1f64f - firstEmoji;
-function CoinFlipItem() {
-    const [flippedTheCoin, setFlipped] = (0, react_1.useState)(() => Math.random() > 0.5);
-    const [head, setHead] = (0, react_1.useState)((0 + Math.floor(99 * Math.random())).toString());
-    const [tails, setTails] = (0, react_1.useState)(String.fromCodePoint(firstEmoji + Math.floor(emojisCount * Math.random())));
-    (0, react_1.useEffect)(() => {
-        setTimeout(() => {
-            setFlipped((prev) => !prev);
-        }, 500 + Math.random() * 2000);
-        return () => {
-            if (flippedTheCoin)
-                setHead((0 + Math.floor(99 * Math.random())).toString());
-            else
-                setTails(String.fromCodePoint(firstEmoji + Math.floor(emojisCount * Math.random())));
-        };
-    }, [flippedTheCoin]);
-    const CoinSide = () => (react_1.default.createElement("div", { onClick: () => {
-            setFlipped((prev) => !prev);
-        }, style: {
-            cursor: "pointer",
-            width: "100px",
-            height: "100px",
-            borderRadius: "50px",
-            backgroundColor: flippedTheCoin ? "red" : "green",
-            fontSize: "60px",
-            textAlign: "center",
-            lineHeight: "100px",
-            position: "relative",
-        } }, !flippedTheCoin ? head : tails));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(_1.default, { transitionType: Transition_1.TransitionAnimationTypes.COIN_FLIP, className: UncontrolledTransition_stories_module_scss_1.default.resetHeight },
-            react_1.default.createElement(CoinSide, { key: !flippedTheCoin ? "heads" : "tail" }))));
-}
-const CoinFlip = () => {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("h1", null, "This story displays the animation of flipping between two elements on html"),
-        react_1.default.createElement("h2", null, "This is more usefull with square elements"),
-        react_1.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", position: "relative" } }, new Array(100).fill(undefined).map(() => (react_1.default.createElement(CoinFlipItem, null))))));
-};
-exports.CoinFlip = CoinFlip;
-const BUGFIX_BackwardsInconsistency = () => {
-    const [number, setNumber] = (0, react_1.useState)(10);
-    const ref = (0, react_1.useRef)(null);
-    const prev = (0, react_1.useRef)(number);
-    (0, react_1.useLayoutEffect)(() => {
-        var _a;
-        // Here is some logic that decides on demand if it should go backwards or not
-        if (number < prev.current)
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setOrientation("backward");
-        prev.current = number;
-    }, [number]);
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(_1.default, { transitionType: Transition_1.TransitionAnimationTypes.CUSTOM, config: {
-                backward: {
-                    elementExiting: UncontrolledTransition_stories_module_scss_1.default.outOfTheWay,
-                    elementEntering: UncontrolledTransition_stories_module_scss_1.default.fadeIn,
-                },
-                forward: {
-                    elementExiting: UncontrolledTransition_stories_module_scss_1.default.fadeOut,
-                    elementEntering: "",
-                },
-            }, ref: ref },
-            react_1.default.createElement("h1", { key: String(number) },
-                "N\u00FAmero ",
-                number)),
-        react_1.default.createElement(Button_1.default, { onClick: () => {
-                setNumber((prev) => prev - 1);
-            } }, "Go back with backwards inside useEffect (bugged as hell)"),
-        react_1.default.createElement(Button_1.default, { onClick: () => {
-                var _a;
-                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setOrientation("backward");
-                setNumber((prev) => prev - 1);
-            } },
-            "Go back setting backward ",
-            react_1.default.createElement("b", null, "before"),
-            " next screen (works fine)"),
-        react_1.default.createElement(Button_1.default, { onClick: () => setNumber((prev) => prev + 1) }, "Go forward")));
-};
-exports.BUGFIX_BackwardsInconsistency = BUGFIX_BackwardsInconsistency;
-exports.ClickBasedTransition.args = {};
+"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 });
+exports.BUGFIX_BackwardsInconsistency = exports.CoinFlip = exports.FadeTransition = exports.AnchorBasedTransition = exports.ClickBasedTransition = void 0;
+const react_1 = __importStar(require("react"));
+const _1 = __importDefault(require("."));
+const Button_1 = __importDefault(require("../Button"));
+const Transition_1 = require("../Transition/Transition");
+const UncontrolledTransition_stories_module_scss_1 = __importDefault(require("./UncontrolledTransition.stories.module.scss"));
+exports.default = {
+    title: "Uncontrolled Transition",
+    component: _1.default,
+};
+const ClickBasedTransition = (args) => {
+    const transRef = (0, react_1.useRef)(null);
+    const [nextPage, setNextPage] = (0, react_1.useState)(false);
+    const CurrentPage = () => {
+        if (!nextPage)
+            return (react_1.default.createElement(react_1.default.Fragment, { key: "currPage" },
+                react_1.default.createElement("h1", { style: {
+                        display: "flex",
+                    } },
+                    "Current page",
+                    " ",
+                    react_1.default.createElement("button", { onClick: () => setNextPage((a) => !a), style: { marginLeft: "auto" } }, "Click me to see a cool effect")),
+                react_1.default.createElement("button", { onClick: () => setNextPage((a) => !a), style: { marginRight: "auto" } }, "Hehe"),
+                react_1.default.createElement("h2", null, "Another text"),
+                react_1.default.createElement("button", { onClick: () => setNextPage((a) => !a), style: { margin: "auto" } }, "Or me")));
+        else
+            return (react_1.default.createElement(react_1.default.Fragment, { key: "nextPage" },
+                react_1.default.createElement("h1", { style: {
+                        display: "flex",
+                    } },
+                    "Next page",
+                    " ",
+                    react_1.default.createElement("button", { onClick: () => {
+                            setNextPage((a) => !a);
+                            transRef.current.setOrientation("backward");
+                        }, style: { marginLeft: "auto" } }, "Click me to see a cool effect")),
+                react_1.default.createElement("button", { onClick: () => {
+                        setNextPage((a) => !a);
+                        transRef.current.setOrientation("backward");
+                    }, style: { marginRight: "auto" } }, "Hehe"),
+                react_1.default.createElement("h2", null, "Another text"),
+                react_1.default.createElement("button", { onClick: () => {
+                        setNextPage((a) => !a);
+                        transRef.current.setOrientation("backward");
+                    }, style: { margin: "auto" } }, "Or me")));
+    };
+    return (react_1.default.createElement("div", { style: {
+            backgroundColor: "red",
+            padding: "250px",
+        } },
+        react_1.default.createElement(_1.default, Object.assign({ ref: transRef, transitionType: Transition_1.TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN, contentStyle: {
+                backgroundColor: "white",
+            } }, args), CurrentPage())));
+};
+exports.ClickBasedTransition = ClickBasedTransition;
+const AnchorBasedTransition = (args) => {
+    const transRef = (0, react_1.useRef)(null);
+    const [nextPage, setNextPage] = (0, react_1.useState)(false);
+    const CurrentPage = () => {
+        if (!nextPage)
+            return (react_1.default.createElement(react_1.default.Fragment, { key: "currPage" },
+                react_1.default.createElement("div", { className: UncontrolledTransition_stories_module_scss_1.default.animatedContainer, style: {
+                        width: 100,
+                        height: 100,
+                        color: "white",
+                        backgroundColor: "black",
+                        animationDelay: `${-(Date.now() % 5000)}ms`,
+                    }, id: "anchor" }, "Anchor only present on page 1"),
+                react_1.default.createElement("button", { onClick: () => setNextPage((a) => !a), style: { margin: "auto" } }, "Click me")));
+        else
+            return (react_1.default.createElement(react_1.default.Fragment, { key: "nextPage" },
+                react_1.default.createElement("h1", { style: {
+                        display: "flex",
+                    } },
+                    "Now here comes the cool part",
+                    " "),
+                react_1.default.createElement("button", { onClick: () => {
+                        setNextPage((a) => !a);
+                        transRef.current.setOrientation("backward");
+                    }, style: { marginLeft: "auto" } }, "Click me to go back even though the anchor does not exists anymore")));
+    };
+    return (react_1.default.createElement("div", { style: {
+            backgroundColor: "red",
+            padding: "250px",
+        } },
+        react_1.default.createElement(_1.default, Object.assign({ ref: transRef, transitionType: Transition_1.TransitionAnimationTypes.POP_FROM_ELEMENT_ID, elementId: "anchor", contentStyle: {
+                backgroundColor: "white",
+            } }, args), CurrentPage())));
+};
+exports.AnchorBasedTransition = AnchorBasedTransition;
+const FadeTransition = (args) => {
+    const transRef = (0, react_1.useRef)(null);
+    const [nextPage, setNextPage] = (0, react_1.useState)(false);
+    const CurrentPage = () => {
+        if (!nextPage)
+            return (react_1.default.createElement(react_1.default.Fragment, { key: "currPage" },
+                react_1.default.createElement("h1", null, "First page"),
+                react_1.default.createElement("button", { onClick: () => setNextPage((a) => !a), style: { margin: "auto" } }, "Change page")));
+        else
+            return (react_1.default.createElement(react_1.default.Fragment, { key: "nextPage" },
+                react_1.default.createElement("h1", null, "Second page"),
+                react_1.default.createElement("button", { onClick: () => {
+                        setNextPage((a) => !a);
+                        transRef.current.setOrientation("backward");
+                    }, style: { margin: "auto" } }, "Click me to go back")));
+    };
+    return (react_1.default.createElement("div", { style: {
+            backgroundColor: "red",
+            padding: "250px",
+        } },
+        react_1.default.createElement(_1.default, Object.assign({ ref: transRef, transitionType: Transition_1.TransitionAnimationTypes.FADE, contentStyle: {
+                backgroundColor: "white",
+            } }, args), CurrentPage())));
+};
+exports.FadeTransition = FadeTransition;
+const firstEmoji = 0x1f604;
+const emojisCount = 0x1f64f - firstEmoji;
+function CoinFlipItem() {
+    const [flippedTheCoin, setFlipped] = (0, react_1.useState)(() => Math.random() > 0.5);
+    const [head, setHead] = (0, react_1.useState)((0 + Math.floor(99 * Math.random())).toString());
+    const [tails, setTails] = (0, react_1.useState)(String.fromCodePoint(firstEmoji + Math.floor(emojisCount * Math.random())));
+    (0, react_1.useEffect)(() => {
+        setTimeout(() => {
+            setFlipped((prev) => !prev);
+        }, 500 + Math.random() * 2000);
+        return () => {
+            if (flippedTheCoin)
+                setHead((0 + Math.floor(99 * Math.random())).toString());
+            else
+                setTails(String.fromCodePoint(firstEmoji + Math.floor(emojisCount * Math.random())));
+        };
+    }, [flippedTheCoin]);
+    const CoinSide = () => (react_1.default.createElement("div", { onClick: () => {
+            setFlipped((prev) => !prev);
+        }, style: {
+            cursor: "pointer",
+            width: "100px",
+            height: "100px",
+            borderRadius: "50px",
+            backgroundColor: flippedTheCoin ? "red" : "green",
+            fontSize: "60px",
+            textAlign: "center",
+            lineHeight: "100px",
+            position: "relative",
+        } }, !flippedTheCoin ? head : tails));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(_1.default, { transitionType: Transition_1.TransitionAnimationTypes.COIN_FLIP, className: UncontrolledTransition_stories_module_scss_1.default.resetHeight },
+            react_1.default.createElement(CoinSide, { key: !flippedTheCoin ? "heads" : "tail" }))));
+}
+const CoinFlip = () => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("h1", null, "This story displays the animation of flipping between two elements on html"),
+        react_1.default.createElement("h2", null, "This is more usefull with square elements"),
+        react_1.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", position: "relative" } }, new Array(100).fill(undefined).map(() => (react_1.default.createElement(CoinFlipItem, null))))));
+};
+exports.CoinFlip = CoinFlip;
+const BUGFIX_BackwardsInconsistency = () => {
+    const [number, setNumber] = (0, react_1.useState)(10);
+    const ref = (0, react_1.useRef)(null);
+    const prev = (0, react_1.useRef)(number);
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        // Here is some logic that decides on demand if it should go backwards or not
+        if (number < prev.current)
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setOrientation("backward");
+        prev.current = number;
+    }, [number]);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(_1.default, { transitionType: Transition_1.TransitionAnimationTypes.CUSTOM, config: {
+                backward: {
+                    elementExiting: UncontrolledTransition_stories_module_scss_1.default.outOfTheWay,
+                    elementEntering: UncontrolledTransition_stories_module_scss_1.default.fadeIn,
+                },
+                forward: {
+                    elementExiting: UncontrolledTransition_stories_module_scss_1.default.fadeOut,
+                    elementEntering: "",
+                },
+            }, ref: ref },
+            react_1.default.createElement("h1", { key: String(number) },
+                "N\u00FAmero ",
+                number)),
+        react_1.default.createElement(Button_1.default, { onClick: () => {
+                setNumber((prev) => prev - 1);
+            } }, "Go back with backwards inside useEffect (bugged as hell)"),
+        react_1.default.createElement(Button_1.default, { onClick: () => {
+                var _a;
+                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setOrientation("backward");
+                setNumber((prev) => prev - 1);
+            } },
+            "Go back setting backward ",
+            react_1.default.createElement("b", null, "before"),
+            " next screen (works fine)"),
+        react_1.default.createElement(Button_1.default, { onClick: () => setNumber((prev) => prev + 1) }, "Go forward")));
+};
+exports.BUGFIX_BackwardsInconsistency = BUGFIX_BackwardsInconsistency;
+exports.ClickBasedTransition.args = {};
 //# sourceMappingURL=UncontrolledTransition.stories.js.map

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

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