@pexip-engage-public/plugin-react 0.0.7

package/CHANGELOG.md

@@ -0,0 +1,44 @@
+# @pexip-engage-public/plugin-react
+
+## 0.0.7
+
+### Patch Changes
+
+- a17130f3: chore: fix publishing setup
+
+## 0.0.6
+
+### Patch Changes
+
+- 48abc995: chore: cleanup monorepo setup
+- 1681e3ed: chore: update "author" & "license" fields in package.json
+
+## 0.0.5
+
+### Patch Changes
+
+- 1e2b0577: chore(deps): update react monorepo to v18 (major)
+
+## 0.0.4
+
+### Patch Changes
+
+- c36e435a: dependencies: update non-major dependencies
+
+## 0.0.3
+
+### Patch Changes
+
+- 75f459a4: chore: BVB - Make bundle compatible for CRA4 consumption
+
+## 0.0.2
+
+### Patch Changes
+
+- 09cf3c2a: fix public npm publishes
+
+## 0.0.1
+
+### Patch Changes
+
+- 16586c8b: feature: Implement react component for skedify-plugin integration in react apps

package/README.md

@@ -0,0 +1,44 @@
+# @pexip-engage-public/plugin-react
+
+Wrapper around the Skedify Plugin, to integrate it more conveniently inside React Applications.
+
+There are 2 exports:
+
+- `<SkedifyPlugin configuration={configuration} />`:
+  React Component that renders the plugin inside a `div`. You can pass plugin options to it using the `configuration` prop. All other props are passed through to the underlying `div` element.
+
+- `<SkedifyPluginProvider value={configuration}>`:
+  This is a React Context Provider, that allows you to set certain default values. The interface is the same as the `configuration` prop.
+
+  This component is **not** required, but can be useful to populate some shared configuration for each plugin instance, eg:
+
+```tsx
+const defaultConfig = {
+  scriptSrc: "https://plugin.skedify.io/{ENTERPRISE_NAME}/skedify-plugin.js",
+  language: "nl-be",
+  flow: "S'TQC",
+  meeting_types: "video",
+  timezone: "Europe/Brussels",
+  oauth: {
+    client: "XXX",
+  },
+  appointment: {
+    office_id: "1",
+  },
+};
+
+function App() {
+  return (
+    <SkedifyPluginProvider value={defaultConfig}>
+      {/* All <SkedifyPlugin /> components will now merge their own passed configuration with the defaultConfig value */}
+      <SkedifyPlugin configuration={{ appointment: { subject_id: "1" } }}>
+    </SkedifyPluginProvider>
+  );
+}
+```
+
+The `SkedifyPlugin` reads the current context value, and merges it with its own passed props.
+
+Required props:
+
+- `scriptSrc`: The plugin entry point URL. eg: `https://plugin.skedify.io/{ENTERPRISE_NAME}/skedify-plugin.js`

package/dist/index.js

