@developer_tribe/react-builder 1.0.7 → 1.0.9

package/src/migrations/migratePipe.ts

@@ -0,0 +1,59 @@
+import type { Project } from '../types/Project';
+import type { Migration } from './types';
+import { isSemverLess } from './semver';
+import { migration_1_1_0_normalize_style_attributes } from './migrations/1.1.0_normalize_style_attributes';
+
+export const CURRENT_PROJECT_VERSION = '1.1.0';
+
+const MIGRATIONS: Migration[] = [migration_1_1_0_normalize_style_attributes];
+
+export type MigrationPipe = {
+  projectVersion: string;
+  requiredVersion: string;
+  required: boolean;
+  pending: Migration[];
+};
+
+export function getMigrationPipe(
+  project: Pick<Project, 'version'>,
+): MigrationPipe {
+  const projectVersion =
+    typeof project?.version === 'string' && project.version.trim()
+      ? project.version
+      : '0.0.0';
+
+  const required = isSemverLess(projectVersion, CURRENT_PROJECT_VERSION);
+
+  const pending = required
+    ? MIGRATIONS.filter((m) => isSemverLess(projectVersion, m.toVersion))
+    : [];
+
+  return {
+    projectVersion,
+    requiredVersion: CURRENT_PROJECT_VERSION,
+    required,
+    pending,
+  };
+}
+
+export function runProjectMigrations(project: Project): {
+  project: Project;
+  applied: Migration[];
+} {
+  const pipe = getMigrationPipe(project);
+  let next = project;
+  const applied: Migration[] = [];
+
+  for (const m of pipe.pending) {
+    if (isSemverLess(next.version, m.toVersion)) {
+      next = m.run(next);
+      applied.push(m);
+    }
+  }
+
+  if (isSemverLess(next.version, CURRENT_PROJECT_VERSION)) {
+    next = { ...next, version: CURRENT_PROJECT_VERSION };
+  }
+
+  return { project: next, applied };
+}

package/src/migrations/migrations/1.1.0_normalize_style_attributes.ts

@@ -0,0 +1,80 @@
+import type { Project } from '../../types/Project';
+import type { Node, NodeData, NodeDefaultAttribute } from '../../types/Node';
+import {
+  isEmptyObject,
+  isNodeArray,
+  isNodeNullOrUndefined,
+  isNodeString,
+} from '../../utils/nodeGuards';
+import { getAttributeSchema } from '../../utils/patterns';
+import type { Migration } from '../types';
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function buildStyleKeySet(): Set<string> {
+  const viewSchema = getAttributeSchema('View') ?? {};
+  const textSchema = getAttributeSchema('Text') ?? {};
+  return new Set([...Object.keys(viewSchema), ...Object.keys(textSchema)]);
+}
+
+function migrateNode(node: Node, styleKeys: Set<string>): Node {
+  if (
+    isNodeNullOrUndefined(node) ||
+    isNodeString(node) ||
+    isEmptyObject(node)
+  ) {
+    return node;
+  }
+  if (isNodeArray(node)) {
+    return (node as Node[]).map((n) => migrateNode(n, styleKeys));
+  }
+
+  const record = node as NodeData<NodeDefaultAttribute>;
+  const nextChildren = migrateNode(record.children as Node, styleKeys);
+
+  if (!isPlainObject(record.attributes)) {
+    return { ...record, children: nextChildren };
+  }
+
+  const nextAttrs: Record<string, unknown> = { ...(record.attributes ?? {}) };
+
+  const prevStyle = isPlainObject(nextAttrs.style) ? nextAttrs.style : {};
+  const nextStyle: Record<string, unknown> = { ...prevStyle };
+
+  for (const [k, v] of Object.entries(nextAttrs)) {
+    if (k === 'style') continue;
+    if (!styleKeys.has(k)) continue;
+
+    // If already set in style, prefer style (drop legacy flat key).
+    if (!(k in nextStyle)) nextStyle[k] = v;
+    delete nextAttrs[k];
+  }
+
+  if (Object.keys(nextStyle).length > 0) {
+    nextAttrs.style = nextStyle;
+  }
+
+  return {
+    ...record,
+    children: nextChildren,
+    attributes: nextAttrs as NodeDefaultAttribute,
+  };
+}
+
+export const migration_1_1_0_normalize_style_attributes: Migration = {
+  id: '1.1.0-normalize-style-attributes',
+  title: 'Normalize legacy style attributes into attributes.style',
+  fromVersion: '0.0.0',
+  toVersion: '1.1.0',
+  run: (project: Project): Project => {
+    const styleKeys = buildStyleKeySet();
+    const nextData = migrateNode(project.data as unknown as Node, styleKeys);
+    return {
+      ...project,
+      version: '1.1.0',
+      data: nextData as any,
+    };
+  },
+};

