@developer_tribe/react-builder 1.0.2 → 1.0.4

package/src/attributes-editor/Field.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
-import { ColorModal } from '../modals/ColorModal';
+import { ColorModal, resolveProjectColorValue } from '../modals/ColorModal';
+import type { ProjectColors } from '../types/Project';
 import {
   getArrayItemType,
   getTypeSchema,
@@ -8,6 +9,7 @@ import {
 } from '../utils/patterns';
 import { Checkbox } from '../components/Checkbox';
 import { LayoutPreviewPicker } from './LayoutPreviewPicker';
+import { SizeField, type PreferredScale } from './SizeField';
 import { LayoutContext, LayoutFieldName, isBooleanFieldType } from './types';
 
 export type FieldProps = {
@@ -16,11 +18,11 @@ export type FieldProps = {
   value: any;
   onChange: (v: any) => void;
   componentType?: string;
-  projectColors?: string[];
+  projectColors?: ProjectColors;
   layoutContext?: LayoutContext;
   viewAttributes?: Partial<ViewPropsGenerated['attributes']>;
   label?: React.ReactNode;
-  preferredScale?: string;
+  preferredScale?: PreferredScale;
 };
 
 const layoutFieldNames: LayoutFieldName[] = [
@@ -250,10 +252,54 @@ export function Field({
                   );
                 })}
               </div>
-              <div style={{ marginTop: 8 }}>
+              <div
+                style={{
+                  marginTop: 8,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  gap: 8,
+                }}
+              >
+                <div style={{ display: 'flex', gap: 4 }}>
+                  <button
+                    type="button"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      if (idx <= 0) return;
+                      const next = [...arr];
+                      const tmp = next[idx - 1];
+                      next[idx - 1] = next[idx];
+                      next[idx] = tmp;
+                      onChange(next);
+                    }}
+                    disabled={idx <= 0}
+                    aria-label="Move up"
+                  >
+                    ↑
+                  </button>
+                  <button
+                    type="button"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      if (idx >= arr.length - 1) return;
+                      const next = [...arr];
+                      const tmp = next[idx + 1];
+                      next[idx + 1] = next[idx];
+                      next[idx] = tmp;
+                      onChange(next);
+                    }}
+                    disabled={idx >= arr.length - 1}
+                    aria-label="Move down"
+                  >
+                    ↓
+                  </button>
+                </div>
+
                 <button
                   type="button"
