@24i/bigscreen-sdk 0.9.9-alpha.2148 → 0.9.9-alpha.2149

package/packages/utils/src/offsetPosition.ts

@@ -0,0 +1,56 @@
+import { Reference } from '@24i/bigscreen-sdk/jsx';
+import { isRtl } from '@24i/bigscreen-sdk/i18n';
+
+type WritableCSSKeys = Exclude<(keyof CSSStyleDeclaration), 'length' | 'parentRule'>;
+
+const isCssSupported = <T extends WritableCSSKeys>(
+    property: T, value: CSSStyleDeclaration[T],
+) => {
+    const el = document.createElement('div');
+    if (el.style[property] === undefined) {
+        return false;
+    }
+    el.style[property] = value;
+    return !!el.style[property];
+};
+
+let useTransform = false;
+let transformKey = '';
+if (isCssSupported('transform', 'translate3d(0px, 0px, 0px)')) {
+    useTransform = true;
+    transformKey = 'transform';
+} else if (isCssSupported('webkitTransform', 'translate3d(0px, 0px, 0px)')) {
+    useTransform = true;
+    transformKey = 'webkitTransform';
+}
+
+function offsetPosition(
+    reference: Reference,
+    { x, y }: { x?: number | string, y?: number | string },
+    rtl: boolean = isRtl(),
+): void {
+    if (!reference.current) return;
+
+    const tx = typeof x === 'number' ? `${rtl ? -x : x}px` : (x || 0);
+    const ty = typeof y === 'number' ? `${y}px` : (y || 0);
+    if (useTransform) {
+        reference.current.style[transformKey] = `translate3d(${tx}, ${ty}, 0)`;
+    } else {
+        reference.current.style.top = ty;
+        reference.current.style.left = tx;
+    }
+}
+
+// eslint-disable-next-line no-redeclare
+namespace offsetPosition {
+    export const getTransformKey = () => transformKey;
+    export const usesTransform = () => useTransform;
+    export const forceTransform = () => {
+        useTransform = true;
+    };
+    export const forceTopLeft = () => {
+        useTransform = false;
+    };
+}
+
+export { offsetPosition };

package/packages/utils/src/removeClass.ts

@@ -0,0 +1,9 @@
+import { Reference } from '@24i/bigscreen-sdk/jsx';
+
+export const removeClass = (
+    reference: Reference,
+    className: string,
+): void => {
+    if (!reference.current) return;
+    reference.current.classList.remove(className);
+};

package/packages/utils/src/scaledImage.ts

@@ -0,0 +1,21 @@
+export const DEFAULT_SCALING_ENDPOINT = 'http://imageresize.24i.com';
+
+type Dimensions = {
+    height: number,
+    width: number,
+    fit?: 'cover' | 'contain' | 'inside',
+};
+
+const attention = (fit: Dimensions['fit']) => (
+    fit === 'cover' ? '&a=attention' : ''
+);
+
+const scaledImage = (
+    url: string,
+    { height, width, fit = 'cover' }: Dimensions,
+    scalingEndpoint: string = DEFAULT_SCALING_ENDPOINT,
+) => (
+    `${scalingEndpoint}?url=${url}&h=${height}&w=${width}&fit=${fit}${attention(fit)}`
+);
+
+export { scaledImage, Dimensions };

package/packages/utils/src/stopEvent.ts

@@ -0,0 +1,10 @@
+export const stopEvent = (event: Event) => {
+    event.preventDefault();
+    event.stopPropagation();
+};
+
+export const stopEventImmediately = (event: Event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation?.();
+};

package/packages/utils/src/timeConstants.ts

