oolib 2.26.8 → 2.26.9

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

@@ -1,18 +1 @@
-export function OKELink({ invert, disabled, color, invertUnderline, linkType, link: linkProp, to, storyBookTheme, text, children, onClick, icon, iconAfter, iconSize, avatar, avatarTitle }: {
-    invert: any;
-    disabled: any;
-    color: any;
-    invertUnderline: any;
-    linkType: any;
-    link: any;
-    to: any;
-    storyBookTheme: any;
-    text: any;
-    children: any;
-    onClick: any;
-    icon: any;
-    iconAfter: any;
-    iconSize?: number;
-    avatar: any;
-    avatarTitle: any;
-}): any;
+export function OKELink(props: any): any;

package/dist/components/OKELink/index.js

@@ -10,46 +10,114 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OKELink = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var react_router_dom_1 = require("react-router-dom");
-var styled_components_1 = require("styled-components");
-var utilsOolib_1 = require("../../utilsOolib");
-var _EXPORTS_1 = require("../../utils/_EXPORTS");
 var icons_1 = require("../../icons");
+// import { ProfileImageDisplay } from '../../inputs/ImageInput/derivedComps/ProfileImageDisplay'
 var styled_1 = require("./styled");
-var utils_1 = require("./utils");
-var AvatarDisplay_1 = require("./comps/AvatarDisplay");
-var OKELink = function (_a) {
-    var invert = _a.invert, disabled = _a.disabled, color = _a.color, invertUnderline = _a.invertUnderline, linkType = _a.linkType, linkProp = _a.link, to = _a.to, storyBookTheme = _a.storyBookTheme, text = _a.text, children = _a.children, onClick = _a.onClick, icon = _a.icon, iconAfter = _a.iconAfter, _b = _a.iconSize, iconSize = _b === void 0 ? 15 : _b, avatar = _a.avatar, avatarTitle = _a.avatarTitle;
-    var localize = (0, utilsOolib_1.useLocale)();
+var utilsOolib_1 = require("../../utilsOolib");
+var styled_components_1 = require("styled-components");
+var themes_1 = require("../../themes");
+var injectHttps_1 = require("../../utils/injectHttps");
+var comps_1 = require("../../utils/comps");
+var OKELink = function (props) {
+    var _to = props.to, link = props.link, //link is deprecated. use to instead 
+    onClick = props.onClick, icon = props.icon, iconAfter = props.iconAfter, text = props.text, children = props.children, invertUnderline = props.invertUnderline, color = props.color, invert = props.invert, disabled = props.disabled, className = props.className, style = props.style, avatar = props.avatar, // imageData // [ {...} ] OR {...}
+    //imageSize ??
+    iconSize = props.iconSize;
+    var to = link || _to;
     var theme = (0, styled_components_1.useTheme)();
-    var link = linkProp || to;
-    var PrefixIconComp = icons_1.icons[icon];
-    var SuffixIconComp = icons_1.icons[iconAfter];
-    var iconColor = (0, utils_1.setLinkColor)({ disabled: disabled, color: color, invert: invert, theme: theme || storyBookTheme });
-    var AvatarComp = avatar && AvatarDisplay_1.AvatarDisplay;
-    return (react_1.default.createElement(styled_1.StyledLink, __assign({ onClick: function (ev) {
-            ev.stopPropagation();
-            linkType === 'action' && !disabled && onClick(ev);
-        }, invertUnderline: invertUnderline, invert: invert, disabled: disabled, color: color }, (linkType === 'action' ?
-        { as: 'span' }
-        : linkType === 'external' ?
-            {
-                href: !disabled ? (0, _EXPORTS_1.injectHttps)(link) : '#',
-                target: "_blank"
-            } :
-            {
-                as: react_router_dom_1.Link,
-                to: !disabled ? link : '#'
-            })),
-        AvatarComp && react_1.default.createElement(AvatarComp, { value: avatar, title: avatarTitle, invert: invert }),
-        PrefixIconComp && react_1.default.createElement(PrefixIconComp, { color: iconColor, size: iconSize }),
-        react_1.default.createElement("span", { className: "text", style: !PrefixIconComp && !SuffixIconComp ? { verticalAlign: 'initial' } : {} }, localize(text || children)),
-        SuffixIconComp && react_1.default.createElement(SuffixIconComp, { color: iconColor, size: iconSize })));
+    var localize = (0, utilsOolib_1.useLocale)();
+    /**
+     * if location object is passed through then its internal
+     * if string then if first character is '/' then internal. else external
+     * all other cases, return external
+     */
+    var getLinkType = function (_a) {
+        var to = _a.to, onClick = _a.onClick;
+        if (onClick)
+            return 'action';
+        if (!to)
+            return 'external'; //this shouldnt exist at all. but for now, if we dont handle this we get a blank screen from footer. 
+        if (to.pathname)
+            return 'internal'; //means its a route;
+        if (to instanceof Function)
+            return 'internal';
+        if (typeof to === 'string')
+            return to.substring(0, 1) === '/' ? 'internal' : 'external';
+        //else
+        return 'external';
+    };
+    var linkType = getLinkType({ to: to, onClick: onClick });
+    var textComp = (react_1.default.createElement(styled_1.StyledLinkText, { id: 'StyledLinkText' }, localize(children || text)));
+    var genIcon = function (icon) {
+        return react_1.default.createElement(comps_1.DisplayIcon, __assign({}, {
+            icon: icon,
+            size: iconSize || 15,
+            color: (0, styled_1.genColor)({ color: color, theme: theme, invert: invert, disabled: disabled })
+        }));
+    };
+    var genAvatar = function (avatar) {
+        var _a;
+        if (!avatar)
+            return;
+        //else
+        return (react_1.default.createElement("div", { style: { marginRight: '1rem', flex: '0 0 auto' } },
+            react_1.default.createElement("img", { src: (_a = avatar === null || avatar === void 0 ? void 0 : avatar.userUploaded[0]) === null || _a === void 0 ? void 0 : _a.publicUrl, style: { height: 'auto', width: '100%' } })));
+    };
+    var linkContents = react_1.default.createElement(react_1.Fragment, null,
+        genAvatar(avatar),
+        icon && genIcon(icon, 'before'),
+        textComp,
+        iconAfter && genIcon(iconAfter, 'after'));
+    var commonProps = {
+        color: color,
+        invert: invert,
+        disabled: disabled,
+        className: className || '',
+        invertUnderline: invertUnderline,
+        style: style
+    };
+    var genLink = function () {
+        switch (linkType) {
+            case 'external':
+                return (react_1.default.createElement(styled_1.StyledLink, __assign({ as: 'a', href: !disabled ? (0, injectHttps_1.injectHttps)(to) : undefined, target: "_blank", onClick: function (e) { e.stopPropagation(); } }, commonProps), linkContents));
+            case 'action':
+                return (react_1.default.createElement(styled_1.StyledLink, __assign({ as: 'span', onClick: function (e) {
+                        e.stopPropagation();
+                        !disabled && onClick(e);
+                    } }, commonProps), linkContents));
+            case 'internal':
+            default:
+                //internal
+                return (react_1.default.createElement(styled_1.StyledLink, __assign({ as: react_router_dom_1.Link, to: !disabled ? to : undefined, onClick: function (e) { e.stopPropagation(); } }, commonProps), linkContents));
+        }
+    };
+    return react_1.default.createElement(react_1.Fragment, null, genLink());
 };
 exports.OKELink = OKELink;

package/dist/components/OKELink/styled.d.ts

@@ -1 +1,8 @@
+export function genColor({ color, theme, invert, disabled }: {
+    color: any;
+    theme: any;
+    invert: any;
+    disabled: any;
+}): any;
 export const StyledLink: any;
+export const StyledLinkText: any;

package/dist/components/OKELink/styled.js

@@ -3,45 +3,41 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-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.StyledLink = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
+exports.StyledLinkText = exports.StyledLink = exports.genColor = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
-var utils_1 = require("./utils");
-exports.StyledLink = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n  pointer-events: ", ";\n  max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n  text-decoration: none;\n  & > * {\n    margin-right: 0.7rem;\n    margin-left: 0.7rem;\n    vertical-align: middle;\n  }\n\n  &:hover{\n    .text {\n      ", ";\n    }\n  }\n\n  & > .text {\n    position: relative;\n    ", ";\n    \n    ", "\n\n    & > *:first-child{ // kishan addition\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n  }\n"], ["\n  cursor: pointer;\n  pointer-events: ", ";\n  max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n  text-decoration: none;\n  & > * {\n    margin-right: 0.7rem;\n    margin-left: 0.7rem;\n    vertical-align: middle;\n  }\n\n  &:hover{\n    .text {\n      ", ";\n    }\n  }\n\n  & > .text {\n    position: relative;\n    ", ";\n    \n    ", "\n\n    & > *:first-child{ // kishan addition\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n  }\n"])), function (_a) {
+var utilsOolib_1 = require("../../utilsOolib");
+var genColor = function (_a) {
+    var color = _a.color, theme = _a.theme, invert = _a.invert, disabled = _a.disabled;
+    return disabled
+        ? themes_1.colors.greyColor40
+        : invert
+            ? (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors)
+            : color
+                ? themes_1.colors[color]
+                : (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors);
+};
+exports.genColor = genColor;
+exports.StyledLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    \n    cursor: ", ";\n    display: inline-flex;\n    gap: 0.7rem;\n    align-items: center;\n    max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n    text-decoration: none;\n    position: relative;\n    color: ", ";\n\n    &::after{\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: ", ";\n      height: ", ";\n      pointer-events: ", ";\n      ", ";\n      background-color: ", ";\n    }\n\n    &:hover{\n        color: ", ";\n        &::after{ width: ", "; }\n    }\n"], ["\n    \n    cursor: ", ";\n    display: inline-flex;\n    gap: 0.7rem;\n    align-items: center;\n    max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n    text-decoration: none;\n    position: relative;\n    color: ", ";\n\n    &::after{\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: ", ";\n      height: ", ";\n      pointer-events: ", ";\n      ", ";\n      background-color: ", ";\n    }\n\n    &:hover{\n        color: ", ";\n        &::after{ width: ", "; }\n    }\n"])), function (_a) {
     var disabled = _a.disabled;
-    return disabled ? 'none' : 'auto';
+    return !disabled ? 'pointer' : 'not-allowed';
+}, exports.genColor, function (_a) {
+    var invertUnderline = _a.invertUnderline;
+    return invertUnderline ? 0 : '100%';
 }, function (_a) {
-    var invertUnderline = _a.invertUnderline, disabled = _a.disabled, invert = _a.invert, theme = _a.theme, color = _a.color;
-    if (!disabled) {
-        return (0, mixins_1.multilineUnderline)((0, utils_1.setLinkColor)({ theme: theme, invert: invert, color: color }), '1px', invertUnderline, true);
-    }
+    var disabled = _a.disabled;
+    return !disabled ? '1px' : 0;
 }, function (_a) {
-    var theme = _a.theme, invert = _a.invert, disabled = _a.disabled, color = _a.color, invertUnderline = _a.invertUnderline;
-    var finalColor = (0, utils_1.setLinkColor)({ disabled: disabled, color: color, invert: invert, theme: theme });
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: ", ";\n        ", "\n      "], ["\n        color: ", ";\n        ", "\n      "])), finalColor, !disabled && (0, mixins_1.multilineUnderline)(finalColor, '1px', invertUnderline));
-}, (0, mixins_1.transition)('background-size'));
+    var disabled = _a.disabled;
+    return !disabled ? 'unset' : 'none';
+}, (0, mixins_1.transition)('width'), exports.genColor, exports.genColor, function (_a) {
+    var invertUnderline = _a.invertUnderline;
+    return invertUnderline ? '100%' : 0;
+});
+exports.StyledLinkText = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    white-space: nowrap;\n  /** might need some ellipsis stuff here. but it doesnt work with inline-flex. which is on StyledLink */ \n"], ["\n    white-space: nowrap;\n  /** might need some ellipsis stuff here. but it doesnt work with inline-flex. which is on StyledLink */ \n"])));
 var templateObject_1, templateObject_2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.26.8",
