@developer_tribe/react-builder 1.2.7 → 1.2.9

package/src/attributes-editor/AttributesEditorFields.tsx

@@ -0,0 +1,248 @@
+import React, { useMemo, useState } from 'react';
+import type { Fonts } from '../types/Fonts';
+import { Icon } from '../components/Icon.generated';
+import { IconPickerModal } from '../modals/IconPickerModal';
+import Modal from '../modals/Modal';
+import { loadFontFamily } from '../utils/loadFontFamily';
+import { fontsDebug } from '../utils/fontsDebug';
+import type { IconsType } from '../types/Icons';
+
+type IconTypePickerFieldProps = {
+  name: string;
+  value: unknown;
+  onChange: (next: unknown) => void;
+};
+
+export function IconTypePickerField({
+  name,
+  value,
+  onChange,
+}: IconTypePickerFieldProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const normalized =
+    typeof value === 'string' ? (value as IconsType) : undefined;
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setIsOpen(true)}
+        className="attributes-editor__picker-button"
+      >
+        <span className="attributes-editor__picker-button-left">
+          {normalized ? <Icon iconType={normalized} size={18} /> : null}
+          <span className="attributes-editor__picker-button-label">
+            {normalized ?? 'Select icon'}
+          </span>
+        </span>
+        <span className="attributes-editor__picker-button-open">Open</span>
+      </button>
+
+      {isOpen ? (
+        <IconPickerModal
+          value={normalized}
+          onSelect={(iconName) => {
+            onChange(iconName);
+            setIsOpen(false);
+          }}
+          onClose={() => setIsOpen(false)}
+          onClear={() => {
+            onChange(undefined);
+            setIsOpen(false);
+          }}
+        />
+      ) : null}
+    </>
+  );
+}
+
+type FontFamilyPickerFieldProps = {
+  name: string;
+  value: unknown;
+  onChange: (next: unknown) => void;
+  fonts: Fonts;
+  loadedFonts: string[] | undefined;
+  markFontLoaded: (fontFamily: string) => void;
+  addError: (message: string) => void;
+};
+
+export function FontFamilyPickerField({
+  name,
+  value,
+  onChange,
+  fonts,
+  loadedFonts,
+  markFontLoaded,
+  addError,
+}: FontFamilyPickerFieldProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isFontLoading, setIsFontLoading] = useState(false);
+  const [fontLoadError, setFontLoadError] = useState<string | null>(null);
+
+  const normalized =
+    typeof value === 'string' && value.trim().length > 0
+      ? value.trim()
+      : undefined;
+
+  const fontsList = Array.isArray(fonts) ? fonts : [];
+  const loaded = Array.isArray(loadedFonts) ? loadedFonts : [];
+
+  const fontCountLabel = useMemo(
+    () => `${fontsList.length} fonts`,
+    [fontsList.length],
+  );
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => {
+          setFontLoadError(null);
+          setIsOpen(true);
+        }}
+        className="attributes-editor__picker-button"
+      >
+        <span className="attributes-editor__picker-button-label attributes-editor__picker-button-label--fill">
+          {normalized ?? 'Select font'}
+        </span>
+        <span className="attributes-editor__picker-button-open">Open</span>
+      </button>
+
+      {isOpen ? (
+        <Modal
+          ariaLabelledBy="font-family-picker-title"
+          onClose={() => {
+            if (isFontLoading) return;
+            setIsOpen(false);
+          }}
+          closeOnOverlayClick={!isFontLoading}
+          closeOnEsc={!isFontLoading}
+        >
+          <div className="attributes-editor__font-modal">
+            <div className="attributes-editor__font-modal-header">
+              <p
+                id="font-family-picker-title"
+                className="attributes-editor__font-modal-title"
+              >
+                Select Font
+              </p>
+              <div className="attributes-editor__font-modal-spacer" />
+              <button
+                type="button"
+                className="editor-button"
+                onClick={() => {
+                  onChange(undefined);
+                  setFontLoadError(null);
+                  setIsOpen(false);
+                }}
+                disabled={isFontLoading}
+              >
+                Clear
+              </button>
+              <button
+                type="button"
+                className="editor-button"
+                onClick={() => setIsOpen(false)}
+                disabled={isFontLoading}
+              >
+                Close
+              </button>
+            </div>
+
+            {isFontLoading ? (
+              <div className="attributes-editor__font-modal-note">
+                Loading font…
+              </div>
+            ) : null}
+            {fontLoadError ? (
+              <div className="attributes-editor__font-modal-error">
+                {fontLoadError}
+              </div>
+            ) : null}
+
+            <div className="attributes-editor__font-modal-note">
+              {fontCountLabel}
+            </div>
+
+            <div className="attributes-editor__font-grid">
+              {fontsList.map((font) => {
+                const fontName = font?.name;
+                if (typeof fontName !== 'string' || !fontName.trim()) {
+                  return null;
+                }
+                const familyName = fontName.trim();
+                const isActive = normalized === familyName;
+                const isLoaded = loaded.includes(familyName);
+                const optionClassName = [
+                  'attributes-editor__font-option',
+                  isActive ? 'attributes-editor__font-option--active' : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ');
+
+                return (
+                  <button
+                    key={familyName}
+                    type="button"
+                    disabled={isFontLoading}
+                    onClick={async () => {
+                      fontsDebug.info('AttributesEditor: select fontFamily', {
+                        field: name,
+                        familyName,
+                        wasLoaded: isLoaded,
+                      });
+                      setFontLoadError(null);
+                      onChange(familyName);
+                      if (isLoaded) return;
+
+                      setIsFontLoading(true);
+                      try {
+                        fontsDebug.info(
+                          'AttributesEditor: loadFontFamily start',
+                          { familyName },
+                        );
+                        await loadFontFamily(fontsList, familyName, {
+                          forceFetch: true,
+                        });
+                        markFontLoaded(familyName);
+                        fontsDebug.info(
+                          'AttributesEditor: loadFontFamily success',
+                          { familyName },
+                        );
+                      } catch (e) {
+                        const msg = e instanceof Error ? e.message : String(e);
+                        setFontLoadError(
+                          `Failed to load "${familyName}": ${msg}`,
+                        );
+                        addError(`Failed to load font "${familyName}": ${msg}`);
+                        fontsDebug.compactError(
+                          'AttributesEditor: loadFontFamily failed',
+                          e,
+                          { familyName },
+                        );
+                      } finally {
+                        setIsFontLoading(false);
+                      }
+                    }}
+                    className={optionClassName}
+                    aria-label={`Select font ${familyName}`}
+                  >
+                    <span
+                      className="attributes-editor__font-option-name"
+                      title={familyName}
+                    >
+                      {familyName}
+                    </span>
+                    <span className="attributes-editor__font-option-status">
+                      {isLoaded ? 'Loaded' : 'Not loaded'}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </Modal>
+      ) : null}
+    </>
+  );
+}

package/src/attributes-editor/AttributesEditorView.tsx

@@ -0,0 +1,360 @@
+import React, { useMemo } from 'react';
+import { Field } from './Field';
+import { SpecialCategorySection } from './SpecialCategorySection';
+import { FieldInfoTooltip } from './FieldInfoTooltip';
+import { toPreferredScale } from './SizeField';
+import { isBooleanFieldType, type SchemaEntry } from './types';
+import { MockableFeatureModal } from '../modals';
+import {
+  FontFamilyPickerField,
+  IconTypePickerField,
+} from './AttributesEditorFields';
+import type {
+  AttributesEditorModel,
+  AttributesEditorSpecialSection,
+} from './attributesEditorModelTypes';
+import type { NodeDefaultAttribute } from '../types/Node';
+
+type AttributesEditorViewProps = AttributesEditorModel;
+
+function getPreferredOrderedSizeEntries(entries: SchemaEntry[]): SchemaEntry[] {
+  const preferredOrder = [
+    'width',
+    'height',
+    'minWidth',
+    'minHeight',
+    'maxWidth',
+    'maxHeight',
+  ];
+  return [...entries].sort((a, b) => {
+    const aIndex = preferredOrder.indexOf(a.name);
+    const bIndex = preferredOrder.indexOf(b.name);
+    const aRank = aIndex === -1 ? Number.MAX_SAFE_INTEGER : aIndex;
+    const bRank = bIndex === -1 ? Number.MAX_SAFE_INTEGER : bIndex;
+    return aRank !== bRank ? aRank - bRank : a.name.localeCompare(b.name);
+  });
+}
+
+function getSpecialSectionTitle(section: AttributesEditorSpecialSection): {
+  title: string;
+  description?: string;
+} {
+  const key = section.key;
+  const meta = section.meta;
+  const title =
+    meta?.label && meta.label.trim().length > 0
+      ? meta.label
+      : key.charAt(0).toUpperCase() + key.slice(1);
+  return { title, description: meta?.description };
+}
+
+export function AttributesEditorView(props: AttributesEditorViewProps) {
+  const {
+    isInvalidNode,
+    componentTitle,
+    componentDescription,
+    mockableFeatureKeys,
+    activeMockableFeature,
+    setActiveMockableFeature,
+    tabs,
+    tabContentInfo,
+    activeTab,
+    setActiveTab,
+    firstAvailableTab,
+    activeEntries,
+    activeSpecialSections,
+    hasStringChildren,
+    childrenValue,
+    handleChildrenChange,
+    attributeMeta,
+    data,
+    getAttributeValue,
+    handleAttributeChange,
+    projectColorsForPicker,
+    layoutContext,
+    viewAttributes,
+    styleBag,
+    attributes,
+    projectFonts,
+    loadedFonts,
+    markFontLoaded,
+    addError,
+  } = props;
+
+  const headerSection = (
+    <div className="attributes-editor__component-meta">
+      <p className="attributes-editor__component-title">{componentTitle}</p>
+      {componentDescription ? (
+        <p className="attributes-editor__component-description">
+          {componentDescription}
+        </p>
+      ) : null}
+    </div>
+  );
+
+  const mockableSection =
+    mockableFeatureKeys.length > 0 ? (
+      <section className="attributes-editor__mockable">
+        <p className="attributes-editor__mockable-title">Mockable</p>
+        <table className="attributes-editor__mockable-table">
+          <tbody>
+            {mockableFeatureKeys.map((key) => (
+              <tr key={key} className="attributes-editor__mockable-row">
+                <td className="attributes-editor__mockable-name">{key}</td>
+                <td className="attributes-editor__mockable-action">
+                  <button
+                    type="button"
+                    className="editor-button"
+                    onClick={() => setActiveMockableFeature(key)}
+                  >
+                    {key}
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </section>
+    ) : null;
+
+  const tabsSection = (
+    <div className="attributes-editor__tabs">
+      {tabs.map((tab) => {
+        const isActive = tab.id === activeTab;
+        const counts = tabContentInfo[tab.id];
+        const totalCount = counts.baseCount + counts.specialCount;
+        const disabled = totalCount === 0;
+        const buttonClassNames = [
+          'attributes-editor__tab-button',
+          isActive ? 'attributes-editor__tab-button--active' : '',
+        ]
+          .filter(Boolean)
+          .join(' ');
+
+        return (
+          <button
+            key={tab.id}
+            type="button"
+            onClick={() => !disabled && setActiveTab(tab.id)}
+            disabled={disabled}
+            className={buttonClassNames}
+          >
+            {tab.label}
+            {totalCount > 0 ? ` (${totalCount})` : ''}
+          </button>
+        );
+      })}
+    </div>
+  );
+
+  const childrenSection = hasStringChildren ? (
+    <div className="attributes-editor__field-wrapper attributes-editor__field-wrapper--children">
+      <p className="attributes-editor__field-label">Text</p>
+      <input
+        type="text"
+        className="attributes-editor__text-input"
+        value={childrenValue}
+        onChange={(e) => handleChildrenChange(e.target.value)}
+      />
+    </div>
+  ) : null;
+
+  const hasAnyContent = useMemo(() => {
+    const counts = tabContentInfo[firstAvailableTab];
+    return (
+      (counts?.baseCount ?? 0) + (counts?.specialCount ?? 0) > 0 ||
+      (hasStringChildren && childrenValue !== undefined)
+    );
+  }, [childrenValue, firstAvailableTab, hasStringChildren, tabContentInfo]);
+
+  function renderEntry(entry: SchemaEntry) {
+    const name = entry.name;
+    const type = entry.type;
+    const label = attributeMeta?.[name]?.label ?? name;
+    const description = attributeMeta?.[name]?.description;
+    const preferredScale = toPreferredScale(
+      attributeMeta?.[name]?.preferedScale,
+    );
+    const isBoolean = isBooleanFieldType(type);
+    const wrapperClassNames = [
+      'attributes-editor__field-wrapper',
+      isBoolean ? 'attributes-editor__field-wrapper--boolean' : '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const value = getAttributeValue(name);
+
+    return (
+      <FieldInfoTooltip key={name} description={description}>
+        <div className={wrapperClassNames}>
+          {!isBoolean ? (
+            <p className="attributes-editor__field-label">{label}</p>
+          ) : null}
+
+          {type === 'iconType' ? (
+            <IconTypePickerField
+              name={name}
+              value={value}
+              onChange={(next) => handleAttributeChange(name, next)}
+            />
+          ) : type === 'fontFamily' ? (
+            <FontFamilyPickerField
+              name={name}
+              value={value}
+              onChange={(next) => handleAttributeChange(name, next)}
+              fonts={projectFonts}
+              loadedFonts={loadedFonts}
+              markFontLoaded={markFontLoaded}
+              addError={addError}
+            />
+          ) : (
+            <Field
+              name={name}
+              type={type}
+              value={value}
+              onChange={(val) => handleAttributeChange(name, val)}
+              componentType={data?.type}
+              projectColors={projectColorsForPicker}
+              layoutContext={layoutContext}
+              viewAttributes={viewAttributes}
+              label={isBoolean ? label : undefined}
+              preferredScale={preferredScale}
+            />
+          )}
+        </div>
+      </FieldInfoTooltip>
+    );
+  }
+
+  function renderSpecialSection(section: AttributesEditorSpecialSection) {
+    if (section.key === 'size') {
+      const { title, description } = getSpecialSectionTitle(section);
+      const orderedEntries = getPreferredOrderedSizeEntries(section.entries);
+      return (
+        <section key={section.key} className="special-category-section">
+          <div className="special-category-section__header">
+            <p className="special-category-section__title">{title}</p>
+          </div>
+          {description ? (
+            <p className="special-category-section__description">
+              {description}
+            </p>
+          ) : null}
+          <div className="attributes-editor__size-grid">
+            {orderedEntries.map((entry) => {
+              const label = attributeMeta?.[entry.name]?.label ?? entry.name;
+              const description = attributeMeta?.[entry.name]?.description;
+              const preferredScale = toPreferredScale(
+                attributeMeta?.[entry.name]?.preferedScale,
+              );
+              const currentValue = getAttributeValue(entry.name);
+              const isBoolean = isBooleanFieldType(entry.type);
+              const wrapperClassNames = [
+                'attributes-editor__field-wrapper',
+                isBoolean ? 'attributes-editor__field-wrapper--boolean' : '',
+              ]
+                .filter(Boolean)
+                .join(' ');
+              return (
+                <FieldInfoTooltip key={entry.name} description={description}>
+                  <div
+                    className={`${wrapperClassNames} attributes-editor__size-grid-item`}
+                  >
+                    {!isBoolean ? (
+                      <p className="attributes-editor__field-label">{label}</p>
+                    ) : null}
+                    {entry.type === 'iconType' ? (
+                      <IconTypePickerField
+                        name={entry.name}
+                        value={currentValue}
+                        onChange={(next) =>
+                          handleAttributeChange(entry.name, next)
+                        }
+                      />
+                    ) : entry.type === 'fontFamily' ? (
+                      <FontFamilyPickerField
+                        name={entry.name}
+                        value={currentValue}
+                        onChange={(next) =>
+                          handleAttributeChange(entry.name, next)
+                        }
+                        fonts={projectFonts}
+                        loadedFonts={loadedFonts}
+                        markFontLoaded={markFontLoaded}
+                        addError={addError}
+                      />
+                    ) : (
+                      <Field
+                        name={entry.name}
+                        type={entry.type}
+                        value={currentValue}
+                        onChange={(val) =>
+                          handleAttributeChange(entry.name, val)
+                        }
+                        componentType={data?.type}
+                        projectColors={projectColorsForPicker}
+                        layoutContext={layoutContext}
+                        viewAttributes={viewAttributes}
+                        label={isBoolean ? label : undefined}
+                        preferredScale={preferredScale}
+                      />
+                    )}
+                  </div>
+                </FieldInfoTooltip>
+              );
+            })}
+          </div>
+        </section>
+      );
+    }
+
+    const sectionAttributes =
+      section.meta?.category === 'style'
+        ? ((styleBag ?? {}) as unknown as NodeDefaultAttribute)
+        : attributes;
+
+    return (
+      <SpecialCategorySection
+        key={section.key}
+        category={section.key}
+        entries={section.entries}
+        attributeMeta={attributeMeta}
+        attributes={sectionAttributes}
+        onAttributeChange={handleAttributeChange}
+        componentType={data?.type}
+        projectColors={projectColorsForPicker}
+        layoutContext={layoutContext}
+        viewAttributes={viewAttributes}
+        meta={section.meta}
+      />
+    );
+  }
+
+  if (isInvalidNode) return null;
+
+  return (
+    <div className="attributes-editor">
+      {headerSection}
+      {mockableSection}
+      {tabsSection}
+      {childrenSection}
+      {activeSpecialSections.map(renderSpecialSection)}
+
+      {activeEntries.map(renderEntry)}
+
+      {!hasAnyContent ? (
+        <div className="attributes-editor__empty-state">
+          No editable attributes
+        </div>
+      ) : null}
+
+      {activeMockableFeature ? (
+        <MockableFeatureModal
+          featureKey={activeMockableFeature}
+          onClose={() => setActiveMockableFeature(null)}
+        />
+      ) : null}
+    </div>
+  );
+}

package/src/attributes-editor/LayoutPreviewPicker.tsx

@@ -94,12 +94,13 @@ function LayoutPreview({
   const resolved = resolvePreviewContext(mode, option, layoutContext);
   const isColumn = resolved.flexDirection?.startsWith('column');
   const resolvedBackground =
-    viewAttributes?.backgroundColor ??
+    (viewAttributes as any)?.style?.backgroundColor ??
     (isActive
       ? 'hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)) / 0.55)'
       : 'hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)))');
-  const resolvedGap = parseNumeric(viewAttributes?.gap) ?? 3;
-  const resolvedBorderRadius = parseNumeric(viewAttributes?.borderRadius) ?? 4;
+  const resolvedGap = parseNumeric((viewAttributes as any)?.style?.gap) ?? 3;
+  const resolvedBorderRadius =
+    parseNumeric((viewAttributes as any)?.style?.borderRadius) ?? 4;
 
   const stretchOverrides =
     resolved.alignItems === 'stretch'