@mailstep/design-system 0.7.21 → 0.7.22-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.21",
+  "version": "0.7.22-beta.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/styles.js

@@ -10,7 +10,7 @@ export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 =
 export var ContentContainer = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  background-color: white;\n  box-shadow: gridShadow;\n  border-radius: 8px;\n  flex-grow: 1;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  background-color: white;\n  box-shadow: gridShadow;\n  border-radius: 8px;\n  flex-grow: 1;\n  height: 100%;\n"])));
 export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: calc(100% - ", "px);\n\n  @media (min-width: 1024px) {\n    height: calc(100% - ", "px);\n  }\n"], ["\n  height: calc(100% - ", "px);\n\n  @media (min-width: 1024px) {\n    height: calc(100% - ", "px);\n  }\n"])), gridFooterHeight, gridFooterHeight);
 export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: ", "px;\n  flex-wrap: wrap;\n  z-index: 3;\n"], ["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: ", "px;\n  flex-wrap: wrap;\n  z-index: 3;\n"])), gridButtonStripHeight);
-export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    padding-left: 12px;\n    border-top: 1px solid ", ";\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 12px;\n    flex-grow: 1;\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: fit-content;\n    padding-bottom: 35px;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n      width: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right, .sticky-left {\n      background: white;\n      z-index: 1;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n      \n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left, .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    max-width: 88px;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"], ["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    padding-left: 12px;\n    border-top: 1px solid ", ";\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 12px;\n    flex-grow: 1;\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: fit-content;\n    padding-bottom: 35px;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n      width: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right, .sticky-left {\n      background: white;\n      z-index: 1;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n      \n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left, .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    max-width: 88px;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), gridButtonStripHeight, th('fonts.primary'), gridRowHeight, gridHeadHeight, th('colors.lightGray6'), th('fonts.primary'), function (_a) {
+export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    padding-left: 12px;\n    border-top: 1px solid ", ";\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 12px;\n    flex-grow: 1;\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    padding-bottom: 35px;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right, .sticky-left {\n      background: white;\n      z-index: 1;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n      \n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left, .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    max-width: 88px;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"], ["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    padding-left: 12px;\n    border-top: 1px solid ", ";\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 12px;\n    flex-grow: 1;\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    padding-bottom: 35px;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right, .sticky-left {\n      background: white;\n      z-index: 1;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n      \n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left, .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    max-width: 88px;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), gridButtonStripHeight, th('fonts.primary'), gridRowHeight, gridHeadHeight, th('colors.lightGray6'), th('fonts.primary'), function (_a) {
     var theme = _a.theme;
     return theme.colors.white;
 });

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

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { type SchedulerProps } from './types';
+export declare const Scheduler: FC<SchedulerProps>;

package/ui/Blocks/Scheduler/Scheduler.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { groupBy } from 'lodash';
+import { useToggleAndClose } from '../../hooks/useToggleAndClose';
+import { DateChanger } from './components/DateChanger';
+import { Groups } from './components/Groups';
+import { TimeSlots } from './components/TimeSlots';
+import { useChangeDate } from './hooks/useChangeDate';
+import { generateTimeArray } from './utils/generateTimeArray';
+import { getClosestStep } from './utils/getClosestStep';
+import { Container } from './styles';
+var timeArray = generateTimeArray();
+export var Scheduler = function (_a) {
+    var groups = _a.groups, activeHours = _a.activeHours, data = _a.data, handleSelectTimeSlot = _a.handleSelectTimeSlot, handleReloadTimeSlots = _a.handleReloadTimeSlots, handleTimeSlotClick = _a.handleTimeSlotClick, isLoading = _a.isLoading;
+    var groupedTimeSlots = useMemo(function () { return groupBy(data, function (_a) {
+        var groupId = _a.groupId, start = _a.start;
+        return "".concat(groupId, "-").concat(getClosestStep(start));
+    }); }, [data]);
+    var _b = useToggleAndClose(false), isDatepickerOpen = _b[0], toggleDatepicker = _b[1], closeDatePicker = _b[2];
+    var _c = useChangeDate({
+        closeDatePicker: closeDatePicker,
+        handleReloadTimeSlots: handleReloadTimeSlots
+    }), handlePrevDay = _c.handlePrevDay, handleNextDay = _c.handleNextDay, handleChangeDate = _c.handleChangeDate, date = _c.date, isTodayDate = _c.isTodayDate;
+    if (!(groups === null || groups === void 0 ? void 0 : groups.length))
+        return null;
+    return (_jsxs("div", { children: [_jsx(DateChanger, { isLoading: isLoading, isDatepickerOpen: isDatepickerOpen, toggleDatepicker: toggleDatepicker, closeDatePicker: closeDatePicker, handlePrevDay: handlePrevDay, handleNextDay: handleNextDay, handleChangeDate: handleChangeDate, date: date }), _jsxs(Container, { children: [_jsx(Groups, { groups: groups }), _jsx(TimeSlots, { timeArray: timeArray, groups: groups, activeHours: activeHours, timeSlots: groupedTimeSlots, handleSelectTimeSlot: !isLoading ? handleSelectTimeSlot : undefined, handleTimeSlotClick: !isLoading ? handleTimeSlotClick : undefined, isTodayDate: isTodayDate })] })] }));
+};

package/ui/Blocks/Scheduler/components/CurrentTimeMarker/hooks/useCurrentTime.d.ts

@@ -0,0 +1,5 @@
+type HookType = () => {
+    time: string;
+};
+export declare const useCurrentTime: HookType;
+export {};

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

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+import { convertDateToTime } from '../../../utils/convertDateToTime';
+export var useCurrentTime = function () {
+    var _a = useState(new Date()), time = _a[0], setTime = _a[1];
+    useEffect(function () {
+        var interval = setInterval(function () {
+            setTime(new Date());
+        }, 60000);
+        return function () {
+            clearInterval(interval);
+        };
+    }, []);
+    var formattedTime = convertDateToTime(time);
+    return {
+        time: formattedTime
+    };
+};

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getMinutesFromTime } from '../../utils/getMinutesFromTime';
+import { useCurrentTime } from './hooks/useCurrentTime';
+import { CurrentTime, CurrentTimeContainer, Line } from './styles';
+export var CurrentTimeMarker = function () {
+    var time = useCurrentTime().time;
+    var minutes = getMinutesFromTime(time);
+    return (_jsxs(CurrentTimeContainer, { minutes: minutes, children: [_jsx(CurrentTime, { children: time }), _jsx(Line, {})] }));
+};

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

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

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

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { currentTimeHeight, currentTimeWidth, minuteHeight } from '../../utils/constants';
+import styled, { th } from '@xstyled/styled-components';
+export var CurrentTimeContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  left: 0;\n  padding-left: 10px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  height: ", "px;\n  z-index: 1;\n"], ["\n  position: absolute;\n  top: ", ";\n  left: 0;\n  padding-left: 10px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  height: ", "px;\n  z-index: 1;\n"])), function (_a) {
+    var minutes = _a.minutes;
+    return "".concat(minutes * minuteHeight - currentTimeHeight / 2, "px");
+}, currentTimeHeight);
+export var CurrentTime = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 10px;\n  color: white;\n  font-weight: 600;\n  background-color: ", ";\n  width: ", "px;\n  padding: 5px;\n  border-radius: 14px;\n"], ["\n  font-size: 10px;\n  color: white;\n  font-weight: 600;\n  background-color: ", ";\n  width: ", "px;\n  padding: 5px;\n  border-radius: 14px;\n"])), th.color('red1'), currentTimeWidth);
+export var Line = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  width: calc(100% - ", "px);\n  height: 1px;\n"], ["\n  background-color: ", ";\n  width: calc(100% - ", "px);\n  height: 1px;\n"])), th.color('red1'), currentTimeWidth);
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,14 @@
+import { type FC } from 'react';
+import { type DatePickerType } from '../../../../Elements/DatePicker/DatePicker';
+type DateChangerProps = {
+    isLoading?: boolean;
+    isDatepickerOpen: boolean;
+    toggleDatepicker: () => void;
+    closeDatePicker: () => void;
+    handlePrevDay: () => void;
+    handleNextDay: () => void;
+    handleChangeDate: DatePickerType['onChange'];
+    date: Date;
+};
+export declare const DateChanger: FC<DateChangerProps>;
+export {};

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useRef } from 'react';
+import DatePicker from '../../../../Elements/DatePicker';
+import { ArrowDown } from '../../../../Elements/Icon';
+import Spinner from '../../../../Elements/Spinner/Spinner';
+import { LanguageContext } from '../../../../ThemeProvider/ThemeProvider';
+import Popover from '../../../Popover';
+import { formatDate } from '../../utils/formatDate';
+import { x } from '@xstyled/styled-components';
+import { ArrowContainer, DateChangerContainer } from './styles';
+export var DateChanger = function (_a) {
+    var isLoading = _a.isLoading, date = _a.date, handleChangeDate = _a.handleChangeDate, closeDatePicker = _a.closeDatePicker, handleNextDay = _a.handleNextDay, handlePrevDay = _a.handlePrevDay, toggleDatepicker = _a.toggleDatepicker, isDatepickerOpen = _a.isDatepickerOpen;
+    var ref = useRef(null);
+    var locale = useContext(LanguageContext);
+    if (isLoading) {
+        return (_jsx(x.div, { p: "6px 12px", children: _jsx(Spinner, { variant: "sm" }) }));
+    }
+    return (_jsxs(DateChangerContainer, { children: [_jsx(ArrowContainer, { onClick: handlePrevDay, rotate: 90, children: _jsx(ArrowDown, {}) }), _jsx(x.span, { ref: ref, onClick: toggleDatepicker, cursor: "pointer", children: formatDate(date, locale) }), isDatepickerOpen && (_jsx(Popover, { parentRef: ref, onClose: closeDatePicker, children: _jsx(DatePicker, { value: date, input: false, onChange: handleChangeDate, isSecondDatePicker: true }) })), _jsx(ArrowContainer, { onClick: handleNextDay, rotate: -90, children: _jsx(ArrowDown, {}) })] }));
+};

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

