@developer_tribe/react-builder 1.2.1 → 1.2.3

package/src/build-components/RadioButton/RadioButton.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, useId, useMemo } from 'react';
 import type { RadioButtonComponentProps } from './RadioButtonProps.generated';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -82,32 +82,23 @@ function RadioButton({ node }: RadioButtonComponentProps) {
   const attributeName = node.type ?? 'RadioButton';
   const attributeKey = node.key ?? generatedId;
 
-  const { previewMode, current, appConfig, projectColors } = useRenderStore(
-    (s) => ({
-      previewMode: s.previewMode,
-      current: s.current,
-      appConfig: s.appConfig,
-      projectColors: s.projectColors,
-    }),
-  );
+  const { previewMode, selectedKey } = useBuilderParams();
 
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
+  const baseStyle = useExtractViewStyle(node);
 
-  const isSelected = isNodeSelected({ previewMode, current, node });
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
   const style = useMergedStyle(
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
 
-  const selected = Boolean((node.attributes as any)?.selected);
-  const color =
-    typeof (node.attributes as any)?.color === 'string'
-      ? ((node.attributes as any)?.color as string)
-      : undefined;
-  const size = parseNumberLike((node.attributes as any)?.size);
+  const selected = Boolean(node.attributes?.selected);
+  const color = node.attributes?.color;
+  const size = parseNumberLike(node.attributes?.size);
 
   return (
     <div

package/src/build-components/Text/Text.tsx

@@ -7,8 +7,8 @@ import React, {
 } from 'react';
 import type { TextComponentProps } from './TextProps.generated';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
-import { extractTextStyle } from '../../utils/extractTextStyle';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -18,41 +18,30 @@ function Text({ node }: TextComponentProps) {
   useLogRender('Text');
   node = useNode(node);
   const generatedId = useId();
-  const attributeName = (node as any)?.sourceType ?? node.type ?? 'text';
+  const attributeName = node.sourceType ?? node.type ?? 'text';
   const attributeKey = node.key ?? generatedId;
   const textRef = useRef<HTMLParagraphElement | null>(null);
   const [autoFontSizePx, setAutoFontSizePx] = useState<number | null>(null);
-  const { appConfig, projectColors, previewMode, current } = useRenderStore(
-    (s) => ({
-      appConfig: s.appConfig,
-      projectColors: s.projectColors,
-      previewMode: s.previewMode,
-      current: s.current,
-    }),
-  );
+  const { appConfig, previewMode, selectedKey } = useBuilderParams();
   const keyOrText: string = node.children as string;
-  const textStyle = useMemo(
-    () => extractTextStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
-  const isSelected = isNodeSelected({ previewMode, current, node });
-  const localize = useLocalize();
+  const textStyle = useExtractTextStyle(node);
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
+  const localize = useLocalize({ appConfig });
 
   const localizedText = useMemo(
     () => localize(keyOrText),
     [localize, keyOrText],
   );
 
-  const attrs = (node as any)?.attributes as
-    | (Record<string, unknown> & { style?: Record<string, unknown> })
-    | undefined;
+  const attrs = node.attributes;
   const styleBag = attrs?.style;
-  const adjustsFontSizeToFit =
-    (attrs?.adjustsFontSizeToFit as boolean | undefined) ??
-    (styleBag?.adjustsFontSizeToFit as boolean | undefined) ??
-    false;
+  const adjustsFontSizeToFit = attrs?.adjustsFontSizeToFit ?? false;
   const showEllipsis =
-    (attrs?.showEllipsis as boolean | undefined) ??
+    attrs?.showEllipsis ??
     (styleBag?.showEllipsis as boolean | undefined) ??
     false;
 

package/src/build-components/View/View.tsx

@@ -1,10 +1,10 @@
-import React, { useId, useMemo } from 'react';
+import React, { useId } from 'react';
 import type { ViewComponentProps } from './ViewProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { Node } from '../../types/Node';
 import useNode from '../useNode';
-import { useRenderStore } from '../../store';
-import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
@@ -13,21 +13,15 @@ export function View({ node }: ViewComponentProps) {
   useLogRender('View');
   node = useNode(node);
   const generatedId = useId();
-  const attributeName = (node as any)?.sourceType ?? node.type ?? 'view';
+  const attributeName = node.sourceType ?? node.type ?? 'view';
   const attributeKey = node.key ?? generatedId;
-  const { previewMode, current, appConfig, projectColors } = useRenderStore(
-    (s) => ({
-      previewMode: s.previewMode,
-      current: s.current,
-      appConfig: s.appConfig,
-      projectColors: s.projectColors,
-    }),
-  );
-  const baseStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
-  );
-  const isSelected = isNodeSelected({ previewMode, current, node });
+  const { previewMode, selectedKey } = useBuilderParams();
+  const baseStyle = useExtractViewStyle(node);
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
   const viewStyle = useMergedStyle(
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,

package/src/build-components/other.tsx

@@ -9,7 +9,7 @@ export function other(type: string, node: Node): React.ReactNode {
   if (type === 'CrashComponent') {
     const details =
       node && typeof node === 'object' && !Array.isArray(node)
-        ? (node as any).attributes
+        ? (node as { attributes?: unknown }).attributes
         : undefined;
     throw new Error(
       `CrashComponent: intentional crash for testing${

package/src/components/BuilderProvider.tsx

@@ -1,6 +1,9 @@
 import React, { createContext, useContext, useMemo } from 'react';
 import type { Product } from '../paywall/types/paywall-types';
 import type { PaywallBenefits } from '../paywall/types/benefits';
+import type { AppConfig } from '../types/PreviewConfig';
+import type { Fonts } from '../types/Fonts';
+import type { ProjectColors } from '../types/Project';
 import { RenderErrorBoundary } from './RenderErrorBoundary';
 
 // NOTE: We keep this context intentionally tiny.
@@ -15,6 +18,20 @@ export type BuilderProviderParams = {
   benefits: PaywallBenefits;
   onPaywallClose?: () => void;
   onPaywallSubscribe?: (product?: Product) => void | boolean | Promise<boolean>;
+  /**
+   * Optional runtime config + styling inputs.
+   * These are intentionally passed down via BuilderProvider so `build-components`
+   * never need to touch `useRenderStore`.
+   */
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+  fonts?: Fonts;
+  appFont?: string | undefined;
+  /**
+   * Optional selection info (used by builder UI; ignored by host runtime).
+   */
+  previewMode?: boolean;
+  selectedKey?: string;
 };
 
 type BuilderProviderProps = {
@@ -42,12 +59,33 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
         typeof params?.onPaywallSubscribe === 'function'
           ? params.onPaywallSubscribe
           : undefined,
+      appConfig:
+        params?.appConfig && typeof params.appConfig === 'object'
+          ? (params.appConfig as AppConfig)
+          : undefined,
+      projectColors:
+        params?.projectColors && typeof params.projectColors === 'object'
+          ? (params.projectColors as ProjectColors)
+          : undefined,
+      fonts: Array.isArray(params?.fonts) ? (params.fonts as Fonts) : undefined,
+      appFont: params?.appFont,
+      previewMode: !!params?.previewMode,
+      selectedKey:
+        typeof params?.selectedKey === 'string'
+          ? params.selectedKey
+          : undefined,
     }),
     [
       params?.benefits,
       params?.products,
       params?.onPaywallClose,
       params?.onPaywallSubscribe,
+      params?.appConfig,
+      params?.projectColors,
+      params?.fonts,
+      params?.appFont,
+      params?.previewMode,
+      params?.selectedKey,
     ],
   );
 

package/src/hooks/useExtractTextStyle.ts

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import type { NodeData } from '../types/Node';
+import type { TextPropsGenerated } from '../build-components/Text/TextProps.generated';
+import { defaultAppConfig } from '../types/PreviewConfig';
+import { useBuilderParams } from '../components/BuilderProvider';
+import { extractTextStyle } from '../utils/extractTextStyle';
+
+export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
+  node: NodeData<T>,
+) {
+  const {
+    appConfig: builderAppConfig,
+    projectColors: builderProjectColors,
+    fonts: builderFonts,
+  } = useBuilderParams();
+
+  const appConfig = builderAppConfig ?? defaultAppConfig;
+  const projectColors = builderProjectColors;
+  const fonts = builderFonts;
+
+  return useMemo(
+    () => extractTextStyle(node, { appConfig, projectColors, fonts }),
+    // fonts is intentionally included: extractTextStyle resolves weights via font definitions.
+    [node, appConfig, projectColors, fonts],
+  );
+}

package/src/hooks/useExtractViewStyle.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import type { NodeData } from '../types/Node';
+import type { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
+import { useBuilderParams } from '../components/BuilderProvider';
+import { extractViewStyle } from '../utils/extractViewStyle';
+import { defaultAppConfig } from '../types/PreviewConfig';
+
+export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
+  node: NodeData<T>,
+) {
+  const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
+  const theme = appConfig?.theme ?? defaultAppConfig.theme;
+  const projectColors = builderProjectColors;
+
+  return useMemo(
+    () => extractViewStyle(node, { theme, projectColors }),
+    [node, theme, projectColors],
+  );
+}

package/src/hooks/useLocalize.ts

@@ -1,15 +1,16 @@
 import { useCallback } from 'react';
-import { useRenderStore } from '../store';
+import type { AppConfig } from '../types/PreviewConfig';
+import { defaultAppConfig } from '../types/PreviewConfig';
+import { useBuilderParams } from '../components/BuilderProvider';
 import { useLocalizationParams } from './useLocalizationParams';
 import { replaceLocalizationParams } from '../utils/replaceLocalizationParams';
 
 export type LocalizeFn = (keyOrText: string) => string;
 
-export function useLocalize(): LocalizeFn {
-  const { defaultLanguage, localication } = useRenderStore((s) => ({
-    defaultLanguage: s.appConfig?.defaultLanguage,
-    localication: s.appConfig?.localication,
-  }));
+export function useLocalize(options?: { appConfig?: AppConfig }): LocalizeFn {
+  const { appConfig: builderAppConfig } = useBuilderParams();
+  const appConfig = options?.appConfig ?? builderAppConfig ?? defaultAppConfig;
+  const { defaultLanguage, localication } = appConfig;
   const params = useLocalizationParams();
 
   return useCallback(

package/src/hooks/useSafeAreaViewStyle.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useRenderStore } from '../store';
+import type { Device } from '../types/Device';
 
 function addInset(
   base: React.CSSProperties['paddingTop'],
@@ -28,19 +28,18 @@ function subtractInset(
 export function useSafeAreaViewStyle(
   baseStyle: React.CSSProperties,
   enabled: boolean,
+  device?: Device,
 ) {
-  const device = useRenderStore((s) => s.device);
-
   return useMemo(() => {
     if (!enabled) return baseStyle;
 
-    const [insetTop, insetRight, insetBottom, insetLeft] = device.insets ?? [
+    const [insetTop, insetRight, insetBottom, insetLeft] = device?.insets ?? [
       0, 0, 0, 0,
     ];
 
     // Match DeviceMockFrame fallbacks: status bar overlays content, so we treat it as top safe area.
     const top =
-      insetTop || (device.platform === 'ios' ? 20 : device.platform ? 24 : 0);
+      insetTop || (device?.platform === 'ios' ? 20 : device?.platform ? 24 : 0);
 
     // Bottom safe area is handled visually by the mock navigation bar area, which takes layout space.
     // So we intentionally don't add bottom padding here to avoid double-spacing.

package/src/index.native.ts

@@ -74,6 +74,9 @@ export {
   getArrayItemType,
 } from './utils/patterns';
 
+// Node helpers (RN-safe)
+export { default as useNode } from './build-components/useNode';
+
 // Static sample data helpers (RN-safe)
 export {
   getSamples,

package/src/index.ts

@@ -1,5 +1,13 @@
 import './styles/index.scss';
 import AttributesEditor from './AttributesEditor';
+
+// Example app (`example/`) uses these exports today:
+// - `ProjectPage` (from `src/pages/ProjectPage.tsx`)
+// - `getSamples` (from `src/assets/samples/getSamples.ts`)
+// - types from `src/types/*` and `src/types/PreviewConfig.ts` (Project/ProjectColors/AppConfig/defaultAppConfig)
+//
+// React Native: a RN-safe entrypoint exists at `react-builder/native` (`src/index.native.ts`).
+// More RN-focused exports/integration helpers are coming.
 // 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 {
@@ -12,6 +20,8 @@ export { RenderErrorBoundary } from './components/RenderErrorBoundary';
 export { useParams } from './hooks/useParams';
 export { useLocalizationParams } from './hooks/useLocalizationParams';
 export { useLocalize } from './hooks/useLocalize';
+export { useExtractTextStyle } from './hooks/useExtractTextStyle';
+export { useExtractViewStyle } from './hooks/useExtractViewStyle';
 
 export type { TargetedScreenSize } from './types/TargetedScreenSize';
 export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
@@ -25,11 +35,6 @@ export {
   analyseNode,
 } from './utils/analyseNode';
 export { getSamples } from './assets/samples/getSamples';
-export { getBasicSamples } from './assets/samples/getSamples';
-export { getOnboardSamples } from './assets/samples/getSamples';
-export { RenderPage } from './RenderPage';
-export { DeviceMockFrame } from './DeviceMockFrame';
-export { novaToJson } from './utils/novaToJson';
 export type { AppConfig, Localication } from './types/PreviewConfig';
 export { defaultAppConfig } from './types/PreviewConfig';
 export { getDevices, getDefaultDevice } from './utils/getDevices';
@@ -50,7 +55,6 @@ export {
 } 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 {
@@ -59,7 +63,6 @@ export type {
   Product as PaywallProduct,
   PaywallModel,
 } from './paywall/types/paywall-types';
-
 // Paywall hooks
 export {
   usePaywallCounter,

package/src/pages/ProjectDebug.tsx

@@ -1,6 +1,5 @@
 import { type ReactNode, useMemo, useState } from 'react';
 import { RenderPage } from '../RenderPage';
-import { BuilderProvider } from '../components/BuilderProvider';
 import { RenderErrorBoundary } from '../components/RenderErrorBoundary';
 import type { Node } from '../types/Node';
 import type { Product } from '../paywall/types/paywall-types';
@@ -267,20 +266,22 @@ export function ProjectDebug({
           ['--rb-canvas-bg' as any]: canvasBg ?? 'none',
         }}
       >
-        <BuilderProvider params={{ products, benefits }}>
-          <RenderErrorBoundary
-            subtitle="caught by ProjectDebug preview"
-            onError={(e, componentStack) =>
-              setPreviewError({
-                message: e?.message ?? String(e),
-                stack: e?.stack,
-                componentStack,
-              })
-            }
-          >
-            <RenderPage data={previewData} name={name} />
-          </RenderErrorBoundary>
-        </BuilderProvider>
+        <RenderErrorBoundary
+          subtitle="caught by ProjectDebug preview"
+          onError={(e, componentStack) =>
+            setPreviewError({
+              message: e?.message ?? String(e),
+              stack: e?.stack,
+              componentStack,
+            })
+          }
+        >
+          <RenderPage
+            data={previewData}
+            name={name}
+            params={{ products, benefits }}
+          />
+        </RenderErrorBoundary>
       </section>
 
       <section className="rb-project-debug__error" aria-label="Errors">

package/src/pages/ProjectPage.tsx

@@ -5,7 +5,6 @@ import { ToastContainer, toast } from 'react-toastify';
 import { RenderPage } from '../RenderPage';
 import { EditorHeader } from '../components/EditorHeader';
 import { AttributesEditorPanel } from '../components/AttributesEditorPanel';
-import { BuilderProvider } from '../components/BuilderProvider';
 import { BuilderPanel } from './tabs/BuilderPanel';
 import { BottomBar } from '../components/BottomBar';
 import { AppConfig, defaultAppConfig } from '../types/PreviewConfig';
@@ -79,6 +78,7 @@ export function ProjectPage({
   const resolvedProjectColors = projectColors ?? project.projectColors;
   const isEmptyProjectData =
     isNodeNullOrUndefined(project.data) || isEmptyObject(project.data);
+  // useRenderStore will be removed
   const {
     current,
     setCurrent,
@@ -86,6 +86,7 @@ export function ProjectPage({
     setProjectName,
     products,
     benefits,
+    previewMode,
   } = useRenderStore((s) => ({
     current: s.current,
     setCurrent: s.setCurrent,
@@ -93,6 +94,7 @@ export function ProjectPage({
     setProjectName: s.setProjectName,
     products: s.products,
     benefits: s.benefits,
+    previewMode: s.previewMode,
   }));
   const [editorData, setEditorData] = useState<Node>(() => {
     if (!isEmptyProjectData) return null;
@@ -462,17 +464,27 @@ export function ProjectPage({
               )}
               {/* NOTE: In React Native, `products` should come from an IAP wrapper (e.g. `react-native-iap`). */}
               {!showLoading && editorData && (
-                <BuilderProvider
+                <RenderPage
+                  data={editorData}
+                  name={resolvedName}
                   params={{
                     products,
                     benefits:
                       benefits && typeof benefits === 'object'
                         ? (benefits as PaywallBenefits)
                         : {},
+                    // Theme/colors/fonts must be passed via BuilderProvider params so build-components never touch useRenderStore.
+                    appConfig,
+                    projectColors: resolvedProjectColors,
+                    fonts: typography.fonts,
+                    appFont: resolvedAppFont,
+                    previewMode,
+                    selectedKey:
+                      current && typeof current === 'object' && 'key' in current
+                        ? ((current as any).key as string | undefined)
+                        : undefined,
                   }}
-                >
-                  <RenderPage data={editorData} name={resolvedName} />
-                </BuilderProvider>
+                />
               )}
             </div>
             {/* BOTOM BAR */}

package/src/types/Node.ts

@@ -10,6 +10,7 @@ export type Node<T = NodeDefaultAttribute> =
 
 export interface NodeData<T = Record<string, unknown>> {
   type: string;
+  sourceType?: string;
   children: Node<Record<string, unknown>>;
   attributes?: T;
   key?: string;