@@ -0,0 +1,11 @@
+export const SECONDS_PER_MINUTE = 60;
+export const MINUTES_PER_HALF_HOUR = 30;
+export const MINUTES_PER_HOUR = 60;
+export const HOURS_PER_DAY = 24;
+export const DAYS_PER_WEEK = 7;
+
+export const SECOND_IN_MS = 1000;
+export const MINUTE_IN_MS = SECOND_IN_MS * SECONDS_PER_MINUTE;
+export const HALF_HOUR_IN_MS = MINUTE_IN_MS * MINUTES_PER_HALF_HOUR;
+export const HOUR_IN_MS = MINUTE_IN_MS * MINUTES_PER_HOUR;
+export const DAY_IN_MS = HOUR_IN_MS * HOURS_PER_DAY;

package/packages/utils/src/timers/createInterval.ts

@@ -0,0 +1,19 @@
+import { TimedObject, TimedFunction } from './types';
+
+export const createInterval = () => {
+    const intervalObject: TimedObject = {
+        id: null,
+        set: (callbackFn: () => void, timeMs: number) => {
+            intervalObject.clear();
+            intervalObject.id = window.setInterval(callbackFn, timeMs);
+        },
+        clear: () => {
+            if (intervalObject.id !== null) {
+                window.clearInterval(intervalObject.id);
+                intervalObject.id = null;
+            }
+        },
+        isActive: () => intervalObject.id !== null,
+    };
+    return intervalObject as TimedFunction;
+};

package/packages/utils/src/timers/createTimeout.ts

@@ -0,0 +1,22 @@
+import { TimedObject, TimedFunction } from './types';
+
+export const createTimeout = () => {
+    const timeoutObject: TimedObject = {
+        id: null,
+        set: (callbackFn: () => void, timeMs: number) => {
+            timeoutObject.clear();
+            timeoutObject.id = window.setTimeout(() => {
+                timeoutObject.id = null;
+                callbackFn();
+            }, timeMs);
+        },
+        clear: () => {
+            if (timeoutObject.id !== null) {
+                window.clearTimeout(timeoutObject.id);
+                timeoutObject.id = null;
+            }
+        },
+        isActive: () => timeoutObject.id !== null,
+    };
+    return timeoutObject as TimedFunction;
+};

package/packages/utils/src/timers/index.ts

@@ -0,0 +1,4 @@
+export { createInterval } from './createInterval';
+export { createTimeout } from './createTimeout';
+export { runAsync } from './runAsync';
+export type { TimedFunction } from './types';

package/packages/utils/src/timers/runAsync.ts

@@ -0,0 +1,3 @@
+export const runAsync = (callbackFn: () => void) => {
+    window.setTimeout(callbackFn, 0);
+};

package/packages/utils/src/timers/types.ts

@@ -0,0 +1,9 @@
+export interface TimedFunction {
+    set: (callbackFn: () => void, timeMs: number) => void,
+    clear: () => void,
+    isActive: () => boolean,
+}
+
+export type TimedObject = {
+    id: number | null,
+} & TimedFunction;

package/packages/utils/src/wait.ts

@@ -0,0 +1 @@
+export const wait = (waitMs: number) => new Promise((r) => setTimeout(r, waitMs));

package/packages/utils/src/xhr/index.ts

@@ -0,0 +1,11 @@
+export {
+    xhrSend,
+    type XhrOptions, type XhrResponse,
+} from './xhrSend';
+
+export {
+    xhrSendRetry, defaultRetryConfig,
+    type RetryConfig, type RSOptions, type ShouldRetryParam,
+} from './xhrSendRetry';
+
+export { mockXhr } from './__mocks__/xhr';

package/packages/utils/src/xhr/xhrSend.ts