-                  onClick={() => {
+                  onClick={(event) => {
+                    event.stopPropagation();
                     const next = arr.filter((_, i) => i !== idx);
                     onChange(next.length ? next : undefined);
                   }}
@@ -441,16 +487,22 @@ export function Field({
 type ColorPickerButtonProps = {
   value?: string;
   onChange: (color?: string) => void;
-  projectColors?: string[];
+  projectColors?: ProjectColors;
 };
 
 function ColorPickerButton({
   value,
   onChange,
-  projectColors = [],
+  projectColors,
 }: ColorPickerButtonProps) {
   const [isOpen, setIsOpen] = useState(false);
   const normalizedValue = typeof value === 'string' ? value : undefined;
+  const previewColor = useMemo(
+    () =>
+      resolveProjectColorValue(normalizedValue, projectColors) ??
+      normalizedValue,
+    [normalizedValue, projectColors],
+  );
 
   return (
     <>
@@ -477,7 +529,7 @@ function ColorPickerButton({
             height: 32,
             borderRadius: 6,
             border: '1px solid rgba(0,0,0,0.1)',
-            background: normalizedValue ?? 'transparent',
+            background: previewColor ?? 'transparent',
           }}
         />
         <span style={{ flex: 1, textAlign: 'left', fontWeight: 500 }}>
@@ -503,160 +555,3 @@ function ColorPickerButton({
     </>
   );
 }
-
-type SizeUnit = '' | 'vs' | 's' | 'f' | '%';
-
-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}`;
-}
-
-type SizeFieldProps = {
-  value: unknown;
-  onChange: (val: unknown) => void;
-  preferredScale?: string;
-  fieldName: string;
-};
-
-function normalizePreferredScale(
-  preferredScale: string | undefined,
-  fieldName: string,
-): SizeUnit {
-  const fallbackName = fieldName.trim().toLowerCase();
-  const fallback: SizeUnit =
-    fallbackName.includes('height') ||
-    fallbackName.includes('top') ||
-    fallbackName.includes('vertical')
-      ? 'vs'
-      : 's';
-  if (typeof preferredScale !== 'string') return fallback;
-  const normalized = preferredScale.trim().toLowerCase();
-  if (
-    normalized === 'vs' ||
-    normalized === 's' ||
-    normalized === 'f' ||
-    normalized === '%'
-  ) {
-    return normalized as SizeUnit;
-  }
-  return fallback;
-}
-
-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<SizeUnit>(
-    parsed.unit || normalizedPreferred,
-  );
-
-  useEffect(() => {
-    setAmount(parsed.amount);
-    setUnit(parsed.unit || normalizedPreferred);
-  }, [parsed.amount, parsed.unit, normalizedPreferred]);
-
-  const emitValue = useCallback(
-    (nextAmount: string, nextUnit: SizeUnit) => {
-      const trimmed = nextAmount.trim();
-      if (!trimmed) {
-        onChange(undefined);
-        return;
-      }
-      onChange(composeSizeValue(trimmed, nextUnit));
-    },
-    [onChange],
-  );
-
-  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 SizeUnit;
-    setUnit(nextUnit);
-    if (!amount.trim()) return;
-    emitValue(amount, nextUnit);
-  };
-
-  const unitPriority: SizeUnit[] = ['vs', 's', 'f', '%'];
-  const orderedUnits = [
-    normalizedPreferred,
-    ...unitPriority.filter((unit) => unit !== normalizedPreferred),
-  ];
-  const unitOptions: Array<{ value: SizeUnit; label: string }> =
-    orderedUnits.map((unit) => ({
-      value: unit,
-      label: unit === normalizedPreferred ? `${unit}` : unit,
-    }));
-
-  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/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

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 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,
@@ -16,7 +18,7 @@ type SpecialCategorySectionProps = {
   attributes: NodeDefaultAttribute;
   onAttributeChange: (name: string, value: unknown) => void;
   componentType?: string;
-  projectColors?: string[];
+  projectColors?: ProjectColors;
   layoutContext?: LayoutContext;
   viewAttributes?: NodeDefaultAttribute;
   meta?: {
@@ -91,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);
@@ -168,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);
@@ -211,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

@@ -0,0 +1,77 @@
+import React, { useId, useMemo } from 'react';
+import type { BackgroundImageComponentProps } from './BackgroundImageProps.generated';
+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');
+  node = useNode(node);
+  const generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'background-image';
+  const attributeKey = node.key ?? generatedId;
+
+  const { previewMode, current, appConfig, projectColors } = useRenderStore(
+    (s) => ({
+      previewMode: s.previewMode,
+      current: s.current,
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+    }),
+  );
+
+  const baseStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+  const backgroundStyle = useMemo(() => {
+    const attrs = node.attributes;
+    const style: React.CSSProperties = {
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center',
+    };
+
+    if (attrs?.src) {
+      style.backgroundImage = `url(${attrs.src})`;
+    }
+
+    switch (attrs?.resizeMode) {
+      case 'cover':
+        style.backgroundSize = 'cover';
+        break;
+      case 'contain':
+        style.backgroundSize = 'contain';
+        break;
+      case 'stretch':
+        style.backgroundSize = '100% 100%';
+        break;
+      case 'center':
+        style.backgroundSize = 'auto';
+        break;
+      default:
+        style.backgroundSize = 'cover';
+    }
+
+    return style;
+  }, [node]);
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const mergedStyle = useMergedStyle(baseStyle, backgroundStyle);
+  const style = useMergedStyle(
+    mergedStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    />
+  );
+}
+
+export default React.memo(BackgroundImage);

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

@@ -0,0 +1,61 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type FlexDirectionOptionType = 'row' | 'column';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
+export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
+
+export interface BackgroundImagePropsGenerated {
+  child: string;
+  attributes: {
+    scrollable?: boolean;
+    flexDirection?: FlexDirectionOptionType;
+    alignItems?: AlignItemsOptionType;
+    justifyContent?: JustifyContentOptionType;
+    gap?: string;
+    padding?: string;
+    paddingHorizontal?: string;
+    paddingVertical?: string;
+    paddingTop?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    margin?: string;
+    marginVertical?: string;
+    marginTop?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    marginRight?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
+    width?: string;
+    height?: string;
+    flex?: number;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
+    src?: string;
+    resizeMode?: ResizeModeOptionType;
+  };
+}
+
+export interface BackgroundImageComponentProps {
+  node: NodeData<BackgroundImagePropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,45 @@
+{
+  "schemaVersion": 1,
+  "allowUnknownAttributes": false,
+  "pattern": {
+    "type": "background-image",
+    "children": "never",
+    "extends": "View",
+    "attributes": {
+      "src": "string",
+      "resizeMode": ["cover", "contain", "stretch", "center"]
+    },
+    "defaults": {
+      "resizeMode": "cover",
+      "width": "100%",
+      "height": "100%",
+      "position": "fixed",
+      "top": 0,
+      "left": 0,
+      "right": 0,
+      "bottom": 0,
+      "zIndex": 0
+    }
+  },
+  "meta": {
+    "desiredParent": ["all", "background"],
+    "label": "Background Image",
+    "description": "Background image.",
+    "attributes": {
+      "src": {
+        "label": "Src",
+        "description": "Image source URL.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "resizeMode": {
+        "label": "Resize Mode",
+        "description": "How the image fits its container.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 4
+      }
+    }
+  }
+}