react-beauty-calendar 1.0.7 → 1.0.8

package/README.md

@@ -31,6 +31,49 @@ With the need to implement an efficient scheduling system, I decided to create a
 - **Drag & Drop**: Advanced appointment creation
 - **Open Source**: MIT licensed, free forever
 - Storybook available.
+## Technologies Used
+
+### Core Technologies
+- **[React](https://reactjs.org/)**: A JavaScript library for building user interfaces.
+- **[TypeScript](https://www.typescriptlang.org/)**: A strongly typed programming language that builds on JavaScript, providing type safety and better developer experience.
+
+### State Management
+- **[Zustand](https://github.com/pmndrs/zustand)**: A small, fast, and scalable state-management library for React.
+
+### Date Utilities
+- **[date-fns](https://date-fns.org/)**: A modern JavaScript date utility library for parsing, formatting, and manipulating dates.
+- **[dayjs](https://day.js.org/)**: A lightweight JavaScript date library for parsing, validating, and formatting dates.
+
+### Drag and Drop
+- **[@dnd-kit/core](https://dndkit.com/)**: A modern drag-and-drop toolkit for React.
+
+### UI Components
+- **[Radix UI](https://www.radix-ui.com/)**: Accessible, unstyled UI components for building modern React applications.
+
+### Styling
+- **[Tailwind CSS](https://tailwindcss.com/)**: A utility-first CSS framework for rapid UI development.
+
+### Build Tools
+- **[Vite](https://vitejs.dev/)**: A fast build tool and development server for modern web projects.
+
+### Testing
+- **[Vitest](https://vitest.dev/)**: A blazing-fast unit testing framework for modern web applications.
+- **[Playwright](https://playwright.dev/)**: An end-to-end testing framework for web applications.
+
+### Storybook
+- **[Storybook](https://storybook.js.org/)**: A tool for developing and testing UI components in isolation.
+- **[Chromatic](https://www.chromatic.com/)**: Visual testing and review for Storybook components.
+
+### Linting and Formatting
+- **[ESLint](https://eslint.org/)**: A tool for identifying and fixing problems in JavaScript code.
+
+### Utilities
+- **[clsx](https://github.com/lukeed/clsx)**: Utility for conditionally joining classNames.
+- **[cmdk](https://cmdk.paco.me/)**: A fast, composable command menu for React.
+
+### Development Tools
+- **[Husky](https://typicode.github.io/husky/)**: Git hooks for automating tasks.
+- **[Concurrently](https://github.com/open-cli-tools/concurrently)**: Run multiple commands concurrently.
 
 ## Installation
 

package/dist/{lib/@types → @types}/booking.d.ts

@@ -13,4 +13,4 @@ export interface BookingBulkData {
     user: UserProfile;
     booking: Booking[];
 }
-export type BookingViewType = "WEEK" | "DAY" | "MONTH" | "TABLE";
+export type BookingViewType = "week" | "day" | "month" | "table";

package/dist/{lib/@types → @types}/calendar-instance.d.ts

@@ -1,21 +1,36 @@
 import { JSX, Ref } from 'react';
-import { CalendarInstanceRef } from '../../src/App';
+import { NextAndPreviousWeek } from '../context/global/days-and-week/day-and-week-store';
 import { ActionType } from '../core/header-calendar/Header';
 import { BlockTimeData } from '../core/slots/EmptySlot';
 import { Booking, BookingDateAndTime, BookingViewType } from './booking';
 import { ViewModes } from './calendar';
+export interface CalendarInstanceRef extends CalendarRootRef {
+    getCalendar: () => JSX.Element;
+}
+export interface CalendarRootRef {
+    updateViewType: (bookingType: BookingViewType) => void;
+    updateWeekAndViewType: (date?: Date) => NextAndPreviousWeek;
+    updateTodayDayAndViewType: (date: Date) => Date;
+    updateSelectedNode: (nodeKey: string) => void;
+    updateFinishAt: (selectedHour: string) => void;
+}
 export type UseBookingInstanceProps = RootProps;
 export interface RootProps extends RootEventsProps {
     bookings: Booking[];
     createBookingModal: JSX.Element;
     viewModes: ViewModes;
-    ref?: Ref<CalendarInstanceRef>;
+    ref?: Ref<CalendarRootRef>;
+}
+export interface OnSlotClick {
+    slotData: BlockTimeData;
+    finishTime: string;
 }
 export interface RootEventsProps {
     onChangeViewType: (bookingViewType: BookingViewType) => void;
     onTodayClick: (date: Date) => void;
+    onHeaderDayClick?: (date: Date, bookingViewType: BookingViewType) => void;
     onCardDropCallback: (booking: Booking, overId: string, slotData: BookingDateAndTime) => Promise<void>;
     onDayChange: (date: Date[], actionType: ActionType) => void;
     onModalClose: () => void;
-    onSlotClick: (slotData: BlockTimeData) => void;
+    onSlotClick: (slot: OnSlotClick) => void;
 }

package/dist/build/assets/main.css

@@ -1 +1 @@
-#root{margin:0 auto;text-align:center}.react-resizable{position:relative}.react-resizable:hover .react-resizable-handle-s{display:inline}.dragging-effect{border:2px solid rgba(255,21,0,.682)}.show-handle.react-resizable .react-resizable-handle-s{display:inline}.react-resizable.slot-resizable>.react-resizable-handle{width:100%;height:100%}.react-resizable.slot-resizable>.react-resizable-handle.react-resizable-handle-se{cursor:default;background-image:none}.react-resizable.slot-resizable>.react-resizable-handle.react-resizable-handle-se:hover{cursor:default;background-image:none}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E %3Cpath d='M5 14H19M5 10H19' stroke='%23fff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E %3C/g%3E%3C/svg%3E");background-position:bottom right}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;left:0;cursor:se-resize;z-index:100}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:-5px;z-index:100}.react-resizable-handle-s{display:none;bottom:-5px;z-index:100}.rdp-day:hover{background-color:#edecec!important;color:#1f1f1f!important;border-radius:50%!important}.rdp-chevron{fill:#5403d6!important}.rdp-day.rdp-today{color:#fff!important;border-radius:50%;background-color:#8574e5!important}.rdp-day::selection{background-color:#8574e5!important;color:red!important}.rdp-day.rdp-selected>.rdp-day_button{background:#d5d0f7;color:#322290;border:none}.shadow{box-shadow:2px 2px 6px 1px #0000004d}@keyframes spinBorder{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.animate-spin-border{animation:spinBorder 3s linear infinite;background-size:200% 200%}.disableVisibilityTime{display:none}.activateVisibilityTime{display:block}.calendarHolder{z-index:100;max-width:1410px}.calendarHolder_parent{width:100%;height:100%;z-index:100}.calendarHolder_parent_content{display:flex;flex-direction:column;z-index:100;overflow:auto}.header_actions{display:flex;flex-direction:row;align-items:center;gap:.25rem}.headerCalendar_mobile{display:flex;flex-direction:column;justify-content:space-between;width:100%;padding-top:.5rem;background-color:#fff}.headerCalendar_mobile_month{align-content:center;z-index:50;text-align:center}.headerCalendar_mobile_month_span{color:#1e2939;font-weight:700}.headerCalendar_mobile_actions{gap:.5rem;z-index:50;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.headerCalendar{display:flex;justify-content:space-between;width:100%;margin-top:.5rem;background-color:#fff;position:relative}.headerCalendar_actions{display:flex;flex-direction:row;align-items:center;z-index:50}.headerCalendar_month{align-content:center;width:max-content;position:absolute;z-index:50;top:50%;left:50%;right:50%;transform:translate(-50%,-50%)}.headerCalendar_month_span{color:#1e2939;font-weight:700}.isDraggingCard{height:2rem;z-index:100;position:relative}.cardOverlay_content{color:#fff;position:absolute;overflow:hidden;width:100%;border:1px solid;border-radius:.25rem;z-index:10}.header_day_actions{display:flex;flex-direction:row;justify-content:center}.header_day_actions_button{display:flex;background-color:#fff;border:none;border-radius:100%;padding-block:.75rem;padding-inline:.75rem}.header_day_actions_button:hover{background-color:#f3f4f6}.header_day_actions_button:focus{background-color:#e5e7eb;inherits:false;initial-value:solid;outline-width:0px}.header_day_actions_button_icon{height:1rem;width:1rem;color:#6a7282}.calendarCore{height:75vh;overflow:auto}.calendarCore_max{width:max-content}.calendarCore_cell{border:1px solid #d1d5dc;padding-block:.5rem;padding-inline:1rem;text-align:center;width:.75rem;min-width:4rem}.calendarCore_actions{position:absolute;top:-3px;left:0;right:1.25rem;background-color:#fff;text-align:end}.bookingCard_content{display:grid;grid-template-columns:25px 1fr;align-items:flex-start;margin-bottom:.25rem;padding-bottom:.25rem}.bookingCard_content:last-child{margin-bottom:0;padding-bottom:0}.slot{background-color:#fff;border:1px solid #d1d5dc;min-width:8rem;width:100%;padding:0;position:relative}.slot_disabled{background-color:#e5e7eb;border:none}.slotWeek{max-width:12rem;min-width:12rem}.daysOfWeek{min-width:12rem;width:100vw}.daysOfWeek_parent{display:flex;flex-direction:column;gap:3px;color:#6a7282}.daysOfWeek_day{padding:.5rem;border-radius:100%}.daysOfWeek_day_rest{border:none;width:2rem;height:2rem;padding:0}.daysOfWeek_day_rest:hover{background-color:#e3e2e2}.daysOfWeek_day_today_title{color:#d268d2}.daysOfWeek_day_today{color:#fff;padding:.25rem;background-color:#d268d2}.daysOfWeek_day:hover{cursor:pointer}.daysOfWeek_day{max-width:2rem}.daysOfWeek_emptySlot_table{min-width:100%;width:100%;background-color:#fff}.daysOfWeek_emptySlot{max-width:4rem;min-width:4rem;height:4rem;width:4rem}.calendarHeader{max-width:4rem;min-width:4rem;width:1rem}@media screen and (max-width: 1189px){.calendarHeader{max-width:4rem;min-width:4rem}}.slotTrigger_core{position:relative;width:100%;min-width:8rem;height:2rem}.slotTrigger_core_day{width:100%}.hovering_slotTrigger_core:hover{background-color:#ffffff93}.slotTrigger_core_border{border-bottom:0px solid}.cardContent_resizable{position:absolute;width:100%;top:0}.cardContent_render{border:1px;border-radius:.25rem;overflow:hidden}.cardContent_render:hover{background-color:#fff}.timeInfo_core{width:100%;height:100%;z-index:-1px;align-content:center;border:1px solid black;border-radius:.25rem;cursor:default;background-color:#ffb1b1}.timeInfo_core_timeParent{border-radius:.25rem;width:100%;height:100%;align-content:center;position:relative}.timeInfo_core_timeParent_time{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.timeInfo_core_dragging{height:100%;align-content:center}.dropdownLabelContent{display:flex;justify-content:space-between;align-items:center;border-radius:.5rem}.dropdownLabelContent:hover{background-color:#f3f4f6}.dropdownLabelContent_dropdownLabel{width:100%;padding:1rem}.dropdownLabelContent_dropdownLabel:hover{cursor:move}.dropdownLabelContent_close:hover{cursor:pointer;color:#6a7282}@property --progress{syntax: "<number>"; initial-value: 0; inherits: false;}.Draggable{position:relative;transition:transform .25s ease}.Draggable>div{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:0;border-radius:5px;box-shadow:var(--box-shadow);transform:translate3d(var(--translate-x, 0),var(--translate-y, 0),0) scale(var(--scale, 1));transition:box-shadow .3s ease}.Draggable.pendingDelay{animation:pending linear;background-image:linear-gradient(90deg,rgb(0,47,255) calc(var(--progress)* 1%),transparent calc(var(--progress)* 1% + 1%))}.Draggable:not(.handle)>div{touch-action:none;cursor:grab}.Draggable:not(.handle)>div:focus-visible:not(.active :is(.Draggable:not(.handle)>div)){box-shadow:0 0 0 3px #4c9ffe}.Draggable.handle>div{--action-background: rgba(255, 255, 255, .1)}.Draggable.handle>div>svg{margin-right:5px}.Draggable.handle>div>div{margin-right:-10px}.Draggable img{-webkit-user-select:none;user-select:none;pointer-events:none}.Draggable.dragging{z-index:1;transition:none}.Draggable.dragging *{cursor:grabbing}.Draggable.dragging>div{--scale: 1.06;--box-shadow: -1px 0 15px 0 rgba(34, 33, 81, .01), 0px 15px 15px 0 rgba(34, 33, 81, .25)}.Draggable.dragging>div:focus-visible{--box-shadow: 0 0px 10px 2px #4c9ffe}.Draggable.dragging label{animation:none;opacity:0}.Draggable.dragOverlay>div,.Draggable.dragging>div{animation:pop .25s cubic-bezier(.18,.67,.6,1.22)}@keyframes pulse{0%{opacity:0}to{opacity:1}}@keyframes pop{0%{transform:translate3d(var(--translate-x, 0),var(--translate-y, 0),0) scale(1)}to{transform:translate3d(var(--translate-x, 0),var(--translate-y, 0),0) scale(var(--scale));box-shadow:var(--box-shadow)}}@keyframes pending{to{--progress: 100}}
+#root{margin:0 auto;text-align:center}.react-resizable{position:relative}.react-resizable:hover .react-resizable-handle-s,.show-handle.react-resizable .react-resizable-handle-s{display:inline}.react-resizable.slot-resizable>.react-resizable-handle{width:100%;height:100%}.react-resizable.slot-resizable>.react-resizable-handle.react-resizable-handle-se{cursor:default;background-image:none}.react-resizable.slot-resizable>.react-resizable-handle.react-resizable-handle-se:hover{cursor:default;background-image:none}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E %3Cpath d='M5 14H19M5 10H19' stroke='%23fff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E %3C/g%3E%3C/svg%3E");background-position:bottom right}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;left:0;cursor:se-resize;z-index:100}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:-5px;z-index:100}.react-resizable-handle-s{display:none;bottom:-5px;z-index:100}.rdp-day:hover{background-color:#edecec!important;color:#1f1f1f!important;border-radius:50%!important}.rdp-chevron{fill:#5403d6!important}.rdp-day.rdp-today{color:#fff!important;border-radius:50%;background-color:#8574e5!important}.rdp-day::selection{background-color:#8574e5!important;color:red!important}.rdp-day.rdp-selected>.rdp-day_button{background:#d5d0f7;color:#322290;border:none}.shadow{box-shadow:2px 2px 6px 1px #0000004d}@keyframes spinBorder{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.animate-spin-border{animation:spinBorder 3s linear infinite;background-size:200% 200%}.disableVisibilityTime{display:none}.activateVisibilityTime{display:block}.calendarHolder{z-index:100;max-width:1410px}.calendarHolder_parent{width:100%;height:100%;z-index:100}.calendarHolder_parent_content{display:flex;flex-direction:column;z-index:100;overflow:auto}.header_actions{display:flex;flex-direction:row;align-items:center;gap:.25rem}.headerCalendar_mobile{display:flex;flex-direction:column;justify-content:space-between;width:100%;padding-top:.5rem;background-color:#fff}.headerCalendar_mobile_month{align-content:center;z-index:50;text-align:center}.headerCalendar_mobile_month_span{color:#1e2939;font-weight:700}.headerCalendar_mobile_actions{gap:.5rem;z-index:50;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.headerCalendar{display:flex;justify-content:space-between;width:100%;margin-top:.5rem;background-color:#fff;position:relative}.headerCalendar_actions{display:flex;flex-direction:row;align-items:center;z-index:50}.headerCalendar_month{align-content:center;width:max-content;position:absolute;z-index:50;top:50%;left:50%;right:50%;transform:translate(-50%,-50%)}.headerCalendar_month_span{color:#1e2939;font-weight:700}.isDraggingCard{height:2rem;z-index:100;position:relative}.cardOverlay_content{color:#fff;position:absolute;overflow:hidden;width:100%;border:1px solid;border-radius:.25rem;z-index:10}.header_day_actions{display:flex;flex-direction:row;justify-content:center}.header_day_actions_button{display:flex;background-color:#fff;border:none;border-radius:100%;padding-block:.75rem;padding-inline:.75rem}.header_day_actions_button:hover{background-color:#f3f4f6}.header_day_actions_button:focus{background-color:#e5e7eb;inherits:false;initial-value:solid;outline-width:0px}.header_day_actions_button_icon{height:1rem;width:1rem;color:#6a7282}.calendarCore{z-index:0;height:75vh;overflow:auto}.calendarCore_max{width:max-content}.calendarCore_cell{border:1px solid #d1d5dc;padding-block:.5rem;padding-inline:1rem;text-align:center;width:.75rem;min-width:4rem}.calendarCore_actions{position:absolute;top:-3px;left:0;right:1.25rem;background-color:#fff;text-align:end}.bookingCard_content{display:grid;grid-template-columns:25px 1fr;align-items:flex-start;margin-bottom:.25rem;padding-bottom:.25rem}.bookingCard_content:last-child{margin-bottom:0;padding-bottom:0}.slot{background-color:#fff;border:1px solid #d1d5dc;min-width:8rem;width:100%;padding:0;position:relative}.slot_disabled{background-color:#e5e7eb;border:none}.slotWeek{max-width:12rem;min-width:12rem}.daysOfWeek{padding:.5rem;border-radius:100%;min-width:12rem;width:100vw}.daysOfWeek_parent{display:flex;flex-direction:column;gap:3px;color:#6a7282;max-width:11rem;text-align:center}.daysOfWeek_day_rest{border:none;width:2rem;height:2rem;padding:0}.daysOfWeek_day_rest:hover{border:1px solid rgba(91,91,91,.293);background-color:#e3e2e272}.daysOfWeek_day_today_title{color:#d268d2}.daysOfWeek_day_today{color:#fff;padding:.25rem;background-color:#d268d2}.daysOfWeek_day:hover{cursor:pointer}.daysOfWeek_day{border-radius:100%;width:2rem;height:2rem}.daysOfWeek_emptySlot_table{min-width:100%;width:100%;background-color:#fff}.daysOfWeek_emptySlot{max-width:4rem;min-width:4rem;height:4rem;width:4rem}.calendarHeader{max-width:4rem;min-width:4rem;width:1rem}@media screen and (max-width: 1189px){.calendarHeader{max-width:4rem;min-width:4rem}}.slotTrigger_core{position:relative;width:100%;min-width:8rem;height:2rem}.slotTrigger_core_day{width:100%}.hovering_slotTrigger_core:hover{background-color:#ffffff93}.slotTrigger_core_border{border-bottom:0px solid}.cardContent_resizable{position:absolute;width:100%;top:0}.cardContent_render{border-color:#ff5906;border-left-width:thick;border-radius:.25rem;overflow:hidden}.cardContent_render:hover{background-color:#fff}.timeInfo_core{width:100%;height:100%;z-index:-1px;align-content:center;border:1px solid black;border-radius:.25rem;cursor:default;background-color:#ffb1b1}.timeInfo_core_timeParent{border-radius:.25rem;width:100%;height:100%;align-content:center;position:relative}.timeInfo_core_timeParent_time{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.timeInfo_core_dragging{height:100%;align-content:center}.dropdownLabelContent{display:flex;justify-content:space-between;align-items:center;border-radius:.5rem}.dropdownLabelContent:hover{background-color:#f3f4f6}.dropdownLabelContent_dropdownLabel{width:100%;padding:1rem}.dropdownLabelContent_dropdownLabel:hover{cursor:move}.dropdownLabelContent_close:hover{cursor:pointer;color:#6a7282}@property --progress{syntax: "<number>"; initial-value: 0; inherits: false;}.Draggable{position:relative;transition:transform .25s ease}.Draggable>div{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:0;border-radius:5px;box-shadow:var(--box-shadow);transform:translate3d(var(--translate-x, 0),var(--translate-y, 0),0) scale(var(--scale, 1));transition:box-shadow .3s ease}.Draggable:not(.handle)>div{touch-action:none;cursor:grab}.Draggable:not(.handle)>div:focus-visible:not(.active :is(.Draggable:not(.handle)>div)){box-shadow:0 0 0 3px #4c9ffe}.Draggable.handle>div{--action-background: rgba(255, 255, 255, .1)}.Draggable.handle>div>svg{margin-right:5px}.Draggable.handle>div>div{margin-right:-10px}.Draggable img{-webkit-user-select:none;user-select:none;pointer-events:none}.Draggable.dragging{z-index:1;transition:none}.Draggable.dragging *{cursor:grabbing}.Draggable.dragging>div{--scale: 1.06;--box-shadow: -1px 0 15px 0 rgba(34, 33, 81, .01), 0px 15px 15px 0 rgba(34, 33, 81, .25)}.Draggable.dragging>div:focus-visible{--box-shadow: 0 0px 10px 2px #4c9ffe}.Draggable.dragging label{animation:none;opacity:0}.Draggable.dragOverlay>div,.Draggable.dragging>div{animation:pop .25s cubic-bezier(.18,.67,.6,1.22)}@keyframes pulse{0%{opacity:0}to{opacity:1}}