@@ -0,0 +1,139 @@
+/**
+ * Simple wrap "xhrSend" function over XMLHttpRequest.
+ */
+
+const HttpStatusCode = {
+    OK: 200,
+    MULTIPLE_CHOICES: 300,
+    UNAUTHORIZED: 401,
+    FORBIDDEN: 403,
+};
+
+type HttpMethods = 'GET' | 'POST' | 'PUT' | 'DELETE';
+
+export type XhrOptions = {
+    /**
+     * HTTP request method, e.g. POST.
+     */
+    method: HttpMethods,
+    /**
+     * The object with HTTP request headers.
+     */
+    headers: { [key: string]: string },
+    /**
+     * The number of milliseconds a request can take before automatically being terminated.
+     * Value 0 means there is no timeout.
+     */
+    timeoutInMs: number,
+    /**
+     * The body of data to be sent in the XHR request, a string (e.g. JSON-encoded).
+     */
+    body?: string,
+};
+
+export type XhrResponse = {
+    /**
+     * The body content of response.
+     */
+    dataText: string,
+    /**
+     * The object corresponding to the given JSON body text.
+     */
+    dataJson: Object | undefined,
+    /**
+     * The status code of the response (e.g., 200 for a success).
+     */
+    status: number,
+    /**
+     * The status message corresponding to the status code (e.g., "OK" for 200).
+     */
+    statusText: string
+    /**
+     * The state whether the response was successful (status in the range 200-299) or not.
+     */
+    ok: boolean,
+};
+
+const defaultOptions: XhrOptions = {
+    method: 'GET',
+    headers: {},
+    timeoutInMs: 0,
+};
+
+/**
+ * Sends HTTP request
+ *
+ * @param url The URL to access.
+ * @param options The optional options object.
+ * @param options.method [options.method='GET'] HTTP request method.
+ * @param options.timeoutInMs [options.timeoutInMs=0] The number of milliseconds
+ * a request can take before automatically being terminated.
+ * @param options.headers [options.headers={}] The object with HTTP request headers.
+ * @param options.body [options.body] The body of data to be sent in the XHR request,
+ * a string (e.g. JSON-encoded).
+ * @returns Promise rejects with TypeError. Resolves with XhrResponse object.
+ */
+function xhrSend(url: string, options: Partial<XhrOptions> = {}): Promise<XhrResponse | TypeError> {
+    return new Promise((resolve, reject) => {
+        const method = options.method || defaultOptions.method;
+        const headers = options.headers || defaultOptions.headers;
+        const timeoutInMs = options.timeoutInMs !== undefined
+            ? options.timeoutInMs : defaultOptions.timeoutInMs;
+        const { body } = options;
+
+        const xhr = new XMLHttpRequest();
+
+        function onLoad() {
+            const dataText = 'response' in xhr ? xhr.response : xhr.responseText;
+            const dataJson = parseJson(dataText);
+            const status = xhr.status === undefined ? HttpStatusCode.OK : xhr.status;
+            const statusText = xhr.statusText === undefined ? 'OK' : xhr.statusText;
+            const ok = status >= HttpStatusCode.OK && status < HttpStatusCode.MULTIPLE_CHOICES;
+            resolve({ dataText, dataJson, status, statusText, ok });
+        }
+
+        function onError() {
+            const error = new TypeError('Network request failed');
+            reject(error);
+        }
+
+        function onTimeout() {
+            const error = new TypeError('Network request failed - timeout');
+            error.name = 'TimeoutError';
+            reject(error);
+        }
+
+        function onAbort() {
+            const error = new TypeError('Aborted');
+            error.name = 'AbortedError';
+            reject(error);
+        }
+
+        xhr.onload = onLoad;
+        xhr.onerror = onError;
+        xhr.ontimeout = onTimeout;
+        xhr.onabort = onAbort;
+        xhr.open(method, url, true);
+
+        xhr.timeout = timeoutInMs;
+
+        const keys = Object.keys(headers);
+        for (let i = 0; i < keys.length; i++) {
+            const name = keys[i];
+            const value = headers[name];
+            xhr.setRequestHeader(name, value);
+        }
+
+        xhr.send(typeof body === 'undefined' ? null : body);
+    });
+}
+
+function parseJson(text: string): string | undefined {
+    try {
+        return JSON.parse(text);
+    } catch (e) {
+        return undefined;
+    }
+}
+
+export { xhrSend };

package/packages/utils/src/xhr/xhrSendRetry.ts

