@developer_tribe/react-builder 0.1.32 → 1.0.2

package/src/components/AttributesEditorPanel.tsx

@@ -0,0 +1,58 @@
+import { AttributesEditor, Node, NodeData } from '..';
+import { useLogRender } from '../utils/useLogRender';
+
+interface AttributesEditorPanelProps {
+  current: Node;
+  attributes: any;
+  onChange: (data: Node) => void;
+  setCurrent: (current: Node) => void;
+}
+
+export function AttributesEditorPanel({
+  current,
+  attributes,
+  onChange,
+  setCurrent,
+}: AttributesEditorPanelProps) {
+  useLogRender('AttributesEditorPanel');
+  if (!current) return null;
+
+  function replaceNode(root: Node, target: Node, next: Node): Node {
+    if (root === target) return next;
+    if (root === null || root === undefined) return root;
+    if (typeof root === 'string') return root;
+    if (Array.isArray(root)) {
+      let changed = false;
+      const arr = root.map((item) => {
+        const r = replaceNode(item, target, next);
+        if (r !== item) changed = true;
+        return r;
+      });
+      return changed ? arr : root;
+    }
+    const data = root as any;
+    if ('children' in data) {
+      const prev = data.children;
+      const replaced = Array.isArray(prev)
+        ? prev.map((c: Node) => replaceNode(c, target, next))
+        : replaceNode(prev as Node, target, next);
+      if (replaced !== prev) {
+        data.children = replaced;
+        return { ...data, children: replaced } as Node;
+      }
+    }
+    return root;
+  }
+  const handleAttributesChange = (next: Node) => {
+    const root = attributes as Node;
+    const updated = replaceNode(root, current, next);
+    onChange(updated);
+    setCurrent(next);
+  };
+
+  return (
+    <div style={{ padding: 12 }}>
+      <AttributesEditor node={current} onChange={handleAttributesChange} />
+    </div>
+  );
+}

package/src/components/Breadcrumb.tsx

