@mailstep/design-system 0.8.30 → 0.8.31-beta.2

package/ui/Blocks/Scheduler/components/TimeSlots/hooks/useRangeSelection.js

@@ -1,46 +1,47 @@
-import { convertIndexToISOString } from "../../../utils/convertIndexToISOString.js";
-import { useCallback, useState } from "react";
-//#region packages/ui/Blocks/Scheduler/components/TimeSlots/hooks/useRangeSelection.ts
-const useRangeSelection = ({ handleSelectTimeSlot, date }) => {
-	const [isSelecting, setIsSelecting] = useState(false);
-	const [selectionRange, setSelectionRange] = useState([]);
-	const [selectedGroup, setSelectedGroup] = useState(null);
-	return {
-		handleMouseDown: useCallback((index, groupId) => () => {
-			setSelectionRange([index]);
-			setIsSelecting(true);
-			setSelectedGroup(groupId);
-		}, []),
-		handleMouseOver: useCallback((index) => () => {
-			if (!isSelecting) return;
-			setSelectionRange((prevRange) => {
-				const start = prevRange[0];
-				const end = prevRange.at(-1);
-				if (end && (end < index ? end + 1 !== index : end - 1 !== index)) return [index];
-				return Array.from({ length: Math.abs(index - start) + 1 }, (_, i) => start < index ? start + i : start - i);
-			});
-		}, [isSelecting]),
-		handleMouseUp: useCallback(() => {
-			setIsSelecting(false);
-			if (selectedGroup && selectionRange?.length) {
-				const start = selectionRange[0];
-				const end = (selectionRange.at(-1) ?? 0) + 1;
-				handleSelectTimeSlot?.({
-					groupId: selectedGroup,
-					from: convertIndexToISOString(start, date),
-					to: convertIndexToISOString(end, date)
-				});
-			}
-			setSelectedGroup(null);
-			setSelectionRange([]);
-		}, [
-			date,
-			handleSelectTimeSlot,
-			selectedGroup,
-			selectionRange
-		]),
-		isSlotSelected: useCallback((index, groupId) => groupId === selectedGroup && selectionRange.includes(index), [selectionRange, selectedGroup])
-	};
+import { useCallback, useState } from 'react';
+import { convertIndexToISOString } from '../../../utils/convertIndexToISOString';
+export var useRangeSelection = function (_a) {
+    var handleSelectTimeSlot = _a.handleSelectTimeSlot, date = _a.date;
+    var _b = useState(false), isSelecting = _b[0], setIsSelecting = _b[1];
+    var _c = useState([]), selectionRange = _c[0], setSelectionRange = _c[1];
+    var _d = useState(null), selectedGroup = _d[0], setSelectedGroup = _d[1];
+    var handleMouseDown = useCallback(function (index, groupId) { return function () {
+        setSelectionRange([index]);
+        setIsSelecting(true);
+        setSelectedGroup(groupId);
+    }; }, []);
+    var handleMouseOver = useCallback(function (index) { return function () {
+        if (!isSelecting)
+            return;
+        setSelectionRange(function (prevRange) {
+            var start = prevRange[0];
+            var end = prevRange.at(-1);
+            if (end && (end < index ? end + 1 !== index : end - 1 !== index)) {
+                return [index];
+            }
+            return Array.from({ length: Math.abs(index - start) + 1 }, function (_, i) { return (start < index ? start + i : start - i); });
+        });
+    }; }, [isSelecting]);
+    var handleMouseUp = useCallback(function () {
+        var _a;
+        setIsSelecting(false);
+        if (selectedGroup && (selectionRange === null || selectionRange === void 0 ? void 0 : selectionRange.length)) {
+            var start = selectionRange[0];
+            var end = ((_a = selectionRange.at(-1)) !== null && _a !== void 0 ? _a : 0) + 1;
+            handleSelectTimeSlot === null || handleSelectTimeSlot === void 0 ? void 0 : handleSelectTimeSlot({
+                groupId: selectedGroup,
+                from: convertIndexToISOString(start, date),
+                to: convertIndexToISOString(end, date)
+            });
+        }
+        setSelectedGroup(null);
+        setSelectionRange([]);
+    }, [date, handleSelectTimeSlot, selectedGroup, selectionRange]);
+    var isSlotSelected = useCallback(function (index, groupId) { return groupId === selectedGroup && selectionRange.includes(index); }, [selectionRange, selectedGroup]);
+    return {
+        handleMouseDown: handleMouseDown,
+        handleMouseOver: handleMouseOver,
+        handleMouseUp: handleMouseUp,
+        isSlotSelected: isSlotSelected
+    };
 };
-//#endregion
-export { useRangeSelection };

package/ui/Blocks/Scheduler/components/TimeSlots/hooks/useScroll.d.ts

@@ -1,4 +1,5 @@
 import { MutableRefObject } from 'react';
+
 type HookType = () => {
     containerRef: MutableRefObject<HTMLTableSectionElement | null>;
 };

package/ui/Blocks/Scheduler/components/TimeSlots/hooks/useScroll.js

@@ -1,16 +1,16 @@
-import { useEffect, useRef } from "react";
-//#region packages/ui/Blocks/Scheduler/components/TimeSlots/hooks/useScroll.ts
-const useScroll = () => {
-	const containerRef = useRef(null);
-	useEffect(() => {
-		const hours = String((/* @__PURE__ */ new Date()).getHours()).padStart(2, "0");
-		const timeElement = containerRef?.current?.querySelector(`[data-time="${hours}:00"]`);
-		if (timeElement) timeElement.scrollIntoView({
-			behavior: "smooth",
-			block: "center"
-		});
-	}, []);
-	return { containerRef };
+import { useEffect, useRef } from 'react';
+export var useScroll = function () {
+    var containerRef = useRef(null);
+    useEffect(function () {
+        var _a;
+        var now = new Date();
+        var hours = String(now.getHours()).padStart(2, '0');
+        var timeElement = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-time=\"".concat(hours, ":00\"]"));
+        if (timeElement) {
+            timeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }, []);
+    return {
+        containerRef: containerRef
+    };
 };
-//#endregion
-export { useScroll };

package/ui/Blocks/Scheduler/components/TimeSlots/index.d.ts

@@ -1,5 +1,6 @@
-import { type FC } from 'react';
-import { type SchedulerProps, type TimeSlotType } from '../../types';
+import { FC } from 'react';
+import { SchedulerProps, TimeSlotType } from '../../types';
+
 type TimeSlotsProps = {
     timeArray: string[];
     groups?: SchedulerProps['groups'];

package/ui/Blocks/Scheduler/components/TimeSlots/index.js

@@ -1,48 +1,21 @@
-import { isActiveTime } from "../../utils/isActiveTime.js";
-import { BookedTimeSlots } from "../BookedTimeSlots/index.js";
-import { CurrentTimeMarker } from "../CurrentTimeMarker/index.js";
-import { useRangeSelection } from "./hooks/useRangeSelection.js";
-import { useScroll } from "./hooks/useScroll.js";
-import { EmptyTimeSlot, TimeInterval, TimeRow, TimeSlotsContainer } from "./styles.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Blocks/Scheduler/components/TimeSlots/index.tsx
-const TimeSlots = ({ timeArray, groups, activeHours, timeSlots, handleSelectTimeSlot, handleTimeSlotClick, isTodayDate, date, timeSlotDefinitions }) => {
-	const { containerRef } = useScroll();
-	const { handleMouseUp, handleMouseDown, handleMouseOver, isSlotSelected } = useRangeSelection({
-		handleSelectTimeSlot,
-		date
-	});
-	return /* @__PURE__ */ jsxs(TimeSlotsContainer, {
-		ref: containerRef,
-		children: [timeArray.map((time, index) => {
-			const activeTime = isActiveTime({
-				activeHours,
-				time
-			});
-			return /* @__PURE__ */ jsxs(TimeRow, {
-				disabled: !activeTime,
-				"data-time": time,
-				children: [/* @__PURE__ */ jsx(TimeInterval, { children: time }), groups?.map((group) => {
-					const bookedTimeSlots = timeSlots?.[`${group.id}-${time}`] ?? [];
-					const canSelectSlot = !bookedTimeSlots.length && activeTime;
-					return /* @__PURE__ */ jsx(EmptyTimeSlot, {
-						groupsCount: groups?.length,
-						activeTime,
-						isSlotSelected: canSelectSlot && isSlotSelected(index, group.id),
-						onMouseDown: canSelectSlot ? handleMouseDown(index, group.id) : void 0,
-						onMouseOver: canSelectSlot ? handleMouseOver(index) : void 0,
-						onMouseUp: canSelectSlot ? handleMouseUp : void 0,
-						children: /* @__PURE__ */ jsx(BookedTimeSlots, {
-							bookedTimeSlots,
-							timeSlotDefinitions,
-							time,
-							handleTimeSlotClick
-						})
-					}, group.id);
-				})]
-			}, time);
-		}), isTodayDate && /* @__PURE__ */ jsx(CurrentTimeMarker, {})]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isActiveTime } from '../../utils/isActiveTime';
+import { BookedTimeSlots } from '../BookedTimeSlots';
+import { CurrentTimeMarker } from '../CurrentTimeMarker';
+import { useRangeSelection } from './hooks/useRangeSelection';
+import { useScroll } from './hooks/useScroll';
+import { EmptyTimeSlot, TimeInterval, TimeRow, TimeSlotsContainer } from './styles';
+export var TimeSlots = function (_a) {
+    var timeArray = _a.timeArray, groups = _a.groups, activeHours = _a.activeHours, timeSlots = _a.timeSlots, handleSelectTimeSlot = _a.handleSelectTimeSlot, handleTimeSlotClick = _a.handleTimeSlotClick, isTodayDate = _a.isTodayDate, date = _a.date, timeSlotDefinitions = _a.timeSlotDefinitions;
+    var containerRef = useScroll().containerRef;
+    var _b = useRangeSelection({ handleSelectTimeSlot: handleSelectTimeSlot, date: date }), handleMouseUp = _b.handleMouseUp, handleMouseDown = _b.handleMouseDown, handleMouseOver = _b.handleMouseOver, isSlotSelected = _b.isSlotSelected;
+    return (_jsxs(TimeSlotsContainer, { ref: containerRef, children: [timeArray.map(function (time, index) {
+                var activeTime = isActiveTime({ activeHours: activeHours, time: time });
+                return (_jsxs(TimeRow, { disabled: !activeTime, "data-time": time, children: [_jsx(TimeInterval, { children: time }), groups === null || groups === void 0 ? void 0 : groups.map(function (group) {
+                            var _a;
+                            var bookedTimeSlots = (_a = timeSlots === null || timeSlots === void 0 ? void 0 : timeSlots["".concat(group.id, "-").concat(time)]) !== null && _a !== void 0 ? _a : [];
+                            var canSelectSlot = !bookedTimeSlots.length && activeTime;
+                            return (_jsx(EmptyTimeSlot, { groupsCount: groups === null || groups === void 0 ? void 0 : groups.length, activeTime: activeTime, isSlotSelected: canSelectSlot && isSlotSelected(index, group.id), onMouseDown: canSelectSlot ? handleMouseDown(index, group.id) : undefined, onMouseOver: canSelectSlot ? handleMouseOver(index) : undefined, onMouseUp: canSelectSlot ? handleMouseUp : undefined, children: _jsx(BookedTimeSlots, { bookedTimeSlots: bookedTimeSlots, timeSlotDefinitions: timeSlotDefinitions, time: time, handleTimeSlotClick: handleTimeSlotClick }) }, group.id));
+                        })] }, time));
+            }), isTodayDate && _jsx(CurrentTimeMarker, {})] }));
 };
-//#endregion
-export { TimeSlots };

package/ui/Blocks/Scheduler/components/TimeSlots/styles.d.ts

@@ -1,10 +1,10 @@
-export declare const TimeSlotsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const TimeRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const TimeSlotsContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const TimeRow: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     disabled: boolean;
 }, never>;
-export declare const EmptyTimeSlot: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    isSlotSelected?: boolean;
+export declare const EmptyTimeSlot: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    isSlotSelected?: boolean | undefined;
     activeTime: boolean;
     groupsCount: number;
 }, never>;
-export declare const TimeInterval: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const TimeInterval: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/ui/Blocks/Scheduler/components/TimeSlots/styles.js

@@ -1,52 +1,23 @@
-import "../../utils/constants.js";
-import styled$1, { th } from "@xstyled/styled-components";
-//#region packages/ui/Blocks/Scheduler/components/TimeSlots/styles.ts
-const TimeSlotsContainer = styled$1.div`
-  position: relative;
-  overflow-y: auto;
-  flex-grow: 1;
-  width: fit-content;
-
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  scroll-behavior: smooth;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`;
-const TimeRow = styled$1.div`
-  background-color: ${({ disabled }) => disabled ? th.color("lightGray7") : "white"};
-  display: flex;
-  width: fit-content;
-  border-bottom: 1px solid ${th.color("lightGray6")};
-`;
-const EmptyTimeSlot = styled$1.div`
-  height: ${75}px;
-  flex-shrink: 0;
-  min-width: 350px;
-  box-sizing: border-box;
-  position: relative;
-  background-color: ${({ isSlotSelected }) => isSlotSelected ? th.color("blue20") : ""};
-  cursor: ${({ isSlotSelected, activeTime }) => isSlotSelected || !activeTime ? "default" : "pointer"};
-  border-right: 1px solid ${th.color("lightGray6")};
-
-  &:last-child {
-    border-right: none;
-  }
-
-  &:hover {
-    background-color: ${({ isSlotSelected, activeTime }) => !isSlotSelected && activeTime ? th.color("blue10") : ""};
-  }
-`;
-const TimeInterval = styled$1.div`
-  font-size: 12px;
-  font-weight: 500;
-  height: ${75}px;
-  width: ${53}px;
-  border-right: 1px solid ${th.color("lightGray6")};
-  padding: 10px;
-  min-width: ${53}px;
-`;
-//#endregion
-export { EmptyTimeSlot, TimeInterval, TimeRow, TimeSlotsContainer };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { minuteHeight, stepInMinutes, timeIntervalWidth } from '../../utils/constants';
+import styled, { th } from '@xstyled/styled-components';
+export var TimeSlotsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  width: fit-content;\n\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-behavior: smooth;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  width: fit-content;\n\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-behavior: smooth;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+export var TimeRow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  width: fit-content;\n  border-bottom: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  display: flex;\n  width: fit-content;\n  border-bottom: 1px solid ", ";\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? th.color('lightGray7') : 'white');
+}, th.color('lightGray6'));
+export var EmptyTimeSlot = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: ", "px;\n  flex-shrink: 0;\n  min-width: 350px;\n  box-sizing: border-box;\n  position: relative;\n  background-color: ", ";\n  cursor: ", ";\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  height: ", "px;\n  flex-shrink: 0;\n  min-width: 350px;\n  box-sizing: border-box;\n  position: relative;\n  background-color: ", ";\n  cursor: ", ";\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), minuteHeight * stepInMinutes, function (_a) {
+    var isSlotSelected = _a.isSlotSelected;
+    return (isSlotSelected ? th.color('blue20') : '');
+}, function (_a) {
+    var isSlotSelected = _a.isSlotSelected, activeTime = _a.activeTime;
+    return (isSlotSelected || !activeTime ? 'default' : 'pointer');
+}, th.color('lightGray6'), function (_a) {
+    var isSlotSelected = _a.isSlotSelected, activeTime = _a.activeTime;
+    return (!isSlotSelected && activeTime ? th.color('blue10') : '');
+});
+export var TimeInterval = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 12px;\n  font-weight: 500;\n  height: ", "px;\n  width: ", "px;\n  border-right: 1px solid ", ";\n  padding: 10px;\n  min-width: ", "px;\n"], ["\n  font-size: 12px;\n  font-weight: 500;\n  height: ", "px;\n  width: ", "px;\n  border-right: 1px solid ", ";\n  padding: 10px;\n  min-width: ", "px;\n"])), minuteHeight * stepInMinutes, timeIntervalWidth, th.color('lightGray6'), timeIntervalWidth);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/Scheduler/hooks/useChangeDate.d.ts

