@onepercentio/one-ui 0.1.2

package/dist/components/AnchoredTooltip/AnchoredTooltip.js

@@ -0,0 +1,162 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 FadeIn_1 = __importDefault(require("../FadeIn"));
+const AnchoredTooltip_module_scss_1 = __importDefault(require("./AnchoredTooltip.module.scss"));
+function getPositionOnViewport(element) {
+    return element.getBoundingClientRect();
+}
+function calculateTooltipFromAnchor(anchorRef, tooltipRef) {
+    const anchorPosition = getPositionOnViewport(anchorRef.current);
+    const shouldAnchorToBottom = tooltipRef.current.clientHeight > anchorPosition.top;
+    let top = anchorPosition.top - tooltipRef.current.clientHeight;
+    let left = anchorPosition.left +
+        anchorPosition.width / 2 -
+        tooltipRef.current.clientWidth / 2;
+    if (shouldAnchorToBottom)
+        top += tooltipRef.current.clientHeight + anchorRef.current.clientHeight;
+    if (top < 0)
+        top = 0;
+    const offset = top + tooltipRef.current.clientHeight - window.innerHeight;
+    if (offset > 0) {
+        top -= offset;
+    }
+    const offsetLeft = left + tooltipRef.current.clientWidth - window.innerWidth;
+    if (offsetLeft > 0) {
+        left -= offsetLeft;
+    }
+    if (left < 0) {
+        left = 0;
+    }
+    const maxLeftOffsetIndicator = tooltipRef.current.clientWidth / 2 - 60;
+    const tooltipCenter = tooltipRef.current.clientWidth / 2 + left;
+    const anchorPositionCenter = anchorPosition.left + anchorPosition.width / 2;
+    const offsetTooltip = anchorPositionCenter - tooltipCenter;
+    const minOffsetTooltip = -(tooltipRef.current.clientWidth / 2) + 60;
+    const offsetIndicatorLeft = offsetLeft > 0
+        ? offsetLeft > maxLeftOffsetIndicator
+            ? maxLeftOffsetIndicator
+            : offsetLeft
+        : offsetTooltip < 0
+            ? offsetTooltip < minOffsetTooltip
+                ? minOffsetTooltip
+                : offsetTooltip
+            : 0;
+    return {
+        offset,
+        offsetIndicatorLeft,
+        top,
+        left,
+        shouldAnchorToBottom,
+    };
+}
+/**
+ * This tooltip anchors itself to an element and handles positioning relative to the anchored element
+ **/
+function AnchoredTooltip(props) {
+    const { open, children, anchorRef } = props;
+    const tooltipRef = (0, react_1.useRef)(null);
+    function updateTooltipPosition() {
+        if (!anchorRef.current)
+            return;
+        const { top, left, shouldAnchorToBottom, offsetIndicatorLeft } = calculateTooltipFromAnchor(anchorRef, tooltipRef);
+        tooltipRef.current.style.top = `${top}px`;
+        tooltipRef.current.style.left = `${left}px`;
+        tooltipRef.current.style.setProperty("--anchor-indicator-offset-left", `${offsetIndicatorLeft}px`);
+        if (shouldAnchorToBottom) {
+            tooltipRef.current.classList.remove(AnchoredTooltip_module_scss_1.default.anchoredTop);
+            tooltipRef.current.classList.add(AnchoredTooltip_module_scss_1.default.anchoredBottom);
+        }
+        else {
+            tooltipRef.current.classList.add(AnchoredTooltip_module_scss_1.default.anchoredTop);
+            tooltipRef.current.classList.remove(AnchoredTooltip_module_scss_1.default.anchoredBottom);
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            updateTooltipPosition();
+            const scrollHandler = () => {
+                updateTooltipPosition();
+            };
+            window.addEventListener("scroll", scrollHandler);
+            return () => {
+                window.removeEventListener("scroll", scrollHandler);
+            };
+        }
+    }, [open, anchorRef]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(FadeIn_1.default, { onClick: (e) => e.stopPropagation(), ref: tooltipRef, className: `${AnchoredTooltip_module_scss_1.default.tooltipContainer} ${open ? AnchoredTooltip_module_scss_1.default.open : ""} ${props.className || ""}` }, open ? react_1.default.createElement("div", null, children) : undefined)));
+}
+exports.default = AnchoredTooltip;
+function DebuggingHelper(props) {
+    const [anchorInfo, setAnchorInfo] = (0, react_1.useState)({});
+    function update() {
+        return getPositionOnViewport(props.anchorRef.current).toJSON();
+    }
+    (0, react_1.useEffect)(() => {
+        setAnchorInfo(update());
+        setInterval(() => {
+            setAnchorInfo(update());
+        }, 500);
+    }, []);
+    return (react_1.default.createElement("div", { style: {
+            backgroundColor: "black",
+            position: "fixed",
+            color: "green",
+            fontFamily: "monospace",
+            padding: "1em",
+            fontSize: "16px",
+            lineHeight: "1.5em",
+            opacity: 0.75,
+            bottom: 0,
+            right: 0,
+            maxHeight: "50vh",
+            overflow: "auto",
+            pointerEvents: "none",
+        } },
+        "Calculated info:",
+        react_1.default.createElement("br", null),
+        Object.entries(calculateTooltipFromAnchor(props.anchorRef, props.tooltipRef)).map(([k, v]) => {
+            return (react_1.default.createElement("p", null,
+                react_1.default.createElement("b", null, k),
+                ": ",
+                typeof v !== "boolean" ? v : v ? "true" : "false"));
+        }),
+        "Window info:",
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("p", null,
+            react_1.default.createElement("b", null, "Height:"),
+            " ",
+            window.innerHeight),
+        react_1.default.createElement("br", null),
+        "Anchor info:",
+        Object.entries(anchorInfo).map(([name, value]) => {
+            return (react_1.default.createElement("p", null,
+                react_1.default.createElement("b", null, name),
+                ": ",
+                value));
+        })));
+}
+//# sourceMappingURL=AnchoredTooltip.js.map