+  "version": "2.26.9",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/components/OKELink/comps/AvatarDisplay/index.d.ts

@@ -1,7 +0,0 @@
-export function AvatarDisplay({ value, title: titleProp, style, size, invert }: {
-    value: any;
-    title: any;
-    style: any;
-    size?: number;
-    invert: any;
-}): any;

package/dist/components/OKELink/comps/AvatarDisplay/index.js

@@ -1,19 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarDisplay = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_js_1 = require("./styled.js");
-var AvatarDisplay = function (_a) {
-    var value = _a.value, titleProp = _a.title, style = _a.style, _b = _a.size, size = _b === void 0 ? 2.5 : _b, invert = _a.invert;
-    var title = titleProp || value.title;
-    var titleInitial = title && title[0].toUpperCase();
-    var imageURL = (value === null || value === void 0 ? void 0 : value.userUploaded) && (value === null || value === void 0 ? void 0 : value.userUploaded[0].publicUrl);
-    return (imageURL ?
-        react_1.default.createElement(styled_js_1.StyledAvatarImg, { invert: invert, size: size, style: style, src: imageURL, alt: "profile picture" })
-        :
-            react_1.default.createElement(styled_js_1.StyledAvatarTXT, { invert: invert, size: size, style: style }, titleInitial));
-};
-exports.AvatarDisplay = AvatarDisplay;

