oolib 2.110.1 → 2.111.1

package/dist/stories/Dropdowns.stories.js

@@ -0,0 +1,280 @@
+"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 __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 __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.Dropdowns = void 0;
+var react_1 = __importStar(require("react"));
+var Container_1 = require("../components/Container");
+var DropdownMulti_1 = require("../components/Dropdowns/DropdownMulti");
+var DropdownSingle_1 = require("../components/Dropdowns/DropdownSingle");
+var Paddings_1 = require("../components/Paddings");
+var themes_1 = require("../themes");
+var Dropdowns_mdx_1 = __importDefault(require("./Dropdowns.mdx"));
+var icons_1 = require("../icons");
+var faker_1 = require("@faker-js/faker");
+var generateRandomCountry = function () { return ({
+    display: faker_1.faker.address.country(),
+    value: faker_1.faker.address.countryCode().toLowerCase(),
+}); };
+var generateDropdownOptions = function (length) {
+    var dropdownOptions = [];
+    for (var i = 0; i < length; i++) {
+        dropdownOptions.push(generateRandomCountry());
+    }
+    return dropdownOptions;
+};
+var dropdownOptions2 = generateDropdownOptions(200);
+var availableIcons = __spreadArray([undefined], Object.keys(icons_1.icons).sort(), true);
+exports.default = {
+    title: "Components/Dropdowns",
+    argTypes: {
+        // label: {
+        //   name: "Label",
+        // },
+        // sublabel: {
+        //   name: "Sub Label",
+        // },
+        placeholder: {
+            name: "Placeholder Text",
+        },
+        optionIcon: {
+            options: availableIcons,
+            control: { type: "select" },
+        },
+        selection: {
+            options: ["single", "multi"],
+            control: { type: "inline-radio" },
+        },
+        size: {
+            name: "Size",
+            control: { type: "inline-radio" },
+            options: ["Small", "Medium"],
+            mapping: {
+                Small: "S",
+                Medium: "M",
+            },
+        },
+        selection: {
+            name: "Selection Type",
+            options: ["single", "multi"],
+            control: { type: "select" },
+        },
+        isSearchable: {
+            name: "Searchable",
+        },
+        showIconInSelectArea: {
+            name: "Show Icon in Select Area",
+        },
+        optionImage: {
+            name: "Option Image",
+        },
+        optionDescription: {
+            name: "Option Description",
+        },
+        colors: {
+            name: 'Show Colors'
+        },
+        disabled: {
+            name: "Disabled",
+        },
+        readOnly: {
+            name: "Read Only",
+        },
+        invert: {
+            name: "Invert",
+        },
+        showColorInSelectArea: {
+            name: "Show Color in Select Area"
+        }
+    },
+    args: {
+        // label: "This is a label",
+        // sublabel: "This is a sub label",
+        placeholder: "",
+        size: "Medium",
+        selection: "single",
+        isSearchable: false,
+        optionDescription: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+        optionImage: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrVSkmNOQ6abMCc5e6R2r7VwRZDkBHFTyzAg&usqp=CAU",
+        optionIcon: undefined,
+        showIconInSelectArea: false,
+        colors: false,
+        showColorInSelectArea: false,
+        disabled: false,
+        readOnly: false,
+        invert: false,
+    },
+    parameters: {
+        docs: {
+            page: Dropdowns_mdx_1.default,
+        },
+    },
+};
+var dropdownOptions = [
+    {
+        display: "Option with a slightly longer name",
+        value: "india",
+        color: themes_1.colors.lightRed,
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Sri Lanka",
+        value: "sriLanka",
+        color: themes_1.colors.invertRed,
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Japan",
+        value: "japan",
+        color: themes_1.colors.lightBlue
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Germany",
+        value: "germany",
+        color: themes_1.colors.primaryColor100
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "USA",
+        value: "usa",
+        color: themes_1.colors.greyColor100
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Columbia",
+        value: "columbia",
+        color: themes_1.colors.lightRed,
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Brazil",
+        value: "brazil",
+        color: themes_1.colors.invertRed,
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Australia",
+        value: "australia",
+        color: themes_1.colors.lightBlue
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+];
+var Dropdowns = function (args) {
+    var _a = (0, react_1.useState)({
+        single: undefined,
+        multi: undefined,
+    }), val = _a[0], setVal = _a[1];
+    var _b = (0, react_1.useState)([]), options = _b[0], setOptions = _b[1];
+    (0, react_1.useEffect)(function () {
+        var delayOptions = setTimeout(function () {
+            var newOptions = dropdownOptions2.map(function (op) { return (__assign(__assign({}, op), { desc: args.optionDescription, icon: !args.optionImage && args.optionIcon, image: args.optionImage && [{ publicUrl: args.optionImage }], color: args.colors && op.color })); });
+            setOptions(newOptions);
+        }, 2000);
+        // Cleanup the timeout on component unmount
+        return function () { return clearTimeout(delayOptions); };
+    }, [args.optionDescription, args.optionImage, args.optionIcon, args.colors]);
+    var Comp = args.selection === "single" ? DropdownSingle_1.DropdownSingle : DropdownMulti_1.DropdownMulti;
+    return (react_1.default.createElement("div", { style: { background: args.invert && themes_1.colors.greyColor100 } },
+        react_1.default.createElement(Container_1.Container, null,
+            react_1.default.createElement(Paddings_1.PaddingTopBottom40, null,
+                react_1.default.createElement(Comp, __assign({ key: args.selection }, args, { S: args.size == "S", options: dropdownOptions2.map(function (op) { return (__assign(__assign({}, op), { desc: args.optionDescription, icon: !args.optionImage && args.optionIcon, image: args.optionImage && [{ publicUrl: args.optionImage }], color: args.colors && op.color })); }), value: val[args.selection], onChange: function (k, v) {
+                        return setVal(function (prev) {
+                            var _a;
+                            return (__assign(__assign({}, prev), (_a = {}, _a[args.selection] = v, _a)));
+                        });
+                    }, selectConfig: args.showIconInSelectArea ? ["display", "icon"] : args.showColorInSelectArea ? ["display", "color"] : ["display"], label: "Dropdown Component", sublabel: "Select single or multiple options in dropdown based on Selection Type" }))))));
+};
+exports.Dropdowns = Dropdowns;
+// export const Button_Primary = (args) => (
+//   <GenButtonStory args={args} Comp={ButtonPrimary} />
+// )
+// Button_Primary.parameters = { controls: { exclude: ['variant', 'color'] } }
+// export const Button_Secondary = (args) => (
+//   <GenButtonStory args={args} Comp={ButtonSecondary} />
+// )
+// Button_Secondary.parameters = { controls: { exclude: ['variant', 'color'] } }
+// Button_Secondary.args = {
+//   active: false,
+// }
+// export const Button_Ghost = (args) => (
+//   <GenButtonStory args={args} Comp={ButtonGhost} />
+// )
+// Button_Ghost.args = {
+//   active: false,
+// }
+// Button_Ghost.parameters = { controls: { exclude: ['variant'] } }
+// export const Button_Custom = (args) => (
+//   <GenButtonStory args={args} Comp={ButtonCustom} />
+// )
+// Button_Custom.parameters = { controls: { exclude: ['variant', 'color'] } }
+// export const Google_Login = (args) => (
+//   <GenButtonStory args={args} Comp={GoogleLogin} />
+// )
+// Google_Login.parameters = {
+//   controls: { exclude: ['variant', 'color', 'iconOnly', 'icon + text'] },
+// }
+// export const Upload_Button = (args) => (
+//   <GenButtonStory args={{ ...args, children: 'Upload' }} Comp={UploadButton} />
+// )
+// Upload_Button.parameters = { controls: { exclude: ['color'] } }

package/dist/stories/EmptyStates.stories.d.ts

@@ -0,0 +1,63 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace preset {
+            let name: string;
+            let options: {};
+            namespace control {
+                let type: string;
+            }
+        }
+        namespace titleStyle {
+            let name_1: string;
+            export { name_1 as name };
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        namespace subTitleStyle {
+            let name_2: string;
+            export { name_2 as name };
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        namespace contentTypeTitle {
+            let name_3: string;
+            export { name_3 as name };
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+        namespace tags {
+            let name_4: string;
+            export { name_4 as name };
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+        }
+    }
+    namespace args {
+        let preset_1: string;
+        export { preset_1 as preset };
+        let titleStyle_1: {};
+        export { titleStyle_1 as titleStyle };
+        let subTitleStyle_1: {};
+        export { subTitleStyle_1 as subTitleStyle };
+        let contentTypeTitle_1: string;
+        export { contentTypeTitle_1 as contentTypeTitle };
+        let tags_1: string[];
+        export { tags_1 as tags };
+    }
+    let decorators: ((Story: any) => import("react").JSX.Element)[];
+}
+export default _default;
+export function EmptyStates_(args: any): import("react").JSX.Element;

package/dist/stories/EmptyStates.stories.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyStates_ = void 0;
+var EmptyStates_1 = require("../components/EmptyStates");
+var emptyStatesConfig = [
+    "multipleCollectionsListing",
+    "singlePublishingListing",
+    "multiplePublishingListing",
+    "singleCollectionsListing",
+    "profileListing",
+    "notificationEmpty",
+    "dashboardListing",
+    "successFullyPublish",
+    "draftsListing",
+    "publishedListing",
+    "inModerationListing",
+    "underMyModeration",
+    "underOthersModeration",
+    "awaitingMod",
+    "searchListing",
+    "searchDashBoardListing",
+    "learningModule",
+];
+exports.default = {
+    title: "Components/EmptyStates",
+    argTypes: {
+        preset: {
+            name: 'Component Type',
+            options: emptyStatesConfig.reduce(function (acc, key) {
+                acc[key] = key;
+                return acc;
+            }, {}),
+            control: { type: 'select' },
+        },
+        titleStyle: {
+            name: "Text",
+            control: { type: "object" },
+        },
+        subTitleStyle: {
+            name: "Subtitle Text",
+            control: { type: 'object' }, // You can use 'text' or 'object' depending on your needs
+        },
+        contentTypeTitle: {
+            name: "Content Type Title",
+            control: { type: 'text' }, // You can use 'text' or 'object' depending on your needs
+        },
+        tags: {
+            name: "tags",
+            control: { type: 'array' },
+            // if: { arg: 'preset', eq: "multiplePublishingListing" }
+        }
+    },
+    args: {
+        preset: 'singlePublishingListing',
+        titleStyle: {},
+        subTitleStyle: {},
+        contentTypeTitle: "Districts",
+        tags: ["tag1", "tag2"]
+    },
+    decorators: [
+        function (Story) { return (React.createElement("div", { style: { margin: 0, padding: 0 } },
+            React.createElement(Story, null))); },
+    ],
+};
+var EmptyStates_ = function (args) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(EmptyStates_1.EmptyStates, { preset: args.preset, contentTypeTitle: args.contentTypeTitle, tags: args.tags, onClick: function () { return window.alert("Action clicked"); } })));
+};
+exports.EmptyStates_ = EmptyStates_;

