oolib 2.110.1 → 2.111.0

package/dist/stories/BlockLabel.stories.js

@@ -0,0 +1,106 @@
+"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.Block_Label = void 0;
+var BlockLabel_1 = require("../components/BlockLabel");
+var themes_1 = require("../themes");
+exports.default = {
+    title: "Components/BlockLabel",
+    argTypes: {
+        label: {
+            name: "Label",
+        },
+        sublabel: {
+            name: "Sub Label",
+        },
+        showHints: {
+            name: "Hints",
+        },
+        hintsTitle: {
+            name: "Hints Title",
+        },
+        hintsBtnLabel: {
+            name: "Hints button text",
+        },
+        // hintsSubtitle: {
+        //   name: "Hints Subtitle",
+        // },
+        infoTooltip: {
+            name: "Info Tooltip",
+        },
+        errorMessage: {
+            name: "Error Message",
+        },
+        isRequired: {
+            name: "Required",
+        },
+        readOnly: {
+            name: "Read Only",
+        },
+        invert: {
+            name: "Invert",
+        },
+        inputOnlyLabel: {},
+    },
+    args: {
+        label: "default label",
+        sublabel: "",
+        showHints: true,
+        hintsTitle: "Hints",
+        hintsBtnLabel: "Hints",
+        // hintsSubtitle: "",
+        infoTooltip: "",
+        errorMessage: "", //gets converted into the appropriate errorMsgs prop below
+        isRequired: false,
+        invert: false,
+        readOnly: false,
+        inputOnlyLabel: "Shows only if label is not defined. AND readOnly = true",
+    },
+};
+var dummyData1 = [
+    "आप इस व्यक्ति को कैसे जानते हैं?",
+    "वे कहाँ रहते हैं?",
+    "क्या आप हमें इस व्यक्ति के बारे में कोई एक छोटी सी घटना बता सकते हैं? इस से पाठक को इस व्यक्ति को समझने मे आसानी होगी।",
+    "आपकी इस व्यक्ति से पहचान कैसे हुई?",
+];
+var dummyData2 = [
+    "What do you want to write about this person?",
+    "What did this person do?",
+    "Why are you writing this story? What should we learn from it?",
+    "What do you want to write about this person?",
+    "What did this person do?",
+    "Why are you writing this story? What should we learn from it?",
+    "What do you want to write about this person?",
+    "What did this person do?",
+    "Why are you writing this story? What should we learn from it?",
+    "What do you want to write about this person?",
+];
+var Block_Label = function (args) {
+    // return () => {
+    // document.getElementsByTagName("body")[0].removeChild(hintsRootElem);
+    // };
+    var errorMsgs = args.errorMessage ? args.errorMessage.split(",") : undefined;
+    return (React.createElement("div", null,
+        React.createElement("div", { style: {
+                display: "flex",
+                justifyContent: "space-between",
+                position: "relative",
+                padding: "2rem",
+                backgroundColor: args.invert ? themes_1.colors.greyColor100 : "",
+            } },
+            React.createElement("div", { style: {
+                    backgroundColor: args.invert ? themes_1.colors.greyColor100 : "",
+                    padding: "10px",
+                } }, (React.createElement(BlockLabel_1.BlockLabel, __assign({ id: "hints_1", hints: args.showHints ? dummyData2 : "" }, args, { errorMsgs: errorMsgs }))) || "no label provided"))));
+};
+exports.Block_Label = Block_Label;

package/dist/stories/Breadcrumbs.stories.d.ts

@@ -0,0 +1,13 @@
+declare namespace _default {
+    let title: string;
+    namespace args {
+        let link1: string;
+        let link2: string;
+        let link3: string;
+        let link4: string;
+        let link5: string;
+        let invert: boolean;
+    }
+}
+export default _default;
+export function Breadcrumbs(args: any): import("react").JSX.Element;

package/dist/stories/Breadcrumbs.stories.js

@@ -0,0 +1,34 @@
+"use strict";
+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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumbs = void 0;
+var Breadcrumbs_1 = require("../components/Breadcrumbs");
+exports.default = {
+    title: "Components/Breadcrumbs",
+    args: {
+        link1: 'Home',
+        link2: 'Stories Listing',
+        link3: 'Aanganwadi & Nutrition Meet',
+        link4: '',
+        link5: '',
+        invert: false,
+    }
+};
+var Breadcrumbs = function (args) {
+    var links = [args.link1, args.link2, args.link3, args.link4, args.link5].reduce(function (linksArr, link) {
+        if (!link)
+            return linksArr;
+        return __spreadArray(__spreadArray([], linksArr, true), [{ to: "/", display: link }], false);
+    }, []);
+    return (React.createElement("div", { style: { background: args.invert && "#383838" } },
+        React.createElement(Breadcrumbs_1.Breadcrumbs, { links: links, invert: args.invert })));
+};
+exports.Breadcrumbs = Breadcrumbs;

