@developer_tribe/react-builder 0.1.32 → 1.0.1

package/src/assets/samples/vpn-onboard-4.json

@@ -2,9 +2,8 @@
   "name": "vpn-onboard-4 (legacy)",
   "version": "0.0.0",
   "type": "nova",
-  "previewConfig": {
+  "appConfig": {
     "theme": "dark",
-    "screenSize": { "width": 375, "height": 812 },
     "isRtl": false,
     "screenStyle": {
       "light": { "backgroundColor": "#FDFDFD", "color": "#161827" },

package/src/assets/samples/vpn-onboard-5.json

@@ -2,9 +2,8 @@
   "name": "vpn-onboard-5 (legacy)",
   "version": "0.0.0",
   "type": "nova",
-  "previewConfig": {
+  "appConfig": {
     "theme": "light",
-    "screenSize": { "width": 375, "height": 812 },
     "isRtl": false,
     "screenStyle": {
       "light": { "backgroundColor": "#FDFDFD", "color": "#161827" },

package/src/assets/samples/vpn-onboard-6.json

@@ -2,9 +2,8 @@
   "name": "vpn-onboard-6 (legacy)",
   "version": "0.0.0",
   "type": "nova",
-  "previewConfig": {
+  "appConfig": {
     "theme": "dark",
-    "screenSize": { "width": 375, "height": 812 },
     "isRtl": false,
     "screenStyle": {
       "light": { "backgroundColor": "#FDFDFD", "color": "#161827" },

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { ButtonComponentProps } from './ButtonProps.generated';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function Button({ node }: ButtonComponentProps) {
+  useLogRender('Button');
   node = useNode(node);
   return String(node?.type ?? 'button');
 }

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

@@ -3,8 +3,10 @@ import type { CarouselComponentProps } from './CarouselProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { isCarouselItem } from '../../utils/isCarousel';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function Carousel({ node }: CarouselComponentProps) {
+  useLogRender('Carousel');
   node = useNode(node);
   // Ensure children are carouselItems
   const renderChildren = () => {

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

@@ -2,8 +2,10 @@ import React, { useContext } from 'react';
 import type { CarouselButtonsComponentProps } from './CarouselButtonsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function CarouselButtons({ node }: CarouselButtonsComponentProps) {
+  useLogRender('CarouselButtons');
   node = useNode(node);
   const emblaApi = useContext(carouselContext);
   const buttonTypes = node.attributes?.buttonType || [

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

@@ -2,8 +2,10 @@ import React, { useContext, useEffect, useState } from 'react';
 import type { CarouselDotsComponentProps } from './CarouselDotsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function CarouselDots({ node }: CarouselDotsComponentProps) {
+  useLogRender('CarouselDots');
   node = useNode(node);
   const dotType = node.attributes?.dotType || 'normal_dot';
   const emblaApi = useContext(carouselContext);

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

@@ -2,8 +2,10 @@ import React from 'react';
 import type { CarouselItemComponentProps } from './CarouselItemProps.generated';
 import { RenderNode } from '../..';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 export function CarouselItem({ node }: CarouselItemComponentProps) {
+  useLogRender('CarouselItem');
   node = useNode(node);
   return (
     <div className="embla__slide" {...node.attributes}>

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

@@ -2,8 +2,10 @@ import React from 'react';
 import type { ImageComponentProps } from './ImageProps.generated';
 import useNode from '../useNode';
 import { extractImageStyle } from '../../utils/extractImageStyle';
+import { useLogRender } from '../../utils/useLogRender';
 
 function Image({ node }: ImageComponentProps) {
+  useLogRender('Image');
   node = useNode(node);
   return (
     <img

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

@@ -2,8 +2,10 @@ import React from 'react';
 import type { OnboardComponentProps } from './OnboardProps.generated';
 import Carousel from '../Carousel/Carousel';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function Onboard({ node }: OnboardComponentProps) {
+  useLogRender('Onboard');
   node = useNode(node);
   return <Carousel node={{ ...node, type: 'carousel' } as any} />;
 }

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

@@ -3,18 +3,21 @@ import type { OnboardButtonComponentProps } from './OnboardButtonProps.generated
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardButton({ node }: OnboardButtonComponentProps) {
+  useLogRender('OnboardButton');
   node = useNode(node);
   const { emblaApi } = useContext(onboardContext) ?? {};
-  const { defaultLanguage, localication } = useRenderStore((s) => ({
-    defaultLanguage: s.defaultLanguage,
-    localication: s.localication,
+  const { appConfig } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
   }));
 
   const labelRaw = node.attributes?.labelKey ?? '';
   const label =
-    (localication?.[defaultLanguage ?? 'en']?.[labelRaw] as string) ?? labelRaw;
+    (appConfig.localication?.[appConfig.defaultLanguage ?? 'en']?.[
+      labelRaw
+    ] as string) ?? labelRaw;
 
   const flex = node.attributes?.flex ?? 1;
   const textColor = node.attributes?.button_text_color ?? '#FFFFFF';

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

@@ -5,19 +5,19 @@ import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import RenderNode from '../RenderNode.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
+  useLogRender('OnboardButtons');
   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/OnboardDot/OnboardDot.tsx

@@ -2,8 +2,10 @@ import React from 'react';
 import type { OnboardDotComponentProps } from './OnboardExpandingDotProps.generated';
 import CarouselDots from '../CarouselDots/CarouselDots';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardDot({ node }: OnboardDotComponentProps) {
+  useLogRender('OnboardDot');
   node = useNode(node);
   return <CarouselDots node={{ ...node, type: 'carouselDots' } as any} />;
 }

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

@@ -4,6 +4,7 @@ import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { parseSize } from '../../size-matters';
 import { extractTextStyle } from '../../utils/extractTextStyle';
+import { useLogRender } from '../../utils/useLogRender';
 
 type Segment =
   | { type: 'text'; value: string }
@@ -86,11 +87,12 @@ function buildSegments(
 }
 
 function OnboardFooter({ node }: OnboardFooterComponentProps) {
+  useLogRender('OnboardFooter');
   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/OnboardImage/OnboardImage.tsx

@@ -3,8 +3,10 @@ import type { OnboardImageComponentProps } from './OnboardImageProps.generated';
 import Image from '../Image/Image';
 import useNode from '../useNode';
 import Lottie from 'lottie-react';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardImage({ node }: OnboardImageComponentProps) {
+  useLogRender('OnboardImage');
   node = useNode(node);
   const [lottie, setLottie] = useState<string | null>(null);
 

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

@@ -3,8 +3,10 @@ import type { OnboardItemComponentProps } from './OnboardItemProps.generated';
 import useNode from '../useNode';
 import { RenderNode } from '../..';
 import { parseSize } from '../../size-matters';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardItem({ node }: OnboardItemComponentProps) {
+  useLogRender('OnboardItem');
   node = useNode(node);
   const flexDirection = node.attributes?.flexDirection;
   const display = node.attributes?.display;

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

@@ -11,9 +11,11 @@ import useEmblaCarousel from 'embla-carousel-react';
 import RenderNode from '../RenderNode.generated';
 import { useRenderStore } from '../../store';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 export const onboardContext = createContext<any>(undefined);
 function OnboardProvider({ node }: OnboardProviderComponentProps) {
+  useLogRender('OnboardProvider');
   node = useNode(node);
   const device = useRenderStore((s) => s.device);
   const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);

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

@@ -2,8 +2,10 @@ import React from 'react';
 import type { OnboardSubtitleComponentProps } from './OnboardSubtitleProps.generated';
 import Text from '../Text/Text';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardSubtitle({ node }: OnboardSubtitleComponentProps) {
+  useLogRender('OnboardSubtitle');
   node = useNode(node);
   return <Text node={node} />;
 }

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

@@ -2,8 +2,10 @@ import React from 'react';
 import type { OnboardTitleComponentProps } from './OnboardTitleProps.generated';
 import Text from '../Text/Text';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardTitle({ node }: OnboardTitleComponentProps) {
+  useLogRender('OnboardTitle');
   node = useNode(node);
   return <Text node={node} />;
 }

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/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/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,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>
+  );
+}