@asafarim/booking-calendar 0.2.1 → 0.3.0
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.
- package/README.md +135 -135
- package/dist/JumpToDateModal.d.ts +8 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +696 -577
- package/dist/style.css +1 -0
- package/package.json +11 -7
- package/LICENSE +0 -23
- package/dist/index.css +0 -1
package/README.md
CHANGED
|
@@ -1,135 +1,135 @@
|
|
|
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 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
|
|
@@ -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';
|