@developer_tribe/react-builder 1.1.0 → 1.2.0

package/src/hooks/useSyncHtmlThemeClass.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { useRenderStore } from '../store';
+
+/**
+ * Syncs the builder's `appConfig.theme` to the DOM so CSS can react to `.dark`.
+ *
+ * - Uses `html.dark` as the toggle (shadcn/tailwind convention).
+ * - Also toggles `html.light` so system dark can be overridden back to light.
+ */
+export function useSyncHtmlThemeClass() {
+  const theme = useRenderStore((s) => s.appConfig.theme);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const root = document.documentElement;
+    root.classList.toggle('dark', theme === 'dark');
+    root.classList.toggle('light', theme === 'light');
+  }, [theme]);
+}

package/src/index.native.ts

@@ -0,0 +1,82 @@
+/**
+ * React Native-safe entrypoint.
+ *
+ * IMPORTANT:
+ * - No SCSS imports
+ * - No `react-dom` imports
+ * - No web-only modules that touch `window`/`document`/`localStorage`
+ *
+ * This file is meant to be used via the package `react-native` entry (Metro)
+ * or explicit `@developer_tribe/react-builder/native` style imports.
+ */
+
+// Types
+export type { TargetedScreenSize } from './types/TargetedScreenSize';
+export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
+export type { Project, ProjectColors } from './types/Project';
+export type { Device } from './types/Device';
+export type { AppConfig, Localication } from './types/PreviewConfig';
+export { defaultAppConfig } from './types/PreviewConfig';
+export type {
+  PaywallBenefitValue,
+  PaywallBenefits,
+  Product as PaywallProduct,
+  PaywallModel,
+} from './paywall/types/paywall-types';
+
+// Paywall hooks (RN-safe placeholders)
+export {
+  usePaywallCounter,
+  useCloseStatusPaywall,
+  useCarouselOptionsSeperator,
+  useCalculateLocalizedPrice,
+  useDiscountRate,
+} from './paywall/hooks';
+
+// Context (RN-safe). In React Native, `products` should come from an IAP wrapper
+// (e.g. `react-native-iap`) and be passed into `BuilderProvider` by the host app.
+export {
+  BuilderProvider,
+  useBuilderParams,
+} from './components/BuilderProvider';
+export { ParamsProvider } from './components/ParamsProvider';
+export { LocalizationParamsProvider } from './components/LocalizationParamsProvider';
+export { useParams } from './hooks/useParams';
+export { useLocalizationParams } from './hooks/useLocalizationParams';
+export { useLocalize } from './hooks/useLocalize';
+
+// Pure utilities (RN-safe)
+export {
+  isNodeNullOrUndefined,
+  isNodeString,
+  isNodeArray,
+  isEmptyObject,
+  analyseNode,
+  analyseAndProccess,
+} from './utils/analyseNode';
+export { novaToJson } from './utils/novaToJson';
+export { getDevices, getDefaultDevice } from './utils/getDevices';
+export { querySelector } from './utils/querySelector';
+export {
+  getImage,
+  TRIBE_ASSETS_BASE_URL,
+  TribeAssetName,
+  parseTribeAssetName,
+  resolveImageSrc,
+} from './utils/getImage';
+export {
+  getPatternByType,
+  getAttributeSchema,
+  getAttributeMeta,
+  getDefaultsForType,
+  getTypeSchema,
+  isPrimitiveType,
+  getArrayItemType,
+} from './utils/patterns';
+
+// Static sample data helpers (RN-safe)
+export {
+  getSamples,
+  getBasicSamples,
+  getOnboardSamples,
+} from './assets/samples/getSamples';

package/src/index.ts

@@ -1,9 +1,22 @@
 import './styles/index.scss';
 import AttributesEditor from './AttributesEditor';
+// NOTE: In React Native, `products` should be sourced from an IAP wrapper (e.g. `react-native-iap`)
+// and passed into `BuilderProvider` from the host app.
+export {
+  BuilderProvider,
+  useBuilderParams,
+} from './components/BuilderProvider';
+export { ParamsProvider } from './components/ParamsProvider';
+export { LocalizationParamsProvider } from './components/LocalizationParamsProvider';
+export { RenderErrorBoundary } from './components/RenderErrorBoundary';
+export { useParams } from './hooks/useParams';
+export { useLocalizationParams } from './hooks/useLocalizationParams';
+export { useLocalize } from './hooks/useLocalize';
 
 export type { TargetedScreenSize } from './types/TargetedScreenSize';
 export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
