@developer_tribe/react-builder 1.1.0 → 1.2.1

package/src/attributes-editor/LayoutPreviewPicker.tsx

@@ -0,0 +1,202 @@
+import React from 'react';
+import type { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
+import { LayoutContext, LayoutFieldName } from './types';
+
+type LayoutPreviewPickerProps = {
+  mode: LayoutFieldName;
+  options: string[];
+  value?: string;
+  onChange: (val?: string) => void;
+  layoutContext?: LayoutContext;
+  viewAttributes?: Partial<ViewPropsGenerated['attributes']>;
+};
+
+export function LayoutPreviewPicker({
+  mode,
+  options,
+  value,
+  onChange,
+  layoutContext,
+  viewAttributes,
+}: LayoutPreviewPickerProps) {
+  if (!options.length) {
+    return null;
+  }
+
+  const selectedValue =
+    typeof value === 'string'
+      ? value
+      : (layoutContext?.[mode as keyof LayoutContext] as string | undefined);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 6,
+        paddingBottom: 2,
+      }}
+    >
+      {options.map((option) => {
+        const isActive = selectedValue === option;
+        return (
+          <button
+            key={option}
+            type="button"
+            onClick={() => onChange(option)}
+            style={{
+              borderRadius: 8,
+              padding: 5,
+              width: 110,
+              flex: '0 0 auto',
+              border: isActive ? '2px solid #222' : '1px solid #d5d5d5',
+              background: 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
+              textAlign: 'left',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 3,
+              cursor: 'pointer',
+              boxShadow: isActive ? '0 2px 4px rgba(0,0,0,0.08)' : 'none',
+            }}
+          >
+            <LayoutPreview
+              mode={mode}
+              option={option}
+              isActive={isActive}
+              layoutContext={layoutContext}
+              viewAttributes={viewAttributes}
+            />
+            <span style={{ fontWeight: 600, fontSize: 11 }}>
+              {formatLayoutLabel(option)}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+type LayoutPreviewProps = {
+  mode: LayoutFieldName;
+  option: string;
+  isActive: boolean;
+  layoutContext?: LayoutContext;
+  viewAttributes?: Partial<ViewPropsGenerated['attributes']>;
+};
+
+function LayoutPreview({
+  mode,
+  option,
+  isActive,
+  layoutContext,
+  viewAttributes,
+}: LayoutPreviewProps) {
+  const resolved = resolvePreviewContext(mode, option, layoutContext);
+  const isColumn = resolved.flexDirection?.startsWith('column');
+  const resolvedBackground =
+    viewAttributes?.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 stretchOverrides =
+    resolved.alignItems === 'stretch'
+      ? isColumn
+        ? { width: '100%' }
+        : { height: '100%' }
+      : undefined;
+
+  return (
+    <div
+      style={{
+        borderRadius: resolvedBorderRadius,
+        border: '1px dashed rgba(0,0,0,0.2)',
+        padding: 5,
+        background: resolvedBackground,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: resolved.flexDirection ?? 'row',
+          justifyContent: resolved.justifyContent ?? 'flex-start',
+          alignItems: resolved.alignItems ?? 'stretch',
+          gap: resolvedGap,
+          width: '100%',
+          minHeight: isColumn ? 52 : 40,
+          transition: 'all 0.2s ease',
+        }}
+      >
+        {Array.from({ length: 3 }).map((_, idx) => (
+          <span
+            key={idx}
+            style={{
+              width: isColumn ? 22 : 10,
+              height: isColumn ? 10 : 10,
+              borderRadius: 2.5,
+              background: '#f7a500',
+              border: '1px solid rgba(0,0,0,0.1)',
+              flex: mode === 'justifyContent' ? '0 0 auto' : undefined,
+              ...(stretchOverrides ?? {}),
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function resolvePreviewContext(
+  mode: LayoutFieldName,
+  option: string,
+  layoutContext?: LayoutContext,
+): LayoutContext {
+  const fallback: LayoutContext = {
+    flexDirection: layoutContext?.flexDirection ?? 'row',
+    alignItems: layoutContext?.alignItems ?? 'center',
+    justifyContent: layoutContext?.justifyContent ?? 'flex-start',
+  };
+
+  switch (mode) {
+    case 'flexDirection':
+      return {
+        flexDirection: option as LayoutContext['flexDirection'],
+        alignItems: fallback.alignItems,
+        justifyContent: fallback.justifyContent,
+      };
+    case 'alignItems':
+      return {
+        flexDirection: fallback.flexDirection,
+        alignItems: option as LayoutContext['alignItems'],
+        justifyContent: fallback.justifyContent,
+      };
+    case 'justifyContent':
+      return {
+        flexDirection: fallback.flexDirection,
+        alignItems: fallback.alignItems,
+        justifyContent: option as LayoutContext['justifyContent'],
+      };
+    default:
+      return fallback;
+  }
+}
+
+function parseNumeric(value?: string | number | null) {
+  if (value === null || value === undefined) {
+    return undefined;
+  }
+  if (typeof value === 'number') {
+    return value;
+  }
+  const parsed = Number.parseFloat(value);
+  return Number.isNaN(parsed) ? undefined : parsed;
+}
+
+function formatLayoutLabel(option: string) {
+  return option
+    .replace(/[-_]/g, ' ')
+    .replace(/\s+/g, ' ')
+    .replace(/^\w|\s\w/g, (char) => char.toUpperCase());
+}

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

@@ -0,0 +1,292 @@
+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,
+  SchemaEntry,
+  isBooleanFieldType,
+} from './types';
+
+type SpecialCategorySectionProps = {
+  category: string;
+  entries: SchemaEntry[];
+  attributeMeta?: AttributeMetaMap;
+  attributes: NodeDefaultAttribute;
+  onAttributeChange: (name: string, value: unknown) => void;
+  componentType?: string;
+  projectColors?: ProjectColors;
+  layoutContext?: LayoutContext;
+  viewAttributes?: NodeDefaultAttribute;
+  meta?: {
+    label?: string;
+    description?: string;
+  };
+};
+
+type BoxFieldSlot = 'top' | 'bottom' | 'left' | 'right';
+
+const FIELD_SLOT_MATCHERS: Record<BoxFieldSlot, RegExp> = {
+  top: /(^|[-_])(top)$/i,
+  bottom: /(^|[-_])(bottom)$/i,
+  left: /(^|[-_])(left)$/i,
+  right: /(^|[-_])(right)$/i,
+};
+
+export function SpecialCategorySection({
+  category,
+  entries,
+  attributeMeta,
+  attributes,
+  onAttributeChange,
+  componentType,
+  projectColors,
+  layoutContext,
+  viewAttributes,
+  meta,
+}: SpecialCategorySectionProps) {
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const normalizedTitle =
+    meta?.label && meta.label.trim().length > 0
+      ? meta.label
+      : category && category.length > 0
+        ? category.charAt(0).toUpperCase() + category.slice(1)
+        : 'Special';
+  const normalizedDescription = meta?.description;
+  const requiresAdvancedToggle =
+    category === 'padding' || category === 'margin' || category === 'offset';
+
+  const shouldUseBoxLayout = requiresAdvancedToggle;
+
+  const detectFieldSlot = (fieldName: string): BoxFieldSlot | undefined => {
+    if (!shouldUseBoxLayout) {
+      return undefined;
+    }
+    const normalized = fieldName
+      .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+      .replace(/\s+/g, '-')
+      .toLowerCase();
+    return (Object.keys(FIELD_SLOT_MATCHERS) as BoxFieldSlot[]).find((slot) =>
+      FIELD_SLOT_MATCHERS[slot].test(normalized),
+    );
+  };
+
+  const renderFields = () => {
+    if (!entries.length) {
+      return (
+        <p className="special-category-section__placeholder">
+          -- not defined --
+        </p>
+      );
+    }
+    const fieldsClassNames = [
+      'special-category-section__fields',
+      shouldUseBoxLayout ? 'special-category-section__fields--box' : '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+    return (
+      <div className={fieldsClassNames}>
+        {entries.map(({ name, type }) => {
+          const label = attributeMeta?.[name]?.label ?? name;
+          const description = attributeMeta?.[name]?.description;
+          const preferredScale = toPreferredScale(
+            attributeMeta?.[name]?.preferedScale,
+          );
+          const currentValue = (attributes as Record<string, unknown>)[name];
+          const isBoolean = isBooleanFieldType(type);
+          const fieldSlot = detectFieldSlot(name);
+          const wrapperClassNames = [
+            'attributes-editor__field-wrapper',
+            'special-category-section__field',
+            isBoolean ? 'attributes-editor__field-wrapper--boolean' : '',
+          ]
+            .filter(Boolean)
+            .join(' ');
+          return (
+            <FieldInfoTooltip key={name} description={description}>
+              <div className={wrapperClassNames} data-field-slot={fieldSlot}>
+                {!isBoolean ? (
+                  <p className="attributes-editor__field-label">{label}</p>
+                ) : null}
+                <Field
+                  name={name}
+                  type={type}
+                  value={currentValue}
+                  onChange={(val) => onAttributeChange(name, val)}
+                  componentType={componentType}
+                  projectColors={projectColors}
+                  layoutContext={layoutContext}
+                  viewAttributes={viewAttributes}
+                  label={isBoolean ? label : undefined}
+                  preferredScale={preferredScale}
+                />
+              </div>
+            </FieldInfoTooltip>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const renderContent = () => {
+    if (!entries.length) {
+      return (
+        <p className="special-category-section__placeholder">
+          -- not defined --
+        </p>
+      );
+    }
+
+    if (!requiresAdvancedToggle) {
+      return renderFields();
+    }
+
+    // Separate directional fields (paddingTop, etc.) from shorthand fields (padding, paddingHorizontal, etc.)
+    const boxEntries = entries
+      .filter((entry) => detectFieldSlot(entry.name))
+      .sort((a, b) => {
+        const slotOrder: BoxFieldSlot[] = ['top', 'left', 'right', 'bottom'];
+        const slotA = detectFieldSlot(a.name);
+        const slotB = detectFieldSlot(b.name);
+        const indexA = slotA ? slotOrder.indexOf(slotA) : 999;
+        const indexB = slotB ? slotOrder.indexOf(slotB) : 999;
+        return indexA - indexB;
+      });
+    const baseEntries = entries.filter((entry) => !detectFieldSlot(entry.name));
+
+    if (boxEntries.length === 0) {
+      return (
+        <p className="special-category-section__placeholder">
+          -- not defined --
+        </p>
+      );
+    }
+
+    // Always show directional fields in box layout
+    const boxFieldsJSX = (
+      <div className="special-category-section__fields special-category-section__fields--box">
+        {boxEntries.map(({ name, type }) => {
+          const label = attributeMeta?.[name]?.label ?? name;
+          const description = attributeMeta?.[name]?.description;
+          const preferredScale = toPreferredScale(
+            attributeMeta?.[name]?.preferedScale,
+          );
+          const currentValue = (attributes as Record<string, unknown>)[name];
+          const isBoolean = isBooleanFieldType(type);
+          const fieldSlot = detectFieldSlot(name);
+          const wrapperClassNames = [
+            'attributes-editor__field-wrapper',
+            'special-category-section__field',
+            isBoolean ? 'attributes-editor__field-wrapper--boolean' : '',
+          ]
+            .filter(Boolean)
+            .join(' ');
+          return (
+            <FieldInfoTooltip key={name} description={description}>
+              <div className={wrapperClassNames} data-field-slot={fieldSlot}>
+                {!isBoolean ? (
+                  <p className="attributes-editor__field-label">{label}</p>
+                ) : null}
+                <Field
+                  name={name}
+                  type={type}
+                  value={currentValue}
+                  onChange={(val) => onAttributeChange(name, val)}
+                  componentType={componentType}
+                  projectColors={projectColors}
+                  layoutContext={layoutContext}
+                  viewAttributes={viewAttributes}
+                  label={isBoolean ? label : undefined}
+                  preferredScale={preferredScale}
+                />
+              </div>
+            </FieldInfoTooltip>
+          );
+        })}
+      </div>
+    );
+
+    // Show shorthand fields only when advanced is toggled
+    const baseFieldsJSX =
+      showAdvanced && baseEntries.length > 0 ? (
+        <div className="special-category-section__fields">
+          {baseEntries.map(({ name, type }) => {
+            const label = attributeMeta?.[name]?.label ?? name;
+            const description = attributeMeta?.[name]?.description;
+            const preferredScale = toPreferredScale(
+              attributeMeta?.[name]?.preferedScale,
+            );
+            const currentValue = (attributes as Record<string, unknown>)[name];
+            const isBoolean = isBooleanFieldType(type);
+            const wrapperClassNames = [
+              'attributes-editor__field-wrapper',
+              'special-category-section__field',
+              isBoolean ? 'attributes-editor__field-wrapper--boolean' : '',
+            ]
+              .filter(Boolean)
+              .join(' ');
+            return (
+              <FieldInfoTooltip key={name} description={description}>
+                <div className={wrapperClassNames}>
+                  {!isBoolean ? (
+                    <p className="attributes-editor__field-label">{label}</p>
+                  ) : null}
+                  <Field
+                    name={name}
+                    type={type}
+                    value={currentValue}
+                    onChange={(val) => onAttributeChange(name, val)}
+                    componentType={componentType}
+                    projectColors={projectColors}
+                    layoutContext={layoutContext}
+                    viewAttributes={viewAttributes}
+                    label={isBoolean ? label : undefined}
+                    preferredScale={preferredScale}
+                  />
+                </div>
+              </FieldInfoTooltip>
+            );
+          })}
+        </div>
+      ) : null;
+
+    return (
+      <>
+        {boxFieldsJSX}
+        {baseFieldsJSX}
+      </>
+    );
+  };
+
+  // Check if we have shorthand fields to show the toggle
+  const baseEntries = entries.filter((entry) => !detectFieldSlot(entry.name));
+  const shouldShowToggle = requiresAdvancedToggle && baseEntries.length > 0;
+
+  return (
+    <section className="special-category-section">
+      <div className="special-category-section__header">
+        <p className="special-category-section__title">{normalizedTitle}</p>
+        {shouldShowToggle ? (
+          <button
+            type="button"
+            onClick={() => setShowAdvanced((prev) => !prev)}
+            className="special-category-section__toggle"
+            data-active={showAdvanced}
+          >
+            {showAdvanced ? 'Show less' : 'Show more'}
+          </button>
+        ) : null}
+      </div>
+      {normalizedDescription ? (
+        <p className="special-category-section__description">
+          {normalizedDescription}
+        </p>
+      ) : null}
+      {renderContent()}
+    </section>
+  );
+}

package/src/attributes-editor/types.ts

@@ -0,0 +1,30 @@
+import type {
+  AlignItemsOptionType,
+  FlexDirectionOptionType,
+  JustifyContentOptionType,
+} from '../build-components/View/ViewProps.generated';
+import { getAttributeMeta } from '../utils/patterns';
+
+export type SchemaEntry = {
+  name: string;
+  type: string | string[];
+};
+
+export type AttributeMetaMap = ReturnType<typeof getAttributeMeta>;
+
+export type LayoutFieldName = 'flexDirection' | 'alignItems' | 'justifyContent';
+
+export type LayoutContext = {
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+};
+
+const BOOLEAN_ALIASES = new Set(['bool', 'boolean']);
+
+export function isBooleanFieldType(type: string | string[]): boolean {
+  if (Array.isArray(type)) return false;
+  if (typeof type !== 'string') return false;
+  const normalized = type.trim().toLowerCase();
+  return BOOLEAN_ALIASES.has(normalized);
+}