ag-common 0.0.375 → 0.0.376

package/dist/ui/components/ProgressBar/index.d.ts

@@ -8,5 +8,8 @@ export interface IProgressBar {
     backColour?: string;
     /** default 25,50,75 */
     dotPercentages?: number[] | null;
+    className?: string;
+    /** if true, will transition to the end in X ms */
+    transitionToMs?: number;
 }
 export declare const ProgressBar: (p: IProgressBar) => JSX.Element;

package/dist/ui/components/ProgressBar/index.js

@@ -1,11 +1,34 @@
 "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.ProgressBar = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styles_1 = require("../../styles");
 const Base = styled_1.default.div `
   position: relative;
@@ -20,7 +43,6 @@ const Bar = styled_1.default.div `
   top: 0;
   bottom: 0;
   left: 0;
-  transition: width 0.2s ease;
 `;
 const Dot = styled_1.default.div `
   position: absolute;
@@ -35,16 +57,29 @@ const Dot = styled_1.default.div `
   }
 `;
 const ProgressBar = (p) => {
-    const { min, max, frontColour = styles_1.colours.notificationBlue, backColour = '#eee', dotPercentages = [25, 50, 75], } = p;
-    const barWidth = (min / max) * 100;
-    return (react_1.default.createElement(Base, { style: { backgroundColor: backColour } },
+    const { transitionToMs = 200, frontColour = styles_1.colours.notificationBlue, backColour = '#eee', dotPercentages = [25, 50, 75], } = p;
+    const [barWidth, setBarWidth] = (0, react_1.useState)((p.min / p.max) * 100);
+    (0, react_1.useEffect)(() => {
+        const newbw = (p.min / p.max) * 100;
+        if (barWidth !== newbw) {
+            setBarWidth(newbw);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [p.min, p.max]);
+    (0, react_1.useEffect)(() => {
+        if (transitionToMs) {
+            setBarWidth(p.max);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (react_1.default.createElement(Base, { style: {
+            backgroundColor: backColour,
+        }, className: p.className },
         react_1.default.createElement(Bar, { style: {
                 width: `${barWidth}%`,
                 backgroundColor: frontColour,
-            } }),
-        (dotPercentages === null || dotPercentages === void 0 ? void 0 : dotPercentages.map) &&
-            dotPercentages.map((v) => {
-                return (react_1.default.createElement(Dot, { key: v, style: { left: `calc(${v}% - 0.25rem)` }, "data-invert": v > barWidth }));
-            })));
+                transition: `width ${transitionToMs}ms linear`,
+            } }), dotPercentages === null || dotPercentages === void 0 ? void 0 :
+        dotPercentages.map((v) => (react_1.default.createElement(Dot, { key: v, style: { left: `calc(${v}% - 0.25rem)` }, "data-invert": v > barWidth })))));
 };
 exports.ProgressBar = ProgressBar;

package/dist/ui/components/Toast/Cross.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Cross: () => JSX.Element;

package/dist/ui/components/Toast/Cross.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cross = void 0;
+const react_1 = __importDefault(require("react"));
+const Cross = () => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" },
+    react_1.default.createElement("defs", null,
+        react_1.default.createElement("linearGradient", { id: "a", x2: "0", y1: "47.37", y2: "-1.429", gradientUnits: "userSpaceOnUse" },
+            react_1.default.createElement("stop", { stopColor: "#c52828" }),
+            react_1.default.createElement("stop", { offset: "1", stopColor: "#ff5454" }))),
+    react_1.default.createElement("g", { style: { fillOpacity: 1 }, transform: "translate(-58.37 .882) scale(.99999)" },
+        react_1.default.createElement("circle", { cx: "82.37", cy: "23.12", r: "24", fill: "url(#a)", style: { fillOpacity: 1, fill: '#d33' } }),
+        react_1.default.createElement("path", { fill: "#fff", fillOpacity: ".842", d: "m87.77 23.725 5.939-5.939c.377-.372.566-.835.566-1.373 0-.54-.189-.997-.566-1.374l-2.747-2.747a1.888 1.888 0 0 0-1.373-.564c-.539 0-.997.186-1.374.564l-5.939 5.939-5.939-5.939a1.889 1.889 0 0 0-1.374-.564c-.539 0-.997.186-1.374.564l-2.748 2.747a1.873 1.873 0 0 0-.566 1.374c0 .54.188.997.566 1.373l5.939 5.939-5.939 5.94a1.862 1.862 0 0 0-.566 1.373c0 .54.188.997.566 1.373l2.748 2.747c.377.378.835.564 1.374.564.539 0 .997-.186 1.374-.564l5.939-5.939 5.94 5.939c.377.378.835.564 1.374.564.539 0 .997-.186 1.373-.564l2.747-2.747c.377-.372.566-.835.566-1.373 0-.54-.188-.997-.566-1.373l-5.939-5.94", style: { fillOpacity: 1, fill: '#fff' } }))));
+exports.Cross = Cross;