package/dist/components/AnchoredTooltip/AnchoredTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnchoredTooltip.js","sourceRoot":"","sources":["../../../src/components/AnchoredTooltip/AnchoredTooltip.tsx"],"names":[],"mappings":"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"}

package/dist/components/AnchoredTooltip/AnchoredTooltip.module.scss

@@ -0,0 +1,61 @@
+@import "../../assets/styles/index.scss";
+
+/**
+* Some notions to take into account
+*/
+
+.tooltipContainer {
+  & > div {
+    background-color: $tooltipBackgroudColor;
+  }
+  // It should not overflow the viewport (screen)
+  max-width: 100vw;
+  max-height: 100vh;
+  min-width: fit-content;
+
+  // It should be floating over some point into the viewport
+  position: fixed;
+
+  // The position will be calculated via the javascript and the context
+
+  transition: top $almostInstant, left $almostInstant;
+  z-index: 1000;
+
+  pointer-events: none;
+
+  &.open {
+    pointer-events: initial;
+  }
+
+  &::after,
+  &::before {
+    content: " ";
+    width: 0px;
+    height: 0px;
+    border: 16px solid $tooltipBackgroudColor;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    transform: translateY(-16px) rotate(-45deg);
+    display: block;
+    margin: auto;
+    position: relative;
+    left: var(--anchor-indicator-offset-left, 0px);
+  }
+
+  &::before {
+    display: none;
+    transform: translateY(16px) rotate(135deg);
+  }
+  &.anchoredTop {
+    transform: translateY(4px);
+  }
+  &.anchoredBottom {
+    transform: translateY(-4px);
+    &::after {
+      display: none;
+    }
+    &::before {
+      display: block;
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import React from "react";
+import AnchoredTooltip from "./AnchoredTooltip";
+declare const _default: {
+    component: typeof AnchoredTooltip;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        children: JSX.Element;
+        anchorRef: React.RefObject<HTMLElement>;
+        open: boolean;
+        className?: string | undefined;
+    }>;
+};

package/dist/components/AnchoredTooltip/AnchoredTooltip.stories.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.InitialImplementation = void 0;
+const react_1 = __importStar(require("react"));
+const AnchoredTooltip_1 = __importDefault(require("./AnchoredTooltip"));
+exports.default = {
+    component: AnchoredTooltip_1.default,
+    title: "Anchored Tooltip",
+};
+const InitialImplementation = (args) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [open2, setOpen2] = (0, react_1.useState)(false);
+    const [open3, setOpen3] = (0, react_1.useState)(false);
+    const [open4, setOpen4] = (0, react_1.useState)(false);
+    const elementRef = (0, react_1.useRef)(null);
+    const elementRef2 = (0, react_1.useRef)(null);
+    const elementRef3 = (0, react_1.useRef)(null);
+    const elementRef4 = (0, react_1.useRef)(null);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { "data-testid": "viewport", style: {
+                width: "200vw",
+                height: "100vh",
+                backgroundColor: "lightblue",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                marginBottom: "200vh",
+                flexDirection: "column",
+            } },
+            react_1.default.createElement("h1", { ref: elementRef, style: {
+                    width: "200px",
+                    height: "200px",
+                    backgroundColor: "lightyellow",
+                }, onClick: () => setOpen((a) => !a) },
+                "Element to anchor to",
+                react_1.default.createElement("br", null),
+                "Click to open tooltip"),
+            react_1.default.createElement("h1", { ref: elementRef3, style: {
+                    alignSelf: "flex-end",
+                }, onClick: () => setOpen3((a) => !a) }, "This one is aligned right"),
+            react_1.default.createElement(AnchoredTooltip_1.default, { anchorRef: elementRef3, open: open3 },
+                react_1.default.createElement("h1", { style: { maxWidth: "1000px", margin: "0px" } }, "This content will overflow the available width of the screen so it needs to go to the left side so all the content can be visible by the user currently watching the screen and interacting with the elements available")),
+            react_1.default.createElement("h1", { ref: elementRef4, style: {
+                    alignSelf: "flex-start",
+                }, onClick: () => setOpen4((a) => !a) }, "This one is aligned left"),
+            react_1.default.createElement(AnchoredTooltip_1.default, { anchorRef: elementRef4, open: open4 },
+                react_1.default.createElement("h1", { style: { maxWidth: "1000px", margin: "0px" } }, "This content will overflow the available width of the screen so it needs to go to the right side so all the content can be visible by the user currently watching the screen and interacting with the elements available")),
+            react_1.default.createElement(AnchoredTooltip_1.default, { anchorRef: elementRef, open: open },
+                react_1.default.createElement("div", { style: { color: "white" } },
+                    "The content of the tooltip",
+                    react_1.default.createElement("br", null),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("h1", { style: { margin: 0 } }, "Some extra content"))))),
+        react_1.default.createElement("h1", { ref: elementRef2, onClick: () => setOpen2((a) => !a) }, "Another tooltip to show"),
+        react_1.default.createElement(AnchoredTooltip_1.default, { open: open2, anchorRef: elementRef2 },
+            react_1.default.createElement("h1", { style: { margin: 0 } }, "Another tooltip"))));
+};
+exports.InitialImplementation = InitialImplementation;
+exports.InitialImplementation.args = {};
+//# sourceMappingURL=AnchoredTooltip.stories.js.map