@@ -0,0 +1,80 @@
+import { ReactNode } from 'react';
+import { useLogRender } from '../utils/useLogRender';
+export type BreadcrumbItem = {
+  label: string;
+  to?: string;
+  onClick?: () => void;
+};
+
+type BreadcrumbProps = {
+  items: BreadcrumbItem[];
+  separator?: ReactNode;
+  ariaLabel?: string;
+  onBack?: () => void;
+  backLabel?: string;
+};
+
+export function Breadcrumb({
+  items,
+  separator = '/',
+  ariaLabel = 'Breadcrumb',
+  onBack,
+  backLabel = 'Back',
+}: BreadcrumbProps) {
+  useLogRender('Breadcrumb');
+  return (
+    <nav className="breadcrumb" aria-label={ariaLabel}>
+      {onBack && (
+        <button
+          type="button"
+          className="breadcrumb__back"
+          onClick={onBack}
+          aria-label="Go back"
+        >
+          <span className="breadcrumb__back-icon" aria-hidden>
+            ←
+          </span>
+          <span>{backLabel}</span>
+        </button>
+      )}
+      <ol className="breadcrumb__list">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          const isClickable = !isLast && (item.to || item.onClick);
+          return (
+            <li
+              className={`breadcrumb__item ${isClickable ? 'breadcrumb__item--clickable' : ''}`}
+              key={`${item.label}-${index}`}
+              onClick={isClickable ? item.onClick : undefined}
+              role={isClickable ? 'button' : undefined}
+              tabIndex={isClickable ? 0 : undefined}
+              onKeyDown={
+                isClickable && item.onClick
+                  ? (e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        item.onClick?.();
+                      }
+                    }
+                  : undefined
+              }
+            >
+              {index > 0 && (
+                <span className="breadcrumb__separator" aria-hidden>
+                  {separator}
+                </span>
+              )}
+              {isLast || (!item.to && !item.onClick) ? (
+                <span className="breadcrumb__current" aria-current="page">
+                  {item.label}
+                </span>
+              ) : (
+                <span className="breadcrumb__link">{item.label}</span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/src/components/Builder.tsx

@@ -0,0 +1,375 @@
+import { useCallback, useMemo, useState } from 'react';
+import {
+  isNodeArray,
+  isNodeNullOrUndefined,
+  isNodeString,
+  Node,
+  NodeData,
+  NodeDefaultAttribute,
+  allcomponentNames,
+} from '..';
+import { Breadcrumb } from './Breadcrumb';
+import { useLogRender } from '../utils/useLogRender';
+import { getDefaultsForType, getPatternByType } from '../utils/patterns';
+import { AddComponentModal } from '../modals/AddComponentModal';
+
+type BuilderEditorProps = {
+  data: Node;
+  setData: (data: Node) => void;
+  current: Node;
+  setCurrent: (current: Node) => void;
+};
+
+interface BuilderEditorComponentProps {
+  node: Node;
+  onClick: (node: Node) => void;
+  onAdd?: () => void;
+}
+
+function BuilderButton({ node, onClick }: { node: Node; onClick: () => void }) {
+  if (isNodeNullOrUndefined(node)) {
+    return <div className="builder__placeholder">Null or undefined</div>;
+  }
+  if (isNodeString(node)) {
+    return <div className="builder__text">{node as string}</div>;
+  }
+  const nodeData = node as NodeData<NodeDefaultAttribute>;
+
+  let extra = '';
+  if (nodeData.attributes?.condition) {
+    extra = ` (${nodeData.attributes.condition} ${nodeData.attributes.conditionVariable})`;
+  }
+  const patternLabel = getPatternByType(nodeData.type)?.meta?.label?.trim();
+  const baseLabel =
+    patternLabel && patternLabel.length > 0 ? patternLabel : nodeData.type;
+  const conditionLabel = extra.trim() ? extra : '';
+  const fullLabel = `${baseLabel}${conditionLabel}`.trim();
+  return (
+    <a onClick={onClick} className="builder__button">
+      <span className="builder__button-label">{baseLabel}</span> <br />
+      {conditionLabel && (
+        <span className="builder__button-condition">{conditionLabel}</span>
+      )}
+    </a>
+  );
+}
+
+function BuilderComponent({
+  node,
+  onClick,
+  onAdd,
+}: BuilderEditorComponentProps) {
+  if (isNodeNullOrUndefined(node)) {
+    return <div className="builder__placeholder">Null or undefined</div>;
+  }
+  if (isNodeString(node)) {
+    return (
+      <div className="builder__text">
+        {node as string} (Please define a node)
+      </div>
+    );
+  }
+
+  const addButton = onAdd && (
+    <button
+      type="button"
+      className="editor-button builder__add-button"
+      onClick={onAdd}
+    >
+      <span className="builder__add-button-icon" aria-hidden="true">
+        +
+      </span>
+      <span>Add component</span>
+    </button>
+  );
+
+  if (isNodeArray(node)) {
+    return (
+      <div className="builder__list">
+        {(node as Node[]).map((item, index) => (
+          <BuilderButton
+            onClick={() => {
+              onClick(item);
+            }}
+            key={index}
+            node={item}
+          />
+        ))}
+        {addButton}
+      </div>
+    );
+  }
+
+  const nodeData = node as NodeData<NodeDefaultAttribute>;
+  const children = nodeData.children
+    ? isNodeArray(nodeData.children)
+      ? (nodeData.children as Node[])
+      : [nodeData.children]
+    : null;
+
+  return (
+    <div className="builder__node">
+      <div className="builder__children">
+        {children &&
+          children.map((child, index) => (
+            <BuilderButton
+              onClick={() => {
+                onClick(child);
+              }}
+              key={index}
+              node={child}
+            />
+          ))}
+      </div>
+      {addButton}
+    </div>
+  );
+}
+
+export function Builder({
+  data,
+  setData,
+  current,
+  setCurrent,
+}: BuilderEditorProps) {
+  useLogRender('Builder');
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const breadcrumbPath = useMemo(() => {
+    const path = findNodePath(data, current);
+    if (path.length) return path;
+    if (!isNodeNullOrUndefined(current)) return [current];
+    if (!isNodeNullOrUndefined(data)) return [data];
+    return [];
+  }, [data, current]);
+
+  const handleNodeSelect = useCallback(
+    (node: Node) => {
+      setCurrent(node);
+    },
+    [setCurrent],
+  );
+
+  const breadcrumbItems = useMemo(
+    () =>
+      breadcrumbPath.map((node, index) => ({
+        label: getNodeLabel(node),
+        onClick:
+          index === breadcrumbPath.length - 1
+            ? undefined
+            : () => handleNodeSelect(node),
+      })),
+    [breadcrumbPath, handleNodeSelect],
+  );
+
+  const handleBackClick = useCallback(() => {
+    if (breadcrumbPath.length < 2) return;
+    handleNodeSelect(breadcrumbPath[breadcrumbPath.length - 2]);
+  }, [breadcrumbPath, handleNodeSelect]);
+
+  const handleAddChild = useCallback(
+    (type: string) => {
+      if (
+        isNodeNullOrUndefined(current) ||
+        isNodeString(current) ||
+        isNodeArray(current)
+      ) {
+        return;
+      }
+
+      const parent = current as NodeData<NodeDefaultAttribute>;
+      const nextChild = createDefaultNode(type);
+      const updatedParent: NodeData<NodeDefaultAttribute> = {
+        ...parent,
+        children: appendChild(parent.children, nextChild),
+      };
+      const updatedRoot = replaceNode(data, current, updatedParent);
+      setData(updatedRoot);
+      setCurrent(updatedParent);
+    },
+    [current, data, setData, setCurrent],
+  );
+
+  const allowedChildTypes = useMemo(
+    () => getAllowedChildTypes(current),
+    [current],
+  );
+  const parentType = useMemo(() => {
+    if (
+      isNodeNullOrUndefined(current) ||
+      isNodeString(current) ||
+      isNodeArray(current)
+    ) {
+      return null;
+    }
+    return (current as NodeData<NodeDefaultAttribute>).type ?? null;
+  }, [current]);
+  const canAddChild = allowedChildTypes.length > 0;
+
+  const handleOpenAddModal = useCallback(() => {
+    if (!canAddChild) return;
+    setIsAddModalOpen(true);
+  }, [canAddChild]);
+
+  const handleCloseAddModal = useCallback(() => {
+    setIsAddModalOpen(false);
+  }, []);
+
+  const handleAddChildFromModal = useCallback(
+    (type: string) => {
+      handleAddChild(type);
+      setIsAddModalOpen(false);
+    },
+    [handleAddChild],
+  );
+
+  function replaceNode(root: Node, target: Node, next: Node): Node {
+    if (root === target) return next;
+    if (root === null || root === undefined) return root;
+    if (typeof root === 'string') return root;
+    if (Array.isArray(root)) {
+      let changed = false;
+      const arr = root.map((item) => {
+        const r = replaceNode(item, target, next);
+        if (r !== item) changed = true;
+        return r;
+      });
+      return changed ? arr : root;
+    }
+    const data = root as any;
+    if ('children' in data) {
+      const prev = data.children;
+      const replaced = Array.isArray(prev)
+        ? prev.map((c: Node) => replaceNode(c, target, next))
+        : replaceNode(prev as Node, target, next);
+      if (replaced !== prev) {
+        data.children = replaced;
+        return { ...data, children: replaced } as Node;
+      }
+    }
+    return root;
+  }
+
+  function createDefaultNode(type: string): NodeData<NodeDefaultAttribute> {
+    const pattern = getPatternByType(type)?.pattern;
+    const defaults = getDefaultsForType(type) ?? {};
+    let children: Node = '';
+    const childrenSchema = pattern?.children as unknown;
+    if (childrenSchema === 'never') {
+      children = '';
+    } else if (childrenSchema === 'string') {
+      children = '';
+    } else if (
+      childrenSchema === 'node' ||
+      (Array.isArray(childrenSchema) && childrenSchema.includes('node'))
+    ) {
+      children = [];
+    } else if (typeof childrenSchema === 'string') {
+      // Specific child type like 'carouselItem' – initialize as empty array to allow multiple
+      children = [];
+    } else {
+      children = '';
+    }
+    return {
+      type,
+      children,
+      attributes: { ...defaults },
+    } as NodeData<NodeDefaultAttribute>;
+  }
+
+  function getAllowedChildTypes(parent: Node): string[] {
+    if (
+      isNodeNullOrUndefined(parent) ||
+      isNodeString(parent) ||
+      isNodeArray(parent)
+    )
+      return [];
+    const parentData = parent as NodeData;
+    const parentType = parentData.type;
+    // Special rule: limit OnboardButtons to OnboardButton only
+    if (parentType === 'OnboardButtons') return ['OnboardButton'];
+    const childrenSchema = getPatternByType(parentType)?.pattern
+      ?.children as unknown;
+    if (!childrenSchema) return [];
+    if (childrenSchema === 'never' || childrenSchema === 'string') return [];
+    if (
+      childrenSchema === 'node' ||
+      (Array.isArray(childrenSchema) && childrenSchema.includes('node'))
+    ) {
+      return [...allcomponentNames];
+    }
+    if (typeof childrenSchema === 'string') {
+      return [childrenSchema];
+    }
+    return [];
+  }
+
+  return (
+    <div className="builder">
+      <Breadcrumb
+        items={breadcrumbItems}
+        onBack={breadcrumbPath.length > 1 ? handleBackClick : undefined}
+      />
+      <BuilderComponent
+        onClick={handleNodeSelect}
+        onAdd={canAddChild ? handleOpenAddModal : undefined}
+        node={current}
+      />
+      {isAddModalOpen && (
+        <AddComponentModal
+          allowedChildTypes={allowedChildTypes}
+          parentType={parentType}
+          onSelect={handleAddChildFromModal}
+          onClose={handleCloseAddModal}
+        />
+      )}
+    </div>
+  );
+}
+
+function appendChild(children: Node, childToAppend: Node): Node {
+  if (Array.isArray(children)) {
+    return [...children, childToAppend];
+  }
+  if (
+    children === null ||
+    children === undefined ||
+    typeof children === 'string'
+  ) {
+    return [childToAppend];
+  }
+  return [children as Node, childToAppend];
+}
+
+function getNodeLabel(node: Node): string {
+  if (isNodeNullOrUndefined(node)) return 'Empty';
+  if (isNodeString(node)) return node as string;
+  if (isNodeArray(node)) return 'Collection';
+  return (node as NodeData<NodeDefaultAttribute>).type ?? 'Node';
+}
+
+function findNodePath(root: Node, target: Node): Node[] {
+  if (root === null || root === undefined) return [];
+  if (root === target) return [root];
+  if (typeof root === 'string') return [];
+  if (Array.isArray(root)) {
+    for (const child of root) {
+      const childPath = findNodePath(child, target);
+      if (childPath.length) {
+        return childPath;
+      }
+    }
+    return [];
+  }
+
+  const nodeData = root as NodeData<NodeDefaultAttribute>;
+  const children = nodeData.children;
+  if (!children) return [];
+  const childList = Array.isArray(children) ? children : [children];
+  for (const child of childList) {
+    const childPath = findNodePath(child, target);
+    if (childPath.length) {
+      return [root, ...childPath];
+    }
+  }
+  return [];
+}

package/src/components/Checkbox.tsx

@@ -0,0 +1,81 @@
+import React, { useId } from 'react';
+
+type CheckboxChangeHandler = (
+  checked: boolean,
+  event: React.ChangeEvent<HTMLInputElement>,
+) => void;
+
+export type CheckboxProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type' | 'onChange' | 'className'
+> & {
+  label?: React.ReactNode;
+  helperText?: React.ReactNode;
+  className?: string;
+  inputClassName?: string;
+  onChange?: CheckboxChangeHandler;
+};
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {
+      label,
+      helperText,
+      className,
+      inputClassName,
+      onChange,
+      id,
+      disabled,
+      ...rest
+    },
+    ref,
+  ) => {
+    const autoId = useId();
+    const inputId = id ?? autoId;
+    const helperId = helperText ? `${inputId}-helper` : undefined;
+
+    const wrapperClassName = [
+      'builder-checkbox',
+      disabled ? 'builder-checkbox--disabled' : undefined,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const nativeClassName = ['builder-checkbox__native', inputClassName]
+      .filter(Boolean)
+      .join(' ');
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(event.target.checked, event);
+    };
+
+    return (
+      <div className={wrapperClassName}>
+        <label htmlFor={inputId} className="builder-checkbox__label">
+          <input
+            {...rest}
+            ref={ref}
+            id={inputId}
+            type="checkbox"
+            className={nativeClassName}
+            onChange={handleChange}
+            disabled={disabled}
+            aria-describedby={helperId}
+          />
+          <span className="builder-checkbox__control" aria-hidden="true" />
+          {label ? (
+            <span className="builder-checkbox__text">{label}</span>
+          ) : null}
+        </label>
+        {helperText ? (
+          <span id={helperId} className="builder-checkbox__helper">
+            {helperText}
+          </span>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+Checkbox.displayName = 'Checkbox';

package/src/components/DeviceButton.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Device } from '../types/Device';
+import androidIcon from '../assets/images/android.svg';
+import iosIcon from '../assets/images/apple.svg';
+
+const platformIcons: Record<string, string> = {
+  android: androidIcon,
+  ios: iosIcon,
+};
+
+type DeviceButtonProps = {
+  device: Device;
+  selectedDevice: Device | null;
+  onSelect: (device: Device) => void;
+};
+
+export function DeviceButton({
+  device,
+  selectedDevice,
+  onSelect,
+}: DeviceButtonProps) {
+  const platformIcon = platformIcons[device.platform];
+
+  return (
+    <button
+      type="button"
+      className={`editor-device-button${
+        selectedDevice === device ? ' editor-device-button--selected' : ''
+      }`}
+      onClick={() => onSelect(device)}
+    >
+      {device.name} <br />
+      {device.width}x{device.height}
+      {platformIcon && <img src={platformIcon} alt="" aria-hidden="true" />}
+    </button>
+  );
+}
+
+export default DeviceButton;