package/dist/ui/components/Toast/Tick.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Tick: () => JSX.Element;

package/dist/ui/components/Toast/Tick.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tick = void 0;
+const react_1 = __importDefault(require("react"));
+const Tick = () => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64" },
+    react_1.default.createElement("circle", { cx: "32", cy: "32", r: "30", fill: "#fff" }),
+    react_1.default.createElement("path", { fill: "#7cb342", d: "M32 2C15.431 2 2 15.432 2 32c0 16.568 13.432 30 30 30 16.568 0 30-13.432 30-30C62 15.432 48.568 2 32 2zm-6.975 48-.02-.02-.017.02L11 35.6l7.029-7.164 6.977 7.184 21-21.619L53 21.199 25.025 50z" })));
+exports.Tick = Tick;

package/dist/ui/components/Toast/Warning.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Warning: () => JSX.Element;

package/dist/ui/components/Toast/Warning.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Warning = void 0;
+const react_1 = __importDefault(require("react"));
+const Warning = () => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64" },
+    react_1.default.createElement("defs", null,
+        react_1.default.createElement("linearGradient", { id: "a", x2: "0", y1: "45.47", y2: "-.599", gradientTransform: "matrix(1.31117 0 0 1.30239 737.39 159.91)", gradientUnits: "userSpaceOnUse" },
+            react_1.default.createElement("stop", { stopColor: "#ffc515" }),
+            react_1.default.createElement("stop", { offset: "1", stopColor: "#ffd55b" }))),
+    react_1.default.createElement("path", { fill: "url(#a)", d: "m797.94 212.01-25.607-48c-.736-1.333-2.068-2.074-3.551-2.074s-2.822.889-3.569 2.222l-25.417 48c-.598 1.185-.605 2.815.132 4s1.921 1.778 3.404 1.778h51.02c1.483 0 2.821-.741 3.42-1.926.747-1.185.753-2.667.165-4", transform: "translate(-627.02 -130.8) scale(.85714)" }),
+    react_1.default.createElement("path", { fillOpacity: ".75", stroke: "#40330d", strokeWidth: ".90168", d: "M31.996 24.239a1.93 1.93 0 0 0-1.926 1.92v11.559c0 1.06.855 1.92 1.926 1.92a1.929 1.929 0 0 0 1.925-1.92v-11.56c0-1.06-.853-1.92-1.925-1.92zm0 19.249c-1.064 0-1.926.86-1.926 1.925 0 1.064.86 1.925 1.926 1.925 1.064 0 1.925-.86 1.925-1.925a1.922 1.922 0 0 0-1.925-1.925z" })));
+exports.Warning = Warning;

package/dist/ui/components/Toast/base.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IToastInt, IToastProviderOptions, TAddToast } from './types';
+export declare const ToastContext: React.Context<{
+    addToast: TAddToast;
+}>;
+export declare const Toast: ({ toast, close, providerOptions, }: {
+    toast: IToastInt;
+    providerOptions: IToastProviderOptions;
+    close: (s: string) => void;
+}) => JSX.Element;
+export declare const ToastProvider: ({ children, providerOptions, }: {
+    children: React.ReactNode;
+    providerOptions?: IToastProviderOptions | undefined;
+}) => JSX.Element;

package/dist/ui/components/Toast/base.js

