oolib 2.110.0 → 2.111.0

package/dist/stories/Loaders.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._LoaderOverlay = exports._LoaderCircle = void 0;
+var LoaderCircle_1 = require("../components/LoadersAndProgress/LoaderCircle");
+var LoaderOverlay_1 = require("../components/LoadersAndProgress/LoaderOverlay");
+var themes_1 = require("../themes");
+exports.default = {
+    title: "Components/Loaders",
+};
+var sizeArray = Array.from({ length: 10 }, function (_, index) { return "".concat((index + 1) * 10, "vh"); });
+var _LoaderCircle = function (args) {
+    args[args['size']] = true;
+    return (React.createElement("div", { style: { background: args.invert ? themes_1.colors.greyColor100 : '' } },
+        React.createElement(LoaderCircle_1.LoaderCircle, __assign({}, args), args.children)));
+};
+exports._LoaderCircle = _LoaderCircle;
+exports._LoaderCircle.argTypes = {
+    size: {
+        name: "Size",
+        options: ['Small', 'Medium', 'Large'],
+        mapping: {
+            Small: 'S',
+            Medium: 'M',
+            Large: 'L'
+        },
+        control: { type: 'inline-radio' },
+        defaultValue: 'Medium',
+    },
+    text: {
+        name: "Text Input"
+    },
+    isBlock: {
+        name: "Is Block"
+    },
+    blockHeight: {
+        name: "Block Height",
+        control: { type: 'select' },
+        options: sizeArray
+    },
+    invert: {
+        name: "Invert"
+    }
+};
+exports._LoaderCircle.args = {
+    text: 'Hello World',
+    size: "Small",
+    isBlock: true,
+    blockHeight: sizeArray[sizeArray.length - 1],
+    invert: false,
+};
+var _LoaderOverlay = function (args) {
+    return (React.createElement(LoaderOverlay_1.LoaderOverlay, __assign({}, args)));
+};
+exports._LoaderOverlay = _LoaderOverlay;
+exports._LoaderOverlay.args = {
+    loaderText: 'Hello World',
+};
+exports._LoaderOverlay.argTypes = {
+    loaderText: {
+        name: "Text",
+        control: { type: "text" }
+    }
+};

package/dist/stories/Modal.stories.d.ts

