@mailstep/design-system 0.8.26 → 0.8.27-beta.1

package/ui/Blocks/Scheduler/components/CurrentTimeMarker/hooks/useCurrentTime.js

@@ -0,0 +1,17 @@
+import { convertDateToTime } from "../../../utils/convertDateToTime.js";
+import { useEffect, useState } from "react";
+//#region packages/ui/Blocks/Scheduler/components/CurrentTimeMarker/hooks/useCurrentTime.ts
+const useCurrentTime = () => {
+	const [time, setTime] = useState(/* @__PURE__ */ new Date());
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setTime(/* @__PURE__ */ new Date());
+		}, 6e4);
+		return () => {
+			clearInterval(interval);
+		};
+	}, []);
+	return { time: convertDateToTime(time) };
+};
+//#endregion
+export { useCurrentTime };

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

@@ -1,3 +1,2 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 export declare const CurrentTimeMarker: FC;

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

@@ -0,0 +1,14 @@
+import { getMinutesFromTime } from "../../utils/getMinutesFromTime.js";
+import { useCurrentTime } from "./hooks/useCurrentTime.js";
+import { CurrentTime, CurrentTimeContainer, Line } from "./styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/Scheduler/components/CurrentTimeMarker/index.tsx
+const CurrentTimeMarker = () => {
+	const { time } = useCurrentTime();
+	return /* @__PURE__ */ jsxs(CurrentTimeContainer, {
+		minutes: getMinutesFromTime(time),
+		children: [/* @__PURE__ */ jsx(CurrentTime, { children: time }), /* @__PURE__ */ jsx(Line, {})]
+	});
+};
+//#endregion
+export { CurrentTimeMarker };

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

@@ -1,5 +1,5 @@
-export declare const CurrentTimeContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const CurrentTimeContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     minutes: number;
 }, never>;
-export declare const CurrentTime: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const Line: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const CurrentTime: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Line: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

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

@@ -0,0 +1,30 @@
+import "../../utils/constants.js";
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Scheduler/components/CurrentTimeMarker/styles.ts
+const CurrentTimeContainer = styled$1.div`
+  position: absolute;
+  top: ${({ minutes }) => `${minutes * 5 - 22 / 2}px`};
+  left: 0;
+  padding-left: 10px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  height: ${22}px;
+  z-index: 1;
+`;
+const CurrentTime = styled$1.div`
+  font-size: 10px;
+  color: white;
+  font-weight: 600;
+  background-color: ${th.color("red1")};
+  width: ${35}px;
+  padding: 5px;
+  border-radius: 14px;
+`;
+const Line = styled$1.div`
+  background-color: ${th.color("red1")};
+  width: calc(100% - ${35}px);
+  height: 1px;
+`;
+//#endregion
+export { CurrentTime, CurrentTimeContainer, Line };

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DatePickerType } from '../../../../Elements/DatePicker/DatePicker';
-
+import { type FC } from 'react';
+import { type DatePickerType } from '../../../../Elements/DatePicker/DatePicker';
 type DateChangerProps = {
     isLoading?: boolean;
     isDatepickerOpen: boolean;

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

@@ -0,0 +1,50 @@
+import { ArrowDown } from "../../../../Elements/Icon/icons/ArrowDown.js";
+import "../../../../Elements/Icon/index.js";
+import { Spinner } from "../../../../Elements/Spinner/Spinner.js";
+import { LanguageContext } from "../../../../ThemeProvider/ThemeProvider.js";
+import DatePicker_default from "../../../../Elements/DatePicker/index.js";
+import Popover from "../../../Popover/index.js";
+import { formatDate } from "../../utils/formatDate.js";
+import { ArrowContainer, DateChangerContainer } from "./styles.js";
+import { useContext, useRef } from "react";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/Scheduler/components/DateChanger/index.tsx
+const DateChanger = ({ isLoading, date, handleChangeDate, closeDatePicker, handleNextDay, handlePrevDay, toggleDatepicker, isDatepickerOpen }) => {
+	const ref = useRef(null);
+	const locale = useContext(LanguageContext);
+	if (isLoading) return /* @__PURE__ */ jsx(x.div, {
+		p: "6px 12px",
+		children: /* @__PURE__ */ jsx(Spinner, { variant: "sm" })
+	});
+	return /* @__PURE__ */ jsxs(DateChangerContainer, { children: [
+		/* @__PURE__ */ jsx(ArrowContainer, {
+			onClick: handlePrevDay,
+			rotate: 90,
+			children: /* @__PURE__ */ jsx(ArrowDown, {})
+		}),
+		/* @__PURE__ */ jsx(x.span, {
+			ref,
+			onClick: toggleDatepicker,
+			cursor: "pointer",
+			children: formatDate(date, locale)
+		}),
+		isDatepickerOpen && /* @__PURE__ */ jsx(Popover, {
+			parentRef: ref,
+			onClose: closeDatePicker,
+			children: /* @__PURE__ */ jsx(DatePicker_default, {
+				value: date,
+				input: false,
+				onChange: handleChangeDate,
+				isSecondDatePicker: true
+			})
+		}),
+		/* @__PURE__ */ jsx(ArrowContainer, {
+			onClick: handleNextDay,
+			rotate: -90,
+			children: /* @__PURE__ */ jsx(ArrowDown, {})
+		})
+	] });
+};
+//#endregion
+export { DateChanger };

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

@@ -1,4 +1,4 @@
-export declare const DateChangerContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const ArrowContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const DateChangerContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const ArrowContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     rotate: number;
 }, never>;

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