package/dist/components/OKELink/comps/AvatarDisplay/styled.d.ts

@@ -1,2 +0,0 @@
-export const StyledAvatarImg: any;
-export const StyledAvatarTXT: any;

package/dist/components/OKELink/comps/AvatarDisplay/styled.js

@@ -1,48 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledAvatarTXT = exports.StyledAvatarImg = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-var utilsOolib_1 = require("../../../../utilsOolib");
-var themes_1 = require("../../../../themes");
-var index_styled_1 = require("../../../Typo/index.styled");
-var greyColor80 = themes_1.colors.greyColor80, white = themes_1.colors.white;
-var commonStyle = function (_a) {
-    var size = _a.size, invert = _a.invert, theme = _a.theme;
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background-color:  ", ";\n  color: ", ";\n  \n"], ["\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background-color:  ", ";\n  color: ", ";\n  \n"])), isNaN(size) ? size : size + 'rem', isNaN(size) ? size : size + 'rem', invert ? greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(theme.colors), white);
-};
-exports.StyledAvatarImg = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  font-size: 8px;\n"], ["\n  ", "\n  font-size: 8px;\n"])), function (_a) {
-    var theme = _a.theme, invert = _a.invert, size = _a.size;
-    return commonStyle({ theme: theme, invert: invert, size: size });
-});
-exports.StyledAvatarTXT = (0, styled_components_1.default)(index_styled_1.SANS_3_STYLED)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  display: inline-grid;\n  place-items: center;\n"], ["\n  ", "\n  display: inline-grid;\n  place-items: center;\n"])), function (_a) {
-    var theme = _a.theme, invert = _a.invert, size = _a.size;
-    return commonStyle({ theme: theme, invert: invert, size: size });
-});
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/OKELink/utils/index.d.ts

@@ -1,6 +0,0 @@
-export function setLinkColor({ disabled, color, invert, theme }: {
-    disabled: any;
-    color: any;
-    invert: any;
-    theme: any;
-}): any;

package/dist/components/OKELink/utils/index.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setLinkColor = void 0;
-var themes_1 = require("../../../themes");
-var utilsOolib_1 = require("../../../utilsOolib");
-var greyColor40 = themes_1.colors.greyColor40;
-var setLinkColor = function (_a) {
-    var disabled = _a.disabled, color = _a.color, invert = _a.invert, theme = _a.theme;
-    switch (true) {
-        case disabled:
-            return greyColor40;
-        case !!color:
-            return color;
-        case invert:
-            return (0, utilsOolib_1.getPrimaryColor40)(theme.colors);
-        default:
-            return (0, utilsOolib_1.getPrimaryColorText)(theme.colors);
-    }
-};
-exports.setLinkColor = setLinkColor;