package/src/migrations/semver.ts

@@ -0,0 +1,24 @@
+export type Semver = { major: number; minor: number; patch: number };
+
+export function parseSemver(input?: string | null): Semver {
+  const raw = typeof input === 'string' ? input.trim() : '';
+  const [maj, min, pat] = raw.split('.').slice(0, 3);
+  const toNum = (v?: string) => {
+    const n = Number(String(v ?? '').replace(/[^\d].*$/, ''));
+    return Number.isFinite(n) ? n : 0;
+  };
+  return { major: toNum(maj), minor: toNum(min), patch: toNum(pat) };
+}
+
+export function compareSemver(a: string, b: string): number {
+  const A = parseSemver(a);
+  const B = parseSemver(b);
+  if (A.major !== B.major) return A.major < B.major ? -1 : 1;
+  if (A.minor !== B.minor) return A.minor < B.minor ? -1 : 1;
+  if (A.patch !== B.patch) return A.patch < B.patch ? -1 : 1;
+  return 0;
+}
+
+export function isSemverLess(a: string, b: string): boolean {
+  return compareSemver(a, b) < 0;
+}

package/src/migrations/types.ts

@@ -0,0 +1,9 @@
+import type { Project } from '../types/Project';
+
+export type Migration = {
+  id: string;
+  title: string;
+  fromVersion: string;
+  toVersion: string;
+  run: (project: Project) => Project;
+};

package/src/mockOS/components/PermissionModal.tsx

