@asafarim/booking-calendar 0.3.0 → 0.4.1

package/README.md

@@ -1,6 +1,8 @@
 # @asafarim/booking-calendar
 
-Google Calendar-style booking UI for FreelanceToolkit.Api
+Google Calendar-style booking UI for React. Built with TypeScript, Vite, and ASafariM design tokens.
+
+![Booking Calendar](https://raw.githubusercontent.com/AliSafari-IT/booking-calendar/refs/heads/main/demo/public/booking-calendar.png)
 
 ## Installation
 
@@ -41,22 +43,36 @@ function App() {
 
 ## Features
 
-- ✅ Month/Week/Day views
-- ✅ Click empty slot to create booking
-- ✅ Click booking to edit
-- ✅ Drag to move bookings
-- ✅ Drag resize bookings
-- ✅ Status badges (Pending, Confirmed, etc.)
-- ✅ Delivery status indicators
-- ✅ Availability checking
-- ✅ Client details display
-- ✅ Responsive design
+- ✅ **Month/Week/Day views** - Switch between calendar views
+- ✅ **Jump to Date** - Click month/year label to quickly navigate to any date
+- ✅ **Click to create** - Click empty slot to create booking
+- ✅ **Click to edit** - Click booking to edit details
+- ✅ **Drag to move** - Drag bookings to reschedule
+- ✅ **Drag to resize** - Adjust booking duration
+- ✅ **Status badges** - Pending, Confirmed, Cancelled, Completed, NoShow
+- ✅ **Delivery status** - Track notification delivery
+- ✅ **Availability checking** - Validate time slots
+- ✅ **Client details** - Display client info on bookings
+- ✅ **Mobile-first responsive** - Works on 320px–4K screens
+- ✅ **Dark theme** - Built-in dark mode with design tokens
+- ✅ **Keyboard accessible** - Full keyboard navigation support
+- ✅ **Modal dialogs** - Create/edit bookings with validation
+
+## Jump to Date Modal
+
+Click the month/year label in the header to open the Jump to Date modal. Navigate to any date using:
+
+- Year input with +/- buttons
+- 12-month grid selector
+- Mini calendar with 6-week view
+
+![Jump to Date Modal](https://raw.githubusercontent.com/AliSafari-IT/booking-calendar/refs/heads/main/demo/public/booking-calendar_jumptodate.png)
 
 ## API Integration
 
 The component expects these FreelanceToolkit.Api endpoints:
 
-```
+```bash
 GET    /api/calendar/bookings
 POST   /api/calendar/bookings
 PUT    /api/calendar/bookings/{id}
@@ -67,7 +83,7 @@ POST   /api/calendar/bookings/check-availability
 ## Props
 
 | Prop | Type | Required | Description |
-|------|------|----------|-------------|
+| --- | --- | --- | --- |
 | `bookings` | `BookingEvent[]` | Yes | Array of bookings |
 | `onCreateBooking` | `(dto) => Promise<void>` | No | Create handler |
 | `onUpdateBooking` | `(id, dto) => Promise<void>` | No | Update handler |
@@ -101,35 +117,72 @@ interface BookingEvent {
 
 ## Styling
 
+The component uses ASafariM design tokens for colors, spacing, and typography. All styles are mobile-first responsive and support dark theme.
+
 Override CSS variables:
 
 ```css
 .booking-calendar {
-  --calendar-bg: #ffffff;
-  --calendar-border: #e5e7eb;
-  --event-pending: #fbbf24;
-  --event-confirmed: #10b981;
-  --event-cancelled: #ef4444;
-  --event-completed: #3b82f6;
+  --bc-bg: #0b0b10;
+  --bc-surface: #111827;
+  --bc-grid-line: #1f2933;
+  --bc-text: #e5e7eb;
+  --bc-muted: #9ca3af;
+  --bc-accent: #3b82f6;
+  --bc-danger: #ef4444;
+  --bc-success: #22c55e;
+  --bc-warning: #eab308;
+  --bc-border-radius-sm: 4px;
+  --bc-border-radius-md: 8px;
 }
 ```
 
+## Responsive Design
+
+The calendar is built mobile-first and works seamlessly on all screen sizes:
+
+- **Mobile (320–479px)**: Stacked header, compact buttons, sheet-style modals
+- **Tablet (480–767px)**: Adjusted spacing, single-column form rows
+- **Desktop (768px+)**: Full layout with side-by-side elements
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Enter, Escape)
+- ARIA labels on all interactive elements
+- Focus-visible states for keyboard users
+- Semantic HTML structure
+- Color contrast compliant
+
 ## Development
 
 ```bash
 # Install dependencies
 pnpm install
 
-# Run dev server
-pnpm dev
+# Run demo
+pnpm demo
 
 # Build package
 pnpm build
 
-# Publish
-npm publish --access public
+# Build and deploy demo
+pnpm deploy
+
+# Release new version
+pnpm release
 ```
 
+## Components
+
+- `BookingCalendar` - Main calendar component
+- `MonthView` - Month view renderer
+- `WeekView` - Week view renderer
+- `DayView` - Day view renderer
+- `BookingModal` - Create/edit booking modal
+- `JumpToDateModal` - Date navigation modal
+- `BookingStatusBadge` - Status indicator
+- `DeliveryStatusBadge` - Delivery status indicator
+
 ## License
 
 MIT © ASafariM

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asafarim/booking-calendar",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Google Calendar-style booking UI for FreelanceToolkit.Api",
   "type": "module",
   "main": "./dist/index.js",
@@ -62,6 +62,7 @@
     "predemo": "pnpm install && pnpm run build",
     "demo": "cd demo && pnpm run dev",
     "deploy-demo": "cd demo && pnpm run deploy",
-    "deploy": "pnpm run predemo && cd demo && pnpm run deploy-demo"
+    "deploy": "pnpm run predemo && cd demo && pnpm run deploy-demo",
+    "release": "pnpm run build && node ./scripts/release.js"
   }
 }