@developer_tribe/react-builder 0.1.32 → 1.1.0

package/src/build-components/OnboardButtons/OnboardButtons.tsx

@@ -8,16 +8,14 @@ import { useRenderStore } from '../../store';
 
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   node = useNode(node);
-  const { screenStyle, theme } = useRenderStore((s) => ({
-    screenStyle: s.screenStyle,
-    theme: s.theme,
+  const { appConfig } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
   }));
   const seperatorColorDefault =
-    theme === 'light'
-      ? screenStyle.light.seperatorColor
-      : screenStyle.dark.seperatorColor;
+    appConfig.theme === 'light'
+      ? appConfig.screenStyle.light.seperatorColor
+      : appConfig.screenStyle.dark.seperatorColor;
   const ctx = useContext(onboardContext) ?? {};
-  const emblaApi = ctx.emblaApi;
   const [selectedIndex, setSelectedIndex] = useState(ctx.selectedIndex ?? 0);
 
   useEffect(() => {

package/src/build-components/OnboardFooter/OnboardFooter.tsx

@@ -87,10 +87,10 @@ function buildSegments(
 
 function OnboardFooter({ node }: OnboardFooterComponentProps) {
   node = useNode(node);
-  const { defaultLanguage, localication } = useRenderStore((s) => ({
-    defaultLanguage: s.defaultLanguage,
-    localication: s.localication,
+  const { appConfig } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
   }));
+  const { localication, defaultLanguage } = appConfig;
   const t = (key?: string) =>
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 

package/src/build-components/Text/Text.tsx

@@ -6,10 +6,10 @@ import { extractTextStyle } from '../../utils/extractTextStyle';
 
 function Text({ node }: TextComponentProps) {
   node = useNode(node);
-  const { defaultLanguage, localication } = useRenderStore((s) => ({
-    defaultLanguage: s.defaultLanguage,
-    localication: s.localication,
+  const { appConfig } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
   }));
+  const { defaultLanguage, localication } = appConfig;
   const keyOrText: string = node.children as string;
   const style = extractTextStyle(node);
 

package/src/build-components/index.ts

@@ -4,6 +4,28 @@ export { default as RenderNode } from './RenderNode.generated';
 
 export { patterns } from './patterns.generated';
 
+export const allcomponentNames = [
+  'button',
+  'carousel',
+  'carouselButtons',
+  'carouselDots',
+  'carouselItem',
+  'carouselProvider',
+  'image',
+  'Onboard',
+  'OnboardButton',
+  'OnboardButtons',
+  'OnboardDot',
+  'OnboardFooter',
+  'OnboardImage',
+  'OnboardItem',
+  'OnboardProvider',
+  'OnboardSubtitle',
+  'OnboardTitle',
+  'text',
+  'view',
+] as const;
+
 export type {
   ButtonPropsGenerated,
   ButtonComponentProps,

package/src/components/AttributesEditorPanel.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useMemo, useState } from 'react';
+import { AttributesEditor, Node, NodeData } from '..';
+
+interface AttributesEditorPanelProps {
+  current: Node;
+  attributes: any;
+  onChange: (data: Node) => void;
+  setCurrent: (current: Node) => void;
+}
+
+export function AttributesEditorPanel({
+  current,
+  attributes,
+  onChange,
+  setCurrent,
+}: AttributesEditorPanelProps) {
+  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 [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]);
+
+  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);
+        }}
+      />
+    </div>
+  );
+}

