@developer_tribe/react-builder 0.1.26 → 0.1.28

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/types/Project.ts

@@ -5,7 +5,7 @@ export interface ProjectBase<T> {
   name: string;
   version: string;
   data: T;
-  previewConfig: PreviewConfig;
+  previewConfig?: PreviewConfig;
 }
 
 export interface Project extends ProjectBase<Node> {}

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,65 @@ function buildCarouselItem(
     if (comp?.layout === 'title-layout') {
       const title = comp?.attributes?.title_localization_key || '';
       const color = comp?.attributes?.title_color || undefined;
+      const {
+        fontSize: titleFontSize,
+        textAlign: titleTextAlign,
+        marginTop: titleMarginTop,
+        fontWeight: titleFontWeight,
+      } = extractTextStyleAttributesFromComponent(comp);
       children.push({
         type: 'OnboardTitle',
-        attributes: color ? { color } : undefined,
+        attributes:
+          color ||
+          titleFontSize ||
+          titleTextAlign ||
+          titleMarginTop ||
+          titleFontWeight
+            ? {
+                ...(color ? { color } : {}),
+                ...(typeof titleFontSize === 'number'
+                  ? { fontSize: titleFontSize }
+                  : {}),
+                ...(titleTextAlign ? { textAlign: titleTextAlign } : {}),
+                ...(typeof titleMarginTop === 'number'
+                  ? { marginTop: titleMarginTop }
+                  : {}),
+                ...(titleFontWeight ? { fontWeight: titleFontWeight } : {}),
+              }
+            : undefined,
         children: title,
       });
     } else if (comp?.layout === 'subtitle-layout') {
       const subtitle = comp?.attributes?.subtitle_localization_key || '';
       const color = comp?.attributes?.subtitle_color || undefined;
+      const {
+        fontSize: subtitleFontSize,
+        textAlign: subtitleTextAlign,
+        marginTop: subtitleMarginTop,
+        fontWeight: subtitleFontWeight,
+      } = extractTextStyleAttributesFromComponent(comp);
       children.push({
         type: 'OnboardSubtitle',
-        attributes: color ? { color } : undefined,
+        attributes:
+          color ||
+          subtitleFontSize ||
+          subtitleTextAlign ||
+          subtitleMarginTop ||
+          subtitleFontWeight
+            ? {
+                ...(color ? { color } : {}),
+                ...(typeof subtitleFontSize === 'number'
+                  ? { fontSize: subtitleFontSize }
+                  : {}),
+                ...(subtitleTextAlign ? { textAlign: subtitleTextAlign } : {}),
+                ...(typeof subtitleMarginTop === 'number'
+                  ? { marginTop: subtitleMarginTop }
+                  : {}),
+                ...(subtitleFontWeight
+                  ? { fontWeight: subtitleFontWeight }
+                  : {}),
+              }
+            : undefined,
         children: subtitle,
       });
     } else if (comp?.layout === 'image-layout') {
@@ -121,13 +169,20 @@ function buildCarouselItem(
             ? rawHeight
             : undefined;
 
+      // derive resizeMode from is_bg_image and try to extract borderRadius from styles
+      const isBgImage = Boolean(comp?.attributes?.is_bg_image);
+      const imageStyle = extractViewStyleAttributesFromComponent(comp);
+
       if (src) {
         children.push({
           type: 'OnboardImage',
           attributes: {
             src,
             ...(height ? { height } : {}),
-            resizeMode: 'contain',
+            resizeMode: isBgImage ? 'cover' : 'contain',
+            ...(typeof imageStyle.borderRadius === 'number'
+              ? { borderRadius: imageStyle.borderRadius }
+              : {}),
           },
           children: undefined as unknown as Node,
         } as unknown as NodeData);
@@ -236,6 +291,137 @@ function buildCarouselItem(
   };
 }
 
+//@eslint-disable-next-line @typescript-eslint/no-explicit-any
+function extractTextStyleAttributesFromComponent(comp: any): {
+  fontSize?: number;
+  textAlign?: 'left' | 'center' | 'right' | 'justify';
+  marginTop?: number;
+  fontWeight?:
+    | 'normal'
+    | 'bold'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900';
+} {
+  const result: {
+    fontSize?: number;
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
+    marginTop?: number;
+    fontWeight?:
+      | 'normal'
+      | 'bold'
+      | '100'
+      | '200'
+      | '300'
+      | '400'
+      | '500'
+      | '600'
+      | '700'
+      | '800'
+      | '900';
+  } = {};
+
+  //@eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const stylesRoot = (comp?.attributes?.styles || []) as any[];
+  if (!Array.isArray(stylesRoot) || stylesRoot.length === 0) return result;
+
+  const allowedAligns = new Set(['left', 'center', 'right', 'justify']);
+  const allowedWeights = new Set([
+    'normal',
+    'bold',
+    '100',
+    '200',
+    '300',
+    '400',
+    '500',
+    '600',
+    '700',
+    '800',
+    '900',
+  ]);
+
+  for (const s of stylesRoot) {
+    if (s?.layout !== 'style-layout') continue;
+    //@eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const nested = (s?.attributes?.styles || []) as any[];
+    if (!Array.isArray(nested)) continue;
+    for (const st of nested) {
+      if (st?.layout !== 'Styles') continue;
+      const type = st?.attributes?.type;
+      if (type !== 'textStyle') continue;
+      const style = st?.attributes?.style || {};
+
+      const rawFontSize = style?.fontSize;
+      if (typeof rawFontSize === 'number' && Number.isFinite(rawFontSize)) {
+        result.fontSize = rawFontSize;
+      } else if (typeof rawFontSize === 'string') {
+        const n = Number.parseInt(rawFontSize, 10);
+        if (Number.isFinite(n)) result.fontSize = n;
+      }
+
+      const align = style?.textAlign;
+      if (typeof align === 'string' && allowedAligns.has(align)) {
+        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)) {
+        normalizedWeight = String(rawWeight);
+      } else if (typeof rawWeight === 'string') {
+        normalizedWeight = rawWeight;
+      }
+      if (normalizedWeight && allowedWeights.has(normalizedWeight)) {
+        result.fontWeight = normalizedWeight as typeof result.fontWeight;
+      }
+    }
+  }
+
+  return result;
+}
+
+//@eslint-disable-next-line @typescript-eslint/no-explicit-any
+function extractViewStyleAttributesFromComponent(comp: any): {
+  borderRadius?: number;
+} {
+  const result: { borderRadius?: number } = {};
+  //@eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const stylesRoot = (comp?.attributes?.styles || []) as any[];
+  if (!Array.isArray(stylesRoot) || stylesRoot.length === 0) return result;
+  for (const s of stylesRoot) {
+    if (s?.layout !== 'style-layout') continue;
+    //@eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const nested = (s?.attributes?.styles || []) as any[];
+    if (!Array.isArray(nested)) continue;
+    for (const st of nested) {
+      if (st?.layout !== 'Styles') continue;
+      const style = st?.attributes?.style || {};
+      const rawBr = style?.borderRadius;
+      if (typeof rawBr === 'number' && Number.isFinite(rawBr)) {
+        result.borderRadius = rawBr;
+      } else if (typeof rawBr === 'string') {
+        const n = Number.parseInt(rawBr, 10);
+        if (Number.isFinite(n)) result.borderRadius = n;
+      }
+    }
+  }
+  return result;
+}
+
 function mapDotsFromGeneralComponents(generalComponents: any[]): Node | null {
   const dots = generalComponents.find((gc) => gc?.layout === 'dots-layout');
   if (!dots) return null;

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>
-  );
-}