oolib 2.110.0 → 2.111.0

package/dist/stories/TagDisplay.stories.js

@@ -0,0 +1,154 @@
+"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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag_Display_Secondary = exports.Tag_Display_Primary = void 0;
+var Tags_1 = require("../components/Tags");
+var themes_1 = require("../themes");
+var availableColors = __spreadArray([undefined], Object.keys(themes_1.colors).sort(), true);
+exports.default = {
+    title: "Components/Tag Display",
+    argTypes: {
+        display: {
+            name: "Text",
+        },
+        size: {
+            name: "Size",
+            options: ["ExtraSmall", "Small", "Medium"],
+            mapping: {
+                ExtraSmall: "XS",
+                Small: "S",
+                Medium: "M",
+            },
+            control: { type: "inline-radio" },
+        },
+        tagColor: {
+            name: "Tag Color",
+            options: availableColors,
+            control: { type: "select" },
+        },
+        textColor: {
+            name: "Text Color",
+            options: availableColors,
+            control: { type: "select" },
+        },
+        value: {
+            name: "Value"
+        },
+        invert: {
+            name: "Invert"
+        },
+        id: {
+            name: "Id"
+        }
+    },
+    args: {
+        display: "Some text here",
+        size: "Small",
+        value: "text",
+        id: "tags",
+        tagColor: "",
+        textColor: "",
+        invert: false,
+    },
+};
+var GenTag = function (_a) {
+    var args = _a.args, Comp = _a.Comp, variant = _a.variant;
+    args[args["size"]] = true;
+    args.tagColor = themes_1.colors[args.tagColor];
+    args.textColor = themes_1.colors[args.textColor];
+    return (React.createElement("div", { style: {
+            backgroundColor: args.invert ? "#383838" : "",
+            padding: "20px",
+        } },
+        React.createElement(Comp, __assign({}, args, { variant: variant }))));
+};
+var Tag_Display_Primary = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay });
+};
+exports.Tag_Display_Primary = Tag_Display_Primary;
+var Tag_Display_Secondary = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "secondary" });
+};
+exports.Tag_Display_Secondary = Tag_Display_Secondary;
+// export const Tag_Display_Secondary_Outline = (args) => {
+// 	return <GenTag args={args} Comp={TagDisplay}  color="#383838" variant="secondary" />
+// }
+// export const Tag_Primary = (args) => {
+// 	return <GenTag args={args} Comp={TagPrimary} />
+// }
+// Tag_Primary.parameters = {
+// 	controls: {
+// 		exclude: ['to', 'isSelected'],
+// 	},
+// }
+// export const Tag_Secondary = (args) => {
+// 	return <GenTag args={args} Comp={TagSecondary} />
+// }
+// Tag_Secondary.parameters = {
+// 	controls: {
+// 		exclude: ['to', 'isSelected'],
+// 	},
+// }
+// export const Tag_OutlinePrimary = (args) => {
+// 	return <GenTag args={args} Comp={TagOutlinePrimary} />
+// }
+// Tag_OutlinePrimary.parameters = {
+// 	controls: {
+// 		exclude: ['to', 'isSelected'],
+// 	},
+// }
+// export const Tag_OutlineSecondary = (args) => {
+// 	return <GenTag args={args} Comp={TagOutlineSecondary} />
+// }
+// Tag_OutlineSecondary.parameters = {
+// 	controls: {
+// 		exclude: ['to', 'isSelected'],
+// 	},
+// }
+// export const Tag_Select = (args) => {
+// 	return <GenTag args={args} Comp={TagSelect} />
+// }
+// Tag_Select.parameters = {
+// 	controls: {
+// 		exclude: ['onRemove', 'to'],
+// 	},
+// }
+// export const Tag_Clear = (args) => {
+// 	return <GenTag args={args} Comp={TagClear} />
+// }
+// Tag_Clear.parameters = {
+// 	controls: {
+// 		exclude: ['to', 'isSelected', 'invert', 'readOnly', 'size'],
+// 	},
+// }
+// export const Tag_Link = (args) => {
+// 	return (
+// 		<MemoryRouter>
+// 			<GenTag args={args} Comp={TagLink} />
+// 		</MemoryRouter>
+// 	)
+// }
+// Tag_Link.parameters = {
+// 	controls: {
+// 		exclude: ['onClick', 'isSelected', 'readOnly'],
+// 	},
+// }

package/dist/stories/TagLink.stories.d.ts

