@intinyagroup/calendar 0.1.1-alpha.8 → 0.1.2

package/dist/EventCalendar.svelte.d.ts

@@ -0,0 +1,48 @@
+import { type CalendarRecurrence, type CalendarResource } from "./recurrence";
+export type CalendarView = "month" | "week" | "day" | "resourceTimeline";
+export type CalendarEvent = {
+    id: string;
+    title: string;
+    start: Date;
+    end: Date;
+    color?: string;
+    description?: string;
+    allDay?: boolean;
+    /** Optional minimal recurrence. See CalendarRecurrence for supported semantics. */
+    recurrence?: CalendarRecurrence;
+    /** Resource row used by resourceTimeline view. */
+    resourceId?: string;
+};
+type $$ComponentProps = {
+    events?: CalendarEvent[];
+    view?: CalendarView;
+    currentDate?: Date;
+    locale?: string;
+    timeZone?: string;
+    firstDayOfWeek?: number;
+    enableEventModal?: boolean;
+    resources?: CalendarResource[];
+    resourceTimelineStartHour?: number;
+    resourceTimelineEndHour?: number;
+    class?: string;
+    onEventClick?: (event: CalendarEvent) => void;
+    onDateClick?: (date: Date) => void;
+    onAddEvent?: (newEvent: CalendarEvent) => void;
+    onEventReschedule?: (detail: {
+        event: CalendarEvent;
+        newStart: Date;
+        newEnd: Date;
+    }) => void;
+    onEventResize?: (detail: {
+        event: CalendarEvent;
+        newStart: Date;
+        newEnd: Date;
+    }) => void;
+    onDragCreate?: (detail: {
+        start: Date;
+        end: Date;
+    }) => void;
+};
+declare const EventCalendar: import("svelte").Component<$$ComponentProps, {}, "events" | "view" | "currentDate">;
+type EventCalendar = ReturnType<typeof EventCalendar>;
+export default EventCalendar;

package/dist/helpers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/helpers.test.js

@@ -0,0 +1,129 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import EventCalendar from './EventCalendar.svelte';
+describe('EventCalendar', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        vi.setSystemTime(new Date('2025-06-15T12:00:00'));
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('renders the calendar component with correct month title', () => {
+        render(EventCalendar);
+        // Title uses full month name: "MMMM yyyy"
+        expect(screen.getByText('June 2025')).toBeInTheDocument();
+    });
+    it('displays day-of-week headers', () => {
+        render(EventCalendar);
+        expect(screen.getByText('Sun')).toBeInTheDocument();
+        expect(screen.getByText('Mon')).toBeInTheDocument();
+        expect(screen.getByText('Tue')).toBeInTheDocument();
+        expect(screen.getByText('Wed')).toBeInTheDocument();
+        expect(screen.getByText('Thu')).toBeInTheDocument();
+        expect(screen.getByText('Fri')).toBeInTheDocument();
+        expect(screen.getByText('Sat')).toBeInTheDocument();
+    });
+    it('renders month view with day grid', () => {
+        render(EventCalendar);
+        // Should show days of June 2025. Use getAllByText for numbers that appear
+        // multiple times in the month grid (e.g. from previous/next month overflow).
+        expect(screen.getAllByText('15').length).toBeGreaterThanOrEqual(1);
+        expect(screen.getAllByText('30').length).toBeGreaterThanOrEqual(1);
+        expect(screen.getAllByText('1').length).toBeGreaterThanOrEqual(1);
+    });
+    it('renders events in the calendar', () => {
+        const events = [
+            {
+                id: '1',
+                title: 'Team Meeting',
+                start: new Date('2025-06-15T09:00:00'),
+                end: new Date('2025-06-15T10:00:00'),
+            },
+        ];
+        render(EventCalendar, { props: { events } });
+        expect(screen.getByText('Team Meeting')).toBeInTheDocument();
+    });
+    it('renders multiple events on the same day', () => {
+        const events = [
+            {
+                id: '1',
+                title: 'Morning Standup',
+                start: new Date('2025-06-15T09:00:00'),
+                end: new Date('2025-06-15T09:30:00'),
+            },
+            {
+                id: '2',
+                title: 'Lunch Break',
+                start: new Date('2025-06-15T12:00:00'),
+                end: new Date('2025-06-15T13:00:00'),
+            },
+        ];
+        render(EventCalendar, { props: { events } });
+        expect(screen.getByText('Morning Standup')).toBeInTheDocument();
+        expect(screen.getByText('Lunch Break')).toBeInTheDocument();
+    });
+    it('navigates to the previous month', async () => {
+        render(EventCalendar);
+        // Prev button is a Button with ChevronLeft icon; find by role
+        const prevBtn = screen.getAllByRole('button')[0];
+        await fireEvent.click(prevBtn);
+        expect(screen.getByText('May 2025')).toBeInTheDocument();
+    });
+    it('navigates to the next month', async () => {
+        render(EventCalendar);
+        // Next button is the third button (prev=0, today=1, next=2)
+        const nextBtn = screen.getAllByRole('button')[2];
+        await fireEvent.click(nextBtn);
+        expect(screen.getByText('July 2025')).toBeInTheDocument();
+    });
+    it('navigates back to today', async () => {
+        render(EventCalendar);
+        // Navigate to next month first
+        const nextBtn = screen.getAllByRole('button')[2];
+        await fireEvent.click(nextBtn);
+        expect(screen.getByText('July 2025')).toBeInTheDocument();
+        // Click Today button (text content is "Today")
+        const todayBtn = screen.getByText('Today');
+        await fireEvent.click(todayBtn);
+        expect(screen.getByText('June 2025')).toBeInTheDocument();
+    });
+    it('displays view switcher buttons', () => {
+        render(EventCalendar);
+        expect(screen.getByText('Month')).toBeInTheDocument();
+        expect(screen.getByText('Week')).toBeInTheDocument();
+        expect(screen.getByText('Day')).toBeInTheDocument();
+    });
+    it('shows event with color indicator', () => {
+        const events = [
+            {
+                id: '1',
+                title: 'Important Call',
+                start: new Date('2025-06-15T14:00:00'),
+                end: new Date('2025-06-15T15:00:00'),
+                color: '#dc2626',
+            },
+        ];
+        render(EventCalendar, { props: { events } });
+        expect(screen.getByText('Important Call')).toBeInTheDocument();
+    });
+    it('renders empty state without crashing', () => {
+        render(EventCalendar, { props: { events: [] } });
+        expect(screen.getByText('June 2025')).toBeInTheDocument();
+    });
+    it('renders all-day events (may appear in both grid and all-day header)', () => {
+        const events = [
+            {
+                id: '1',
+                title: 'Company Holiday',
+                start: new Date('2025-06-15T00:00:00'),
+                end: new Date('2025-06-16T00:00:00'),
+                allDay: true,
+            },
+        ];
+        render(EventCalendar, { props: { events } });
+        // All-day events appear in both the month grid and the all-day section
+        const matches = screen.getAllByText('Company Holiday');
+        expect(matches.length).toBeGreaterThanOrEqual(1);
+    });
+});

