@developer_tribe/react-builder 1.2.8 → 1.2.10

package/src/attributes-editor/attributesEditorUtils.ts

@@ -0,0 +1,102 @@
+import type { NodeDefaultAttribute } from '../types/Node';
+import type { SchemaEntry } from './types';
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+export type StyleBagSource = 'styles' | 'style' | 'none';
+
+export function getStyleBagSourceAndValue(attributes: NodeDefaultAttribute): {
+  source: StyleBagSource;
+  styleBag?: Record<string, unknown>;
+} {
+  const record = (attributes ?? {}) as Record<string, unknown>;
+  const maybeStyles = record.styles;
+  if (isPlainObject(maybeStyles)) {
+    return { source: 'styles', styleBag: maybeStyles };
+  }
+  const maybeStyle = record.style;
+  if (isPlainObject(maybeStyle)) {
+    return { source: 'style', styleBag: maybeStyle };
+  }
+  return { source: 'none', styleBag: undefined };
+}
+
+type AttributeTypeSpec = SchemaEntry['type'];
+
+function isAttributeTypeSpec(value: unknown): value is AttributeTypeSpec {
+  return typeof value === 'string' || Array.isArray(value);
+}
+
+function getNestedStyleSchema(
+  schema: Record<string, unknown>,
+): Record<string, AttributeTypeSpec> | undefined {
+  const maybe = schema.styles ?? schema.style;
+  if (!isPlainObject(maybe)) return undefined;
+  const out: Record<string, AttributeTypeSpec> = {};
+  for (const [k, v] of Object.entries(maybe)) {
+    if (isAttributeTypeSpec(v)) out[k] = v;
+  }
+  return Object.keys(out).length ? out : undefined;
+}
+
+/**
+ * Flattens schemaVersion=2 nested style schemas (under schema.style or schema.styles)
+ * into plain entries so the editor can list them as individual fields.
+ *
+ * Note: we intentionally exclude the raw `style` / `styles` keys themselves, because
+ * Field.tsx does not render object specs (---not-implemented----).
+ */
+export function buildAttributesEditorEntries(
+  schema: Record<string, unknown>,
+  attributeMeta?: Record<string, { category?: string }>,
+): SchemaEntry[] {
+  const nestedStyleSchema = getNestedStyleSchema(schema);
+  const metaKeys = Object.keys(attributeMeta ?? {});
+  const topLevelSchemaKeys = Object.keys(schema).filter(
+    (k) => k !== 'style' && k !== 'styles',
+  );
+  const nestedStyleKeys = Object.keys(nestedStyleSchema ?? {});
+  const keySet = new Set<string>([
+    ...metaKeys,
+    ...topLevelSchemaKeys,
+    ...nestedStyleKeys,
+  ]);
+
+  const keys = Array.from(keySet).filter(
+    (k) => k !== 'style' && k !== 'styles',
+  );
+
+  const entries: SchemaEntry[] = [];
+  keys.forEach((name) => {
+    const top = (schema as Record<string, unknown>)[name];
+    const nested = nestedStyleSchema?.[name];
+    const spec = isAttributeTypeSpec(top) ? top : nested;
+    if (!spec) return;
+    entries.push({ name, type: spec });
+  });
+  return entries;
+}
+
+export function isValidStyleBagValue(
+  attributes: NodeDefaultAttribute,
+): boolean {
+  const record = attributes as Record<string, unknown>;
+  const maybeStyles = record?.styles;
+  const maybeStyle = record?.style;
+  return !(
+    (maybeStyles != null && !isPlainObject(maybeStyles)) ||
+    (maybeStyle != null && !isPlainObject(maybeStyle))
+  );
+}
+
+export function findLegacyFlatStyleKeys(
+  attributes: NodeDefaultAttribute,
+  isStyleKeyForWrite: (name: string) => boolean,
+): string[] {
+  if (!isPlainObject(attributes)) return [];
+  return Object.keys(attributes).filter(
+    (k) => k !== 'style' && k !== 'styles' && isStyleKeyForWrite(k),
+  );
+}

