@developer_tribe/react-builder 0.1.0 → 0.1.2

package/src/utils/novaToJson.ts

@@ -0,0 +1,254 @@
+import { Node, NodeData } from '../types/Node';
+import { Project, ProjectBase } from '../types/Project';
+
+export function novaToJson(nova: ProjectBase<unknown>): Node {
+  const layout = (nova.data as any).data?.layout;
+  console.info('layout', layout);
+  if (layout === 'onboard-layout') {
+    return onboardNovaToJson(nova);
+  }
+  return null;
+}
+//@eslint-disable-next-line @typescript-eslint/no-explicit-any
+function onboardNovaToJson(nova: ProjectBase<unknown>): Node {
+  const attributes =
+    (nova?.data as any)?.data?.attributes ||
+    (nova?.data as any)?.attributes ||
+    {};
+  //@eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const generalComponents = (attributes?.general_components || []) as any[];
+  //@eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const pages = (attributes?.data || []) as any[];
+
+  const dotsNode = mapDotsFromGeneralComponents(generalComponents);
+  const footerNode = mapFooterFromGeneralComponents(generalComponents);
+  const { carouselNode, providerLevelButtons } = buildCarouselFromPages(pages);
+
+  const providerNode: NodeData = {
+    type: 'OnboardProvider',
+    children: [
+      carouselNode,
+      // Place dots above buttons in visual order
+      ...(dotsNode ? [dotsNode] : []),
+      ...(providerLevelButtons.length ? providerLevelButtons : []),
+      ...(footerNode ? [footerNode] : []),
+    ],
+    attributes: {
+      theme: (nova?.data as any)?.theme,
+    },
+  };
+
+  return providerNode;
+}
+N;
+//@eslint-disable-next-line @typescript-eslint/no-explicit-any
+function buildCarouselFromPages(pages: any[]): {
+  carouselNode: NodeData;
+  providerLevelButtons: Node[];
+} {
+  const simplePages = pages.filter(
+    (p) => p?.layout === 'simple-onboard-layout',
+  );
+  const pageKeyToIndex = new Map<string, number>();
+  //@eslint-disable-next-line @typescript-eslint/no-explicit-any
+  simplePages.forEach((p: any, idx: number) => {
+    const key = p?.attributes?.key;
+    if (typeof key === 'string') pageKeyToIndex.set(key, idx);
+  });
+
+  const providerLevelButtons: Node[] = [];
+  const items: Node[] = simplePages.map((page) =>
+    buildCarouselItem(page, pageKeyToIndex, providerLevelButtons),
+  );
+
+  const carouselNode: NodeData = {
+    type: 'Onboard',
+    children: items as unknown as Node,
+  };
+
+  return { carouselNode, providerLevelButtons };
+}
+
+function buildCarouselItem(
+  page: any,
+  pageKeyToIndex: Map<string, number>,
+  providerLevelButtons: Node[],
+): NodeData {
+  //@eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const components = (page?.attributes?.components || []) as any[];
+  const children: Node[] = [];
+
+  for (const comp of components) {
+    if (comp?.layout === 'title-layout') {
+      const title = comp?.attributes?.title_localization_key || '';
+      const color = comp?.attributes?.title_color || undefined;
+      children.push({
+        type: 'OnboardBoardTitle',
+        attributes: color ? { color } : undefined,
+        children: title,
+      });
+    } else if (comp?.layout === 'subtitle-layout') {
+      const subtitle = comp?.attributes?.subtitle_localization_key || '';
+      const color = comp?.attributes?.subtitle_color || undefined;
+      children.push({
+        type: 'OnboardSubtitle',
+        attributes: color ? { color } : undefined,
+        children: subtitle,
+      });
+    } else if (comp?.layout === 'image-layout') {
+      const src = comp?.attributes?.image || comp?.attributes?.src || '';
+      const rawHeight =
+        comp?.attributes?.height ??
+        comp?.attributes?.ios_height ??
+        comp?.attributes?.android_height;
+      const height =
+        typeof rawHeight === 'string'
+          ? Number.parseInt(rawHeight, 10)
+          : typeof rawHeight === 'number'
+            ? rawHeight
+            : undefined;
+
+      if (src) {
+        children.push({
+          type: 'OnboardImage',
+          attributes: {
+            src,
+            ...(height ? { height } : {}),
+            resizeMode: 'contain',
+          },
+          children: undefined as unknown as Node,
+        } as unknown as NodeData);
+      }
+    } else if (comp?.layout === 'Buttons') {
+      const direction = comp?.attributes?.buttons_direction;
+      //@eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const buttons = (comp?.attributes?.buttons || []) as any[];
+      //@eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const buttonNodes: Node[] = [];
+      for (const btn of buttons) {
+        const attrs = btn?.attributes || {};
+        const labelKey = attrs?.button_text_localization_key || '';
+        const buttonTextColor = attrs?.button_text_color;
+        const buttonBackgroundColor = attrs?.button_background_color;
+        const flex = attrs?.flex ? Number(attrs.flex) : undefined;
+
+        // Find first Navigate event and map to target index
+        let targetIndex: number | undefined = undefined;
+        //@eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const actions = (attrs?.actions || []) as any[];
+        const normalizedEvents: {
+          type: 'Permission' | 'Navigate';
+          permission?: string;
+          next_page_key?: string;
+        }[] = [];
+        for (const action of actions) {
+          //@eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const events = (action?.attributes?.events || []) as any[];
+          for (const e of events) {
+            if (e?.layout === 'Permission') {
+              const permission = e?.attributes?.permission as
+                | string
+                | undefined;
+              normalizedEvents.push({ type: 'Permission', permission });
+            } else if (e?.layout === 'Navigate') {
+              const nextKey = e?.attributes?.next_page_key as
+                | string
+                | undefined;
+              normalizedEvents.push({
+                type: 'Navigate',
+                next_page_key: nextKey,
+              });
+              if (typeof nextKey === 'string' && pageKeyToIndex.has(nextKey)) {
+                targetIndex = pageKeyToIndex.get(nextKey)!;
+              }
+            }
+          }
+        }
+
+        buttonNodes.push({
+          type: 'OnboardButton',
+          attributes: {
+            labelKey,
+            ...(typeof buttonTextColor === 'string'
+              ? { button_text_color: buttonTextColor }
+              : {}),
+            ...(typeof buttonBackgroundColor === 'string'
+              ? { button_background_color: buttonBackgroundColor }
+              : {}),
+            ...(typeof flex === 'number' ? { flex } : {}),
+            ...(typeof targetIndex === 'number' ? { targetIndex } : {}),
+            ...(normalizedEvents.length ? { events: normalizedEvents } : {}),
+          },
+          children: undefined as unknown as Node,
+        } as unknown as NodeData);
+      }
+
+      if (buttonNodes.length > 0) {
+        // Place buttons inside the page (OnboardItem) instead of provider level
+        children.push({
+          type: 'OnboardButtons',
+          attributes: {
+            ...(direction ? { buttons_direction: direction } : {}),
+          },
+          children: buttonNodes as unknown as Node,
+        } as unknown as NodeData);
+      }
+    }
+  }
+
+  const pageKeyAttr = page?.attributes?.key;
+  const resolvedKey =
+    (typeof pageKeyAttr === 'string' && pageKeyAttr) ||
+    (typeof page?.key === 'string' ? page.key : undefined);
+
+  return {
+    type: 'OnboardItem',
+    ...(resolvedKey ? { key: resolvedKey } : {}),
+    children,
+  };
+}
+
+function mapDotsFromGeneralComponents(generalComponents: any[]): Node | null {
+  const dots = generalComponents.find((gc) => gc?.layout === 'dots-layout');
+  if (!dots) return null;
+  const dotArray = dots?.attributes?.dot || [];
+  const dotType = dotArray?.[0]?.layout as
+    | 'expanding_dot'
+    | 'normal_dot'
+    | 'scaling_dot'
+    | 'sliding_border'
+    | 'sliding_dot'
+    | 'liquid_like';
+  return {
+    type: 'OnboardExpandingDot',
+    attributes: dotType ? { dotType } : undefined,
+    children: undefined as unknown as Node,
+  } as unknown as NodeData;
+}
+
+function mapFooterFromGeneralComponents(generalComponents: any[]): Node | null {
+  const footer = generalComponents.find((gc) => gc?.layout === 'footer-layout');
+  if (!footer) return null;
+  const texts = (footer?.attributes?.texts || []) as any[];
+  const children: Node[] = [];
+
+  for (const t of texts) {
+    if (t?.layout === 'Text') {
+      const textKey = t?.attributes?.text_localization_key || '';
+      const color = t?.attributes?.text_color || undefined;
+      children.push({
+        type: 'text',
+        attributes: color ? { color } : undefined,
+        children: textKey,
+      });
+    }
+  }
+
+  if (children.length === 0) return null;
+
+  return {
+    type: 'view',
+    attributes: { gap: 8 },
+    children,
+  } as NodeData;
+}