-export type { Project } from './types/Project';
+export type { Project, ProjectColors } from './types/Project';
+export type { Fonts, FontDefinition } from './types/Fonts';
 export {
   isNodeNullOrUndefined,
   isNodeString,
@@ -17,7 +30,8 @@ export { getOnboardSamples } from './assets/samples/getSamples';
 export { RenderPage } from './RenderPage';
 export { DeviceMockFrame } from './DeviceMockFrame';
 export { novaToJson } from './utils/novaToJson';
-export type { Localication } from './types/PreviewConfig';
+export type { AppConfig, Localication } from './types/PreviewConfig';
+export { defaultAppConfig } from './types/PreviewConfig';
 export { getDevices, getDefaultDevice } from './utils/getDevices';
 export type { Device } from './types/Device';
 export { AttributesEditor };
@@ -27,5 +41,30 @@ export { querySelector } from './utils/querySelector';
 export { extractViewStyle } from './utils/extractViewStyle';
 export { extractImageStyle } from './utils/extractImageStyle';
 export { extractTextStyle } from './utils/extractTextStyle';
+export {
+  getImage,
+  TRIBE_ASSETS_BASE_URL,
+  TribeAssetName,
+  parseTribeAssetName,
+  resolveImageSrc,
+} from './utils/getImage';
 export { ProjectPage } from './pages/ProjectPage';
+export type { ProjectPageProps } from './pages/ProjectPage';
 export { copyNode } from './utils/copyNode';
+export { logger } from './utils/logger';
+export type { LogLevel } from './types/Project';
+export type {
+  PaywallBenefitValue,
+  PaywallBenefits,
+  Product as PaywallProduct,
+  PaywallModel,
+} from './paywall/types/paywall-types';
+
+// Paywall hooks
+export {
+  usePaywallCounter,
+  useCloseStatusPaywall,
+  useCarouselOptionsSeperator,
+  useCalculateLocalizedPrice,
+  useDiscountRate,
+} from './paywall/hooks';

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/MockLaunchScreenComponent.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface MockLaunchScreenComponentProps {
+  appName: string;
+  onAppClick: () => void;
+}
+
+export function MockLaunchScreenComponent({
+  appName,
+  onAppClick,
+}: MockLaunchScreenComponentProps) {
+  return (
+    <div className="mockos-screen mockos-screen--launchscreen">
+      <div className="mockos-launcher">
+        <div className="mockos-launcher__grid">
+          <button
+            className="mockos-launcher__app"
+            onClick={onAppClick}
+            type="button"
+          >
+            <div className="mockos-launcher__app-icon">
+              <svg
+                viewBox="0 0 60 60"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect width="60" height="60" rx="13" fill="#007AFF" />
+                <path
+                  d="M30 15C21.716 15 15 21.716 15 30s6.716 15 15 15 15-6.716 15-15-6.716-15-15-15zm0 27c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12z"
+                  fill="white"
+                />
+                <circle cx="30" cy="30" r="5" fill="white" />
+              </svg>
+            </div>
+            <div className="mockos-launcher__app-name">{appName}</div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MockLaunchScreenComponent;

package/src/mockOS/components/MockOSRouter.tsx

@@ -0,0 +1,124 @@
+import React, { ReactNode, useCallback, useEffect } from 'react';
+import { useMockOSContext } from '../context/MockOSContextBase';
+import { MockLaunchScreenComponent } from './MockLaunchScreenComponent';
+import { useRenderStore } from '../../store';
+// Note: We might use react-router or similar library in the future for more complex routing
+
+interface MockOSRouterProps {
+  children?: ReactNode;
+  childrenBelongTo?:
+    | 'launchscreen'
+    | 'app'
+    | 'home'
+    | 'onboard'
+    | 'subscription';
+  appName?: string;
+}
+
+function HomeComponent() {
+  return (
+    <div className="mockos-screen mockos-screen--home">
+      <div className="mockos-screen__heading">Home</div>
+      <div className="mockos-screen__text">Welcome to the home screen</div>
+    </div>
+  );
+}
+
+function OnboardComponent() {
+  return (
+    <div className="mockos-screen mockos-screen--onboard">
+      <div className="mockos-screen__heading">Onboarding</div>
+      <div className="mockos-screen__text">Welcome! Let's get you started.</div>
+    </div>
+  );
+}
+
+function SubscriptionComponent() {
+  return (
+    <div className="mockos-screen mockos-screen--subscription">
+      <div className="mockos-screen__heading">Subscription</div>
+      <div className="mockos-screen__text">Choose your plan</div>
+      <div className="mockos-screen__plan mockos-screen__plan--premium">
+        Premium - $9.99/month
+      </div>
+      <div className="mockos-screen__plan mockos-screen__plan--basic">
+        Basic - Free
+      </div>
+    </div>
+  );
+}
+
+function ScreenRenderer({
+  currentRoute,
+  children,
+  childrenBelongTo,
+  appName,
+  onLaunchApp,
+}: {
+  currentRoute: string;
+  children?: ReactNode;
+  childrenBelongTo?: string;
+  appName: string;
+  onLaunchApp: () => void;
+}) {
+  // If children provided and current route matches childrenBelongTo, render children
+  if (children && childrenBelongTo && currentRoute === childrenBelongTo) {
+    return <>{children}</>;
+  }
+
+  // Otherwise render default screens based on route
+  switch (currentRoute) {
+    case 'launchscreen':
+      return (
+        <MockLaunchScreenComponent appName={appName} onAppClick={onLaunchApp} />
+      );
+    case 'home':
+      return <HomeComponent />;
+    case 'onboard':
+      return <OnboardComponent />;
+    case 'subscription':
+      return <SubscriptionComponent />;
+    default:
+      return (
+        <MockLaunchScreenComponent appName={appName} onAppClick={onLaunchApp} />
+      );
+  }
+}
+
+export function MockOSRouter({
+  children,
+  childrenBelongTo,
+  appName = 'My App',
+}: MockOSRouterProps) {
+  const context = useMockOSContext();
+  if (!context) {
+    throw new Error('MockOSRouter must be used within MockOSProvider');
+  }
+  const incForceRender = useRenderStore((s) => s.incForceRender);
+  const { currentRoute, navigation } = context;
+
+  const handleLaunchApp = useCallback(() => {
+    // Navigate to the route specified in childrenBelongTo or default to 'onboard'
+    const targetRoute = childrenBelongTo || 'app';
+    navigation(targetRoute);
+  }, [childrenBelongTo, navigation]);
+
+  useEffect(() => {
+    incForceRender();
+  }, [currentRoute, incForceRender]);
+
+  return (
+    <div className="mockos-router">
+      <ScreenRenderer
+        currentRoute={currentRoute}
+        childrenBelongTo={childrenBelongTo}
+        appName={appName}
+        onLaunchApp={handleLaunchApp}
+      >
+        {children}
+      </ScreenRenderer>
+    </div>
+  );
+}
+
+export default MockOSRouter;