@perses-dev/components 0.8.0 → 0.9.0

package/dist/cjs/StatChart/StatChart.test.js

@@ -1,17 +1,37 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@testing-library/react");
-const ChartsThemeProvider_1 = require("../context/ChartsThemeProvider");
-const StatChart_1 = require("./StatChart");
-describe('StatChart', () => {
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _react1 = require("@testing-library/react");
+const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _statChart = require("./StatChart");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('StatChart', ()=>{
     const contentDimensions = {
         width: 200,
-        height: 200,
+        height: 200
     };
     const unit = {
         kind: 'Decimal',
-        decimal_places: 2,
+        decimal_places: 2
     };
     const mockStatData = {
         calculatedValue: 7.72931659687181,
@@ -19,13 +39,28 @@ describe('StatChart', () => {
         seriesData: {
             name: '(((count(count(node_cpu_seconds_total{job="example"}) by (cpu))',
             values: [
-                [1654006170000, 7.736401673473903],
-                [1654006185000, 7.733891213538757],
-                [1654006200000, 7.731101813010433],
-                [1654006215000, 7.722454672079215],
-                [1654006230000, 7.722733612256738],
-            ],
-        },
+                [
+                    1654006170000,
+                    7.736401673473903
+                ],
+                [
+                    1654006185000,
+                    7.733891213538757
+                ],
+                [
+                    1654006200000,
+                    7.731101813010433
+                ],
+                [
+                    1654006215000,
+                    7.722454672079215
+                ],
+                [
+                    1654006230000,
+                    7.722733612256738
+                ]
+            ]
+        }
     };
     const exampleChartsTheme = {
         themeName: 'perses',
@@ -33,13 +68,22 @@ describe('StatChart', () => {
         noDataOption: {},
         sparkline: {
             width: 1,
-            color: '#000000',
-        },
+            color: '#000000'
+        }
     };
-    describe('Render default options (no sparkline)', () => {
-        it('should render', () => {
-            (0, react_1.render)((0, jsx_runtime_1.jsx)(ChartsThemeProvider_1.ChartsThemeProvider, { themeName: "perses", chartsTheme: exampleChartsTheme, children: (0, jsx_runtime_1.jsx)(StatChart_1.StatChart, { width: contentDimensions.width, height: contentDimensions.height, data: mockStatData, unit: unit }) }));
-            expect(react_1.screen.getByText('7.73')).toBeInTheDocument();
+    describe('Render default options (no sparkline)', ()=>{
+        it('should render', ()=>{
+            (0, _react1.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartsThemeProvider.ChartsThemeProvider, {
+                themeName: "perses",
+                chartsTheme: exampleChartsTheme,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_statChart.StatChart, {
+                    width: contentDimensions.width,
+                    height: contentDimensions.height,
+                    data: mockStatData,
+                    unit: unit
+                })
+            }));
+            expect(_react1.screen.getByText('7.73')).toBeInTheDocument();
         });
     });
 });

package/dist/cjs/StatChart/index.js

@@ -1,4 +1,3 @@
-"use strict";
 // Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,19 +10,19 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./StatChart"), exports);
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./StatChart"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/TimeRangeSelector/AbsoluteTimePicker.js

@@ -1,7 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AbsoluteTimePicker = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 // Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -14,88 +10,172 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-const react_1 = require("react");
-const material_1 = require("@mui/material");
-const x_date_pickers_1 = require("@mui/x-date-pickers");
-const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
-const date_fns_1 = require("date-fns");
-const utils_1 = require("./utils");
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AbsoluteTimePicker", {
+    enumerable: true,
+    get: ()=>AbsoluteTimePicker
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _xDatePickers = require("@mui/x-date-pickers");
+const _adapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
+const _dateFns = require("date-fns");
+const _utils = require("./utils");
 const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
-const AbsoluteTimePicker = ({ initialTimeRange, onChange }) => {
-    const [timeRange, setTimeRange] = (0, react_1.useState)(initialTimeRange);
-    const [showStartCalendar, setShowStartCalendar] = (0, react_1.useState)(true);
+const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
+    const [timeRange, setTimeRange] = (0, _react.useState)(initialTimeRange);
+    const [showStartCalendar, setShowStartCalendar] = (0, _react.useState)(true);
     // validate start and end time, propagate changes
-    const updateDateRange = (input, isStartDate) => {
+    const updateDateRange = (input, isStartDate)=>{
         const newDate = new Date(input);
         if (isStartDate === true) {
-            const isValidDateRange = (0, utils_1.validateDateRange)(newDate, timeRange.end);
+            const isValidDateRange = (0, _utils.validateDateRange)(newDate, timeRange.end);
             if (isValidDateRange === true) {
-                setTimeRange((current) => {
-                    const updatedRange = { start: newDate, end: current.end };
+                setTimeRange((current)=>{
+                    const updatedRange = {
+                        start: newDate,
+                        end: current.end
+                    };
                     onChange(updatedRange);
                     return updatedRange;
                 });
             }
-        }
-        else {
-            const isValidDateRange = (0, utils_1.validateDateRange)(timeRange.start, newDate);
-            if (isValidDateRange === true) {
-                setTimeRange((current) => {
-                    const updatedRange = { start: current.start, end: newDate };
+        } else {
+            const isValidDateRange1 = (0, _utils.validateDateRange)(timeRange.start, newDate);
+            if (isValidDateRange1 === true) {
+                setTimeRange((current)=>{
+                    const updatedRange = {
+                        start: current.start,
+                        end: newDate
+                    };
                     onChange(updatedRange);
                     return updatedRange;
                 });
             }
         }
     };
-    return ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterDateFns_1.AdapterDateFns, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 3, sx: { padding: (theme) => theme.spacing(1, 2, 3) }, children: [showStartCalendar && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: (theme) => ({
-                        // TODO: create separate reusable calendar component
-                        '.MuiPickerStaticWrapper-content': {
-                            backgroundColor: theme.palette.background.default,
-                        },
-                        // reposition AM and PM buttons
-                        '.MuiIconButton-sizeMedium': {
-                            top: 80,
-                            bottom: 'auto',
-                            margin: theme.spacing(0, 3),
-                        },
-                    }), children: [(0, jsx_runtime_1.jsx)("h3", { children: "Select Start Time" }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.StaticDateTimePicker, { displayStaticWrapperAs: "desktop", openTo: "day", disableHighlightToday: true, value: initialTimeRange.start, onChange: (newValue) => {
-                                if (newValue === null)
-                                    return;
-                                setTimeRange((current) => {
-                                    return { start: newValue, end: current.end };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_xDatePickers.LocalizationProvider, {
+        dateAdapter: _adapterDateFns.AdapterDateFns,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+            spacing: 3,
+            sx: {
+                padding: (theme)=>theme.spacing(1, 2, 3)
+            },
+            children: [
+                showStartCalendar && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    sx: (theme)=>({
+                            // TODO: create separate reusable calendar component
+                            '.MuiPickerStaticWrapper-content': {
+                                backgroundColor: theme.palette.background.default
+                            },
+                            // reposition AM and PM buttons
+                            '.MuiIconButton-sizeMedium': {
+                                top: 80,
+                                bottom: 'auto',
+                                margin: theme.spacing(0, 3)
+                            }
+                        }),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)("h3", {
+                            children: "Select Start Time"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_xDatePickers.StaticDateTimePicker, {
+                            displayStaticWrapperAs: "desktop",
+                            openTo: "day",
+                            disableHighlightToday: true,
+                            value: initialTimeRange.start,
+                            onChange: (newValue)=>{
+                                if (newValue === null) return;
+                                setTimeRange((current)=>{
+                                    return {
+                                        start: newValue,
+                                        end: current.end
+                                    };
                                 });
-                            }, onAccept: () => {
+                            },
+                            onAccept: ()=>{
                                 setShowStartCalendar(false);
-                            }, renderInput: (params) => (0, jsx_runtime_1.jsx)(material_1.TextField, { ...params }) })] })), !showStartCalendar && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: (theme) => ({
-                        '.MuiPickerStaticWrapper-content': {
-                            backgroundColor: theme.palette.background.default,
-                        },
-                        // reposition AM and PM buttons
-                        '.MuiIconButton-sizeMedium': {
-                            top: 80,
-                            bottom: 'auto',
-                            margin: theme.spacing(0, 3),
-                        },
-                    }), children: [(0, jsx_runtime_1.jsx)("h3", { children: "Select End Time" }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.StaticDateTimePicker, { displayStaticWrapperAs: "desktop", openTo: "day", disableHighlightToday: true, value: initialTimeRange.end, minDateTime: timeRange.start, onChange: (newValue) => {
-                                if (newValue === null)
-                                    return;
-                                setTimeRange((current) => {
-                                    return { start: current.start, end: newValue };
+                            },
+                            renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                    ...params
+                                })
+                        })
+                    ]
+                }),
+                !showStartCalendar && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    sx: (theme)=>({
+                            '.MuiPickerStaticWrapper-content': {
+                                backgroundColor: theme.palette.background.default
+                            },
+                            // reposition AM and PM buttons
+                            '.MuiIconButton-sizeMedium': {
+                                top: 80,
+                                bottom: 'auto',
+                                margin: theme.spacing(0, 3)
+                            }
+                        }),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)("h3", {
+                            children: "Select End Time"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_xDatePickers.StaticDateTimePicker, {
+                            displayStaticWrapperAs: "desktop",
+                            openTo: "day",
+                            disableHighlightToday: true,
+                            value: initialTimeRange.end,
+                            minDateTime: timeRange.start,
+                            onChange: (newValue)=>{
+                                if (newValue === null) return;
+                                setTimeRange((current)=>{
+                                    return {
+                                        start: current.start,
+                                        end: newValue
+                                    };
                                 });
-                            }, onAccept: () => {
+                            },
+                            onAccept: ()=>{
                                 setShowStartCalendar(true);
                                 onChange(timeRange);
-                            }, renderInput: (params) => (0, jsx_runtime_1.jsx)(material_1.TextField, { ...params }) })] })), (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, onChange: (event) => {
+                            },
+                            renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                    ...params
+                                })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                    fullWidth: true,
+                    onChange: (event)=>{
                         // TODO: add helperText, fix validation after we decide on form state solution
                         updateDateRange(event.target.value, true);
-                    }, value: (0, date_fns_1.format)(timeRange.start, DATE_TIME_FORMAT), label: "Start Time", placeholder: "mm/dd/yyyy hh:mm", 
+                    },
+                    value: (0, _dateFns.format)(timeRange.start, DATE_TIME_FORMAT),
+                    label: "Start Time",
+                    placeholder: "mm/dd/yyyy hh:mm",
                     // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590
-                    type: "tel" }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: (theme) => ({
-                        margin: theme.spacing(2, 0),
-                        borderColor: theme.palette.grey['500'],
-                    }) }), (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, onChange: (event) => {
+                    type: "tel"
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {
+                    sx: (theme)=>({
+                            margin: theme.spacing(2, 0),
+                            borderColor: theme.palette.grey['500']
+                        })
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                    fullWidth: true,
+                    onChange: (event)=>{
                         updateDateRange(event.target.value, false);
-                    }, value: (0, date_fns_1.format)(timeRange.end, DATE_TIME_FORMAT), label: "End Time", placeholder: "mm/dd/yyyy hh:mm", type: "tel" })] }) }));
+                    },
+                    value: (0, _dateFns.format)(timeRange.end, DATE_TIME_FORMAT),
+                    label: "End Time",
+                    placeholder: "mm/dd/yyyy hh:mm",
+                    type: "tel"
+                })
+            ]
+        })
+    });
 };