@@ -0,0 +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, {
+    rotate: number;
+}, never>;

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

@@ -0,0 +1,11 @@
+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 from '@xstyled/styled-components';
+export var DateChangerContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 24px;\n  margin-top: 12px;\n  width: fit-content;\n  align-items: center;\n  column-gap: 12px;\n  font-size: 16px;\n  font-weight: 500;\n"], ["\n  display: flex;\n  margin-bottom: 24px;\n  margin-top: 12px;\n  width: fit-content;\n  align-items: center;\n  column-gap: 12px;\n  font-size: 16px;\n  font-weight: 500;\n"])));
+export var ArrowContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  height: 15px;\n  width: 15px;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transform: ", ";\n"], ["\n  display: flex;\n  height: 15px;\n  width: 15px;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transform: ", ";\n"])), function (_a) {
+    var rotate = _a.rotate;
+    return "rotate(".concat(rotate, "deg)");
+});
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,7 @@
+import { type FC } from 'react';
+import { type GroupType } from '../../types';
+type GroupsProps = {
+    groups?: GroupType[];
+};
+export declare const Groups: FC<GroupsProps>;
+export {};

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GroupContainer, GroupItem, Gap } from './styles';
+export var Groups = function (_a) {
+    var groups = _a.groups;
+    return (_jsxs(GroupContainer, { children: [_jsx(Gap, {}), groups === null || groups === void 0 ? void 0 : groups.map(function (group, i) { return (_jsx(GroupItem, { groupsCount: groups === null || groups === void 0 ? void 0 : groups.length, children: group.name }, group.id)); })] }));
+};

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