@@ -84,7 +84,8 @@ export const PermissionModal: React.FC<PermissionModalProps> = ({
       >
         <div
           style={{
-            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            backgroundColor:
+              'hsl(var(--card, var(--rb-card, 0 0% 100%)) / 0.95)',
             borderRadius: 14,
             width: '100%',
             maxWidth: 270,
@@ -187,7 +188,7 @@ export const PermissionModal: React.FC<PermissionModalProps> = ({
     >
       <div
         style={{
-          backgroundColor: '#FFFFFF',
+          backgroundColor: 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
           borderRadius: 4,
           width: '100%',
           maxWidth: 280,

package/src/mockOS/components/SubscriptionModal.tsx

@@ -0,0 +1,400 @@
+import React, { useCallback, useEffect } from 'react';
+import { useRenderStore } from '../../store';
+
+type SubscriptionModalProps = {
+  productId: string;
+  onBuy: () => void;
+  onCancel: () => void;
+};
+
+export function SubscriptionModal({
+  productId,
+  onBuy,
+  onCancel,
+}: SubscriptionModalProps) {
+  const device = useRenderStore((s) => s.device);
+  const isIOS = device.platform === 'ios';
+
+  const onOverlayClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (e.target === e.currentTarget) onCancel();
+    },
+    [onCancel],
+  );
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onCancel();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onCancel]);
+
+  const titleFromProductId = productId
+    .split('.')
+    .slice(-2)
+    .join(' ')
+    .replace(/[-_]/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+
+  // Bottom sheet (both iOS + Android)
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: isIOS ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.5)',
+        display: 'flex',
+        alignItems: 'flex-end',
+        justifyContent: 'stretch',
+        zIndex: 9999,
+        padding: 0,
+      }}
+      onClick={onOverlayClick}
+    >
+      <div
+        style={{
+          width: '100%',
+          backgroundColor: isIOS
+            ? 'hsl(var(--card, var(--rb-card, 0 0% 100%)) / 0.96)'
+            : 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
+          borderTopLeftRadius: 16,
+          borderTopRightRadius: 16,
+          overflow: 'hidden',
+          backdropFilter: isIOS ? 'blur(20px)' : undefined,
+          boxShadow: isIOS
+            ? '0 -12px 30px rgba(0,0,0,0.18), 0 -2px 6px rgba(0,0,0,0.08)'
+            : '0 -10px 20px rgba(0,0,0,0.22), 0 -2px 6px rgba(0,0,0,0.14)',
+          paddingBottom: 'max(12px, env(safe-area-inset-bottom))',
+          transform: 'translateY(0px)',
+        }}
+      >
+        <div
+          aria-hidden
+          style={{
+            width: 44,
+            height: 5,
+            borderRadius: 999,
+            background:
+              'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.18)',
+            margin: '10px auto 0',
+          }}
+        />
+
+        {isIOS ? (
+          <div
+            style={{
+              padding: '10px 16px 10px',
+              textAlign: 'center',
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+                marginBottom: 6,
+              }}
+            >
+              <button
+                onClick={onCancel}
+                aria-label="Close"
+                style={{
+                  width: 28,
+                  height: 28,
+                  borderRadius: 999,
+                  border: 'none',
+                  background:
+                    'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.06)',
+                  color:
+                    'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.55)',
+                  fontSize: 18,
+                  lineHeight: '28px',
+                  cursor: 'pointer',
+                }}
+              >
+                ×
+              </button>
+            </div>
+            <div
+              style={{
+                fontSize: 15,
+                fontWeight: 600,
+                color: '#000',
+                marginBottom: 8,
+                lineHeight: 1.3,
+                letterSpacing: 0.2,
+              }}
+            >
+              Confirm with Apple ID
+            </div>
+            <div
+              style={{
+                fontSize: 13,
+                color: '#000',
+                lineHeight: 1.4,
+                opacity: 0.6,
+              }}
+            >
+              Subscribe to <b>{titleFromProductId}</b>
+            </div>
+            <div
+              style={{
+                marginTop: 12,
+                padding: '10px 12px',
+                borderRadius: 12,
+                background:
+                  'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.04)',
+                textAlign: 'left',
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 10,
+                }}
+              >
+                <div
+                  aria-hidden
+                  style={{
+                    width: 38,
+                    height: 38,
+                    borderRadius: 10,
+                    background:
+                      'linear-gradient(135deg, rgba(0,122,255,0.25), rgba(88,86,214,0.22))',
+                    border: '1px solid rgba(0,0,0,0.06)',
+                  }}
+                />
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div
+                    style={{
+                      fontSize: 14,
+                      fontWeight: 600,
+                      color: 'rgba(0,0,0,0.88)',
+                      lineHeight: 1.2,
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                    title={productId}
+                  >
+                    {productId}
+                  </div>
+                  <div
+                    style={{
+                      marginTop: 2,
+                      fontSize: 12,
+                      color: 'rgba(0,0,0,0.55)',
+                    }}
+                  >
+                    Renews automatically until cancelled.
+                  </div>
+                </div>
+                <div
+                  style={{
+                    fontSize: 13,
+                    fontWeight: 700,
+                    color: 'rgba(0,0,0,0.8)',
+                  }}
+                >
+                  $4.99
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div style={{ padding: '14px 16px 10px' }}>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                gap: 12,
+              }}
+            >
+              <div
+                style={{
+                  fontSize: 16,
+                  fontWeight: 600,
+                  color: 'rgba(0,0,0,0.87)',
+                }}
+              >
+                Subscribe with Google Play
+              </div>
+              <button
+                onClick={onCancel}
+                aria-label="Close"
+                style={{
+                  width: 28,
+                  height: 28,
+                  borderRadius: 999,
+                  border: 'none',
+                  background:
+                    'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.06)',
+                  color:
+                    'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.55)',
+                  fontSize: 18,
+                  lineHeight: '28px',
+                  cursor: 'pointer',
+                }}
+              >
+                ×
+              </button>
+            </div>
+            <div
+              style={{
+                marginTop: 8,
+                fontSize: 14,
+                color: 'rgba(0, 0, 0, 0.6)',
+                lineHeight: 1.5,
+              }}
+            >
+              You’re about to subscribe to <b>{titleFromProductId}</b>.
+            </div>
+
+            <div
+              style={{
+                marginTop: 14,
+                padding: '10px 12px',
+                borderRadius: 10,
+                background:
+                  'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.04)',
+                border: '1px solid rgba(0,0,0,0.06)',
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  gap: 10,
+                }}
+              >
+                <div style={{ minWidth: 0 }}>
+                  <div
+                    style={{
+                      fontSize: 13,
+                      fontWeight: 600,
+                      color: 'rgba(0,0,0,0.78)',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                  >
+                    {productId}
+                  </div>
+                  <div
+                    style={{
+                      marginTop: 2,
+                      fontSize: 12,
+                      color: 'rgba(0,0,0,0.55)',
+                    }}
+                  >
+                    Auto-renews • Cancel anytime in Play Store
+                  </div>
+                </div>
+                <div
+                  style={{
+                    fontSize: 13,
+                    fontWeight: 700,
+                    color: 'rgba(0,0,0,0.8)',
+                  }}
+                >
+                  $4.99
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {isIOS ? (
+          <div
+            style={{
+              borderTop: '0.5px solid rgba(0, 0, 0, 0.16)',
+              display: 'flex',
+            }}
+          >
+            <button
+              onClick={onCancel}
+              style={{
+                flex: 1,
+                padding: '13px 0',
+                fontSize: 17,
+                fontWeight: 400,
+                color: '#007AFF',
+                background: 'transparent',
+                border: 'none',
+                borderRight: '0.5px solid rgba(0, 0, 0, 0.16)',
+                cursor: 'pointer',
+              }}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={onBuy}
+              style={{
+                flex: 1,
+                padding: '13px 0',
+                fontSize: 17,
+                fontWeight: 600,
+                color: '#007AFF',
+                background: 'transparent',
+                border: 'none',
+                cursor: 'pointer',
+              }}
+            >
+              Subscribe
+            </button>
+          </div>
+        ) : (
+          <div
+            style={{
+              padding: '10px 12px 12px',
+              display: 'flex',
+              justifyContent: 'flex-end',
+              gap: 8,
+            }}
+          >
+            <button
+              onClick={onCancel}
+              style={{
+                padding: '10px 16px',
+                fontSize: 14,
+                fontWeight: 500,
+                color: '#5F6368',
+                background: 'transparent',
+                border: 'none',
+                borderRadius: 4,
+                cursor: 'pointer',
+                textTransform: 'uppercase',
+                letterSpacing: 0.5,
+              }}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={onBuy}
+              style={{
+                padding: '10px 16px',
+                fontSize: 14,
+                fontWeight: 700,
+                color: '#1A73E8',
+                background: 'rgba(26,115,232,0.12)',
+                border: 'none',
+                borderRadius: 999,
+                cursor: 'pointer',
+                textTransform: 'uppercase',
+                letterSpacing: 0.5,
+              }}
+            >
+              Subscribe
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/mockOS/context/MockOSContext.tsx

@@ -1,6 +1,13 @@
-import React, { ReactNode, useState, useCallback } from 'react';
+import React, {
+  ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import type { PermissionType } from '../managers/mockPermissionManager';
 import { PermissionModal } from '../components/PermissionModal';
+import { SubscriptionModal } from '../components/SubscriptionModal';
 import { MockOSRouter } from '../components/MockOSRouter';
 import { DeviceStatusBar } from '../../components/DeviceStatusBar';
 import { DeviceNavigationBar } from '../../components/DeviceNavigationBar';
@@ -53,6 +60,12 @@ export function MockOSProvider({
   const [permission, setPermission] = useState<PermissionType | string | null>(
     null,
   );
+  const [subscriptionProductId, setSubscriptionProductId] = useState<
+    string | null
+  >(null);
+  const subscriptionResolverRef = useRef<((result: boolean) => void) | null>(
+    null,
+  );
   const [currentRoute, setCurrentRoute] = useState<RouteType>(defaultRoute);
   const [navigationStack, setNavigationStack] = useState<RouteStackItem[]>([
     { route: defaultRoute, timestamp: Date.now() },
@@ -93,15 +106,46 @@ export function MockOSProvider({
     return false;
   }, [navigationStack]);
 
-  const value: MockOSContextValue = {
-    isEnabled: true,
-    permission,
-    setPermission,
-    currentRoute,
-    navigation,
-    goBack,
-    navigationStack,
-  };
+  const requestSubscriptionPurchase = useCallback((productId: string) => {
+    // Cancel any existing pending request (resolve false)
+    if (subscriptionResolverRef.current) {
+      subscriptionResolverRef.current(false);
+      subscriptionResolverRef.current = null;
+    }
+    setSubscriptionProductId(productId);
+
+    return new Promise<boolean>((resolve) => {
+      subscriptionResolverRef.current = resolve;
+    });
+  }, []);
+
+  const resolveSubscriptionPurchase = useCallback((result: boolean) => {
+    const resolver = subscriptionResolverRef.current;
+    subscriptionResolverRef.current = null;
+    setSubscriptionProductId(null);
+    resolver?.(result);
+  }, []);
+
+  const value: MockOSContextValue = useMemo(
+    () => ({
+      isEnabled: true,
+      permission,
+      setPermission,
+      requestSubscriptionPurchase,
+      currentRoute,
+      navigation,
+      goBack,
+      navigationStack,
+    }),
+    [
+      permission,
+      requestSubscriptionPurchase,
+      currentRoute,
+      navigation,
+      goBack,
+      navigationStack,
+    ],
+  );
 
   const handleAllow = () => {
     setPermission(null);
@@ -120,6 +164,13 @@ export function MockOSProvider({
           onDeny={handleDeny}
         />
       )}
+      {subscriptionProductId !== null && (
+        <SubscriptionModal
+          productId={subscriptionProductId}
+          onBuy={() => resolveSubscriptionPurchase(true)}
+          onCancel={() => resolveSubscriptionPurchase(false)}
+        />
+      )}
       <DeviceStatusBar
         height={statusBarHeight}
         backgroundColor={statusBarBackgroundColor}

package/src/mockOS/context/MockOSContextBase.ts

@@ -17,6 +17,7 @@ export interface MockOSContextValue {
   isEnabled: boolean;
   permission: PermissionType | string | null;
   setPermission: (permission: PermissionType | string | null) => void;
+  requestSubscriptionPurchase: (productId: string) => Promise<boolean>;
   // Router
   currentRoute: RouteType;
   navigation: (route: RouteType) => void;