-exports.AbsoluteTimePicker = AbsoluteTimePicker;

package/dist/cjs/TimeRangeSelector/TimeRangeSelector.js

@@ -1,10 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimeRangeSelector = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 // Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -17,24 +10,54 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-const material_1 = require("@mui/material");
-const Event_1 = __importDefault(require("@mui/icons-material/Event"));
-const core_1 = require("@perses-dev/core");
-const utils_1 = require("./utils");
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TimeRangeSelector", {
+    enumerable: true,
+    get: ()=>TimeRangeSelector
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _event = /*#__PURE__*/ _interopRequireDefault(require("@mui/icons-material/Event"));
+const _core = require("@perses-dev/core");
+const _utils = require("./utils");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
 function TimeRangeSelector(props) {
-    const { value, timeOptions, onSelectChange, onCustomClick } = props;
-    const formattedValue = !(0, core_1.isRelativeTimeRange)(value)
-        ? (0, utils_1.formatAbsoluteRange)(value, DATE_TIME_FORMAT)
-        : value.pastDuration;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Select, { value: formattedValue, onChange: onSelectChange, IconComponent: Event_1.default, sx: {
+    const { value , timeOptions , onSelectChange , onCustomClick  } = props;
+    const formattedValue = !(0, _core.isRelativeTimeRange)(value) ? (0, _utils.formatAbsoluteRange)(value, DATE_TIME_FORMAT) : value.pastDuration;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
+        value: formattedValue,
+        onChange: onSelectChange,
+        IconComponent: _event.default,
+        sx: {
             '.MuiSelect-icon': {
-                marginTop: '1px',
-            },
-        }, children: [timeOptions.map((item, idx) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: item.value.pastDuration, children: item.display }, idx))), (0, core_1.isRelativeTimeRange)(value) ? ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => {
+                marginTop: '1px'
+            }
+        },
+        children: [
+            timeOptions.map((item, idx)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                    value: item.value.pastDuration,
+                    children: item.display
+                }, idx)),
+            (0, _core.isRelativeTimeRange)(value) ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                onClick: ()=>{
                     onCustomClick();
-                }, children: "Custom time range" })) : ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: formattedValue, onClick: () => {
+                },
+                children: "Custom time range"
+            }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                value: formattedValue,
+                onClick: ()=>{
                     onCustomClick();
-                }, children: formattedValue }))] }));
+                },
+                children: formattedValue
+            })
+        ]
+    });
 }
