@developer_tribe/react-builder 0.1.30 → 0.1.31

package/dist/utils/extractImageStyle.d.ts

@@ -0,0 +1,3 @@
+import { ImagePropsGenerated } from '../build-components/Image/ImageProps.generated';
+import type { NodeData } from '../types/Node';
+export declare function extractImageStyle<T extends ImagePropsGenerated['attributes']>(node: NodeData<T>): import("react").CSSProperties;

package/dist/utils/extractTextStyle.d.ts

@@ -0,0 +1,3 @@
+import type { NodeData } from '../types/Node';
+import type { TextPropsGenerated } from '../build-components/Text/TextProps.generated';
+export declare function extractTextStyle<T extends TextPropsGenerated['attributes']>(node: NodeData<T>): import("react").CSSProperties;

package/dist/utils/extractViewStyle.d.ts

@@ -0,0 +1,3 @@
+import { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
+import type { NodeData } from '../types/Node';
+export declare function extractViewStyle<T extends ViewPropsGenerated['attributes']>(node: NodeData<T>): import("react").CSSProperties;

package/package.json

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

package/scripts/prebuild/prebuild.js

@@ -2,7 +2,7 @@
 
 import run from './build-components.js';
 
-console.log('Building components...');
+console.info('Building components...');
 try {
   await run();
 } catch (err) {

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { ImageComponentProps } from './ImageProps.generated';
 import useNode from '../useNode';
+import { extractImageStyle } from '../../utils/extractImageStyle';
 
 function Image({ node }: ImageComponentProps) {
   node = useNode(node);
@@ -10,19 +11,7 @@ function Image({ node }: ImageComponentProps) {
       src={node.attributes?.src}
       width={node.attributes?.width}
       height={node.attributes?.height}
-      style={{
-        width: node.attributes?.width,
-        height: node.attributes?.height,
-        borderRadius: node.attributes?.borderRadius,
-        objectFit:
-          node.attributes?.resizeMode === 'cover'
-            ? 'cover'
-            : node.attributes?.resizeMode === 'contain'
-              ? 'contain'
-              : node.attributes?.resizeMode === 'stretch'
-                ? 'fill'
-                : undefined,
-      }}
+      style={extractImageStyle(node)}
       alt=""
     />
   );

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

@@ -27,15 +27,14 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
       if (e.type === 'Permission') {
         alert(`Permission requested: ${e.permission ?? 'unknown'}`);
       } else if (e.type === 'Navigate') {
-        if (typeof node.attributes?.targetIndex === 'number') {
-          emblaApi?.scrollTo(node.attributes.targetIndex);
+        const eventTargetIndex = (e as any)?.targetIndex;
+        if (typeof eventTargetIndex === 'number') {
+          emblaApi?.scrollTo(eventTargetIndex);
           navigateHandled = true;
         }
       }
     }
-    if (!navigateHandled && typeof node.attributes?.targetIndex === 'number') {
-      emblaApi?.scrollTo(node.attributes.targetIndex);
-    }
+    // Fallback: do nothing when there is no Navigate event
   };
 
   return (

package/src/build-components/OnboardButton/OnboardButtonProps.generated.ts

@@ -22,7 +22,6 @@ export interface OnboardButtonPropsGenerated {
     animation_color?: string;
     button_background_color?: string;
     flex?: number;
-    targetIndex?: number;
     events?: EventObjectGenerated[];
   };
 }

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

@@ -17,7 +17,6 @@
       "animation_color": "string",
       "button_background_color": "string",
       "flex": "number",
-      "targetIndex": "number",
       "events": "EventObject[]"
     }
   },

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

@@ -3,6 +3,7 @@ import type { OnboardFooterComponentProps } from './OnboardFooterProps.generated
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { parseSize } from '../../size-matters';
+import { extractTextStyle } from '../../utils/extractTextStyle';
 
 type Segment =
   | { type: 'text'; value: string }
@@ -94,34 +95,7 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
   const text = t(node?.attributes?.textLocalizationKey);
