oolib 2.110.1 → 2.111.0

package/dist/stories/Switches.stories.d.ts

@@ -0,0 +1,106 @@
+declare namespace _default {
+    let title: string;
+    let argTypes: {};
+}
+export default _default;
+export function SwitchDouble(args: any): React.JSX.Element;
+export namespace SwitchDouble {
+    export namespace args {
+        let rightOption: string;
+        let leftOption: string;
+        let disabled: boolean;
+        let invert: boolean;
+        let saveValueAsString: boolean;
+    }
+    export namespace argTypes_1 {
+        export namespace layoutStyle {
+            let options: string[];
+            namespace control {
+                let type: string;
+            }
+            let defaultValue: string;
+        }
+        export namespace rightOption_1 {
+            let name: string;
+        }
+        export { rightOption_1 as rightOption };
+        export namespace leftOption_1 {
+            let name_1: string;
+            export { name_1 as name };
+        }
+        export { leftOption_1 as leftOption };
+        export namespace invert_1 {
+            let name_2: string;
+            export { name_2 as name };
+        }
+        export { invert_1 as invert };
+        export namespace disabled_1 {
+            let name_3: string;
+            export { name_3 as name };
+        }
+        export { disabled_1 as disabled };
+    }
+    export { argTypes_1 as argTypes };
+    export namespace parameters {
+        namespace controls {
+            let exclude: string[];
+        }
+    }
+}
+export function SwitchSingle(args: any): React.JSX.Element;
+export namespace SwitchSingle {
+    export namespace parameters_1 {
+        export namespace controls_1 {
+            let exclude_1: string[];
+            export { exclude_1 as exclude };
+        }
+        export { controls_1 as controls };
+    }
+    export { parameters_1 as parameters };
+    export namespace args_1 {
+        let rightOption_2: string;
+        export { rightOption_2 as rightOption };
+        let layoutStyle_1: string;
+        export { layoutStyle_1 as layoutStyle };
+        let disabled_2: boolean;
+        export { disabled_2 as disabled };
+        let invert_2: boolean;
+        export { invert_2 as invert };
+        let saveValueAsString_1: boolean;
+        export { saveValueAsString_1 as saveValueAsString };
+    }
+    export { args_1 as args };
+    export namespace argTypes_2 {
+        export namespace layoutStyle_2 {
+            let name_4: string;
+            export { name_4 as name };
+            let options_1: string[];
+            export { options_1 as options };
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+            let defaultValue_1: string;
+            export { defaultValue_1 as defaultValue };
+        }
+        export { layoutStyle_2 as layoutStyle };
+        export namespace rightOption_3 {
+            let name_5: string;
+            export { name_5 as name };
+        }
+        export { rightOption_3 as rightOption };
+        export namespace invert_3 {
+            let name_6: string;
+            export { name_6 as name };
+        }
+        export { invert_3 as invert };
+        export namespace disabled_3 {
+            let name_7: string;
+            export { name_7 as name };
+        }
+        export { disabled_3 as disabled };
+    }
+    export { argTypes_2 as argTypes };
+}
+import React from 'react';

package/dist/stories/Switches.stories.js

