xmlui 0.4.0

package/dist/scripts/src/components/ChangeListener/ChangeListener.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.changeListenerComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const react_1 = require("react");
+const lodash_es_1 = require("lodash-es");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const hooks_1 = require("@components-core/utils/hooks");
+function ChangeListener({ listenTo, onChange, throttleWaitInMs = 0 }) {
+    const prevValue = (0, hooks_1.usePrevious)(listenTo);
+    const throttledOnChange = (0, react_1.useMemo)(() => {
+        if (throttleWaitInMs !== 0 && onChange) {
+            return (0, lodash_es_1.throttle)(onChange, throttleWaitInMs, {
+                leading: true,
+            });
+        }
+        return onChange;
+    }, [onChange, throttleWaitInMs]);
+    (0, react_1.useEffect)(() => {
+        if (throttledOnChange && !(0, lodash_es_1.isEqual)(prevValue, listenTo)) {
+            throttledOnChange === null || throttledOnChange === void 0 ? void 0 : throttledOnChange({
+                prevValue,
+                newValue: listenTo,
+            });
+        }
+    }, [listenTo, throttledOnChange, prevValue]);
+    return null;
+}
+const metadata = {
+    displayName: "ChangeListener",
+    description: "Non-visual component listening to value changes",
+    props: {
+        listenTo: (0, descriptorHelper_1.desc)("Value to the changes of which this component listens"),
+        throttleWaitInMs: (0, descriptorHelper_1.desc)("Value in milliseconds to throttle repeating changes"),
+    },
+    events: {
+        didChange: (0, descriptorHelper_1.desc)("Sign that a particular value has changed."),
+    },
+};
+exports.changeListenerComponentRenderer = (0, renderers_1.createComponentRenderer)("ChangeListener", ({ node, lookupEventHandler, extractValue }) => {
+    return ((0, jsx_runtime_1.jsx)(ChangeListener, { listenTo: extractValue(node.props.listenTo), throttleWaitInMs: extractValue(node.props.throttleWaitInMs), onChange: lookupEventHandler("didChange") }));
+}, metadata);

package/dist/scripts/src/components/Chart/Chart.js

@@ -0,0 +1,158 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chartRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const renderers_1 = require("@components-core/renderers");
+const Chart_module_scss_1 = __importDefault(require("./Chart.module.scss"));
+const hooks_1 = require("@components-core/utils/hooks");
+const ApexChart = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require("react-apexcharts"))));
+const defaultOptions = {
+    chart: {
+        fontFamily: "inherit",
+        sparkline: {
+            enabled: false,
+        },
+        toolbar: {
+            show: false,
+        },
+        animations: {
+            enabled: false,
+            dynamicAnimation: {
+                enabled: true,
+            },
+            animateGradually: {
+                enabled: true,
+            },
+            speed: 300,
+        },
+    },
+    dataLabels: {
+        enabled: false,
+    },
+    fill: {
+        //--> area
+        opacity: 0.16,
+        type: "solid",
+    },
+    stroke: {
+        // width: [2, 1],
+        // dashArray: [0, 3],
+        width: 2,
+        lineCap: "round",
+        curve: "smooth",
+    },
+    tooltip: {
+        // --> should come from themes
+        theme: "dark",
+    },
+    grid: {
+        strokeDashArray: 4,
+        padding: {
+            // top: -20,
+            right: 0,
+            left: -4,
+            bottom: -4,
+        },
+        xaxis: {
+            lines: {
+                show: true,
+            },
+        },
+    },
+    plotOptions: {
+        bar: {
+            columnWidth: "50%",
+        },
+    },
+    xaxis: {
+        labels: {
+        // padding: 0,
+        },
+        tooltip: {
+            enabled: false,
+        },
+        axisBorder: {
+            show: false,
+        },
+        type: "datetime",
+    },
+    yaxis: {
+        labels: {
+            padding: 4,
+        },
+    },
+    legend: {
+        show: false,
+    },
+};
+function Chart({ type, labels, series, style, stacked, showAxisLabels = true, tooltipEnabled = true, showLegend = false, }) {
+    const colors = (0, hooks_1.useColors)({
+        name: "color-primary-500",
+        format: "hex",
+    }, {
+        name: "color-primary-400",
+        format: "hex",
+    }, {
+        name: "color-primary-300",
+        format: "hex",
+    }, {
+        name: "color-primary-200",
+        format: "hex",
+    });
+    const { fill } = defaultOptions, restOptions = __rest(defaultOptions, ["fill"]);
+    const options = (0, react_1.useMemo)(() => {
+        let opts = Object.assign(Object.assign({}, restOptions), { chart: Object.assign(Object.assign({}, restOptions.chart), { stacked, sparkline: {
+                    enabled: !showAxisLabels,
+                } }), fill: type === "area" ? fill : {}, tooltip: Object.assign(Object.assign({}, defaultOptions.tooltip), { enabled: tooltipEnabled }), colors: Object.values(colors), labels: labels || [], legend: {
+                show: showLegend,
+            } });
+        if (!labels) {
+            delete opts.xaxis;
+        }
+        return opts;
+    }, [colors, fill, labels, restOptions, showAxisLabels, stacked, tooltipEnabled, type]);
+    return (
+    //   TODO illesg TEMP FLEX 1 STAR SIZING
+    (0, jsx_runtime_1.jsx)("div", { style: Object.assign({}, style), className: Chart_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(ApexChart, { options: options, type: type, series: series, height: "100%", width: "100%" }) }) }));
+}
+exports.chartRenderer = (0, renderers_1.createComponentRenderer)("Chart", ({ node, extractValue, lookupAction, layoutCss, registerComponentApi }) => {
+    return ((0, jsx_runtime_1.jsx)(Chart, { type: extractValue.asString(node.props.type), labels: extractValue(node.props.labels), series: extractValue(node.props.series), style: layoutCss, showLegend: extractValue.asOptionalBoolean(node.props.showLegend), stacked: extractValue.asOptionalBoolean(node.props.stacked), showAxisLabels: extractValue.asOptionalBoolean(node.props.showAxisLabels), tooltipEnabled: extractValue.asOptionalBoolean(node.props.tooltipEnabled) }));
+});