@@ -0,0 +1,77 @@
+import { xhrSend, XhrResponse, XhrOptions } from './xhrSend';
+
+export type RetryConfig = {
+    /**
+     * The number of times to retry the request. Defaults to 0.
+     */
+    retry?: number,
+    /**
+     * The amount of time in milliseconds to initially delay the retry. Defaults to 1000.
+     */
+    retryDelay?: number,
+    /**
+     * The number of retries already attempted.
+     */
+    currentRetryAttempt?: number,
+    /**
+     * Function to invoke which determines if you should retry
+     */
+    shouldRetry?: (data: ShouldRetryParam) => boolean,
+};
+
+export type RSOptions = {
+    retryConfig: RetryConfig;
+} & XhrOptions;
+
+export type ShouldRetryParam = {
+    options: Partial<RSOptions>,
+    response?: XhrResponse,
+    error?: any,
+};
+
+function shouldRetryRequest(data: ShouldRetryParam) {
+    const { error, response } = data;
+    if (error) return true;
+    if (!response || !response.ok) return true;
+    return false;
+}
+
+export const defaultRetryConfig = {
+    retry: 0,
+    retryDelay: 1000,
+    currentRetryAttempt: 0,
+    shouldRetry: shouldRetryRequest,
+} as const;
+
+export async function xhrSendRetry(url: string, options: Partial<RSOptions> = {}):
+Promise<XhrResponse | TypeError> {
+    const config = options.retryConfig || {} as RetryConfig;
+    config.retry = config.retry ?? defaultRetryConfig.retry;
+    config.retryDelay = config.retryDelay ?? defaultRetryConfig.retryDelay;
+    config.currentRetryAttempt = config.currentRetryAttempt
+        ?? defaultRetryConfig.currentRetryAttempt;
+
+    options.retryConfig = config;
+    let response;
+    let error;
+    try {
+        response = await xhrSend(url, options) as XhrResponse;
+    } catch (e) {
+        error = e;
+    }
+
+    if (config.currentRetryAttempt === config.retry) {
+        if (response) return response;
+        throw error;
+    }
+
+    const shouldRetryFn = config.shouldRetry || defaultRetryConfig.shouldRetry;
+    const shouldRetry = shouldRetryFn({ options, response, error });
+    if (shouldRetry) {
+        await new Promise((res) => window.setTimeout(res, config.retryDelay));
+        config.currentRetryAttempt += 1;
+        return xhrSendRetry(url, options);
+    }
+    if (response) return response;
+    throw error;
+}

package/utils/create-export-maps/index.ts

@@ -0,0 +1,3 @@
+import { createExportMaps } from './src/createExportMaps';
+
+createExportMaps();

package/utils/create-export-maps/src/__tests__/createExportMaps.spec.ts

@@ -0,0 +1,50 @@
+import { writeFileSync } from 'fs';
+import { createExportMaps } from '../createExportMaps';
+
+jest.mock('fs', () => ({
+    readdirSync: jest.fn(() => [
+        'adobe-heartbeat',
+        'animations',
+        '.DS-STORE',
+    ]),
+    lstatSync: jest.fn((name: string) => ({
+        isDirectory: () => name.indexOf('.DS-STORE') === -1
+    })),
+    existsSync: jest.fn(() => true),
+    writeFileSync: jest.fn(),
+}));
+
+jest.mock('../../../../packages/adobe-heartbeat/exports.json', () => ({
+    name: 'adobe-heartbeat',
+    entryPoints: {
+        '/': 'src/index.ts'
+    },
+}));
+jest.mock('../../../../packages/animations/exports.json', () => ({
+    name: 'animations',
+    entryPoints: {
+        '/': 'src/index.ts',
+        'mock': 'src/__mocks__/JSAnimations.ts'
+    },
+}));
+
+jest.mock('../../../../package.json', () => ({
+    name: 'mock-root-package',
+}));
+
+describe('createExportMaps', () => {
+    it('should add all exports to the package.json', () => {
+        createExportMaps();
+        expect(writeFileSync).toHaveBeenCalledWith(
+            expect.stringContaining('package.json'),
+            JSON.stringify({
+                name: 'mock-root-package',
+                exports: {
+                    './adobe-heartbeat': './packages/adobe-heartbeat/src/index.ts',
+                    './animations/mock': './packages/animations/src/__mocks__/JSAnimations.ts',
+                    './animations': './packages/animations/src/index.ts',
+                }
+            }, null, 4),
+        );
+    });
+});