@@ -0,0 +1,136 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchSingle = exports.SwitchDouble = void 0;
+var react_1 = __importStar(require("react"));
+var react_json_view_1 = __importDefault(require("react-json-view"));
+var Switches_1 = require("../components/Switches");
+var themes_1 = require("../themes");
+exports.default = {
+    title: 'Components/Switches',
+    argTypes: {
+    // shape: {
+    //   name: "Shape",
+    //   options: ['circle', 'square'],
+    //   control: { type: 'inline-radio' },
+    //   defaultValue: 'circle'
+    // },
+    },
+};
+var showJSON = function (display, data) {
+    return react_1.default.createElement(react_json_view_1.default
+    // theme="monokai"
+    , { 
+        // theme="monokai"
+        name: display, src: data, displayDataTypes: false, enableClipboard: false, quotesOnKeys: false });
+};
+var SwitchDouble = function (args) {
+    var options = [
+        { display: args.leftOption, value: 1 },
+        { display: args.rightOption, value: 2 }
+    ];
+    var _a = (0, react_1.useState)(args.saveValueAsString ? options[0].value : options[0]), value = _a[0], setValue = _a[1];
+    (0, react_1.useEffect)(function () {
+        setValue(args.saveValueAsString ? options[0].value : options[0]);
+    }, [args.saveValueAsString]);
+    return (react_1.default.createElement("div", { style: { background: args.invert ? '#383838' : '', padding: '4rem 4rem' } },
+        react_1.default.createElement(Switches_1.SwitchDouble, { invert: args.invert, shape: args.shape, saveValueAsString: args.saveValueAsString, disabled: args.disabled, options: options, value: value, onChange: function (id, newVal) { return setValue(newVal); } }),
+        react_1.default.createElement("div", { style: { padding: '2rem', position: 'fixed', top: 0, right: 0 } },
+            showJSON('VALUE', { value: value }),
+            showJSON('OPTIONS', options))));
+};
+exports.SwitchDouble = SwitchDouble;
+exports.SwitchDouble.args = {
+    rightOption: 'right option',
+    leftOption: 'left Option',
+    disabled: false,
+    invert: false,
+    saveValueAsString: true,
+};
+exports.SwitchDouble.argTypes = {
+    layoutStyle: {
+        options: ['style1', 'style2'],
+        control: { type: 'inline-radio' },
+        defaultValue: 'style1'
+    },
+    rightOption: {
+        name: 'Right option'
+    },
+    leftOption: {
+        name: "Left Option"
+    },
+    invert: {
+        name: "Invert"
+    },
+    disabled: {
+        name: "Disabled"
+    }
+};
+exports.SwitchDouble.parameters = {
+    controls: { exclude: ['layoutStyle'] }
+};
+var SwitchSingle = function (args) {
+    var option = { display: args.rightOption, value: 1 };
+    var _a = (0, react_1.useState)(args.saveValueAsString ? option.value : option), value = _a[0], setValue = _a[1];
+    (0, react_1.useEffect)(function () {
+        setValue(args.saveValueAsString ? option.value : option);
+    }, [args.saveValueAsString]);
+    return (react_1.default.createElement("div", { style: { background: args.invert ? '#383838' : '', padding: '4rem 4rem' } },
+        react_1.default.createElement(Switches_1.SwitchSingle, { invert: args.invert, shape: args.shape, layoutStyle: args.layoutStyle, saveValueAsString: args.saveValueAsString, disabled: args.disabled, option: option, value: value, onChange: function (id, newVal) { return setValue(newVal); } }),
+        react_1.default.createElement("div", { style: { padding: '2rem', paddingTop: '3rem', marginTop: '3rem', borderTop: "1px solid ".concat(themes_1.colors.greyColor15) } },
+            showJSON('VALUE', { value: value }),
+            showJSON('OPTIONS', option))));
+};
+exports.SwitchSingle = SwitchSingle;
+exports.SwitchSingle.parameters = {
+    controls: { exclude: ['leftOption'] }
+};
+exports.SwitchSingle.args = {
+    rightOption: 'right option',
+    layoutStyle: 'style1',
+    disabled: false,
+    invert: false,
+    saveValueAsString: true,
+};
+exports.SwitchSingle.argTypes = {
+    layoutStyle: {
+        name: "Layout Style",
+        options: ['style1', 'style2'],
+        control: { type: 'select' },
+        defaultValue: 'style1'
+    },
+    rightOption: {
+        name: 'Text'
+    },
+    invert: {
+        name: "Invert"
+    },
+    disabled: {
+        name: "Disabled"
+    }
+};

package/dist/stories/TabBar.stories.d.ts