package/dist/scripts/src/components/Checkbox/Checkbox.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkboxComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Toggle_module_scss_1 = __importDefault(require("@components/Toggle/Toggle.module.scss"));
+const input_abstractions_1 = require("@components/Input/input-abstractions");
+const renderers_1 = require("@components-core/renderers");
+const Toggle_1 = require("@components/Toggle/Toggle");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const metadata = {
+    displayName: "Checkbox",
+    description: "Display a checkbox that represents a true or false value",
+    props: input_abstractions_1.inputComponentPropertyDescriptors,
+    events: input_abstractions_1.inputComponentEventDescriptors,
+    themeVars: (0, themeVars_1.parseScssVar)(Toggle_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-border-checked-Checkbox-error": "$color-border-Checkbox-error",
+        "color-bg-checked-Checkbox-error": "$color-border-Checkbox-error",
+        "color-border-checked-Checkbox-warning": "$color-border-Checkbox-warning",
+        "color-bg-checked-Checkbox-warning": "$color-border-Checkbox-warning",
+        "color-border-checked-Checkbox-success": "$color-border-Checkbox-success",
+        "color-bg-checked-Checkbox-success": "$color-border-Checkbox-success",
+        light: {
+            "color-bg-indicator-Checkbox": "$color-bg-primary",
+            "color-border-checked-Checkbox": "$color-primary-500",
+            "color-bg-checked-Checkbox": "$color-primary-500",
+            "color-bg-Checkbox--disabled": "$color-surface-200",
+        },
+        dark: {
+            "color-bg-indicator-Checkbox": "$color-bg-primary",
+            "color-border-checked-Checkbox": "$color-primary-400",
+            "color-bg-checked-Checkbox": "$color-primary-400",
+            "color-bg-Checkbox--disabled": "$color-surface-800",
+        }
+    },
+};
+// Source: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/
+exports.checkboxComponentRenderer = (0, renderers_1.createComponentRenderer)("Checkbox", ({ node, extractValue, layoutCss, updateState, lookupEventHandler, state, registerComponentApi }) => {
+    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, false), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), indeterminate: extractValue.asOptionalBoolean(node.props.indeterminate), registerComponentApi: registerComponentApi }));
+}, metadata);

