@makeaslot/react 0.1.0

package/README.md

@@ -0,0 +1,60 @@
+# @makeaslot/react
+
+React controls for the hosted MakeASlot booking experience. The package loads the existing `embed.js` script and opens its modal or drawer; it does not render a booking form inline.
+
+## Install
+
+```bash
+npm install @makeaslot/react
+```
+
+## Usage
+
+```tsx
+import { MakeASlotButton } from "@makeaslot/react";
+
+export function BookAppointment() {
+  return (
+    <MakeASlotButton
+      origin="https://appointix.duckdns.org"
+      makeASlotLink="joe-consultancy/discovery-call"
+      presentation="modal"
+      theme="dark"
+      brandName="Joe Consultancy"
+      logoUrl="https://appointix-server.duckdns.org/storage/booking-branding/10/logo.png"
+      className="book-button"
+    >
+      Book now
+    </MakeASlotButton>
+  );
+}
+```
+
+Set `presentation="drawer"` to open the same hosted booking experience in a drawer.
+
+For custom triggers, use `openMakeASlot`:
+
+```tsx
+import { openMakeASlot } from "@makeaslot/react";
+
+openMakeASlot({
+  origin: "https://appointix.duckdns.org",
+  makeASlotLink: "joe-consultancy/discovery-call",
+  presentation: "modal",
+});
+```
+
+## Build and test locally
+
+```bash
+cd packages/react
+npm run build
+npm run pack:check
+```
+
+`npm pack` produces the exact archive that will be published. Publish only after logging into the intended npm organization:
+
+```bash
+cd packages/react
+npm publish
+```

package/dist/MakeASlotButton.d.ts