package/dist/stories/HomeCover.stories.d.ts

@@ -0,0 +1,55 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        export namespace title_1 {
+            let name: string;
+        }
+        export { title_1 as title };
+        export namespace subtitle {
+            let name_1: string;
+            export { name_1 as name };
+        }
+        export namespace desc {
+            let name_2: string;
+            export { name_2 as name };
+        }
+        export namespace variant {
+            let name_3: string;
+            export { name_3 as name };
+            export let options: string[];
+            export namespace mapping {
+                let Default: string;
+                let Small: string;
+            }
+            export namespace control {
+                let type: string;
+            }
+            export let defaultValue: string;
+        }
+        export namespace CTALink {
+            let name_4: string;
+            export { name_4 as name };
+        }
+        export namespace coverImagesConfig {
+            let name_5: string;
+            export { name_5 as name };
+        }
+    }
+    namespace args {
+        let title_2: string;
+        export { title_2 as title };
+        let subtitle_1: string;
+        export { subtitle_1 as subtitle };
+        let desc_1: string;
+        export { desc_1 as desc };
+        let variant_1: string;
+        export { variant_1 as variant };
+        let CTALink_1: string;
+        export { CTALink_1 as CTALink };
+        let coverImagesConfig_1: string[];
+        export { coverImagesConfig_1 as coverImagesConfig };
+    }
+}
+export default _default;
+export function HomeCover_(args: any): React.JSX.Element;
+import React from "react";