-  const style: React.CSSProperties = {
-    display: 'flex',
-    flexDirection: (node?.attributes?.flexDirection as any) ?? 'column',
-    gap: typeof node?.attributes?.gap === 'number' ? node.attributes.gap : 0,
-    padding:
-      typeof node?.attributes?.padding === 'number'
-        ? node.attributes.padding
-        : undefined,
-    margin:
-      typeof node?.attributes?.margin === 'number'
-        ? node.attributes.margin
-        : undefined,
-    backgroundColor: node?.attributes?.backgroundColor,
-    borderRadius:
-      typeof node?.attributes?.borderRadius === 'number'
-        ? node.attributes.borderRadius
-        : undefined,
-    width:
-      typeof node?.attributes?.width === 'number'
-        ? node.attributes.width
-        : undefined,
-    height:
-      typeof node?.attributes?.height === 'number'
-        ? node.attributes.height
-        : undefined,
-    alignItems: node?.attributes?.alignItems as any,
-    justifyContent: node?.attributes?.justifyContent as any,
-  };
+  const style: React.CSSProperties = extractTextStyle(node);
 
   const linkStyle = (color?: string): React.CSSProperties => ({
     color,
@@ -129,7 +103,6 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
   });
 
   const paddingHorizontal = parseSize(node?.attributes?.paddingHorizontal);
-  console.log('----', node?.attributes);
   return (
     <div
       style={{

package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts

@@ -19,6 +19,7 @@ export interface OnboardFooterPropsGenerated {
       | '700'
       | '800'
       | '900';
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
     scrollable?: boolean;
     flexDirection?: 'row' | 'column';
     alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';

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

@@ -15,7 +15,6 @@ import useNode from '../useNode';
 export const onboardContext = createContext<any>(undefined);
 function OnboardProvider({ node }: OnboardProviderComponentProps) {
   node = useNode(node);
-  console.log('node', node);
   const device = useRenderStore((s) => s.device);
   const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
   const [selectedIndex, setSelectedIndex] = useState(0);

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

@@ -19,6 +19,7 @@ export interface OnboardSubtitlePropsGenerated {
       | '700'
       | '800'
       | '900';
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
     scrollable?: boolean;
     flexDirection?: 'row' | 'column';
     alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';

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

@@ -5,7 +5,6 @@ import useNode from '../useNode';
 
 function OnboardTitle({ node }: OnboardTitleComponentProps) {
   node = useNode(node);
-  console.log('node', node);
   return <Text node={node} />;
 }
 

package/src/build-components/OnboardTitle/OnboardTitleProps.generated.ts

@@ -19,6 +19,7 @@ export interface OnboardTitlePropsGenerated {
       | '700'
       | '800'
       | '900';
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
     scrollable?: boolean;
     flexDirection?: 'row' | 'column';
     alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';

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

@@ -2,28 +2,19 @@ import React from 'react';
 import type { TextComponentProps } from './TextProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
-import { fs, parseSize } from '../../size-matters';
+import { extractTextStyle } from '../../utils/extractTextStyle';
 
 function Text({ node }: TextComponentProps) {
   node = useNode(node);
-  const { screenStyle, theme } = useRenderStore((s) => ({
-    screenStyle: s.screenStyle,
-    theme: s.theme,
-  }));
-  const color =
-    theme === 'light' ? screenStyle.light.color : screenStyle.dark.color;
   const { defaultLanguage, localication } = useRenderStore((s) => ({
     defaultLanguage: s.defaultLanguage,
     localication: s.localication,
   }));
   const keyOrText: string = node.children as string;
-  const style = (node.attributes as React.CSSProperties) ?? {};
-  const fontSize = node.attributes?.fontSize
-    ? parseSize(node.attributes.fontSize)
-    : fs(14);
+  const style = extractTextStyle(node);
 
   return (
-    <p style={{ ...style, fontSize, color: style.color ?? color }}>
+    <p style={style}>
       {localication?.[defaultLanguage ?? 'en']?.[keyOrText] ?? keyOrText}
     </p>
   );

package/src/build-components/Text/TextProps.generated.ts

@@ -48,6 +48,7 @@ export interface TextPropsGenerated {
       | '700'
       | '800'
       | '900';
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
   };
 }
 

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

@@ -20,8 +20,8 @@
         "700",
         "800",
         "900"
-      ]
-    },
-    "textAlign": ["left", "center", "right", "justify"]
+      ],
+      "textAlign": ["left", "center", "right", "justify"]
+    }
   }
 }

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

@@ -6,55 +6,12 @@ import type {
 import RenderNode from '../RenderNode.generated';
 import { Node } from '../../types/Node';
 import useNode from '../useNode';
-
-function mapAttributesToStyle(
-  attributes: ViewPropsGenerated['attributes'],
-): React.CSSProperties {
-  const scrollable = attributes?.scrollable ?? false;
-  const style: React.CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-  };
-  if (!attributes) return style;
-  if (scrollable) {
-    if (attributes.flexDirection === 'row') {
-      style.overflowX = 'auto';
-      style.overflowY = 'hidden';
-      style.maxWidth = '100%';
-      style.maxHeight = '100%';
-    } else {
-      style.overflowY = 'auto';
-      style.overflowX = 'hidden';
-      style.maxHeight = '100%';
-      style.maxWidth = '100%';
-    }
-  }
-  if (attributes.flexDirection) style.flexDirection = attributes.flexDirection;
-  if (attributes.alignItems)
-    style.alignItems =
-      attributes.alignItems as React.CSSProperties['alignItems'];
-  if (attributes.justifyContent)
-    style.justifyContent =
-      attributes.justifyContent as React.CSSProperties['justifyContent'];
-  if (attributes.gap !== undefined) style.gap = attributes.gap;
-  if (attributes.padding !== undefined) style.padding = attributes.padding;
-  if (attributes.margin !== undefined) style.margin = attributes.margin;
-  if (attributes.backgroundColor)
-    style.backgroundColor = attributes.backgroundColor;
-  if (attributes.borderRadius !== undefined)
-    style.borderRadius = attributes.borderRadius;
-  if (attributes.width !== undefined) style.width = attributes.width;
-  if (attributes.height !== undefined) style.height = attributes.height;
-  return style;
-}
+import { extractViewStyle } from '../../utils/extractViewStyle';
 
 export function View({ node }: ViewComponentProps) {
   node = useNode(node);
   return (
-    <div
-      style={mapAttributesToStyle(node.attributes ?? {})}
-      className="scroll-container"
-    >
+    <div style={extractViewStyle(node)} className="scroll-container">
       <RenderNode node={node.children as Node} />
     </div>
   );

package/src/build-components/patterns.generated.ts

@@ -111,7 +111,6 @@ export const patterns = [
         animation_color: 'string',
         button_background_color: 'string',
         flex: 'number',
-        targetIndex: 'number',
         events: 'EventObject[]',
       },
     },
@@ -185,6 +184,7 @@ export const patterns = [
           '800',
           '900',
         ],
+        textAlign: ['left', 'center', 'right', 'justify'],
         scrollable: 'boolean',
         flexDirection: ['row', 'column'],
         alignItems: ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'],
@@ -223,7 +223,6 @@ export const patterns = [
         linkedWordSecondColor: 'string',
         linkedWordSecondPage: 'string',
       },
-      textAlign: ['left', 'center', 'right', 'justify'],
     },
     defaults: { paddingHorizontal: '24@s' },
     types: {},
