@developer_tribe/react-builder 0.1.27 → 0.1.29

package/src/store.ts

@@ -0,0 +1,56 @@
+import { createWithEqualityFn } from 'zustand/traditional';
+import { shallow } from 'zustand/shallow';
+import type { Device } from './types/Device';
+import type { Localication } from './types/PreviewConfig';
+import { getDefaultDevice } from './utils/getDevices';
+import { ScreenStyle } from './RenderPage';
+
+type RenderStore = {
+  device: Device;
+  localication: Localication | null;
+  defaultLanguage?: string;
+  baseSize: {
+    width: number;
+    height: number;
+  };
+  theme: 'dark' | 'light';
+  screenStyle: ScreenStyle;
+  setBaseSize: (baseSize: { width: number; height: number }) => void;
+  setDevice: (device: Device) => void;
+  setLocalication: (localication: Localication | null) => void;
+  setDefaultLanguage: (defaultLanguage?: string) => void;
+  setTheme: (theme: 'dark' | 'light') => void;
+  setScreenStyle: (screenStyle: ScreenStyle) => void;
+};
+
+export const useRenderStore = createWithEqualityFn<RenderStore>()(
+  (set) => ({
+    device: getDefaultDevice(),
+    localication: null,
+    defaultLanguage: undefined,
+    baseSize: {
+      width: 390,
+      height: 844,
+    },
+    theme: 'light',
+    screenStyle: {
+      light: {
+        backgroundColor: '#FDFDFD',
+        color: '#161827',
+        seperatorColor: '#E5E7EB',
+      },
+      dark: {
+        backgroundColor: '#12131A',
+        color: '#E9EBF9',
+        seperatorColor: '#E5E7EB',
+      },
+    },
+    setBaseSize: (baseSize) => set({ baseSize }),
+    setDevice: (device) => set({ device }),
+    setLocalication: (localication) => set({ localication }),
+    setDefaultLanguage: (defaultLanguage) => set({ defaultLanguage }),
+    setTheme: (theme) => set({ theme }),
+    setScreenStyle: (screenStyle) => set({ screenStyle }),
+  }),
+  shallow,
+);

package/src/styles/_reset.scss

@@ -0,0 +1,30 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+body {
+  background: #fff;
+  //font-family: $font-sans;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow: hidden; /* Prevent page scroll; panels will handle their own scroll */
+}
+button {
+  font-family: inherit;
+}
+input,
+button {
+  font-size: 100%;
+}
+p {
+  margin: 0;
+  padding: 0;
+}

package/src/styles/index.scss

@@ -1,3 +1,5 @@
+@use './reset';
+
 .embla {
   max-width: 48rem;
   margin: auto;

package/src/types/PreviewConfig.ts

@@ -5,8 +5,8 @@ export interface PreviewConfig {
   screenSize: TargetedScreenSize;
   isRtl: boolean;
   screenStyle: {
-    light: { backgroundColor: string; color: string };
-    dark: { backgroundColor: string; color: string };
+    light: { backgroundColor: string; color: string; seperatorColor?: string };
+    dark: { backgroundColor: string; color: string; seperatorColor?: string };
   };
   localication: Localication;
   defaultLanguage?: string;

package/src/utils/getDevices.ts

@@ -10,3 +10,7 @@ export function getDevices(): Device[] {
   });
   return deviceList;
 }
+
+export function getDefaultDevice(): Device {
+  return getDevices()[0];
+}

package/src/utils/novaToJson.ts