package/src/utils/patterns.ts

@@ -0,0 +1,63 @@
+import imagePattern from '../build-components/Image/pattern.json';
+import textPattern from '../build-components/Text/pattern.json';
+import buttonPattern from '../build-components/Button/pattern.json';
+import viewPattern from '../build-components/View/pattern.json';
+import carouselPattern from '../build-components/Carousel/pattern.json';
+import carouselButtonsPattern from '../build-components/CarouselButtons/pattern.json';
+import carouselDotsPattern from '../build-components/CarouselDots/pattern.json';
+import carouselItemPattern from '../build-components/CarouselItem/pattern.json';
+import carouselProviderPattern from '../build-components/CarouselProvider/pattern.json';
+import onboardPattern from '../build-components/Onboard/pattern.json';
+import onboardProviderPattern from '../build-components/OnboardProvider/pattern.json';
+import onboardItemPattern from '../build-components/OnboardItem/pattern.json';
+import onboardImagePattern from '../build-components/OnboardImage/pattern.json';
+import onboardButtonsPattern from '../build-components/OnboardButtons/pattern.json';
+import onboardButtonPattern from '../build-components/OnboardButton/pattern.json';
+import onboardBoardTitlePattern from '../build-components/OnboardBoardTitle/pattern.json';
+import onboardSubtitlePattern from '../build-components/OnboardSubtitle/pattern.json';
+import onboardFooterPattern from '../build-components/OnboardFooter/pattern.json';
+import onboardExpandingDotPattern from '../build-components/OnboardExpandingDot/pattern.json';
+
+type Pattern = {
+  schemaVersion: number;
+  allowUnknownAttributes: boolean;
+  pattern: {
+    type: string;
+    children: unknown;
+    attributes: Record<string, string | string[]>;
+  };
+};
+
+const patterns: Pattern[] = [
+  imagePattern as Pattern,
+  textPattern as Pattern,
+  buttonPattern as Pattern,
+  viewPattern as Pattern,
+  carouselPattern as Pattern,
+  carouselButtonsPattern as Pattern,
+  carouselDotsPattern as Pattern,
+  carouselItemPattern as Pattern,
+  carouselProviderPattern as Pattern,
+  onboardPattern as Pattern,
+  onboardProviderPattern as Pattern,
+  onboardItemPattern as Pattern,
+  onboardImagePattern as Pattern,
+  onboardButtonsPattern as Pattern,
+  onboardButtonPattern as Pattern,
+  onboardBoardTitlePattern as Pattern,
+  onboardSubtitlePattern as Pattern,
+  onboardFooterPattern as Pattern,
+  onboardExpandingDotPattern as Pattern,
+];
+
+export function getPatternByType(type?: string | null) {
+  if (!type) return undefined;
+  return patterns.find((p) => p.pattern.type === type);
+}
+
+export function getAttributeSchema(
+  type?: string | null,
+): Record<string, string | string[]> | undefined {
+  const p = getPatternByType(type);
+  return p?.pattern.attributes;
+}