@@ -0,0 +1,171 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  SkedifyPlugin: () => SkedifyPlugin,
+  SkedifyPluginProvider: () => SkedifyPluginProvider
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/SkedifyPlugin.tsx
+var import_react4 = __toESM(require("react"));
+
+// src/usePluginOptions.ts
+var import_react2 = __toESM(require("react"));
+var import_deepmerge = __toESM(require("deepmerge"));
+
+// src/SkedifyPluginContext.ts
+var import_react = __toESM(require("react"));
+var SkedifyPluginContext = import_react.default.createContext({});
+var SkedifyPluginProvider = SkedifyPluginContext.Provider;
+
+// src/usePluginOptions.ts
+function usePluginConfiguration(overrideConfiguration) {
+  const defaultConfiguration = import_react2.default.useContext(SkedifyPluginContext);
+  const resolvedConfiguration = (0, import_deepmerge.default)(defaultConfiguration, overrideConfiguration);
+  return useMemoizedObject(resolvedConfiguration);
+}
+function useMemoizedObject(currentObj) {
+  const prevResult = import_react2.default.useRef(currentObj);
+  const memoizedObj = replaceEqualDeep(prevResult.current, currentObj);
+  import_react2.default.useEffect(() => {
+    prevResult.current = memoizedObj;
+  });
+  return memoizedObj;
+}
+function replaceEqualDeep(a, b) {
+  if (a === b) {
+    return a;
+  }
+  const array = Array.isArray(a) && Array.isArray(b);
+  if (array || isPlainObject(a) && isPlainObject(b)) {
+    const aSize = array ? a.length : Object.keys(a).length;
+    const bItems = array ? b : Object.keys(b);
+    const bSize = bItems.length;
+    const copy = array ? [] : {};
+    let equalItems = 0;
+    for (let i = 0; i < bSize; i++) {
+      const key = array ? i : bItems[i];
+      copy[key] = replaceEqualDeep(a[key], b[key]);
+      if (copy[key] === a[key]) {
+        equalItems++;
+      }
+    }
+    return aSize === bSize && equalItems === aSize ? a : copy;
+  }
+  return b;
+}
+function isPlainObject(o) {
+  if (!hasObjectPrototype(o)) {
+    return false;
+  }
+  const ctor = o.constructor;
+  if (typeof ctor === "undefined") {
+    return true;
+  }
+  const prot = ctor.prototype;
+  if (!hasObjectPrototype(prot)) {
+    return false;
+  }
+  if (!prot.hasOwnProperty("isPrototypeOf")) {
+    return false;
+  }
+  return true;
+}
+function hasObjectPrototype(o) {
+  return Object.prototype.toString.call(o) === "[object Object]";
+}
+
+// src/useSkedifyPlugin.ts
+var import_react3 = __toESM(require("react"));
+function useSkedifyPlugin(scriptSrc, scriptId) {
+  const ctx = import_react3.default.useContext(SkedifyPluginContext);
+  const [pluginInstance, setPlugin] = import_react3.default.useState({
+    Plugin: null
+  });
+  const src = scriptSrc ?? ctx.scriptSrc;
+  import_react3.default.useEffect(() => {
+    if (!src) {
+      console.warn(
+        "No scriptSrc was provided to SkedifyPluginProvider, or as prop to <SkedifyPlugin />, skipping plugin initialization..."
+      );
+      return;
+    }
+    if (window && document) {
+      const id = scriptId ?? src;
+      if (!document.getElementById(id)) {
+        const script = document.createElement("script");
+        script.src = src;
+        script.async = true;
+        script.defer = true;
+        script.id = id;
+        window.document.body.appendChild(script);
+      }
+      if (window.Skedify && window.Skedify.Plugin) {
+        setPlugin({ Plugin: window.Skedify.Plugin });
+      } else {
+        const intervalId = window.setInterval(() => {
+          if (window.Skedify && window.Skedify.Plugin) {
+            window.clearInterval(intervalId);
+            setPlugin({ Plugin: window.Skedify.Plugin });
+          }
+        }, 200);
+        return () => window.clearInterval(intervalId);
+      }
+    }
+  }, [src, scriptId]);
+  return pluginInstance;
+}
+
+// src/SkedifyPlugin.tsx
+function SkedifyPlugin({ configuration, ...props }) {
+  const { Plugin } = useSkedifyPlugin(configuration == null ? void 0 : configuration.scriptSrc);
+  const options = usePluginConfiguration(configuration);
+  const containerRef = import_react4.default.useRef(null);
+  import_react4.default.useEffect(() => {
+    if (Plugin && containerRef.current) {
+      const instance = new Plugin(containerRef.current, options);
+      return () => instance.dispose();
+    }
+  }, [Plugin, options]);
+  const className = import_react4.default.useMemo(() => {
+    var _a;
+    const preInitClassName = (_a = props.className) == null ? void 0 : _a.replace("skedify-plugin", "").trim();
+    const postInitClassName = `${preInitClassName ?? ""} skedify-plugin`.trim();
+    return Plugin ? postInitClassName : preInitClassName;
+  }, [Plugin, props.className]);
+  return /* @__PURE__ */ import_react4.default.createElement("div", {
+    ...props,
+    className,
+    ref: containerRef
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SkedifyPlugin,
+  SkedifyPluginProvider
+});

package/dist/index.mjs

@@ -0,0 +1,137 @@
+// src/SkedifyPlugin.tsx
+import React4 from "react";
+
+// src/usePluginOptions.ts
+import React2 from "react";
+import deepmerge from "deepmerge";
+
+// src/SkedifyPluginContext.ts
+import React from "react";
+var SkedifyPluginContext = React.createContext({});
+var SkedifyPluginProvider = SkedifyPluginContext.Provider;
+
+// src/usePluginOptions.ts
+function usePluginConfiguration(overrideConfiguration) {
+  const defaultConfiguration = React2.useContext(SkedifyPluginContext);
+  const resolvedConfiguration = deepmerge(defaultConfiguration, overrideConfiguration);
+  return useMemoizedObject(resolvedConfiguration);
+}
+function useMemoizedObject(currentObj) {
+  const prevResult = React2.useRef(currentObj);
+  const memoizedObj = replaceEqualDeep(prevResult.current, currentObj);
+  React2.useEffect(() => {
+    prevResult.current = memoizedObj;
+  });
+  return memoizedObj;
+}
+function replaceEqualDeep(a, b) {
+  if (a === b) {
+    return a;
+  }
+  const array = Array.isArray(a) && Array.isArray(b);
+  if (array || isPlainObject(a) && isPlainObject(b)) {
+    const aSize = array ? a.length : Object.keys(a).length;
+    const bItems = array ? b : Object.keys(b);
+    const bSize = bItems.length;
+    const copy = array ? [] : {};
+    let equalItems = 0;
+    for (let i = 0; i < bSize; i++) {
+      const key = array ? i : bItems[i];
+      copy[key] = replaceEqualDeep(a[key], b[key]);
+      if (copy[key] === a[key]) {
+        equalItems++;
+      }
+    }
+    return aSize === bSize && equalItems === aSize ? a : copy;
+  }
+  return b;
+}
+function isPlainObject(o) {
+  if (!hasObjectPrototype(o)) {
+    return false;
+  }
+  const ctor = o.constructor;
+  if (typeof ctor === "undefined") {
+    return true;
+  }
+  const prot = ctor.prototype;
+  if (!hasObjectPrototype(prot)) {
+    return false;
+  }
+  if (!prot.hasOwnProperty("isPrototypeOf")) {
+    return false;
+  }
+  return true;
+}
+function hasObjectPrototype(o) {
+  return Object.prototype.toString.call(o) === "[object Object]";
+}
+
+// src/useSkedifyPlugin.ts
+import React3 from "react";
+function useSkedifyPlugin(scriptSrc, scriptId) {
+  const ctx = React3.useContext(SkedifyPluginContext);
+  const [pluginInstance, setPlugin] = React3.useState({
+    Plugin: null
+  });
+  const src = scriptSrc ?? ctx.scriptSrc;
+  React3.useEffect(() => {
+    if (!src) {
+      console.warn(
+        "No scriptSrc was provided to SkedifyPluginProvider, or as prop to <SkedifyPlugin />, skipping plugin initialization..."
+      );
+      return;
+    }
+    if (window && document) {
+      const id = scriptId ?? src;
+      if (!document.getElementById(id)) {
+        const script = document.createElement("script");
+        script.src = src;
+        script.async = true;
+        script.defer = true;
+        script.id = id;
+        window.document.body.appendChild(script);
+      }
+      if (window.Skedify && window.Skedify.Plugin) {
+        setPlugin({ Plugin: window.Skedify.Plugin });
+      } else {
+        const intervalId = window.setInterval(() => {
+          if (window.Skedify && window.Skedify.Plugin) {
+            window.clearInterval(intervalId);
+            setPlugin({ Plugin: window.Skedify.Plugin });
+          }
+        }, 200);
+        return () => window.clearInterval(intervalId);
+      }
+    }
+  }, [src, scriptId]);
+  return pluginInstance;
+}
+
+// src/SkedifyPlugin.tsx
+function SkedifyPlugin({ configuration, ...props }) {
+  const { Plugin } = useSkedifyPlugin(configuration == null ? void 0 : configuration.scriptSrc);
+  const options = usePluginConfiguration(configuration);
+  const containerRef = React4.useRef(null);
+  React4.useEffect(() => {
+    if (Plugin && containerRef.current) {
+      const instance = new Plugin(containerRef.current, options);
+      return () => instance.dispose();
+    }
+  }, [Plugin, options]);
+  const className = React4.useMemo(() => {
+    var _a;
+    const preInitClassName = (_a = props.className) == null ? void 0 : _a.replace("skedify-plugin", "").trim();
+    const postInitClassName = `${preInitClassName ?? ""} skedify-plugin`.trim();
+    return Plugin ? postInitClassName : preInitClassName;
+  }, [Plugin, props.className]);
+  return /* @__PURE__ */ React4.createElement("div", {
+    ...props,
+    className,
+    ref: containerRef
+  });
+}
+export {
+  SkedifyPlugin,
+  SkedifyPluginProvider
+};

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@pexip-engage-public/plugin-react",
+  "version": "0.0.7",
+  "description": "React wrapper component for the Skedify Plugin",
+  "homepage": "https://github.com/skedify/frontend-mono/tree/develop/packages/plugin-react#readme",
+  "bugs": {
+    "url": "https://github.com/skedify/frontend-mono/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/skedify/frontend-mono.git",
+    "directory": "packages/plugin-react"
+  },
+  "license": "UNLICENSED",
+  "author": {
+    "name": "Pexip Engage",
+    "email": "info@pexip.com",
+    "url": "https://engage.pexip.com"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./src/index.tsx": {
+      "import": "./src/index.tsx"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./typings/index.d.ts",
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "typings",
+    "src"
+  ],
+  "jest": {
+    "preset": "@pexip-engage/scripts/jest/node"
+  },
+  "dependencies": {
+    "deepmerge": "4.2.2"
+  },
+  "devDependencies": {
+    "@pexip-engage/scripts": "0.0.17",
+    "@pexip-engage/tsconfig": "0.0.5"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf .turbo node_modules dist typings",
+    "dev": "concurrently \"tsc -w\" \"tsup --watch\"",
+    "lint": "cross-env TIMING=1 eslint .",
+    "lint:fix": "pnpm lint --fix",
+    "test": "jest --passWithNoTests",
+    "typecheck": "tsc"
+  }
+}