package/dist/stories/Button.stories.d.ts

@@ -0,0 +1,209 @@
+/// <reference types="mdx" />
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace size {
+            let name: string;
+            let options: string[];
+            namespace mapping {
+                let Small: string;
+                let Medium: string;
+            }
+            namespace control {
+                let type: string;
+            }
+        }
+        namespace icon {
+            let name_1: string;
+            export { name_1 as name };
+            export { availableIcons as options };
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+            export let defaultValue: string;
+        }
+        namespace iconAfter {
+            let name_2: string;
+            export { name_2 as name };
+            export { availableIcons as options };
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        namespace iconSize {
+            let name_3: string;
+            export { name_3 as name };
+            let options_1: string[];
+            export { options_1 as options };
+            export namespace mapping_1 {
+                let Small_1: string;
+                export { Small_1 as Small };
+                let Medium_1: string;
+                export { Medium_1 as Medium };
+            }
+            export { mapping_1 as mapping };
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+        namespace iconColor {
+            let name_4: string;
+            export { name_4 as name };
+            export { availableColors as options };
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+        }
+        namespace composition {
+            let name_5: string;
+            export { name_5 as name };
+            let options_2: string[];
+            export { options_2 as options };
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+            }
+            export { control_5 as control };
+            let defaultValue_1: string;
+            export { defaultValue_1 as defaultValue };
+        }
+        namespace variant {
+            let name_6: string;
+            export { name_6 as name };
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
+            }
+            export { control_6 as control };
+            let options_3: string[];
+            export { options_3 as options };
+            let defaultValue_2: string;
+            export { defaultValue_2 as defaultValue };
+        }
+        namespace children {
+            let name_7: string;
+            export { name_7 as name };
+        }
+        namespace invert {
+            let name_8: string;
+            export { name_8 as name };
+        }
+        namespace disabled {
+            let name_9: string;
+            export { name_9 as name };
+        }
+    }
+    namespace args {
+        let size_1: string;
+        export { size_1 as size };
+        let variant_1: string;
+        export { variant_1 as variant };
+        let composition_1: string;
+        export { composition_1 as composition };
+        let children_1: string;
+        export { children_1 as children };
+        let icon_1: string;
+        export { icon_1 as icon };
+        let iconAfter_1: any;
+        export { iconAfter_1 as iconAfter };
+        let iconSize_1: string;
+        export { iconSize_1 as iconSize };
+        let iconColor_1: any;
+        export { iconColor_1 as iconColor };
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
+        let invert_1: boolean;
+        export { invert_1 as invert };
+    }
+    namespace parameters {
+        namespace docs {
+            export { ButtonDocs as page };
+        }
+    }
+}
+export default _default;
+export function Button_Primary(args: any): React.JSX.Element;
+export namespace Button_Primary {
+    export namespace parameters_1 {
+        namespace controls {
+            let exclude: string[];
+        }
+    }
+    export { parameters_1 as parameters };
+}
+export function Button_Secondary(args: any): React.JSX.Element;
+export namespace Button_Secondary {
+    export namespace parameters_2 {
+        export namespace controls_1 {
+            let exclude_1: string[];
+            export { exclude_1 as exclude };
+        }
+        export { controls_1 as controls };
+    }
+    export { parameters_2 as parameters };
+    export namespace args_1 {
+        let active: boolean;
+    }
+    export { args_1 as args };
+}
+export function Button_Ghost(args: any): React.JSX.Element;
+export namespace Button_Ghost {
+    export namespace args_2 {
+        let active_1: boolean;
+        export { active_1 as active };
+    }
+    export { args_2 as args };
+    export namespace parameters_3 {
+        export namespace controls_2 {
+            let exclude_2: string[];
+            export { exclude_2 as exclude };
+        }
+        export { controls_2 as controls };
+    }
+    export { parameters_3 as parameters };
+}
+export function Button_Custom(args: any): React.JSX.Element;
+export namespace Button_Custom {
+    export namespace parameters_4 {
+        export namespace controls_3 {
+            let exclude_3: string[];
+            export { exclude_3 as exclude };
+        }
+        export { controls_3 as controls };
+    }
+    export { parameters_4 as parameters };
+}
+export function Google_Login(args: any): React.JSX.Element;
+export namespace Google_Login {
+    export namespace parameters_5 {
+        export namespace controls_4 {
+            let exclude_4: string[];
+            export { exclude_4 as exclude };
+        }
+        export { controls_4 as controls };
+    }
+    export { parameters_5 as parameters };
+}
+export function Upload_Button(args: any): React.JSX.Element;
+export namespace Upload_Button {
+    export namespace parameters_6 {
+        export namespace controls_5 {
+            let exclude_5: string[];
+            export { exclude_5 as exclude };
+        }
+        export { controls_5 as controls };
+    }
+    export { parameters_6 as parameters };
+}
+declare const availableIcons: string[];
+declare const availableColors: string[];
+import ButtonDocs from "./Buttons.mdx";
+import React from "react";