@@ -0,0 +1,23 @@
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Scheduler/components/DateChanger/styles.ts
+const DateChangerContainer = styled$1.div`
+  display: flex;
+  margin-bottom: 24px;
+  margin-top: 12px;
+  width: fit-content;
+  align-items: center;
+  column-gap: 12px;
+  font-size: 16px;
+  font-weight: 500;
+`;
+const ArrowContainer = styled$1.div`
+  display: flex;
+  height: 15px;
+  width: 15px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transform: ${({ rotate }) => `rotate(${rotate}deg)`};
+`;
+//#endregion
+export { ArrowContainer, DateChangerContainer };

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { GroupType } from '../../types';
-
+import { type FC } from 'react';
+import { type GroupType } from '../../types';
 type GroupsProps = {
     groups?: GroupType[];
 };

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

@@ -0,0 +1,11 @@
+import { Gap, GroupContainer, GroupItem } from "./styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/Scheduler/components/Groups/index.tsx
+const Groups = ({ groups }) => {
+	return /* @__PURE__ */ jsxs(GroupContainer, { children: [/* @__PURE__ */ jsx(Gap, {}), groups?.map((group, i) => /* @__PURE__ */ jsx(GroupItem, {
+		groupsCount: groups?.length,
+		children: group.name
+	}, group.id))] });
+};
+//#endregion
+export { Groups };

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

@@ -1,6 +1,6 @@
-export declare const GroupContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const GroupItem: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const GroupContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const GroupItem: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     bg?: string;
     groupsCount: number;
 }, never>;
-export declare const Gap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Gap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

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

@@ -0,0 +1,32 @@
+import "../../utils/constants.js";
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Scheduler/components/Groups/styles.ts
+const GroupContainer = styled$1.div`
+  height: ${38}px;
+  display: flex;
+  border-bottom: 1px solid ${th.color("lightGray6")};
+  width: fit-content;
+`;
+const GroupItem = styled$1.div`
+  background-color: ${({ bg }) => bg || th.color("bgLightGray")};
+  flex-shrink: 0;
+  min-width: 350px;
+  height: 100%;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 10px;
+  border-right: 1px solid ${th.color("lightGray6")};
+
+  &:last-child {
+    border-right: none;
+  }
+`;
+const Gap = styled$1.div`
+  background-color: ${th.color("bgLightGray1")};
+  height: 100%;
+  width: ${53}px;
+  min-width: ${53}px;
+  border-right: 1px solid ${th.color("lightGray6")};
+`;
+//#endregion
+export { Gap, GroupContainer, GroupItem };

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