@@ -0,0 +1,150 @@
+"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.ToastProvider = exports.Toast = exports.ToastContext = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const common_1 = require("../../../common");
+const ProgressBar_1 = require("../ProgressBar");
+const Cross_1 = require("./Cross");
+const Tick_1 = require("./Tick");
+const Warning_1 = require("./Warning");
+exports.ToastContext = (0, react_1.createContext)({});
+const ToastContainerStyle = styled_1.default.div `
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  margin: 0.5rem;
+  z-index: 10000;
+`;
+const ToastStyle = styled_1.default.div `
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  padding: 0.5rem;
+  position: relative;
+  color: white;
+  font-size: 1.2rem;
+  &:not(:last-of-type) {
+    margin-bottom: 8px;
+  }
+
+  border-radius: 6px;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  &[data-dark='false'] {
+    background-color: rgba(255, 255, 255, 0.8);
+    color: black;
+  }
+`;
+const CloseStyle = styled_1.default.span `
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+
+  cursor: pointer;
+  border-radius: 50%;
+  padding: 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  &:hover {
+    background-color: #333;
+  }
+
+  &[data-dark='false'] {
+    color: #000;
+    &:hover {
+      background-color: #eee;
+    }
+  }
+`;
+const Icon = styled_1.default.div `
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.5rem;
+`;
+const ProgressBarStyled = (0, styled_1.default)(ProgressBar_1.ProgressBar) `
+  height: 0.75rem;
+  margin-top: 0.5rem;
+`;
+const Toast = ({ toast, close, providerOptions, }) => {
+    var _a, _b, _c, _d, _e;
+    const darkMode = (_a = providerOptions === null || providerOptions === void 0 ? void 0 : providerOptions.darkMode) !== null && _a !== void 0 ? _a : false;
+    let closeMs;
+    if ((_b = toast.options) === null || _b === void 0 ? void 0 : _b.autoClose) {
+        closeMs = (_c = toast.options) === null || _c === void 0 ? void 0 : _c.autoClose;
+    }
+    else if (((_d = toast.options) === null || _d === void 0 ? void 0 : _d.autoClose) === undefined) {
+        closeMs = 5000;
+    }
+    let icon = react_1.default.createElement(Tick_1.Tick, null);
+    switch ((_e = toast === null || toast === void 0 ? void 0 : toast.options) === null || _e === void 0 ? void 0 : _e.appearance) {
+        case 'error': {
+            closeMs = undefined;
+            icon = react_1.default.createElement(Cross_1.Cross, null);
+            break;
+        }
+        case 'warning': {
+            closeMs = undefined;
+            icon = react_1.default.createElement(Warning_1.Warning, null);
+            break;
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        if (!closeMs) {
+            return;
+        }
+        const timeout = setTimeout(() => close(toast.id), closeMs);
+        return () => clearTimeout(timeout);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (react_1.default.createElement(ToastStyle, { "data-dark": darkMode },
+        react_1.default.createElement(CloseStyle, { "data-dark": darkMode, onClick: () => close(toast.id) }, "\u00D7"),
+        react_1.default.createElement(Icon, null, icon),
+        toast.message,
+        closeMs !== undefined && (react_1.default.createElement(ProgressBarStyled, { max: 100, min: 0, dotPercentages: null, transitionToMs: closeMs }))));
+};
+exports.Toast = Toast;
+const ToastProvider = ({ children, providerOptions, }) => {
+    const [toasts, setToasts] = (0, react_1.useState)([]);
+    const addToast = (message, options) => setToasts((currentToasts) => [
+        ...currentToasts,
+        { id: (0, common_1.getRandomInt)(10000).toString(), message, options },
+    ]);
+    const close = (id) => setToasts((currentToasts) => currentToasts.filter((toast) => toast.id !== id));
+    const contextValue = (0, react_1.useMemo)(() => ({ addToast }), []);
+    return (react_1.default.createElement(exports.ToastContext.Provider, { value: contextValue },
+        children,
+        (0, react_dom_1.createPortal)(react_1.default.createElement(ToastContainerStyle, null, toasts.map((toast) => (react_1.default.createElement(exports.Toast, { key: toast.id, toast: toast, close: close, providerOptions: providerOptions || {} })))), document.body)));
+};
+exports.ToastProvider = ToastProvider;

package/dist/ui/components/Toast/index.d.ts

@@ -1,10 +1,2 @@
-/// <reference types="react" />
-import { ToastPosition } from 'react-hot-toast';
-export interface IToastOptions {
-    appearance: 'error' | 'success';
-    autoClose?: number;
-}
-export declare const addToast: (m: string, options?: IToastOptions) => void;
-export declare const ToastProvider: ({ position }: {
-    position: ToastPosition;
-}) => JSX.Element;
+export * from './base';
+export * from './types';

package/dist/ui/components/Toast/index.js

@@ -10,37 +10,9 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     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 };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToastProvider = exports.addToast = void 0;
-const react_1 = __importDefault(require("react"));
-const react_hot_toast_1 = __importStar(require("react-hot-toast"));
-const addToast = (m, options) => {
-    if ((options === null || options === void 0 ? void 0 : options.appearance) === 'error') {
-        react_hot_toast_1.default.error(m, {
-            duration: (options === null || options === void 0 ? void 0 : options.autoClose) || 5000,
-        });
-    }
-    else {
-        react_hot_toast_1.default.success(m, {
-            duration: (options === null || options === void 0 ? void 0 : options.autoClose) || 5000,
-        });
-    }
-};
-exports.addToast = addToast;
-const ToastProvider = ({ position }) => (react_1.default.createElement(react_hot_toast_1.Toaster, { position: position }));
-exports.ToastProvider = ToastProvider;
+__exportStar(require("./base"), exports);
+__exportStar(require("./types"), exports);

package/dist/ui/components/Toast/types.d.ts

@@ -0,0 +1,18 @@
+export type TToastAppearance = 'error' | 'warning' | 'success';
+export type TToastOptions = {
+    appearance: TToastAppearance;
+    /** default 5 seconds for success only. null to override */
+    autoClose?: number | null;
+} | undefined;
+export type TAddToast = (m: string, options?: TToastOptions) => void;
+export interface IToastProviderOptions {
+    /** default false */
+    darkMode?: boolean;
+}
+export interface IToast {
+    message: string;
+    options?: TToastOptions;
+}
+export interface IToastInt extends IToast {
+    id: string;
+}

package/dist/ui/components/Toast/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/ui/helpers/index.d.ts

@@ -20,3 +20,4 @@ export * from './useOnScroll';
 export * from './useOverloadPageSearch';
 export * from './useQueryString';
 export * from './useResize';
+export * from './useTimeout';

package/dist/ui/helpers/index.js

@@ -36,3 +36,4 @@ __exportStar(require("./useOnScroll"), exports);
 __exportStar(require("./useOverloadPageSearch"), exports);
 __exportStar(require("./useQueryString"), exports);
 __exportStar(require("./useResize"), exports);
+__exportStar(require("./useTimeout"), exports);

package/dist/ui/helpers/useTimeout.d.ts

@@ -0,0 +1,3 @@
+export declare function useTimeout(callback: () => void | Promise<void>, 
+/** if null wont trigger */
+delay: number | null): void;

package/dist/ui/helpers/useTimeout.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimeout = void 0;
+const react_1 = require("react");
+function useTimeout(callback, 
+/** if null wont trigger */
+delay) {
+    const savedCallback = (0, react_1.useRef)(callback);
+    (0, react_1.useEffect)(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    (0, react_1.useEffect)(() => {
+        let id;
+        function tick() {
+            const ret = savedCallback.current();
+            if (ret instanceof Promise) {
+                void ret.then(() => {
+                    if (delay !== null) {
+                        id = setTimeout(tick, delay);
+                    }
+                });
+            }
+            else {
+                if (delay !== null) {
+                    id = setTimeout(tick, delay);
+                }
+            }
+        }
+        if (delay !== null) {
+            id = setTimeout(tick, delay);
+            return () => id && clearTimeout(id);
+        }
+    }, [delay]);
+}
+exports.useTimeout = useTimeout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-common",
-  "version": "0.0.375",
+  "version": "0.0.376",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Andrei Gec <@andreigec> (https://gec.dev/)",
@@ -8,7 +8,7 @@
   "license": "ISC",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "format": "npx eslint --ext .ts,.tsx ./src --fix",
+    "format": "npx eslint --ext .ts,.tsx ./src --fix && npx eslint --ext .ts,.tsx ./story --fix",
     "build": "rimraf dist && npm run lint && tsc",
     "lint": "npx eslint --ext .ts,.tsx ./src",
     "start": "cross-env BROWSER=none start-storybook -p 6006",
@@ -25,7 +25,6 @@
     "openapi-request-validator": "12.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hot-toast": "2.x",
     "typescript": "4.x",
     "eslint-import-resolver-typescript": "3.x",
     "eslint-plugin-simple-import-sort": ">=8"