@developer_tribe/react-builder 0.1.27 → 0.1.29

package/src/build-components/View/ViewProps.generated.ts

@@ -15,11 +15,23 @@ export interface ViewPropsGenerated {
       | 'space-between'
       | 'space-around'
       | 'space-evenly';
-    gap?: number;
+    gap?: string;
     padding?: number;
-    margin?: number;
+    paddingHorizontal?: string;
+    paddingVertical?: string;
+    paddingTop?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    margin?: string;
+    marginHorizontal?: string;
+    marginVertical?: string;
+    marginTop?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    marginRight?: string;
     backgroundColor?: string;
-    borderRadius?: number;
+    borderRadius?: string;
     width?: number;
     height?: number;
   };

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

@@ -16,11 +16,23 @@
         "space-around",
         "space-evenly"
       ],
-      "gap": "number",
+      "gap": "string",
       "padding": "number",
-      "margin": "number",
+      "paddingHorizontal": "string",
+      "paddingVertical": "string",
+      "paddingTop": "string",
+      "paddingBottom": "string",
+      "paddingLeft": "string",
+      "paddingRight": "string",
+      "margin": "string",
+      "marginHorizontal": "string",
+      "marginVertical": "string",
+      "marginTop": "string",
+      "marginBottom": "string",
+      "marginLeft": "string",
+      "marginRight": "string",
       "backgroundColor": "string",
-      "borderRadius": "number",
+      "borderRadius": "string",
       "width": "number",
       "height": "number"
     }

package/src/build-components/index.ts

@@ -2,6 +2,8 @@
 
 export { default as RenderNode } from './RenderNode.generated';
 