package/dist/components/AnchoredTooltip/AnchoredTooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnchoredTooltip.stories.js","sourceRoot":"","sources":["../../../src/components/AnchoredTooltip/AnchoredTooltip.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAgD;AAChD,wEAAgD;AAEhD,kBAAe;IACb,SAAS,EAAE,yBAAe;IAC1B,KAAK,EAAE,kBAAkB;CAC1B,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE;IACjD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,UAAU,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IACrD,OAAO,CACL;QACE,sDACc,UAAU,EACtB,KAAK,EAAE;gBACL,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,OAAO;gBACf,eAAe,EAAE,WAAW;gBAC5B,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,YAAY,EAAE,OAAO;gBACrB,aAAa,EAAE,QAAQ;aACxB;YAED,sCACE,GAAG,EAAE,UAAU,EACf,KAAK,EAAE;oBACL,KAAK,EAAE,OAAO;oBACd,MAAM,EAAE,OAAO;oBACf,eAAe,EAAE,aAAa;iBAC/B,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;;gBAGjC,yCAAM;wCAEH;YACL,sCACE,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE;oBACL,SAAS,EAAE,UAAU;iBACtB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,gCAG/B;YACL,8BAAC,yBAAe,IAAC,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK;gBAClD,sCAAI,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,8NAK3C,CACW;YAClB,sCACE,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE;oBACL,SAAS,EAAE,YAAY;iBACxB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,+BAG/B;YACL,8BAAC,yBAAe,IAAC,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK;gBAClD,sCAAI,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,+NAK3C,CACW;YAClB,8BAAC,yBAAe,IAAC,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI;gBAChD,uCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;;oBAE5B,yCAAM;oBACN;wBACE,sCAAI,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,yBAAyB,CAC7C,CACF,CACU,CACd;QACN,sCAAI,GAAG,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,8BAEnD;QACL,8BAAC,yBAAe,IAAC,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW;YAClD,sCAAI,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,sBAAsB,CAC9B,CACjB,CACJ,CAAC;AACJ,CAAC,CAAC;AAzFW,QAAA,qBAAqB,yBAyFhC;AACF,6BAAqB,CAAC,IAAI,GAAG,EAE5B,CAAC"}

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

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