@@ -0,0 +1,7 @@
+import type { MakeASlotButtonProps } from "./types.js";
+/**
+ * A regular React button that opens the existing MakeASlot modal or drawer.
+ * It does not render a booking flow inline.
+ */
+export declare function MakeASlotButton({ children, onClick, origin, makeASlotLink, presentation, theme, brandName, logoUrl, scriptSrc, type, ...buttonProps }: MakeASlotButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=MakeASlotButton.d.ts.map

package/dist/MakeASlotButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MakeASlotButton.d.ts","sourceRoot":"","sources":["../src/MakeASlotButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEvD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAqB,EACrB,OAAO,EACP,MAAM,EACN,aAAa,EACb,YAAsB,EACtB,KAAe,EACf,SAAS,EACT,OAAO,EACP,SAAS,EACT,IAAe,EACf,GAAG,WAAW,EACf,EAAE,oBAAoB,+BA2BtB"}

package/dist/MakeASlotButton.js

@@ -0,0 +1,39 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { loadMakeASlot, openMakeASlot } from "./script-loader.js";
+/**
+ * A regular React button that opens the existing MakeASlot modal or drawer.
+ * It does not render a booking flow inline.
+ */
+export function MakeASlotButton(_a) {
+    var { children = "Book now", onClick, origin, makeASlotLink, presentation = "modal", theme = "light", brandName, logoUrl, scriptSrc, type = "button" } = _a, buttonProps = __rest(_a, ["children", "onClick", "origin", "makeASlotLink", "presentation", "theme", "brandName", "logoUrl", "scriptSrc", "type"]);
+    useEffect(() => {
+        loadMakeASlot({ origin, scriptSrc });
+    }, [origin, scriptSrc]);
+    return (_jsx("button", Object.assign({}, buttonProps, { type: type, onClick: (event) => {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            if (event.defaultPrevented)
+                return;
+            openMakeASlot({
+                origin,
+                makeASlotLink,
+                presentation,
+                theme,
+                brandName,
+                logoUrl,
+                scriptSrc,
+            });
+        }, children: children })));
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { MakeASlotButton } from "./MakeASlotButton.js";
+export { loadMakeASlot, openMakeASlot } from "./script-loader.js";
+export type { MakeASlotApi, MakeASlotButtonProps, MakeASlotOptions, MakeASlotPresentation, MakeASlotTheme, } from "./types.js";
+//# 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":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAClE,YAAY,EACV,YAAY,EACZ,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,GACf,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+"use client";
+export { MakeASlotButton } from "./MakeASlotButton.js";
+export { loadMakeASlot, openMakeASlot } from "./script-loader.js";

package/dist/script-loader.d.ts

@@ -0,0 +1,15 @@
+import type { MakeASlotApi, MakeASlotOptions } from "./types.js";
+declare global {
+    interface Window {
+        MakeASlot?: MakeASlotApi;
+    }
+}
+/** Loads the MakeASlot embed script if necessary and returns its global command API. */
+export declare function loadMakeASlot(options: Pick<MakeASlotOptions, "origin"> & {
+    scriptSrc?: string;
+}): MakeASlotApi | undefined;
+/** Opens the existing MakeASlot modal or drawer for a booking link. */
+export declare function openMakeASlot(options: MakeASlotOptions & {
+    scriptSrc?: string;
+}): void;
+//# sourceMappingURL=script-loader.d.ts.map

package/dist/script-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"script-loader.d.ts","sourceRoot":"","sources":["../src/script-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEjE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,SAAS,CAAC,EAAE,YAAY,CAAC;KAC1B;CACF;AAmCD,wFAAwF;AACxF,wBAAgB,aAAa,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4BAM/F;AAED,uEAAuE;AACvE,wBAAgB,aAAa,CAC3B,OAAO,EAAE,gBAAgB,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,QAQnD"}

package/dist/script-loader.js

@@ -0,0 +1,54 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+function normalizedOrigin(origin) {
+    return origin.replace(/\/$/, "");
+}
+function getOrCreateQueue() {
+    if (window.MakeASlot)
+        return window.MakeASlot;
+    const queued = ((command, options) => {
+        var _a;
+        queued.q = (_a = queued.q) !== null && _a !== void 0 ? _a : [];
+        queued.q.push(options === undefined ? [command] : [command, options]);
+    });
+    window.MakeASlot = queued;
+    return queued;
+}
+function ensureScript(scriptSrc) {
+    const absoluteSrc = new URL(scriptSrc, window.location.href).href;
+    const existing = Array.from(document.scripts).find((script) => script.src === absoluteSrc);
+    if (existing)
+        return;
+    const script = document.createElement("script");
+    script.src = absoluteSrc;
+    script.async = true;
+    script.dataset.makeASlotEmbed = "true";
+    document.head.appendChild(script);
+}
+/** Loads the MakeASlot embed script if necessary and returns its global command API. */
+export function loadMakeASlot(options) {
+    var _a;
+    if (typeof window === "undefined")
+        return undefined;
+    const api = getOrCreateQueue();
+    ensureScript((_a = options.scriptSrc) !== null && _a !== void 0 ? _a : `${normalizedOrigin(options.origin)}/embed.js`);
+    return api;
+}
+/** Opens the existing MakeASlot modal or drawer for a booking link. */
+export function openMakeASlot(options) {
+    const api = loadMakeASlot(options);
+    if (!api)
+        return;
+    const { scriptSrc: _scriptSrc } = options, bookingOptions = __rest(options, ["scriptSrc"]);
+    api("init", bookingOptions);
+    api("open");
+}

package/dist/types.d.ts

@@ -0,0 +1,26 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+export type MakeASlotPresentation = "modal" | "drawer";
+export type MakeASlotTheme = "light" | "dark";
+export interface MakeASlotOptions {
+    /** The domain where embed.js and the booking page are hosted. */
+    origin: string;
+    /** The booking-link slug, or a complete booking-link URL. */
+    makeASlotLink: string;
+    /** Opens the existing booking experience as a modal or a right-side drawer. */
+    presentation?: MakeASlotPresentation;
+    theme?: MakeASlotTheme;
+    brandName?: string;
+    logoUrl?: string;
+}
+export interface MakeASlotButtonProps extends MakeASlotOptions, Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Overrides the default `${origin}/embed.js` loader URL. */
+    scriptSrc?: string;
+    children?: ReactNode;
+}
+export type MakeASlotCommand = "init" | "open" | "close";
+export interface MakeASlotApi {
+    (command: "init", options: MakeASlotOptions): void;
+    (command: "open" | "close"): void;
+    q?: unknown[][];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,QAAQ,CAAC;AACvD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IAC/B,iEAAiE;IACjE,MAAM,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,aAAa,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,oBACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC3D,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,YAAY;IAC3B,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACnD,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAClC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,CAAC;CACjB"}

package/dist/types.js

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

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@makeaslot/react",
+  "version": "0.1.0",
+  "description": "React controls for opening MakeASlot booking modals and drawers.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=18.2.0 <21"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "typescript": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepack": "npm run build",
+    "pack:check": "npm pack --dry-run"
+  }
+}