noibu-react-native 0.2.12 → 0.2.13

package/dist/mobileTransformer/mobile-replay/transformer/colors.d.ts

@@ -0,0 +1 @@
+export declare const isLight: (hexColor: string) => boolean;

package/dist/mobileTransformer/mobile-replay/transformer/colors.js

@@ -0,0 +1,43 @@
+// from https://gist.github.com/t1grok/a0f6d04db569890bcb57
+function hexToRgb(hexColor) {
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hexColor = hexColor.replace(shorthandRegex, function (_, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+function rgbToYuv(rgbColor) {
+    let y, u, v;
+    y = rgbColor.r * 0.299 + rgbColor.g * 0.587 + rgbColor.b * 0.114;
+    u =
+        rgbColor.r * -0.168736 +
+            rgbColor.g * -0.331264 +
+            rgbColor.b * 0.5 +
+            128;
+    v =
+        rgbColor.r * 0.5 +
+            rgbColor.g * -0.418688 +
+            rgbColor.b * -0.081312 +
+            128;
+    y = Math.floor(y);
+    u = Math.floor(u);
+    v = Math.floor(v);
+    return { y: y, u: u, v: v };
+}
+const isLight = (hexColor) => {
+    const rgbColor = hexToRgb(hexColor);
+    if (!rgbColor) {
+        return false;
+    }
+    const yuvColor = rgbToYuv(rgbColor);
+    return yuvColor.y > 128;
+};
+
+export { isLight };

package/dist/mobileTransformer/mobile-replay/transformer/screen-chrome.d.ts

@@ -0,0 +1,13 @@
+import { keyboardEvent, serializedNodeWithId, wireframeNavigationBar, wireframeStatusBar } from '../mobile.types';
+import { ConversionContext, ConversionResult } from './types';
+export declare let navigationBackgroundColor: string | undefined;
+export declare let navigationColor: string | undefined;
+export declare function makeNavigationBar(wireframe: wireframeNavigationBar, _children: serializedNodeWithId[], context: ConversionContext): ConversionResult<serializedNodeWithId> | null;
+/**
+ * tricky: we need to accept children because that's the interface of converters, but we don't use them
+ */
+export declare function makeStatusBar(wireframe: wireframeStatusBar, _children: serializedNodeWithId[], context: ConversionContext): ConversionResult<serializedNodeWithId>;
+export declare function makeOpenKeyboardPlaceholder(mobileCustomEvent: keyboardEvent & {
+    timestamp: number;
+    delay?: number;
+}, context: ConversionContext): ConversionResult<serializedNodeWithId> | null;

package/dist/mobileTransformer/mobile-replay/transformer/screen-chrome.js

@@ -0,0 +1,142 @@
+import { NodeType } from '../mobile.types.js';
+import { isLight } from './colors.js';
+import { _isPositiveInteger, makePlaceholderElement, KEYBOARD_ID, NAVIGATION_BAR_ID, STATUS_BAR_ID, BACKGROUND } from './transformers.js';
+import { asStyleString, makeStylesString } from './wireframeStyle.js';
+
+let navigationBackgroundColor = undefined;
+let navigationColor = undefined;
+function spacerDiv(idSequence) {
+    const spacerId = idSequence.next().value;
+    return {
+        type: NodeType.Element,
+        tagName: 'div',
+        attributes: {
+            style: 'width: 5px;',
+            'data-rrweb-id': spacerId,
+        },
+        id: spacerId,
+        childNodes: [],
+    };
+}
+function makeFakeNavButton(icon, context) {
+    return {
+        type: NodeType.Element,
+        tagName: 'div',
+        attributes: {},
+        id: context.idSequence.next().value,
+        childNodes: [
+            {
+                type: NodeType.Text,
+                textContent: icon,
+                id: context.idSequence.next().value,
+            },
+        ],
+    };
+}
+function makeNavigationBar(wireframe, _children, context) {
+    var _a;
+    const _id = wireframe.id || NAVIGATION_BAR_ID;
+    const backArrowTriangle = makeFakeNavButton('◀', context);
+    const homeCircle = makeFakeNavButton('⚪', context);
+    const screenButton = makeFakeNavButton('⬜️', context);
+    navigationBackgroundColor = (_a = wireframe.style) === null || _a === void 0 ? void 0 : _a.backgroundColor;
+    navigationColor = isLight(navigationBackgroundColor || BACKGROUND)
+        ? 'black'
+        : 'white';
+    return {
+        result: {
+            type: NodeType.Element,
+            tagName: 'div',
+            attributes: {
+                style: asStyleString([
+                    makeStylesString(wireframe),
+                    'display:flex',
+                    'flex-direction:row',
+                    'align-items:center',
+                    'justify-content:space-around',
+                    'color:' + navigationColor,
+                ]),
+                'data-rrweb-id': _id,
+            },
+            id: _id,
+            childNodes: [backArrowTriangle, homeCircle, screenButton],
+        },
+        context,
+    };
+}
+/**
+ * tricky: we need to accept children because that's the interface of converters, but we don't use them
+ */
+function makeStatusBar(wireframe, _children, context) {
+    var _a;
+    const clockId = context.idSequence.next().value;
+    // convert the wireframe timestamp to a date time, then get just the hour and minute of the time from that
+    const clockTime = context.timestamp
+        ? new Date(context.timestamp).toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit',
+        })
+        : '';
+    const clockFontColor = isLight(((_a = wireframe.style) === null || _a === void 0 ? void 0 : _a.backgroundColor) || '#ffffff')
+        ? 'black'
+        : 'white';
+    const clock = {
+        type: NodeType.Element,
+        tagName: 'div',
+        attributes: {
+            'data-rrweb-id': clockId,
+        },
+        id: clockId,
+        childNodes: [
+            {
+                type: NodeType.Text,
+                textContent: clockTime,
+                id: context.idSequence.next().value,
+            },
+        ],
+    };
+    return {
+        result: {
+            type: NodeType.Element,
+            tagName: 'div',
+            attributes: {
+                style: asStyleString([
+                    makeStylesString(wireframe, { color: clockFontColor }),
+                    'display:flex',
+                    'flex-direction:row',
+                    'align-items:center',
+                ]),
+                'data-rrweb-id': STATUS_BAR_ID,
+            },
+            id: STATUS_BAR_ID,
+            childNodes: [spacerDiv(context.idSequence), clock],
+        },
+        context,
+    };
+}
+function makeOpenKeyboardPlaceholder(mobileCustomEvent, context) {
+    if (!mobileCustomEvent.data.payload.open) {
+        return null;
+    }
+    const shouldAbsolutelyPosition = _isPositiveInteger(mobileCustomEvent.data.payload.x) ||
+        _isPositiveInteger(mobileCustomEvent.data.payload.y);
+    return makePlaceholderElement({
+        id: KEYBOARD_ID,
+        type: 'placeholder',
+        label: 'keyboard',
+        height: mobileCustomEvent.data.payload.height,
+        width: _isPositiveInteger(mobileCustomEvent.data.payload.width)
+            ? mobileCustomEvent.data.payload.width
+            : '100vw',
+        style: {
+            backgroundColor: navigationBackgroundColor,
+            color: navigationBackgroundColor ? navigationColor : undefined,
+        },
+    }, [], {
+        timestamp: context.timestamp,
+        idSequence: context.idSequence,
+        styleOverride: Object.assign({}, (shouldAbsolutelyPosition ? {} : { bottom: true })),
+    });
+}
+
+export { makeNavigationBar, makeOpenKeyboardPlaceholder, makeStatusBar, navigationBackgroundColor, navigationColor };

package/dist/mobileTransformer/mobile-replay/transformer/transformers.d.ts

@@ -0,0 +1,59 @@
+import { customEvent, fullSnapshotEvent, incrementalSnapshotEvent, metaEvent } from '../rrweb';
+import { fullSnapshotEvent as MobileFullSnapshotEvent, keyboardEvent, metaEvent as MobileMetaEvent, MobileIncrementalSnapshotEvent, serializedNodeWithId, wireframe, wireframeDiv, wireframeNavigationBar, wireframeStatusBar } from '../mobile.types';
+import { ConversionContext, ConversionResult } from './types';
+export declare const BACKGROUND = "#f3f4ef";
+export declare const NAVIGATION_BAR_ID = 8;
+export declare const KEYBOARD_ID = 10;
+export declare const STATUS_BAR_PARENT_ID = 11;
+export declare const STATUS_BAR_ID = 12;
+export declare function _isPositiveInteger(id: unknown): id is number;
+export declare const makeCustomEvent: (mobileCustomEvent: (customEvent | keyboardEvent) & {
+    timestamp: number;
+    delay?: number;
+}) => (customEvent | incrementalSnapshotEvent) & {
+    timestamp: number;
+    delay?: number;
+};
+export declare const makeMetaEvent: (mobileMetaEvent: MobileMetaEvent & {
+    timestamp: number;
+}) => metaEvent & {
+    timestamp: number;
+    delay?: number;
+};
+export declare function makeDivElement(wireframe: wireframeDiv, children: serializedNodeWithId[], context: ConversionContext): ConversionResult<serializedNodeWithId> | null;
+export declare function makePlaceholderElement(wireframe: wireframe, children: serializedNodeWithId[], context: ConversionContext): ConversionResult<serializedNodeWithId> | null;
+export declare function dataURIOrPNG(src: string): string;
+/**
+ * We want to ensure that any events don't use id = 0.
+ * They must always represent a valid ID from the dom, so we swap in the body id when the id = 0.
+ *
+ * For "removes", we don't need to do anything, the id of the element to be removed remains valid. We won't try and remove other elements that we added during transformation in order to show that element.
+ *
+ * "adds" are converted from wireframes to nodes and converted to `incrementalSnapshotEvent.adds`
+ *
+ * "updates" are converted to a remove and an add.
+ *
+ */
+export declare const makeIncrementalEvent: (mobileEvent: (MobileIncrementalSnapshotEvent | incrementalSnapshotEvent) & {
+    timestamp: number;
+    delay?: number;
+}) => incrementalSnapshotEvent & {
+    timestamp: number;
+    delay?: number;
+};
+/**
+ * We want to be able to place the status bar and navigation bar in the correct stacking order.
+ * So, we lift them out of the tree, and return them separately.
+ */
+export declare function stripBarsFromWireframes(wireframes: wireframe[]): {
+    statusBar: wireframeStatusBar | undefined;
+    navigationBar: wireframeNavigationBar | undefined;
+    appNodes: wireframe[];
+};
+export declare const makeFullEvent: (mobileEvent: MobileFullSnapshotEvent & {
+    timestamp: number;
+    delay?: number;
+}) => fullSnapshotEvent & {
+    timestamp: number;
+    delay?: number;
+};