package/dist/components/AnchoredTooltip/AnchoredTooltip.test.js

@@ -0,0 +1,20 @@
+"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 react_2 = require("@testing-library/react");
+const AnchoredTooltip_stories_1 = require("./AnchoredTooltip.stories");
+function renderScreen(props) {
+    return (0, react_2.render)(react_1.default.createElement(AnchoredTooltip_stories_1.InitialImplementation, Object.assign({}, props)));
+}
+it('Should at least render :)', () => {
+    renderScreen({});
+});
+it.todo("Should display over the bound element", () => {
+});
+it.todo("Should position under when it can't show fully on top");
+it.todo("Should move left when the content will overflow viewport");
+it.todo("Should anchor to parent if we scroll over the current position");
+//# sourceMappingURL=AnchoredTooltip.test.js.map

package/dist/components/AnchoredTooltip/AnchoredTooltip.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnchoredTooltip.test.js","sourceRoot":"","sources":["../../../src/components/AnchoredTooltip/AnchoredTooltip.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAEhD,uEAA+E;AAE/E,SAAS,YAAY,CAAC,KAA6C;IACjE,OAAO,IAAA,cAAM,EAAC,8BAAC,+CAAS,oBAAK,KAAK,EAAG,CAAC,CAAC;AACzC,CAAC;AAED,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACjC,YAAY,CAAC,EAAE,CAAC,CAAC;AACrB,CAAC,CAAC,CAAA;AA0BF,EAAE,CAAC,IAAI,CAAC,uCAAuC,EAAE,GAAG,EAAE;AAEtD,CAAC,CAAC,CAAC;AACH,EAAE,CAAC,IAAI,CAAC,uDAAuD,CAAC,CAAC;AACjE,EAAE,CAAC,IAAI,CAAC,0DAA0D,CAAC,CAAC;AACpE,EAAE,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAC"}

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

@@ -0,0 +1 @@
+export { default } from './AnchoredTooltip';

package/dist/components/AnchoredTooltip/index.js

@@ -0,0 +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 AnchoredTooltip_1 = require("./AnchoredTooltip");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AnchoredTooltip_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/components/AnchoredTooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AnchoredTooltip/index.tsx"],"names":[],"mappings":";;;;;;AAAA,qDAA4C;AAAnC,2HAAA,OAAO,OAAA"}

package/dist/components/AsyncWrapper/AsyncWrapper.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from "react";
+/**
+ * This is a generic implementation of the loading, and error handling
+ **/
+export default function AsyncWrapper({ loading, error, onClose, onRetry, children, }: PropsWithChildren<{
+    loading: boolean;
+    error: boolean;
+    onClose: () => void;
+    onRetry: () => void;
+}>): JSX.Element;

package/dist/components/AsyncWrapper/AsyncWrapper.js

@@ -0,0 +1,25 @@
+"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 OneUIProvider_1 = require("../../context/OneUIProvider");
+const AdaptiveDialog_1 = __importDefault(require("../AdaptiveDialog"));
+const Button_1 = __importDefault(require("../Button"));
+const Loader_1 = __importDefault(require("../Loader"));
+const Text_1 = __importDefault(require("../Text"));
+/**
+ * This is a generic implementation of the loading, and error handling
+ **/
+function AsyncWrapper({ loading, error, onClose, onRetry, children, }) {
+    const { LoadingComponent = Loader_1.default, messages, } = (0, OneUIProvider_1.useOneUIContext)().component.asyncWrapper;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        children,
+        react_1.default.createElement(AdaptiveDialog_1.default, { open: error, onClose: onClose },
+            react_1.default.createElement(Text_1.default, { type: "highlightTitle" }, messages.error.title),
+            react_1.default.createElement(Button_1.default, { onClick: () => onRetry() }, messages.error.retryBtn)),
+        loading ? react_1.default.createElement(LoadingComponent, null) : null));
+}
+exports.default = AsyncWrapper;
+//# sourceMappingURL=AsyncWrapper.js.map