@@ -1,5 +1,6 @@
-import { type DatePickerType } from '../../../Elements/DatePicker/DatePicker';
-import type { SchedulerProps } from '../types';
+import { DatePickerType } from '../../../Elements/DatePicker/DatePicker';
+import { SchedulerProps } from '../types';
+
 type Props = {
     closeDatePicker: () => void;
     handleReloadTimeSlots: SchedulerProps['handleReloadTimeSlots'];

package/ui/Blocks/Scheduler/hooks/useChangeDate.js

@@ -1,35 +1,34 @@
-import { isToday } from "../utils/isToday.js";
-import { useCallback, useEffect, useState } from "react";
-//#region packages/ui/Blocks/Scheduler/hooks/useChangeDate.ts
-const useChangeDate = ({ closeDatePicker, handleReloadTimeSlots }) => {
-	const [date, setDate] = useState(/* @__PURE__ */ new Date());
-	const handlePrevDay = useCallback(() => {
-		const newDate = new Date(date);
-		newDate.setDate(date.getDate() - 1);
-		setDate(newDate);
-	}, [date]);
-	const handleNextDay = useCallback(() => {
-		const newDate = new Date(date);
-		newDate.setDate(date.getDate() + 1);
-		setDate(newDate);
-	}, [date]);
-	const handleChangeDate = useCallback((dateValue) => {
-		const date = new Date(dateValue);
-		date && setDate(date);
-		closeDatePicker();
-	}, []);
-	const isTodayDate = isToday(date);
-	useEffect(() => {
-		if (!handleReloadTimeSlots) return;
-		handleReloadTimeSlots(date).catch(console.error);
-	}, [date]);
-	return {
-		handlePrevDay,
-		handleNextDay,
-		handleChangeDate,
-		isTodayDate,
-		date
-	};
+import { useCallback, useEffect, useState } from 'react';
+import { isToday } from '../utils/isToday';
+export var useChangeDate = function (_a) {
+    var closeDatePicker = _a.closeDatePicker, handleReloadTimeSlots = _a.handleReloadTimeSlots;
+    var _b = useState(new Date()), date = _b[0], setDate = _b[1];
+    var handlePrevDay = useCallback(function () {
+        var newDate = new Date(date);
+        newDate.setDate(date.getDate() - 1);
+        setDate(newDate);
+    }, [date]);
+    var handleNextDay = useCallback(function () {
+        var newDate = new Date(date);
+        newDate.setDate(date.getDate() + 1);
+        setDate(newDate);
+    }, [date]);
+    var handleChangeDate = useCallback(function (dateValue) {
+        var date = new Date(dateValue);
+        date && setDate(date);
+        closeDatePicker();
+    }, []);
+    var isTodayDate = isToday(date);
+    useEffect(function () {
+        if (!handleReloadTimeSlots)
+            return;
+        handleReloadTimeSlots(date).catch(console.error);
+    }, [date]);
+    return {
+        handlePrevDay: handlePrevDay,
+        handleNextDay: handleNextDay,
+        handleChangeDate: handleChangeDate,
+        isTodayDate: isTodayDate,
+        date: date
+    };
 };
-//#endregion
-export { useChangeDate };

package/ui/Blocks/Scheduler/index.js

@@ -1,2 +1 @@
-import { Scheduler } from "./Scheduler.js";
-export { Scheduler as default };
+export { Scheduler as default } from './Scheduler';

package/ui/Blocks/Scheduler/stories/Scheduler.stories.d.ts

@@ -1,4 +1,5 @@
-import { type FC } from 'react';
+import { FC } from 'react';
+
 declare const meta: {
     title: string;
     tags: string[];

package/ui/Blocks/Scheduler/stories/Scheduler.stories.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pallet } from '../../../Elements/Icon';
+import { LinguiContainer } from '../../../utils/LinguiContainer';
+import { Scheduler } from '../Scheduler';
+import { x } from '@xstyled/styled-components';
+var groups = [
+    { id: 'group1', name: 'Inbound DEA', color: '#DCEFFF' },
+    { id: 'group2', name: 'Aktin', color: '#FFEBE6' },
+    { id: 'group3', name: 'Top4Sport', color: '#F0EDFF' },
+    { id: 'group4', name: 'Wendys', color: '#DEFBE6' }
+];
+var activeHours = {
+    start: '07:00',
+    end: '19:00'
+};
+var timeSlots = [
+    {
+        id: '1',
+        from: '2025-02-06T07:30:00Z',
+        to: '2025-02-06T08:00:00Z',
+        groupId: 'group1',
+        count: 2,
+        organisation: 'Deagostiny',
+        carrier: 'Česká pošta'
+    },
+    {
+        id: '2',
+        from: '2025-02-06T14:35:00Z',
+        to: '2025-02-06T16:30:00Z',
+        groupId: 'group1',
+        count: 5,
+        organisation: 'Wendys',
+        carrier: 'Česká pošta'
+    },
+    {
+        id: '3',
+        from: '2025-02-06T09:40:00Z',
+        to: '2025-02-06T11:45:00Z',
+        groupId: 'group2',
+        count: 1,
+        organisation: 'Deagostiny',
+        carrier: 'Česká pošta'
+    },
+    {
+        id: '4',
+        from: '2025-02-06T12:05:00Z',
+        to: '2025-02-06T15:30:00Z',
+        groupId: 'group2',
+        count: 2,
+        organisation: 'Top4Sport',
+        carrier: 'Česká pošta'
+    },
+    {
+        id: '5',
+        from: '2025-02-06T08:15:00Z',
+        to: '2025-02-06T09:45:00Z',
+        groupId: 'group3',
+        count: 2,
+        organisation: 'Aktin',
+        carrier: 'Česká pošta'
+    },
+    {
+        id: '6',
+        from: '2025-02-06T11:30:00Z',
+        to: '2025-02-06T13:15:00Z',
+        groupId: 'group3',
+        count: 2,
+        organisation: 'Wendys',
+        carrier: 'DPL'
+    },
+    {
+        id: '7',
+        from: '2025-02-06T07:30:00Z',
+        to: '2025-02-06T09:15:00Z',
+        groupId: 'group4',
+        count: 2,
+        organisation: 'Top4Sport',
+        carrier: 'DPL'
+    },
+    {
+        id: '8',
+        from: '2025-02-06T09:30:00Z',
+        to: '2025-02-06T11:30:00Z',
+        groupId: 'group4',
+        count: 2,
+        organisation: 'Aktin',
+        carrier: 'DPL'
+    },
+    {
+        id: '9',
+        from: '2025-02-06T13:30:00Z',
+        to: '2025-02-06T15:00:00Z',
+        groupId: 'group4',
+        count: 2,
+        organisation: 'Wendys',
+        carrier: 'DPL'
+    }
+];
+var timeSlotDefinitions = {
+    count: 'count',
+    icon: _jsx(Pallet, { height: "22px", width: "22px" }),
+    data: ['organisation', 'carrier']
+};
+var handleSelectTimeSlot = function (data) {
+    console.log(data);
+};
+var meta = {
+    title: 'Blocks/Scheduler',
+    tags: ['autodocs']
+};
+export default meta;
+export var Default = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(x.div, { display: "flex", h: "700px", overflow: "hidden", children: _jsx(Scheduler, { groups: groups, activeHours: activeHours, data: timeSlots, handleSelectTimeSlot: handleSelectTimeSlot, timeSlotDefinitions: timeSlotDefinitions }) }) }));
+};

