@forcecalendar/react 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nirmala Rao Dhanawada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+# @forcecalendar/react
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+
+Thin React adapter for [forceCalendar](https://forcecalendar.org) — enterprise calendar Web Components that run under Salesforce Locker Service and strict CSP.
+
+Maps props to the `<forcecal-main>` element's attributes and its DOM events to React callbacks. SSR-safe (custom elements register client-side only), so it works in Next.js out of the box.
+
+## Install
+
+```bash
+npm install @forcecalendar/react @forcecalendar/core @forcecalendar/interface
+```
+
+## Use
+
+```tsx
+import { ForceCalendar } from '@forcecalendar/react';
+
+export default function Scheduling() {
+  return (
+    <ForceCalendar
+      view="month"
+      timezone="America/New_York"
+      height="600px"
+      onDateSelect={({ date }) => console.log('selected', date)}
+      onEventAdded={detail => console.log('added', detail)}
+    />
+  );
+}
+```
+
+Props: `view`, `date`, `locale`, `timezone`, `weekStartsOn`, `height`, `className`, `style`, plus callbacks `onEventAdded`, `onEventUpdated`, `onEventDeleted`, `onDateSelect`, `onViewChange`, `onNavigate`.
+
+Docs: [docs.forcecalendar.org](https://docs.forcecalendar.org) · License: [MIT](LICENSE)

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+export interface CalendarEventDetail {
+    [key: string]: unknown;
+}
+export interface ForceCalendarProps {
+    view?: 'month' | 'week' | 'day';
+    date?: Date | string;
+    locale?: string;
+    timezone?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    height?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onEventAdded?: (detail: CalendarEventDetail) => void;
+    onEventUpdated?: (detail: CalendarEventDetail) => void;
+    onEventDeleted?: (detail: CalendarEventDetail) => void;
+    onDateSelect?: (detail: CalendarEventDetail) => void;
+    onViewChange?: (detail: CalendarEventDetail) => void;
+    onNavigate?: (detail: CalendarEventDetail) => void;
+}
+export declare function ForceCalendar(props: ForceCalendarProps): import("react").JSX.Element;
+export default ForceCalendar;

package/dist/index.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @forcecalendar/react — thin React adapter for the forceCalendar
+ * Web Component. Maps props to attributes and DOM events to callbacks.
+ * No dependencies beyond the peer React and forceCalendar packages.
+ */
+import { useEffect, useRef } from 'react';
+const EVENT_MAP = [
+    ['calendar-event-added', 'onEventAdded'],
+    ['calendar-event-updated', 'onEventUpdated'],
+    ['calendar-event-deleted', 'onEventDeleted'],
+    ['calendar-date-select', 'onDateSelect'],
+    ['calendar-view-change', 'onViewChange'],
+    ['calendar-navigate', 'onNavigate'],
+];
+export function ForceCalendar(props) {
+    const ref = useRef(null);
+    const handlers = useRef(props);
+    handlers.current = props;
+    useEffect(() => {
+        // Register the custom elements client-side only — safe under SSR
+        import('@forcecalendar/interface');
+        const el = ref.current;
+        if (!el)
+            return;
+        const listeners = EVENT_MAP.map(([eventName, propName]) => {
+            const listener = (e) => {
+                const fn = handlers.current[propName];
+                fn?.(e.detail ?? {});
+            };
+            el.addEventListener(eventName, listener);
+            return [eventName, listener];
+        });
+        return () => {
+            for (const [eventName, listener] of listeners) {
+                el.removeEventListener(eventName, listener);
+            }
+        };
+    }, []);
+    const dateAttr = props.date instanceof Date ? props.date.toISOString() : props.date;
+    // React 19 passes unknown props on custom elements as attributes
+    return (
+    // @ts-expect-error custom element is not in JSX.IntrinsicElements
+    _jsx("forcecal-main", { ref: ref, class: props.className, style: props.style, view: props.view, date: dateAttr, locale: props.locale, timezone: props.timezone, "week-starts-on": props.weekStartsOn, height: props.height }));
+}
+export default ForceCalendar;

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@forcecalendar/react",
+  "version": "0.2.1",
+  "description": "React adapter for forceCalendar - enterprise calendar Web Components",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "npm run build && node test/smoke.mjs"
+  },
+  "peerDependencies": {
+    "@forcecalendar/core": ">=2.0.0",
+    "@forcecalendar/interface": ">=1.1.0",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@forcecalendar/core": "^2.3.0",
+    "@forcecalendar/interface": "^1.1.0",
+    "@types/react": "^19",
+    "react": "^19",
+    "react-dom": "^19",
+    "typescript": "^5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/forceCalendar/react.git"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}