@placetopay/lightbox-sdk 0.2.0 → 0.3.0

package/README.md

@@ -3,15 +3,14 @@ Small javascript library to encapsulate websites in a lightbox with configurable
 
 The library consists of 2 parts:
 
-- LightboxClient
 - LightboxApp
+- LightboxClient
 
 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)

package/package.json

@@ -1,26 +1,12 @@
 {
   "name": "@placetopay/lightbox-sdk",
-  "version": "0.2.0",
+  "version": "0.3.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"
+    "/dist"
   ],
-  "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"
@@ -39,19 +25,6 @@
   },
   "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"
+    "typescript": "^4.8.3"
   }
 }

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

@@ -1,5 +0,0 @@
-import { ClientStyles } from '@/types';
-export declare const LightboxApp: {
-    emit: (type: string, data: unknown) => void;
-    sendStyles: (styles: ClientStyles) => void;
-};

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

@@ -1,9 +0,0 @@
-import { LightboxAppEvents } from '@/constants';
-export var LightboxApp = {
-    emit: function (type, data) {
-        globalThis.parent.postMessage({ event: LightboxAppEvents.EMIT, type: type, data: data }, '*');
-    },
-    sendStyles: function (styles) {
-        globalThis.parent.postMessage({ event: LightboxAppEvents.SEND_STYLES, styles: styles }, '*');
-    },
-};

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

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

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

