@developer_tribe/react-builder 0.1.32 → 1.0.2

package/src/AttributesEditor.tsx

@@ -1,347 +1,470 @@
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Node, NodeData, NodeDefaultAttribute } from './types/Node';
 import { isNodeString } from './utils/analyseNode';
+import { useLogRender } from './utils/useLogRender';
 import {
+  getAttributeMeta,
   getAttributeSchema,
-  getTypeSchema,
-  getArrayItemType,
-  isPrimitiveType,
+  getPatternByType,
 } from './utils/patterns';
+import { useRenderStore } from './store';
+import { Field } from './attributes-editor/Field';
+import { SpecialCategorySection } from './attributes-editor/SpecialCategorySection';
+import {
+  LayoutContext,
+  SchemaEntry,
+  isBooleanFieldType,
+} from './attributes-editor/types';
+import { FieldInfoTooltip } from './attributes-editor/FieldInfoTooltip';
+import type { ViewPropsGenerated } from './build-components/View/ViewProps.generated';
+import useNode from './build-components/useNode';
 
 type AttributesEditorProps = {
   node: Node;
   onChange: (next: Node) => void;
 };
 
-function Field({
-  name,
-  type,
-  value,
-  onChange,
-  componentType,
-}: {
-  name: string;
-  type: string | string[];
-  value: any;
-  onChange: (v: any) => void;
-  // The current node's component type is needed to resolve custom type schemas
-  componentType?: string;
-}) {
-  // Render enum selector
-  if (Array.isArray(type)) {
-    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>
-    );
+type TabId = 'style' | 'container' | 'other';
+
+type TabConfig = {
+  id: TabId;
+  label: string;
+  entries: SchemaEntry[];
+};
+
+type SpecialSection = {
+  key: string;
+  entries: SchemaEntry[];
+  meta?: {
+    label?: string;
+    description?: string;
+    sort?: number;
+  };
+};
+
+type TabContentInfo = Record<
+  TabId,
+  {
+    baseCount: number;
+    specialCount: number;
   }
+>;
+
+export function AttributesEditor({ node, onChange }: AttributesEditorProps) {
+  useLogRender('AttributesEditor');
+  if (!node || isNodeString(node)) return null;
 
-  // Arrays: detect X[] (including string[]/number[]/boolean[]/CustomType[])
-  const itemType = typeof type === 'string' ? getArrayItemType(type) : null;
-  if (itemType) {
-    const arr: any[] = Array.isArray(value) ? value : [];
+  const baseData = node as NodeData<NodeDefaultAttribute>;
+  const data = useNode(baseData);
+  const appConfig = useRenderStore((state) => state.appConfig);
+  const projectColors = useMemo(() => {
+    const colors = 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];
+        if (typeof value === 'string' && value.trim()) {
+          colors.add(value.trim());
+        }
+      });
+    });
+    return Array.from(colors);
+  }, [appConfig]);
 