package/utils/create-export-maps/src/createExportMaps.ts

@@ -0,0 +1,61 @@
+import { resolve } from 'path';
+import * as fs from 'fs';
+import packageJson from '../../../package.json';
+
+const packagesPath = resolve('./packages');
+
+const allExports: Record<string, string> = {};
+
+type ExportsDefinition = {
+    name: string,
+    entryPoints: Record<string, string>,
+};
+
+const handleExport = ({ name, entryPoints }: ExportsDefinition) => {
+    let hasRootExport = false;
+    Object.entries(entryPoints).forEach(([exportAlias, exportPath]) => {
+        if (exportAlias === '/') {
+            hasRootExport = true;
+            return;
+        }
+        const parsedAlias = `/${exportAlias}`;
+        allExports[`${name}${parsedAlias}`] = `${name}/${exportPath}`;
+    });
+    /**
+     * Typescript resolves aliases from top. Root export would overtake any other pathed export.
+     * Therefore root export has to be last in the generated list.
+     */
+    if (hasRootExport) {
+        allExports[name] = `${name}/${entryPoints['/']}`;
+    }
+};
+
+const loadAllExports = () => {
+    const fileNames = fs.readdirSync(packagesPath);
+    fileNames.forEach((fileName) => {
+        const packagePath = resolve(packagesPath, fileName);
+        const isDirectory = fs.lstatSync(packagePath).isDirectory();
+        if (isDirectory) {
+            const exportsPath = resolve(packagePath, 'exports.json');
+            if (fs.existsSync(exportsPath)) {
+                // eslint-disable-next-line import/no-dynamic-require, global-require
+                const exports = require(exportsPath);
+                handleExport(exports);
+            }
+        }
+    });
+};
+
+const createPackageJsonMapping = () => {
+    const exports: Record<string, string> = {};
+    Object.entries(allExports).forEach(([exportAlias, exportPath]) => {
+        exports[`./${exportAlias}`] = `./packages/${exportPath}`;
+    });
+    (packageJson.exports as Record<string, string>) = exports;
+    fs.writeFileSync(resolve('./package.json'), JSON.stringify(packageJson, null, 4));
+};
+
+export const createExportMaps = () => {
+    loadAllExports();
+    createPackageJsonMapping();
+};

package/utils/create-package/README.md

