oolib 2.110.1 → 2.111.0

package/dist/stories/ImageInput/ImageInput.stories.d.ts

@@ -0,0 +1,263 @@
+declare namespace _default {
+    let title: string;
+}
+export default _default;
+export namespace ImageInput {
+    let argTypes: Omit<{
+        containerShape: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        size: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        aspectRatio: {
+            name: string;
+            control: string;
+        };
+        defaultImageSpread: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        invert: {
+            name: string;
+            control: string;
+        };
+        dropzoneLabel: {
+            name: string;
+            control: string;
+        };
+        dropzoneLabelMultiple: {
+            name: string;
+            control: string;
+        };
+        dropzoneSublabel: {
+            name: string;
+            control: string;
+            if: {
+                arg: string;
+                neq: string;
+            };
+        };
+        readOnly: {
+            name: string;
+            control: string;
+        };
+        sizeProfile: {
+            name: string;
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        imageTitle: {
+            name: string;
+            control: string;
+        };
+        optionalLabel: {
+            name: string;
+            type: string;
+        };
+        enableCaptions: {
+            name: string;
+            type: string;
+        };
+    }, "imageTitle" | "dropzoneLabelMultiple" | "sizeProfile">;
+    let args: Omit<{
+        containerShape: string;
+        size: string;
+        optionalLabel: boolean;
+        enableCaptions: boolean;
+        aspectRatio: string;
+        defaultImageSpread: string;
+        dropzoneLabel: string;
+        dropzoneSublabel: string;
+        dropzoneLabelMultiple: string;
+        sizeProfile: number;
+        imageTitle: string;
+        readOnly: boolean;
+        invert: boolean;
+    }, "imageTitle" | "dropzoneLabelMultiple" | "sizeProfile">;
+    function render(args: any): React.JSX.Element;
+}
+export namespace ImageGallery {
+    let argTypes_1: Omit<{
+        containerShape: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        size: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        aspectRatio: {
+            name: string;
+            control: string;
+        };
+        defaultImageSpread: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        invert: {
+            name: string;
+            control: string;
+        };
+        dropzoneLabel: {
+            name: string;
+            control: string;
+        };
+        dropzoneLabelMultiple: {
+            name: string;
+            control: string;
+        };
+        dropzoneSublabel: {
+            name: string;
+            control: string;
+            if: {
+                arg: string;
+                neq: string;
+            };
+        };
+        readOnly: {
+            name: string;
+            control: string;
+        };
+        sizeProfile: {
+            name: string;
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        imageTitle: {
+            name: string;
+            control: string;
+        };
+        optionalLabel: {
+            name: string;
+            type: string;
+        };
+        enableCaptions: {
+            name: string;
+            type: string;
+        };
+    }, "dropzoneLabel" | "imageTitle" | "sizeProfile">;
+    export { argTypes_1 as argTypes };
+    let args_1: Omit<{
+        containerShape: string;
+        size: string;
+        optionalLabel: boolean;
+        enableCaptions: boolean;
+        aspectRatio: string;
+        defaultImageSpread: string;
+        dropzoneLabel: string;
+        dropzoneSublabel: string;
+        dropzoneLabelMultiple: string;
+        sizeProfile: number;
+        imageTitle: string;
+        readOnly: boolean;
+        invert: boolean;
+    }, "dropzoneLabel" | "imageTitle" | "sizeProfile">;
+    export { args_1 as args };
+    export function render_1(args: any): React.JSX.Element;
+    export { render_1 as render };
+}
+export namespace ProfileImageInput {
+    let argTypes_2: Omit<{
+        containerShape: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        size: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        aspectRatio: {
+            name: string;
+            control: string;
+        };
+        defaultImageSpread: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        invert: {
+            name: string;
+            control: string;
+        };
+        dropzoneLabel: {
+            name: string;
+            control: string;
+        };
+        dropzoneLabelMultiple: {
+            name: string;
+            control: string;
+        };
+        dropzoneSublabel: {
+            name: string;
+            control: string;
+            if: {
+                arg: string;
+                neq: string;
+            };
+        };
+        readOnly: {
+            name: string;
+            control: string;
+        };
+        sizeProfile: {
+            name: string;
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        imageTitle: {
+            name: string;
+            control: string;
+        };
+        optionalLabel: {
+            name: string;
+            type: string;
+        };
+        enableCaptions: {
+            name: string;
+            type: string;
+        };
+    }, "size" | "aspectRatio" | "enableCaptions" | "defaultImageSpread" | "containerShape" | "dropzoneLabel" | "dropzoneSublabel" | "dropzoneLabelMultiple" | "optionalLabel">;
+    export { argTypes_2 as argTypes };
+    let args_2: Omit<{
+        containerShape: string;
+        size: string;
+        optionalLabel: boolean;
+        enableCaptions: boolean;
+        aspectRatio: string;
+        defaultImageSpread: string;
+        dropzoneLabel: string;
+        dropzoneSublabel: string;
+        dropzoneLabelMultiple: string;
+        sizeProfile: number;
+        imageTitle: string;
+        readOnly: boolean;
+        invert: boolean;
+    }, "size" | "aspectRatio" | "enableCaptions" | "defaultImageSpread" | "containerShape" | "dropzoneLabel" | "dropzoneSublabel" | "dropzoneLabelMultiple" | "optionalLabel">;
+    export { args_2 as args };
+    export function render_2(args: any): React.JSX.Element;
+    export { render_2 as render };
+}
+import React from "react";

package/dist/stories/ImageInput/ImageInput.stories.js

@@ -0,0 +1,167 @@
+"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.ProfileImageInput = exports.ImageGallery = exports.ImageInput = void 0;
+var react_1 = __importStar(require("react"));
+var Container_1 = require("../../components/Container");
+var Paddings_1 = require("../../components/Paddings");
+var ImageInput_1 = require("../../components/ImageInput");
+var ProfileImageInput_1 = require("../../components/ImageInput/derivedComps/ProfileImageInput");
+var themes_1 = require("../../themes");
+var imageInputArgTypes_1 = require("./imageInputArgTypes");
+var imageInputParseArgTypes_1 = require("./imageInputParseArgTypes");
+var genRandomHash_1 = require("../../utilsOolib/genRandomHash");
+var excludeKeys_1 = require("../../utilsOolib/excludeKeys");
+exports.default = {
+    title: "Components/ImageInput",
+};
+var ImageInput_ = function (args) {
+    var _a = (0, react_1.useState)(undefined), val = _a[0], setVal = _a[1];
+    var props = __assign(__assign({}, (0, imageInputParseArgTypes_1.imageInputParseArgTypes)({
+        args: args,
+    })), { value: val, onChange: function (k, v) { return setVal(v); } });
+    console.log({ value: val });
+    /**
+     * very important, in order to force the component to rerender
+     * when things like aspect ratio are changed.
+     * cuz natively, its not possible to modify the aspect ratio of
+     * an image input after it has rerendered.
+     * Hence this hack
+     */
+    var key = (0, genRandomHash_1.genRandomHash)(10);
+    return (react_1.default.createElement("div", { style: {
+            backgroundColor: props.invert ? themes_1.colors.greyColor100 : themes_1.colors.white,
+        } },
+        react_1.default.createElement(Container_1.Container, null,
+            react_1.default.createElement(Paddings_1.PaddingTopBottom30, null,
+                react_1.default.createElement("div", { style: { width: props.size } },
+                    react_1.default.createElement(ImageInput_1.ImageInput, __assign({ key: key }, props)))))));
+};
+exports.ImageInput = {
+    argTypes: (0, excludeKeys_1.excludeKeys)(imageInputArgTypes_1.imageInputArgTypes, [
+        "dropzoneLabelMultiple",
+        "sizeProfile",
+        "imageTitle",
+    ]),
+    args: (0, excludeKeys_1.excludeKeys)(imageInputArgTypes_1.imageInputArgs, [
+        "dropzoneLabelMultiple",
+        "sizeProfile",
+        "imageTitle",
+    ]),
+    render: function (args) { return react_1.default.createElement(ImageInput_, __assign({}, args)); },
+};
+var ImageGallery_ = function (args) {
+    var _a = (0, react_1.useState)(undefined), val = _a[0], setVal = _a[1];
+    var props = __assign(__assign({}, (0, imageInputParseArgTypes_1.imageInputParseArgTypes)({
+        args: args,
+        isImageSlider: true,
+    })), { value: val, onChange: function (k, v) { return setVal(v); } });
+    /**
+     * very important, in order to force the component to rerender
+     * when things like aspect ratio are changed.
+     * cuz natively, its not possible to modify the aspect ratio of
+     * an image input after it has rerendered.
+     * Hence this hack
+     */
+    var key = (0, genRandomHash_1.genRandomHash)(10);
+    return (react_1.default.createElement("div", { style: {
+            backgroundColor: props.invert ? themes_1.colors.greyColor100 : themes_1.colors.white,
+        } },
+        react_1.default.createElement(Container_1.Container, null,
+            react_1.default.createElement(Paddings_1.PaddingTopBottom30, null,
+                react_1.default.createElement("div", { style: { width: props.size } },
+                    react_1.default.createElement(ImageInput_1.ImageInput, __assign({ key: key }, props, { multiple: true })))))));
+};
+exports.ImageGallery = {
+    argTypes: (0, excludeKeys_1.excludeKeys)(imageInputArgTypes_1.imageInputArgTypes, [
+        "dropzoneLabel",
+        "sizeProfile",
+        "imageTitle",
+    ]),
+    args: (0, excludeKeys_1.excludeKeys)(imageInputArgTypes_1.imageInputArgs, [
+        "dropzoneLabel",
+        "sizeProfile",
+        "imageTitle",
+    ]),
+    render: function (args) { return react_1.default.createElement(ImageGallery_, __assign({}, args)); },
+};
+var ProfileImageInput_ = function (args) {
+    var _a = (0, react_1.useState)(undefined), val = _a[0], setVal = _a[1];
+    var props = __assign(__assign({}, (0, imageInputParseArgTypes_1.imageInputParseArgTypes)({
+        args: args,
+        isProfileImageInput: true,
+    })), { value: val, onChange: function (k, v) { return setVal(v); } });
+    /**
+     * very important, in order to force the component to rerender
+     * when things like aspect ratio are changed.
+     * cuz natively, its not possible to modify the aspect ratio of
+     * an image input after it has rerendered.
+     * Hence this hack
+     */
+    var key = (0, genRandomHash_1.genRandomHash)(10);
+    return (react_1.default.createElement("div", { style: {
+            backgroundColor: props.invert ? themes_1.colors.greyColor100 : themes_1.colors.white,
+        } },
+        react_1.default.createElement(Container_1.Container, null,
+            react_1.default.createElement(Paddings_1.PaddingTopBottom30, null,
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, __assign({ key: key }, props)))))));
+};
+exports.ProfileImageInput = {
+    argTypes: (0, excludeKeys_1.excludeKeys)(imageInputArgTypes_1.imageInputArgTypes, [
+        "containerShape",
+        "defaultImageSpread",
+        "aspectRatio",
+        "dropzoneLabel",
+        "dropzoneLabelMultiple",
+        "dropzoneSublabel",
+        "size",
+        "optionalLabel",
+        "enableCaptions"
+    ]),
+    args: (0, excludeKeys_1.excludeKeys)(imageInputArgTypes_1.imageInputArgs, [
+        "containerShape",
+        "defaultImageSpread",
+        "aspectRatio",
+        "dropzoneLabel",
+        "dropzoneLabelMultiple",
+        "dropzoneSublabel",
+        "size",
+        "optionalLabel",
+        "enableCaptions"
+    ]),
+    render: function (args) { return react_1.default.createElement(ProfileImageInput_, __assign({}, args)); },
+};

package/dist/stories/ImageInput/imageInputArgTypes.d.ts

@@ -0,0 +1,121 @@
+export namespace imageInputArgTypes {
+    namespace containerShape {
+        let name: string;
+        let control: string;
+        let options: string[];
+    }
+    namespace size {
+        let name_1: string;
+        export { name_1 as name };
+        let control_1: string;
+        export { control_1 as control };
+        let options_1: string[];
+        export { options_1 as options };
+    }
+    namespace aspectRatio {
+        let name_2: string;
+        export { name_2 as name };
+        let control_2: string;
+        export { control_2 as control };
+    }
+    namespace defaultImageSpread {
+        let name_3: string;
+        export { name_3 as name };
+        let control_3: string;
+        export { control_3 as control };
+        let options_2: string[];
+        export { options_2 as options };
+    }
+    namespace invert {
+        let name_4: string;
+        export { name_4 as name };
+        let control_4: string;
+        export { control_4 as control };
+    }
+    namespace dropzoneLabel {
+        let name_5: string;
+        export { name_5 as name };
+        let control_5: string;
+        export { control_5 as control };
+    }
+    namespace dropzoneLabelMultiple {
+        let name_6: string;
+        export { name_6 as name };
+        let control_6: string;
+        export { control_6 as control };
+    }
+    namespace dropzoneSublabel {
+        let name_7: string;
+        export { name_7 as name };
+        let control_7: string;
+        export { control_7 as control };
+        export namespace _if {
+            let arg: string;
+            let neq: string;
+        }
+        export { _if as if };
+    }
+    namespace readOnly {
+        let name_8: string;
+        export { name_8 as name };
+        let control_8: string;
+        export { control_8 as control };
+    }
+    namespace sizeProfile {
+        let name_9: string;
+        export { name_9 as name };
+        export namespace control_9 {
+            let type: string;
+            let min: number;
+            let max: number;
+            let step: number;
+        }
+        export { control_9 as control };
+    }
+    namespace imageTitle {
+        let name_10: string;
+        export { name_10 as name };
+        let control_10: string;
+        export { control_10 as control };
+    }
+    namespace optionalLabel {
+        let name_11: string;
+        export { name_11 as name };
+        let type_1: string;
+        export { type_1 as type };
+    }
+    namespace enableCaptions {
+        let name_12: string;
+        export { name_12 as name };
+        let type_2: string;
+        export { type_2 as type };
+    }
+}
+export namespace imageInputArgs {
+    let containerShape_1: string;
+    export { containerShape_1 as containerShape };
+    let size_1: string;
+    export { size_1 as size };
+    let optionalLabel_1: boolean;
+    export { optionalLabel_1 as optionalLabel };
+    let enableCaptions_1: boolean;
+    export { enableCaptions_1 as enableCaptions };
+    let aspectRatio_1: string;
+    export { aspectRatio_1 as aspectRatio };
+    let defaultImageSpread_1: string;
+    export { defaultImageSpread_1 as defaultImageSpread };
+    let dropzoneLabel_1: string;
+    export { dropzoneLabel_1 as dropzoneLabel };
+    let dropzoneSublabel_1: string;
+    export { dropzoneSublabel_1 as dropzoneSublabel };
+    let dropzoneLabelMultiple_1: string;
+    export { dropzoneLabelMultiple_1 as dropzoneLabelMultiple };
+    let sizeProfile_1: number;
+    export { sizeProfile_1 as sizeProfile };
+    let imageTitle_1: string;
+    export { imageTitle_1 as imageTitle };
+    let readOnly_1: boolean;
+    export { readOnly_1 as readOnly };
+    let invert_1: boolean;
+    export { invert_1 as invert };
+}

package/dist/stories/ImageInput/imageInputArgTypes.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.imageInputArgs = exports.imageInputArgTypes = void 0;
+exports.imageInputArgTypes = {
+    containerShape: {
+        name: '   Input Shape',
+        control: 'select',
+        options: ['Rectangle', 'Circle']
+    },
+    size: {
+        name: 'Size',
+        control: 'select',
+        options: ['Large', 'Small']
+    },
+    aspectRatio: {
+        name: 'Aspect Ratio',
+        control: 'text',
+    },
+    defaultImageSpread: {
+        name: 'Default Image Spread',
+        control: 'select',
+        options: ['Cover', 'Contain']
+    },
+    invert: {
+        name: 'Invert',
+        control: 'boolean'
+    },
+    dropzoneLabel: {
+        name: 'Dropzone Label',
+        control: 'text',
+    },
+    dropzoneLabelMultiple: {
+        name: 'Dropzone Label',
+        control: 'text',
+    },
+    dropzoneSublabel: {
+        name: 'Dropzone Sub-Label',
+        control: 'text',
+        if: { arg: 'size', neq: 'Small' }
+    },
+    readOnly: {
+        name: 'Read Only',
+        control: 'boolean'
+    },
+    //profile image input related
+    sizeProfile: {
+        name: 'Size',
+        control: { type: 'range', min: 0, max: 1000, step: 10 },
+    },
+    imageTitle: {
+        name: 'Profile Image Title',
+        control: 'text'
+    },
+    optionalLabel: {
+        name: 'Optional Label',
+        type: 'boolean'
+    },
+    enableCaptions: {
+        name: 'Captions',
+        type: 'boolean'
+    }
+};
+exports.imageInputArgs = {
+    containerShape: 'Rectangle',
+    size: 'Large',
+    optionalLabel: false,
+    enableCaptions: true,
+    aspectRatio: '5:3',
+    defaultImageSpread: 'Cover',
+    dropzoneLabel: 'Add Image',
+    dropzoneSublabel: 'Supports: <allowed formats>',
+    dropzoneLabelMultiple: 'Add Images ( max 10 )',
+    //profile image input related
+    sizeProfile: 200,
+    imageTitle: 'Placeholder Title',
+    readOnly: false,
+    invert: false,
+};

package/dist/stories/ImageInput/imageInputParseArgTypes.d.ts

@@ -0,0 +1,17 @@
+export function imageInputParseArgTypes({ args, isImageSlider, isProfileImageInput }: {
+    args: any;
+    isImageSlider?: boolean;
+    isProfileImageInput?: boolean;
+}): {
+    containerShape: any;
+    size: any;
+    aspectRatio: any;
+    defaultImageSpread: any;
+    invert: any;
+    dropzoneLabel: any;
+    dropzoneSublabel: any;
+    readOnly: any;
+    imageTitle: any;
+    isRequired: boolean;
+    enableCaptions: any;
+};

package/dist/stories/ImageInput/imageInputParseArgTypes.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.imageInputParseArgTypes = void 0;
+function isNumeric(str) {
+    return /^\d+$/.test(str);
+}
+var imageInputParseArgTypes = function (_a) {
+    var args = _a.args, _b = _a.isImageSlider, isImageSlider = _b === void 0 ? false : _b, _c = _a.isProfileImageInput, isProfileImageInput = _c === void 0 ? false : _c;
+    var _containerShape = args.containerShape, _size = args.size, _aspectRatio = args.aspectRatio, _defaultImageSpread = args.defaultImageSpread, invert = args.invert, _dropzoneLabel = args.dropzoneLabel, _dropzoneLabelMultiple = args.dropzoneLabelMultiple, dropzoneSublabel = args.dropzoneSublabel, readOnly = args.readOnly, 
+    //profile image input related
+    sizeProfile = args.sizeProfile, imageTitle = args.imageTitle, optionalLabel = args.optionalLabel, enableCaptions = args.enableCaptions;
+    return ({
+        containerShape: _containerShape === null || _containerShape === void 0 ? void 0 : _containerShape.toLowerCase(),
+        size: isProfileImageInput
+            ? sizeProfile
+            : _size === 'Small' ? '299px' : '650px',
+        aspectRatio: _aspectRatio && (isNumeric(_aspectRatio[0]) &&
+            _aspectRatio[1] === ':' &&
+            isNumeric(_aspectRatio[0])) ? _aspectRatio.replace(':', '/') : undefined,
+        defaultImageSpread: _defaultImageSpread === null || _defaultImageSpread === void 0 ? void 0 : _defaultImageSpread.toLowerCase(),
+        invert: invert,
+        dropzoneLabel: isImageSlider ? _dropzoneLabelMultiple : _dropzoneLabel,
+        dropzoneSublabel: dropzoneSublabel,
+        readOnly: readOnly,
+        //profile image input related
+        imageTitle: imageTitle,
+        isRequired: !optionalLabel,
+        enableCaptions: enableCaptions
+    });
+};
+exports.imageInputParseArgTypes = imageInputParseArgTypes;