oolib 2.110.0 → 2.111.0

package/dist/stories/DatePicker.stories.d.ts

@@ -0,0 +1,239 @@
+declare namespace _default {
+    let title: string;
+}
+export default _default;
+export function DatePicker_(args: any): React.JSX.Element;
+export namespace DatePicker_ {
+    namespace argTypes {
+        namespace previousDateOnly {
+            let name: string;
+        }
+        namespace futureDateOnly {
+            let name_1: string;
+            export { name_1 as name };
+        }
+        namespace disabled {
+            let name_2: string;
+            export { name_2 as name };
+        }
+        namespace readOnly {
+            let name_3: string;
+            export { name_3 as name };
+        }
+        namespace invert {
+            let name_4: string;
+            export { name_4 as name };
+        }
+    }
+    namespace args {
+        let previousDateOnly_1: boolean;
+        export { previousDateOnly_1 as previousDateOnly };
+        let futureDateOnly_1: boolean;
+        export { futureDateOnly_1 as futureDateOnly };
+        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 function DateRangePicker_(args: any): React.JSX.Element;
+export namespace DateRangePicker_ {
+    export namespace argTypes_1 {
+        export namespace allowPresentlyOngoing {
+            let name_5: string;
+            export { name_5 as name };
+        }
+        export namespace previousDateOnly_2 {
+            let name_6: string;
+            export { name_6 as name };
+        }
+        export { previousDateOnly_2 as previousDateOnly };
+        export namespace futureDateOnly_2 {
+            let name_7: string;
+            export { name_7 as name };
+        }
+        export { futureDateOnly_2 as futureDateOnly };
+        export namespace disabled_2 {
+            let name_8: string;
+            export { name_8 as name };
+        }
+        export { disabled_2 as disabled };
+        export namespace readOnly_2 {
+            let name_9: string;
+            export { name_9 as name };
+        }
+        export { readOnly_2 as readOnly };
+        export namespace invert_2 {
+            let name_10: string;
+            export { name_10 as name };
+        }
+        export { invert_2 as invert };
+    }
+    export { argTypes_1 as argTypes };
+    export namespace args_1 {
+        let previousDateOnly_3: boolean;
+        export { previousDateOnly_3 as previousDateOnly };
+        let futureDateOnly_3: boolean;
+        export { futureDateOnly_3 as futureDateOnly };
+        let disabled_3: boolean;
+        export { disabled_3 as disabled };
+        let readOnly_3: boolean;
+        export { readOnly_3 as readOnly };
+        let invert_3: boolean;
+        export { invert_3 as invert };
+        let allowPresentlyOngoing_1: boolean;
+        export { allowPresentlyOngoing_1 as allowPresentlyOngoing };
+    }
+    export { args_1 as args };
+}
+export function TimePicker(args: any): React.JSX.Element;
+export namespace TimePicker {
+    export namespace args_2 {
+        let disabled_4: boolean;
+        export { disabled_4 as disabled };
+        let readOnly_4: boolean;
+        export { readOnly_4 as readOnly };
+        let invert_4: boolean;
+        export { invert_4 as invert };
+    }
+    export { args_2 as args };
+    export namespace argTypes_2 {
+        export namespace disabled_5 {
+            let name_11: string;
+            export { name_11 as name };
+        }
+        export { disabled_5 as disabled };
+        export namespace readOnly_5 {
+            let name_12: string;
+            export { name_12 as name };
+        }
+        export { readOnly_5 as readOnly };
+        export namespace invert_5 {
+            let name_13: string;
+            export { name_13 as name };
+        }
+        export { invert_5 as invert };
+    }
+    export { argTypes_2 as argTypes };
+}
+export function TimeRangePicker(args: any): React.JSX.Element;
+export namespace TimeRangePicker {
+    export namespace args_3 {
+        let disabled_6: boolean;
+        export { disabled_6 as disabled };
+        let readOnly_6: boolean;
+        export { readOnly_6 as readOnly };
+        let invert_6: boolean;
+        export { invert_6 as invert };
+    }
+    export { args_3 as args };
+    export namespace argTypes_3 {
+        export namespace disabled_7 {
+            let name_14: string;
+            export { name_14 as name };
+        }
+        export { disabled_7 as disabled };
+        export namespace readOnly_7 {
+            let name_15: string;
+            export { name_15 as name };
+        }
+        export { readOnly_7 as readOnly };
+        export namespace invert_7 {
+            let name_16: string;
+            export { name_16 as name };
+        }
+        export { invert_7 as invert };
+    }
+    export { argTypes_3 as argTypes };
+}
+export function DateTimePicker(args: any): React.JSX.Element;
+export namespace DateTimePicker {
+    export namespace args_4 {
+        let previousDateOnly_4: boolean;
+        export { previousDateOnly_4 as previousDateOnly };
+        let futureDateOnly_4: boolean;
+        export { futureDateOnly_4 as futureDateOnly };
+        let disabled_8: boolean;
+        export { disabled_8 as disabled };
+        let readOnly_8: boolean;
+        export { readOnly_8 as readOnly };
+        let invert_8: boolean;
+        export { invert_8 as invert };
+    }
+    export { args_4 as args };
+    export namespace argTypes_4 {
+        export namespace previousDateOnly_5 {
+            let name_17: string;
+            export { name_17 as name };
+        }
+        export { previousDateOnly_5 as previousDateOnly };
+        export namespace futureDateOnly_5 {
+            let name_18: string;
+            export { name_18 as name };
+        }
+        export { futureDateOnly_5 as futureDateOnly };
+        export namespace disabled_9 {
+            let name_19: string;
+            export { name_19 as name };
+        }
+        export { disabled_9 as disabled };
+        export namespace readOnly_9 {
+            let name_20: string;
+            export { name_20 as name };
+        }
+        export { readOnly_9 as readOnly };
+        export namespace invert_9 {
+            let name_21: string;
+            export { name_21 as name };
+        }
+        export { invert_9 as invert };
+    }
+    export { argTypes_4 as argTypes };
+}
+export function DateTimeRangePicker(args: any): React.JSX.Element;
+export namespace DateTimeRangePicker {
+    export namespace args_5 {
+        let previousDateOnly_6: boolean;
+        export { previousDateOnly_6 as previousDateOnly };
+        let futureDateOnly_6: boolean;
+        export { futureDateOnly_6 as futureDateOnly };
+        let disabled_10: boolean;
+        export { disabled_10 as disabled };
+        let readOnly_10: boolean;
+        export { readOnly_10 as readOnly };
+        let invert_10: boolean;
+        export { invert_10 as invert };
+    }
+    export { args_5 as args };
+    export namespace argTypes_5 {
+        export namespace previousDateOnly_7 {
+            let name_22: string;
+            export { name_22 as name };
+        }
+        export { previousDateOnly_7 as previousDateOnly };
+        export namespace futureDateOnly_7 {
+            let name_23: string;
+            export { name_23 as name };
+        }
+        export { futureDateOnly_7 as futureDateOnly };
+        export namespace disabled_11 {
+            let name_24: string;
+            export { name_24 as name };
+        }
+        export { disabled_11 as disabled };
+        export namespace readOnly_11 {
+            let name_25: string;
+            export { name_25 as name };
+        }
+        export { readOnly_11 as readOnly };
+        export namespace invert_11 {
+            let name_26: string;
+            export { name_26 as name };
+        }
+        export { invert_11 as invert };
+    }
+    export { argTypes_5 as argTypes };
+}
+import React from 'react';

package/dist/stories/DatePicker.stories.js

@@ -0,0 +1,267 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker_ = exports.DatePicker_ = void 0;
+var react_1 = __importStar(require("react"));
+var DateTimePicker_1 = require("../components/DateTimePicker");
+var themes_1 = require("../themes");
+var DatePicker_1 = __importDefault(require("../components/DatePicker"));
+var DateRangePicker_1 = __importDefault(require("../components/DateRangePicker"));
+var DateTimeRangePicker_1 = require("../components/DateTimeRangePicker");
+var TimePicker_1 = require("../components/TimePicker");
+var TimeRangePicker_1 = require("../components/TimeRangePicker");
+var greyColor100 = themes_1.colors.greyColor100;
+exports.default = {
+    title: 'Components/Date Picker',
+};
+var DatePicker_ = function (args) {
+    var _a = (0, react_1.useState)(null), selectedDate = _a[0], setSelectedDate = _a[1];
+    var handleDateChange = function (id, value) {
+        setSelectedDate(value);
+    };
+    console.log(selectedDate);
+    return (react_1.default.createElement("div", { style: {
+            width: '45vw',
+            height: '95vh',
+            backgroundColor: args.invert && greyColor100,
+            padding: '1rem',
+        } },
+        react_1.default.createElement(DatePicker_1.default, __assign({}, args, { id: 0, value: selectedDate, onChange: handleDateChange, label: "Date Picker", sublabel: "The simple date input provides the user with only a text field in which they can manually input a date. It allows dates to be entered without adding unnecessary interactions that come with the calendar menu or a dropdown." }))));
+};
+exports.DatePicker_ = DatePicker_;
+exports.DatePicker_.argTypes = {
+    previousDateOnly: {
+        name: 'Previous Date Only',
+    },
+    futureDateOnly: {
+        name: 'Future Date Only',
+    },
+    disabled: {
+        name: 'Disabled',
+    },
+    readOnly: {
+        name: 'Read Only',
+    },
+    invert: {
+        name: 'Invert',
+    }
+};
+exports.DatePicker_.args = {
+    previousDateOnly: false,
+    futureDateOnly: false,
+    disabled: false,
+    readOnly: false,
+    invert: false,
+    // debug: false
+};
+var DateRangePicker_ = function (args) {
+    var _a = (0, react_1.useState)([]), dateRange = _a[0], setDateRange = _a[1];
+    var handleDateRangeChange = function (id, newValue) {
+        setDateRange(newValue);
+        console.log(dateRange);
+    };
+    return (react_1.default.createElement("div", { style: {
+            width: '45vw',
+            height: '95vh',
+            backgroundColor: args.invert && greyColor100,
+            padding: '1rem',
+        } },
+        react_1.default.createElement(DateRangePicker_1.default, __assign({}, args, { id: "my-date-range-picker", value: dateRange, onChange: handleDateRangeChange, label: "Date Range Picker", sublabel: "Calendar pickers default to showing today’s date when opened and only one month is shown at a time. Calendar pickers allow users to navigate through months and years, however they work best when used for recent or near future dates." }))));
+};
+exports.DateRangePicker_ = DateRangePicker_;
+exports.DateRangePicker_.argTypes = {
+    allowPresentlyOngoing: {
+        name: 'Allow Presently Ongoing',
+    },
+    previousDateOnly: {
+        name: 'Previous Date Only',
+    },
+    futureDateOnly: {
+        name: 'Future Date Only',
+    },
+    disabled: {
+        name: 'Disabled',
+    },
+    readOnly: {
+        name: 'Read Only',
+    },
+    invert: {
+        name: 'Invert',
+    }
+};
+exports.DateRangePicker_.args = {
+    previousDateOnly: false,
+    futureDateOnly: false,
+    disabled: false,
+    readOnly: false,
+    invert: false,
+    allowPresentlyOngoing: true,
+    // debug: false
+};
+var TimePicker = function (args) {
+    var _a = (0, react_1.useState)(), value = _a[0], setValue = _a[1];
+    console.log({ value: value });
+    return (react_1.default.createElement("div", { style: {
+            width: '45vw',
+            height: '95vh',
+            backgroundColor: args.invert && greyColor100,
+            padding: '1rem',
+        } },
+        react_1.default.createElement(TimePicker_1.TimePicker, __assign({}, args, { value: value, label: 'Time Picker', sublabel: 'Time pickers provide the user with a text field in which they can input the hour and minutes accompanied by an AM/PM', onChange: function (id, item) { return setValue(item); } }))));
+};
+exports.TimePicker = TimePicker;
+exports.TimePicker.args = {
+    disabled: false,
+    readOnly: false,
+    invert: false
+};
+exports.TimePicker.argTypes = {
+    disabled: {
+        name: 'Disabled',
+    },
+    readOnly: {
+        name: 'Read Only',
+    },
+    invert: {
+        name: 'Invert',
+    }
+};
+var TimeRangePicker = function (args) {
+    var _a = (0, react_1.useState)(), selectedTimes = _a[0], setSelectedTimes = _a[1];
+    console.log({ selectedTimes: selectedTimes });
+    return (react_1.default.createElement("div", { style: {
+            width: '45vw',
+            height: '95vh',
+            backgroundColor: args.invert && greyColor100,
+            padding: '1rem',
+        } },
+        react_1.default.createElement(TimeRangePicker_1.TimeRangePicker, __assign({ value: selectedTimes, onChange: function (id, value) { return setSelectedTimes(value); } }, args, { label: 'Time Range Picker', sublabel: 'Time range pickers provide the user with a start and an end text field in which they can input the hour and minutes accompanied by an AM/PM' }))));
+};
+exports.TimeRangePicker = TimeRangePicker;
+exports.TimeRangePicker.args = {
+    disabled: false,
+    readOnly: false,
+    invert: false
+};
+exports.TimeRangePicker.argTypes = {
+    disabled: {
+        name: 'Disabled',
+    },
+    readOnly: {
+        name: 'Read Only',
+    },
+    invert: {
+        name: 'Invert',
+    }
+};
+var DateTimePicker = function (args) {
+    var _a = (0, react_1.useState)(), selectedValue = _a[0], setSelectedValue = _a[1];
+    var handleOnChange = function (id, value, props) {
+        setSelectedValue(value);
+    };
+    console.log({ selectedValue: selectedValue });
+    return (react_1.default.createElement("div", { style: {
+            width: '45vw',
+            height: '95vh',
+            backgroundColor: args.invert && greyColor100,
+            padding: '1rem',
+        } },
+        react_1.default.createElement(DateTimePicker_1.DateTimePicker, __assign({}, args, { value: selectedValue, passChangeHandlerOps: true, onChange: handleOnChange, label: "Date Time Picker", sublabel: 'Date Time Picker provides the user with combination fields in which they can input the date as well as time value' }))));
+};
+exports.DateTimePicker = DateTimePicker;
+exports.DateTimePicker.args = {
+    previousDateOnly: false,
+    futureDateOnly: false,
+    disabled: false,
+    readOnly: false,
+    invert: false
+};
+exports.DateTimePicker.argTypes = {
+    previousDateOnly: {
+        name: 'Previous Date Only',
+    },
+    futureDateOnly: {
+        name: 'Future Date Only',
+    },
+    disabled: {
+        name: 'Disabled',
+    },
+    readOnly: {
+        name: 'Read Only',
+    },
+    invert: {
+        name: 'Invert',
+    }
+};
+var DateTimeRangePicker = function (args) {
+    var _a = (0, react_1.useState)(), selectedValue = _a[0], setSelectedValue = _a[1];
+    console.log({ selectedValue: selectedValue });
+    return (react_1.default.createElement("div", { style: {
+            width: '45vw',
+            height: '95vh',
+            backgroundColor: args.invert && greyColor100,
+            padding: '1rem',
+        } },
+        react_1.default.createElement(DateTimeRangePicker_1.DateTimeRangePicker, __assign({}, args, { value: selectedValue, onChange: function (id, value) { return setSelectedValue(value); }, label: 'Date Time Range Picker', sublabel: 'Date Time Picker provides the user with combination fields in which they can input date range as well as time range' }))));
+};
+exports.DateTimeRangePicker = DateTimeRangePicker;
+exports.DateTimeRangePicker.args = {
+    previousDateOnly: false,
+    futureDateOnly: false,
+    disabled: false,
+    readOnly: false,
+    invert: false
+};
+exports.DateTimeRangePicker.argTypes = {
+    previousDateOnly: {
+        name: 'Previous Date Only',
+    },
+    futureDateOnly: {
+        name: 'Future Date Only',
+    },
+    disabled: {
+        name: 'Disabled',
+    },
+    readOnly: {
+        name: 'Read Only',
+    },
+    invert: {
+        name: 'Invert',
+    }
+};

package/dist/stories/Divider.stories.d.ts

@@ -0,0 +1,8 @@
+declare namespace _default {
+    let title: string;
+    namespace args {
+        let invert: boolean;
+    }
+}
+export default _default;
+export function Divider(args: any): import("react").JSX.Element;

package/dist/stories/Divider.stories.js

@@ -0,0 +1,28 @@
+"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.Divider = void 0;
+var Divider_1 = require("../components/Divider");
+var themes_1 = require("../themes");
+exports.default = {
+    title: "Components/Divider",
+    args: {
+        invert: false,
+    },
+};
+var uid = 0;
+var Divider = function (args) {
+    return (React.createElement("div", { style: { padding: '50px', background: args.invert ? themes_1.colors.greyColor100 : themes_1.colors.white } },
+        React.createElement(Divider_1.Divider, __assign({}, args))));
+};
+exports.Divider = Divider;

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

@@ -0,0 +1,114 @@
+/// <reference types="mdx" />
+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 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 };
+    }
+    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";