@@ -0,0 +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, {
+    bg?: string | undefined;
+    groupsCount: number;
+}, 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,16 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { groupsHeight, timeIntervalWidth } from '../../utils/constants';
+import styled, { th } from '@xstyled/styled-components';
+export var GroupContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", "px;\n  display: flex;\n  border-bottom: 1px solid ", ";\n"], ["\n  height: ", "px;\n  display: flex;\n  border-bottom: 1px solid ", ";\n"])), groupsHeight, th.color('lightGray6'));
+export var GroupItem = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", ";\n  max-width: 400px;\n  height: 100%;\n  font-size: 14px;\n  font-weight: 600;\n  padding: 10px;\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n"], ["\n  background-color: ", ";\n  width: ", ";\n  max-width: 400px;\n  height: 100%;\n  font-size: 14px;\n  font-weight: 600;\n  padding: 10px;\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n"])), function (_a) {
+    var bg = _a.bg;
+    return bg || th.color('bgLightGray');
+}, function (_a) {
+    var groupsCount = _a.groupsCount;
+    return "calc((100% / ".concat(groupsCount, ") - (").concat(timeIntervalWidth, "px / ").concat(groupsCount, "))");
+}, th.color('lightGray6'));
+export var Gap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  width: ", "px;\n  border-right: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  width: ", "px;\n  border-right: 1px solid ", ";\n"])), th.color('bgLightGray1'), timeIntervalWidth, th.color('lightGray6'));
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,12 @@
+import { type SchedulerProps } from '../../../types';
+type Props = {
+    handleSelectTimeSlot: SchedulerProps['handleSelectTimeSlot'];
+};
+type HookType = (props: Props) => {
+    handleMouseDown: (index: number, groupId: string) => () => void;
+    handleMouseOver: (index: number) => () => void;
+    handleMouseUp: () => void;
+    isSlotSelected: (index: number, groupId: string) => boolean;
+};
+export declare const useRangeSelection: HookType;
+export {};

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

