oolib 2.175.3 → 2.175.4

package/dist/stories/v2/components/Checkbox.stories.d.ts

@@ -0,0 +1,252 @@
+declare namespace _default {
+    let title: string;
+}
+export default _default;
+export function CheckboxList(args: any): import("react").JSX.Element;
+export namespace CheckboxList {
+    namespace args {
+        let inputStyle: string;
+        let size: string;
+        let listingStyle: string;
+        let addOther: boolean;
+        let optionsLimit: number;
+        let option1: string;
+        let option2: string;
+        let option3: string;
+        let option4: string;
+        let option5: string;
+        let markOptions: boolean;
+        let correctOptions: string;
+        let feedbackMessage: string;
+        let disabled: boolean;
+        let readOnly: boolean;
+        let invert: boolean;
+    }
+    namespace argTypes {
+        export namespace correctOptions_1 {
+            let name: string;
+            namespace control {
+                let type: string;
+            }
+            let options: string[];
+        }
+        export { correctOptions_1 as correctOptions };
+        export namespace inputStyle_1 {
+            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 };
+            let options_1: string[];
+            export { options_1 as options };
+            export let mapping: {
+                "Tag select": string;
+                Checkbox: string;
+            };
+        }
+        export { inputStyle_1 as inputStyle };
+        export namespace addOther_1 {
+            let name_2: string;
+            export { name_2 as name };
+        }
+        export { addOther_1 as addOther };
+        export namespace size_1 {
+            let name_3: string;
+            export { name_3 as name };
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+            let options_2: string[];
+            export { options_2 as options };
+            export namespace mapping_1 {
+                let Small: string;
+                let Medium: string;
+            }
+            export { mapping_1 as mapping };
+        }
+        export { size_1 as size };
+        export namespace listingStyle_1 {
+            let name_4: string;
+            export { name_4 as name };
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+            let options_3: string[];
+            export { options_3 as options };
+        }
+        export { listingStyle_1 as listingStyle };
+        export namespace optionsLimit_1 {
+            let name_5: string;
+            export { name_5 as name };
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+            let options_4: number[];
+            export { options_4 as options };
+        }
+        export { optionsLimit_1 as optionsLimit };
+        export namespace feedbackMessage_1 {
+            let name_6: string;
+            export { name_6 as name };
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+            }
+            export { control_5 as control };
+        }
+        export { feedbackMessage_1 as feedbackMessage };
+        export namespace option1_1 {
+            let name_7: string;
+            export { name_7 as name };
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
+            }
+            export { control_6 as control };
+        }
+        export { option1_1 as option1 };
+        export namespace option2_1 {
+            let name_8: string;
+            export { name_8 as name };
+            export namespace control_7 {
+                let type_7: string;
+                export { type_7 as type };
+            }
+            export { control_7 as control };
+        }
+        export { option2_1 as option2 };
+        export namespace option3_1 {
+            let name_9: string;
+            export { name_9 as name };
+            export namespace control_8 {
+                let type_8: string;
+                export { type_8 as type };
+            }
+            export { control_8 as control };
+        }
+        export { option3_1 as option3 };
+        export namespace option4_1 {
+            let name_10: string;
+            export { name_10 as name };
+            export namespace control_9 {
+                let type_9: string;
+                export { type_9 as type };
+            }
+            export { control_9 as control };
+        }
+        export { option4_1 as option4 };
+        export namespace option5_1 {
+            let name_11: string;
+            export { name_11 as name };
+            export namespace control_10 {
+                let type_10: string;
+                export { type_10 as type };
+            }
+            export { control_10 as control };
+        }
+        export { option5_1 as option5 };
+        export namespace markOptions_1 {
+            let name_12: string;
+            export { name_12 as name };
+        }
+        export { markOptions_1 as markOptions };
+        export namespace disabled_1 {
+            let name_13: string;
+            export { name_13 as name };
+        }
+        export { disabled_1 as disabled };
+        export namespace readOnly_1 {
+            let name_14: string;
+            export { name_14 as name };
+        }
+        export { readOnly_1 as readOnly };
+        export namespace invert_1 {
+            let name_15: string;
+            export { name_15 as name };
+        }
+        export { invert_1 as invert };
+    }
+}
+export function CheckboxInput(args: any): import("react").JSX.Element;
+export namespace CheckboxInput {
+    export namespace args_1 {
+        let inputStyle_2: string;
+        export { inputStyle_2 as inputStyle };
+        let option1_2: string;
+        export { option1_2 as option1 };
+        let markOptions_2: boolean;
+        export { markOptions_2 as markOptions };
+        export let optionIsCorrect: boolean;
+        let invert_2: boolean;
+        export { invert_2 as invert };
+    }
+    export { args_1 as args };
+    export namespace argTypes_1 {
+        export namespace optionIsCorrect_1 {
+            let name_16: string;
+            export { name_16 as name };
+        }
+        export { optionIsCorrect_1 as optionIsCorrect };
+        export namespace option1_3 {
+            let name_17: string;
+            export { name_17 as name };
+        }
+        export { option1_3 as option1 };
+        export namespace markOptions_3 {
+            let name_18: string;
+            export { name_18 as name };
+        }
+        export { markOptions_3 as markOptions };
+        export namespace inputStyle_3 {
+            let name_19: string;
+            export { name_19 as name };
+            export namespace control_11 {
+                let type_11: string;
+                export { type_11 as type };
+            }
+            export { control_11 as control };
+            let options_5: string[];
+            export { options_5 as options };
+            let mapping_2: {
+                "Tag select": string;
+                Checkbox: string;
+            };
+            export { mapping_2 as mapping };
+        }
+        export { inputStyle_3 as inputStyle };
+        export namespace invert_3 {
+            let name_20: string;
+            export { name_20 as name };
+        }
+        export { invert_3 as invert };
+    }
+    export { argTypes_1 as argTypes };
+    export namespace parameters {
+        namespace controls {
+            export { commonExcluded as exclude };
+        }
+    }
+}
+export function CheckboxButton(args: any): import("react").JSX.Element;
+export namespace CheckboxButton {
+    export namespace args_2 {
+        let isMixture: boolean;
+    }
+    export { args_2 as args };
+    export namespace parameters_1 {
+        export namespace controls_1 {
+            let exclude: string[];
+        }
+        export { controls_1 as controls };
+    }
+    export { parameters_1 as parameters };
+}
+declare const commonExcluded: string[];

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

@@ -0,0 +1,252 @@
+"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("../../../v2/components/RadioAndCheckbox");
+var react_json_view_1 = __importDefault(require("react-json-view"));
+var Divider_1 = require("../../../v2/components/Divider");
+var themes_1 = require("../../../v2/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: "Oolib V 2.0/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;
+exports.CheckboxButton.args = {
+    isMixture: true
+};
+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),
+    },
+};