@developer_tribe/react-builder 1.0.3 → 1.0.4

package/src/attributes-editor/SizeField.tsx

@@ -0,0 +1,184 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+type SizeUnit = '' | 'vs' | 's' | 'f' | '%';
+type SizeSelectUnit = SizeUnit | 'auto';
+
+export type PreferredScale = 'vs' | 's' | 'f' | '%';
+
+export function toPreferredScale(value: unknown): PreferredScale | undefined {
+  if (value === 'vs' || value === 's' || value === 'f' || value === '%') {
+    return value;
+  }
+  if (typeof value !== 'string') return undefined;
+  const normalized = value.trim().toLowerCase();
+  return normalized === 'vs' ||
+    normalized === 's' ||
+    normalized === 'f' ||
+    normalized === '%'
+    ? (normalized as PreferredScale)
+    : undefined;
+}
+
+export type SizeFieldProps = {
+  value: unknown;
+  onChange: (val: unknown) => void;
+  preferredScale?: PreferredScale;
+  fieldName: string;
+};
+
+function parseSizeValue(value: unknown): { amount: string; unit: SizeUnit } {
+  const empty = { amount: '', unit: '' as SizeUnit };
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return { amount: String(value), unit: '' };
+  }
+  if (typeof value !== 'string') return empty;
+  const trimmed = value.trim();
+  if (!trimmed) return empty;
+  if (trimmed.endsWith('%')) {
+    return { amount: trimmed.slice(0, -1), unit: '%' };
+  }
+  const lower = trimmed.toLowerCase();
+  if (lower.endsWith('@vs'))
+    return { amount: trimmed.slice(0, -3), unit: 'vs' };
+  if (lower.endsWith('vs')) return { amount: trimmed.slice(0, -2), unit: 'vs' };
+  if (lower.endsWith('@fs')) return { amount: trimmed.slice(0, -3), unit: 'f' };
+  if (lower.endsWith('@f')) return { amount: trimmed.slice(0, -2), unit: 'f' };
+  if (lower.endsWith('fs')) return { amount: trimmed.slice(0, -2), unit: 'f' };
+  if (lower.endsWith('f')) return { amount: trimmed.slice(0, -1), unit: 'f' };
+  if (lower.endsWith('@s')) return { amount: trimmed.slice(0, -2), unit: 's' };
+  if (lower.endsWith('s')) return { amount: trimmed.slice(0, -1), unit: 's' };
+  if (lower.endsWith('px')) return { amount: trimmed.slice(0, -2), unit: '' };
+  return { amount: trimmed, unit: '' };
+}
+
+function composeSizeValue(amount: string, unit: SizeUnit): string | number {
+  const trimmed = amount.trim();
+  if (unit === '%') {
+    return `${trimmed}%`;
+  }
+  if (unit === '') {
+    const numeric = Number(trimmed);
+    return Number.isFinite(numeric) ? numeric : trimmed;
+  }
+  if (unit === 'f') {
+    return `${trimmed}@fs`;
+  }
+  return `${trimmed}@${unit}`;
+}
+
+function normalizePreferredScale(
+  preferredScale: PreferredScale | undefined,
+  fieldName: string,
+): SizeUnit {
+  const fallbackName = fieldName.trim().toLowerCase();
+  const fallback: SizeUnit =
+    fallbackName.includes('height') ||
+    fallbackName.includes('top') ||
+    fallbackName.includes('vertical')
+      ? 'vs'
+      : 's';
+  return preferredScale ?? fallback;
+}
+
+export function SizeField({
+  value,
+  onChange,
+  preferredScale,
+  fieldName,
+}: SizeFieldProps) {
+  const parsed = useMemo(() => parseSizeValue(value), [value]);
+  const normalizedPreferred = useMemo(
+    () => normalizePreferredScale(preferredScale, fieldName),
+    [preferredScale, fieldName],
+  );
+
+  const [amount, setAmount] = useState(parsed.amount);
+  const [unit, setUnit] = useState<SizeSelectUnit>(() => {
+    // Default to "auto" when the stored unit is already the preferred one (or empty)
+    // so that "auto" means "use preferredScale" without changing behavior.
+    return parsed.unit && parsed.unit !== normalizedPreferred
+      ? parsed.unit
+      : 'auto';
+  });
+
+  useEffect(() => {
+    setAmount(parsed.amount);
+
+    // Keep "auto" selected whenever value is preferred (or unscaled).
+    const nextUnit: SizeSelectUnit =
+      parsed.unit && parsed.unit !== normalizedPreferred ? parsed.unit : 'auto';
+    setUnit(nextUnit);
+  }, [parsed.amount, parsed.unit, normalizedPreferred]);
+
+  const resolveUnit = useCallback(
+    (nextUnit: SizeSelectUnit): SizeUnit =>
+      nextUnit === 'auto' ? normalizedPreferred : nextUnit,
+    [normalizedPreferred],
+  );
+
+  const emitValue = useCallback(
+    (nextAmount: string, nextUnit: SizeSelectUnit) => {
+      const trimmed = nextAmount.trim();
+      if (!trimmed) {
+        onChange(undefined);
+        return;
+      }
+      // If "auto" is selected, persist the preferredScale.
+      onChange(composeSizeValue(trimmed, resolveUnit(nextUnit)));
+    },
+    [onChange, resolveUnit],
+  );
+
+  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const nextAmount = e.target.value;
+    setAmount(nextAmount);
+    if (!nextAmount.trim()) {
+      onChange(undefined);
+      return;
+    }
+    emitValue(nextAmount, unit);
+  };
+
+  const handleUnitChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const nextUnit = e.target.value as SizeSelectUnit;
+    setUnit(nextUnit);
+    if (!amount.trim()) return;
+    emitValue(amount, nextUnit);
+  };
+
+  const unitPriority: SizeUnit[] = ['vs', 's', 'f', '%'];
+  const orderedUnits = [
+    normalizedPreferred,
+    ...unitPriority.filter((u) => u !== normalizedPreferred),
+  ];
+
+  const unitOptions: Array<{ value: SizeSelectUnit; label: string }> = [
+    { value: 'auto', label: 'auto' },
+    ...orderedUnits.map((u) => ({
+      value: u,
+      label: u === normalizedPreferred ? `${u} (preferred)` : u,
+    })),
+  ];
+
+  return (
+    <div className="attributes-editor__size-field">
+      <input
+        type="number"
+        className="input attributes-editor__size-field-input"
+        value={amount}
+        onChange={handleAmountChange}
+      />
+      <select
+        className="input attributes-editor__size-field-select"
+        value={unit}
+        onChange={handleUnitChange}
+      >
+        {unitOptions.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

package/src/attributes-editor/SpecialCategorySection.tsx

@@ -3,6 +3,7 @@ import { NodeDefaultAttribute } from '../types/Node';
 import type { ProjectColors } from '../types/Project';
 import { Field } from './Field';
 import { FieldInfoTooltip } from './FieldInfoTooltip';
+import { toPreferredScale } from './SizeField';
 import {
   AttributeMetaMap,
   LayoutContext,
@@ -92,7 +93,9 @@ export function SpecialCategorySection({
         {entries.map(({ name, type }) => {
           const label = attributeMeta?.[name]?.label ?? name;
           const description = attributeMeta?.[name]?.description;
-          const preferredScale = attributeMeta?.[name]?.preferedScale;
+          const preferredScale = toPreferredScale(
+            attributeMeta?.[name]?.preferedScale,
+          );
           const currentValue = (attributes as Record<string, unknown>)[name];
           const isBoolean = isBooleanFieldType(type);
           const fieldSlot = detectFieldSlot(name);
@@ -169,7 +172,9 @@ export function SpecialCategorySection({
         {boxEntries.map(({ name, type }) => {
           const label = attributeMeta?.[name]?.label ?? name;
           const description = attributeMeta?.[name]?.description;
-          const preferredScale = attributeMeta?.[name]?.preferedScale;
+          const preferredScale = toPreferredScale(
+            attributeMeta?.[name]?.preferedScale,
+          );
           const currentValue = (attributes as Record<string, unknown>)[name];
           const isBoolean = isBooleanFieldType(type);
           const fieldSlot = detectFieldSlot(name);
@@ -212,7 +217,9 @@ export function SpecialCategorySection({
           {baseEntries.map(({ name, type }) => {
             const label = attributeMeta?.[name]?.label ?? name;
             const description = attributeMeta?.[name]?.description;
-            const preferredScale = attributeMeta?.[name]?.preferedScale;
+            const preferredScale = toPreferredScale(
+              attributeMeta?.[name]?.preferedScale,
+            );
             const currentValue = (attributes as Record<string, unknown>)[name];
             const isBoolean = isBooleanFieldType(type);
             const wrapperClassNames = [

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

@@ -4,6 +4,8 @@ import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { extractViewStyle } from '../../utils/extractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 function BackgroundImage({ node }: BackgroundImageComponentProps) {
   useLogRender('BackgroundImage');
@@ -56,25 +58,13 @@ function BackgroundImage({ node }: BackgroundImageComponentProps) {
 
     return style;
   }, [node]);
-  const isSelected =
-    previewMode &&
-    !!current &&
-    (current as any)?.key &&
-    (node as any)?.key &&
-    (current as any).key === (node as any).key;
-
-  const mergedStyle = useMemo(
-    () => ({
-      ...baseStyle,
-      ...backgroundStyle,
-    }),
-    [baseStyle, backgroundStyle],
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const mergedStyle = useMergedStyle(baseStyle, backgroundStyle);
+  const style = useMergedStyle(
+    mergedStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
 
-  const style = isSelected
-    ? { ...mergedStyle, outline: '2px solid #2684FF' }
-    : mergedStyle;
-
   return (
     <div
       attribute-name={attributeName}

package/src/build-components/BackgroundImage/BackgroundImageProps.generated.ts

@@ -44,6 +44,7 @@ export interface BackgroundImagePropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -4,6 +4,8 @@ import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 function Button({ node }: ButtonComponentProps) {
   useLogRender('Button');
@@ -23,15 +25,11 @@ function Button({ node }: ButtonComponentProps) {
     () => extractViewStyle(node, { appConfig, projectColors }),
     [node, appConfig, projectColors],
   );
-  const isSelected =
-    previewMode &&
-    !!current &&
-    (current as any)?.key &&
-    (node as any)?.key &&
-    (current as any).key === (node as any).key;
-  const style = isSelected
-    ? { ...baseStyle, outline: '2px solid #2684FF' }
-    : baseStyle;
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
 
   return (
     <div

package/src/build-components/Button/ButtonProps.generated.ts

@@ -55,6 +55,7 @@ export interface ButtonPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -6,6 +6,8 @@ import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { useLogRender } from '../../utils/useLogRender';
 import { extractViewStyle } from '../../utils/extractViewStyle';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 function Carousel({ node }: CarouselComponentProps) {
   useLogRender('Carousel');
@@ -25,15 +27,11 @@ function Carousel({ node }: CarouselComponentProps) {
     () => extractViewStyle(node, { appConfig, projectColors }),
     [node, appConfig, projectColors],
   );
-  const isSelected =
-    previewMode &&
-    !!current &&
-    (current as any)?.key &&
-    (node as any)?.key &&
-    (current as any).key === (node as any).key;
-  const style = isSelected
-    ? { ...baseStyle, outline: '2px solid #2684FF' }
-    : baseStyle;
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
   // Ensure children are carouselItems
   const renderChildren = () => {
     if (Array.isArray(node.children)) {

package/src/build-components/Carousel/CarouselProps.generated.ts

@@ -43,6 +43,7 @@ export interface CarouselPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

package/src/build-components/CarouselButtons/CarouselButtonsProps.generated.ts

@@ -47,6 +47,7 @@ export interface CarouselButtonsPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

package/src/build-components/CarouselDots/CarouselDotsProps.generated.ts

@@ -50,6 +50,7 @@ export interface CarouselDotsPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

package/src/build-components/CarouselItem/CarouselItemProps.generated.ts

@@ -43,6 +43,7 @@ export interface CarouselItemPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

package/src/build-components/CarouselProvider/CarouselProviderProps.generated.ts

@@ -43,6 +43,7 @@ export interface CarouselProviderPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -3,8 +3,9 @@ import type { ImageComponentProps } from './ImageProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { extractImageStyle } from '../../utils/extractImageStyle';
-import { extractViewStyle } from '../../utils/extractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 function Image({ node }: ImageComponentProps) {
   useLogRender('Image');
@@ -20,30 +21,22 @@ function Image({ node }: ImageComponentProps) {
       projectColors: s.projectColors,
     }),
   );
-  const viewStyle = useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
+  const imageStyle = useMemo(
+    () => extractImageStyle(node, { appConfig, projectColors }),
     [node, appConfig, projectColors],
   );
-  const imageStyle = extractImageStyle(node);
-  const isSelected =
-    previewMode &&
-    !!current &&
-    (current as any)?.key &&
-    (node as any)?.key &&
-    (current as any).key === (node as any).key;
-  const style = {
-    ...viewStyle,
-    ...imageStyle,
-    ...(isSelected ? { outline: '2px solid #2684FF' } : {}),
-  };
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    imageStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
   return (
     <img
-      key={node.key}
+      key={node.key + (node.attributes?.src ?? '-')}
       attribute-name={attributeName}
       attribute-key={attributeKey}
       src={node.attributes?.src}
-      width={node.attributes?.width}
-      height={node.attributes?.height}
       style={style}
       alt=""
     />

package/src/build-components/Image/ImageProps.generated.ts

@@ -44,6 +44,7 @@ export interface ImagePropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -9,8 +9,7 @@
       "src": "string",
       "width": "size",
       "height": "size",
-      "resizeMode": ["cover", "contain", "stretch", "center"],
-      "borderRadius": "size"
+      "resizeMode": ["cover", "contain", "stretch", "center"]
     }
   },
   "meta": {
@@ -45,13 +44,6 @@
         "category": "style",
         "specialCategory": null,
         "sort": 4
-      },
-      "borderRadius": {
-        "label": "Border Radius",
-        "description": "Corner rounding.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 5
       }
     }
   }

package/src/build-components/Onboard/OnboardProps.generated.ts

@@ -43,6 +43,7 @@ export interface OnboardPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;

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

@@ -57,7 +57,6 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
         mockPermissionManager.requestPermission(permission);
         handledEventsRef.current.push(e);
         //TODO: cause user to click second time
-        return;
       } else if (e.type === 'Navigate') {
         const eventTargetIndex = e.targetIndex;
         if (typeof eventTargetIndex === 'number') {
@@ -65,7 +64,6 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
           navigateHandled = true;
           handledEventsRef.current.push(e);
           //TODO: cause user to click second time
-          return;
         } else if (e.navigate_to) {
           const eventTarget = e.navigate_to;
           if (typeof eventTarget === 'string') {
@@ -78,7 +76,6 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
               alert('Mock OS context not available for navigation.');
             }
           }
-          return;
         }
       }
     }

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

@@ -58,6 +58,7 @@ export interface OnboardButtonPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;
@@ -69,7 +70,6 @@ export interface OnboardButtonPropsGenerated {
     animation?: AnimationOptionType;
     animation_color?: string;
     button_background_color?: string;
-    flex?: number;
     events?: EventObjectGenerated[];
   };
 }

package/src/build-components/OnboardButtons/OnboardButtonsProps.generated.ts

@@ -49,6 +49,7 @@ export interface OnboardButtonsPropsGenerated {
     borderRadius?: string;
     width?: string;
     height?: string;
+    flex?: number;
     position?: PositionOptionType;
     top?: string;
     bottom?: string;