-    // Primitive arrays with add/remove controls
-    if (isPrimitiveType(itemType)) {
-      return (
-        <div style={{ display: 'grid', gap: 8 }}>
-          {arr.map((item, idx) => (
-            <div
-              key={idx}
-              style={{ display: 'flex', gap: 8, alignItems: 'center' }}
-            >
-              {itemType === 'number' ? (
-                <input
-                  type="number"
-                  value={item ?? ''}
-                  onChange={(e) => {
-                    const next = [...arr];
-                    next[idx] =
-                      e.target.value === ''
-                        ? undefined
-                        : Number(e.target.value);
-                    onChange(next);
-                  }}
-                  className="input"
-                  style={{ flex: 1 }}
-                />
-              ) : itemType === 'boolean' ? (
-                <input
-                  type="checkbox"
-                  checked={Boolean(item)}
-                  onChange={(e) => {
-                    const next = [...arr];
-                    next[idx] = e.target.checked;
-                    onChange(next);
-                  }}
-                />
-              ) : (
-                <input
-                  type="text"
-                  value={item ?? ''}
-                  onChange={(e) => {
-                    const next = [...arr];
-                    next[idx] =
-                      e.target.value === '' ? undefined : 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>
+  const schema = getAttributeSchema(data?.type) ?? {};
+  const attributeMeta = getAttributeMeta(data?.type);
+  const attributes = (data?.attributes ?? {}) as NodeDefaultAttribute;
+  const viewAttributes = useMemo<
+    Partial<ViewPropsGenerated['attributes']> | undefined
+  >(
+    () =>
+      data?.type === 'View'
+        ? (attributes as ViewPropsGenerated['attributes'])
+        : undefined,
+    [attributes, data?.type],
+  );
+
+  const layoutContext = useMemo<LayoutContext>(
+    () => ({
+      flexDirection:
+        attributes?.flexDirection as LayoutContext['flexDirection'],
+      alignItems: attributes?.alignItems as LayoutContext['alignItems'],
+      justifyContent:
+        attributes?.justifyContent as LayoutContext['justifyContent'],
+    }),
+    [
+      attributes?.flexDirection,
+      attributes?.alignItems,
+      attributes?.justifyContent,
+    ],
+  );
+
+  const entries = useMemo(
+    () =>
+      Object.entries(schema).filter(([, type]) =>
+        typeof type === 'string' ? type !== 'never' : true,
+      ),
+    [schema],
+  );
+
+  const componentMeta = useMemo(
+    () => (data?.type ? getPatternByType(data.type)?.meta : undefined),
+    [data?.type],
+  );
+
+  const componentTitle = componentMeta?.label ?? data?.type ?? 'Component';
+  const componentDescription = componentMeta?.description;
+
+  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 { grouped, specialGroups } = 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);
+    };
+
+    entries.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, entries]);
+
+  const specialSectionsByTab = useMemo<Record<TabId, SpecialSection[]>>(() => {
+    const buckets: Record<TabId, SpecialSection[]> = {
+      style: [],
+      container: [],
+      other: [],
+    };
+
+    const compareSections = (a: SpecialSection, b: SpecialSection) => {
+      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 handleAttributeChange = useCallback(
+    (name: string, val: unknown) => {
+      const next: NodeData<NodeDefaultAttribute> = {
+        ...baseData,
+        attributes: {
+          ...((baseData?.attributes ?? {}) as NodeDefaultAttribute),
+          [name]: val,
+        },
+      };
+      onChange(next);
+    },
+    [baseData, onChange],
+  );
+
+  const renderSpecialSection = useCallback(
+    ({ key, entries: sectionEntries, meta }: SpecialSection) => {
+      if (key === 'size') {
+        const normalizedTitle =
+          meta?.label && meta.label.trim().length > 0
+            ? meta.label
+            : key.charAt(0).toUpperCase() + key.slice(1);
+        const normalizedDescription = meta?.description;
+        return (
+          <section key={key} className="special-category-section">
+            <div className="special-category-section__header">
+              <p className="special-category-section__title">
+                {normalizedTitle}
+              </p>
             </div>
-          ))}
-          <div>
-            <button
-              type="button"
-              onClick={() => {
-                const next = [
-                  ...arr,
-                  itemType === 'boolean'
-                    ? false
-                    : itemType === 'number'
-                      ? 0
-                      : '',
+            {normalizedDescription ? (
+              <p className="special-category-section__description">
+                {normalizedDescription}
+              </p>
+            ) : null}
+            <div className="attributes-editor__size-grid">
+              {sectionEntries.map(({ name, type }) => {
+                const label = attributeMeta?.[name]?.label ?? name;
+                const description = attributeMeta?.[name]?.description;
+                const preferredScale = attributeMeta?.[name]?.preferedScale;
+                const currentValue = (attributes as Record<string, unknown>)[
+                  name
                 ];
-                onChange(next);
-              }}
-            >
-              add
-            </button>
-          </div>
-        </div>
+                const isBoolean = isBooleanFieldType(type);
+                const wrapperClassNames = [
+                  'attributes-editor__field-wrapper',
+                  isBoolean ? 'attributes-editor__field-wrapper--boolean' : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ');
+                return (
+                  <FieldInfoTooltip key={name} description={description}>
+                    <div
+                      className={`${wrapperClassNames} attributes-editor__size-grid-item`}
+                    >
+                      {!isBoolean ? (
+                        <p className="attributes-editor__field-label">
+                          {label}
+                        </p>
+                      ) : null}
+                      <Field
+                        name={name}
+                        type={type}
+                        value={currentValue}
+                        onChange={(val) => handleAttributeChange(name, val)}
+                        componentType={data?.type}
+                        projectColors={projectColors}
+                        layoutContext={layoutContext}
+                        viewAttributes={viewAttributes}
+                        label={isBoolean ? label : undefined}
+                        preferredScale={preferredScale}
+                      />
+                    </div>
+                  </FieldInfoTooltip>
+                );
+              })}
+            </div>
+          </section>
+        );
+      }
+      return (
+        <SpecialCategorySection
+          key={key}
+          category={key}
+          entries={sectionEntries}
+          attributeMeta={attributeMeta}
+          attributes={attributes}
+          onAttributeChange={handleAttributeChange}
+          componentType={data?.type}
+          projectColors={projectColors}
+          layoutContext={layoutContext}
+          viewAttributes={viewAttributes}
+          meta={meta}
+        />
       );
-    }
+    },
+    [
+      attributeMeta,
+      attributes,
+      data?.type,
+      handleAttributeChange,
+      layoutContext,
+      projectColors,
+      viewAttributes,
+    ],
+  );
 
-    // Object arrays with nested editors
-    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]) => (
-                  <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}
-                    />
-                  </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>
-    );
-  }
+  const tabs = useMemo<TabConfig[]>(
+    () => [
+      { id: 'container', label: 'Container', entries: grouped.container },
+      { id: 'style', label: 'Styles', entries: grouped.style },
+      { id: 'other', label: 'Others', entries: grouped.other },
+    ],
+    [grouped],
+  );
 
-  // Non-array complex object types defined under pattern `types`
-  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]) => (
-            <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}
-              />
-            </React.Fragment>
-          ))}
-        </div>
+  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,
       );