@@ -1,64 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { Config } from '@/config';
-import { Styles, ElementIds, Dimensions, LightboxAppEvents } from '@/constants';
-export var mountListeners = function (callbacks, styles) {
-    if (!callbacks)
-        return;
-    var callbacksListener = function (event) {
-        var _a;
-        if (event.data.event !== LightboxAppEvents.EMIT)
-            return;
-        (_a = callbacks[event.data.type]) === null || _a === void 0 ? void 0 : _a.call(callbacks, event.data.data);
-        unmountLightbox(callbacksListener);
-    };
-    var stylesListener = function (event) {
-        if (event.data.event !== LightboxAppEvents.SEND_STYLES)
-            return;
-        mountStyles(__assign(__assign(__assign({}, event.data.styles), styles), { background: __assign(__assign({}, event.data.styles.background), styles.background) }));
-        globalThis.removeEventListener('message', stylesListener);
-    };
-    globalThis.addEventListener('message', callbacksListener);
-    globalThis.addEventListener('message', stylesListener);
-};
-export var mountIFrameElement = function (url, styles) {
-    var wrapper = document.createElement('div');
-    wrapper.id = ElementIds.WRAPPER_ID;
-    var iframe = document.createElement('iframe');
-    iframe.src = url;
-    iframe.id = ElementIds.IFRAME_ID;
-    mountStyles(styles);
-    document.body.appendChild(wrapper);
-    wrapper.appendChild(iframe);
-};
-var mountStyles = function (styles) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    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 height = (_h = styles.height) !== null && _h !== void 0 ? _h : Config.defaultDimension.height;
-    if (styles.dimension)
-        height = Dimensions[styles.dimension.toUpperCase()].height;
-    document.documentElement.style.setProperty(Styles.MAX_HEIGHT, "".concat(height.toString(), "px"));
-    var width = (_j = styles.width) !== null && _j !== void 0 ? _j : Config.defaultDimension.width;
-    if (styles.dimension)
-        width = Dimensions[styles.dimension.toUpperCase()].width;
-    document.documentElement.style.setProperty(Styles.MAX_WIDTH, "".concat(width.toString(), "px"));
-};
-var unmountLightbox = function (listener) {
-    var _a;
-    (_a = document.getElementById(ElementIds.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

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

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

@@ -1,22 +0,0 @@
-import { redirectBasedOnDriver } from '@/helpers';
-import { mountIFrameElement, mountListeners } from './assemblers';
-export var LightboxClient = {
-    init: function (url, options) {
-        var _a, _b, _c;
-        var lightbox = {
-            callbacks: (_a = options === null || options === void 0 ? void 0 : options.callbacks) !== null && _a !== void 0 ? _a : {},
-            allowRedirects: (_b = options === null || options === void 0 ? void 0 : options.allowRedirects) !== null && _b !== void 0 ? _b : true,
-            styles: (_c = options === null || options === void 0 ? void 0 : options.styles) !== null && _c !== void 0 ? _c : {},
-            open: function () {
-                if (lightbox.allowRedirects)
-                    redirectBasedOnDriver(url);
-                mountListeners(lightbox.callbacks, lightbox.styles);
-                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/config.d.ts

@@ -1,6 +0,0 @@
-export declare const Config: {
-    defaultDimension: {
-        height: number;
-        width: number;
-    };
-};

package/dist/lib/core/config.js

@@ -1,4 +0,0 @@
-import { Dimensions } from './constants';
-export var Config = {
-    defaultDimension: Dimensions.MD,
-};

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

@@ -1,29 +0,0 @@
-export declare const ElementIds: {
-    WRAPPER_ID: string;
-    IFRAME_ID: string;
-    STYLES_ID: string;
-};
-export declare enum LightboxAppEvents {
-    EMIT = "emit",
-    SEND_STYLES = "sendStyles"
-}
-export declare const Styles: {
-    BACKGROUND_COLOR: string;
-    ROUNDED: string;
-    MAX_HEIGHT: string;
-    MAX_WIDTH: string;
-};
-export declare const Dimensions: {
-    SM: {
-        height: number;
-        width: number;
-    };
-    MD: {
-        height: number;
-        width: number;
-    };
-    LG: {
-        height: number;
-        width: number;
-    };
-};

package/dist/lib/core/constants.js

@@ -1,21 +0,0 @@
-export var ElementIds = {
-    WRAPPER_ID: 'placetopay_lightbox_wrapper',
-    IFRAME_ID: 'placetopay_lightbox',
-    STYLES_ID: 'placetopay-lightbox',
-};
-export var LightboxAppEvents;
-(function (LightboxAppEvents) {
-    LightboxAppEvents["EMIT"] = "emit";
-    LightboxAppEvents["SEND_STYLES"] = "sendStyles";
-})(LightboxAppEvents || (LightboxAppEvents = {}));
-export var Styles = {
-    BACKGROUND_COLOR: '--placetopay-lightbox-background-color',
-    ROUNDED: '--placetopay-lightbox-border-radius',
-    MAX_HEIGHT: '--placetopay-lightbox-max-height',
-    MAX_WIDTH: '--placetopay-lightbox-max-width',
-};
-export var Dimensions = {
-    SM: { height: 400, width: 320 },
-    MD: { height: 640, width: 512 },
-    LG: { height: 1000, width: 800 },
-};

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

@@ -1 +0,0 @@
-export declare const redirectBasedOnDriver: (url: string) => void;

package/dist/lib/core/helpers.js

@@ -1,7 +0,0 @@
-export var redirectBasedOnDriver = function (url) {
-    if (navigator.userAgent.match(/iPhone|iPad|iPod/i) ||
-        /^((?!chrome|android).)*safari/i.test(navigator.userAgent) // regex from https://stackoverflow.com/a/23522755
-    ) {
-        location.href = url;
-    }
-};

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

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

package/dist/lib/core/index.js

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

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

@@ -1,32 +0,0 @@
-import { LightboxAppEvents } from './constants';
-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;
-    allowRedirects?: boolean;
-    styles?: ClientStyles;
-};
-export declare type ApiStructure = {
-    event: LightboxAppEvents;
-    data: unknown;
-    type: string;
-};
-export declare type LightboxInstance = {
-    styles: ClientStyles;
-    allowRedirects: boolean;
-    callbacks: ClientCallbacks;
-    open: () => void;
-};

package/dist/lib/core/types.js

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

package/dist/lib/styles/styles.css

@@ -1,26 +0,0 @@
-#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;
-    user-select: none;
-}
-
-#placetopay_lightbox {
-    border: 0;
-    border-radius: var(--placetopay-lightbox-border-radius);
-    overflow: hidden;
-    background-color: white;
-    height: 100%;
-    width: 100%;
-    max-height: var(--placetopay-lightbox-max-height);
-    max-width: var(--placetopay-lightbox-max-width);
-    overflow: auto;
-    box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.5);
-}