package/dist/components/AsyncWrapper/AsyncWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncWrapper.js","sourceRoot":"","sources":["../../../src/components/AsyncWrapper/AsyncWrapper.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiD;AACjD,+DAA8D;AAC9D,uEAA+C;AAC/C,uDAA+B;AAC/B,uDAA+B;AAC/B,mDAA2B;AAE3B;;IAEI;AACJ,SAAwB,YAAY,CAAC,EACnC,OAAO,EACP,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,GAMR;IACA,MAAM,EACJ,gBAAgB,GAAG,gBAAM,EACzB,QAAQ,GACT,GAAG,IAAA,+BAAe,GAAE,CAAC,SAAS,CAAC,YAAY,CAAC;IAE7C,OAAO,CACL;QACG,QAAQ;QACT,8BAAC,wBAAc,IAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO;YAC3C,8BAAC,cAAI,IAAC,IAAI,EAAC,gBAAgB,IAAE,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAQ;YACzD,8BAAC,gBAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,IAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAU,CACrD;QAChB,OAAO,CAAC,CAAC,CAAC,8BAAC,gBAAgB,OAAG,CAAC,CAAC,CAAC,IAAI,CACrC,CACJ,CAAC;AACJ,CAAC;AA3BD,+BA2BC"}

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

@@ -0,0 +1,18 @@
+import React from "react";
+import AsyncWrapper from "./AsyncWrapper";
+declare const _default: {
+    component: typeof AsyncWrapper;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        loading: boolean;
+        error: boolean;
+        onClose: () => void;
+        onRetry: () => void;
+    } & {
+        children?: React.ReactNode;
+    }>;
+};

package/dist/components/AsyncWrapper/AsyncWrapper.stories.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialImplementation = void 0;
+const react_1 = __importDefault(require("react"));
+const OneUIProvider_1 = __importDefault(require("../../context/OneUIProvider"));
+const Loader_1 = __importDefault(require("../Loader"));
+const AsyncWrapper_1 = __importDefault(require("./AsyncWrapper"));
+exports.default = {
+    component: AsyncWrapper_1.default,
+    title: "Async Wrapper",
+};
+const InitialImplementation = (args) => (react_1.default.createElement(OneUIProvider_1.default, { config: {
+        component: {
+            asyncWrapper: {
+                LoadingComponent: () => react_1.default.createElement(Loader_1.default, null),
+                messages: {
+                    error: {
+                        title: "Exemplo de error",
+                        retryBtn: "Tentar novamente",
+                    },
+                },
+            },
+        },
+    } },
+    react_1.default.createElement(AsyncWrapper_1.default, Object.assign({}, args))));
+exports.InitialImplementation = InitialImplementation;
+exports.InitialImplementation.args = {
+    loading: true,
+    error: false
+};
+//# sourceMappingURL=AsyncWrapper.stories.js.map

package/dist/components/AsyncWrapper/AsyncWrapper.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncWrapper.stories.js","sourceRoot":"","sources":["../../../src/components/AsyncWrapper/AsyncWrapper.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,gFAAwD;AACxD,uDAA+B;AAC/B,kEAA0C;AAE1C,kBAAe;IACb,SAAS,EAAE,sBAAY;IACvB,KAAK,EAAE,eAAe;CACvB,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC,CAClD,8BAAC,uBAAa,IACZ,MAAM,EAAE;QACN,SAAS,EAAE;YACT,YAAY,EAAE;gBACZ,gBAAgB,EAAE,GAAG,EAAE,CAAC,8BAAC,gBAAM,OAAG;gBAClC,QAAQ,EAAE;oBACR,KAAK,EAAE;wBACL,KAAK,EAAE,kBAAkB;wBACzB,QAAQ,EAAE,kBAAkB;qBAC7B;iBACF;aACF;SACF;KACF;IAED,8BAAC,sBAAY,oBAAK,IAAI,EAAI,CACZ,CACjB,CAAC;AAlBW,QAAA,qBAAqB,yBAkBhC;AACF,6BAAqB,CAAC,IAAI,GAAG;IACzB,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,KAAK;CAGf,CAAC"}

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

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

package/dist/components/AsyncWrapper/AsyncWrapper.test.js

