@developer_tribe/react-builder 1.0.1 → 1.0.3

package/src/attributes-editor/Field.tsx

@@ -0,0 +1,669 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import type { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
+import { ColorModal, resolveProjectColorValue } from '../modals/ColorModal';
+import type { ProjectColors } from '../types/Project';
+import {
+  getArrayItemType,
+  getTypeSchema,
+  isPrimitiveType,
+} from '../utils/patterns';
+import { Checkbox } from '../components/Checkbox';
+import { LayoutPreviewPicker } from './LayoutPreviewPicker';
+import { LayoutContext, LayoutFieldName, isBooleanFieldType } from './types';
+
+export type FieldProps = {
+  name: string;
+  type: string | string[];
+  value: any;
+  onChange: (v: any) => void;
+  componentType?: string;
+  projectColors?: ProjectColors;
+  layoutContext?: LayoutContext;
+  viewAttributes?: Partial<ViewPropsGenerated['attributes']>;
+  label?: React.ReactNode;
+  preferredScale?: string;
+};
+
+const layoutFieldNames: LayoutFieldName[] = [
+  'flexDirection',
+  'alignItems',
+  'justifyContent',
+];
+
+function isLayoutField(name: string): name is LayoutFieldName {
+  return layoutFieldNames.includes(name as LayoutFieldName);
+}
+
+export function Field({
+  name,
+  type,
+  value,
+  onChange,
+  componentType,
+  projectColors,
+  layoutContext,
+  viewAttributes,
+  label,
+  preferredScale,
+}: FieldProps) {
+  if (Array.isArray(type)) {
+    if (isLayoutField(name)) {
+      const enumOptions = type.filter(
+        (opt): opt is string => typeof opt === 'string' && opt.length > 0,
+      );
+      return (
+        <LayoutPreviewPicker
+          mode={name}
+          options={enumOptions}
+          value={typeof value === 'string' ? value : undefined}
+          onChange={onChange}
+          layoutContext={layoutContext}
+          viewAttributes={viewAttributes}
+        />
+      );
+    }
+    return (
+      <select
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        className="input"
+      >
+        <option value="">(none)</option>
+        {type.map((opt) => (
+          <option key={opt} value={opt}>
+            {opt}
+          </option>
+        ))}
+      </select>
+    );
+  }
+
+  const itemType = typeof type === 'string' ? getArrayItemType(type) : null;
+  if (itemType) {
+    const arr: any[] = Array.isArray(value) ? value : [];
+
+    if (isPrimitiveType(itemType)) {
+      const renderPrimitiveArrayItem = (itemValue: any, idx: number) => {
+        switch (itemType) {
+          case 'number':
+            return (
+              <input
+                type="number"
+                value={itemValue ?? ''}
+                onChange={(e) => {
+                  const next = [...arr];
+                  next[idx] =
+                    e.target.value === '' ? undefined : Number(e.target.value);
+                  onChange(next);
+                }}
+                className="input"
+                style={{ flex: 1 }}
+              />
+            );
+          case 'boolean':
+          case 'bool':
+            return (
+              <Checkbox
+                checked={Boolean(itemValue)}
+                onChange={(checked) => {
+                  const next = [...arr];
+                  next[idx] = checked;
+                  onChange(next);
+                }}
+                name={`${name}-${idx}`}
+              />
+            );
+          case 'string':
+            return (
+              <input
+                type="text"
+                value={itemValue ?? ''}
+                onChange={(e) => {
+                  const next = [...arr];
+                  next[idx] =
+                    e.target.value === '' ? undefined : e.target.value;
+                  onChange(next);
+                }}
+                className="input"
+                style={{ flex: 1 }}
+              />
+            );
+          case 'color':
+            return (
+              <ColorPickerButton
+                value={typeof itemValue === 'string' ? itemValue : undefined}
+                onChange={(hex) => {
+                  const next = [...arr];
+                  next[idx] = hex;
+                  onChange(next);
+                }}
+                projectColors={projectColors}
+              />
+            );
+          default:
+            return <p>---not-implemented----</p>;
+        }
+      };
+
+      return (
+        <div style={{ display: 'grid', gap: 8 }}>
+          {arr.map((item, idx) => (
+            <div
+              key={idx}
+              style={{ display: 'flex', gap: 8, alignItems: 'center' }}
+            >
+              {renderPrimitiveArrayItem(item, idx)}
+              <button
+                type="button"
+                onClick={() => {
+                  const next = arr.filter((_, i) => i !== idx);
+                  onChange(next.length ? next : undefined);
+                }}
+              >
+                remove
+              </button>
+            </div>
+          ))}
+          <div>
+            <button
+              type="button"
+              onClick={() => {
+                const next = [
+                  ...arr,
+                  itemType === 'boolean'
+                    ? false
+                    : itemType === 'number'
+                      ? 0
+                      : '',
+                ];
+                onChange(next);
+              }}
+            >
+              add
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    const schema = getTypeSchema(componentType, itemType) ?? {};
+    return (
+      <div style={{ display: 'grid', gap: 8 }}>
+        {arr.map((item, idx) => {
+          const obj = (item ?? {}) as Record<string, unknown>;
+          return (
+            <div
+              key={idx}
+              style={{ border: '1px solid #ddd', borderRadius: 6, padding: 8 }}
+            >
+              <div
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '1fr 1fr',
+                  gap: 8,
+                }}
+              >
+                {Object.entries(schema).map(([fieldName, fieldType]) => {
+                  if (isBooleanFieldType(fieldType)) {
+                    return (
+                      <div key={fieldName} style={{ gridColumn: '1 / -1' }}>
+                        <Field
+                          name={fieldName}
+                          type={fieldType}
+                          value={obj?.[fieldName as keyof typeof obj]}
+                          onChange={(val) => {
+                            const next = [...arr];
+                            const nextObj = {
+                              ...(obj ?? {}),
+                              [fieldName]: val,
+                            };
+                            next[idx] = nextObj;
+                            onChange(next);
+                          }}
+                          componentType={componentType}
+                          projectColors={projectColors}
+                          layoutContext={layoutContext}
+                          viewAttributes={viewAttributes}
+                          label={fieldName}
+                        />
+                      </div>
+                    );
+                  }
+                  return (
+                    <React.Fragment key={fieldName}>
+                      <div style={{ alignSelf: 'center' }}>{fieldName}</div>
+                      <Field
+                        name={fieldName}
+                        type={fieldType}
+                        value={obj?.[fieldName as keyof typeof obj]}
+                        onChange={(val) => {
+                          const next = [...arr];
+                          const nextObj = { ...(obj ?? {}), [fieldName]: val };
+                          next[idx] = nextObj;
+                          onChange(next);
+                        }}
+                        componentType={componentType}
+                        projectColors={projectColors}
+                        layoutContext={layoutContext}
+                        viewAttributes={viewAttributes}
+                      />
+                    </React.Fragment>
+                  );
+                })}
+              </div>
+              <div style={{ marginTop: 8 }}>
+                <button
+                  type="button"
+                  onClick={() => {
+                    const next = arr.filter((_, i) => i !== idx);
+                    onChange(next.length ? next : undefined);
+                  }}
+                >
+                  remove
+                </button>
+              </div>
+            </div>
+          );
+        })}
+        <div>
+          <button
+            type="button"
+            onClick={() => {
+              const empty: Record<string, unknown> = {};
+              const next = [...arr, empty];
+              onChange(next);
+            }}
+          >
+            add
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (typeof type === 'string' && !isPrimitiveType(type)) {
+    const schema = getTypeSchema(componentType, type);
+    if (schema) {
+      const obj = (value ?? {}) as Record<string, unknown>;
+      return (
+        <div
+          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}
+        >
+          {Object.entries(schema).map(([fieldName, fieldType]) => {
+            if (isBooleanFieldType(fieldType)) {
+              return (
+                <div key={fieldName} style={{ gridColumn: '1 / -1' }}>
+                  <Field
+                    name={fieldName}
+                    type={fieldType}
+                    value={obj?.[fieldName as keyof typeof obj]}
+                    onChange={(val) => {
+                      const nextObj = { ...(obj ?? {}), [fieldName]: val };
+                      onChange(nextObj);
+                    }}
+                    componentType={componentType}
+                    projectColors={projectColors}
+                    layoutContext={layoutContext}
+                    viewAttributes={viewAttributes}
+                    label={fieldName}
+                  />
+                </div>
+              );
+            }
+            return (
+              <React.Fragment key={fieldName}>
+                <div style={{ alignSelf: 'center' }}>{fieldName}</div>
+                <Field
+                  name={fieldName}
+                  type={fieldType}
+                  value={obj?.[fieldName as keyof typeof obj]}
+                  onChange={(val) => {
+                    const nextObj = { ...(obj ?? {}), [fieldName]: val };
+                    onChange(nextObj);
+                  }}
+                  componentType={componentType}
+                  projectColors={projectColors}
+                  layoutContext={layoutContext}
+                  viewAttributes={viewAttributes}
+                />
+              </React.Fragment>
+            );
+          })}
+        </div>
+      );
+    }
+  }
+
+  if (type === 'string[]') {
+    const arr: string[] = Array.isArray(value) ? value : [];
+    return (
+      <div style={{ display: 'grid', gap: 8 }}>
+        {arr.map((item, idx) => (
+          <div
+            key={idx}
+            style={{ display: 'flex', gap: 8, alignItems: 'center' }}
+          >
+            <input
+              type="text"
+              value={item ?? ''}
+              onChange={(e) => {
+                const next = [...arr];
+                next[idx] = e.target.value;
+                onChange(next);
+              }}
+              className="input"
+              style={{ flex: 1 }}
+            />
+            <button
+              type="button"
+              onClick={() => {
+                const next = arr.filter((_, i) => i !== idx);
+                onChange(next.length ? next : undefined);
+              }}
+            >
+              remove
+            </button>
+          </div>
+        ))}
+        <div>
+          <button
+            type="button"
+            onClick={() => {
+              const next = [...arr, ''];
+              onChange(next);
+            }}
+          >
+            add
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (typeof type !== 'string') {
+    return <p>---not-implemented----</p>;
+  }
+
+  switch (type) {
+    case 'size':
+      return (
+        <SizeField
+          value={value}
+          onChange={onChange}
+          preferredScale={preferredScale}
+          fieldName={name}
+        />
+      );
+    case 'number':
+      return (
+        <input
+          type="number"
+          value={value ?? ''}
+          onChange={(e) =>
+            onChange(e.target.value === '' ? undefined : Number(e.target.value))
+          }
+          className="input"
+        />
+      );
+    case 'boolean':
+    case 'bool':
+      return (
+        <Checkbox
+          label={label ?? name}
+          checked={Boolean(value)}
+          onChange={(checked) => onChange(checked)}
+          name={name}
+        />
+      );
+    case 'string':
+      return (
+        <input
+          type="text"
+          value={value ?? ''}
+          onChange={(e) =>
+            onChange(e.target.value === '' ? undefined : e.target.value)
+          }
+          className="input"
+        />
+      );
+    case 'color':
+      return (
+        <ColorPickerButton
+          value={typeof value === 'string' ? value : undefined}
+          onChange={(hex) => onChange(hex)}
+          projectColors={projectColors}
+        />
+      );
+    default:
+      return <p>---not-implemented----</p>;
+  }
+}
+
+type ColorPickerButtonProps = {
+  value?: string;
+  onChange: (color?: string) => void;
+  projectColors?: ProjectColors;
+};
+
+function ColorPickerButton({
+  value,
+  onChange,
+  projectColors,
+}: ColorPickerButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const normalizedValue = typeof value === 'string' ? value : undefined;
+  const previewColor = useMemo(
+    () =>
+      resolveProjectColorValue(normalizedValue, projectColors) ??
+      normalizedValue,
+    [normalizedValue, projectColors],
+  );
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setIsOpen(true)}
+        style={{
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 8,
+          borderRadius: 6,
+          border: '1px solid #ddd',
+          padding: '8px 10px',
+          background: '#fff',
+          cursor: 'pointer',
+        }}
+      >
+        <span
+          aria-hidden
+          style={{
+            width: 32,
+            height: 32,
+            borderRadius: 6,
+            border: '1px solid rgba(0,0,0,0.1)',
+            background: previewColor ?? 'transparent',
+          }}
+        />
+        <span style={{ flex: 1, textAlign: 'left', fontWeight: 500 }}>
+          {normalizedValue ?? 'Select color'}
+        </span>
+        <span style={{ fontSize: 12, color: '#666' }}>Open</span>
+      </button>
+      {isOpen ? (
+        <ColorModal
+          value={normalizedValue}
+          projectColors={projectColors}
+          onSelect={(hex) => {
+            onChange(hex);
+            setIsOpen(false);
+          }}
+          onClose={() => setIsOpen(false)}
+          onClear={() => {
+            onChange(undefined);
+            setIsOpen(false);
+          }}
+        />
+      ) : null}
+    </>
+  );
+}
+
+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/FieldInfoTooltip.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+type FieldInfoTooltipProps = {
+  description?: string;
+  children: React.ReactNode;
+};
+
+export function FieldInfoTooltip({
+  description,
+  children,
+}: FieldInfoTooltipProps) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  if (!description || !description.trim()) {
+    return <>{children}</>;
+  }
+
+  const bubbleClassName = [
+    'field-info-tooltip__bubble',
+    isHovered ? 'field-info-tooltip__bubble--visible' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+  const handleShow = () => setIsHovered(true);
+  const handleHide = () => setIsHovered(false);
+
+  return (
+    <div className="field-info-tooltip">
+      {children}
+      <button
+        className="field-info-tooltip__trigger"
+        onMouseEnter={handleShow}
+        onMouseLeave={handleHide}
+        onFocus={handleShow}
+        onBlur={handleHide}
+        type="button"
+      >
+        Show info
+        <span
+          className={bubbleClassName}
+          role="tooltip"
+          aria-hidden={!isHovered}
+        >
+          {description}
+        </span>
+      </button>
+    </div>
+  );
+}