package/dist/index.d.ts

@@ -1,3 +1,9 @@
-export { default as Calendar } from './Calendar.svelte';
-export { default as DatePicker } from './DatePicker.svelte';
-export type { CalendarDate } from './Calendar.svelte';
+export { default as Calendar } from "./Calendar.svelte";
+export { default as DatePicker } from "./DatePicker.svelte";
+export { default as DateRangePicker } from "./DateRangePicker.svelte";
+export { default as EventCalendar } from "./EventCalendar.svelte";
+export type { CalendarDate } from "./Calendar.svelte";
+export type { DateRange } from "./DateRangePicker.svelte";
+export type { CalendarEvent, CalendarView } from "./EventCalendar.svelte";
+export { expandRecurringEvent, expandRecurringEvents } from "./recurrence";
+export type { CalendarRecurrence, CalendarRecurrenceFrequency, CalendarResource, RecurringCalendarEvent, } from "./recurrence";

package/dist/index.js

@@ -1,2 +1,5 @@
-export { default as Calendar } from './Calendar.svelte';
-export { default as DatePicker } from './DatePicker.svelte';
+export { default as Calendar } from "./Calendar.svelte";
+export { default as DatePicker } from "./DatePicker.svelte";
+export { default as DateRangePicker } from "./DateRangePicker.svelte";
+export { default as EventCalendar } from "./EventCalendar.svelte";
+export { expandRecurringEvent, expandRecurringEvents } from "./recurrence";

package/dist/recurrence.d.ts