@@ -0,0 +1,135 @@
+declare namespace _default {
+    let title: string;
+    let argTypes: {};
+    namespace args {
+        let title_1: string;
+        export { title_1 as title };
+        export let fitToContentHeight: boolean;
+        export let textLength: string;
+    }
+}
+export default _default;
+export function Modal_(args: any): import("react").JSX.Element;
+export namespace Modal_ {
+    export namespace argTypes_1 {
+        export namespace title_2 {
+            let name: string;
+        }
+        export { title_2 as title };
+        export namespace fitToContentHeight_1 {
+            let name_1: string;
+            export { name_1 as name };
+        }
+        export { fitToContentHeight_1 as fitToContentHeight };
+        export namespace textLength_1 {
+            let name_2: string;
+            export { name_2 as name };
+            export let options: string[];
+            export namespace control {
+                let type: string;
+            }
+            export let defaultValue: string;
+        }
+        export { textLength_1 as textLength };
+        export namespace showActionPanel {
+            let name_3: string;
+            export { name_3 as name };
+        }
+        export namespace alignActions {
+            let name_4: string;
+            export { name_4 as name };
+            let options_1: string[];
+            export { options_1 as options };
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        export namespace children {
+            let name_5: string;
+            export { name_5 as name };
+        }
+    }
+    export { argTypes_1 as argTypes };
+    export namespace args_1 {
+        let title_3: string;
+        export { title_3 as title };
+        let showActionPanel_1: boolean;
+        export { showActionPanel_1 as showActionPanel };
+        let fitToContentHeight_2: boolean;
+        export { fitToContentHeight_2 as fitToContentHeight };
+        export let overflowVisible: boolean;
+        let textLength_2: string;
+        export { textLength_2 as textLength };
+        let alignActions_1: string;
+        export { alignActions_1 as alignActions };
+        let children_1: string;
+        export { children_1 as children };
+        export let showConfirmBtn: boolean;
+        export let showCloseBtn: boolean;
+    }
+    export { args_1 as args };
+}
+export function Modal_Confirm(args: any): import("react").JSX.Element;
+export namespace Modal_Confirm {
+    export namespace parameters {
+        namespace controls {
+            let exclude: string[];
+        }
+    }
+    export namespace args_2 {
+        let title_4: string;
+        export { title_4 as title };
+        export let subTitle: string;
+        let alignActions_2: string;
+        export { alignActions_2 as alignActions };
+        let children_2: string;
+        export { children_2 as children };
+        let showConfirmBtn_1: boolean;
+        export { showConfirmBtn_1 as showConfirmBtn };
+        let showCloseBtn_1: boolean;
+        export { showCloseBtn_1 as showCloseBtn };
+    }
+    export { args_2 as args };
+    export namespace argTypes_2 {
+        export namespace title_5 {
+            let name_6: string;
+            export { name_6 as name };
+        }
+        export { title_5 as title };
+        export namespace subTitle_1 {
+            let name_7: string;
+            export { name_7 as name };
+        }
+        export { subTitle_1 as subTitle };
+        export namespace alignActions_3 {
+            let name_8: string;
+            export { name_8 as name };
+            let options_2: string[];
+            export { options_2 as options };
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        export { alignActions_3 as alignActions };
+        export namespace showConfirmBtn_2 {
+            let name_9: string;
+            export { name_9 as name };
+        }
+        export { showConfirmBtn_2 as showConfirmBtn };
+        export namespace showCloseBtn_2 {
+            let name_10: string;
+            export { name_10 as name };
+        }
+        export { showCloseBtn_2 as showCloseBtn };
+        export namespace children_3 {
+            let name_11: string;
+            export { name_11 as name };
+        }
+        export { children_3 as children };
+    }
+    export { argTypes_2 as argTypes };
+}

package/dist/stories/Modal.stories.js

@@ -0,0 +1,146 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal_Confirm = exports.Modal_ = void 0;
+var react_1 = require("react");
+var ModalConfirm_1 = require("../components/Modals/ModalConfirm");
+var Modal_1 = require("../components/Modals/Modal");
+var TextInputs_1 = require("../components/TextInputs");
+var Paddings_1 = require("../components/Paddings");
+var Typo_1 = require("../components/Typo");
+var DropdownSingle_1 = require("../components/Dropdowns/DropdownSingle");
+var dropdownOptions = [
+    {
+        display: "Admin",
+        value: "admin",
+    },
+    {
+        display: "Super Admin",
+        value: "superAdmin",
+    },
+    {
+        display: "Contributor",
+        value: "contributor",
+        desc: "A Contributor has bsic access to publish content.",
+    },
+    {
+        display: "Member",
+        value: "member",
+        desc: "Non vetted Users",
+    },
+];
+exports.default = {
+    title: "Components/Modals",
+    argTypes: {},
+    args: {
+        title: "Title",
+        fitToContentHeight: false,
+        textLength: "short"
+    },
+};
+var GenModalComp = function (props) {
+    var _a = (0, react_1.useState)(false), open = _a[0], setOpen = _a[1];
+    var ModalComponents = {
+        large: Modal_1.Modal,
+        confirm: ModalConfirm_1.ModalConfirm,
+    };
+    var ModalComp = ModalComponents[props.variant];
+    return (React.createElement("div", { style: { height: "2000px" } },
+        React.createElement("button", { style: { padding: "1rem" }, onClick: function () { return setOpen(true); } }, "Open"),
+        open ? React.createElement(ModalComp, __assign({}, props, { onClose: function () { return setOpen(false); } })) : null));
+};
+var Modal_ = function (args) { return (React.createElement(GenModalComp, __assign({ variant: "large", title: "title" }, args, { onConfirm: function () { return console.log("Confirm"); }, onConfirmText: args.onConfirmText || "Add User" }),
+    React.createElement("div", { style: { padding: '2rem' } }, !args.children ?
+        React.createElement(React.Fragment, null,
+            React.createElement(TextInputs_1.TextInput, { label: "Name", placeholder: "Write here" }),
+            React.createElement(Paddings_1.PaddingBottom10, null),
+            React.createElement(TextInputs_1.TextInput, { label: "Email", placeholder: "Write here" }),
+            React.createElement(Paddings_1.PaddingBottom10, null),
+            React.createElement(DropdownSingle_1.DropdownSingle, { label: "Role", options: dropdownOptions }),
+            React.createElement(Paddings_1.PaddingBottom10, null),
+            React.createElement(DropdownSingle_1.DropdownSingle, { label: "Profile Template", options: dropdownOptions }),
+            React.createElement(Paddings_1.PaddingBottom10, null),
+            React.createElement(TextInputs_1.PhoneInput, { label: "Enter Number here", isRequired: false, placeholder: "+91" }),
+            " ") : React.createElement(Typo_1.SANS_3_4, null, args.children)))); };
+exports.Modal_ = Modal_;
+exports.Modal_.argTypes = {
+    title: {
+        name: "Title"
+    },
+    fitToContentHeight: {
+        name: "Fit to Content Height",
+    },
+    textLength: {
+        name: "Text Length",
+        options: ["short", "long"],
+        control: { type: "select" },
+        defaultValue: "short",
+    },
+    showActionPanel: {
+        name: "Show Action Panel"
+    },
+    alignActions: {
+        name: 'Align Actions Buttons',
+        options: ['left', 'right'],
+        control: { type: 'inline-radio' }
+    },
+    children: {
+        name: "Children"
+    }
+};
+exports.Modal_.args = {
+    title: "Add User",
+    showActionPanel: true,
+    fitToContentHeight: false,
+    overflowVisible: false,
+    textLength: "short",
+    alignActions: 'left',
+    children: '',
+    showConfirmBtn: true,
+    showCloseBtn: true,
+};
+var Modal_Confirm = function (args) { return (React.createElement(GenModalComp, __assign({ variant: "confirm", title: "title" }, args), !args.children ?
+    React.createElement(React.Fragment, null)
+    : args.children)); };
+exports.Modal_Confirm = Modal_Confirm;
+exports.Modal_Confirm.parameters = { controls: { exclude: ["headerStyle", "textLength", "fitToContentHeight"] } };
+exports.Modal_Confirm.args = {
+    title: "Are you sure you want to delete this?",
+    subTitle: "Description",
+    alignActions: "left",
+    children: '',
+    showConfirmBtn: true,
+    showCloseBtn: true,
+};
+exports.Modal_Confirm.argTypes = {
+    title: {
+        name: "Title"
+    },
+    subTitle: {
+        name: "Description"
+    },
+    alignActions: {
+        name: 'Align Actions Buttons',
+        options: ['left', 'right'],
+        control: { type: 'inline-radio' }
+    },
+    showConfirmBtn: {
+        name: "Show Confirm Button"
+    },
+    showCloseBtn: {
+        name: "Show Close Button"
+    },
+    children: {
+        name: "Children"
+    }
+};

package/dist/stories/ModalConfirmAction.stories.d.ts

@@ -0,0 +1,13 @@
+declare namespace _default {
+    let title: string;
+    namespace args {
+        export let enabled: boolean;
+        let title_1: string;
+        export { title_1 as title };
+        export let subtitle: string;
+        export let onCloseText: string;
+        export let onConfirmText: string;
+    }
+}
+export default _default;
+export function Modal_Confirm_Action(args: any): import("react").JSX.Element;

package/dist/stories/ModalConfirmAction.stories.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal_Confirm_Action = void 0;
+var Buttons_1 = require("../components/Buttons");
+var ModalConfirmAction_1 = require("../components/Modals/derivedComps/ModalConfirmAction");
+var Banners_1 = require("../components/Banners");
+var react_1 = require("react");
+var Typo_1 = require("../components/Typo");
+exports.default = {
+    title: "ModalConfirmAction",
+    args: {
+        enabled: true,
+        title: "title",
+        subtitle: "subtitle",
+        onCloseText: "cancel",
+        onConfirmText: "yes"
+    },
+};
+var Modal_Confirm_Action = function (args) {
+    var _a = (0, react_1.useState)(), state = _a[0], setState = _a[1];
+    return (React.createElement("div", null,
+        React.createElement(Banners_1.BannerAlert, { BANNER_STATE: { alertState: state }, REMOVE_ALERT_BANNER: function () { return setState([]); } }),
+        React.createElement(ModalConfirmAction_1.ModalConfirmAction, __assign({}, args),
+            " ",
+            React.createElement(Buttons_1.ButtonSecondary, { value: "Delete", onClick: function () {
+                    setState([
+                        {
+                            color: "green",
+                            msg: "Deleted",
+                            timeOut: 3000,
+                        },
+                    ]);
+                } }),
+            " ")));
+};
+exports.Modal_Confirm_Action = Modal_Confirm_Action;

package/dist/stories/OKELink.stories.d.ts

@@ -0,0 +1,72 @@
+declare namespace _default {
+    let title: string;
+    namespace args {
+        let text: string;
+        let color: any;
+        let prefix_icon: any;
+        let suffix_icon: any;
+        let invertUnderline: boolean;
+        let disabled: boolean;
+        let invert: boolean;
+    }
+    namespace argTypes {
+        export namespace text_1 {
+            let name: string;
+        }
+        export { text_1 as text };
+        export namespace invertUnderline_1 {
+            let name_1: string;
+            export { name_1 as name };
+        }
+        export { invertUnderline_1 as invertUnderline };
+        export namespace invert_1 {
+            let name_2: string;
+            export { name_2 as name };
+        }
+        export { invert_1 as invert };
+        export namespace prefix_icon_1 {
+            let name_3: string;
+            export { name_3 as name };
+            export { availableIcons as options };
+            export namespace control {
+                let type: string;
+            }
+            export let defaultValue: string;
+        }
+        export { prefix_icon_1 as prefix_icon };
+        export namespace suffix_icon_1 {
+            let name_4: string;
+            export { name_4 as name };
+            export { availableIcons as options };
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+            let defaultValue_1: string;
+            export { defaultValue_1 as defaultValue };
+        }
+        export { suffix_icon_1 as suffix_icon };
+        export namespace color_1 {
+            let name_5: string;
+            export { name_5 as name };
+            export { availableColors as options };
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        export { color_1 as color };
+        export namespace disabled_1 {
+            let name_6: string;
+            export { name_6 as name };
+        }
+        export { disabled_1 as disabled };
+    }
+}
+export default _default;
+export function OKELink(args: any): React.JSX.Element;
+declare const availableIcons: string[];
+declare const availableColors: string[];
+import React from 'react';

package/dist/stories/OKELink.stories.js

@@ -0,0 +1,110 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OKELink = void 0;
+var react_1 = __importDefault(require("react"));
+var OKELink_1 = require("../components/OKELink");
+var Typo_1 = require("../components/Typo");
+var icons_1 = require("../icons");
+var themes_1 = require("../themes");
+var availableIcons = __spreadArray([
+    undefined
+], Object.keys(icons_1.icons).sort(), true);
+var availableColors = __spreadArray([
+    undefined
+], Object.keys(themes_1.colors).sort(), true);
+exports.default = {
+    title: 'Components/OKELink',
+    args: {
+        text: "Link Text",
+        // iconSize: 15,
+        color: undefined,
+        prefix_icon: undefined,
+        suffix_icon: undefined,
+        invertUnderline: false,
+        disabled: false,
+        invert: false,
+    },
+    argTypes: {
+        // avatar: {
+        //   options: ['disabled', 'image', 'name'],
+        //   control: { type: 'inline-radio' },
+        //   defaultValue: 'disabled',
+        // },
+        text: {
+            name: "Text"
+        },
+        // iconSize : {
+        //   name: "Icon Size",
+        //   options: ['15' ],
+        //   control: { type: 'inline-radio' }
+        // },
+        invertUnderline: {
+            name: "Invert Underline"
+        },
+        invert: {
+            name: "Invert"
+        },
+        prefix_icon: {
+            name: 'Prefix Icon',
+            options: availableIcons,
+            control: { type: 'select' },
+            defaultValue: ''
+        },
+        suffix_icon: {
+            name: 'Suffix Icon',
+            options: availableIcons,
+            control: { type: 'select' },
+            defaultValue: ''
+        },
+        color: {
+            name: 'Color',
+            options: availableColors,
+            control: { type: 'select' },
+        },
+        disabled: {
+            name: "Disabled"
+        }
+    }
+};
+var OKELink = function (args) {
+    args['storyBookTheme'] = {
+        colors: {
+            primaryColor40: '#addbff',
+            primaryColor100: '#33a4ff',
+            primaryColor10: '#EBF6FF',
+            primaryColorText: '#0071CC',
+        },
+    };
+    // const avatar = args['avatar'] === 'disabled'? undefined : {};
+    // if (args['avatar'] === 'image') {
+    //   avatar?.userUploaded = [{publicUrl: `https://image.shutterstock.com/image-photo/portrait-smiling-african-american-student-260nw-1194497215.jpg`}]
+    // }
+    // if (args['avatar'] === 'name') avatar?.title = 'ALI';
+    return (react_1.default.createElement("div", { style: { padding: '4rem', backgroundColor: args.invert ? '#383838' : '' } },
+        react_1.default.createElement(Typo_1.SANS_3, null,
+            react_1.default.createElement(OKELink_1.OKELink, __assign({}, args, { icon: args.prefix_icon, iconAfter: args.suffix_icon, onClick: function () { return console.log('clicked'); }, linkType: 'external', link: 'ggle.com' })))));
+};
+exports.OKELink = OKELink;

package/dist/stories/PDFInput.stories.d.ts

@@ -0,0 +1,20 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace invert {
+            let name: string;
+        }
+        namespace readOnly {
+            let name_1: string;
+            export { name_1 as name };
+        }
+    }
+    namespace args {
+        let readOnly_1: boolean;
+        export { readOnly_1 as readOnly };
+        let invert_1: boolean;
+        export { invert_1 as invert };
+    }
+}
+export default _default;
+export function PDFInput_(args: any): import("react").JSX.Element;

package/dist/stories/PDFInput.stories.js

@@ -0,0 +1,45 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PDFInput_ = void 0;
+var react_1 = require("react");
+var PDFInput_1 = __importDefault(require("../components/PDFInput"));
+var Wrappers_1 = require("../components/Wrappers");
+var themes_1 = require("../themes");
+exports.default = {
+    title: "Components/PDF Input",
+    argTypes: {
+        invert: {
+            name: "Invert"
+        },
+        readOnly: {
+            name: "Read Only"
+        }
+    },
+    args: {
+        readOnly: false,
+        invert: false,
+    }
+};
+var PDFInput_ = function (args) {
+    var _a = (0, react_1.useState)(undefined), url = _a[0], setUrl = _a[1];
+    console.log({ url: url });
+    var invertProp = args.invert;
+    return (React.createElement("div", { style: { background: invertProp ? themes_1.colors.greyColor100_opacity70 : themes_1.colors.white, height: '90svh' } },
+        React.createElement(Wrappers_1.Wrapper700, null,
+            React.createElement(PDFInput_1.default, __assign({ label: "PDF Input", sublabel: "Choose any pdf file to upload", value: url, onChange: function (k, v) { return setUrl(v); }, isRequired: true }, args)))));
+};
+exports.PDFInput_ = PDFInput_;

package/dist/stories/PageScrollIndicator.stories.d.ts

@@ -0,0 +1,15 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace showDiv {
+            let name: string;
+        }
+    }
+    namespace args {
+        let showDiv_1: boolean;
+        export { showDiv_1 as showDiv };
+    }
+}
+export default _default;
+export function PageScrollIndicator_(args: any): React.JSX.Element;
+import React from "react";