oolib 2.208.0 → 2.208.1

package/dist/stories/Oolib/components/Checkbox.stories.js

@@ -1,249 +0,0 @@
-"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 };
-};
-var _a, _b;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = void 0;
-var react_1 = require("react");
-var RadioAndCheckbox_1 = require("../../../components/RadioAndCheckbox");
-var react_json_view_1 = __importDefault(require("react-json-view"));
-var Divider_1 = require("../../../components/Divider");
-var themes_1 = require("../../../themes");
-var greyColor100 = themes_1.colors.greyColor100;
-var ops = [
-    { value: "op1", display: "Squidward" },
-    { value: "op2", display: "Mohammed Ali" },
-    { value: "op3", display: "Patric" },
-    { value: "op4", display: "Mr krabs" },
-    { value: "op5", display: "Bob Marley" },
-    //{ value: 'other', display: "Other"},
-];
-exports.default = {
-    title: "Components/Checkbox",
-};
-var CheckboxList = function (args) {
-    var _a = (0, react_1.useState)([]), selectedOptions = _a[0], setSelectedOptions = _a[1];
-    var _b = (0, react_1.useState)(ops), options = _b[0], setOptions = _b[1];
-    (0, react_1.useEffect)(function () {
-        setOptions(options.map(function (op, idx) {
-            var argsText = args["option".concat(idx + 1)];
-            return argsText !== op.display ? __assign(__assign({}, op), { display: argsText }) : op;
-        }));
-    }, [args.option1, args.option2, args.option3, args.option4, args.option5]);
-    (0, react_1.useEffect)(function () {
-        setOptions(options.map(function (op) {
-            var userIncluded = args.correctOptions.includes(op.value);
-            if (op.isCorrect) {
-                return userIncluded ? op : __assign(__assign({}, op), { isCorrect: false });
-            }
-            else {
-                return userIncluded ? __assign(__assign({}, op), { isCorrect: true }) : op;
-            }
-        }));
-    }, [args.correctOptions]);
-    return (React.createElement("div", { style: { backgroundColor: args.invert && greyColor100, padding: '4rem' } },
-        React.createElement(RadioAndCheckbox_1.CheckboxList, { options: options, value: selectedOptions, onChange: function (id, val) { return setSelectedOptions(val); }, rightWrongResult: args.markOptions, listType: args.listingStyle, injectOtherOption: args.addOther, commonIsCorrectDesc: args.feedbackMessage, S: args.size == "S", readOnly: args.readOnly, label: args.label, disabled: args.disabled, invert: args.invert, inputStyle: args.inputStyle, optionsLimit: args.optionsLimit }),
-        React.createElement("br", null),
-        " ",
-        React.createElement(Divider_1.Divider, null),
-        " ",
-        React.createElement("br", null),
-        React.createElement("details", { style: { margin: "2rem 0" } },
-            React.createElement("summary", { style: { fontSize: "1.4rem", marginBottom: 10 } }, "Dev only area"),
-            React.createElement(react_json_view_1.default, { theme: "monokai", displayDataTypes: false, style: { fontSize: "1.3rem" }, name: "Value", src: selectedOptions }))));
-};
-exports.CheckboxList = CheckboxList;
-exports.CheckboxList.args = {
-    inputStyle: "Checkbox",
-    size: "Medium",
-    listingStyle: "horizontal",
-    addOther: false,
-    optionsLimit: ops.length,
-    option1: ops[0].display,
-    option2: ops[1].display,
-    option3: ops[2].display,
-    option4: ops[3].display,
-    option5: ops[4].display,
-    markOptions: false,
-    correctOptions: ops[3].value,
-    feedbackMessage: "Answer is shown, have a look",
-    disabled: false,
-    readOnly: false,
-    invert: false,
-};
-exports.CheckboxList.argTypes = {
-    correctOptions: {
-        name: "Correct Options",
-        control: { type: "inline-check" },
-        options: ops.map(function (op) { return op.value; }),
-    },
-    inputStyle: {
-        name: "Checkbox Type",
-        control: { type: "select" },
-        options: ["Checkbox", "Tag select"],
-        mapping: (_a = {},
-            _a["Tag select"] = "tagSelect",
-            _a.Checkbox = "checkbox",
-            _a),
-    },
-    addOther: {
-        name: "Add Other Option",
-    },
-    size: {
-        name: "Checkbox Size",
-        control: { type: "inline-radio" },
-        options: ["Small", "Medium"],
-        mapping: {
-            Small: "S",
-            Medium: "M",
-        },
-    },
-    listingStyle: {
-        name: "Listing Style",
-        control: { type: "select" },
-        options: ["horizontal", "vertical"],
-    },
-    optionsLimit: {
-        name: "Options Limit",
-        control: { type: "select" },
-        options: Array.from({ length: ops.length + 1 }, function (_, index) { return index; }),
-    },
-    feedbackMessage: {
-        name: "Feedback Message",
-        control: { type: "text" },
-    },
-    // label: {
-    //   control: { type: "text" },
-    // },
-    option1: {
-        name: "Option 1",
-        control: { type: "text" },
-    },
-    option2: {
-        name: "Option 2",
-        control: { type: "text" },
-    },
-    option3: {
-        name: "Option 3",
-        control: { type: "text" },
-    },
-    option4: {
-        name: "Option 4",
-        control: { type: "text" },
-    },
-    option5: {
-        name: "Option 5",
-        control: { type: "text" },
-    },
-    markOptions: {
-        name: "Mark Options",
-    },
-    disabled: {
-        name: "Disabled",
-    },
-    readOnly: {
-        name: "ReadOnly",
-    },
-    invert: {
-        name: "Invert",
-    },
-};
-var CheckboxInput = function (args) {
-    var _a = (0, react_1.useState)([]), value = _a[0], setValue = _a[1];
-    var _b = (0, react_1.useState)({ value: "smth", display: "Squidward" }), option = _b[0], setOption = _b[1];
-    (0, react_1.useEffect)(function () {
-        setOption(__assign(__assign({}, option), { display: args.option1 }));
-    }, [args.option1]);
-    (0, react_1.useEffect)(function () {
-        setOption(__assign(__assign({}, option), { isCorrect: args.optionIsCorrect }));
-    }, [args.optionIsCorrect]);
-    return (React.createElement("div", { style: {
-            padding: "4rem",
-            backgroundColor: args.invert ? greyColor100 : "unset",
-        } },
-        React.createElement(RadioAndCheckbox_1.CheckboxInput, __assign({}, args, { value: value, option: option, S: args.size == "S",
-            rightWrongResult: args.markOptions,
-            onClick: function (isSelected, option) { return setValue(isSelected ? [] : [option]); } }))));
-};
-exports.CheckboxInput = CheckboxInput;
-var CheckboxButton = function (args) {
-    var _a = (0, react_1.useState)(false), chosen = _a[0], setChosen = _a[1];
-    return (React.createElement("div", { style: {
-            padding: "4rem",
-            backgroundColor: args.invert ? greyColor100 : "unset",
-        } },
-        React.createElement(RadioAndCheckbox_1.CheckboxButton, __assign({}, args, { isSelected: chosen, onChange: function (k, v) { return setChosen(v); }, S: args.size === "S" }))));
-};
-exports.CheckboxButton = CheckboxButton;
-var commonExcluded = [
-    "option2",
-    "option3",
-    "option4",
-    "option5",
-    "correctOptions",
-    "listingStyle",
-    "label",
-    "feedbackMessage",
-    "optionsLimit",
-    "addOther",
-    "readOnly",
-];
-exports.CheckboxInput.args = {
-    inputStyle: 'Checkbox',
-    option1: ops[0].display,
-    markOptions: false,
-    optionIsCorrect: false,
-    invert: false
-};
-exports.CheckboxInput.argTypes = {
-    optionIsCorrect: {
-        name: 'Option is Correct'
-    },
-    option1: {
-        name: 'Option 1'
-    },
-    markOptions: {
-        name: "Mark Options"
-    },
-    inputStyle: {
-        name: "Checkbox Type",
-        control: { type: "select" },
-        options: ["Checkbox", "Tag select"],
-        mapping: (_b = {},
-            _b["Tag select"] = "tagSelect",
-            _b.Checkbox = "checkbox",
-            _b),
-    },
-    invert: {
-        name: "Invert",
-    },
-};
-exports.CheckboxInput.parameters = {
-    controls: { exclude: commonExcluded },
-};
-exports.CheckboxButton.parameters = {
-    controls: {
-        exclude: __spreadArray(__spreadArray([], commonExcluded, true), ["option1", "markOptions", "inputStyle"], false),
-    },
-};