package/dist/stories/Button.stories.js

@@ -0,0 +1,164 @@
+"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.Upload_Button = exports.Google_Login = exports.Button_Custom = exports.Button_Ghost = exports.Button_Secondary = exports.Button_Primary = void 0;
+var react_1 = __importDefault(require("react"));
+var Buttons_1 = require("../components/Buttons");
+var Buttons_mdx_1 = __importDefault(require("./Buttons.mdx"));
+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/Buttons",
+    argTypes: {
+        size: {
+            name: "Button Size",
+            options: ["Small", "Medium"],
+            mapping: {
+                Small: "S",
+                Medium: "M",
+            },
+            control: { type: "inline-radio" },
+        },
+        icon: {
+            name: "Icon Before",
+            options: availableIcons,
+            control: { type: "select" },
+            defaultValue: "PencilSimple",
+        },
+        iconAfter: {
+            name: "Icon After",
+            options: availableIcons,
+            control: { type: "select" },
+        },
+        iconSize: {
+            name: "Icon Size",
+            options: ["Small", "Medium"],
+            mapping: {
+                Small: "S",
+                Medium: "M",
+            },
+            control: { type: "inline-radio" },
+        },
+        iconColor: {
+            name: "Icon Color",
+            options: availableColors,
+            control: { type: "select" },
+        },
+        composition: {
+            name: "Button Compostion",
+            options: ["Default", "Text-only", "Icon-only"],
+            control: { type: "select" },
+            defaultValue: "Default",
+        },
+        variant: {
+            name: "Button Type",
+            control: { type: "select" },
+            options: ["secondary", "primary", "ghost", "custom"],
+            defaultValue: "secondary",
+        },
+        children: {
+            name: "Text",
+        },
+        invert: {
+            name: "Invert",
+        },
+        disabled: {
+            name: "Disabled",
+        },
+    },
+    args: {
+        size: "Small",
+        variant: "secondary",
+        composition: "Default",
+        children: "Text",
+        icon: "PencilSimple",
+        iconAfter: undefined,
+        iconSize: "Small",
+        iconColor: undefined,
+        disabled: false,
+        invert: false,
+    },
+    parameters: {
+        docs: {
+            page: Buttons_mdx_1.default,
+        },
+    },
+};
+var GenButtonStory = function (_a) {
+    var args = _a.args, Comp = _a.Comp;
+    console.log(args.composition);
+    args[args["size"]] = true;
+    args[args["state"]] = true;
+    args.iconColor = themes_1.colors[args.iconColor];
+    args["onClick"] = function () { return console.log("clicked"); };
+    if (args.composition === "Text-only") {
+        delete args.icon;
+        delete args.iconAfter;
+    }
+    if (args.composition === "Icon-only") {
+        delete args["children"];
+    }
+    args["theme"] = {
+        colors: {
+            primaryColor40: "#addbff",
+            primaryColor100: "#33a4ff",
+            primaryColor10: "#EBF6FF",
+            primaryColorText: "#0071CC",
+        },
+    };
+    return (react_1.default.createElement("div", { style: {
+            backgroundColor: args.invert ? "#383838" : "",
+            padding: "20px",
+        } },
+        react_1.default.createElement(Comp, __assign({}, args))));
+};
+var Button_Primary = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonPrimary })); };
+exports.Button_Primary = Button_Primary;
+exports.Button_Primary.parameters = { controls: { exclude: ["variant", "color"] } };
+var Button_Secondary = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonSecondary })); };
+exports.Button_Secondary = Button_Secondary;
+exports.Button_Secondary.parameters = { controls: { exclude: ["variant", "color"] } };
+exports.Button_Secondary.args = {
+    active: false,
+};
+var Button_Ghost = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonGhost })); };
+exports.Button_Ghost = Button_Ghost;
+exports.Button_Ghost.args = {
+    active: false,
+};
+exports.Button_Ghost.parameters = { controls: { exclude: ["variant"] } };
+var Button_Custom = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonCustom })); };
+exports.Button_Custom = Button_Custom;
+exports.Button_Custom.parameters = { controls: { exclude: ["variant", "color"] } };
+var Google_Login = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.GoogleLogin })); };
+exports.Google_Login = Google_Login;
+exports.Google_Login.parameters = {
+    controls: { exclude: ["variant", "color", "iconOnly", "icon + text"] },
+};
+var Upload_Button = function (args) { return (react_1.default.createElement(GenButtonStory, { args: __assign(__assign({}, args), { children: "Upload" }), Comp: Buttons_1.UploadButton })); };
+exports.Upload_Button = Upload_Button;
+exports.Upload_Button.parameters = { controls: { exclude: ["color"] } };