package/dist/stories/HomeCover.stories.js

@@ -0,0 +1,68 @@
+"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.HomeCover_ = void 0;
+var react_1 = __importDefault(require("react"));
+var HomeCover_1 = require("../components/HomeCover");
+var Typo_1 = require("../components/Typo");
+var Buttons_1 = require("../components/Buttons");
+exports.default = {
+    title: "Components/HomeCover",
+    argTypes: {
+        title: {
+            name: "Title"
+        },
+        subtitle: {
+            name: "Subtitle"
+        },
+        desc: {
+            name: "Description"
+        },
+        variant: {
+            name: "Size",
+            options: ['Default', 'Small'],
+            mapping: {
+                Default: 'default',
+                Small: 'small',
+            },
+            control: { type: 'inline-radio' },
+            defaultValue: 'Default'
+        },
+        CTALink: {
+            name: "CTA Link"
+        },
+        coverImagesConfig: {
+            name: "Conver Image",
+        }
+    },
+    args: {
+        title: "Sandmining Monitoring Platform",
+        subtitle: "By Ooloi Labs",
+        desc: "This is the master instance that houses all the features and functionalities of Ooloi's open knowledge platform at any given point in time",
+        variant: "Default",
+        CTALink: '#',
+        coverImagesConfig: [
+            "https://storage.googleapis.com/wqn_staging__media/staticImages/8961f0af-b52d-4bed-9284-1c520d58a433.jpeg",
+            "https://storage.googleapis.com/wqn_staging__media/staticImages/50f2058e-9fbc-4278-ad9b-b5c641fba6b6.jpeg",
+            "https://storage.googleapis.com/wqn_staging__media/staticImages/a7ac5704-164f-45cb-a400-433c216ea37a.jpeg",
+            "https://storage.googleapis.com/wqn_staging__media/staticImages/2e15f8de-420f-4d45-bfe1-380f081609f9.jpeg",
+        ],
+    },
+};
+var HomeCover_ = function (args) {
+    return react_1.default.createElement(HomeCover_1.HomeCover, __assign({}, args));
+};
+exports.HomeCover_ = HomeCover_;

