@placetopay/lightbox-sdk 0.1.0

package/README.md

@@ -0,0 +1,19 @@
+# Lightbox-sdk
+Small javascript library to encapsulate websites in a lightbox with configurable styles and behaviors.
+
+The library consists of 2 parts:
+
+- LightboxClient
+- LightboxApp
+
+If you have a site A, and within it you want to display a site B using Lightbox-sdk:
+
+On site A the LightboxClient will be used (site that will display a lightbox)
+
+- It will define which site will be displayed in the lightbox
+- It will define the style of the lightbox
+- It will define the callbacks for each lightbox event
+
+On site B LightboxApp will be used (site that will be shown in a lightbox)
+
+- Define the event emission logic

package/dist/lib/core/LightboxApp/index.d.ts

@@ -0,0 +1,3 @@
+export declare const LightboxApp: {
+    emit: (type: string, data: unknown) => void;
+};

package/dist/lib/core/LightboxApp/index.js

@@ -0,0 +1,5 @@
+export var LightboxApp = {
+    emit: function (type, data) {
+        globalThis.parent.postMessage({ type: type, data: data }, '*');
+    },
+};

package/dist/lib/core/LightboxClient/assemblers.d.ts

@@ -0,0 +1,3 @@
+import { ClientCallbacks, ClientStyles } from '@/types';
+export declare const mountListener: (callbacks: ClientCallbacks) => void;
+export declare const mountIFrameElement: (url: string, styles: ClientStyles) => void;

package/dist/lib/core/LightboxClient/assemblers.js

@@ -0,0 +1,35 @@
+import { Styles, Ids } from '@/constants';
+export var mountListener = function (callbacks) {
+    if (!callbacks)
+        return;
+    var listener = function (event) {
+        var _a;
+        (_a = callbacks[event.data.type]) === null || _a === void 0 ? void 0 : _a.call(callbacks, event.data.data);
+        unmountLightbox(listener);
+    };
+    globalThis.addEventListener('message', listener);
+};
+export var mountIFrameElement = function (url, styles) {
+    var wrapper = document.createElement('div');
+    wrapper.id = Ids.WRAPPER_ID;
+    var iframe = document.createElement('iframe');
+    iframe.src = url;
+    iframe.id = Ids.IFRAME_ID;
+    mountStyles(styles);
+    document.body.appendChild(wrapper);
+    wrapper.appendChild(iframe);
+};
+var mountStyles = function (styles) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    var background = (_d = (_c = (_b = (_a = styles.background) === null || _a === void 0 ? void 0 : _a.color) === null || _b === void 0 ? void 0 : _b.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function (m, r, g, b) { return '#' + r + r + g + g + b + b; }).substring(1).match(/.{2}/g)) === null || _c === void 0 ? void 0 : _c.map(function (x) { return parseInt(x, 16); })) !== null && _d !== void 0 ? _d : [107, 114, 128];
+    background.push((_f = (_e = styles.background) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : 0.75);
+    document.documentElement.style.setProperty(Styles.BACKGROUND_COLOR, "rgb(".concat(background.join(', '), ")"));
+    var rounded = (_g = styles.rounded) !== null && _g !== void 0 ? _g : 0;
+    document.documentElement.style.setProperty(Styles.ROUNDED, "".concat(rounded.toString(), "px"));
+};
+var unmountLightbox = function (listener) {
+    var _a;
+    (_a = document.getElementById(Ids.WRAPPER_ID)) === null || _a === void 0 ? void 0 : _a.remove();
+    globalThis.removeEventListener('message', listener);
+    document.documentElement.style.removeProperty(Styles.BACKGROUND_COLOR);
+};

package/dist/lib/core/LightboxClient/index.d.ts

@@ -0,0 +1,4 @@
+import { InitOptions, LightboxInstance } from '@/types';
+export declare const LightboxClient: {
+    init: (url: string, options?: InitOptions) => LightboxInstance;
+};

package/dist/lib/core/LightboxClient/index.js