@@ -0,0 +1,47 @@
+import { useCallback, useState } from 'react';
+import { convertIndexToISOString } from '../../../utils/convertIndexToISOString';
+export var useRangeSelection = function (_a) {
+    var handleSelectTimeSlot = _a.handleSelectTimeSlot;
+    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),
+                to: convertIndexToISOString(end)
+            });
+        }
+        setSelectedGroup(null);
+        setSelectionRange([]);
+    }, [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
+    };
+};

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

@@ -0,0 +1,6 @@
+import { MutableRefObject } from 'react';
+type HookType = () => {
+    containerRef: MutableRefObject<HTMLTableSectionElement | null>;
+};
+export declare const useScroll: HookType;
+export {};

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

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

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

@@ -0,0 +1,13 @@
+import { type FC } from 'react';
+import { type SchedulerProps, type TimeSlotType } from '../../types';
+type TimeSlotsProps = {
+    timeArray: string[];
+    groups?: SchedulerProps['groups'];
+    activeHours?: SchedulerProps['activeHours'];
+    timeSlots?: Record<string, TimeSlotType[]>;
+    handleSelectTimeSlot: SchedulerProps['handleSelectTimeSlot'];
+    handleTimeSlotClick?: SchedulerProps['handleTimeSlotClick'];
+    isTodayDate: boolean;
+};
+export declare const TimeSlots: FC<TimeSlotsProps>;
+export {};

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { convertDateToTime } from '../../utils/convertDateToTime';
+import { getMinutesFromTime } from '../../utils/getMinutesFromTime';
+import { isActiveTime } from '../../utils/isActiveTime';
+import { CurrentTimeMarker } from '../CurrentTimeMarker';
+import { useRangeSelection } from './hooks/useRangeSelection';
+import { useScroll } from './hooks/useScroll';
+import { EmptyTimeSlot, TimeInterval, TimeRow, TimeSlotsContainer, BookedTimeSlot } 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;
+    var containerRef = useScroll().containerRef;
+    var _b = useRangeSelection({ handleSelectTimeSlot: handleSelectTimeSlot }), 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: bookedTimeSlots.map(function (_a) {
+                                    var id = _a.id, start = _a.start, end = _a.end;
+                                    var startTime = convertDateToTime(new Date(start));
+                                    var endTime = convertDateToTime(new Date(end));
+                                    var startTimeInMinutes = getMinutesFromTime(startTime);
+                                    var endTimeInMinutes = getMinutesFromTime(endTime);
+                                    return (_jsx(BookedTimeSlot, { startPoint: startTimeInMinutes - getMinutesFromTime(time) + 1, heightInMinutes: endTimeInMinutes - startTimeInMinutes - 2, onClick: handleTimeSlotClick === null || handleTimeSlotClick === void 0 ? void 0 : handleTimeSlotClick(id), children: "".concat(startTime, " - ").concat(endTime) }, id));
+                                }) }, group.id));
+                        })] }, time));
+            }), isTodayDate && _jsx(CurrentTimeMarker, {})] }));
+};

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