package/src/SkedifyPlugin.tsx

@@ -0,0 +1,35 @@
+// TODO: Use `import React` always! (CRA4 support) Undo these changes when we drop CRA 4 support
+import React from "react";
+
+import { SkedifyPluginContextProps } from "./SkedifyPluginContext";
+import { usePluginConfiguration } from "./usePluginOptions";
+import { useSkedifyPlugin } from "./useSkedifyPlugin";
+
+interface SkedifyPluginProps
+  extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  configuration: SkedifyPluginContextProps;
+}
+
+export function SkedifyPlugin({ configuration, ...props }: SkedifyPluginProps) {
+  const { Plugin } = useSkedifyPlugin(configuration?.scriptSrc);
+  const options = usePluginConfiguration(configuration);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (Plugin && containerRef.current) {
+      // plugin initialized
+      const instance = new Plugin(containerRef.current, options);
+
+      return () => instance.dispose();
+    }
+  }, [Plugin, options]);
+
+  const className = React.useMemo(() => {
+    const preInitClassName = props.className?.replace("skedify-plugin", "").trim();
+    const postInitClassName = `${preInitClassName ?? ""} skedify-plugin`.trim();
+
+    return Plugin ? postInitClassName : preInitClassName;
+  }, [Plugin, props.className]);
+
+  return <div {...props} className={className} ref={containerRef} />;
+}

package/src/SkedifyPluginContext.ts

@@ -0,0 +1,16 @@
+// TODO: Use `import React` always! (CRA4 support) Undo these changes when we drop CRA 4 support
+import React from "react";
+
+import type { SkedifyPluginConfiguration } from "./types";
+
+export interface SkedifyPluginContextProps extends SkedifyPluginConfiguration {
+  /**
+   * The plugin entry point URL.
+   * eg: `https://plugin.skedify.io/{ENTERPRISE_NAME}/skedify-plugin.js`
+   */
+  scriptSrc?: string;
+}
+
+export const SkedifyPluginContext = React.createContext<SkedifyPluginContextProps>({});
+
+export const SkedifyPluginProvider = SkedifyPluginContext.Provider;

package/src/index.tsx

@@ -0,0 +1,3 @@
+export { SkedifyPlugin } from "./SkedifyPlugin";
+export type { SkedifyPluginContextProps } from "./SkedifyPluginContext";
+export { SkedifyPluginProvider } from "./SkedifyPluginContext";