package/ui/Blocks/Scheduler/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const Block: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Block: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/ui/Blocks/Scheduler/styles.js

@@ -1,23 +1,8 @@
-import styled$1, { th } from "@xstyled/styled-components";
-//#region packages/ui/Blocks/Scheduler/styles.ts
-const Block = styled$1.div`
-  background-color: white;
-  color: ${th.color("typoPrimary")};
-  overflow-x: auto;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  border: 1px solid ${th.color("lightGray6")};
-  user-select: none;
-  width: fit-content;
-  height: 100%;
-}
-`;
-const Container = styled$1.div`
-  display: flex;
-  flex-direction: column;
-  overflow-y: hidden;
-  width: 100%;
-`;
-//#endregion
-export { Block, Container };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { th } from '@xstyled/styled-components';
+export var Block = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: white;\n  color: ", ";\n  overflow-x: auto;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid ", ";\n  user-select: none;\n  width: fit-content;\n  height: 100%;\n}\n"], ["\n  background-color: white;\n  color: ", ";\n  overflow-x: auto;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid ", ";\n  user-select: none;\n  width: fit-content;\n  height: 100%;\n}\n"])), th.color('typoPrimary'), th.color('lightGray6'));
+export var Container = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  overflow-y: hidden;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  overflow-y: hidden;\n  width: 100%;\n"])));
+var templateObject_1, templateObject_2;

