@developer_tribe/react-builder 1.0.1 → 1.0.2

package/src/components/AttributesEditorPanel.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useMemo, useState } from 'react';
 import { AttributesEditor, Node, NodeData } from '..';
 import { useLogRender } from '../utils/useLogRender';
 
@@ -44,69 +43,16 @@ export function AttributesEditorPanel({
     }
     return root;
   }
-  const [draft, setDraft] = useState<Node>(current);
-  const [isAllowedTopAccept, setIsAllowedTopAccept] = useState<boolean>(false);
-
-  const isEqual = useMemo(() => {
-    try {
-      return JSON.stringify(current) === JSON.stringify(draft);
-    } catch {
-      return current === draft;
-    }
-  }, [current, draft]);
-
-  useEffect(() => {
-    setDraft(current);
-    setIsAllowedTopAccept(false);
-  }, [current, attributes]);
-
-  useEffect(() => {
-    setIsAllowedTopAccept(!isEqual);
-  }, [isEqual]);
+  const handleAttributesChange = (next: Node) => {
+    const root = attributes as Node;
+    const updated = replaceNode(root, current, next);
+    onChange(updated);
+    setCurrent(next);
+  };
 
   return (
     <div style={{ padding: 12 }}>
-      <h2>{(current as NodeData).type ?? current?.toString() ?? '?'}</h2>{' '}
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 8,
-          padding: '16px 0',
-        }}
-      >
-        <h3 style={{ marginTop: 0, marginBottom: 0, flex: '1 1 auto' }}>
-          Attributes
-        </h3>
-        <button
-          disabled={!isAllowedTopAccept}
-          onClick={() => {
-            setDraft(current);
-            setIsAllowedTopAccept(false);
-          }}
-        >
-          Revert
-        </button>
-        <button
-          disabled={!isAllowedTopAccept}
-          onClick={() => {
-            const root = attributes as Node;
-            const updated = replaceNode(root, current, draft);
-            onChange(updated);
-            setIsAllowedTopAccept(false);
-            setCurrent(draft);
-          }}
-        >
-          Accept
-        </button>
-      </div>
-      <AttributesEditor
-        node={draft}
-        onChange={(next: Node) => {
-          setDraft(next);
-          setIsAllowedTopAccept(true);
-        }}
-      />
+      <AttributesEditor node={current} onChange={handleAttributesChange} />
     </div>
   );
 }

package/src/components/Breadcrumb.tsx

@@ -10,34 +10,66 @@ 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" key={`${item.label}-${index}`}>
+            <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 ? (
+              {isLast || (!item.to && !item.onClick) ? (
                 <span className="breadcrumb__current" aria-current="page">
                   {item.label}
                 </span>
               ) : (
-                <p onClick={item.onClick} className="breadcrumb__link">
-                  {item.label}
-                </p>
+                <span className="breadcrumb__link">{item.label}</span>
               )}
             </li>
           );