+export { patterns } from './patterns.generated';
+
 export type {
   ButtonPropsGenerated,
   ButtonComponentProps,

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

@@ -0,0 +1,502 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+// Export resolved patterns (after extends resolution)
+export const patterns = [
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: {
+      type: 'button',
+      children: 'string',
+      attributes: {
+        color: 'string',
+        fontSize: 'number',
+        fontWeight: [
+          'normal',
+          'bold',
+          '100',
+          '200',
+          '300',
+          '400',
+          '500',
+          '600',
+          '700',
+          '800',
+          '900',
+        ],
+      },
+    },
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: { type: 'carousel', children: 'carouselItem', attributes: {} },
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: {
+      type: 'carouselButtons',
+      children: 'never',
+      attributes: {
+        buttonType: ['previous_button', 'next_button', 'skip_button'],
+        skipNumber: 'number',
+      },
+    },
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: {
+      type: 'carouselDots',
+      children: 'never',
+      attributes: {
+        dotType: [
+          'expanding_dot',
+          'normal_dot',
+          'scaling_dot',
+          'sliding_border',
+          'sliding_dot',
+          'liquid_like',
+        ],
+      },
+    },
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: { type: 'carouselItem', children: 'node', attributes: {} },
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: { type: 'carouselProvider', children: 'node', attributes: {} },
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: {
+      type: 'image',
+      children: 'never',
+      attributes: {
+        src: 'string',
+        width: 'number',
+        height: 'number',
+        resizeMode: ['cover', 'contain', 'stretch', 'center'],
+        borderRadius: 'number',
+      },
+    },
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: { type: 'Onboard', children: 'node', attributes: {} },
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: {
+      type: 'OnboardButton',
+      children: 'never',
+      attributes: {
+        labelKey: 'string',
+        button_text_color: 'string',
+        animation: [
+          'simple-animation',
+          'line-animation',
+          'blur',
+          'blur-animation',
+          'blur-line-animation',
+        ],
+        animation_color: 'string',
+        button_background_color: 'string',
+        flex: 'number',
+        targetIndex: 'number',
+        events: 'EventObject[]',
+      },
+    },
+    types: {
+      EventObject: {
+        type: ['Permission', 'Navigate'],
+        permission: ['att', 'notification', 'rating', 'null'],
+        navigate_to: ['string', 'null'],
+      },
+    },
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: {
+      type: 'OnboardButtons',
+      children: 'node',
+      attributes: {
+        buttonType: ['previous_button', 'next_button', 'skip_button'],
+        skipNumber: 'number',
+        buttons_direction: ['row', 'column'],
+        forIndex: 'number',
+        seperatorColor: 'string',
+        condition: ['carousel-index'],
+        conditionVariable: 'number',
+      },
+    },
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: {
+      type: 'OnboardDot',
+      children: 'node',
+      attributes: {
+        dotType: [
+          'expanding_dot',
+          'normal_dot',
+          'scaling_dot',
+          'sliding_border',
+          'sliding_dot',
+          'liquid_like',
+        ],
+        inactive_dot_opacity: 'number',
+        expanding_dot_width: 'number',
+        dot_style: 'string',
+        container_style: 'string',
+        active_dot_color: 'string',
+      },
+    },
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: {
+      type: 'OnboardFooter',
+      children: 'node',
+      attributes: {
+        color: 'string',
+        fontSize: 'number',
+        fontWeight: [
+          'normal',
+          'bold',
+          '100',
+          '200',
+          '300',
+          '400',
+          '500',
+          '600',
+          '700',
+          '800',
+          '900',
+        ],
+        scrollable: 'boolean',
+        flexDirection: ['row', 'column'],
+        alignItems: ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'],
+        justifyContent: [
+          'flex-start',
+          'center',
+          'flex-end',
+          'space-between',
+          'space-around',
+          'space-evenly',
+        ],
+        gap: 'string',
+        padding: 'number',
+        paddingHorizontal: 'string',
+        paddingVertical: 'string',
+        paddingTop: 'string',
+        paddingBottom: 'string',
+        paddingLeft: 'string',
+        paddingRight: 'string',
+        margin: 'string',
+        marginHorizontal: 'string',
+        marginVertical: 'string',
+        marginTop: 'string',
+        marginBottom: 'string',
+        marginLeft: 'string',
+        marginRight: 'string',
+        backgroundColor: 'string',
+        borderRadius: 'string',
+        width: 'number',
+        height: 'number',
+        textLocalizationKey: 'string',
+        linkedWordFirstLocalizationKey: 'string',
+        linkedWordFirstColor: 'string',
+        linkedWordFirstPage: 'string',
+        linkedWordSecondLocalizationKey: 'string',
+        linkedWordSecondColor: 'string',
+        linkedWordSecondPage: 'string',
+      },
+      textAlign: ['left', 'center', 'right', 'justify'],
+    },
+    defaults: { paddingHorizontal: '24@s' },
+    types: {},
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: {
+      type: 'OnboardImage',
+      children: 'node',
+      attributes: {
+        src: 'string',
+        width: 'number',
+        height: 'number',
+        resizeMode: ['cover', 'contain', 'stretch', 'center'],
+        borderRadius: 'number',
+      },
+    },
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: {
+      type: 'OnboardItem',
+      children: 'node',
+      attributes: {
+        display: ['flex', 'block'],
+        gap: 'string',
+        flexDirection: ['row', 'column'],
+        paddingHorizontal: 'string',
+      },
+    },
+    defaults: {
+      gap: '16@vs',
+      display: 'flex',
+      flexDirection: 'column',
+      paddingHorizontal: '24@s',
+    },
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: {
+      type: 'OnboardProvider',
+      children: 'node',
+      attributes: {
+        theme: 'string',
+        use_safe_area_inset: 'boolean',
+        paddingTop: 'number',
+        paddingRight: 'number',
+        paddingBottom: 'number',
+        paddingLeft: 'number',
+      },
+    },
+    defaults: {
+      paddingTop: 0,
+      paddingRight: 0,
+      paddingBottom: 8,
+      paddingLeft: 0,
+    },
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: {
+      type: 'OnboardSubtitle',
+      children: 'node',
+      attributes: {
+        color: 'string',
+        fontSize: 'number',
+        fontWeight: [
+          'normal',
+          'bold',
+          '100',
+          '200',
+          '300',
+          '400',
+          '500',
+          '600',
+          '700',
+          '800',
+          '900',
+        ],
+        scrollable: 'boolean',
+        flexDirection: ['row', 'column'],
+        alignItems: ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'],
+        justifyContent: [
+          'flex-start',
+          'center',
+          'flex-end',
+          'space-between',
+          'space-around',
+          'space-evenly',
+        ],
+        gap: 'string',
+        padding: 'number',
+        paddingHorizontal: 'string',
+        paddingVertical: 'string',
+        paddingTop: 'string',
+        paddingBottom: 'string',
+        paddingLeft: 'string',
+        paddingRight: 'string',
+        margin: 'string',
+        marginHorizontal: 'string',
+        marginVertical: 'string',
+        marginTop: 'string',
+        marginBottom: 'string',
+        marginLeft: 'string',
+        marginRight: 'string',
+        backgroundColor: 'string',
+        borderRadius: 'string',
+        width: 'number',
+        height: 'number',
+      },
+      textAlign: ['left', 'center', 'right', 'justify'],
+    },
+    defaults: { fontSize: '14@fs', fontWeight: '600' },
+    types: {},
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: {
+      type: 'OnboardTitle',
+      children: 'node',
+      attributes: {
+        color: 'string',
+        fontSize: 'number',
+        fontWeight: [
+          'normal',
+          'bold',
+          '100',
+          '200',
+          '300',
+          '400',
+          '500',
+          '600',
+          '700',
+          '800',
+          '900',
+        ],
+        scrollable: 'boolean',
+        flexDirection: ['row', 'column'],
+        alignItems: ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'],
+        justifyContent: [
+          'flex-start',
+          'center',
+          'flex-end',
+          'space-between',
+          'space-around',
+          'space-evenly',
+        ],
+        gap: 'string',
+        padding: 'number',
+        paddingHorizontal: 'string',
+        paddingVertical: 'string',
+        paddingTop: 'string',
+        paddingBottom: 'string',
+        paddingLeft: 'string',
+        paddingRight: 'string',
+        margin: 'string',
+        marginHorizontal: 'string',
+        marginVertical: 'string',
+        marginTop: 'string',
+        marginBottom: 'string',
+        marginLeft: 'string',
+        marginRight: 'string',
+        backgroundColor: 'string',
+        borderRadius: 'string',
+        width: 'number',
+        height: 'number',
+      },
+      textAlign: ['left', 'center', 'right', 'justify'],
+    },
+    defaults: { fontSize: '24@fs', fontWeight: '700', textAlign: 'center' },
+    types: {},
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: {
+      type: 'text',
+      children: 'string',
+      attributes: {
+        scrollable: 'boolean',
+        flexDirection: ['row', 'column'],
+        alignItems: ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'],
+        justifyContent: [
+          'flex-start',
+          'center',
+          'flex-end',
+          'space-between',
+          'space-around',
+          'space-evenly',
+        ],
+        gap: 'string',
+        padding: 'number',
+        paddingHorizontal: 'string',
+        paddingVertical: 'string',
+        paddingTop: 'string',
+        paddingBottom: 'string',
+        paddingLeft: 'string',
+        paddingRight: 'string',
+        margin: 'string',
+        marginHorizontal: 'string',
+        marginVertical: 'string',
+        marginTop: 'string',
+        marginBottom: 'string',
+        marginLeft: 'string',
+        marginRight: 'string',
+        backgroundColor: 'string',
+        borderRadius: 'string',
+        width: 'number',
+        height: 'number',
+        color: 'string',
+        fontSize: 'number',
+        fontWeight: [
+          'normal',
+          'bold',
+          '100',
+          '200',
+          '300',
+          '400',
+          '500',
+          '600',
+          '700',
+          '800',
+          '900',
+        ],
+      },
+      textAlign: ['left', 'center', 'right', 'justify'],
+    },
+    types: {},
+    defaults: {},
+  },
+  {
+    schemaVersion: 1,
+    allowUnknownAttributes: false,
+    pattern: {
+      type: 'view',
+      children: ['node', 'array'],
+      attributes: {
+        scrollable: 'boolean',
+        flexDirection: ['row', 'column'],
+        alignItems: ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'],
+        justifyContent: [
+          'flex-start',
+          'center',
+          'flex-end',
+          'space-between',
+          'space-around',
+          'space-evenly',
+        ],
+        gap: 'string',
+        padding: 'number',
+        paddingHorizontal: 'string',
+        paddingVertical: 'string',
+        paddingTop: 'string',
+        paddingBottom: 'string',
+        paddingLeft: 'string',
+        paddingRight: 'string',
+        margin: 'string',
+        marginHorizontal: 'string',
+        marginVertical: 'string',
+        marginTop: 'string',
+        marginBottom: 'string',
+        marginLeft: 'string',
+        marginRight: 'string',
+        backgroundColor: 'string',
+        borderRadius: 'string',
+        width: 'number',
+        height: 'number',
+      },
+    },
+  },
+] as const;

