@dialiq/calendar-component 1.0.0

package/README.md

@@ -0,0 +1,223 @@
+# Calendar Component
+
+A React calendar component with booking management capabilities, designed to work with the booking API.
+
+## Installation
+
+```bash
+npm install @dialiq/calendar-component
+```
+
+## Dependencies
+
+This package requires the following peer dependencies:
+
+```bash
+npm install react react-dom
+```
+
+## Usage
+
+### Basic Example
+
+```tsx
+import React from 'react';
+import { Calendar } from '@dialiq/calendar-component';
+
+function App() {
+  return (
+    <div style={{ width: '100%', padding: '20px' }}>
+      <Calendar
+        businessId="acme-corp"
+        title="My Calendar"
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
+### With Resource Filtering
+
+```tsx
+import { Calendar } from '@dialiq/calendar-component';
+
+function UserCalendar() {
+  return (
+    <Calendar
+      businessId="acme-corp"
+      resourceId="user_A"
+      title="User A's Calendar"
+      participants={['user_A']}
+    />
+  );
+}
+```
+
+### With Custom API URL
+
+```tsx
+import { Calendar } from '@dialiq/calendar-component';
+
+function App() {
+  return (
+    <Calendar
+      businessId="acme-corp"
+      title="Company Calendar"
+      apiBaseUrl="https://api.example.com"
+    />
+  );
+}
+```
+
+### Using Environment Variables
+
+The component reads the API URL from environment variables if not explicitly provided:
+
+**For Create React App:**
+
+Create a `.env` file in your project root:
+
+```
+REACT_APP_CALENDAR_API_URL=https://api.example.com
+```
+
+**For other setups:**
+
+Set `window.CALENDAR_API_URL` in your HTML:
+
+```html
+<script>
+  window.CALENDAR_API_URL = 'https://api.example.com';
+</script>
+```
+
+### With Event Handlers
+
+```tsx
+import { Calendar, Booking } from '@dialiq/calendar-component';
+
+function App() {
+  const handleBookingCreate = (booking: Booking) => {
+    console.log('Booking created:', booking);
+  };
+
+  const handleBookingClick = (booking: Booking) => {
+    console.log('Booking clicked:', booking);
+  };
+
+  return (
+    <Calendar
+      businessId="acme-corp"
+      title="Interactive Calendar"
+      onBookingCreate={handleBookingCreate}
+      onBookingClick={handleBookingClick}
+      participants={['user_A', 'room_101']}
+    />
+  );
+}
+```
+
+## Props
+
+### CalendarProps
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `businessId` | `string` | Yes | - | Business ID for API requests |
+| `resourceId` | `string` | No | - | Filter bookings by specific resource |
+| `title` | `string` | No | `'Calendar'` | Calendar title displayed at the top |
+| `apiBaseUrl` | `string` | No | From env or `'http://localhost:8080'` | Base URL for API requests |
+| `defaultView` | `'month' \| 'week' \| 'day'` | No | `'month'` | Default calendar view (currently only month is implemented) |
+| `onBookingCreate` | `(booking: Booking) => void` | No | - | Callback when a booking is created |
+| `onBookingClick` | `(booking: Booking) => void` | No | - | Callback when a booking is clicked |
+| `participants` | `string[]` | No | `[]` | Default participants for new bookings |
+
+## Types
+
+### Booking
+
+```typescript
+interface Booking {
+  meeting_id: string;
+  start: string;
+  end: string;
+  metadata?: {
+    title?: string;
+    description?: string;
+    organizer?: string;
+    [key: string]: any;
+  };
+  participants?: string[];
+}
+```
+
+### CreateBookingRequest
+
+```typescript
+interface CreateBookingRequest {
+  participants: string[];
+  start: string;
+  end: string;
+  metadata?: {
+    title?: string;
+    description?: string;
+    organizer?: string;
+    [key: string]: any;
+  };
+}
+```
+
+## API Functions
+
+The package also exports API functions that can be used independently:
+
+```typescript
+import { createBooking, getResourceSchedule, getAllBookings, getMeetingDetails } from '@dialiq/calendar-component';
+
+const booking = await createBooking('business-id', {
+  participants: ['user_A', 'room_101'],
+  start: '2024-11-20T10:00:00.000Z',
+  end: '2024-11-20T11:00:00.000Z',
+  metadata: { title: 'Team Meeting' }
+});
+
+const schedule = await getResourceSchedule(
+  'business-id',
+  'user_A',
+  '2024-11-01T00:00:00.000Z',
+  '2024-11-30T23:59:59.000Z'
+);
+
+const allBookings = await getAllBookings(
+  'business-id',
+  '2024-11-01T00:00:00.000Z',
+  '2024-11-30T23:59:59.000Z'
+);
+
+const meeting = await getMeetingDetails('business-id', 'meeting-id');
+```
+
+## Features
+
+- 📅 **Monthly Calendar View**: Clean, intuitive calendar interface
+- ➕ **Create Bookings**: Built-in modal for creating new bookings
+- 👥 **Multi-Participant Support**: Book meetings with multiple participants
+- 🔍 **Resource Filtering**: View bookings for specific resources
+- 🎨 **Responsive Design**: Works on desktop and mobile devices
+- ⚙️ **Configurable**: Extensive props for customization
+- 🌐 **Environment Variables**: Flexible API URL configuration
+- 📦 **Standalone Package**: Can be installed and used in any React project
+
+## Development
+
+```bash
+npm install
+npm run build
+npm run dev
+```
+
+## License
+
+MIT

package/dist/Calendar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CalendarProps } from './types';
+import './Calendar.css';
+declare const Calendar: React.FC<CalendarProps>;
+export default Calendar;
+//# sourceMappingURL=Calendar.d.ts.map

package/dist/Calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../src/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAgBhE,OAAO,EAAE,aAAa,EAAW,MAAM,SAAS,CAAC;AAGjD,OAAO,gBAAgB,CAAC;AAExB,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAkOrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/CreateBookingModal.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Booking } from './types';
+import './CreateBookingModal.css';
+interface CreateBookingModalProps {
+    businessId: string;
+    apiBaseUrl?: string;
+    initialDate: Date;
+    participants: string[];
+    onClose: () => void;
+    onBookingCreated: (booking: Booking) => void;
+}
+declare const CreateBookingModal: React.FC<CreateBookingModalProps>;
+export default CreateBookingModal;
+//# sourceMappingURL=CreateBookingModal.d.ts.map

package/dist/CreateBookingModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateBookingModal.d.ts","sourceRoot":"","sources":["../src/CreateBookingModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAElC,UAAU,uBAAuB;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA0KzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/api.d.ts

@@ -0,0 +1,6 @@
+import { Booking, CreateBookingRequest } from './types';
+export declare const createBooking: (businessId: string, booking: CreateBookingRequest, apiBaseUrl?: string) => Promise<Booking>;
+export declare const getResourceSchedule: (businessId: string, resourceId: string, startDate: string, endDate: string, apiBaseUrl?: string) => Promise<Booking[]>;
+export declare const getAllBookings: (businessId: string, startDate: string, endDate: string, apiBaseUrl?: string) => Promise<Booking[]>;
+export declare const getMeetingDetails: (businessId: string, meetingId: string, apiBaseUrl?: string) => Promise<Booking>;
+//# sourceMappingURL=api.d.ts.map

package/dist/api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAYxD,eAAO,MAAM,aAAa,GACxB,YAAY,MAAM,EAClB,SAAS,oBAAoB,EAC7B,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,CAgBjB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,YAAY,MAAM,EAClB,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,SAAS,MAAM,EACf,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,EAAE,CAcnB,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,SAAS,MAAM,EACf,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,EAAE,CAcnB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,CAUjB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Calendar } from './Calendar';
+export type { CalendarProps, Booking, CreateBookingRequest } from './types';
+export { createBooking, getResourceSchedule, getAllBookings, getMeetingDetails } from './api';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC"}