@@ -0,0 +1,59 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace display {
+            let name: string;
+        }
+        namespace value {
+            let name_1: string;
+            export { name_1 as name };
+        }
+        let invert: boolean;
+        namespace id {
+            let name_2: string;
+            export { name_2 as name };
+        }
+        namespace to {
+            let name_3: string;
+            export { name_3 as name };
+        }
+        namespace color {
+            let name_4: string;
+            export { name_4 as name };
+            export let options: string[];
+        }
+        namespace size {
+            let name_5: string;
+            export { name_5 as name };
+            let options_1: string[];
+            export { options_1 as options };
+            export namespace mapping {
+                let ExtraSmall: string;
+                let Small: string;
+                let Medium: string;
+            }
+            export namespace control {
+                let type: string;
+            }
+        }
+    }
+    namespace args {
+        let display_1: string;
+        export { display_1 as display };
+        let value_1: string;
+        export { value_1 as value };
+        let size_1: string;
+        export { size_1 as size };
+        let id_1: string;
+        export { id_1 as id };
+        let to_1: string;
+        export { to_1 as to };
+        let invert_1: boolean;
+        export { invert_1 as invert };
+        let color_1: any;
+        export { color_1 as color };
+    }
+}
+export default _default;
+export function Tag_Link_Primary(args: any): import("react").JSX.Element;
+export function Tag_Link_Secondary(args: any): import("react").JSX.Element;

package/dist/stories/TagLink.stories.js

@@ -0,0 +1,65 @@
+"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.Tag_Link_Secondary = exports.Tag_Link_Primary = void 0;
+var react_router_dom_1 = require("react-router-dom");
+var Tags_1 = require("../components/Tags");
+var themes_1 = require("../themes");
+exports.default = {
+    title: 'Components/Tag Link',
+    argTypes: {
+        display: { name: 'Text' },
+        value: { name: 'Value' },
+        invert: false,
+        id: { name: 'Id' },
+        to: { name: 'To' },
+        color: { name: "Color", options: ["red", "green", "black", 'default'] },
+        size: {
+            name: "Size",
+            options: ['ExtraSmall', 'Small', 'Medium'],
+            mapping: {
+                ExtraSmall: 'XS',
+                Small: 'S',
+                Medium: 'M',
+            },
+            control: { type: 'inline-radio' },
+        },
+    },
+    args: {
+        display: 'Text',
+        value: 'text',
+        size: 'Small',
+        id: 'tags',
+        to: '/tag',
+        invert: false,
+        color: undefined,
+    },
+};
+var GenTag = function (_a) {
+    var args = _a.args, Comp = _a.Comp, variant = _a.variant;
+    args[args['size']] = true;
+    return (React.createElement("div", { style: {
+            backgroundColor: args.invert ? '#383838' : '',
+            padding: '20px',
+        } },
+        React.createElement(react_router_dom_1.MemoryRouter, null,
+            React.createElement(Comp, __assign({}, args, { variant: variant })))));
+};
+var Tag_Link_Primary = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagLink });
+};
+exports.Tag_Link_Primary = Tag_Link_Primary;
+var Tag_Link_Secondary = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagLink, variant: "secondary" });
+};
+exports.Tag_Link_Secondary = Tag_Link_Secondary;

package/dist/stories/TagSelect.stories.d.ts

@@ -0,0 +1,41 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace display {
+            let name: string;
+        }
+        namespace size {
+            let name_1: string;
+            export { name_1 as name };
+            export let options: string[];
+            export namespace mapping {
+                let ExtraSmall: string;
+                let Small: string;
+                let Medium: string;
+            }
+            export namespace control {
+                let type: string;
+            }
+        }
+        namespace disabled {
+            let name_2: string;
+            export { name_2 as name };
+        }
+        namespace invert {
+            let name_3: string;
+            export { name_3 as name };
+        }
+    }
+    namespace args {
+        let display_1: string;
+        export { display_1 as display };
+        let size_1: string;
+        export { size_1 as size };
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
+        let invert_1: boolean;
+        export { invert_1 as invert };
+    }
+}
+export default _default;
+export function Tag_Select(args: any): import("react").JSX.Element;

package/dist/stories/TagSelect.stories.js

@@ -0,0 +1,54 @@
+"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.Tag_Select = void 0;
+var Tags_1 = require("../components/Tags");
+var themes_1 = require("../themes");
+var greyColor100 = themes_1.colors.greyColor100;
+exports.default = {
+    title: 'Components/Tag Select',
+    argTypes: {
+        display: { name: "Text" },
+        size: {
+            name: "Size",
+            options: ['ExtraSmall', 'Small', 'Medium'],
+            mapping: {
+                ExtraSmall: 'XS',
+                Small: 'S',
+                Medium: 'M',
+            },
+            control: { type: 'inline-radio' },
+        },
+        disabled: { name: "Disabled" },
+        invert: { name: "Invert" },
+    },
+    args: {
+        display: 'Text',
+        size: "Small",
+        disabled: false,
+        invert: false,
+    },
+};
+var GenTag = function (_a) {
+    var args = _a.args, Comp = _a.Comp;
+    args[args['size']] = true;
+    return (React.createElement("div", { style: {
+            padding: '20px',
+            backgroundColor: args.invert ? greyColor100 : 'unset'
+        } },
+        React.createElement(Comp, __assign({}, args, { value: "valueString", id: "mocha" }))));
+};
+var Tag_Select = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagSelect });
+};
+exports.Tag_Select = Tag_Select;

package/dist/stories/TagsInput.stories.d.ts