@@ -307,6 +306,7 @@ export const patterns = [
           '800',
           '900',
         ],
+        textAlign: ['left', 'center', 'right', 'justify'],
         scrollable: 'boolean',
         flexDirection: ['row', 'column'],
         alignItems: ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'],
@@ -338,7 +338,6 @@ export const patterns = [
         width: 'number',
         height: 'number',
       },
-      textAlign: ['left', 'center', 'right', 'justify'],
     },
     defaults: { fontSize: '14@fs', fontWeight: '600' },
     types: {},
@@ -365,6 +364,7 @@ export const patterns = [
           '800',
           '900',
         ],
+        textAlign: ['left', 'center', 'right', 'justify'],
         scrollable: 'boolean',
         flexDirection: ['row', 'column'],
         alignItems: ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'],
@@ -396,7 +396,6 @@ export const patterns = [
         width: 'number',
         height: 'number',
       },
-      textAlign: ['left', 'center', 'right', 'justify'],
     },
     defaults: { fontSize: '24@fs', fontWeight: '700', textAlign: 'center' },
     types: {},
@@ -453,8 +452,8 @@ export const patterns = [
           '800',
           '900',
         ],
+        textAlign: ['left', 'center', 'right', 'justify'],
       },
-      textAlign: ['left', 'center', 'right', 'justify'],
     },
     types: {},
     defaults: {},

package/src/build-components/useNode.ts

