@asafarim/booking-calendar 0.2.1 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +188 -135
  2. package/dist/JumpToDateModal.d.ts +8 -0
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.js +696 -577
  5. package/dist/style.css +1 -0
  6. package/package.json +12 -7
  7. package/LICENSE +0 -23
  8. package/dist/index.css +0 -1
package/README.md CHANGED
@@ -1,135 +1,188 @@
1
- # @asafarim/booking-calendar
2
-
3
- Google Calendar-style booking UI for FreelanceToolkit.Api
4
-
5
- ## Installation
6
-
7
- ```bash
8
- npm install @asafarim/booking-calendar
9
- # or
10
- pnpm add @asafarim/booking-calendar
11
- ```
12
-
13
- ## Quick Start
14
-
15
- ```tsx
16
- import { BookingCalendar } from '@asafarim/booking-calendar';
17
- import '@asafarim/booking-calendar/styles';
18
-
19
- function App() {
20
- const [bookings, setBookings] = useState([]);
21
-
22
- const handleCreate = async (dto) => {
23
- const response = await fetch('/api/calendar/bookings', {
24
- method: 'POST',
25
- headers: { 'Content-Type': 'application/json' },
26
- body: JSON.stringify(dto),
27
- });
28
- const newBooking = await response.json();
29
- setBookings([...bookings, newBooking]);
30
- };
31
-
32
- return (
33
- <BookingCalendar
34
- bookings={bookings}
35
- onCreateBooking={handleCreate}
36
- initialView="week"
37
- />
38
- );
39
- }
40
- ```
41
-
42
- ## Features
43
-
44
- - ✅ Month/Week/Day views
45
- - ✅ Click empty slot to create booking
46
- - ✅ Click booking to edit
47
- - ✅ Drag to move bookings
48
- - ✅ Drag resize bookings
49
- - ✅ Status badges (Pending, Confirmed, etc.)
50
- - ✅ Delivery status indicators
51
- - ✅ Availability checking
52
- - ✅ Client details display
53
- - ✅ Responsive design
54
-
55
- ## API Integration
56
-
57
- The component expects these FreelanceToolkit.Api endpoints:
58
-
59
- ```
60
- GET /api/calendar/bookings
61
- POST /api/calendar/bookings
62
- PUT /api/calendar/bookings/{id}
63
- DELETE /api/calendar/bookings/{id}
64
- POST /api/calendar/bookings/check-availability
65
- ```
66
-
67
- ## Props
68
-
69
- | Prop | Type | Required | Description |
70
- |------|------|----------|-------------|
71
- | `bookings` | `BookingEvent[]` | Yes | Array of bookings |
72
- | `onCreateBooking` | `(dto) => Promise<void>` | No | Create handler |
73
- | `onUpdateBooking` | `(id, dto) => Promise<void>` | No | Update handler |
74
- | `onDeleteBooking` | `(id) => Promise<void>` | No | Delete handler |
75
- | `onCheckAvailability` | `(dto) => Promise<AvailabilityResponse>` | No | Availability check |
76
- | `initialView` | `'month' \| 'week' \| 'day'` | No | Default: 'week' |
77
- | `initialDate` | `Date` | No | Default: today |
78
-
79
- ## Booking Type
80
-
81
- ```typescript
82
- interface BookingEvent {
83
- id: string;
84
- title: string;
85
- description?: string;
86
- startTime: Date;
87
- endTime: Date;
88
- durationMinutes: number;
89
- status: "Pending" | "Confirmed" | "Cancelled" | "Completed" | "NoShow";
90
- meetingLink?: string;
91
- location?: string;
92
- clientName: string;
93
- clientEmail: string;
94
- clientPhone?: string;
95
- deliveryStatus?: "Pending" | "Sent" | "Failed" | "Retrying";
96
- retryCount: number;
97
- createdAt: Date;
98
- updatedAt: Date;
99
- }
100
- ```
101
-
102
- ## Styling
103
-
104
- Override CSS variables:
105
-
106
- ```css
107
- .booking-calendar {
108
- --calendar-bg: #ffffff;
109
- --calendar-border: #e5e7eb;
110
- --event-pending: #fbbf24;
111
- --event-confirmed: #10b981;
112
- --event-cancelled: #ef4444;
113
- --event-completed: #3b82f6;
114
- }
115
- ```
116
-
117
- ## Development
118
-
119
- ```bash
120
- # Install dependencies
121
- pnpm install
122
-
123
- # Run dev server
124
- pnpm dev
125
-
126
- # Build package
127
- pnpm build
128
-
129
- # Publish
130
- npm publish --access public
131
- ```
132
-
133
- ## License
134
-
135
- MIT © ASafariM
1
+ # @asafarim/booking-calendar
2
+
3
+ Google Calendar-style booking UI for React. Built with TypeScript, Vite, and ASafariM design tokens.
4
+
5
+ ![Booking Calendar](https://raw.githubusercontent.com/AliSafari-IT/booking-calendar/refs/heads/main/demo/public/booking-calendar.png)
6
+
7
+ ## Installation
8
+
9
+ ```bash
10
+ npm install @asafarim/booking-calendar
11
+ # or
12
+ pnpm add @asafarim/booking-calendar
13
+ ```
14
+
15
+ ## Quick Start
16
+
17
+ ```tsx
18
+ import { BookingCalendar } from '@asafarim/booking-calendar';
19
+ import '@asafarim/booking-calendar/styles';
20
+
21
+ function App() {
22
+ const [bookings, setBookings] = useState([]);
23
+
24
+ const handleCreate = async (dto) => {
25
+ const response = await fetch('/api/calendar/bookings', {
26
+ method: 'POST',
27
+ headers: { 'Content-Type': 'application/json' },
28
+ body: JSON.stringify(dto),
29
+ });
30
+ const newBooking = await response.json();
31
+ setBookings([...bookings, newBooking]);
32
+ };
33
+
34
+ return (
35
+ <BookingCalendar
36
+ bookings={bookings}
37
+ onCreateBooking={handleCreate}
38
+ initialView="week"
39
+ />
40
+ );
41
+ }
42
+ ```
43
+
44
+ ## Features
45
+
46
+ - ✅ **Month/Week/Day views** - Switch between calendar views
47
+ - ✅ **Jump to Date** - Click month/year label to quickly navigate to any date
48
+ - ✅ **Click to create** - Click empty slot to create booking
49
+ - ✅ **Click to edit** - Click booking to edit details
50
+ - ✅ **Drag to move** - Drag bookings to reschedule
51
+ - ✅ **Drag to resize** - Adjust booking duration
52
+ - ✅ **Status badges** - Pending, Confirmed, Cancelled, Completed, NoShow
53
+ - ✅ **Delivery status** - Track notification delivery
54
+ - ✅ **Availability checking** - Validate time slots
55
+ - ✅ **Client details** - Display client info on bookings
56
+ - ✅ **Mobile-first responsive** - Works on 320px–4K screens
57
+ - ✅ **Dark theme** - Built-in dark mode with design tokens
58
+ - ✅ **Keyboard accessible** - Full keyboard navigation support
59
+ - ✅ **Modal dialogs** - Create/edit bookings with validation
60
+
61
+ ## Jump to Date Modal
62
+
63
+ Click the month/year label in the header to open the Jump to Date modal. Navigate to any date using:
64
+
65
+ - Year input with +/- buttons
66
+ - 12-month grid selector
67
+ - Mini calendar with 6-week view
68
+
69
+ ![Jump to Date Modal](https://raw.githubusercontent.com/AliSafari-IT/booking-calendar/refs/heads/main/demo/public/booking-calendar_jumptodate.png)
70
+
71
+ ## API Integration
72
+
73
+ The component expects these FreelanceToolkit.Api endpoints:
74
+
75
+ ```bash
76
+ GET /api/calendar/bookings
77
+ POST /api/calendar/bookings
78
+ PUT /api/calendar/bookings/{id}
79
+ DELETE /api/calendar/bookings/{id}
80
+ POST /api/calendar/bookings/check-availability
81
+ ```
82
+
83
+ ## Props
84
+
85
+ | Prop | Type | Required | Description |
86
+ | --- | --- | --- | --- |
87
+ | `bookings` | `BookingEvent[]` | Yes | Array of bookings |
88
+ | `onCreateBooking` | `(dto) => Promise<void>` | No | Create handler |
89
+ | `onUpdateBooking` | `(id, dto) => Promise<void>` | No | Update handler |
90
+ | `onDeleteBooking` | `(id) => Promise<void>` | No | Delete handler |
91
+ | `onCheckAvailability` | `(dto) => Promise<AvailabilityResponse>` | No | Availability check |
92
+ | `initialView` | `'month' \| 'week' \| 'day'` | No | Default: 'week' |
93
+ | `initialDate` | `Date` | No | Default: today |
94
+
95
+ ## Booking Type
96
+
97
+ ```typescript
98
+ interface BookingEvent {
99
+ id: string;
100
+ title: string;
101
+ description?: string;
102
+ startTime: Date;
103
+ endTime: Date;
104
+ durationMinutes: number;
105
+ status: "Pending" | "Confirmed" | "Cancelled" | "Completed" | "NoShow";
106
+ meetingLink?: string;
107
+ location?: string;
108
+ clientName: string;
109
+ clientEmail: string;
110
+ clientPhone?: string;
111
+ deliveryStatus?: "Pending" | "Sent" | "Failed" | "Retrying";
112
+ retryCount: number;
113
+ createdAt: Date;
114
+ updatedAt: Date;
115
+ }
116
+ ```
117
+
118
+ ## Styling
119
+
120
+ The component uses ASafariM design tokens for colors, spacing, and typography. All styles are mobile-first responsive and support dark theme.
121
+
122
+ Override CSS variables:
123
+
124
+ ```css
125
+ .booking-calendar {
126
+ --bc-bg: #0b0b10;
127
+ --bc-surface: #111827;
128
+ --bc-grid-line: #1f2933;
129
+ --bc-text: #e5e7eb;
130
+ --bc-muted: #9ca3af;
131
+ --bc-accent: #3b82f6;
132
+ --bc-danger: #ef4444;
133
+ --bc-success: #22c55e;
134
+ --bc-warning: #eab308;
135
+ --bc-border-radius-sm: 4px;
136
+ --bc-border-radius-md: 8px;
137
+ }
138
+ ```
139
+
140
+ ## Responsive Design
141
+
142
+ The calendar is built mobile-first and works seamlessly on all screen sizes:
143
+
144
+ - **Mobile (320–479px)**: Stacked header, compact buttons, sheet-style modals
145
+ - **Tablet (480–767px)**: Adjusted spacing, single-column form rows
146
+ - **Desktop (768px+)**: Full layout with side-by-side elements
147
+
148
+ ## Accessibility
149
+
150
+ - Full keyboard navigation (Tab, Enter, Escape)
151
+ - ARIA labels on all interactive elements
152
+ - Focus-visible states for keyboard users
153
+ - Semantic HTML structure
154
+ - Color contrast compliant
155
+
156
+ ## Development
157
+
158
+ ```bash
159
+ # Install dependencies
160
+ pnpm install
161
+
162
+ # Run demo
163
+ pnpm demo
164
+
165
+ # Build package
166
+ pnpm build
167
+
168
+ # Build and deploy demo
169
+ pnpm deploy
170
+
171
+ # Release new version
172
+ pnpm release
173
+ ```
174
+
175
+ ## Components
176
+
177
+ - `BookingCalendar` - Main calendar component
178
+ - `MonthView` - Month view renderer
179
+ - `WeekView` - Week view renderer
180
+ - `DayView` - Day view renderer
181
+ - `BookingModal` - Create/edit booking modal
182
+ - `JumpToDateModal` - Date navigation modal
183
+ - `BookingStatusBadge` - Status indicator
184
+ - `DeliveryStatusBadge` - Delivery status indicator
185
+
186
+ ## License
187
+
188
+ MIT © ASafariM
package/dist/JumpToDateModal.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ interface JumpToDateModalProps {
2
+ isOpen: boolean;
3
+ currentDate: Date;
4
+ onClose: () => void;
5
+ onSelect: (date: Date) => void;
6
+ }
7
+ export default function JumpToDateModal({ isOpen, currentDate, onClose, onSelect }: JumpToDateModalProps): import("react/jsx-runtime").JSX.Element | null;
8
+ export {};
package/dist/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export { default as BookingCalendar } from './BookingCalendar';
2
2
  export { default as BookingModal } from './BookingModal';
3
+ export { default as JumpToDateModal } from './JumpToDateModal';
3
4
  export { default as MonthView } from './MonthView';
4
5
  export { default as WeekView } from './WeekView';
5
6
  export { default as DayView } from './DayView';