@@ -0,0 +1,90 @@
+/// <reference types="mdx" />
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace optionIcon {
+            export let name: string;
+            export { availableIcons as options };
+            export namespace control {
+                let type: string;
+            }
+            export let defaultValue: any;
+        }
+        namespace size {
+            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 };
+            export let options: string[];
+            let defaultValue_1: string;
+            export { defaultValue_1 as defaultValue };
+            export namespace mapping {
+                let Small: string;
+                let Medium: string;
+            }
+        }
+        namespace placeholder {
+            let name_2: string;
+            export { name_2 as name };
+        }
+        namespace invert {
+            let name_3: string;
+            export { name_3 as name };
+        }
+        namespace disabled {
+            let name_4: string;
+            export { name_4 as name };
+        }
+        namespace optionImage {
+            let name_5: string;
+            export { name_5 as name };
+        }
+        namespace optionDescription {
+            let name_6: string;
+            export { name_6 as name };
+        }
+        namespace readOnly {
+            let name_7: string;
+            export { name_7 as name };
+        }
+        namespace tagColor {
+            let name_8: string;
+            export { name_8 as name };
+            let options_1: string[];
+            export { options_1 as options };
+        }
+    }
+    namespace args {
+        let size_1: string;
+        export { size_1 as size };
+        let placeholder_1: string;
+        export { placeholder_1 as placeholder };
+        let optionImage_1: boolean;
+        export { optionImage_1 as optionImage };
+        let optionDescription_1: string;
+        export { optionDescription_1 as optionDescription };
+        let optionIcon_1: any;
+        export { optionIcon_1 as optionIcon };
+        let invert_1: boolean;
+        export { invert_1 as invert };
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
+        let readOnly_1: boolean;
+        export { readOnly_1 as readOnly };
+        let tagColor_1: any;
+        export { tagColor_1 as tagColor };
+    }
+    namespace parameters {
+        namespace docs {
+            export { TagsInputDocs as page };
+        }
+    }
+}
+export default _default;
+export function TagsInput(args: any): React.JSX.Element;
+declare const availableIcons: string[];
+import TagsInputDocs from './TagsInput.mdx';
+import React from 'react';

package/dist/stories/TagsInput.stories.js

@@ -0,0 +1,168 @@
+"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.TagsInput = void 0;
+var react_1 = __importStar(require("react"));
+var Container_1 = require("../components/Container");
+var DropdownMulti_1 = require("../components/Dropdowns/DropdownMulti");
+var Paddings_1 = require("../components/Paddings");
+var themes_1 = require("../themes");
+var TagsInput_mdx_1 = __importDefault(require("./TagsInput.mdx"));
+var icons_1 = require("../icons");
+var availableIcons = __spreadArray([undefined], Object.keys(icons_1.icons).sort(), true);
+exports.default = {
+    title: 'Components/TagsInput',
+    argTypes: {
+        optionIcon: {
+            name: "Option Icon",
+            options: availableIcons,
+            control: { type: "select" },
+            defaultValue: undefined,
+        },
+        size: {
+            name: "Size",
+            control: { type: 'inline-radio' },
+            options: ['Small', 'Medium'],
+            defaultValue: 'Medium',
+            mapping: {
+                Small: 'S',
+                Medium: 'M',
+            },
+        },
+        placeholder: {
+            name: "Placeholder"
+        },
+        invert: {
+            name: "Invert"
+        },
+        disabled: {
+            name: "Disabled"
+        },
+        optionImage: {
+            name: "Option Image"
+        },
+        optionDescription: {
+            name: "Option Description"
+        },
+        readOnly: {
+            name: "Read Only"
+        },
+        tagColor: {
+            name: "Tag Color",
+            options: ["red", "green", "black", 'default']
+        },
+    },
+    args: {
+        size: "M",
+        placeholder: '',
+        optionImage: false,
+        optionDescription: "",
+        optionIcon: undefined,
+        // label: 'This is a label',
+        // sublabel: 'This is a sub label',
+        invert: false,
+        disabled: false,
+        readOnly: false,
+        tagColor: undefined
+    },
+    parameters: {
+        docs: {
+            page: TagsInput_mdx_1.default,
+        },
+    },
+};
+var dropdownOptions = [
+    { display: 'India', value: 'india' },
+    { display: 'Sri Lanka', value: 'sriLanka' },
+    { display: 'Japan', value: 'japan' },
+    { display: 'Germany', value: 'germany' },
+    { display: 'USA', value: 'usa' },
+    { display: 'Columbia', value: 'columbia' },
+    { display: 'Brazil', value: 'brazil' },
+    { display: 'Australia', value: 'australia' }
+];
+var TagsInput = function (args) {
+    var _a = (0, react_1.useState)(undefined), val = _a[0], setVal = _a[1];
+    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(DropdownMulti_1.DropdownMulti, __assign({ isTagsStyle: true }, args, { S: args.size == "S", options: dropdownOptions.map(function (op) { return (__assign(__assign({}, op), { desc: args.optionDescription, icon: !args.optionImage && args.optionIcon, image: args.optionImage })); }), value: val, onChange: function (k, v) { return setVal(v); }, tagColor: args.tagColor }))))));
+};
+exports.TagsInput = TagsInput;
+// 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'] } }