@@ -6,7 +6,6 @@ export default function useNode<
 >(node: NodeData<T>): NodeData<T> {
   const type = node?.type;
   const defaults = getDefaultsForType(type) as Partial<T> | undefined;
-  console.log('defaults', type, defaults);
   if (!defaults) return node;
   const mergedAttributes: T = {
     ...(defaults as T),

package/src/index.ts

@@ -25,3 +25,6 @@ export { AttributesEditor };
 export * from './build-components/index';
 export { default as useNode } from './build-components/useNode';
 export { querySelector } from './utils/querySelector';
+export { extractViewStyle } from './utils/extractViewStyle';
+export { extractImageStyle } from './utils/extractImageStyle';
+export { extractTextStyle } from './utils/extractTextStyle';

package/src/utils/extractImageStyle.ts

@@ -0,0 +1,24 @@
+import { ImagePropsGenerated } from '../build-components/Image/ImageProps.generated';
+import type { NodeData } from '../types/Node';
+
+export function extractImageStyle<T extends ImagePropsGenerated['attributes']>(
+  node: NodeData<T>,
+) {
+  const attributes = node.attributes;
+  const style: React.CSSProperties = {};
+
+  if (!attributes) return style;
+
+  if (attributes.width !== undefined) style.width = attributes.width;
+  if (attributes.height !== undefined) style.height = attributes.height;
+  if (attributes.borderRadius !== undefined)
+    style.borderRadius = attributes.borderRadius;
+
+  // Map resizeMode to CSS object-fit
+  if (attributes.resizeMode === 'cover') style.objectFit = 'cover';
+  else if (attributes.resizeMode === 'contain') style.objectFit = 'contain';
+  else if (attributes.resizeMode === 'stretch') style.objectFit = 'fill';
+  else if (attributes.resizeMode === 'center') style.objectFit = 'none';
+
+  return style;
+}

package/src/utils/extractTextStyle.ts

@@ -0,0 +1,109 @@
+import type { NodeData } from '../types/Node';
+import type { TextPropsGenerated } from '../build-components/Text/TextProps.generated';
+import { fs, parseSize } from '../size-matters';
+import { useRenderStore } from '../store';
+
+export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
+  node: NodeData<T>,
+) {
+  const attributes = node.attributes;
+
+  const { screenStyle, theme } = useRenderStore.getState();
+  const fallbackColor =
+    theme === 'light' ? screenStyle.light.color : screenStyle.dark.color;
+
+  const style: React.CSSProperties = {};
+
+  if (!attributes) {
+    style.fontSize = fs(14);
+    style.color = fallbackColor;
+    return style;
+  }
+
+  // Typography
+  if (attributes.fontSize !== undefined) {
+    const parsed = parseSize(attributes.fontSize);
+    style.fontSize = parsed as React.CSSProperties['fontSize'];
+  } else {
+    style.fontSize = fs(14);
+  }
+  if (attributes.fontWeight) style.fontWeight = attributes.fontWeight;
+  style.color = attributes.color ?? fallbackColor;
+  if (attributes.textAlign)
+    style.textAlign = attributes.textAlign as React.CSSProperties['textAlign'];
+
+  // Spacing
+  // Shorthand
+  if (attributes.padding !== undefined) style.padding = attributes.padding;
+  if (attributes.margin !== undefined) style.margin = attributes.margin;
+
+  // Axis shorthands
+  if (attributes.paddingHorizontal !== undefined) {
+    const v = parseSize(attributes.paddingHorizontal);
+    style.paddingLeft = v as React.CSSProperties['paddingLeft'];
+    style.paddingRight = v as React.CSSProperties['paddingRight'];
+  }
+  if (attributes.paddingVertical !== undefined) {
+    const v = parseSize(attributes.paddingVertical);
+    style.paddingTop = v as React.CSSProperties['paddingTop'];
+    style.paddingBottom = v as React.CSSProperties['paddingBottom'];
+  }
+  if (attributes.marginHorizontal !== undefined) {
+    const v = parseSize(attributes.marginHorizontal);
+    style.marginLeft = v as React.CSSProperties['marginLeft'];
+    style.marginRight = v as React.CSSProperties['marginRight'];
+  }
+  if (attributes.marginVertical !== undefined) {
+    const v = parseSize(attributes.marginVertical);
+    style.marginTop = v as React.CSSProperties['marginTop'];
+    style.marginBottom = v as React.CSSProperties['marginBottom'];
+  }
+
+  // Edges
+  if (attributes.paddingTop !== undefined)
+    style.paddingTop = parseSize(
+      attributes.paddingTop,
+    ) as React.CSSProperties['paddingTop'];
+  if (attributes.paddingBottom !== undefined)
+    style.paddingBottom = parseSize(
+      attributes.paddingBottom,
+    ) as React.CSSProperties['paddingBottom'];
+  if (attributes.paddingLeft !== undefined)
+    style.paddingLeft = parseSize(
+      attributes.paddingLeft,
+    ) as React.CSSProperties['paddingLeft'];
+  if (attributes.paddingRight !== undefined)
+    style.paddingRight = parseSize(
+      attributes.paddingRight,
+    ) as React.CSSProperties['paddingRight'];
+
+  if (attributes.marginTop !== undefined)
+    style.marginTop = parseSize(
+      attributes.marginTop,
+    ) as React.CSSProperties['marginTop'];
+  if (attributes.marginBottom !== undefined)
+    style.marginBottom = parseSize(
+      attributes.marginBottom,
+    ) as React.CSSProperties['marginBottom'];
+  if (attributes.marginLeft !== undefined)
+    style.marginLeft = parseSize(
+      attributes.marginLeft,
+    ) as React.CSSProperties['marginLeft'];
+  if (attributes.marginRight !== undefined)
+    style.marginRight = parseSize(
+      attributes.marginRight,
+    ) as React.CSSProperties['marginRight'];
+
+  // Decor
+  if (attributes.backgroundColor)
+    style.backgroundColor = attributes.backgroundColor;
+  if (attributes.borderRadius !== undefined)
+    style.borderRadius =
+      attributes.borderRadius as React.CSSProperties['borderRadius'];
+
+  // Dimensions (rare for text but supported by schema)
+  if (attributes.width !== undefined) style.width = attributes.width;
+  if (attributes.height !== undefined) style.height = attributes.height;
+
+  return style;
+}

package/src/utils/extractViewStyle.ts

@@ -0,0 +1,44 @@
+import { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
+import type { NodeData } from '../types/Node';
+
+export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
+  node: NodeData<T>,
+) {
+  const attributes = node.attributes;
+  const scrollable = attributes?.scrollable ?? false;
+  const style: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+  };
+  if (!attributes) return style;
+  if (scrollable) {
+    if (attributes.flexDirection === 'row') {
+      style.overflowX = 'auto';
+      style.overflowY = 'hidden';
+      style.maxWidth = '100%';
+      style.maxHeight = '100%';
+    } else {
+      style.overflowY = 'auto';
+      style.overflowX = 'hidden';
+      style.maxHeight = '100%';
+      style.maxWidth = '100%';
+    }
+  }
+  if (attributes.flexDirection) style.flexDirection = attributes.flexDirection;
+  if (attributes.alignItems)
+    style.alignItems =
+      attributes.alignItems as React.CSSProperties['alignItems'];
+  if (attributes.justifyContent)
+    style.justifyContent =
+      attributes.justifyContent as React.CSSProperties['justifyContent'];
+  if (attributes.gap !== undefined) style.gap = attributes.gap;
+  if (attributes.padding !== undefined) style.padding = attributes.padding;
+  if (attributes.margin !== undefined) style.margin = attributes.margin;
+  if (attributes.backgroundColor)
+    style.backgroundColor = attributes.backgroundColor;
+  if (attributes.borderRadius !== undefined)
+    style.borderRadius = attributes.borderRadius;
+  if (attributes.width !== undefined) style.width = attributes.width;
+  if (attributes.height !== undefined) style.height = attributes.height;
+  return style;
+}

