@developer_tribe/react-builder 0.1.15 → 0.1.17

package/src/AttributesEditor.tsx

@@ -56,6 +56,23 @@ function Field({
       />
     );
   }
+  if (type === 'string[]') {
+    const textValue = Array.isArray(value) ? value.join('\n') : '';
+    return (
+      <textarea
+        rows={4}
+        value={textValue}
+        onChange={(e) => {
+          const lines = e.target.value
+            .split('\n')
+            .map((s) => s.trim())
+            .filter((s) => s.length > 0);
+          onChange(lines.length > 0 ? lines : undefined);
+        }}
+        className="input"
+      />
+    );
+  }
   return (
     <input
       type="text"

package/src/RenderPage.tsx

@@ -25,17 +25,23 @@ export function RenderPage({
   localication,
   defaultLanguage,
 }: RenderPageProps) {
+  const screenPreviewHeight = 800;
+  // The calculation is correct for maintaining the aspect ratio of the target screen size.
+  // It scales the width proportionally to a fixed preview height.
+  // width = (previewHeight * targetWidth) / targetHeight
+  const height = screenPreviewHeight;
+  const width = (height * screenSize.width) / screenSize.height;
   return (
     <div className="stage-wrapper" style={{ overflow: 'auto' }}>
       <div
         className="stage"
         style={{
-          width: screenSize.width,
-          height: screenSize.height,
-          minWidth: screenSize.width,
-          maxWidth: screenSize.width,
-          minHeight: screenSize.height,
-          maxHeight: screenSize.height,
+          width: width,
+          height: height,
+          minWidth: width,
+          maxWidth: width,
+          minHeight: height,
+          maxHeight: height,
           overflow: 'hidden',
           position: 'relative',
           padding: 4,

package/src/assets/samples/getSamples.ts

@@ -26,3 +26,16 @@ export function getSamples(): Project[] {
     ...legacySamples,
   ];
 }
+
+export function getBasicSamples(): Project[] {
+  return [simple1 as Project, simple2 as Project, carouselSample as Project];
+}
+
+export function getOnboardSamples(): Project[] {
+  return [
+    vpnOnboard1 as Project,
+    vpnOnboard2 as Project,
+    vpnOnboard3 as Project,
+    vpnOnboard4 as Project,
+  ];
+}

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

@@ -1,8 +1,64 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import type { OnboardFooterComponentProps } from './OnboardFooterProps.generated';
+import { mainNodeContext } from '../../RenderMainNode';
 
 function OnboardFooter({ node }: OnboardFooterComponentProps) {
-  return String(node?.type ?? 'OnboardFooter');
+  const { localication, defaultLanguage } = useContext(mainNodeContext) ?? {};
+  const t = (key?: string) =>
+    key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
+
+  const text = t(node?.attributes?.textLocalizationKey);
+  const style: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: (node?.attributes?.flexDirection as any) ?? 'column',
+    gap: typeof node?.attributes?.gap === 'number' ? node.attributes.gap : 0,
+    padding:
+      typeof node?.attributes?.padding === 'number'
+        ? node.attributes.padding
+        : undefined,
+    margin:
+      typeof node?.attributes?.margin === 'number'
+        ? node.attributes.margin
+        : undefined,
+    backgroundColor: node?.attributes?.backgroundColor,
+    borderRadius:
+      typeof node?.attributes?.borderRadius === 'number'
+        ? node.attributes.borderRadius
+        : undefined,
+    width:
+      typeof node?.attributes?.width === 'number'
+        ? node.attributes.width
+        : undefined,
+    height:
+      typeof node?.attributes?.height === 'number'
+        ? node.attributes.height
+        : undefined,
+    alignItems: node?.attributes?.alignItems as any,
+    justifyContent: node?.attributes?.justifyContent as any,
+  };
+
+  const linkStyle = (color?: string): React.CSSProperties => ({
+    color,
+    cursor: color ? 'pointer' : undefined,
+  });
+
+  return (
+    <div className="primitive primitive-footer" style={style}>
+      {!!text && <p style={{ color: node?.attributes?.textColor }}>{text}</p>}
+      <div style={{ display: 'flex', gap: 8 }}>
+        {node?.attributes?.linkedWordFirstLocalizationKey && (
+          <span style={linkStyle(node?.attributes?.linkedWordFirstColor)}>
+            {t(node?.attributes?.linkedWordFirstLocalizationKey)}
+          </span>
+        )}
+        {node?.attributes?.linkedWordSecondLocalizationKey && (
+          <span style={linkStyle(node?.attributes?.linkedWordSecondColor)}>
+            {t(node?.attributes?.linkedWordSecondLocalizationKey)}
+          </span>
+        )}
+      </div>
+    </div>
+  );
 }
 
 export default React.memo(OnboardFooter);

package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts

@@ -22,6 +22,14 @@ export interface OnboardFooterPropsGenerated {
     borderRadius?: number;
     width?: number;
     height?: number;
+    textLocalizationKey?: string;
+    textColor?: string;
+    linkedWordFirstLocalizationKey?: string;
+    linkedWordFirstColor?: string;
+    linkedWordFirstPage?: string;
+    linkedWordSecondLocalizationKey?: string;
+    linkedWordSecondColor?: string;
+    linkedWordSecondPage?: string;
   };
 }
 

package/src/build-components/OnboardFooter/pattern.json

@@ -22,7 +22,15 @@
       "backgroundColor": "string",
       "borderRadius": "number",
       "width": "number",
-      "height": "number"
+      "height": "number",
+      "textLocalizationKey": "string",
+      "textColor": "string",
+      "linkedWordFirstLocalizationKey": "string",
+      "linkedWordFirstColor": "string",
+      "linkedWordFirstPage": "string",
+      "linkedWordSecondLocalizationKey": "string",
+      "linkedWordSecondColor": "string",
+      "linkedWordSecondPage": "string"
     }
   }
 }

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