@@ -0,0 +1,14 @@
+export declare const TimeSlotsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const EmptyTimeSlot: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    isSlotSelected?: boolean | undefined;
+    activeTime: boolean;
+    groupsCount: number;
+}, never>;
+export declare const BookedTimeSlot: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    startPoint: number;
+    heightInMinutes: number;
+}, never>;
+export declare const TimeInterval: 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>;

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

@@ -0,0 +1,33 @@
+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  display: flex;\n  flex-direction: column;\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  display: flex;\n  flex-direction: column;\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 EmptyTimeSlot = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", "px;\n  width: ", ";\n  max-width: 400px;\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  width: ", ";\n  max-width: 400px;\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 groupsCount = _a.groupsCount;
+    return "calc((100% / ".concat(groupsCount, ") - (").concat(timeIntervalWidth, "px / ").concat(groupsCount, "))");
+}, 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 BookedTimeSlot = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n  top: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  box-shadow: ", ";\n  height: ", ";\n  border-left: 4px solid ", ";\n  padding: 10px;\n  margin-right: 10px;\n  margin-left: 6px; // -4px border\n  width: calc(100% - 16px);\n  cursor: pointer;\n"], ["\n  position: absolute;\n  z-index: 1;\n  top: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  box-shadow: ", ";\n  height: ", ";\n  border-left: 4px solid ", ";\n  padding: 10px;\n  margin-right: 10px;\n  margin-left: 6px; // -4px border\n  width: calc(100% - 16px);\n  cursor: pointer;\n"])), function (_a) {
+    var startPoint = _a.startPoint;
+    return "".concat(startPoint * minuteHeight, "px");
+}, th.color('bgLightGray1'), th.shadow('gridShadow'), function (_a) {
+    var heightInMinutes = _a.heightInMinutes;
+    return "".concat(heightInMinutes * minuteHeight, "px");
+}, th.color('green60'));
+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"], ["\n  font-size: 12px;\n  font-weight: 500;\n  height: ", "px;\n  width: ", "px;\n  border-right: 1px solid ", ";\n  padding: 10px;\n"])), minuteHeight * stepInMinutes, timeIntervalWidth, th.color('lightGray6'));
+export var TimeRow = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  border-bottom: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  display: flex;\n  border-bottom: 1px solid ", ";\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? th.color('lightGray7') : 'white');
+}, th.color('lightGray6'));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,15 @@
+import { type DatePickerType } from '../../../Elements/DatePicker/DatePicker';
+import type { SchedulerProps } from '../types';
+type Props = {
+    closeDatePicker: () => void;
+    handleReloadTimeSlots: SchedulerProps['handleReloadTimeSlots'];
+};
+type HookType = (props: Props) => {
+    handlePrevDay: () => void;
+    handleNextDay: () => void;
+    handleChangeDate: DatePickerType['onChange'];
+    isTodayDate: boolean;
+    date: Date;
+};
+export declare const useChangeDate: HookType;
+export {};

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

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

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

@@ -0,0 +1,2 @@
+export { Scheduler as default } from './Scheduler';
+export type { GroupType, ActiveHours, TimeSlotType, SelectedTimeSlotType } from './types';

