ag-common 0.0.17 → 0.0.18

package/dist/api/helpers/api.d.ts

@@ -1,5 +1,4 @@
-import { APIGatewayProxyResult } from 'aws-lambda';
-import { DYNAMOKEYS } from '../types';
+import { APIGatewayProxyResult, DYNAMOKEYS } from '../types';
 export declare const returnCode: <T>(statusCode: number, body?: T | undefined, extraHeaders?: {
     [a: string]: string;
 } | undefined, fullSiteUrl?: string | undefined) => APIGatewayProxyResult;

package/dist/api/helpers/api.js

@@ -12,6 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateDynamoPKS = exports.stripPKs = exports.returnCode = void 0;
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// eslint-disable-next-line
 const array_1 = require("../../common/helpers/array");
 const returnCode = (statusCode, body, extraHeaders, fullSiteUrl) => {
     let headers = {

package/dist/api/helpers/validateOpenApi.d.ts

@@ -1,6 +1,6 @@
-import { APIGatewayEvent, APIGatewayProxyResult } from 'aws-lambda';
 import { User } from '../../ui/helpers/jwt';
 import { TLang } from '../../common/helpers/i18n';
+import { APIGatewayEvent, APIGatewayProxyResult } from '../types';
 export declare type NextType<T> = ({ event, body, params, userProfile, lang, }: {
     params: Record<string, string>;
     event: APIGatewayEvent;

package/dist/api/helpers/validateOpenApi.js

@@ -13,6 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateOpenApi = void 0;
+// eslint-disable-next-line import/no-unresolved
 const openapi_request_validator_1 = __importDefault(require("openapi-request-validator"));
 const validations_1 = require("./validations");
 const log_1 = require("../../common/helpers/log");

package/dist/api/helpers/validations.d.ts

@@ -1,6 +1,6 @@
-import { APIGatewayProxyResult } from 'aws-lambda';
 import { error } from '../../common/helpers/log';
 import { User } from '../../ui/helpers/jwt';
+import { APIGatewayProxyResult } from '../types';
 export declare const getAndValidateToken: ({ tokenRaw, COGNITO_USER_POOL_ID, }: {
     tokenRaw?: string | undefined;
     COGNITO_USER_POOL_ID: string;

package/dist/api/helpers/validations.js

@@ -13,6 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAndValidateToken = void 0;
+/* eslint-disable import/no-unresolved */
 const jwks_rsa_1 = __importDefault(require("jwks-rsa"));
 const jsonwebtoken_1 = require("jsonwebtoken");
 const log_1 = require("../../common/helpers/log");

package/dist/api/types.d.ts

@@ -43,3 +43,29 @@ export interface IQueryDynamo {
     filterValue?: string | number;
     filterOperator?: string;
 }
+export interface APIGatewayProxyResult {
+    statusCode: number;
+    headers?: {
+        [header: string]: boolean | number | string;
+    } | undefined;
+    multiValueHeaders?: {
+        [header: string]: Array<boolean | number | string>;
+    } | undefined;
+    body: string;
+    isBase64Encoded?: boolean | undefined;
+}
+export interface APIGatewayEvent {
+    body: string | null;
+    headers: Record<string, string | undefined>;
+    httpMethod: string;
+    queryStringParameters: Record<string, string> | null;
+    pathParameters: Record<string, string> | null;
+    resource: string;
+    path: string;
+    requestContext: {
+        identity: {
+            sourceIp: string;
+        };
+        httpMethod: string;
+    };
+}

package/dist/common/helpers/log.js

@@ -38,8 +38,8 @@ function nicify(...args) {
 }
 function logprocess(type, date, args) {
     var _a;
-    const ds = date ? `[${date}]` : '';
-    const retm = [ds, type, ...args].filter(_1.notEmpty).join('\t');
+    const msg = `[${date}] ${type} `;
+    const argsClean = args.filter(_1.notEmpty);
     const min = (0, exports.GetLogLevel)((_a = process.env.LOG_LEVEL) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || 'WARN';
     const typesLogLevel = (0, exports.GetLogLevel)(type);
     // env ignores it
@@ -48,31 +48,31 @@ function logprocess(type, date, args) {
     }
     switch (type) {
         case 'TRACE': {
-            console.trace(retm);
+            console.trace(msg, ...argsClean);
             break;
         }
         case 'DEBUG': {
-            console.debug(retm);
+            console.debug(msg, ...argsClean);
             break;
         }
         case 'INFO': {
-            console.log(retm);
+            console.log(msg, ...argsClean);
             break;
         }
         case 'WARN': {
-            console.warn(retm);
+            console.warn(msg, ...argsClean);
             break;
         }
         case 'ERROR': {
-            console.error(retm);
+            console.error(msg, ...argsClean);
             break;
         }
         case 'FATAL': {
-            console.error(retm);
+            console.error(msg, ...argsClean);
             break;
         }
         default: {
-            console.log(retm);
+            console.log(msg, ...argsClean);
             break;
         }
     }

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

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-export declare function DropdownList<T>({ options, value, onChange, placeholder, className, renderF, }: {
+export declare function DropdownList<T>({ options, value, onChange, placeholder, className, renderF, children, }: {
     options: T[];
-    value: T;
+    value?: T;
     onChange: (v: T, index: number) => void;
     placeholder?: string;
     className?: string;
     renderF: (v: T) => string;
+    children?: JSX.Element;
 }): JSX.Element;

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

@@ -23,18 +23,15 @@ exports.DropdownList = void 0;
 const colours_1 = require("../../styles/colours");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
+const Icon_1 = require("../Icon");
 const SBase = styled_components_1.default.div `
   display: flex;
   flex-flow: row;
   position: relative;
-  min-width: 5rem;
   align-items: center;
   justify-content: space-between;
-  cursor: default;
-  background-color: ${colours_1.colours.darker};
-  color: ${colours_1.colours.dark};
   cursor: pointer;
-  flex-grow: 1;
+  flex-grow: 0;
 `;
 const SItems = styled_components_1.default.div `
   flex-flow: column;
@@ -42,21 +39,20 @@ const SItems = styled_components_1.default.div `
   top: 100%;
   display: none;
   position: absolute;
-  background-color: ${colours_1.colours.mainLight};
+  background-color: white;
   cursor: default;
   width: 100%;
+  right: 0;
+  max-width: 95vw;
   ${({ open }) => open &&
     (0, styled_components_1.css) `
       display: flex;
     `}
 `;
-const SSelectedItem = styled_components_1.default.div `
-  font-weight: 500;
-  padding: 0.5rem;
-`;
+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" })));
 const SItem = styled_components_1.default.div `
   z-index: 1;
-  word-break: break-all;
   font-weight: 500;
   padding-left: 0.5rem;
   flex-grow: 1;
@@ -84,17 +80,7 @@ const SItem = styled_components_1.default.div `
     background-color: rgba(0, 0, 0, 0.2);
   }
 `;
-function Items({ options, state, onChange, renderF, }) {
-    return (react_1.default.createElement(react_1.default.Fragment, null, options.map((s, i) => (react_1.default.createElement(SItem, { key: renderF(s), selected: s === state, onClick: () => {
-            if (s !== state) {
-                onChange(s, i);
-            }
-        } }, renderF(s))))));
-}
-const ChevronStyled = styled_components_1.default.div `
-  margin-right: 0.5rem;
-`;
-function DropdownList({ options, value, onChange, placeholder, className, renderF, }) {
+function DropdownList({ options, value, onChange, placeholder, className, renderF, children, }) {
     const ref = (0, react_1.useRef)(null);
     const [state, setState] = (0, react_1.useState)(value);
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -111,14 +97,26 @@ function DropdownList({ options, value, onChange, placeholder, className, render
         return () => document.removeEventListener('click', click, true);
     }, []);
     (0, react_1.useEffect)(() => {
-        setState(value);
-    }, [value]);
+        const newv = value;
+        if (JSON.stringify(newv) !== JSON.stringify(value))
+            setState(newv);
+    }, [options, value]);
+    const maxLen = Math.max(...options.map((s) => renderF(s).length));
     return (react_1.default.createElement(SBase, { className: className, ref: ref, title: placeholder, onClick: (e) => {
             e.stopPropagation();
+            e.preventDefault();
             setOpen(!open);
         } },
-        react_1.default.createElement(SSelectedItem, null, renderF(state)),
-        react_1.default.createElement(ChevronStyled, null, open ? '˄' : '˅'),
-        react_1.default.createElement(SItems, { open: open }, open && (react_1.default.createElement(Items, { renderF: renderF, state: state, options: options, onChange: onChange })))));
+        react_1.default.createElement(SItems, { open: open, style: { width: `calc(${maxLen}ch + 2rem)` } }, open &&
+            options.map((s, i) => (react_1.default.createElement(SItem, { key: renderF(s), selected: s === state, onClick: () => {
+                    if (s !== state) {
+                        onChange(s, i);
+                    }
+                } }, renderF(s))))),
+        children || (react_1.default.createElement(Icon_1.Icon, { width: "2rem", height: "2rem", onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                setOpen(!open);
+            } }, Dots))));
 }
 exports.DropdownList = DropdownList;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TLang } from '../../..';
+export declare const LogoutButton: ({ className, invert, lang, logout, }: {
+    lang: TLang;
+    invert?: boolean | undefined;
+    className?: string | undefined;
+    logout: () => void;
+}) => JSX.Element;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogoutButton = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const colours_1 = require("../../styles/colours");
+const Button_1 = require("../Button");
+const Door = (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20" },
+    react_1.default.createElement("path", { d: "M3 3h8V1H3a2 2 0 00-2 2v14a2 2 0 002 2h8v-2H3z" }),
+    react_1.default.createElement("path", { d: "M19 10l-6-5v4H5v2h8v4l6-5z" })));
+const Icon = styled_components_1.default.div `
+  width: 1.5rem;
+  height: 1.5rem;
+`;
+const ButtonStyled = (0, styled_components_1.default)(Button_1.Button) `
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background-color: transparent;
+  svg {
+    fill: ${colours_1.colours.notificationBlue};
+  }
+`;
+const LogoutButton = ({ className, invert, lang, logout, }) => {
+    return (react_1.default.createElement(ButtonStyled, { invert: invert, className: className, onKeyPress: () => logout(), onClick: () => logout(), lang: lang },
+        react_1.default.createElement(Icon, null, Door)));
+};
+exports.LogoutButton = LogoutButton;

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

@@ -51,9 +51,9 @@ const CheckboxEdit = ({ defaultValue, onSubmit, }) => {
     return (react_1.default.createElement(common_1.ValueBox, Object.assign({}, common_2.noDrag, { ref: ref }),
         react_1.default.createElement(common_1.ValueInputCB, { type: "checkbox", "data-type": "checkbox", checked: value, onChange: () => setValue(!value), onKeyPress: (e) => e.key === 'Enter' && value !== defaultValue && onSubmit(value) }),
         react_1.default.createElement(Icons, { center: true },
-            value !== defaultValue && (react_1.default.createElement(common_1.Icon, { style: { right: '2rem' }, onClick: () => value !== defaultValue && onSubmit(value) },
+            value !== defaultValue && (react_1.default.createElement(common_1.IconD, { style: common_1.iconLeft, onClick: () => value !== defaultValue && onSubmit(value) },
                 react_1.default.createElement(images_1.SaveIcon, null))),
-            value !== defaultValue && (react_1.default.createElement(common_1.Icon, { style: { right: '0.5rem' }, onClick: () => setValue(defaultValue) },
+            value !== defaultValue && (react_1.default.createElement(common_1.IconD, { style: common_1.iconRight, onClick: () => setValue(defaultValue) },
                 react_1.default.createElement(images_1.UndoIcon, null))))));
 };
 exports.CheckboxEdit = CheckboxEdit;

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

@@ -40,9 +40,9 @@ const ColourEdit = ({ defaultValue, onSubmit, }) => {
     });
     return (react_1.default.createElement(common_1.ValueBox, Object.assign({}, common_2.noDrag, { ref: ref }),
         react_1.default.createElement("input", { type: "color", size: 5, value: value, onChange: (v) => setValue(v.target.value) }),
-        value !== defaultValue && (react_1.default.createElement(common_1.Icon, { style: { right: '2rem' }, onClick: () => valueChange && onSubmit(value.trim()) },
+        value !== defaultValue && (react_1.default.createElement(common_1.IconD, { style: common_1.iconLeft, onClick: () => valueChange && onSubmit(value.trim()) },
             react_1.default.createElement(images_1.SaveIcon, null))),
-        valueChange && (react_1.default.createElement(common_1.Icon, { style: { right: '0.5rem' }, onClick: () => setValue(defaultValue) },
+        valueChange && (react_1.default.createElement(common_1.IconD, { style: common_1.iconRight, onClick: () => setValue(defaultValue) },
             react_1.default.createElement(images_1.UndoIcon, null)))));
 };
 exports.ColourEdit = ColourEdit;

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

@@ -32,10 +32,10 @@ const ListboxEdit = ({ defaultValue, onSubmit, values, }) => {
     }, [defaultValue]);
     return (react_1.default.createElement(common_1.ValueBox, Object.assign({}, common_2.noDrag),
         react_1.default.createElement("select", { size: 5, value: value, onChange: (v) => setValue(v.target.value) }, values.map((v) => (react_1.default.createElement("option", { key: v, value: v }, v)))),
-        value !== defaultValue && (react_1.default.createElement(common_1.Icon, { style: { right: '2rem' }, onClick: () => value !== defaultValue &&
+        value !== defaultValue && (react_1.default.createElement(common_1.IconD, { style: common_1.iconLeft, onClick: () => value !== defaultValue &&
                 onSubmit(value.split(',').map((s) => s.trim())) },
             react_1.default.createElement(images_1.SaveIcon, null))),
-        value !== defaultValue && (react_1.default.createElement(common_1.Icon, { style: { right: '0.5rem' }, onClick: () => setValue(defaultValue) },
+        value !== defaultValue && (react_1.default.createElement(common_1.IconD, { style: common_1.iconRight, onClick: () => setValue(defaultValue) },
             react_1.default.createElement(images_1.UndoIcon, null)))));
 };
 exports.ListboxEdit = ListboxEdit;

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

@@ -34,6 +34,9 @@ const ValueTextArea = styled_components_1.default.textarea `
   ${common_1.valueCss};
   resize: none;
   overflow: hidden;
+  &[data-editing='true'] {
+    min-height: 5rem;
+  }
 `;
 const TextEdit = ({ defaultValue, defaultEditing = false, onSubmit, canEdit = true, placeholder, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, className, singleLine = false, }) => {
     const ref = (0, react_1.useRef)(null);
@@ -46,6 +49,9 @@ const TextEdit = ({ defaultValue, defaultEditing = false, onSubmit, canEdit = tr
             onSubmit(value);
         }
         else {
+            if (canEdit && editing && defaultEditing) {
+                return;
+            }
             if (onClickOutsideWithNoValue) {
                 onClickOutsideWithNoValue();
             }
@@ -73,7 +79,7 @@ const TextEdit = ({ defaultValue, defaultEditing = false, onSubmit, canEdit = tr
     if (!editing || !canEdit) {
         return (react_1.default.createElement(common_1.ValueBox, Object.assign({}, common_2.noDrag, { className: className, "data-editing": "false", onClick: () => onClickNotEditing === null || onClickNotEditing === void 0 ? void 0 : onClickNotEditing(), "data-pointer": onClickNotEditing ? 'true' : 'false' }),
             react_1.default.createElement(common_1.ValueReadonly, { "data-type": "text" }, value),
-            canEdit && (react_1.default.createElement(common_1.Icon, { style: { right: '0.5rem' }, onClick: (e) => {
+            canEdit && (react_1.default.createElement(common_1.IconD, { style: common_1.iconRight, onClick: (e) => {
                     e.stopPropagation();
                     setEditing(true);
                 } },
@@ -83,10 +89,10 @@ const TextEdit = ({ defaultValue, defaultEditing = false, onSubmit, canEdit = tr
         return react_1.default.createElement(react_1.default.Fragment, null);
     }
     return (react_1.default.createElement(common_1.ValueBox, Object.assign({ "data-editing": "true" }, common_2.noDrag, { ref: ref, tabIndex: editing ? 0 : undefined, className: className }),
-        react_1.default.createElement(ValueTextArea, { "data-valuechange": valueChange.toString(), ref: taref, "data-type": "text", value: value, onChange: (v) => setValue(v.currentTarget.value), placeholder: placeholder, rows: singleLine ? 1 : undefined, onKeyDown: (e) => singleLine && e.code.endsWith('Enter') && onSubmit(value) && false }),
-        valueChange && (react_1.default.createElement(common_1.Icon, { style: { right: '2rem' }, onClick: () => valueChange && onSubmit(value) },
+        react_1.default.createElement(ValueTextArea, { "data-editing": "true", "data-valuechange": valueChange.toString(), ref: taref, "data-type": "text", value: value, onChange: (v) => setValue(v.currentTarget.value), placeholder: placeholder, rows: singleLine ? 1 : undefined, onKeyDown: (e) => singleLine && e.code.endsWith('Enter') && onSubmit(value) && false }),
+        valueChange && (react_1.default.createElement(common_1.IconD, { style: common_1.iconLeft, onClick: () => valueChange && onSubmit(value) },
             react_1.default.createElement(images_1.SaveIcon, null))),
-        (valueChange || editing !== defaultEditing) && (react_1.default.createElement(common_1.Icon, { style: { right: '0.5rem' }, onClick: () => {
+        (valueChange || editing !== defaultEditing) && (react_1.default.createElement(common_1.IconD, { style: common_1.iconRight, onClick: () => {
                 setEditing(defaultEditing);
                 setValue(defaultValue);
             } },

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

@@ -2,4 +2,12 @@ export declare const ValueBox: import("styled-components").StyledComponent<"div"
 export declare const valueCss: import("styled-components").FlattenSimpleInterpolation;
 export declare const ValueInputCB: import("styled-components").StyledComponent<"input", any, {}, never>;
 export declare const ValueReadonly: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Icon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconD: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const iconRight: {
+    right: string;
+    top: string;
+};
+export declare const iconLeft: {
+    right: string;
+    top: string;
+};

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

@@ -19,7 +19,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Icon = exports.ValueReadonly = exports.ValueInputCB = exports.valueCss = exports.ValueBox = void 0;
+exports.iconLeft = exports.iconRight = exports.IconD = exports.ValueReadonly = exports.ValueInputCB = exports.valueCss = exports.ValueBox = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
 const colours_1 = require("../../styles/colours");
 exports.ValueBox = styled_components_1.default.div `
@@ -32,9 +32,7 @@ exports.ValueBox = styled_components_1.default.div `
   justify-content: flex-start;
   flex-grow: 1;
   max-width: 100%;
-  &[data-editing='false'] {
-    padding-right: 2rem;
-  }
+
   &[data-pointer='true'] {
     cursor: pointer;
   }
@@ -57,7 +55,7 @@ exports.ValueInputCB = styled_components_1.default.input `
 exports.ValueReadonly = styled_components_1.default.div `
   ${exports.valueCss};
 `;
-exports.Icon = styled_components_1.default.div `
+exports.IconD = styled_components_1.default.div `
   z-index: 1;
   font-size: 1rem;
   width: 1.5rem;
@@ -68,3 +66,5 @@ exports.Icon = styled_components_1.default.div `
     fill: ${colours_1.colours.notificationBlue};
   }
 `;
+exports.iconRight = { right: '0', top: '-1rem' };
+exports.iconLeft = { right: '1.5rem', top: '-1rem' };

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

@@ -1,8 +1,11 @@
-import React from 'react';
-import { AuthedUserContext } from '../../helpers/jwt';
-export declare const UserImage: ({ image, className, showProfilePicture, CognitoAuthContext, }: {
+/// <reference types="react" />
+import { AxiosWrapper, User } from '../../helpers/jwt';
+export declare const UserImageIcon: JSX.Element;
+export declare const UserImage: ({ image, className, }: {
     image?: string | undefined;
     className?: string | undefined;
-    showProfilePicture?: boolean | undefined;
-    CognitoAuthContext: React.Context<AuthedUserContext>;
+}) => JSX.Element;
+export declare const UserProfileImage: ({ className, user, }: {
+    className?: string | undefined;
+    user: AxiosWrapper<User>;
 }) => JSX.Element;

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

@@ -22,12 +22,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserImage = void 0;
+exports.UserProfileImage = exports.UserImage = exports.UserImageIcon = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_1 = __importStar(require("react"));
 const log_1 = require("../../../common/helpers/log");
 const array_1 = require("../../../common/helpers/array");
-const User = (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" },
+exports.UserImageIcon = (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" },
     react_1.default.createElement("path", { d: "M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm0 398.7c-58.6 0-111.1-26.6-146.1-68.3 17.8-7.7 62.2-23.7 90.3-31.9 2.2-.7 2.6-.8 2.6-10.7 0-10.6-1.2-18.1-3.8-23.6-3.5-7.5-7.7-20.2-9.2-31.6-4.2-4.9-9.9-14.5-13.6-32.9-3.2-16.2-1.7-22.1.4-27.6.2-.6.5-1.2.6-1.8.8-3.7-.3-23.5-3.1-38.8-1.9-10.5.5-32.8 15-51.3 9.1-11.7 26.6-26 58-28h17.5c31.9 2 49.4 16.3 58.5 28 14.5 18.5 16.9 40.8 14.9 51.3-2.8 15.3-3.9 35-3.1 38.8.1.6.4 1.2.6 1.7 2.1 5.5 3.7 11.4.4 27.6-3.7 18.4-9.4 28-13.6 32.9-1.5 11.4-5.7 24-9.2 31.6-3.3 6.9-6.6 15.1-6.6 23.3 0 9.9.4 10 2.7 10.7 26.7 7.9 72.7 23.8 93 32.1-35 41.8-87.5 68.5-146.2 68.5z" })));
 const Base = styled_components_1.default.div `
   width: 2.5rem;
@@ -44,23 +44,27 @@ const Img = styled_components_1.default.img `
 const images = {
     domains: ['platform-lookaside.fbsbx.com', 'lh3.googleusercontent.com'],
 };
-const UserImage = ({ image, className, showProfilePicture, CognitoAuthContext, }) => {
+const UserImage = ({ image, className, }) => {
+    const [fallback, setFallback] = (0, react_1.useState)(false);
+    const showImage = image && !fallback;
+    return (react_1.default.createElement(Base, { className: className, title: 'user image' },
+        showImage && (react_1.default.createElement(Img, { alt: "user", src: image, onError: () => setFallback(true) })),
+        !showImage && exports.UserImageIcon));
+};
+exports.UserImage = UserImage;
+const UserProfileImage = ({ className, user, }) => {
     var _a, _b, _c, _d;
-    const { user } = (0, react_1.useContext)(CognitoAuthContext);
-    let imageSet = image;
-    if (!imageSet && showProfilePicture) {
-        imageSet = (_a = user === null || user === void 0 ? void 0 : user.data) === null || _a === void 0 ? void 0 : _a.picture;
-    }
+    let image = (_a = user === null || user === void 0 ? void 0 : user.data) === null || _a === void 0 ? void 0 : _a.picture;
     if ((_b = user === null || user === void 0 ? void 0 : user.data) === null || _b === void 0 ? void 0 : _b.picture) {
         if (!images.domains.find((i) => user.data.picture.includes(i))) {
-            imageSet = image || '';
+            image = image || '';
             (0, log_1.warn)(`bad domain:${user.data.picture}`);
         }
     }
     const titleA = [(_c = user === null || user === void 0 ? void 0 : user.data) === null || _c === void 0 ? void 0 : _c.fullname, (_d = user === null || user === void 0 ? void 0 : user.data) === null || _d === void 0 ? void 0 : _d.userId].filter(array_1.notEmpty);
     const title = titleA.length === 0 ? '' : titleA.join(' - ');
     return (react_1.default.createElement(Base, { className: className, title: title },
-        imageSet && react_1.default.createElement(Img, { alt: "user", src: imageSet }),
-        !imageSet && User));
+        image && react_1.default.createElement(Img, { alt: "user", src: image }),
+        !image && exports.UserImageIcon));
 };
-exports.UserImage = UserImage;
+exports.UserProfileImage = UserProfileImage;

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

@@ -9,6 +9,7 @@ export * from './Icon';
 export * from './Input';
 export * from './Loader';
 export * from './LoginButton';
+export * from './LogoutButton';
 export * from './Modal';
 export * from './RowOrColumn';
 export * from './Table';

package/dist/ui/components/index.js

@@ -21,6 +21,7 @@ __exportStar(require("./Icon"), exports);
 __exportStar(require("./Input"), exports);
 __exportStar(require("./Loader"), exports);
 __exportStar(require("./LoginButton"), exports);
+__exportStar(require("./LogoutButton"), exports);
 __exportStar(require("./Modal"), exports);
 __exportStar(require("./RowOrColumn"), exports);
 __exportStar(require("./Table"), exports);

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "ag-common",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Andrei Gec <@andreigec> (https://gec.dev/)",
   "repository": "github:andreigec/ag-common",
   "license": "ISC",
   "dependencies": {
-    "aws-lambda": "1.0.7",
     "styled-components": "5.3.3",
     "axios": "0.24.0",
     "typescript": "4.5.4",
@@ -26,7 +25,6 @@
     "@typescript-eslint/parser": "5.8.1",
     "prettier": "2.5.1",
     "@types/node": "17.0.5",
-    "@types/aws-lambda": "8.10.89",
     "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
     "@types/styled-components": "5.1.19",