@developer_tribe/react-builder 0.1.31 → 1.0.1

package/src/build-components/OnboardTitle/OnboardTitleProps.generated.ts

@@ -2,34 +2,45 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type FontWeightOptionType =
+  | 'normal'
+  | 'bold'
+  | '100'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900';
+export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
+export type FlexDirectionOptionType = 'row' | 'column';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+
 export interface OnboardTitlePropsGenerated {
   child: string;
   attributes: {
     color?: string;
     fontSize?: number;
-    fontWeight?:
-      | 'normal'
-      | 'bold'
-      | '100'
-      | '200'
-      | '300'
-      | '400'
-      | '500'
-      | '600'
-      | '700'
-      | '800'
-      | '900';
-    textAlign?: 'left' | 'center' | 'right' | 'justify';
+    fontWeight?: FontWeightOptionType;
+    textAlign?: TextAlignOptionType;
     scrollable?: boolean;
-    flexDirection?: 'row' | 'column';
-    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
-    justifyContent?:
-      | 'flex-start'
-      | 'center'
-      | 'flex-end'
-      | 'space-between'
-      | 'space-around'
-      | 'space-evenly';
+    flexDirection?: FlexDirectionOptionType;
+    alignItems?: AlignItemsOptionType;
+    justifyContent?: JustifyContentOptionType;
     gap?: string;
     padding?: number;
     paddingHorizontal?: string;

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

@@ -3,13 +3,15 @@ import type { TextComponentProps } from './TextProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { extractTextStyle } from '../../utils/extractTextStyle';
+import { useLogRender } from '../../utils/useLogRender';
 
 function Text({ node }: TextComponentProps) {
+  useLogRender('Text');
   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/Text/TextProps.generated.ts

@@ -2,19 +2,41 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type FlexDirectionOptionType = 'row' | 'column';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type FontWeightOptionType =
+  | 'normal'
+  | 'bold'
+  | '100'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900';
+export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
+
 export interface TextPropsGenerated {
   child: string;
   attributes: {
     scrollable?: boolean;
-    flexDirection?: 'row' | 'column';
-    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
-    justifyContent?:
-      | 'flex-start'
-      | 'center'
-      | 'flex-end'
-      | 'space-between'
-      | 'space-around'
-      | 'space-evenly';
+    flexDirection?: FlexDirectionOptionType;
+    alignItems?: AlignItemsOptionType;
+    justifyContent?: JustifyContentOptionType;
     gap?: string;
     padding?: number;
     paddingHorizontal?: string;
@@ -36,19 +58,8 @@ export interface TextPropsGenerated {
     height?: number;
     color?: string;
     fontSize?: number;
-    fontWeight?:
-      | 'normal'
-      | 'bold'
-      | '100'
-      | '200'
-      | '300'
-      | '400'
-      | '500'
-      | '600'
-      | '700'
-      | '800'
-      | '900';
-    textAlign?: 'left' | 'center' | 'right' | 'justify';
+    fontWeight?: FontWeightOptionType;
+    textAlign?: TextAlignOptionType;
   };
 }
 

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

@@ -7,8 +7,10 @@ import RenderNode from '../RenderNode.generated';
 import { Node } from '../../types/Node';
 import useNode from '../useNode';
 import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useLogRender } from '../../utils/useLogRender';
 
 export function View({ node }: ViewComponentProps) {
+  useLogRender('View');
   node = useNode(node);
   return (
     <div style={extractViewStyle(node)} className="scroll-container">

package/src/build-components/View/ViewProps.generated.ts

@@ -2,19 +2,28 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type FlexDirectionOptionType = 'row' | 'column';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+
 export interface ViewPropsGenerated {
   child: string;
   attributes: {
     scrollable?: boolean;
-    flexDirection?: 'row' | 'column';
-    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
-    justifyContent?:
-      | 'flex-start'
-      | 'center'
-      | 'flex-end'
-      | 'space-between'
-      | 'space-around'
-      | 'space-evenly';
+    flexDirection?: FlexDirectionOptionType;
+    alignItems?: AlignItemsOptionType;
+    justifyContent?: JustifyContentOptionType;
     gap?: string;
     padding?: number;
     paddingHorizontal?: string;

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/build-components/patterns.generated.ts

@@ -117,8 +117,9 @@ export const patterns = [
     types: {
       EventObject: {
         type: ['Permission', 'Navigate'],
-        permission: ['att', 'notification', 'rating', 'null'],
-        navigate_to: ['string', 'null'],
+        permission: ['att', 'notification', 'rating', 'GDPR', 'null'],
+        navigate_to: 'string',
+        targetIndex: 'number',
       },
     },
   },
@@ -239,8 +240,12 @@ export const patterns = [
         height: 'number',
         resizeMode: ['cover', 'contain', 'stretch', 'center'],
         borderRadius: 'number',
+        video_url: 'string',
+        lottie: 'string',
       },
     },
+    types: {},
+    defaults: {},
   },
   {
     schemaVersion: 1,

package/src/components/AttributesEditorPanel.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useMemo, useState } from 'react';
+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 [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,48 @@
+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;
+};
+
+export function Breadcrumb({
+  items,
+  separator = '/',
+  ariaLabel = 'Breadcrumb',
+}: BreadcrumbProps) {
+  useLogRender('Breadcrumb');
+  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,272 @@
+import { 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';
+
+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) {
+  useLogRender('Builder');
+  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>
+  );
+}