@@ -95,17 +95,29 @@ function buildCarouselItem(
     if (comp?.layout === 'title-layout') {
       const title = comp?.attributes?.title_localization_key || '';
       const color = comp?.attributes?.title_color || undefined;
-      const { fontSize: titleFontSize, fontWeight: titleFontWeight } =
-        extractTextStyleAttributesFromComponent(comp);
+      const {
+        fontSize: titleFontSize,
+        textAlign: titleTextAlign,
+        marginTop: titleMarginTop,
+        fontWeight: titleFontWeight,
+      } = extractTextStyleAttributesFromComponent(comp);
       children.push({
         type: 'OnboardTitle',
         attributes:
-          color || titleFontSize || titleFontWeight
+          color ||
+          titleFontSize ||
+          titleTextAlign ||
+          titleMarginTop ||
+          titleFontWeight
             ? {
                 ...(color ? { color } : {}),
                 ...(typeof titleFontSize === 'number'
                   ? { fontSize: titleFontSize }
                   : {}),
+                ...(titleTextAlign ? { textAlign: titleTextAlign } : {}),
+                ...(typeof titleMarginTop === 'number'
+                  ? { marginTop: titleMarginTop }
+                  : {}),
                 ...(titleFontWeight ? { fontWeight: titleFontWeight } : {}),
               }
             : undefined,
@@ -117,18 +129,26 @@ function buildCarouselItem(
       const {
         fontSize: subtitleFontSize,
         textAlign: subtitleTextAlign,
+        marginTop: subtitleMarginTop,
         fontWeight: subtitleFontWeight,
       } = extractTextStyleAttributesFromComponent(comp);
       children.push({
         type: 'OnboardSubtitle',
         attributes:
-          color || subtitleFontSize || subtitleTextAlign || subtitleFontWeight
+          color ||
+          subtitleFontSize ||
+          subtitleTextAlign ||
+          subtitleMarginTop ||
+          subtitleFontWeight
             ? {
                 ...(color ? { color } : {}),
                 ...(typeof subtitleFontSize === 'number'
                   ? { fontSize: subtitleFontSize }
                   : {}),
                 ...(subtitleTextAlign ? { textAlign: subtitleTextAlign } : {}),
+                ...(typeof subtitleMarginTop === 'number'
+                  ? { marginTop: subtitleMarginTop }
+                  : {}),
                 ...(subtitleFontWeight
                   ? { fontWeight: subtitleFontWeight }
                   : {}),
@@ -195,7 +215,7 @@ function buildCarouselItem(
         const normalizedEvents: {
           type: 'Permission' | 'Navigate';
           permission?: string;
-          next_page_key?: string;
+          navigate_to?: string | null;
         }[] = [];
         for (const action of actions) {
           //@eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -210,12 +230,20 @@ function buildCarouselItem(
               const nextKey = e?.attributes?.next_page_key as
                 | string
                 | undefined;
+              // If key exists among simple-onboard-layout pages, prefer index navigation
+              const hasTarget =
+                typeof nextKey === 'string' && pageKeyToIndex.has(nextKey);
+              const navigate_to = hasTarget
+                ? null
+                : typeof nextKey === 'string'
+                  ? nextKey
+                  : null;
               normalizedEvents.push({
                 type: 'Navigate',
-                next_page_key: nextKey,
+                navigate_to,
               });
-              if (typeof nextKey === 'string' && pageKeyToIndex.has(nextKey)) {
-                targetIndex = pageKeyToIndex.get(nextKey)!;
+              if (hasTarget) {
+                targetIndex = pageKeyToIndex.get(nextKey!)!;
               }
             }
           }
@@ -275,6 +303,7 @@ function buildCarouselItem(
 function extractTextStyleAttributesFromComponent(comp: any): {
   fontSize?: number;
   textAlign?: 'left' | 'center' | 'right' | 'justify';
+  marginTop?: number;
   fontWeight?:
     | 'normal'
     | 'bold'
@@ -291,6 +320,7 @@ function extractTextStyleAttributesFromComponent(comp: any): {
   const result: {
     fontSize?: number;
     textAlign?: 'left' | 'center' | 'right' | 'justify';
+    marginTop?: number;
     fontWeight?:
       | 'normal'
       | 'bold'
@@ -348,6 +378,14 @@ function extractTextStyleAttributesFromComponent(comp: any): {
         result.textAlign = align as typeof result.textAlign;
       }
 
+      const rawMarginTop = style?.marginTop;
+      if (typeof rawMarginTop === 'number' && Number.isFinite(rawMarginTop)) {
+        result.marginTop = rawMarginTop;
+      } else if (typeof rawMarginTop === 'string') {
+        const n = Number.parseInt(rawMarginTop, 10);
+        if (Number.isFinite(n)) result.marginTop = n;
+      }
+
       const rawWeight = style?.fontWeight;
       let normalizedWeight: string | undefined;
       if (typeof rawWeight === 'number' && Number.isFinite(rawWeight)) {

package/src/utils/patterns.ts

@@ -1,65 +1,34 @@
-import imagePattern from '../build-components/Image/pattern.json';
-import textPattern from '../build-components/Text/pattern.json';
-import buttonPattern from '../build-components/Button/pattern.json';
-import viewPattern from '../build-components/View/pattern.json';
-import carouselPattern from '../build-components/Carousel/pattern.json';
-import carouselButtonsPattern from '../build-components/CarouselButtons/pattern.json';
-import carouselDotsPattern from '../build-components/CarouselDots/pattern.json';
-import carouselItemPattern from '../build-components/CarouselItem/pattern.json';
-import carouselProviderPattern from '../build-components/CarouselProvider/pattern.json';
-import onboardPattern from '../build-components/Onboard/pattern.json';
-import onboardProviderPattern from '../build-components/OnboardProvider/pattern.json';
-import onboardItemPattern from '../build-components/OnboardItem/pattern.json';
-import onboardImagePattern from '../build-components/OnboardImage/pattern.json';
-import onboardButtonsPattern from '../build-components/OnboardButtons/pattern.json';
-import onboardButtonPattern from '../build-components/OnboardButton/pattern.json';
-import OnboardTitlePattern from '../build-components/OnboardTitle/pattern.json';
-import onboardSubtitlePattern from '../build-components/OnboardSubtitle/pattern.json';
-import onboardFooterPattern from '../build-components/OnboardFooter/pattern.json';
-import onboardExpandingDotPattern from '../build-components/OnboardDot/pattern.json';
+import { patterns as generatedPatterns } from '../build-components';
 import type { NodeDefaultAttribute } from '../types/Node';
 
 type Pattern = {
   schemaVersion: number;
   allowUnknownAttributes: boolean;
+  extends: string;
   pattern: {
     type: string;
     children: unknown;
-    attributes: Record<string, string | string[]>;
+    attributes?: Record<string, string | string[]>;
   };
+  defaults?: NodeDefaultAttribute;
+
   // Optional custom complex types referenced by attributes like "X[]" or "X"
   // Each entry maps a type name (e.g., "EventObject") to its field schema
   // where the inner record maps fieldName -> primitive type or enum options
   types?: Record<string, Record<string, string | string[]>>;
   // Optional defaults to be applied to node.attributes if not provided
-  defaults?: NodeDefaultAttribute;
 };
 
-const patterns: Pattern[] = [
-  imagePattern as Pattern,
-  textPattern as Pattern,
-  buttonPattern as Pattern,
-  viewPattern as Pattern,
-  carouselPattern as Pattern,
-  carouselButtonsPattern as Pattern,
-  carouselDotsPattern as Pattern,
-  carouselItemPattern as Pattern,
-  carouselProviderPattern as Pattern,
-  onboardPattern as Pattern,
-  onboardProviderPattern as Pattern,
-  onboardItemPattern as Pattern,
-  onboardImagePattern as Pattern,
-  onboardButtonsPattern as Pattern,
-  onboardButtonPattern as Pattern,
-  OnboardTitlePattern as Pattern,
-  onboardSubtitlePattern as Pattern,
-  onboardFooterPattern as Pattern,
-  onboardExpandingDotPattern as Pattern,
-];
+const patterns: Pattern[] = generatedPatterns as unknown as Pattern[];
+
+// Build a fast lookup map without normalization for direct access
+const patternIndex: Map<string, Pattern> = new Map(
+  patterns.map((p) => [p.pattern.type, p]),
+);
 
-export function getPatternByType(type?: string | null) {
-  if (!type) return undefined;
-  return patterns.find((p) => p.pattern.type === type);
+export function getPatternByType(type?: string | null): Pattern | undefined {
+  if (typeof type !== 'string') return undefined;
+  return patternIndex.get(type);
 }
 
 export function getAttributeSchema(

package/dist/RenderMainNode.d.ts

@@ -1,16 +0,0 @@
-import { Localication } from './types/PreviewConfig';
-export declare const mainNodeContext: import("react").Context<{
-    localication?: Localication;
-    defaultLanguage?: string;
-    theme?: "light" | "dark";
-    warning?: string;
-    setWarning?: (message: string) => void;
-} | null>;
-export declare function RenderMainNode({ children, localication, defaultLanguage, theme, }: {
-    localication?: Localication;
-    defaultLanguage?: string;
-    theme?: 'light' | 'dark';
-    children: React.ReactNode;
-    warning?: string;
-    setWarning?: (message: string) => void;
-}): import("react/jsx-runtime").JSX.Element;

package/src/RenderMainNode.tsx

@@ -1,37 +0,0 @@
-import { createContext, useState } from 'react';
-import { Node } from './index';
-
-import { Localication } from './types/PreviewConfig';
-import RenderNode from './build-components/RenderNode.generated';
-export const mainNodeContext = createContext<{
-  localication?: Localication;
-  defaultLanguage?: string;
-  theme?: 'light' | 'dark';
-  warning?: string;
-  setWarning?: (message: string) => void;
-} | null>(null);
-
-export function RenderMainNode({
-  children,
-  localication,
-  defaultLanguage,
-  theme,
-}: {
-  localication?: Localication;
-  defaultLanguage?: string;
-  theme?: 'light' | 'dark';
-  children: React.ReactNode;
-  warning?: string;
-  setWarning?: (message: string) => void;
-}) {
-  const [warning, setWarning] = useState<string>('');
-
-  return (
-    <mainNodeContext.Provider
-      value={{ localication, defaultLanguage, theme, warning, setWarning }}
-    >
-      {warning && <div className="warning">{warning}</div>}
-      {children}
-    </mainNodeContext.Provider>
-  );
-}