@@ -0,0 +1,31 @@
+import type { CalendarEvent } from "./EventCalendar";
+/** Supported recurrence frequencies. This is intentionally smaller than RFC 5545 RRULE. */
+export type CalendarRecurrenceFrequency = "daily" | "weekly" | "monthly" | "yearly";
+/**
+ * Minimal RRULE-like recurrence model.
+ *
+ * Only frequency, interval, until, and count are supported. BYDAY, BYMONTHDAY,
+ * EXDATE, timezone transition rules, and other RFC 5545 semantics are not
+ * implemented. `until` is inclusive and `count` counts generated occurrences.
+ */
+export type CalendarRecurrence = {
+    frequency: CalendarRecurrenceFrequency;
+    interval?: number;
+    until?: Date;
+    count?: number;
+};
+/** Resource displayed as a row in `resourceTimeline` view. */
+export type CalendarResource = {
+    id: string;
+    label: string;
+    description?: string;
+    color?: string;
+};
+export type RecurringCalendarEvent = CalendarEvent & {
+    recurrence?: CalendarRecurrence;
+    resourceId?: string;
+};
+/** Expand one event into occurrences intersecting inclusive range. */
+export declare function expandRecurringEvent(event: RecurringCalendarEvent, rangeStart: Date, rangeEnd: Date): CalendarEvent[];
+/** Expand recurring events for a calendar viewport. Non-recurring events pass through. */
+export declare function expandRecurringEvents(events: RecurringCalendarEvent[], rangeStart: Date, rangeEnd: Date): CalendarEvent[];

package/dist/recurrence.js

@@ -0,0 +1,57 @@
+function addOccurrence(date, recurrence) {
+    const result = new Date(date);
+    const interval = Math.max(1, Math.floor(recurrence.interval ?? 1));
+    if (recurrence.frequency === "daily")
+        result.setDate(result.getDate() + interval);
+    else if (recurrence.frequency === "weekly")
+        result.setDate(result.getDate() + interval * 7);
+    else if (recurrence.frequency === "monthly")
+        result.setMonth(result.getMonth() + interval);
+    else
+        result.setFullYear(result.getFullYear() + interval);
+    return result;
+}
+/** Expand one event into occurrences intersecting inclusive range. */
+export function expandRecurringEvent(event, rangeStart, rangeEnd) {
+    if (!event.recurrence)
+        return [event];
+    const recurrence = event.recurrence;
+    const duration = new Date(event.end).getTime() - new Date(event.start).getTime();
+    const until = recurrence.until
+        ? new Date(recurrence.until).getTime()
+        : Infinity;
+    const maxCount = recurrence.count === undefined
+        ? Infinity
+        : Math.max(0, Math.floor(recurrence.count));
+    const occurrences = [];
+    let occurrenceStart = new Date(event.start);
+    let index = 0;
+    // Guard malformed input while keeping expansion deterministic for UI rendering.
+    while (index < maxCount && occurrenceStart.getTime() <= until) {
+        const occurrenceEnd = new Date(occurrenceStart.getTime() + duration);
+        if (occurrenceEnd.getTime() >= rangeStart.getTime() &&
+            occurrenceStart.getTime() <= rangeEnd.getTime()) {
+            occurrences.push({
+                ...event,
+                id: index === 0 ? event.id : `${event.id}::${occurrenceStart.getTime()}`,
+                start: occurrenceStart,
+                end: occurrenceEnd,
+            });
+        }
+        index += 1;
+        const nextStart = addOccurrence(occurrenceStart, recurrence);
+        if (nextStart.getTime() <= occurrenceStart.getTime())
+            break;
+        occurrenceStart = nextStart;
+        // No need to iterate unbounded future occurrences after range end.
+        if (occurrenceStart.getTime() > rangeEnd.getTime() &&
+            !recurrence.until &&
+            recurrence.count === undefined)
+            break;
+    }
+    return occurrences;
+}
+/** Expand recurring events for a calendar viewport. Non-recurring events pass through. */
+export function expandRecurringEvents(events, rangeStart, rangeEnd) {
+    return events.flatMap((event) => expandRecurringEvent(event, rangeStart, rangeEnd));
+}

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@intinyagroup/calendar",
-  "version": "0.1.1-alpha.8",
+  "version": "0.1.2",
   "description": "Calendar and DatePicker components for intinyagroup UI",
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     }
   },
   "files": [
@@ -16,16 +18,19 @@
   "scripts": {
     "build": "svelte-package -o dist",
     "check": "echo 'no check'",
-    "dev": "svelte-package -o dist -w"
+    "dev": "svelte-package -o dist -w",
+    "test": "vitest run"
   },
   "dependencies": {
-    "@intinyagroup/ui": "0.1.1-alpha.8"
+    "@intinyagroup/ui": "0.2.7",
+    "date-fns": "^4.4.0",
+    "lucide-svelte": "^1.0.1"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
     "svelte": "^5.55.2",
-    "typescript": "^6.0.2",
-    "@sveltejs/vite-plugin-svelte": "^5.1.1"
+    "typescript": "^6.0.2"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"