@@ -0,0 +1,73 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace tabBarStyle {
+            let name: string;
+            let options: string[];
+            namespace mapping {
+                let Primary: string;
+                let Secondary: string;
+            }
+            namespace control {
+                let type: string;
+            }
+        }
+        namespace color {
+            let name_1: string;
+            export { name_1 as name };
+            let options_1: string[];
+            export { options_1 as options };
+            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 };
+            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 namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        namespace errorTabs {
+            let name_3: string;
+            export { name_3 as name };
+            let options_3: string[];
+            export { options_3 as options };
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+        namespace changeWidth {
+            let name_4: string;
+            export { name_4 as name };
+        }
+    }
+    namespace args {
+        let tabBarStyle_1: string;
+        export { tabBarStyle_1 as tabBarStyle };
+        let size_1: string;
+        export { size_1 as size };
+        let color_1: string;
+        export { color_1 as color };
+        let changeWidth_1: boolean;
+        export { changeWidth_1 as changeWidth };
+        let errorTabs_1: string;
+        export { errorTabs_1 as errorTabs };
+    }
+}
+export default _default;
+export function TabBar_(args: any): React.JSX.Element;
+import React from "react";

package/dist/stories/TabBar.stories.js

@@ -0,0 +1,103 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabBar_ = void 0;
+var react_1 = __importStar(require("react"));
+var TabBars = __importStar(require("../components/TabBar"));
+exports.default = {
+    title: "Components/TabBar",
+    argTypes: {
+        tabBarStyle: {
+            name: "Tab Bar Style",
+            options: ["Primary", "Secondary"],
+            mapping: {
+                Primary: '1',
+                Secondary: '2',
+            },
+            control: { type: "select" },
+        },
+        color: {
+            name: "Color",
+            options: ['blue', "black"],
+            control: { type: 'inline-radio' },
+            // if: { arg: 'tabBarStyle', eq: 'Primary' },
+        },
+        size: {
+            name: "Size",
+            options: ['Small', 'Medium'],
+            mapping: {
+                Small: 'S',
+                Medium: 'M',
+            },
+            control: { type: 'inline-radio' },
+        },
+        errorTabs: {
+            name: "Error Tabs",
+            options: ['value1', 'value2', 'value3'],
+            control: { type: 'inline-check' },
+        },
+        changeWidth: {
+            name: "Change Width"
+        }
+    },
+    args: {
+        tabBarStyle: "Primary",
+        size: "Medium",
+        color: "blue",
+        changeWidth: false,
+        errorTabs: "",
+    }
+};
+var TabBar_ = function (args) {
+    var options = [
+        { display: "display 1", value: "value1" },
+        { display: "display 2", value: "value2" },
+        { display: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", value: "value3" },
+        { display: "display 3", value: "value4" },
+        { display: "display 4", value: "value5" },
+        { display: "display 5", value: "value6" },
+        { display: "display 6", value: "value7" },
+    ];
+    var errorTabs = args.errorTabs && options.filter(function (op) { return args.errorTabs.includes(op.value); });
+    var _a = (0, react_1.useState)(options[0]), active = _a[0], setActive = _a[1];
+    args.options = options;
+    args.value = active;
+    args.onChange = function (id, value) { return setActive(value); };
+    return (react_1.default.createElement("div", { style: { width: !args.changeWidth ? '' : '400px' } }, args.tabBarStyle === '2'
+        ? react_1.default.createElement(TabBars.TabBarStyle2, __assign({}, args, { errorTabs: errorTabs }))
+        : react_1.default.createElement(TabBars.TabBarStyle1, __assign({}, args, { errorTabs: errorTabs, black: args.color === "black" ? true : false }))));
+};
+exports.TabBar_ = TabBar_;

package/dist/stories/TagClear.stories.d.ts

@@ -0,0 +1,57 @@
+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 grey {
+            let name_2: string;
+            export { name_2 as name };
+        }
+        namespace id {
+            let name_3: string;
+            export { name_3 as name };
+        }
+        namespace invert {
+            let name_4: string;
+            export { name_4 as name };
+        }
+    }
+    namespace args {
+        let display_1: string;
+        export { display_1 as display };
+        let size_1: string;
+        export { size_1 as size };
+        export let value: string;
+        let id_1: string;
+        export { id_1 as id };
+        let grey_1: boolean;
+        export { grey_1 as grey };
+        let invert_1: boolean;
+        export { invert_1 as invert };
+    }
+}
+export default _default;
+export function Tag_Clear_Primary(args: any): import("react").JSX.Element;
+export function Tag_Clear_Secondary(args: any): import("react").JSX.Element;
+export function Tag_Clear_Ghost(args: any): import("react").JSX.Element;
+export namespace Tag_Clear_Ghost {
+    namespace parameters {
+        namespace controls {
+            let exclude: string[];
+        }
+    }
+}