package/src/attributes-editor/useAttributesEditorModel.ts

@@ -0,0 +1,477 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { NodeData, NodeDefaultAttribute } from '../types/Node';
+import type { ProjectColorTokenMap, ProjectColors } from '../types/Project';
+import type { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
+import useNode from '../build-components/useNode';
+import { isNodeString } from '../utils/analyseNode';
+import { logger } from '../utils/logger';
+import {
+  getAttributeMeta,
+  getAttributeSchema,
+  getPatternByType,
+  getStyleAttributeKeySet,
+} from '../utils/patterns';
+import { useRenderStore } from '../store';
+import type { LayoutContext, SchemaEntry } from './types';
+import {
+  buildAttributesEditorEntries,
+  findLegacyFlatStyleKeys,
+  getStyleBagSourceAndValue,
+  isValidStyleBagValue,
+} from './attributesEditorUtils';
+import type {
+  AttributesEditorModel,
+  AttributesEditorProps,
+  AttributesEditorSpecialSection,
+  AttributesEditorTabConfig,
+  TabContentInfo,
+  TabId,
+} from './attributesEditorModelTypes';
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function buildProjectColorsFallback(appConfig: any): ProjectColors | undefined {
+  const addColor = (collection: Set<string>, value?: string) => {
+    if (typeof value !== 'string') return;
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    collection.add(trimmed);
+  };
+
+  const fallback = new Set<string>();
+  const styles = [
+    appConfig?.screenStyle?.light,
+    appConfig?.screenStyle?.dark,
+  ].filter(Boolean) as Array<{
+    backgroundColor?: string;
+    color?: string;
+    seperatorColor?: string;
+  }>;
+  styles.forEach((style) => {
+    ['backgroundColor', 'color', 'seperatorColor'].forEach((key) => {
+      const value = style?.[key as keyof typeof style];
+      addColor(fallback, value);
+    });
+  });
+
+  if (fallback.size === 0) {
+    return undefined;
+  }
+
+  const fallbackRecord: ProjectColorTokenMap = {};
+  Array.from(fallback).forEach((color, index) => {
+    fallbackRecord[`FALLBACK_${index + 1}`] = color;
+  });
+
+  return { STATIC_COLORS: fallbackRecord };
+}
+
+export function useAttributesEditorModel({
+  node,
+  onChange,
+  projectColors,
+}: AttributesEditorProps): AttributesEditorModel {
+  const isInvalidNode = !node || isNodeString(node);
+  const baseData = isInvalidNode
+    ? ({
+        type: 'View',
+        children: null,
+        attributes: {},
+      } as unknown as NodeData<NodeDefaultAttribute>)
+    : (node as NodeData<NodeDefaultAttribute>);
+
+  const data = useNode(baseData);
+  const {
+    appConfig,
+    fonts: projectFonts,
+    loadedFonts,
+    markFontLoaded,
+    addError,
+  } = useRenderStore((state) => ({
+    appConfig: state.appConfig,
+    fonts: state.fonts,
+    loadedFonts: state.loadedFonts,
+    markFontLoaded: state.markFontLoaded,
+    addError: state.addError,
+  }));
+
+  const schema = (getAttributeSchema(data?.type) ?? {}) as Record<
+    string,
+    unknown
+  >;
+  const attributeMeta = getAttributeMeta(data?.type);
+  const attributes = (data?.attributes ?? {}) as NodeDefaultAttribute;
+
+  const styleAttributeKeys = useMemo(() => getStyleAttributeKeySet(), []);
+  const styleBagInfo = useMemo(
+    () => getStyleBagSourceAndValue(attributes),
+    [attributes],
+  );
+  const styleBag = styleBagInfo.styleBag;
+
+  const isStyleKeyForWrite = useCallback(
+    (name: string) => {
+      const metaCategory = attributeMeta?.[name]?.category;
+      if (metaCategory === 'style') return true;
+      return styleAttributeKeys.has(name);
+    },
+    [attributeMeta, styleAttributeKeys],
+  );
+  const isStyleKeyForRead = useCallback(
+    (name: string) => {
+      if (isStyleKeyForWrite(name)) return true;
+      return !!(
+        styleBag && Object.prototype.hasOwnProperty.call(styleBag, name)
+      );
+    },
+    [isStyleKeyForWrite, styleBag],
+  );
+
+  const legacyFlatStyleKeys = useMemo(
+    () => findLegacyFlatStyleKeys(attributes, isStyleKeyForWrite),
+    [attributes, isStyleKeyForWrite],
+  );
+  const hasInvalidStyleBag = useMemo(
+    () => !isValidStyleBagValue(attributes),
+    [attributes],
+  );
+
+  useEffect(() => {
+    const hasLegacyStyleKey = styleBagInfo.source === 'style';
+    if (
+      legacyFlatStyleKeys.length === 0 &&
+      !hasInvalidStyleBag &&
+      !hasLegacyStyleKey
+    ) {
+      return;
+    }
+    logger.warn(
+      'AttributesEditor',
+      'Legacy/unmigrated attributes detected. This editor expects schemaVersion=2 (style nested under attributes.styles). Please run migrations.',
+      {
+        componentType: data?.type,
+        nodeKey: (baseData as any)?.key,
+        legacyFlatStyleKeys,
+        hasInvalidStyleBag,
+        styleBagSource: styleBagInfo.source,
+      },
+    );
+  }, [
+    baseData,
+    data?.type,
+    hasInvalidStyleBag,
+    legacyFlatStyleKeys,
+    styleBagInfo.source,
+  ]);
+
+  const getAttributeValue = useCallback(
+    (name: string) => {
+      if (isStyleKeyForRead(name)) {
+        return styleBag?.[name];
+      }
+      return (attributes as Record<string, unknown>)?.[name];
+    },
+    [attributes, isStyleKeyForRead, styleBag],
+  );
+
+  const projectColorsForPicker = useMemo<ProjectColors | undefined>(() => {
+    if (projectColors) return projectColors;
+    return buildProjectColorsFallback(appConfig);
+  }, [appConfig, projectColors]);
+
+  const viewAttributes = useMemo<
+    Partial<ViewPropsGenerated['attributes']> | undefined
+  >(
+    () =>
+      data?.type === 'View'
+        ? (attributes as ViewPropsGenerated['attributes'])
+        : undefined,
+    [attributes, data?.type],
+  );
+
+  const layoutContext = useMemo<LayoutContext>(
+    () => ({
+      flexDirection: styleBag?.flexDirection as LayoutContext['flexDirection'],
+      alignItems: styleBag?.alignItems as LayoutContext['alignItems'],
+      justifyContent:
+        styleBag?.justifyContent as LayoutContext['justifyContent'],
+    }),
+    [styleBag?.flexDirection, styleBag?.alignItems, styleBag?.justifyContent],
+  );
+
+  const patternForType = useMemo(
+    () => (data?.type ? getPatternByType(data.type) : undefined),
+    [data?.type],
+  );
+  const componentMeta = patternForType?.meta;
+
+  const componentTitle = componentMeta?.label ?? data?.type ?? 'Component';
+  const componentDescription = componentMeta?.description;
+
+  const entries = useMemo(() => {
+    return buildAttributesEditorEntries(schema, attributeMeta).filter(
+      ({ type }) => (typeof type === 'string' ? type !== 'never' : true),
+    );
+  }, [attributeMeta, schema]);
+
+  const visibleEntries = useMemo(() => {
+    if (!componentMeta?.hideAllAttributes) return entries;
+    return entries.filter(({ name }) => {
+      const meta = attributeMeta?.[name];
+      return meta?.forceVisible === true || meta?.override === true;
+    });
+  }, [attributeMeta, componentMeta?.hideAllAttributes, entries]);
+
+  const mockableFeatureKeys = useMemo(() => {
+    const mockable = componentMeta?.mockableFeatures;
+    if (!mockable || typeof mockable !== 'object') return [];
+    return Object.entries(mockable)
+      .filter(([, enabled]) => enabled === true)
+      .map(([key]) => key)
+      .filter((key) => typeof key === 'string' && key.trim().length > 0)
+      .sort((a, b) => a.localeCompare(b));
+  }, [componentMeta?.mockableFeatures]);
+
+  const [activeMockableFeature, setActiveMockableFeature] = useState<
+    string | null
+  >(null);
+
+  const groupedAndSpecialGroups = useMemo(() => {
+    const groups: Record<TabId, SchemaEntry[]> = {
+      style: [],
+      container: [],
+      other: [],
+    };
+    const specials: Record<string, SchemaEntry[]> = {};
+
+    const getSortOrder = (name: string) =>
+      attributeMeta?.[name]?.sort ?? Number.MAX_SAFE_INTEGER;
+    const compareEntries = (a: SchemaEntry, b: SchemaEntry) => {
+      const order = getSortOrder(a.name) - getSortOrder(b.name);
+      return order !== 0 ? order : a.name.localeCompare(b.name);
+    };
+
+    visibleEntries.forEach(({ name, type }) => {
+      const meta = attributeMeta?.[name];
+      const specialCategory = meta?.specialCategory;
+      if (typeof specialCategory === 'string') {
+        const normalizedSpecialCategory = specialCategory.trim();
+        if (normalizedSpecialCategory) {
+          if (!specials[normalizedSpecialCategory]) {
+            specials[normalizedSpecialCategory] = [];
+          }
+          specials[normalizedSpecialCategory].push({ name, type });
+          return;
+        }
+      }
+
+      const metaCategory = meta?.category;
+      const normalized =
+        metaCategory === 'style'
+          ? 'style'
+          : metaCategory === 'container'
+            ? 'container'
+            : 'other';
+      groups[normalized].push({ name, type });
+    });
+
+    Object.values(groups).forEach((list) => list.sort(compareEntries));
+    Object.values(specials).forEach((list) => list.sort(compareEntries));
+    return { grouped: groups, specialGroups: specials };
+  }, [attributeMeta, visibleEntries]);
+
+  const { grouped, specialGroups } = groupedAndSpecialGroups;
+
+  const specialSectionsByTab = useMemo<
+    Record<TabId, AttributesEditorSpecialSection[]>
+  >(() => {
+    const buckets: Record<TabId, AttributesEditorSpecialSection[]> = {
+      style: [],
+      container: [],
+      other: [],
+    };
+
+    const compareSections = (
+      a: AttributesEditorSpecialSection,
+      b: AttributesEditorSpecialSection,
+    ) => {
+      const aSort = a.meta?.sort ?? Number.MAX_SAFE_INTEGER;
+      const bSort = b.meta?.sort ?? Number.MAX_SAFE_INTEGER;
+      const order = aSort - bSort;
+      return order !== 0 ? order : a.key.localeCompare(b.key);
+    };
+
+    Object.entries(specialGroups).forEach(([categoryKey, categoryEntries]) => {
+      if (!categoryEntries.length) return;
+      const metaForCategory = componentMeta?.specialCategories?.[categoryKey];
+      const targetCategory = (
+        metaForCategory?.category === 'style'
+          ? 'style'
+          : metaForCategory?.category === 'container'
+            ? 'container'
+            : 'other'
+      ) as TabId;
+      buckets[targetCategory].push({
+        key: categoryKey,
+        entries: categoryEntries,
+        meta: metaForCategory,
+      });
+    });
+
+    (Object.keys(buckets) as TabId[]).forEach((tabId) => {
+      buckets[tabId].sort(compareSections);
+    });
+
+    return buckets;
+  }, [componentMeta?.specialCategories, specialGroups]);
+
+  const tabs = useMemo<AttributesEditorTabConfig[]>(
+    () => [
+      { id: 'container', label: 'Container', entries: grouped.container },
+      { id: 'style', label: 'Styles', entries: grouped.style },
+      { id: 'other', label: 'Others', entries: grouped.other },
+    ],
+    [grouped],
+  );
+
+  const tabContentInfo = useMemo<TabContentInfo>(() => {
+    const info: TabContentInfo = {
+      style: { baseCount: 0, specialCount: 0 },
+      container: { baseCount: 0, specialCount: 0 },
+      other: { baseCount: 0, specialCount: 0 },
+    };
+
+    tabs.forEach((tab) => {
+      info[tab.id].baseCount = tab.entries.length;
+    });
+
+    (Object.keys(specialSectionsByTab) as TabId[]).forEach((tabId) => {
+      info[tabId].specialCount = specialSectionsByTab[tabId].reduce(
+        (sum, section) => sum + section.entries.length,
+        0,
+      );
+    });
+
+    return info;
+  }, [specialSectionsByTab, tabs]);
+
+  const firstAvailableTab = useMemo<TabId>(() => {
+    return (
+      tabs.find((tab) => {
+        const counts = tabContentInfo[tab.id];
+        return counts.baseCount + counts.specialCount > 0;
+      })?.id ?? 'other'
+    );
+  }, [tabContentInfo, tabs]);
+
+  const [activeTab, setActiveTab] = useState<TabId>(firstAvailableTab);
+
+  useEffect(() => {
+    setActiveTab((prev) => {
+      const counts = tabContentInfo[prev];
+      if (counts && counts.baseCount + counts.specialCount > 0) {
+        return prev;
+      }
+      return firstAvailableTab;
+    });
+  }, [firstAvailableTab, tabContentInfo]);
+
+  const activeEntries =
+    tabs.find((tab) => tab.id === activeTab)?.entries ??
+    tabs.find((tab) => tab.id === firstAvailableTab)?.entries ??
+    [];
+
+  const activeSpecialSections = specialSectionsByTab[activeTab] ?? [];
+
+  const handleAttributeChange = useCallback(
+    (name: string, val: unknown) => {
+      const prevAttrs =
+        ((baseData?.attributes ?? {}) as Record<string, unknown>) ?? {};
+      const isStyleKey = isStyleKeyForWrite(name);
+      const nextAttrs: Record<string, unknown> = { ...prevAttrs };
+      if (isStyleKey) {
+        const prevStyle = (
+          isPlainObject(nextAttrs.styles)
+            ? nextAttrs.styles
+            : isPlainObject(nextAttrs.style)
+              ? nextAttrs.style
+              : {}
+        ) as Record<string, unknown>;
+        const nextStyle = { ...prevStyle, [name]: val };
+        // Keep both keys in sync:
+        // - `styles` is the canonical store for the editor (latest migration).
+        // - `style` is kept for back-compat because build-components currently read `attributes.style`.
+        nextAttrs.styles = nextStyle;
+        nextAttrs.style = nextStyle;
+        if (name in nextAttrs) delete nextAttrs[name];
+      } else {
+        nextAttrs[name] = val;
+      }
+      const next: NodeData<NodeDefaultAttribute> = {
+        ...baseData,
+        attributes: nextAttrs as NodeDefaultAttribute,
+      };
+      onChange(next);
+    },
+    [baseData, isStyleKeyForWrite, onChange],
+  );
+
+  const handleChildrenChange = useCallback(
+    (val: string) => {
+      const next: NodeData<NodeDefaultAttribute> = {
+        ...baseData,
+        children: val,
+      };
+      onChange(next);
+    },
+    [baseData, onChange],
+  );
+
+  const hasStringChildren =
+    !!patternForType?.pattern &&
+    (patternForType.pattern as { children?: unknown }).children === 'string';
+  const childrenValue =
+    typeof (baseData.children as unknown) === 'string'
+      ? (baseData.children as string)
+      : '';
+
+  return {
+    isInvalidNode,
+    baseData,
+    data,
+    appConfig,
+    projectFonts,
+    loadedFonts,
+    markFontLoaded,
+    addError,
+    schema,
+    attributeMeta,
+    componentTitle,
+    componentDescription,
+    patternForType,
+    componentMeta,
+    attributes,
+    styleBag,
+    projectColorsForPicker,
+    viewAttributes,
+    layoutContext,
+    getAttributeValue,
+    handleAttributeChange,
+    handleChildrenChange,
+    tabs,
+    tabContentInfo,
+    firstAvailableTab,
+    activeTab,
+    setActiveTab,
+    activeEntries,
+    specialSectionsByTab,
+    activeSpecialSections,
+    mockableFeatureKeys,
+    activeMockableFeature,
+    setActiveMockableFeature,
+    hasStringChildren,
+    childrenValue,
+  };
+}

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

@@ -7,7 +7,7 @@ import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { Icon } from '../../components/Icon.generated';
 import { IconsType } from '../../types/Icons';
-import { useExtractTextStyle } from '../../hooks/useExtractTextStyle';
+import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
 
 function BIcon({ node }: BIconComponentProps) {
   useLogRender('BIcon');
@@ -28,9 +28,9 @@ function BIcon({ node }: BIconComponentProps) {
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
-  const styleBag = node.attributes?.style;
-  const iconType = styleBag?.iconType ?? 'activity';
-  const strokeWidth = styleBag?.strokeWidth;
+  const attrs = node.attributes;
+  const iconType = attrs?.iconType ?? 'activity';
+  const strokeWidth = attrs?.strokeWidth;
 
   return (
     <Icon

package/src/build-components/BIcon/BIconProps.generated.ts

@@ -25,9 +25,6 @@ export interface BIconStyleGenerated {
   fontFamily?: string;
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
-  adjustsFontSizeToFit?: boolean;
-  showEllipsis?: boolean;
-  scrollable?: boolean;
   flexDirection?: FlexDirectionOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
@@ -61,15 +58,18 @@ export interface BIconStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  iconType?: string;
-  size?: number;
-  strokeWidth?: number;
 }
 
 export interface BIconPropsGenerated {
   child: string;
   attributes: {
     style?: BIconStyleGenerated;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
+    scrollable?: boolean;
+    iconType?: string;
+    size?: number;
+    strokeWidth?: number;
   };
 }
 

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

@@ -11,12 +11,11 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "all"
-    ],
+    "desiredParent": ["all"],
     "label": "BIcon",
     "description": "Renders an icon from the icon set.",
-    "styles": {
+    "styles": {},
+    "attributes": {
       "iconType": {
         "label": "Icon",
         "description": "Which icon to render.",
@@ -27,14 +26,14 @@
       "size": {
         "label": "Size",
         "description": "Icon size (px).",
-        "category": "style",
+        "category": "other",
         "specialCategory": null,
         "sort": 2
       },
       "strokeWidth": {
         "label": "Stroke Width",
         "description": "SVG stroke width override (applied to the icon paths).",
-        "category": "style",
+        "category": "other",
         "specialCategory": null,
         "sort": 3
       }

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

@@ -2,7 +2,7 @@ import React, { useId, useMemo } from 'react';
 import type { BackgroundImageComponentProps } from './BackgroundImageProps.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
-import { useExtractViewStyle } from '../../hooks/useExtractViewStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { resolveImageSrc } from '../../utils/getImage';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
@@ -32,7 +32,8 @@ function BackgroundImage({ node }: BackgroundImageComponentProps) {
       if (resolved) style.backgroundImage = `url(${resolved})`;
     }
 
-    switch (styleBag?.resizeMode) {
+    const resizeMode = attrs?.resizeMode ?? (styleBag as any)?.resizeMode;
+    switch (resizeMode) {
       case 'cover':
         style.backgroundSize = 'cover';
         break;