@developer_tribe/react-builder 0.1.31 → 1.0.1

package/src/types/PreviewConfig.ts

@@ -1,17 +1,26 @@
-import { TargetedScreenSize } from './TargetedScreenSize';
-
-export interface PreviewConfig {
+export interface AppConfig {
   theme: 'light' | 'dark';
-  screenSize: TargetedScreenSize;
-  isRtl: boolean;
+  isRtl: boolean; //This could be device in future
   screenStyle: {
     light: { backgroundColor: string; color: string; seperatorColor?: string };
     dark: { backgroundColor: string; color: string; seperatorColor?: string };
   };
   localication: Localication;
   defaultLanguage?: string;
+  baseSize: { width: number; height: number };
 }
 
+export const defaultAppConfig: AppConfig = {
+  theme: 'light',
+  isRtl: false,
+  screenStyle: {
+    light: { backgroundColor: '#FDFDFD', color: '#161827' },
+    dark: { backgroundColor: '#12131A', color: '#E9EBF9' },
+  },
+  localication: {},
+  baseSize: { width: 375, height: 812 },
+};
+
 export type Localication = {
   [key: string]: {
     [key: string]: string;

package/src/types/Project.ts

@@ -1,11 +1,24 @@
 import { Node } from '../types/Node';
-import { PreviewConfig } from './PreviewConfig';
+import { AppConfig } from './PreviewConfig';
 
 export interface ProjectBase<T> {
   name: string;
   version: string;
   data: T;
-  previewConfig?: PreviewConfig;
+  appConfig?: AppConfig;
 }
 
 export interface Project extends ProjectBase<Node> {}
+
+export type LogLevel = 'NONE' | 'ERROR' | 'WARN' | 'INFO' | 'VERBOSE';
+
+export type LogSource = string;
+
+export interface LogEntry {
+  id: string;
+  timestamp: number;
+  level: LogLevel;
+  source: LogSource;
+  message: string;
+  payload?: unknown;
+}

package/src/utils/copyNode.ts

@@ -0,0 +1,7 @@
+import { useRenderStore } from '../store';
+import { Node } from '../types/Node';
+
+export function copyNode(node: Node) {
+  const { setCopiedNode } = useRenderStore.getState();
+  setCopiedNode(node);
+}

package/src/utils/extractTextStyle.ts

@@ -7,8 +7,10 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   node: NodeData<T>,
 ) {
   const attributes = node.attributes;
-
-  const { screenStyle, theme } = useRenderStore.getState();
+  //TODO: it should be passed as a prop to the function (need a state)
+  const {
+    appConfig: { screenStyle, theme },
+  } = useRenderStore.getState();
   const fallbackColor =
     theme === 'light' ? screenStyle.light.color : screenStyle.dark.color;
 

package/src/utils/getDevices.ts

@@ -11,6 +11,7 @@ export function getDevices(): Device[] {
   return deviceList;
 }
 
+//TODO: object instead of function
 export function getDefaultDevice(): Device {
   return getDevices()[0];
 }

package/src/utils/logger.ts

@@ -0,0 +1,76 @@
+import { useRenderStore } from '../store';
+import type { LogLevel, LogSource } from '../types/Project';
+
+const levelPriority: Record<Exclude<LogLevel, 'NONE'>, number> = {
+  ERROR: 0,
+  WARN: 1,
+  INFO: 2,
+  VERBOSE: 3,
+};
+
+function shouldLog(currentLevel: LogLevel, level: LogLevel): boolean {
+  if (currentLevel === 'NONE' || level === 'NONE') return false;
+  const curr = levelPriority[currentLevel as Exclude<LogLevel, 'NONE'>];
+  const incoming = levelPriority[level as Exclude<LogLevel, 'NONE'>];
+  return incoming <= curr;
+}
+
+function consoleLog(
+  level: LogLevel,
+  source: LogSource,
+  message: string,
+  payload?: unknown,
+) {
+  const prefix = `[${source}] ${message}`;
+  switch (level) {
+    case 'ERROR':
+      // eslint-disable-next-line no-console
+      console.error(prefix, payload);
+      break;
+    case 'WARN':
+      // eslint-disable-next-line no-console
+      console.warn(prefix, payload);
+      break;
+    case 'INFO':
+      // eslint-disable-next-line no-console
+      console.info(prefix, payload);
+      break;
+    case 'VERBOSE':
+      // eslint-disable-next-line no-console
+      console.debug(prefix, payload);
+      break;
+    default:
+      break;
+  }
+}
+
+export const logger = {
+  setLevel(level: LogLevel) {
+    useRenderStore.getState().setLogLevel(level);
+    // eslint-disable-next-line no-console
+    console.info(`[Logger] level set to ${level}`);
+  },
+  log(level: LogLevel, source: LogSource, message: string, payload?: unknown) {
+    const { logLevel, addLog } = useRenderStore.getState();
+    if (!shouldLog(logLevel, level)) return;
+    addLog({ level, source, message, payload });
+    consoleLog(level, source, message, payload);
+  },
+  verbose(source: LogSource, message: string, payload?: unknown) {
+    this.log('VERBOSE', source, message, payload);
+  },
+  info(source: LogSource, message: string, payload?: unknown) {
+    this.log('INFO', source, message, payload);
+  },
+  warn(source: LogSource, message: string, payload?: unknown) {
+    this.log('WARN', source, message, payload);
+  },
+  error(source: LogSource, message: string, payload?: unknown) {
+    this.log('ERROR', source, message, payload);
+  },
+  clear() {
+    useRenderStore.getState().clearLogs();
+  },
+};
+
+export type { LogLevel };

package/src/utils/novaToJson.ts

@@ -172,6 +172,9 @@ function buildCarouselItem(
       // derive resizeMode from is_bg_image and try to extract borderRadius from styles
       const isBgImage = Boolean(comp?.attributes?.is_bg_image);
       const imageStyle = extractViewStyleAttributesFromComponent(comp);
+      // optional rich media
+      const lottie = comp?.attributes?.lottie as string | undefined;
+      const videoUrl = comp?.attributes?.video_url as string | undefined;
 
       if (src) {
         children.push({
@@ -183,6 +186,8 @@ function buildCarouselItem(
             ...(typeof imageStyle.borderRadius === 'number'
               ? { borderRadius: imageStyle.borderRadius }
               : {}),
+            ...(typeof lottie === 'string' ? { lottie } : {}),
+            ...(typeof videoUrl === 'string' ? { video_url: videoUrl } : {}),
           },
           children: undefined as unknown as Node,
         } as unknown as NodeData);

package/src/utils/useLogRender.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { logger } from './logger';
+
+export function useLogRender(sourceName: string, payload?: unknown) {
+  useEffect(() => {
+    logger.verbose(sourceName, 'rendered', payload);
+    return () => {
+      logger.verbose(sourceName, 'unmount');
+    };
+    // We intentionally log once per mount/update cycle only for rendered
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}