package/src/components/Breadcrumb.tsx

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+export type BreadcrumbItem = {
+  label: string;
+  to?: string;
+  onClick?: () => void;
+};
+
+type BreadcrumbProps = {
+  items: BreadcrumbItem[];
+  separator?: ReactNode;
+  ariaLabel?: string;
+};
+
+export function Breadcrumb({
+  items,
+  separator = '/',
+  ariaLabel = 'Breadcrumb',
+}: BreadcrumbProps) {
+  return (
+    <nav className="breadcrumb" aria-label={ariaLabel}>
+      <ol className="breadcrumb__list">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          return (
+            <li className="breadcrumb__item" key={`${item.label}-${index}`}>
+              {index > 0 && (
+                <span className="breadcrumb__separator" aria-hidden>
+                  {separator}
+                </span>
+              )}
+              {isLast || !item.to ? (
+                <span className="breadcrumb__current" aria-current="page">
+                  {item.label}
+                </span>
+              ) : (
+                <p onClick={item.onClick} className="breadcrumb__link">
+                  {item.label}
+                </p>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/src/components/Builder.tsx

@@ -0,0 +1,270 @@
+import { useMemo, useState } from 'react';
+import {
+  isNodeArray,
+  isNodeNullOrUndefined,
+  isNodeString,
+  Node,
+  NodeData,
+  NodeDefaultAttribute,
+  allcomponentNames,
+} from '..';
+import { Breadcrumb } from './Breadcrumb';
+import { getDefaultsForType, getPatternByType } from '../utils/patterns';
+
+type BuilderEditorProps = {
+  data: Node;
+  setData: (data: Node) => void;
+  current: Node;
+  setCurrent: (current: Node) => void;
+};
+
+interface BuilderEditorComponentProps {
+  node: Node;
+  onClick: (node: Node) => 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})`;
+  }
+  return (
+    <a onClick={onClick} className="builder__button">
+      {nodeData.type} {extra}
+    </a>
+  );
+}
+
+function BuilderComponent({ node, onClick }: 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>
+    );
+  }
+
+  if (isNodeArray(node)) {
+    return (
+      <div className="builder__list">
+        {(node as Node[]).map((item, index) => (
+          <BuilderButton
+            onClick={() => {
+              onClick(item);
+            }}
+            key={index}
+            node={item}
+          />
+        ))}
+      </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">
+      <p className="builder__node-type">{nodeData.type}</p>
+      <div className="builder__children">
+        {children &&
+          children.map((child, index) => (
+            <BuilderButton
+              onClick={() => {
+                onClick(child);
+              }}
+              key={index}
+              node={child}
+            />
+          ))}
+      </div>
+    </div>
+  );
+}
+
+export function Builder({
+  data,
+  setData,
+  current,
+  setCurrent,
+}: BuilderEditorProps) {
+  const [crumbs, setCrumbs] = useState<string[]>(['root']);
+  const breadcrumbItems = useMemo(
+    () => crumbs.map((c, idx) => ({ label: c })),
+    [crumbs],
+  );
+
+  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} />
+
+      <div className="builder__current">
+        {crumbs[crumbs.length - 1] + ' ( ' + crumbs.length + '. level )'}
+      </div>
+      <BuilderComponent
+        onClick={(node: Node) => {
+          setCurrent(node);
+          setCrumbs((crumbs) => [
+            ...crumbs,
+            typeof node === 'string'
+              ? node
+              : (node as NodeData<NodeDefaultAttribute>).type,
+          ]);
+        }}
+        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>
+          );
+        })()}
+    </div>
+  );
+}

package/src/components/EditorHeader.tsx

@@ -0,0 +1,184 @@
+import { useMemo, useState } from 'react';
+import { Device, getDevices, Node, copyNode } from '..';
+import { useRenderStore } from '../store';
+import { Breadcrumb, BreadcrumbItem } from './Breadcrumb';
+
+const devices = getDevices();
+
+interface EditorHeaderProps {
+  onSaveProject?: () => void;
+  current?: Node;
+  editorData?: Node;
+  setEditorData?: (data: Node) => void;
+}
+
+interface DeviceButtonProps {
+  device: Device;
+  selectedDevice: Device | null;
+  setSelectedDevice: (device: Device) => void;
+}
+export function DeviceButton({
+  device,
+  selectedDevice,
+  setSelectedDevice,
+}: DeviceButtonProps) {
+  return (
+    <button
+      className={`editor-device-button ${selectedDevice === device ? 'editor-device-button--selected' : ''}`}
+      onClick={() => setSelectedDevice(device)}
+    >
+      {device.name} <br />
+      {device.width}x{device.height}
+    </button>
+  );
+}
+
+export function EditorHeader({
+  onSaveProject,
+  current,
+  editorData,
+  setEditorData,
+}: EditorHeaderProps) {
+  const [isDevicesModalOpen, setIsDevicesModalOpen] = useState(false);
+  const copiedNode = useRenderStore((s) => s.copiedNode);
+  const { device, setDevice } = useRenderStore((s) => ({
+    device: s.device,
+    setDevice: s.setDevice,
+  }));
+
+  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 handleCopy = () => {
+    if (current) copyNode(current);
+  };
+  const handlePaste = () => {
+    if (!current || !editorData || !setEditorData) return;
+    if (!copiedNode) return;
+    const cloned = JSON.parse(JSON.stringify(copiedNode)) as Node;
+    const updated = replaceNode(editorData, current, cloned);
+    useRenderStore.setState({
+      copiedNode: null,
+    });
+    useRenderStore.getState().forceRender();
+    setEditorData(updated);
+  };
+  return (
+    <div
+      className="editor-header"
+      role="region"
+      aria-label="Editor utility header"
+    >
+      <div className="editor-header__devices">
+        {devices.slice(0, 5).map((device: Device) => (
+          <DeviceButton
+            key={device.name}
+            selectedDevice={device}
+            setSelectedDevice={setDevice}
+            device={device}
+          />
+        ))}
+        <button
+          className="editor-device-button"
+          aria-label="More devices"
+          onClick={() => setIsDevicesModalOpen(true)}
+        >
+          More devices
+        </button>
+      </div>
+      <div className="editor-header__actions">
+        <button
+          className="editor-button editor-save-button"
+          aria-label="Save project data"
+          onClick={() => onSaveProject && onSaveProject()}
+        >
+          Save
+        </button>
+        <button
+          className="editor-button editor-save-previewconfig-button"
+          aria-label="Save previewConfig"
+          onClick={() => useRenderStore.getState().forceRender()}
+        >
+          Force Render
+        </button>
+        <button
+          className="editor-button"
+          aria-label="Copy node"
+          onClick={handleCopy}
+        >
+          Copy
+        </button>
+        {copiedNode && (
+          <button
+            className="editor-button"
+            aria-label="Paste node"
+            onClick={handlePaste}
+          >
+            Paste
+          </button>
+        )}
+      </div>
+      {isDevicesModalOpen && (
+        <div
+          className="editor-modal"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="device-selector-title"
+        >
+          <div
+            className="editor-modal__overlay"
+            onClick={() => setIsDevicesModalOpen(false)}
+          />
+          <div className="editor-modal__content">
+            <div className="editor-modal__header">
+              <h3 id="device-selector-title">Select a device</h3>
+              <button
+                className="editor-button"
+                aria-label="Close device selector"
+                onClick={() => setIsDevicesModalOpen(false)}
+              >
+                Close
+              </button>
+            </div>
+            <div className="editor-device-grid" role="list">
+              {devices.map((device: Device) => (
+                <DeviceButton
+                  key={device.name}
+                  selectedDevice={device}
+                  setSelectedDevice={(d: Device) => {
+                    setDevice(d);
+                    setIsDevicesModalOpen(false);
+                  }}
+                  device={device}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}