@@ -0,0 +1,40 @@
+---
+id: README
+title: Create Package
+hide_title: true
+sidebar_label: Create Package
+---
+
+# Package Initializer
+An initializer for packages in `SmartApps BIGscreen SDK` monorepo helps to set up 
+folder structure with basic config files like eslint, tsconfig etc.
+
+## Usage
+Originally designed as [npm initializer](https://docs.npmjs.com/cli/init#description),
+now degraded to the local script without any ambition to be published.
+
+Go to SmartApps BIGscreen SDK monorepo root folder and type:
+```
+$ npm run create-package -- <my-package-name>
+```
+You will be prompted for basic package information.
+
+## What it does
+1. Create folder `./packages/<my-package-name>`
+2. Guide you through a questionnaire to setup the project
+    * e.g. auto-suggested 24i package name in form: `@24i/smartapps-bigscreenen-<my-package-name>`
+3. Copy the template files (src, tsconfig, eslintrc, jest.config, readme, etc.)
+4. Generate package.json with all the project details
+5. Create symlink in docs `./docs/packages/<my-package-name>/README.md`
+
+## Motivation
+Every time that I start a new package inside SmartApps BIGscreen SDK monorepo, I hate 
+to go to other project folder, copy files like eslintrc, tsconfig, create folder
+structure, etc.
+
+With this in mind, the motivation to build this package started as a DRY (Do not
+repeat yourself) thing.
+
+This package is intended to automate the initialization of new packages and with 
+this have a new folder with everything ready to work. Behind this, also to ensure
+we are using the unified setup for each package inside SmartApps BIGscreen SDK monorepo.

package/utils/create-package/src/createPackage.ts

@@ -0,0 +1,72 @@
+#!/usr/bin/env node
+
+import * as path from 'path';
+import * as fs from 'fs';
+import * as fse from 'fs-extra';
+import chalk from 'chalk';
+import minimist from 'minimist';
+import { promptPackageDetails } from './questionnaire/questions';
+import { Settings } from './settings/Settings';
+import { IPackageOptions } from './types';
+
+async function isDirectoryEmpty(dirPath: string) {
+    const files = await fs.promises.readdir(dirPath);
+    return !files.length;
+}
+
+async function copyTemplateFiles(templateDir: string, targetDir: string) {
+    return fse.copy(templateDir, targetDir);
+}
+
+function updateExportsJsonFile(filePath: string, options: IPackageOptions) {
+    let data = fs.readFileSync(filePath, 'utf8');
+    data = data.replace(/("name": ")(.*)(")/, `$1${options.name}$3`);
+    fs.writeFileSync(filePath, data);
+}
+
+function parseArguments(rawArgv: Array<string>) {
+    const argv = minimist(rawArgv.slice(2));
+    const dirName = argv._[0];
+
+    if (!dirName) {
+        console.error('Error: Missing package name');
+        process.exit(1);
+    }
+
+    return {
+        dirName,
+    };
+}
+
+export async function main() {
+    const { dirName: destDirName } = parseArguments(process.argv);
+    const destDir = path.join(process.cwd(), 'packages/', destDirName);
+    if (fs.existsSync(destDir)) {
+        console.error(`Error: Target directory "${destDir}" already exists`);
+        process.exit(1);
+    }
+    fs.mkdirSync(destDir, { recursive: true });
+
+    const isDirEmpty = await isDirectoryEmpty(destDir);
+    if (!isDirEmpty) {
+        console.error(`Error: Target directory "${destDir}" is not empty.`);
+        process.exit(1);
+    }
+
+    const settings = { ...Settings };
+    settings.name = `${Settings.name}${destDirName}`.toLowerCase();
+
+    const details = await promptPackageDetails(settings);
+    const templateDir = path.join(__dirname, '..', 'templates/typescript');
+
+    await copyTemplateFiles(templateDir, destDir);
+    const exportsJsonFile = path.join(destDir, 'exports.json');
+    updateExportsJsonFile(exportsJsonFile, details);
+
+    // create symlink in docs to README.md
+    const docsSymlinkTarget = path.join('../../../packages/', destDirName, '/README.md');
+    const docsSymlinkPath = path.join(process.cwd(), 'docs/packages/', destDirName, '/README.md');
+    await fse.ensureSymlink(docsSymlinkTarget, docsSymlinkPath);
+
+    console.log(`${chalk.green('Success')}, package has been initialized!`);
+}

package/utils/create-package/src/index.ts

@@ -0,0 +1,3 @@
+import { main } from './createPackage';
+
+main();

package/utils/create-package/src/questionnaire/questions.ts

@@ -0,0 +1,19 @@
+import * as inquirer from 'inquirer';
+
+interface IPromptPackageDetailsDefaults {
+    /** Package name */
+    name: string;
+}
+
+async function promptPackageDetails(defaultValues: IPromptPackageDetailsDefaults) {
+    return inquirer.prompt([
+        {
+            type: 'input',
+            name: 'name',
+            message: 'Package name:',
+            default: defaultValues.name,
+        },
+    ]);
+}
+
+export { promptPackageDetails };

package/utils/create-package/src/settings/Settings.ts

@@ -0,0 +1,5 @@
+const Settings = {
+    name: '',
+};
+
+export { Settings };

package/utils/create-package/src/types.ts

@@ -0,0 +1,4 @@
+export interface IPackageOptions {
+    /** Package name */
+    name: string;
+}