ag-common 0.0.201 → 0.0.204

package/dist/common/helpers/math.d.ts

@@ -9,3 +9,13 @@ export declare function sumArray(array: number[]): number;
 export declare const getRandomInt: (max: number) => number;
 export declare function isNumber(val: string): boolean;
 export declare function toFixedDown(num: number, scale: number): number;
+/**
+ * get percentage of value within supplied range
+ * @param param0
+ * @returns
+ */
+export declare function rangePercentage({ value, min, max, }: {
+    value: number;
+    min: number;
+    max: number;
+}): number;

package/dist/common/helpers/math.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toFixedDown = exports.isNumber = exports.getRandomInt = exports.sumArray = exports.clamp = exports.roundToHalf = exports.toFixed = void 0;
+exports.rangePercentage = exports.toFixedDown = exports.isNumber = exports.getRandomInt = exports.sumArray = exports.clamp = exports.roundToHalf = exports.toFixed = void 0;
 const toFixed = (num, fixed) => {
     var _a, _b;
     const re = new RegExp(`^-?\\d+(?:.\\d{0,${fixed || -1}})?`);
@@ -63,3 +63,14 @@ function toFixedDown(num, scale) {
     return +`${Math.round(`${+arr[0]}e${sig}${+arr[1] + scale}`)}e-${scale}`;
 }
 exports.toFixedDown = toFixedDown;
+/**
+ * get percentage of value within supplied range
+ * @param param0
+ * @returns
+ */
+function rangePercentage({ value, min, max, }) {
+    const v = clamp({ value, min, max });
+    const r = (v - min) / (max - min);
+    return r;
+}
+exports.rangePercentage = rangePercentage;

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

@@ -56,7 +56,7 @@ const ConfirmModal = ({ wrapper, res, bottomText, topText, okText = 'OK', cancel
             res(v);
         }
         finally {
-            wrapper.remove();
+            react_dom_1.default.unmountComponentAtNode(wrapper);
         }
     };
     return (react_1.default.createElement(Modal_1.Modal, { position: "center", topPosition: "center", open: true, setOpen: () => ret(false), showCloseButton: false, closeOnClickOutside: false },

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

@@ -7,18 +7,17 @@ exports.HeadersRaw = void 0;
 const react_1 = __importDefault(require("react"));
 const HeadersRaw = ({ title, image, SiteShort, FullSiteUrl, siteDesc, }) => {
     const fullTitle = `${title ? `${title} | ` : ''}${SiteShort} | ${siteDesc}`;
-    const titleBlock = title === undefined
-        ? []
-        : [
-            react_1.default.createElement("title", { key: "1" }, fullTitle),
-            react_1.default.createElement("meta", { key: "2", property: "og:title", content: title }),
-            react_1.default.createElement("meta", { key: "3", name: "twitter:title", content: title }),
-            react_1.default.createElement("meta", { key: "4", itemProp: "name", content: title }),
-            react_1.default.createElement("meta", { key: "5", name: "description", content: fullTitle }),
-            react_1.default.createElement("meta", { key: "6", itemProp: "description", content: fullTitle }),
-            react_1.default.createElement("meta", { key: "7", property: "og:description", content: fullTitle }),
-            react_1.default.createElement("meta", { key: "8", name: "twitter:description", content: fullTitle }),
-        ];
+    const titleFallback = title || fullTitle;
+    const titleBlock = [
+        react_1.default.createElement("title", { key: "1" }, fullTitle),
+        react_1.default.createElement("meta", { key: "2", property: "og:title", content: titleFallback }),
+        react_1.default.createElement("meta", { key: "3", name: "twitter:title", content: titleFallback }),
+        react_1.default.createElement("meta", { key: "4", itemProp: "name", content: titleFallback }),
+        react_1.default.createElement("meta", { key: "5", name: "description", content: fullTitle }),
+        react_1.default.createElement("meta", { key: "6", itemProp: "description", content: fullTitle }),
+        react_1.default.createElement("meta", { key: "7", property: "og:description", content: fullTitle }),
+        react_1.default.createElement("meta", { key: "8", name: "twitter:description", content: fullTitle }),
+    ];
     const imagearr = !image
         ? []
         : [

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

@@ -79,7 +79,11 @@ const CloseStyled = (0, styled_components_1.default)(Close_1.Close) `
 `;
 const Modal = ({ open, setOpen, children, position = 'left', topPosition = 'bottom', showCloseButton = true, closeOnMoveMouseOutside = false, className, closeOnClickOutside = true, }) => {
     const ref = (0, react_1.useRef)(null);
-    (0, useOnClickOutside_1.useOnClickOutside)({ ref, moveMouseOutside: closeOnMoveMouseOutside }, () => {
+    (0, useOnClickOutside_1.useOnClickOutside)({
+        disabled: !open,
+        ref,
+        moveMouseOutside: closeOnMoveMouseOutside,
+    }, () => {
         if (closeOnClickOutside && open) {
             setOpen(false);
         }

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

@@ -81,7 +81,7 @@ const PromptModal = ({ wrapper, res, bottomText, topText, okText = 'OK', cancelT
             res(v);
         }
         finally {
-            wrapper.remove();
+            react_dom_1.default.unmountComponentAtNode(wrapper);
         }
     };
     return (react_1.default.createElement(Modal_1.Modal, { position: "center", topPosition: "center", open: true, setOpen: () => ret(undefined), showCloseButton: false, closeOnClickOutside: false },

package/dist/ui/components/Search/Base.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ISearchDialog, TSearchModalRes } from './types';
+export declare const Base: <T>({ onSelectItem, onSearchTextChange, placeholderText, closeText, renderItem, displayItems, willDisplayItem, getKeyF, }: ISearchDialog<T> & {
+    onSearchTextChange?: ((v: string) => void) | undefined;
+    onSelectItem?: ((v: TSearchModalRes<T>) => void) | undefined;
+}) => JSX.Element;

package/dist/ui/components/{SearchModal/SearchModal.js → Search/Base.js}

@@ -26,32 +26,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchModal = void 0;
-const debounce_1 = require("../../helpers/debounce");
-const media_1 = require("../../styles/media");
-const Modal_1 = require("../Modal");
-const TextEdit_1 = require("../TextEdit/TextEdit");
+exports.Base = void 0;
+const helpers_1 = require("../../helpers");
+const TextEdit_1 = require("../TextEdit");
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_1 = __importStar(require("react"));
-const ModalStyled = (0, styled_components_1.default)(Modal_1.Modal) `
-  display: flex;
-  flex-flow: column;
-  top: 10rem;
-  @media ${media_1.bigScreen} {
-    width: 50vw;
-    max-width: 60rem;
-  }
-  @media ${media_1.smallScreen} {
-    width: 100%;
-    max-width: 95vw;
-  }
-`;
 const SearchBox = styled_components_1.default.div `
   padding: 1rem;
   display: flex;
   flex-flow: row;
   justify-content: center;
   align-items: center;
+  width: calc(100% - 2rem);
+  margin: auto;
 `;
 const MagnifyIconSvg = (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 490 490" },
     react_1.default.createElement("path", { fill: "none", stroke: "#000", strokeWidth: "36", strokeLinecap: "round", d: "M280 278a153 153 0 1 0-2 2l170 170m-91-117 110 110-26 26-110-110" })));
@@ -72,6 +59,8 @@ const CloseButton = styled_components_1.default.div `
   }
 `;
 const Content = styled_components_1.default.div `
+  width: calc(100% - 2rem);
+  margin: auto;
   display: flex;
   flex-flow: column;
   justify-content: flex-start;
@@ -90,37 +79,24 @@ const Row = styled_components_1.default.div `
   justify-content: center;
   align-items: center;
 `;
-const SearchModal = ({ res, wrapper, placeholderText, closeText, renderItem, displayItems, willDisplayItem, getKeyF, }) => {
-    let originalStyle;
-    (0, react_1.useEffect)(() => {
-        if (originalStyle === undefined) {
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-            originalStyle = window.getComputedStyle(document.body).overflow || '';
-            document.body.style.overflow = 'hidden';
-        }
-    }, []);
+const Base = ({ onSelectItem, onSearchTextChange, placeholderText, closeText, renderItem, displayItems, willDisplayItem, getKeyF, }) => {
     const [searchText, setSearchText] = (0, react_1.useState)('');
     const resWrap = (foundItem) => {
-        try {
-            document.body.style.overflow = originalStyle || '';
-            if (!foundItem) {
-                res(undefined);
-            }
-            else {
-                res({ foundItem, searchText });
-            }
+        if (!foundItem) {
+            onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(undefined);
         }
-        finally {
-            wrapper.remove();
+        else {
+            onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem({ foundItem, searchText });
         }
     };
     const filteredItems = displayItems.filter((i) => willDisplayItem(searchText, i));
-    return (react_1.default.createElement(ModalStyled, { position: "center", topPosition: "center", open: true, setOpen: () => resWrap(undefined), showCloseButton: false, closeOnClickOutside: true },
+    return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(SearchBox, null,
-            react_1.default.createElement(TextEdit_1.TextEdit, { placeholder: placeholderText, defaultValue: "", onSubmit: (v) => (0, debounce_1.debounce)(() => {
+            react_1.default.createElement(TextEdit_1.TextEdit, { placeholder: placeholderText, defaultValue: "", onSubmit: (v) => (0, helpers_1.debounce)(() => {
                     setSearchText(v);
-                }, { key: 'pagesearch', time: 200 }), defaultEditing: { focus: true }, singleLine: true, leftContent: react_1.default.createElement(Icon, null, MagnifyIconSvg), noGrow: true, allowUndo: false, onEscape: () => resWrap(undefined) }),
+                    onSearchTextChange === null || onSearchTextChange === void 0 ? void 0 : onSearchTextChange(v);
+                }, { key: 'pagesearch', time: 200 }), defaultEditing: { focus: true }, singleLine: true, leftContent: react_1.default.createElement(Icon, null, MagnifyIconSvg), noGrow: true, allowUndo: false, onEscape: () => resWrap(undefined), onClickOutsideWithNoValue: null }),
             react_1.default.createElement(CloseButton, { onClick: () => resWrap(undefined) }, closeText)),
         react_1.default.createElement(Content, { "data-hasitems": !!filteredItems.length }, filteredItems.map((i) => (react_1.default.createElement(Row, { key: getKeyF(i), onClick: () => resWrap(i) }, renderItem(searchText, i)))))));
 };
-exports.SearchModal = SearchModal;
+exports.Base = Base;

package/dist/ui/components/Search/SearchBox.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ISearchDialog, TSearchModalRes } from './types';
+export declare const SearchBox: <T>(p: ISearchDialog<T> & {
+    onSelectItem?: ((v: TSearchModalRes<T>) => void) | undefined;
+    onSearchTextChange?: ((v: string) => void) | undefined;
+}) => JSX.Element;

package/dist/ui/components/Search/SearchBox.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBox = void 0;
+const Base_1 = require("./Base");
+const react_1 = __importDefault(require("react"));
+const SearchBox = (p) => react_1.default.createElement(Base_1.Base, Object.assign({}, p));
+exports.SearchBox = SearchBox;

package/dist/ui/components/Search/SearchModal.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ISearchDialog, TSearchModalRes } from './types';
+export declare const SearchModal: <T>(p: ISearchDialog<T> & {
+    onSelectItem: (v: TSearchModalRes<T>) => void;
+}) => JSX.Element;

package/dist/ui/components/Search/SearchModal.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchModal = void 0;
+const Base_1 = require("./Base");
+const styles_1 = require("../../styles");
+const Modal_1 = require("../Modal");
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importDefault(require("react"));
+const ModalStyled = (0, styled_components_1.default)(Modal_1.Modal) `
+  display: flex;
+  flex-flow: column;
+  top: 10rem;
+  @media ${styles_1.bigScreen} {
+    width: 50vw;
+    max-width: 60rem;
+  }
+  @media ${styles_1.smallScreen} {
+    width: 100%;
+    max-width: 95vw;
+  }
+`;
+const SearchModal = (p) => (react_1.default.createElement(ModalStyled, { position: "center", topPosition: "center", open: true, setOpen: () => p.onSelectItem(undefined), showCloseButton: false, closeOnClickOutside: true },
+    react_1.default.createElement(Base_1.Base, Object.assign({}, p))));
+exports.SearchModal = SearchModal;

package/dist/ui/components/{SearchModal → Search}/index.d.ts

@@ -1,3 +1,4 @@
 export * from './types';
 export * from './SearchModal';
 export * from './searchDialog';
+export * from './SearchBox';

package/dist/ui/components/{SearchModal → Search}/index.js

@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./types"), exports);
 __exportStar(require("./SearchModal"), exports);
 __exportStar(require("./searchDialog"), exports);
+__exportStar(require("./SearchBox"), exports);

package/dist/ui/components/{SearchModal → Search}/searchDialog.js

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.searchDialog = void 0;
 const SearchModal_1 = require("./SearchModal");
+const common_1 = require("../../../common");
 const react_1 = __importDefault(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 /**
@@ -24,9 +25,30 @@ const react_dom_1 = __importDefault(require("react-dom"));
 const searchDialog = (p) => __awaiter(void 0, void 0, void 0, function* () {
     const placeholderText = p.placeholderText || '';
     const closeText = p.closeText || 'CLOSE';
+    let originalStyle;
     return new Promise((res) => {
+        if (document.querySelectorAll('#ag-search-dialog').length !== 0) {
+            (0, common_1.error)('searchDialog already open');
+            res(undefined);
+            return;
+        }
         const wrapper = document.body.appendChild(document.createElement('div'));
-        react_dom_1.default.render(react_1.default.createElement(SearchModal_1.SearchModal, Object.assign({}, p, { placeholderText: placeholderText, closeText: closeText, res: (r) => res(r), wrapper: wrapper })), wrapper);
+        wrapper.id = 'ag-search-dialog';
+        if (originalStyle === undefined) {
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            originalStyle = window.getComputedStyle(document.body).overflow || '';
+            document.body.style.overflow = 'hidden';
+        }
+        const onSelectItem = (f) => {
+            try {
+                document.body.style.overflow = originalStyle || '';
+                res(f);
+            }
+            finally {
+                react_dom_1.default.unmountComponentAtNode(wrapper);
+            }
+        };
+        react_dom_1.default.render(react_1.default.createElement(SearchModal_1.SearchModal, Object.assign({}, p, { placeholderText: placeholderText, closeText: closeText, onSelectItem: onSelectItem })), wrapper);
     });
 });
 exports.searchDialog = searchDialog;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare type TSparkLineData = {
+    x: number;
+    y: number;
+};
+export declare const SparkLine: ({ data: raw, className, pointTitleF, pointColour, }: {
+    /**
+     * default #4d76ff
+     */
+    pointColour?: string | undefined;
+    className?: string | undefined;
+    data: TSparkLineData[];
+    pointTitleF?: ((p: TSparkLineData) => string) | undefined;
+}) => JSX.Element;

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

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SparkLine = void 0;
+const math_1 = require("../../../common/helpers/math");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Base = styled_components_1.default.div `
+  width: calc(100% - 2px - 1rem);
+  height: 100%;
+  border: solid 1px #666;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+`;
+const Points = styled_components_1.default.div `
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+`;
+const Point = styled_components_1.default.div `
+  position: absolute;
+  border-width: 2px;
+  border-style: solid;
+  width: 1px;
+`;
+const SparkLine = ({ data: raw, className, pointTitleF, pointColour = '#4d76ff', }) => {
+    const xMin = Math.min(...raw.map((d) => d.x));
+    const xMax = Math.max(...raw.map((d) => d.x));
+    const yMin = Math.min(...raw.map((d) => d.y));
+    const yMax = Math.max(...raw.map((d) => d.y));
+    const data = raw.map((orig) => ({
+        x: (0, math_1.rangePercentage)({
+            value: orig.x,
+            min: xMin,
+            max: xMax,
+        }) * 100,
+        y: (0, math_1.rangePercentage)({
+            value: orig.y,
+            min: yMin,
+            max: yMax,
+        }) * 100,
+        orig,
+    }));
+    return (react_1.default.createElement(Base, { className: className },
+        react_1.default.createElement(Points, null, data.map((p) => {
+            var _a;
+            return (react_1.default.createElement(Point, { title: (_a = pointTitleF === null || pointTitleF === void 0 ? void 0 : pointTitleF(p.orig)) !== null && _a !== void 0 ? _a : '', key: p.x + ' ' + p.y, style: {
+                    backgroundColor: pointColour,
+                    borderColor: pointColour,
+                    left: p.x + '%',
+                    bottom: 0,
+                    height: p.y + '%',
+                } }));
+        }))));
+};
+exports.SparkLine = SparkLine;

package/dist/ui/components/TextEdit/TextEdit.d.ts

@@ -23,8 +23,14 @@ export declare const TextEdit: ({ defaultValue, defaultEditing, disableEdit, pla
      */
     disableEdit?: boolean | undefined;
     placeholder?: string | undefined;
+    /**
+     * when the user edits or unselects edit
+     */
     onEditingChange?: ((editing: boolean) => void) | undefined;
-    onClickOutsideWithNoValue?: (() => void) | undefined;
+    /**
+     * if null will disable click outside
+     */
+    onClickOutsideWithNoValue?: (() => void) | null | undefined;
     onClickNotEditing?: (() => void) | undefined;
     /**
      * if true, will not grow. default false

package/dist/ui/components/TextEdit/TextEdit.js

@@ -79,7 +79,11 @@ const TextEdit = ({ defaultValue = '', defaultEditing, disableEdit = false, plac
     const [value, setValue] = (0, react_1.useState)(defaultValue);
     const [editing, setEditingRaw] = (0, react_1.useState)(!!defaultEditing);
     const valueChange = value !== defaultValue;
-    (0, useOnClickOutside_1.useOnClickOutside)({ ref, moveMouseOutside: false }, () => {
+    (0, useOnClickOutside_1.useOnClickOutside)({
+        disabled: onClickOutsideWithNoValue === null,
+        ref,
+        moveMouseOutside: false,
+    }, () => {
         if (valueChange) {
             onSubmit(value, false);
         }

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

@@ -15,8 +15,9 @@ export * from './LogoutButton';
 export * from './Modal';
 export * from './Prompt';
 export * from './RowOrColumn';
-export * from './SearchModal';
+export * from './Search';
 export * from './Sidebar';
+export * from './Sparkline';
 export * from './Table';
 export * from './TextEdit';
 export * from './Toast';

package/dist/ui/components/index.js

@@ -31,8 +31,9 @@ __exportStar(require("./LogoutButton"), exports);
 __exportStar(require("./Modal"), exports);
 __exportStar(require("./Prompt"), exports);
 __exportStar(require("./RowOrColumn"), exports);
-__exportStar(require("./SearchModal"), exports);
+__exportStar(require("./Search"), exports);
 __exportStar(require("./Sidebar"), exports);
+__exportStar(require("./Sparkline"), exports);
 __exportStar(require("./Table"), exports);
 __exportStar(require("./TextEdit"), exports);
 __exportStar(require("./Toast"), exports);

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

@@ -1,6 +1,10 @@
 import { RefObject } from 'react';
 declare type Event = MouseEvent | TouchEvent;
-export declare function useOnClickOutside<T extends HTMLElement = HTMLElement>({ ref, moveMouseOutside }: {
+export declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(p: {
+    /**
+     * default false
+     */
+    disabled?: boolean;
     ref: RefObject<T>;
     moveMouseOutside?: boolean;
 }, handler: (event: Event) => void): void;

package/dist/ui/helpers/useOnClickOutside.js

@@ -2,10 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOnClickOutside = void 0;
 const react_1 = require("react");
-function useOnClickOutside({ ref, moveMouseOutside }, handler) {
+function useOnClickOutside(p, handler) {
     (0, react_1.useEffect)(() => {
+        if (p.disabled || typeof window === 'undefined') {
+            return () => { };
+        }
         const listener = (event) => {
-            const el = ref === null || ref === void 0 ? void 0 : ref.current;
+            var _a;
+            const el = (_a = p.ref) === null || _a === void 0 ? void 0 : _a.current;
             // Do nothing if clicking ref's element or descendent elements
             if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
                 return;
@@ -14,7 +18,7 @@ function useOnClickOutside({ ref, moveMouseOutside }, handler) {
         };
         document.addEventListener(`mousedown`, listener);
         document.addEventListener(`touchstart`, listener);
-        if (moveMouseOutside) {
+        if (p.moveMouseOutside) {
             document.addEventListener(`mousemove`, listener);
         }
         return () => {
@@ -23,6 +27,6 @@ function useOnClickOutside({ ref, moveMouseOutside }, handler) {
             document.removeEventListener(`mousemove`, listener);
         };
         // Reload only if ref or handler changes
-    }, [ref, handler, moveMouseOutside]);
+    }, [p, handler]);
 }
 exports.useOnClickOutside = useOnClickOutside;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-common",
-  "version": "0.0.201",
+  "version": "0.0.204",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Andrei Gec <@andreigec> (https://gec.dev/)",

package/dist/ui/components/SearchModal/SearchModal.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { ISearchDialog, TSearchModalRes } from './types';
-export declare const SearchModal: <T>({ res, wrapper, placeholderText, closeText, renderItem, displayItems, willDisplayItem, getKeyF, }: ISearchDialog<T> & {
-    res: (v: TSearchModalRes<T>) => void;
-    wrapper: HTMLDivElement;
-}) => JSX.Element;