@@ -0,0 +1,19 @@
+"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 react_2 = require("@testing-library/react");
+const AsyncWrapper_stories_1 = require("./AsyncWrapper.stories");
+function renderScreen(props) {
+    return (0, react_2.render)(react_1.default.createElement(AsyncWrapper_stories_1.InitialImplementation, Object.assign({}, props)));
+}
+it('Should at least render :)', () => {
+    renderScreen({});
+});
+it.todo("Should show the modal when ther is error");
+it.todo("Should show the loading screen when it's loading");
+it.todo("Should be able to retry");
+it.todo("Should be able to exit without retrying");
+//# sourceMappingURL=AsyncWrapper.test.js.map

package/dist/components/AsyncWrapper/AsyncWrapper.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncWrapper.test.js","sourceRoot":"","sources":["../../../src/components/AsyncWrapper/AsyncWrapper.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAEhD,iEAA4E;AAE5E,SAAS,YAAY,CAAC,KAA6C;IACjE,OAAO,IAAA,cAAM,EAAC,8BAAC,4CAAS,oBAAK,KAAK,EAAG,CAAC,CAAC;AACzC,CAAC;AAED,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACjC,YAAY,CAAC,EAAE,CAAC,CAAC;AACrB,CAAC,CAAC,CAAA;AAEF,EAAE,CAAC,IAAI,CAAC,0CAA0C,CAAC,CAAC;AACpD,EAAE,CAAC,IAAI,CAAC,kDAAkD,CAAC,CAAC;AAC5D,EAAE,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;AACnC,EAAE,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAC"}

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

@@ -0,0 +1 @@
+export { default } from './AsyncWrapper';

package/dist/components/AsyncWrapper/index.js

@@ -0,0 +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 AsyncWrapper_1 = require("./AsyncWrapper");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AsyncWrapper_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/components/AsyncWrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AsyncWrapper/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+CAAyC;AAAhC,wHAAA,OAAO,OAAA"}

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A simple avatar that shows the image of the user or it's initials as fallback
+ **/
+export default function Avatar({ name, imgSrc, size, }: {
+    imgSrc?: string;
+    name: string;
+    size?: number;
+}): JSX.Element;

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,41 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 Avatar_module_scss_1 = __importDefault(require("./Avatar.module.scss"));
+/**
+ * A simple avatar that shows the image of the user or it's initials as fallback
+ **/
+function Avatar({ name, imgSrc, size = 48, }) {
+    const initials = (0, react_1.useMemo)(() => {
+        const nameParts = name.trim().split(" ");
+        if (nameParts.length === 1)
+            return nameParts[0].charAt(0).toUpperCase();
+        const [firstName, lastName] = [nameParts[0], nameParts.slice(-1)[0]];
+        return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+    }, [name]);
+    return (react_1.default.createElement("div", { className: Avatar_module_scss_1.default.container, style: { fontSize: size }, title: name }, imgSrc ? react_1.default.createElement("img", { src: imgSrc, alt: name }) : react_1.default.createElement("span", null, initials)));
+}
+exports.default = Avatar;
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AACvC,8EAA0C;AAE1C;;IAEI;AACJ,SAAwB,MAAM,CAAC,EAC7B,IAAI,EACJ,MAAM,EACN,IAAI,GAAG,EAAE,GAKV;IACC,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC5B,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACzC,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QACxE,MAAM,CAAC,SAAS,EAAE,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACrE,OAAO,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC;IACrE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IACX,OAAO,CACL,uCAAK,SAAS,EAAE,4BAAM,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,IACrE,MAAM,CAAC,CAAC,CAAC,uCAAK,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,4CAAO,QAAQ,CAAQ,CAC/D,CACP,CAAC;AACJ,CAAC;AApBD,yBAoBC"}

package/dist/components/Avatar/Avatar.module.scss

@@ -0,0 +1,19 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+    background-color: $avatarBackgroundColor;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    border-radius: 0.5em;
+
+    > span {
+        font-size: 0.4em;
+        width: inherit;
+        height: inherit;
+        text-align: center;
+        line-height: 2.5em;
+        display: block;
+        color: $digitalBlue;
+    }
+}

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

@@ -0,0 +1,14 @@
+import Avatar from "./Avatar";
+declare const _default: {
+    component: typeof Avatar;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        imgSrc?: string | undefined;
+        name: string;
+        size?: number | undefined;
+    }>;
+};