package/src/utils/novaToJson.ts

@@ -208,7 +208,7 @@ function buildCarouselItem(
         const animationColor = attrs?.animation_color as string | undefined;
         const flex = attrs?.flex ? Number(attrs.flex) : undefined;
 
-        // Find first Navigate event and map to target index
+        // Normalize events and compute Navigate target indices when resolvable
         let targetIndex: number | undefined = undefined;
         //@eslint-disable-next-line @typescript-eslint/no-explicit-any
         const actions = (attrs?.actions || []) as any[];
@@ -216,6 +216,7 @@ function buildCarouselItem(
           type: 'Permission' | 'Navigate';
           permission?: string;
           navigate_to?: string | null;
+          targetIndex?: number;
         }[] = [];
         for (const action of actions) {
           //@eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -241,6 +242,9 @@ function buildCarouselItem(
               normalizedEvents.push({
                 type: 'Navigate',
                 navigate_to,
+                ...(hasTarget
+                  ? { targetIndex: pageKeyToIndex.get(nextKey!)! }
+                  : {}),
               });
               if (hasTarget) {
                 targetIndex = pageKeyToIndex.get(nextKey!)!;
@@ -264,7 +268,6 @@ function buildCarouselItem(
               ? { button_background_color: buttonBackgroundColor }
               : {}),
             ...(typeof flex === 'number' ? { flex } : {}),
-            ...(typeof targetIndex === 'number' ? { targetIndex } : {}),
             ...(normalizedEvents.length ? { events: normalizedEvents } : {}),
           },
           children: undefined as unknown as Node,