@developer_tribe/react-builder 0.1.26 → 0.1.27

package/dist/types/Project.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "type": "module",
   "restricted": true,
   "main": "dist/index.cjs.js",

package/src/assets/samples/getSamples.ts

@@ -32,10 +32,14 @@ export function getBasicSamples(): Project[] {
 }
 
 export function getOnboardSamples(): Project[] {
-  return [
+  const legacySamples = [
     vpnOnboard1 as Project,
     vpnOnboard2 as Project,
     vpnOnboard3 as Project,
     vpnOnboard4 as Project,
   ];
+  legacySamples.forEach((sample) => {
+    sample.data = novaToJson(sample);
+  });
+  return legacySamples;
 }

package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.ts

@@ -7,6 +7,7 @@ export interface OnboardSubtitlePropsGenerated {
   attributes: {
     color?: string;
     fontSize?: number;
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
     fontWeight?:
       | 'normal'
       | 'bold'

package/src/build-components/OnboardSubtitle/pattern.json

@@ -7,6 +7,7 @@
     "attributes": {
       "color": "string",
       "fontSize": "number",
+      "textAlign": ["left", "center", "right", "justify"],
       "fontWeight": [
         "normal",
         "bold",

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/novaToJson.ts

@@ -95,17 +95,45 @@ 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);
       children.push({
         type: 'OnboardTitle',
-        attributes: color ? { color } : undefined,
+        attributes:
+          color || titleFontSize || titleFontWeight
+            ? {
+                ...(color ? { color } : {}),
+                ...(typeof titleFontSize === 'number'
+                  ? { fontSize: titleFontSize }
+                  : {}),
+                ...(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,
+        fontWeight: subtitleFontWeight,
+      } = extractTextStyleAttributesFromComponent(comp);
       children.push({
         type: 'OnboardSubtitle',
-        attributes: color ? { color } : undefined,
+        attributes:
+          color || subtitleFontSize || subtitleTextAlign || subtitleFontWeight
+            ? {
+                ...(color ? { color } : {}),
+                ...(typeof subtitleFontSize === 'number'
+                  ? { fontSize: subtitleFontSize }
+                  : {}),
+                ...(subtitleTextAlign ? { textAlign: subtitleTextAlign } : {}),
+                ...(subtitleFontWeight
+                  ? { fontWeight: subtitleFontWeight }
+                  : {}),
+              }
+            : undefined,
         children: subtitle,
       });
     } else if (comp?.layout === 'image-layout') {
@@ -121,13 +149,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 +271,127 @@ function buildCarouselItem(
   };
 }
 
+//@eslint-disable-next-line @typescript-eslint/no-explicit-any
+function extractTextStyleAttributesFromComponent(comp: any): {
+  fontSize?: number;
+  textAlign?: 'left' | 'center' | 'right' | 'justify';
+  fontWeight?:
+    | 'normal'
+    | 'bold'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900';
+} {
+  const result: {
+    fontSize?: number;
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
+    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 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;