package/dist/stories/IFrameInput.stories.d.ts

@@ -0,0 +1,32 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace readOnly {
+            let name: string;
+        }
+        namespace invert {
+            let name_1: string;
+            export { name_1 as name };
+        }
+        namespace placeholder {
+            let name_2: string;
+            export { name_2 as name };
+        }
+        namespace isRequired {
+            let name_3: string;
+            export { name_3 as name };
+        }
+    }
+    namespace args {
+        let placeholder_1: string;
+        export { placeholder_1 as placeholder };
+        let isRequired_1: boolean;
+        export { isRequired_1 as isRequired };
+        let readOnly_1: boolean;
+        export { readOnly_1 as readOnly };
+        let invert_1: boolean;
+        export { invert_1 as invert };
+    }
+}
+export default _default;
+export function IFrameInput_(args: any): import("react").JSX.Element;

package/dist/stories/IFrameInput.stories.js

@@ -0,0 +1,51 @@
+"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.IFrameInput_ = void 0;
+var themes_1 = require("../themes");
+var IFrameInput_1 = __importDefault(require("../components/IFrameInput"));
+var react_1 = require("react");
+var Wrappers_1 = require("../components/Wrappers");
+exports.default = {
+    title: "Components/IFrameInput",
+    argTypes: {
+        readOnly: {
+            name: "Read Only"
+        },
+        invert: {
+            name: "Invert"
+        },
+        placeholder: {
+            name: "Placeholder Text"
+        },
+        isRequired: {
+            name: "Required"
+        }
+    },
+    args: {
+        placeholder: "",
+        isRequired: false,
+        readOnly: false,
+        invert: false,
+    }
+};
+var IFrameInput_ = function (args) {
+    var _a = (0, react_1.useState)(undefined), value = _a[0], setValue = _a[1];
+    return (React.createElement("div", { style: { padding: '50px', background: args.invert ? themes_1.colors.greyColor100 : themes_1.colors.white } },
+        React.createElement(Wrappers_1.Wrapper700, null,
+            React.createElement(IFrameInput_1.default, __assign({ label: "IFrameInput", sublabel: "Paste any embadable link (PPT, iframe, etc.)", value: value, onChange: function (k, v) { return setValue(v); } }, args)))));
+};
+exports.IFrameInput_ = IFrameInput_;