package/ui/Blocks/Scheduler/types.d.ts

@@ -1,4 +1,5 @@
-import type { ReactNode } from 'react';
+import { ReactNode } from 'react';
+
 export type GroupType = {
     id: string;
     name: string;

package/ui/Blocks/Scheduler/utils/constants.js

@@ -1,9 +1,6 @@
-//#region packages/ui/Blocks/Scheduler/utils/constants.ts
-const groupsHeight = 38;
-const timeIntervalWidth = 53;
-const minuteHeight = 5;
-const stepInMinutes = 15;
-const currentTimeHeight = 22;
-const currentTimeWidth = 35;
-//#endregion
-export { currentTimeHeight, currentTimeWidth, groupsHeight, minuteHeight, stepInMinutes, timeIntervalWidth };
+export var groupsHeight = 38;
+export var timeIntervalWidth = 53;
+export var minuteHeight = 5;
+export var stepInMinutes = 15;
+export var currentTimeHeight = 22;
+export var currentTimeWidth = 35;

package/ui/Blocks/Scheduler/utils/convertDateToTime.js

@@ -1,6 +1,5 @@
-//#region packages/ui/Blocks/Scheduler/utils/convertDateToTime.ts
-const convertDateToTime = (date) => {
-	return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+export var convertDateToTime = function (date) {
+    var hours = String(date.getHours()).padStart(2, '0');
+    var minutes = String(date.getMinutes()).padStart(2, '0');
+    return "".concat(hours, ":").concat(minutes);
 };
-//#endregion
-export { convertDateToTime };

package/ui/Blocks/Scheduler/utils/convertIndexToISOString.js

@@ -1,11 +1,8 @@
-import "./constants.js";
-//#region packages/ui/Blocks/Scheduler/utils/convertIndexToISOString.ts
-const convertIndexToISOString = (index, date) => {
-	const totalMinutes = 15 * index;
-	const hours = Math.floor(totalMinutes / 60);
-	const minutes = totalMinutes % 60;
-	date.setHours(hours, minutes, 0, 0);
-	return date.toISOString();
+import { stepInMinutes } from './constants';
+export var convertIndexToISOString = function (index, date) {
+    var totalMinutes = stepInMinutes * index;
+    var hours = Math.floor(totalMinutes / 60);
+    var minutes = totalMinutes % 60;
+    date.setHours(hours, minutes, 0, 0);
+    return date.toISOString();
 };
-//#endregion
-export { convertIndexToISOString };