package/src/build-components/useNode.ts

@@ -6,6 +6,7 @@ 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

@@ -16,11 +16,10 @@ export { getBasicSamples } from './assets/samples/getSamples';
 export { getOnboardSamples } from './assets/samples/getSamples';
 export { PreviewConfig } from './types/PreviewConfig';
 export { RenderPage } from './RenderPage';
-export { RenderMainNode } from './RenderMainNode';
 export { DeviceMockFrame } from './DeviceMockFrame';
 export { novaToJson } from './utils/novaToJson';
 export type { Localication } from './types/PreviewConfig';
-export { getDevices } from './utils/getDevices';
+export { getDevices, getDefaultDevice } from './utils/getDevices';
 export type { Device } from './types/Device';
 export { AttributesEditor };
 export * from './build-components/index';

package/src/size-matters/index.ts

@@ -0,0 +1,64 @@
+import { useRenderStore } from '../store';
+
+function getBaseDimensions() {
+  const currentState = useRenderStore.getState();
+  let device = currentState.device;
+  const [shortDimension, longDimension] =
+    device.width < device.height
+      ? [device.width, device.height]
+      : [device.height, device.width];
+
+  return { baseSize: currentState.baseSize, shortDimension, longDimension };
+}
+export function scale(size: number) {
+  const { baseSize, shortDimension } = getBaseDimensions();
+  return (shortDimension / baseSize.width) * size;
+}
+export function verticalScale(size: number) {
+  const { baseSize, longDimension } = getBaseDimensions();
+  return (longDimension / baseSize.height) * size;
+}
+
+export const s = scale;
+export const vs = verticalScale;
+export const fs = verticalScale;
+
+export function parseSize(value?: string | number) {
+  if (value === undefined) return undefined;
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  const raw = String(value).trim();
+  const lower = raw.toLowerCase();
+
+  // Handle explicit scalers via suffixes
+  if (lower.endsWith('@s')) {
+    const n = parseFloat(lower.slice(0, -2));
+    return Number.isFinite(n) ? s(n) : raw;
+  }
+  if (lower.endsWith('@vs')) {
+    const n = parseFloat(lower.slice(0, -3));
+    return Number.isFinite(n) ? vs(n) : raw;
+  }
+  if (lower.endsWith('@f') || lower.endsWith('@fs')) {
+    const cut = lower.endsWith('@f') ? -2 : -3;
+    const n = parseFloat(lower.slice(0, cut));
+    return Number.isFinite(n) ? fs(n) : raw;
+  }
+
+  // Handle px explicitly (treat as absolute, not scaled)
+  if (lower.endsWith('px')) {
+    const n = parseFloat(lower.replace('px', ''));
+    return Number.isFinite(n) ? n : raw;
+  }
+
+  // Plain numeric strings fall back to provided scaler
+  const numeric = parseFloat(lower);
+  if (Number.isFinite(numeric)) {
+    return numeric;
+  }
+
+  // Unknown format, return as-is
+  return raw;
+}