package/ui/Blocks/Scheduler/index.js

@@ -0,0 +1 @@
+export { Scheduler as default } from './Scheduler';

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

@@ -0,0 +1,7 @@
+import { type FC } from 'react';
+declare const meta: {
+    title: string;
+    tags: string[];
+};
+export default meta;
+export declare const Default: FC;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LinguiContainer } from '../../../utils/LinguiContainer';
+import { Scheduler } from '../Scheduler';
+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', start: '2025-02-06T07:30:00Z', end: '2025-02-06T09:00:00Z', groupId: 'group1' },
+    { id: '2', start: '2025-02-06T14:35:00Z', end: '2025-02-06T16:30:00Z', groupId: 'group1' },
+    { id: '3', start: '2025-02-06T09:40:00Z', end: '2025-02-06T11:45:00Z', groupId: 'group2' },
+    { id: '4', start: '2025-02-06T12:05:00Z', end: '2025-02-06T15:30:00Z', groupId: 'group2' },
+    { id: '5', start: '2025-02-06T08:15:00Z', end: '2025-02-06T09:45:00Z', groupId: 'group3' },
+    { id: '6', start: '2025-02-06T11:30:00Z', end: '2025-02-06T13:15:00Z', groupId: 'group3' },
+    { id: '7', start: '2025-02-06T07:30:00Z', end: '2025-02-06T09:15:00Z', groupId: 'group4' },
+    { id: '8', start: '2025-02-06T09:30:00Z', end: '2025-02-06T11:30:00Z', groupId: 'group4' },
+    { id: '9', start: '2025-02-06T13:30:00Z', end: '2025-02-06T15:00:00Z', groupId: 'group4' }
+];
+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(Scheduler, { groups: groups, activeHours: activeHours, data: timeSlots, handleSelectTimeSlot: handleSelectTimeSlot }) }));
+};

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

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

package/ui/Blocks/Scheduler/styles.js

@@ -0,0 +1,7 @@
+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 Container = 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  height: 100%;\n  max-height: 80vh;\n  border: 1px solid ", ";\n  user-select: none;\n}\n"], ["\n  background-color: white;\n  color: ", ";\n  overflow-x: auto;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  max-height: 80vh;\n  border: 1px solid ", ";\n  user-select: none;\n}\n"])), th.color('typoPrimary'), th.color('lightGray6'));
+var templateObject_1;

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

@@ -0,0 +1,29 @@
+export type GroupType = {
+    id: string;
+    name: string;
+    color?: string;
+};
+export type ActiveHours = {
+    start: string;
+    end: string;
+};
+export type TimeSlotType = {
+    id: string;
+    start: string;
+    end: string;
+    groupId: string;
+};
+export type SelectedTimeSlotType = {
+    groupId: string;
+    from: string;
+    to: string;
+};
+export type SchedulerProps = {
+    groups?: GroupType[];
+    activeHours?: ActiveHours;
+    data?: TimeSlotType[];
+    handleSelectTimeSlot?: (data: SelectedTimeSlotType) => void;
+    handleReloadTimeSlots?: (date: Date) => Promise<void>;
+    handleTimeSlotClick?: (timeSlotId: string) => () => void;
+    isLoading?: boolean;
+};

package/ui/Blocks/Scheduler/types.js

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

package/ui/Blocks/Scheduler/utils/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const groupsHeight = 38;
+export declare const timeIntervalWidth = 53;
+export declare const minuteHeight = 5;
+export declare const stepInMinutes = 15;
+export declare const currentTimeHeight = 22;
+export declare const currentTimeWidth = 35;

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

@@ -0,0 +1,6 @@
+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.d.ts

@@ -0,0 +1 @@
+export declare const convertDateToTime: (date: Date) => string;

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

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

package/ui/Blocks/Scheduler/utils/convertIndexToISOString.d.ts

@@ -0,0 +1 @@
+export declare const convertIndexToISOString: (index: number) => string;