ag-common 0.0.263 → 0.0.264

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

@@ -13,4 +13,5 @@ export declare type TGetAndValidateToken = (p: IGetAndValidateToken) => Promise<
     token?: string;
     userProfile?: User;
 }>;
+/** extracts user details from oauth token */
 export declare const getAndValidateToken: TGetAndValidateToken;

package/dist/api/helpers/validations.js

@@ -58,6 +58,7 @@ const jwtVerify = ({ token, jwksUri, issuer, }) => __awaiter(void 0, void 0, voi
         });
     });
 });
+/** extracts user details from oauth token */
 const getAndValidateToken = ({ tokenRaw, jwksRegion = 'ap-southeast-2', COGNITO_USER_POOL_ID, }) => __awaiter(void 0, void 0, void 0, function* () {
     var _a, _b;
     const jwksUri = `https://cognito-idp.${jwksRegion}.amazonaws.com/${COGNITO_USER_POOL_ID}/.well-known/jwks.json`;

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

@@ -1,19 +1,21 @@
 import React from 'react';
 declare type IOnClick = React.MouseEvent<HTMLDivElement, MouseEvent> | React.MouseEvent<HTMLAnchorElement, MouseEvent>;
-export declare const BorderGradient: ({ left, right, children, radius, fill, padding, className, onClick, href, target, rel, noGrow, disabled, canClick, }: {
-    canClick?: boolean | undefined;
-    noGrow?: boolean | undefined;
-    className?: string | undefined;
-    fill?: boolean | undefined;
-    radius?: string | undefined;
-    left?: string | undefined;
-    right?: string | undefined;
+export interface IBorderGradient {
+    canClick?: boolean;
+    noGrow?: boolean;
+    className?: string;
+    fill?: boolean;
+    /** default 2rem */
+    radius?: string;
+    left?: string;
+    right?: string;
     children: JSX.Element | (JSX.Element | string | number | undefined)[];
-    padding?: string | undefined;
-    onClick?: ((e: IOnClick) => void) | undefined;
-    href?: string | undefined;
-    target?: string | undefined;
-    rel?: string | undefined;
-    disabled?: boolean | undefined;
-}) => JSX.Element;
+    padding?: string;
+    onClick?: (e: IOnClick) => void;
+    href?: string;
+    target?: string;
+    rel?: string;
+    disabled?: boolean;
+}
+export declare const BorderGradient: ({ left, right, children, radius, fill, padding, className, onClick, href, target, rel, noGrow, disabled, canClick, }: IBorderGradient) => JSX.Element;
 export {};

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

@@ -34,36 +34,16 @@ const BGcss = (0, styled_components_1.css) `
   display: flex;
   border: 0;
   padding: 3px;
-  border-radius: ${({ radius }) => radius};
   background-image: linear-gradient(white, white),
-    linear-gradient(
-      to bottom right,
-      ${({ left }) => left},
-      ${({ right }) => right}
-    );
+    linear-gradient(to bottom right, var(--left), var(--right));
   background-origin: border-box;
   background-clip: content-box, border-box;
   overflow: hidden;
-  ${({ noGrow }) => !noGrow &&
-    (0, styled_components_1.css) `
-      flex-grow: 1;
-    `}
-  ${({ disabled }) => disabled &&
-    (0, styled_components_1.css) `
-      filter: grayscale(1);
-    `}
-
-${({ canClick, disabled }) => (0, styled_components_1.css) `
-      cursor: ${canClick && !disabled ? 'pointer' : 'default'};
-    `}
-
-  ${({ canClick, disabled }) => canClick &&
-    !disabled &&
-    (0, styled_components_1.css) `
-      &:hover {
-        filter: saturate(3);
-      }
-    `}
+  &[data-ccnd='true'] {
+    &:hover {
+      filter: saturate(3);
+    }
+  }
 `;
 const BGLink = styled_components_1.default.div `
   ${BGcss};
@@ -76,37 +56,37 @@ const Padding = styled_components_1.default.div `
   align-items: center;
   display: flex;
   flex-flow: column;
-  padding: ${({ padding }) => padding};
   border: 0;
   flex-grow: 1;
 `;
 const FeatureBoxFill = (0, styled_components_1.default)(Padding) `
-  background-image: linear-gradient(
-    to bottom right,
-    ${({ left }) => left},
-    ${({ right }) => right}
-  );
+  background-image: linear-gradient(to bottom right, var(--left), var(--right));
   color: ${colours_1.colours.mainLight};
-  border-radius: ${({ radius }) => radius};
   flex-grow: 1;
 `;
 const BorderGradient = ({ left = colours_1.colours.orange, right = colours_1.colours.orangeRed, children, radius = '2rem', fill = false, padding = '2rem', className, onClick, href, target, rel, noGrow = false, disabled = false, canClick = false, }) => {
+    const CCND = canClick && !disabled;
+    const style = {
+        flexGrow: noGrow ? 0 : 1,
+        '--left': left,
+        '--right': right,
+        borderRadius: radius,
+        filter: !disabled ? '' : 'grayscale(1)',
+        cursor: CCND ? 'pointer' : 'default',
+    };
     const props = {
         onClick: (e) => !disabled && onClick && onClick(e),
         className,
-        left: (!fill && left) || undefined,
-        right: (!fill && right) || undefined,
-        radius,
         href,
         target,
         rel,
-        noGrow,
-        disabled,
         canClick: !!onClick || canClick,
+        style,
+        'data-ccnd': CCND,
     };
     const child = (react_1.default.createElement(react_1.default.Fragment, null,
-        !fill && react_1.default.createElement(Padding, { padding: padding }, children),
-        fill && (react_1.default.createElement(FeatureBoxFill, { left: left, right: right, radius: radius, padding: padding }, children))));
+        !fill && react_1.default.createElement(Padding, { style: { padding } }, children),
+        fill && react_1.default.createElement(FeatureBoxFill, { style: { padding } }, children)));
     if (href) {
         return react_1.default.createElement(BGALink, Object.assign({}, props), child);
     }

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

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.DropdownList = void 0;
 const dom_1 = require("../../helpers/dom");
@@ -29,7 +32,7 @@ const common_1 = require("../../styles/common");
 const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
 const colours_1 = require("../../styles/colours");
 const KebabDots_1 = require("../KebabDots");
-const styled_components_1 = __importStar(require("styled-components"));
+const styled_components_1 = __importDefault(require("styled-components"));
 const react_1 = __importStar(require("react"));
 const SBase = styled_components_1.default.div `
   display: flex;
@@ -48,11 +51,6 @@ const DropItems = styled_components_1.default.div `
   cursor: default;
   width: 100%;
   position: absolute;
-  ${({ shadow }) => shadow && (0, common_1.Shadow)(shadow)}
-  ${({ maxHeight }) => maxHeight &&
-    (0, styled_components_1.css) `
-      max-height: ${maxHeight};
-    `}
 
   overflow-y: auto;
   &[data-open='true'] {
@@ -137,10 +135,12 @@ function DropdownList(p) {
         else {
             newStyle.top = '0';
         }
+        newStyle.filter = `drop-shadow(1px 1px 0.5rem ${shadow})`;
+        newStyle.maxHeight = maxHeight;
         if (JSON.stringify(style) !== JSON.stringify(newStyle)) {
             setStyle(newStyle);
         }
-    }, [open, options, renderF, style]);
+    }, [maxHeight, open, options, renderF, shadow, style]);
     const defaultRender = !p.value ? react_1.default.createElement(KebabDots_1.KebabDots, null) : react_1.default.createElement(react_1.default.Fragment, null, p.renderF(p.value));
     const defaultKey = !p.value ? '(noval)' : p.renderF(p.value);
     const openDisplay = p.children || (react_1.default.createElement(ListItem, { selected: true, render: defaultRender, key: defaultKey, defaultV: !p.value }));
@@ -154,7 +154,7 @@ function DropdownList(p) {
             e.preventDefault();
             setOpen(!open);
         } },
-        react_1.default.createElement(DropItems, { "data-open": open, style: style, shadow: shadow, maxHeight: maxHeight, "data-bounced": bounced }, open &&
+        react_1.default.createElement(DropItems, { "data-open": open, style: style, "data-bounced": bounced }, open &&
             options.map((s, i) => (react_1.default.createElement(ListItem, { key: p.renderF(s), render: p.renderF(s), onChange: () => p.onChange(s, i), selected: s === state })))),
         openDisplay));
 }

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

@@ -3,11 +3,15 @@ export interface IIconProps {
     disabled?: boolean;
     fill?: string;
     outline?: string;
+    /** default 100% */
     width?: string;
+    /** default 100% */
     height?: string;
     rotate?: number;
     canHover?: boolean;
+    /** default 'unset' */
     margin?: string;
+    /** default 0 */
     padding?: string;
     onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
     children?: JSX.Element | JSX.Element[];
@@ -16,5 +20,5 @@ export interface IIconProps {
     tabIndex?: number;
     className?: string;
 }
-export declare const IconF: import("styled-components").StyledComponent<"span", any, IIconProps, never>;
+export declare const IconF: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Icon: (pr: IIconProps) => JSX.Element;

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

@@ -1,27 +1,4 @@
 "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 };
 };
@@ -29,54 +6,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = exports.IconF = void 0;
 const common_1 = require("../../styles/common");
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
+const styled_components_1 = __importDefault(require("styled-components"));
 exports.IconF = styled_components_1.default.span `
   transition: all 200ms;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 2rem;
-  padding: ${({ padding }) => padding || '0'};
-  margin: ${({ margin }) => (!margin ? 'unset' : margin)};
-  cursor: ${({ disabled, canHover }) => disabled || !canHover ? 'inherit' : 'pointer'};
+  cursor: inherit;
+  &[data-chnd='true'] {
+    cursor: pointer;
+    &:hover {
+      filter: saturate(3);
+    }
+  }
+
   > svg {
     flex-grow: 1;
   }
-  ${({ disabled }) => disabled &&
-    (0, styled_components_1.css) `
-      filter: grayscale(1);
-    `}
-  ${({ canHover, disabled }) => canHover &&
-    !disabled &&
-    (0, styled_components_1.css) `
-      &:hover {
-        filter: saturate(3);
-      }
-    `}
 
-  
+  fill: var(--fill);
 
-  ${({ fill }) => fill &&
-    (0, styled_components_1.css) `
-      fill: ${fill};
-
-      svg {
-        fill: ${fill};
-      }
+  svg {
+    fill: var(--fill);
+  }
 
-      linearGradient > *,
-      radialGradient > * {
-        stop-color: ${fill} !important;
-      }
-    `};
-  ${({ outline }) => outline && (0, common_1.HardOutline)(outline)};
+  linearGradient > *,
+  radialGradient > * {
+    stop-color: var(--fill) !important;
+  }
 
-  width: ${({ width }) => width || '100%'};
-  height: ${({ height }) => height || '100%'};
-  ${({ rotate }) => rotate &&
-    (0, styled_components_1.css) `
-      transform: rotate(${rotate}deg);
-    `};
+  ${common_1.HardOutline}
 
   svg {
     width: 100%;
@@ -85,6 +45,17 @@ exports.IconF = styled_components_1.default.span `
 `;
 const Icon = (pr) => {
     const { className, children, disabled, onClick } = pr;
-    return (react_1.default.createElement(exports.IconF, Object.assign({}, pr, { className: className, onClick: (e) => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(e)) }), children));
+    const CHND = pr.canHover && !pr.disabled;
+    const style = {
+        '--fill': pr.fill || '',
+        width: pr.width || '100%',
+        height: pr.height || '100%',
+        padding: pr.padding || '0',
+        margin: pr.margin || 'unset',
+        transform: !pr.rotate ? '' : `rotate(${pr.rotate || 0}deg)`,
+        filter: !pr.disabled ? '' : 'grayscale(1)',
+        '--outlinecolour': pr.outline || '',
+    };
+    return (react_1.default.createElement(exports.IconF, Object.assign({}, pr, { className: className, onClick: (e) => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(e)), style: style, "data-chnd": CHND }), children));
 };
 exports.Icon = Icon;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const HardOutline: (colour: string) => import("styled-components").FlattenSimpleInterpolation;
+export declare const HardOutline = "\n  filter: drop-shadow(1px 1px 0px var(--outlinecolour)) drop-shadow(-1px 1px 0px var(--outlinecolour))\n    drop-shadow(1px -1px 0px var(--outlinecolour)) drop-shadow(-1px -1px 0px var(--outlinecolour));\n";
 export declare const Shadow: (colour?: string) => import("styled-components").FlattenSimpleInterpolation;
 export declare const NoTextSelect: import("styled-components").FlattenSimpleInterpolation;
 export declare const TextOverflowEllipsis: import("styled-components").FlattenSimpleInterpolation;

package/dist/ui/styles/common.js

@@ -26,11 +26,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.bounce = exports.FullScreenPage = exports.noDrag = exports.Card = exports.FadeBottom = exports.CssTransparentBlock = exports.TextOverflowEllipsis = exports.NoTextSelect = exports.Shadow = exports.HardOutline = void 0;
 const colours_1 = require("./colours");
 const styled_components_1 = __importStar(require("styled-components"));
-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.HardOutline = `
+  filter: drop-shadow(1px 1px 0px var(--outlinecolour)) drop-shadow(-1px 1px 0px var(--outlinecolour))
+    drop-shadow(1px -1px 0px var(--outlinecolour)) drop-shadow(-1px -1px 0px var(--outlinecolour));
 `;
-exports.HardOutline = HardOutline;
 const Shadow = (
 /**
  * colour of shadow, default #555

package/package.json

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