@@ -0,0 +1,18 @@
+import { mountIFrameElement, mountListener } from './assemblers';
+export var LightboxClient = {
+    init: function (url, options) {
+        var _a, _b;
+        var lightbox = {
+            callbacks: (_a = options === null || options === void 0 ? void 0 : options.callbacks) !== null && _a !== void 0 ? _a : {},
+            styles: (_b = options === null || options === void 0 ? void 0 : options.styles) !== null && _b !== void 0 ? _b : {},
+            open: function () {
+                mountListener(lightbox.callbacks);
+                mountIFrameElement(url, lightbox.styles);
+            },
+        };
+        if (options === null || options === void 0 ? void 0 : options.dispatch)
+            lightbox.open();
+        console.log("lightbox-sdk | client initialized (".concat(url, ")"));
+        return lightbox;
+    },
+};

package/dist/lib/core/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const Styles: {
+    BACKGROUND_COLOR: string;
+    ROUNDED: string;
+};
+export declare const Ids: {
+    WRAPPER_ID: string;
+    IFRAME_ID: string;
+    STYLES_ID: string;
+};

package/dist/lib/core/constants.js

@@ -0,0 +1,9 @@
+export var Styles = {
+    BACKGROUND_COLOR: '--placetopay-lightbox-background-color',
+    ROUNDED: '--placetopay-lightbox-border-radius',
+};
+export var Ids = {
+    WRAPPER_ID: 'placetopay_lightbox_wrapper',
+    IFRAME_ID: 'placetopay_lightbox',
+    STYLES_ID: 'placetopay-lightbox',
+};

package/dist/lib/core/index.d.ts

@@ -0,0 +1,2 @@
+export { LightboxApp } from './LightboxApp';
+export { LightboxClient } from './LightboxClient';

package/dist/lib/core/index.js

@@ -0,0 +1,2 @@
+export { LightboxApp } from './LightboxApp';
+export { LightboxClient } from './LightboxClient';

package/dist/lib/core/types.d.ts

@@ -0,0 +1,28 @@
+export declare type ClientCallback = (data: unknown) => void;
+export declare type ClientCallbacks = {
+    [key: string]: ClientCallback | undefined;
+};
+export declare type ClientStyles = {
+    background?: {
+        color?: string;
+        opacity?: number;
+    };
+    rounded?: number;
+    dimension?: 'sm' | 'md' | 'lg';
+    height?: number;
+    width?: number;
+};
+export declare type InitOptions = {
+    dispatch?: boolean;
+    callbacks?: ClientCallbacks;
+    styles?: ClientStyles;
+};
+export declare type ApiStructure = {
+    data: unknown;
+    type: string;
+};
+export declare type LightboxInstance = {
+    styles: ClientStyles;
+    callbacks: ClientCallbacks;
+    open: () => void;
+};

package/dist/lib/core/types.js

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

package/dist/lib/styles/styles.css

@@ -0,0 +1,19 @@
+#placetopay_lightbox_wrapper {
+    background: var(--placetopay-lightbox-background-color);
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+}
+
+#placetopay_lightbox {
+    border: 0;
+    border-radius: var(--placetopay-lightbox-border-radius);
+    overflow: hidden;
+    background-color: white;
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@placetopay/lightbox-sdk",
+  "version": "0.1.0",
+  "description": "Small javascript library to encapsulate websites in a lightbox with configurable styles and behaviors",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "/dist/lib"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "prebuild": "npm run clean-build",
+    "build": "tsc",
+    "postbuild": "copyfiles -u 1 src/**/*.css dist/",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "clean-build": "rimraf dist/",
+    "format": "npx prettier --write .",
+    "format:check": "npx prettier --check .",
+    "lint": "npx eslint --ext .ts --fix ./",
+    "lint:check": "npx eslint --ext .ts .",
+    "foli": "npm run format & npm run lint",
+    "foli:check": "npm run format:check & npm run lint:check"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://JuanZea@bitbucket.org/placetopay/lightbox-sdk.git"
+  },
+  "keywords": [
+    "lightbox",
+    "sdk",
+    "javascript",
+    "typescript"
+  ],
+  "author": "JuanZea",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://bitbucket.org/placetopay/lightbox-sdk/issues"
+  },
+  "homepage": "https://bitbucket.org/placetopay/lightbox-sdk#readme",
+  "devDependencies": {
+    "@types/node": "^18.7.23",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
+    "@vitejs/plugin-react": "^2.1.0",
+    "copyfiles": "^2.4.1",
+    "eslint": "^8.24.0",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.8.3",
+    "vite": "^3.1.4"
+  }
+}