@@ -1,5 +1,4 @@
-import { SchedulerProps } from '../../../types';
-
+import { type SchedulerProps } from '../../../types';
 type Props = {
     handleSelectTimeSlot: SchedulerProps['handleSelectTimeSlot'];
     date: Date;

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

@@ -0,0 +1,46 @@
+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])
+	};
+};
+//#endregion
+export { useRangeSelection };

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

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

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

@@ -0,0 +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 };
+};
+//#endregion
+export { useScroll };

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

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

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

@@ -0,0 +1,48 @@
+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, {})]
+	});
+};
+//#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, {
+export declare const EmptyTimeSlot: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isSlotSelected?: boolean;
     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

@@ -0,0 +1,52 @@
+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 };

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

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

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

@@ -0,0 +1,35 @@
+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
+	};
+};
+//#endregion
+export { useChangeDate };

package/ui/Blocks/Scheduler/index.js

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

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

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

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

@@ -0,0 +1,23 @@
+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 };

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

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

package/ui/Blocks/Scheduler/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+//#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 };

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

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

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

@@ -0,0 +1,11 @@
+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();
+};
+//#endregion
+export { convertIndexToISOString };

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

@@ -0,0 +1,10 @@
+//#region packages/ui/Blocks/Scheduler/utils/convertMinutesToDuration.ts
+const convertMinutesToDuration = (minutes) => {
+	const hours = Math.floor(minutes / 60);
+	const minutesLeft = minutes % 60;
+	if (!hours) return `${minutesLeft} min`;
+	if (!minutesLeft) return `${hours}h`;
+	return `${hours}h ${minutesLeft}m`;
+};
+//#endregion
+export { convertMinutesToDuration };

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

@@ -0,0 +1,8 @@
+//#region packages/ui/Blocks/Scheduler/utils/formatDate.ts
+const formatDate = (date, locale = "en-GB") => date.toLocaleDateString(locale, {
+	day: "2-digit",
+	month: "long",
+	year: "numeric"
+});
+//#endregion
+export { formatDate };

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

@@ -0,0 +1,19 @@
+import "./constants.js";
+//#region packages/ui/Blocks/Scheduler/utils/generateTimeArray.ts
+const generateTimeArray = () => {
+	const times = [];
+	let hours = 0;
+	let minutes = 0;
+	while (hours < 24 || hours === 24 && minutes === 0) {
+		const time = `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+		times.push(time);
+		minutes += 15;
+		if (minutes === 60) {
+			minutes = 0;
+			hours += 1;
+		}
+	}
+	return times;
+};
+//#endregion
+export { generateTimeArray };

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

@@ -0,0 +1,12 @@
+import "./constants.js";
+import { getMinutesFromString } from "./getMinutesFromString.js";
+//#region packages/ui/Blocks/Scheduler/utils/getClosestStep.ts
+const getClosestStep = (date) => {
+	const totalMinutes = getMinutesFromString(date);
+	const closestStep = Math.round(totalMinutes / 15) * 15;
+	const hours = Math.floor(closestStep / 60);
+	const minutes = closestStep % 60;
+	return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+};
+//#endregion
+export { getClosestStep };

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

@@ -0,0 +1,6 @@
+import { getMinutesFromTime } from "./getMinutesFromTime.js";
+import { convertDateToTime } from "./convertDateToTime.js";
+//#region packages/ui/Blocks/Scheduler/utils/getMinutesFromString.ts
+const getMinutesFromString = (date) => getMinutesFromTime(convertDateToTime(new Date(date)));
+//#endregion
+export { getMinutesFromString };