-exports.TimeRangeSelector = TimeRangeSelector;

package/dist/cjs/TimeRangeSelector/index.js

@@ -1,4 +1,3 @@
-"use strict";
 // Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,20 +10,20 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./TimeRangeSelector"), exports);
-__exportStar(require("./AbsoluteTimePicker"), exports);
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./TimeRangeSelector"), exports);
+_exportStar(require("./AbsoluteTimePicker"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/TimeRangeSelector/utils.js

@@ -1,4 +1,3 @@
-"use strict";
 // Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,31 +10,35 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatAbsoluteRange = exports.validateDateRange = void 0;
-const date_fns_1 = require("date-fns");
-/*
- * Date validation and check if end is after start
- */
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    validateDateRange: ()=>validateDateRange,
+    formatAbsoluteRange: ()=>formatAbsoluteRange
+});
+const _dateFns = require("date-fns");
 function validateDateRange(startDate, endDate) {
     // TODO: display error as helperText
-    if (!(0, date_fns_1.isValid)(startDate) || !(0, date_fns_1.isValid)(endDate)) {
+    if (!(0, _dateFns.isValid)(startDate) || !(0, _dateFns.isValid)(endDate)) {
         console.error('Invalid Date');
         return false;
     }
-    if (!(0, date_fns_1.isBefore)(startDate, endDate)) {
+    if (!(0, _dateFns.isBefore)(startDate, endDate)) {
         console.error('End Time is before Start Time');
         return false;
     }
     return true;
 }
-exports.validateDateRange = validateDateRange;
-/**
- * Format start and end time based on provided date format
- */
 function formatAbsoluteRange(timeRange, dateFormat) {
-    const formattedStart = (0, date_fns_1.format)(timeRange.start, dateFormat);
-    const formattedEnd = (0, date_fns_1.format)(timeRange.end, dateFormat);
+    const formattedStart = (0, _dateFns.format)(timeRange.start, dateFormat);
+    const formattedEnd = (0, _dateFns.format)(timeRange.end, dateFormat);
     return `${formattedStart} - ${formattedEnd}`;
 }
-exports.formatAbsoluteRange = formatAbsoluteRange;