-    }
-  }
+    });
 
-  if (type === 'number') {
-    return (
-      <input
-        type="number"
-        value={value ?? ''}
-        onChange={(e) =>
-          onChange(e.target.value === '' ? undefined : Number(e.target.value))
-        }
-        className="input"
-      />
-    );
-  }
-  if (type === 'boolean') {
-    return (
-      <input
-        type="checkbox"
-        checked={Boolean(value)}
-        onChange={(e) => onChange(e.target.checked)}
-      />
-    );
-  }
-  // Legacy support: string[]
-  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>
+    return info;
+  }, [specialSectionsByTab, tabs]);
+
+  const firstAvailableTab = useMemo<TabId>(
+    () =>
+      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 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={() => {
-              const next = [...arr, ''];
-              onChange(next);
-            }}
+            onClick={() => !disabled && setActiveTab(tab.id)}
+            disabled={disabled}
+            className={buttonClassNames}
           >
-            add
+            {tab.label}
+            {totalCount > 0 ? ` (${totalCount})` : ''}
           </button>
-        </div>
-      </div>
-    );
-  }
-  return (
-    <input
-      type="text"
-      value={value ?? ''}
-      onChange={(e) =>
-        onChange(e.target.value === '' ? undefined : e.target.value)
-      }
-      className="input"
-    />
+        );
+      })}
+    </div>
   );
-}
-
-export function AttributesEditor({ node, onChange }: AttributesEditorProps) {
-  if (!node || isNodeString(node)) return null;
-  const data = node as NodeData<NodeDefaultAttribute>;
-  const schema = getAttributeSchema(data?.type) ?? {};
-  const attributes = (data?.attributes ?? {}) as NodeDefaultAttribute;
 
-  const entries = Object.entries(schema);
   if (entries.length === 0) {
     return (
-      <div style={{ padding: 8, opacity: 0.7 }}>No editable attributes</div>
+      <div className="attributes-editor">
+        {headerSection}
+        {tabsSection}
+        {activeSpecialSections.map(renderSpecialSection)}
+        <div className="attributes-editor__empty-state">
+          No editable attributes
+        </div>
+      </div>
     );
   }
 
   return (
-    <div style={{}}>
-      {entries.map(([name, type]) => (
-        <React.Fragment key={name}>
-          <p style={{ alignSelf: 'center', marginBottom: 4, fontWeight: 700 }}>
-            {name}
-          </p>
-          <div style={{ marginBottom: 16 }}>
-            <Field
-              name={name}
-              type={type}
-              value={attributes?.[name]}
-              onChange={(val) => {
-                const next: NodeData<NodeDefaultAttribute> = {
-                  ...data,
-                  attributes: { ...(attributes ?? {}), [name]: val },
-                };
-                onChange(next);
-              }}
-              componentType={data?.type}
-            />
-          </div>
-        </React.Fragment>
-      ))}
+    <div className="attributes-editor">
+      {headerSection}
+      {tabsSection}
+      {activeSpecialSections.map(renderSpecialSection)}
+
+      {activeEntries.map(({ name, type }) => {
+        const label = attributeMeta?.[name]?.label ?? name;
+        const description = attributeMeta?.[name]?.description;
+        const preferredScale = attributeMeta?.[name]?.preferedScale;
+        const isBoolean = isBooleanFieldType(type);
+        const wrapperClassNames = [
+          'attributes-editor__field-wrapper',
+          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={attributes?.[name]}
+                onChange={(val) => handleAttributeChange(name, val)}
+                componentType={data?.type}
+                projectColors={projectColors}
+                layoutContext={layoutContext}
+                viewAttributes={viewAttributes}
+                label={isBoolean ? label : undefined}
+                preferredScale={preferredScale}
+              />
+            </div>
+          </FieldInfoTooltip>
+        );
+      })}
     </div>
   );
 }