package/dist/scripts/src/components/Combobox/Combobox.js

@@ -0,0 +1,145 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.comboboxComponentRenderer = exports.Combobox = void 0;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const downshift_1 = require("downshift");
+const react_2 = require("react");
+const constants_1 = require("@components-core/constants");
+const renderers_1 = require("@components-core/renderers");
+const container_helpers_1 = require("@components/container-helpers");
+const Combobox_module_scss_1 = __importDefault(require("@components/Combobox/Combobox.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const input_abstractions_1 = require("@components/Input/input-abstractions");
+const react_popper_1 = require("react-popper");
+const react_dom_1 = require("react-dom");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const SelectContext_1 = require("@components/Select/SelectContext");
+const component_utils_1 = require("@components/component-utils");
+const ChevronDownIcon_1 = require("@components/Icon/ChevronDownIcon");
+const ChevronUpIcon_1 = require("@components/Icon/ChevronUpIcon");
+const Icon_1 = __importDefault(require("@components/Icon/Icon"));
+function defaultRenderer(item) {
+    return (0, jsx_runtime_1.jsx)("div", { children: item.label });
+}
+const Combobox = ({ id, initialValue = "", value = "", enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, emptyListTemplate, optionRenderer = defaultRenderer, children, }) => {
+    const { options, selectContextValue } = (0, SelectContext_1.useSelectContextValue)();
+    const [referenceElement, setReferenceElement] = (0, react_2.useState)(null);
+    const [popperElement, setPopperElement] = (0, react_2.useState)(null);
+    const { styles: popperStyles, attributes } = (0, react_popper_1.usePopper)(referenceElement, popperElement, {
+        placement: "bottom-start",
+    });
+    const { root } = (0, ThemeContext_1.useTheme)();
+    const [searchValue, setSearchValue] = (0, react_2.useState)("");
+    const items = (0, react_2.useMemo)(() => {
+        return (0, component_utils_1.filterOptions)(searchValue, options);
+    }, [options, searchValue]);
+    const [width, setWidth] = (0, react_2.useState)(0);
+    const observer = (0, react_2.useRef)();
+    const { isOpen, selectedItem, highlightedIndex, getMenuProps, getInputProps, getItemProps, getToggleButtonProps } = (0, downshift_1.useCombobox)({
+        // labelId: id,
+        // toggleButtonId: id,
+        onInputValueChange({ inputValue }) {
+            setSearchValue(inputValue || "");
+        },
+        items,
+        itemToString(item) {
+            return item ? item.label : "";
+        },
+        initialSelectedItem: options.find((item) => item.value === value) || null,
+        selectedItem: options.find((item) => item.value === value) || null,
+        onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
+            if (newSelectedItem) {
+                onInputChange(newSelectedItem);
+            }
+        },
+        isItemDisabled: (item) => item.disabled,
+    });
+    // --- Manage obtaining and losing the focus
+    const handleOnFocus = (0, react_2.useCallback)(() => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const handleOnBlur = (0, react_2.useCallback)(() => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [onBlur]);
+    const focus = (0, react_2.useCallback)(() => {
+        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.focus();
+    }, [referenceElement]);
+    (0, react_2.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            focus,
+        });
+    }, [focus, registerComponentApi]);
+    (0, react_2.useEffect)(() => {
+        updateState({ value: initialValue });
+    }, [initialValue, updateState]);
+    const onInputChange = (0, react_2.useCallback)((selectedOption) => {
+        const value = selectedOption.value;
+        updateState({ value: value });
+        onChange(value);
+    }, [onChange, updateState]);
+    (0, react_2.useEffect)(() => {
+        const current = referenceElement;
+        // --- We are already observing old element
+        if ((observer === null || observer === void 0 ? void 0 : observer.current) && current) {
+            observer.current.unobserve(current);
+        }
+        observer.current = new ResizeObserver(() => setWidth(referenceElement.clientWidth));
+        if (current && observer.current) {
+            observer.current.observe(referenceElement);
+        }
+    }, [referenceElement]);
+    return ((0, jsx_runtime_1.jsxs)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: [children, (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(Combobox_module_scss_1.default.comboboxToggleButton, Combobox_module_scss_1.default[validationStatus], {
+                    //TODO expand styles[validationStatus]
+                    [Combobox_module_scss_1.default.disabled]: !enabled,
+                }), ref: setReferenceElement, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ className: Combobox_module_scss_1.default.comboboxInput, onFocus: handleOnFocus, onBlur: handleOnBlur, placeholder: placeholder, disabled: !enabled }, getInputProps({
+                        id: id,
+                    }))), (0, jsx_runtime_1.jsx)("span", Object.assign({ "aria-label": "toggle menu", className: Combobox_module_scss_1.default.indicator }, getToggleButtonProps({ disabled: !enabled }), { children: isOpen ? (0, jsx_runtime_1.jsx)(ChevronUpIcon_1.ChevronUpIcon, {}) : (0, jsx_runtime_1.jsx)(ChevronDownIcon_1.ChevronDownIcon, {}) })), (0, jsx_runtime_1.jsx)("div", Object.assign({}, getMenuProps(), { children: isOpen &&
+                            root &&
+                            (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: Combobox_module_scss_1.default.comboboxMenu, ref: (el) => setPopperElement(el), style: Object.assign(Object.assign({}, popperStyles.popper), { width }) }, attributes.popper, { children: items.length > 0 ? (items.map((item, index) => {
+                                    const props = getItemProps({ item, index });
+                                    return ((0, react_1.createElement)("li", Object.assign({}, props, { key: index, className: (0, classnames_1.default)(Combobox_module_scss_1.default.item, Combobox_module_scss_1.default.selectable, {
+                                            [Combobox_module_scss_1.default.itemActive]: highlightedIndex === index,
+                                            [Combobox_module_scss_1.default.itemSelected]: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === item.value,
+                                            [Combobox_module_scss_1.default.itemDisabled]: item.disabled,
+                                        }) }), optionRenderer(item)));
+                                })) : ((0, jsx_runtime_1.jsx)("li", { className: Combobox_module_scss_1.default.item, children: emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("span", { className: Combobox_module_scss_1.default.empty, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "noresult" }), "List is empty"] })) })) })), root) }))] })] }));
+};
+exports.Combobox = Combobox;
+const defaultOptionRenderer = {
+    type: "Text",
+    props: {
+        value: "{$item.label}",
+    },
+};
+const metadata = {
+    displayName: "Combobox",
+    description: "A combobox component",
+    props: Object.assign(Object.assign({}, input_abstractions_1.inputComponentPropertyDescriptors), { options: (0, descriptorHelper_1.desc)("List of options to display"), optionTemplate: (0, descriptorHelper_1.desc)("Template to render each option"), emptyListTemplate: (0, descriptorHelper_1.desc)("Template to render when the list is empty") }),
+    events: input_abstractions_1.inputComponentEventDescriptors,
+    themeVars: (0, themeVars_1.parseScssVar)(Combobox_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-bg-menu-Combobox": "$color-bg-primary",
+        "shadow-menu-Combobox": "$shadow-md",
+        "radius-menu-Combobox": "$radius",
+        "color-bg-item-Combobox": "$color-bg-dropdown-item",
+        "color-bg-item-Combobox--hover": "$color-bg-dropdown-item--active",
+        light: {
+            "color-text-item-Combobox--disabled": "$color-surface-200",
+        },
+        dark: {
+            "color-text-item-Combobox--disabled": "$color-surface-800",
+        },
+    },
+};
+exports.comboboxComponentRenderer = (0, renderers_1.createComponentRenderer)("Combobox", ({ node, state, updateState, extractValue, renderChild, lookupAction, layoutCss, registerComponentApi }) => {
+    var _a, _b, _c;
+    return ((0, jsx_runtime_1.jsx)(exports.Combobox, { layout: layoutCss, value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onChange: lookupAction((_a = node.events) === null || _a === void 0 ? void 0 : _a.change), onFocus: lookupAction((_b = node.events) === null || _b === void 0 ? void 0 : _b.gotFocus), onBlur: lookupAction((_c = node.events) === null || _c === void 0 ? void 0 : _c.lostFocus), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), optionRenderer: (item) => {
+            return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate || defaultOptionRenderer, item: item, renderChild: renderChild }));
+        }, children: renderChild(node.children) }));
+}, metadata);