package/src/components/Builder.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import {
   isNodeArray,
   isNodeNullOrUndefined,
@@ -11,6 +11,7 @@ import {
 import { Breadcrumb } from './Breadcrumb';
 import { useLogRender } from '../utils/useLogRender';
 import { getDefaultsForType, getPatternByType } from '../utils/patterns';
+import { AddComponentModal } from '../modals/AddComponentModal';
 
 type BuilderEditorProps = {
   data: Node;
@@ -22,6 +23,7 @@ type BuilderEditorProps = {
 interface BuilderEditorComponentProps {
   node: Node;
   onClick: (node: Node) => void;
+  onAdd?: () => void;
 }
 
 function BuilderButton({ node, onClick }: { node: Node; onClick: () => void }) {
@@ -37,14 +39,26 @@ function BuilderButton({ node, onClick }: { node: Node; onClick: () => void }) {
   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">
-      {nodeData.type} {extra}
+      <span className="builder__button-label">{baseLabel}</span> <br />
+      {conditionLabel && (
+        <span className="builder__button-condition">{conditionLabel}</span>
+      )}
     </a>
   );
 }
 
-function BuilderComponent({ node, onClick }: BuilderEditorComponentProps) {
+function BuilderComponent({
+  node,
+  onClick,
+  onAdd,
+}: BuilderEditorComponentProps) {
   if (isNodeNullOrUndefined(node)) {
     return <div className="builder__placeholder">Null or undefined</div>;
   }
@@ -56,6 +70,19 @@ function BuilderComponent({ node, onClick }: BuilderEditorComponentProps) {
     );
   }
 
+  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">
@@ -68,6 +95,7 @@ function BuilderComponent({ node, onClick }: BuilderEditorComponentProps) {
             node={item}
           />
         ))}
+        {addButton}
       </div>
     );
   }
@@ -81,7 +109,6 @@ function BuilderComponent({ node, onClick }: BuilderEditorComponentProps) {
 
   return (
     <div className="builder__node">
-      <p className="builder__node-type">{nodeData.type}</p>
       <div className="builder__children">
         {children &&
           children.map((child, index) => (
@@ -94,6 +121,7 @@ function BuilderComponent({ node, onClick }: BuilderEditorComponentProps) {
             />
           ))}
       </div>
+      {addButton}
     </div>
   );
 }
@@ -105,10 +133,93 @@ export function Builder({
   setCurrent,
 }: BuilderEditorProps) {
   useLogRender('Builder');
-  const [crumbs, setCrumbs] = useState<string[]>(['root']);
+  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(
-    () => crumbs.map((c, idx) => ({ label: c })),
-    [crumbs],
+    () =>
+      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 {
@@ -194,79 +305,71 @@ export function Builder({
 
   return (
     <div className="builder">
-      <Breadcrumb items={breadcrumbItems} />
-
-      <div className="builder__current">
-        {crumbs[crumbs.length - 1] + ' ( ' + crumbs.length + '. level )'}
-      </div>
+      <Breadcrumb
+        items={breadcrumbItems}
+        onBack={breadcrumbPath.length > 1 ? handleBackClick : undefined}
+      />
       <BuilderComponent
-        onClick={(node: Node) => {
-          setCurrent(node);
-          setCrumbs((crumbs) => [
-            ...crumbs,
-            typeof node === 'string'
-              ? node
-              : (node as NodeData<NodeDefaultAttribute>).type,
-          ]);
-        }}
+        onClick={handleNodeSelect}
+        onAdd={canAddChild ? handleOpenAddModal : undefined}
         node={current}
       />
-      {!isNodeNullOrUndefined(current) &&
-        !isNodeString(current) &&
-        !isNodeArray(current) &&
-        (() => {
-          const allowed = getAllowedChildTypes(current);
-          if (allowed.length === 0) return null;
-          return (
-            <div
-              style={{
-                display: 'flex',
-                flexWrap: 'wrap',
-                gap: 8,
-                paddingTop: 12,
-              }}
-            >
-              {allowed.map((t) => (
-                <button
-                  key={t}
-                  className="editor-button"
-                  onClick={() => {
-                    const parent = current as NodeData<NodeDefaultAttribute>;
-                    const nextChild = createDefaultNode(t);
-                    let nextChildren: Node;
-                    if (Array.isArray(parent.children)) {
-                      nextChildren = [
-                        ...(parent.children as Node[]),
-                        nextChild,
-                      ];
-                    } else if (
-                      parent.children === null ||
-                      parent.children === undefined ||
-                      typeof parent.children === 'string'
-                    ) {
-                      nextChildren = [nextChild];
-                    } else {
-                      nextChildren = [parent.children as Node, nextChild];
-                    }
-                    const updatedParent: NodeData<NodeDefaultAttribute> = {
-                      ...parent,
-                      children: nextChildren,
-                    };
-                    const updatedRoot = replaceNode(
-                      data,
-                      current,
-                      updatedParent,
-                    );
-                    setData(updatedRoot);
-                    setCurrent(updatedParent);
-                  }}
-                >
-                  Add {t}
-                </button>
-              ))}
-            </div>
-          );
-        })()}
+      {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;