package/dist/stories/TagClear.stories.js

@@ -0,0 +1,76 @@
+"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_Clear_Ghost = exports.Tag_Clear_Secondary = exports.Tag_Clear_Primary = void 0;
+var Tags_1 = require("../components/Tags");
+exports.default = {
+    title: 'Components/Tag Clear',
+    argTypes: {
+        display: {
+            name: "Text",
+        },
+        size: {
+            name: "Size",
+            options: ['ExtraSmall', 'Small', 'Medium'],
+            mapping: {
+                ExtraSmall: 'XS',
+                Small: 'S',
+                Medium: 'M',
+            },
+            control: { type: 'inline-radio' },
+        },
+        grey: {
+            name: "Grey",
+        },
+        id: {
+            name: "Id",
+        },
+        invert: {
+            name: "Invert"
+        },
+    },
+    args: {
+        display: 'Text',
+        size: "Small",
+        value: 'text',
+        id: 'tags',
+        grey: false,
+        invert: false,
+    },
+};
+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(Comp, __assign({}, args, { variant: variant }))));
+};
+var Tag_Clear_Primary = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagClear });
+};
+exports.Tag_Clear_Primary = Tag_Clear_Primary;
+var Tag_Clear_Secondary = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagClear, variant: "secondary" });
+};
+exports.Tag_Clear_Secondary = Tag_Clear_Secondary;
+var Tag_Clear_Ghost = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagClear, variant: "ghost" });
+};
+exports.Tag_Clear_Ghost = Tag_Clear_Ghost;
+exports.Tag_Clear_Ghost.parameters = {
+    controls: {
+        exclude: ['invert', 'grey'],
+    },
+};

package/dist/stories/TagDisplay.stories.d.ts

@@ -0,0 +1,73 @@
+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 tagColor {
+            let name_2: string;
+            export { name_2 as name };
+            export { availableColors as options };
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        namespace textColor {
+            let name_3: string;
+            export { name_3 as name };
+            export { availableColors as options };
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        namespace value {
+            let name_4: string;
+            export { name_4 as name };
+        }
+        namespace invert {
+            let name_5: string;
+            export { name_5 as name };
+        }
+        namespace id {
+            let name_6: string;
+            export { name_6 as name };
+        }
+    }
+    namespace args {
+        let display_1: string;
+        export { display_1 as display };
+        let size_1: string;
+        export { size_1 as size };
+        let value_1: string;
+        export { value_1 as value };
+        let id_1: string;
+        export { id_1 as id };
+        let tagColor_1: string;
+        export { tagColor_1 as tagColor };
+        let textColor_1: string;
+        export { textColor_1 as textColor };
+        let invert_1: boolean;
+        export { invert_1 as invert };
+    }
+}
+export default _default;
+export function Tag_Display_Primary(args: any): import("react").JSX.Element;
+export function Tag_Display_Secondary(args: any): import("react").JSX.Element;
+declare const availableColors: string[];