package/dist/stories/Oolib/components/Dropdowns.stories.d.ts

@@ -1,127 +0,0 @@
-declare namespace _default {
-    let title: string;
-    namespace argTypes {
-        namespace placeholder {
-            let name: string;
-        }
-        namespace optionIcon {
-            export { availableIcons as options };
-            export namespace control {
-                let type: string;
-            }
-        }
-        namespace selection {
-            let name_1: string;
-            export { name_1 as name };
-            export let options: string[];
-            export namespace control_1 {
-                let type_1: string;
-                export { type_1 as type };
-            }
-            export { control_1 as control };
-        }
-        namespace size {
-            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 };
-            let options_1: string[];
-            export { options_1 as options };
-            export namespace mapping {
-                let Small: string;
-                let Medium: string;
-            }
-        }
-        namespace isSearchable {
-            let name_3: string;
-            export { name_3 as name };
-        }
-        namespace showIconInSelectArea {
-            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 colors {
-            let name_7: string;
-            export { name_7 as name };
-        }
-        namespace disabled {
-            let name_8: string;
-            export { name_8 as name };
-        }
-        namespace readOnly {
-            let name_9: string;
-            export { name_9 as name };
-        }
-        namespace invert {
-            let name_10: string;
-            export { name_10 as name };
-        }
-        namespace showColorInSelectArea {
-            let name_11: string;
-            export { name_11 as name };
-        }
-        namespace alignDropdown {
-            let name_12: string;
-            export { name_12 as name };
-            let options_2: string[];
-            export { options_2 as options };
-            export namespace control_3 {
-                let type_3: string;
-                export { type_3 as type };
-            }
-            export { control_3 as control };
-        }
-    }
-    namespace args {
-        let placeholder_1: string;
-        export { placeholder_1 as placeholder };
-        let size_1: string;
-        export { size_1 as size };
-        let selection_1: string;
-        export { selection_1 as selection };
-        let isSearchable_1: boolean;
-        export { isSearchable_1 as isSearchable };
-        let optionDescription_1: string;
-        export { optionDescription_1 as optionDescription };
-        let optionImage_1: string;
-        export { optionImage_1 as optionImage };
-        let optionIcon_1: any;
-        export { optionIcon_1 as optionIcon };
-        let showIconInSelectArea_1: boolean;
-        export { showIconInSelectArea_1 as showIconInSelectArea };
-        let colors_1: boolean;
-        export { colors_1 as colors };
-        let showColorInSelectArea_1: boolean;
-        export { showColorInSelectArea_1 as showColorInSelectArea };
-        let disabled_1: boolean;
-        export { disabled_1 as disabled };
-        let readOnly_1: boolean;
-        export { readOnly_1 as readOnly };
-        let invert_1: boolean;
-        export { invert_1 as invert };
-        export let popOutOfOverflowHiddenParent: boolean;
-        let alignDropdown_1: string;
-        export { alignDropdown_1 as alignDropdown };
-    }
-    namespace parameters {
-        namespace docs {
-            export { DropdownDocs as page };
-        }
-    }
-}
-export default _default;
-export function Dropdowns(args: any): React.JSX.Element;
-declare const availableIcons: string[];
-import DropdownDocs from "./Dropdowns.mdx";
-import React from "react";

package/dist/stories/Oolib/components/Dropdowns.stories.js

@@ -1,298 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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");
-// import { faker } from '@faker-js/faker';
-// const generateRandomCountry = () => ({
-//   display: faker.address.country(),
-//   value: faker.address.countryCode().toLowerCase(),
-// });
-// const generateDropdownOptions = (length) => {
-//   const dropdownOptions = [];
-//   for (let i = 0; i < length; i++) {
-//     dropdownOptions.push(generateRandomCountry());
-//   }
-//   return dropdownOptions;
-// };
-// const 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"
-        },
-        alignDropdown: {
-            name: "Align Dropdown",
-            options: ["left", "right"],
-            control: { type: "select" }
-        },
-    },
-    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,
-        popOutOfOverflowHiddenParent: false,
-        alignDropdown: "left",
-    },
-    parameters: {
-        docs: {
-            page: Dropdowns_mdx_1.default,
-        },
-    },
-};
-var dropdownOptions = [
-    {
-        display: "Option ",
-        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 = dropdownOptions.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: dropdownOptions.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", popOutOfOverflowHiddenParent: args.popOutOfOverflowHiddenParent }))),
-            react_1.default.createElement("div", { style: { height: '1000px', background: 'red' } }))));
-};
-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'] } }