ag-common 0.0.117 → 0.0.121

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Chevron: ({ down, width, className, colour, onToggle, }: {
     colour?: string | undefined;
     className?: string | undefined;

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

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-export declare function DropdownList<T>({ options, value, onChange, placeholder, className, renderF, children, }: {
+export declare function DropdownList<T>({ options, value, onChange, placeholder, className, renderF, children, shadow, }: {
     options: T[];
     value?: T;
     onChange: (v: T, index: number) => void;
@@ -7,4 +6,8 @@ export declare function DropdownList<T>({ options, value, onChange, placeholder,
     className?: string;
     renderF: (v: T) => string;
     children?: JSX.Element;
+    /**
+     * colour of dropdown shadow. default #555
+     */
+    shadow?: string;
 }): JSX.Element;

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

@@ -25,6 +25,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const Icon_1 = require("../Icon");
 const dom_1 = require("../../helpers/dom");
+const common_1 = require("../../styles/common");
 const SBase = styled_components_1.default.div `
   display: flex;
   flex-flow: row;
@@ -48,6 +49,7 @@ const SItems = styled_components_1.default.div `
     (0, styled_components_1.css) `
       display: flex;
     `}
+  ${({ shadow }) => shadow && (0, common_1.Shadow)(shadow)}
 `;
 const Dots = (react_1.default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fillRule: "evenodd", clipRule: "evenodd" },
     react_1.default.createElement("path", { d: "M16 12a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z" })));
@@ -80,7 +82,7 @@ const SItem = styled_components_1.default.div `
     background-color: rgba(0, 0, 0, 0.2);
   }
 `;
-function DropdownList({ options, value, onChange, placeholder, className, renderF, children, }) {
+function DropdownList({ options, value, onChange, placeholder, className, renderF, children, shadow = '#555', }) {
     var _a, _b;
     const ref = (0, react_1.useRef)(null);
     const [state, setState] = (0, react_1.useState)(value);
@@ -122,7 +124,7 @@ function DropdownList({ options, value, onChange, placeholder, className, render
             e.preventDefault();
             setOpen(!open);
         } },
-        react_1.default.createElement(SItems, { open: open, style: style }, open &&
+        react_1.default.createElement(SItems, { open: open, style: style, shadow: shadow }, open &&
             options.map((s, i) => (react_1.default.createElement(SItem, { key: renderF(s), selected: s === state, onClick: (e) => {
                     if (s !== state) {
                         onChange(s, i);

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const HeadersRaw: ({ title, image, SiteShort, FullSiteUrl, siteDesc, }: {
     title?: string | undefined;
     image?: string | undefined;

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

@@ -65,7 +65,7 @@ exports.IconF = styled_components_1.default.span `
         stop-color: ${fill} !important;
       }
     `};
-  ${({ outline }) => outline && (0, common_1.DropShadow)(outline)};
+  ${({ outline }) => outline && (0, common_1.HardOutline)(outline)};
 
   width: ${({ width }) => width || '100%'};
   height: ${({ height }) => height || '100%'};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Loader: ({ name }: {
     name: string;
 }) => JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const LoginButton: ({ className, text, invert, savePath, loginPath, }: {
     invert?: boolean | undefined;
     text: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const LogoutButton: ({ className, invert, logout, }: {
     invert?: boolean | undefined;
     className?: string | undefined;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface TableItem {
     content: JSX.Element;
     groupTitle: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const CheckboxEdit: ({ defaultValue, onSubmit, noGrow, }: {
     defaultValue: boolean;
     onSubmit: (val: boolean) => void;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ColourEdit: ({ defaultValue, onSubmit, }: {
     defaultValue: string;
     onSubmit: (val: string) => void;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ListboxEdit: ({ defaultValue, onSubmit, values, }: {
     defaultValue: string;
     onSubmit: (val: string[]) => void;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyledComponent } from 'styled-components';
 export declare const ValueReadonly: StyledComponent<"div", any, {}, never>;
 export declare const TextEdit: ({ defaultValue, defaultEditing, onSubmit, disableEdit, placeholder, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, className, singleLine, }: {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const UndoIcon: () => JSX.Element;
 export declare const PencilIcon: () => JSX.Element;
 export declare const SaveIcon: () => JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ToastPosition } from 'react-hot-toast';
 interface Options {
     appearance: 'error' | 'success';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AxiosWrapper, User } from '../../helpers/jwt';
 export declare const UserImageIcon: JSX.Element;
 export declare const UserImage: ({ image, className, }: {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TLang, TResource } from '../../common/helpers/i18n';
 export declare const useTranslation: <T extends {
     [a: string]: TResource;

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

@@ -11,5 +11,9 @@ export declare const useCallOpenApi: <T, TDefaultApi>(p: ICallOpenApi<T, TDefaul
      * will shortcut and return the appropriate axioswrapper data if cachekey is found
      */
     ssrCacheItems?: CacheItems | undefined;
+    /**
+     * default ttl in seconds for cache - default 120s
+     */
+    cacheTtl?: number | undefined;
 }) => AxiosWrapperWrap<T>;
 export {};

package/dist/ui/helpers/useCallOpenApi.js

@@ -8,13 +8,24 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCallOpenApi = void 0;
 const react_1 = require("react");
 const callOpenApi_1 = require("./callOpenApi");
+const node_cache_1 = __importDefault(require("node-cache"));
+let useCallOpenApiCache;
 const useCallOpenApi = (p) => {
-    var _a, _b;
+    var _a;
+    if (!useCallOpenApiCache) {
+        useCallOpenApiCache = new node_cache_1.default({ stdTTL: p.cacheTtl || 120 });
+    }
     const ssrCached = (_a = p.ssrCacheItems) === null || _a === void 0 ? void 0 : _a.find((s) => s.cacheKey === p.cacheKey);
+    if (!useCallOpenApiCache.get(p.cacheKey) && ssrCached) {
+        useCallOpenApiCache.set(p.cacheKey, ssrCached);
+    }
     const defv = {
         data: undefined,
         url: '',
@@ -24,12 +35,16 @@ const useCallOpenApi = (p) => {
         loaded: false,
         reFetch: () => __awaiter(void 0, void 0, void 0, function* () { }),
     };
-    const [data, setData] = (0, react_1.useState)(Object.assign(Object.assign({}, defv), { data: ssrCached ? (_b = ssrCached.prefillData) === null || _b === void 0 ? void 0 : _b.data : undefined, loaded: !!ssrCached }));
+    const cached = useCallOpenApiCache.get(p.cacheKey);
+    const [data, setData] = (0, react_1.useState)(Object.assign(Object.assign({}, defv), { data: cached, loaded: !!cached }));
     (0, react_1.useEffect)(() => {
         function run() {
             return __awaiter(this, void 0, void 0, function* () {
-                const res = yield (0, callOpenApi_1.callOpenApi)(p);
-                setData((d) => (Object.assign(Object.assign({}, res), { loaded: true, loading: false, loadcount: d.loadcount + 1 })));
+                const resp = yield (0, callOpenApi_1.callOpenApi)(p);
+                if (useCallOpenApiCache) {
+                    useCallOpenApiCache.set(p.cacheKey, resp.data);
+                }
+                setData((d) => (Object.assign(Object.assign({}, resp), { loaded: true, loading: false, loadcount: d.loadcount + 1 })));
             });
         }
         const { error, loaded, loading, loadcount } = data;
@@ -39,7 +54,7 @@ const useCallOpenApi = (p) => {
         }
         setData((d) => (Object.assign(Object.assign({}, d), { loading: true })));
         void run();
-    }, [data, p, setData]);
+    }, [cached, data, p, setData]);
     return Object.assign(Object.assign({}, data), { reFetch: () => __awaiter(void 0, void 0, void 0, function* () {
             setData(defv);
         }) });

package/dist/ui/helpers/useQueryString.js

@@ -33,6 +33,14 @@ const useQueryStringRaw = ({ name, searchOverride, defaultValue, stringify, pars
         window.history.replaceState({}, '', loc);
         setStateRaw(v);
     };
+    (0, react_1.useEffect)(() => {
+        const parsed = new URLSearchParams(raw);
+        const g = parsed.get(name);
+        const newv = g ? parse(g) : defaultValue;
+        if (state !== newv) {
+            setStateRaw(newv);
+        }
+    }, [defaultValue, name, parse, raw, state]);
     return [state, setState];
 };
 exports.useQueryStringRaw = useQueryStringRaw;

package/dist/ui/styles/common.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export declare const DropShadow: (outline: string) => import("styled-components").FlattenSimpleInterpolation;
+export declare const HardOutline: (colour: string) => import("styled-components").FlattenSimpleInterpolation;
+export declare const Shadow: (colour: string) => import("styled-components").FlattenSimpleInterpolation;
 export declare const NoTextSelect: import("styled-components").FlattenSimpleInterpolation;
 export declare const CssTransparentBlock: import("styled-components").FlattenSimpleInterpolation;
 export declare const FadeBottom: ({ height }: {

package/dist/ui/styles/common.js

@@ -19,15 +19,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FullScreenPage = exports.noDrag = exports.Card = exports.FadeBottom = exports.CssTransparentBlock = exports.NoTextSelect = exports.DropShadow = void 0;
+exports.FullScreenPage = exports.noDrag = exports.Card = exports.FadeBottom = exports.CssTransparentBlock = exports.NoTextSelect = exports.Shadow = exports.HardOutline = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
 const colours_1 = require("./colours");
-const DropShadow = (outline) => (0, styled_components_1.css) `
-  filter: drop-shadow(1px 1px 0px ${outline})
-    drop-shadow(-1px 1px 0px ${outline}) drop-shadow(1px -1px 0px ${outline})
-    drop-shadow(-1px -1px 0px ${outline});
+const HardOutline = (colour) => (0, styled_components_1.css) `
+  filter: drop-shadow(1px 1px 0px ${colour}) drop-shadow(-1px 1px 0px ${colour})
+    drop-shadow(1px -1px 0px ${colour}) drop-shadow(-1px -1px 0px ${colour});
 `;
-exports.DropShadow = DropShadow;
+exports.HardOutline = HardOutline;
+const Shadow = (colour) => (0, styled_components_1.css) `
+  filter: drop-shadow(1px 1px 0.5rem ${colour});
+`;
+exports.Shadow = Shadow;
 exports.NoTextSelect = (0, styled_components_1.css) `
   user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-common",
-  "version": "0.0.117",
+  "version": "0.0.121",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Andrei Gec <@andreigec> (https://gec.dev/)",
@@ -13,28 +13,29 @@
     "start": "tsc --watch"
   },
   "dependencies": {
-    "aws-sdk": "2.1066.0",
+    "aws-cdk-lib": "2.x",
+    "aws-sdk": "2.1069.0",
     "axios": "0.25.0",
+    "constructs": "10.x",
     "jsonwebtoken": "8.5.1",
     "jwks-rsa": "2.0.5",
+    "node-cache": "5.1.2",
     "openapi-request-validator": "10.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-hot-toast": "2.2.0",
     "styled-components": "5.3.3",
-    "typescript": "4.5.5",
-    "aws-cdk-lib": "2.x",
-    "constructs": "10.x"
+    "typescript": "4.5.5"
   },
   "devDependencies": {
     "@types/jsonwebtoken": "8.5.8",
-    "@types/node": "17.0.13",
-    "@types/react": "17.0.38",
+    "@types/node": "17.0.15",
+    "@types/react": "17.0.39",
     "@types/react-dom": "17.0.11",
-    "@types/styled-components": "5.1.21",
-    "@typescript-eslint/eslint-plugin": "5.10.1",
-    "@typescript-eslint/parser": "5.10.1",
-    "eslint": "8.7.0",
+    "@types/styled-components": "5.1.22",
+    "@typescript-eslint/eslint-plugin": "5.10.2",
+    "@typescript-eslint/parser": "5.10.2",
+    "eslint": "8.8.0",
     "eslint-config-airbnb-typescript": "16.1.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-config-react-app": "7.0.0",