@@ -13,9 +13,6 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   const children = useMemo(() => {
-    console.log('node', node);
-    console.log('node.children', node.children);
-
     const onboardChild: NodeData = (node.children as NodeData[]).filter(
       (c) => c.type === 'Onboard',
     )[0];

package/src/index.ts

@@ -12,6 +12,8 @@ export {
   analyseNode,
 } from './utils/analyseNode';
 export { getSamples } from './assets/samples/getSamples';
+export { getBasicSamples } from './assets/samples/getSamples';
+export { getOnboardSamples } from './assets/samples/getSamples';
 export { PreviewConfig } from './types/PreviewConfig';
 export { RenderPage } from './RenderPage';
 export { RenderMainNode } from './RenderMainNode';

package/src/styles/index.scss

@@ -112,3 +112,17 @@
 .embla__dot--selected:after {
   box-shadow: inset 0 0 0 0.2rem var(--text-body);
 }
+.carousel-provider {
+  height: 100%;
+}
+.embla {
+  height: 100%;
+}
+.embla__viewport {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.embla__container {
+  flex: 1;
+}

package/src/utils/novaToJson.ts

@@ -229,25 +229,56 @@ 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[] = [];
+  const linkedWords: { text_key?: string; color?: string; page?: string }[] =
+    [];
+  let baseTextKey: string | undefined;
+  let baseTextColor: string | undefined;
 
   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 (!baseTextKey) baseTextKey = textKey;
+      if (!baseTextColor && typeof color === 'string') baseTextColor = color;
+
+      // Extract linked words if present
+      const lws = (t?.attributes?.linkedwords || []) as any[];
+      for (const w of lws) {
+        if (w?.layout === 'LinkedWords') {
+          const text_key = w?.attributes?.linked_word_localization_key as
+            | string
+            | undefined;
+          const lwColor = w?.attributes?.linked_word_color as
+            | string
+            | undefined;
+          const page = w?.attributes?.page as string | undefined;
+          linkedWords.push({ text_key, color: lwColor, page });
+        }
+      }
     }
   }
 
-  if (children.length === 0) return null;
+  const attributes: Record<string, unknown> = { gap: 8 };
+  if (baseTextKey) attributes.textLocalizationKey = baseTextKey;
+  if (baseTextColor) attributes.textColor = baseTextColor;
+  const first = linkedWords[0];
+  const second = linkedWords[1];
+  if (first) {
+    if (first.text_key)
+      attributes.linkedWordFirstLocalizationKey = first.text_key;
+    if (first.color) attributes.linkedWordFirstColor = first.color;
+    if (first.page) attributes.linkedWordFirstPage = first.page;
+  }
+  if (second) {
+    if (second.text_key)
+      attributes.linkedWordSecondLocalizationKey = second.text_key;
+    if (second.color) attributes.linkedWordSecondColor = second.color;
+    if (second.page) attributes.linkedWordSecondPage = second.page;
+  }
 
   return {
-    type: 'view',
-    attributes: { gap: 8 },
-    children,
+    type: 'OnboardFooter',
+    attributes,
+    children: undefined as unknown as Node,
   } as NodeData;
 }