@developer_tribe/react-builder 1.2.28 → 1.2.30

package/src/store.ts

@@ -2,9 +2,11 @@ import { createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import type { Device } from './types/Device';
 import {
-  defaultAppConfig,
+  defaultBaseSize,
+  defaultLocalization,
   defaultTheme,
-  type AppConfig,
+  type BaseSize,
+  type Localication,
   type Theme,
 } from './types/PreviewConfig';
 import { getDefaultDevice } from './utils/getDevices';
@@ -29,14 +31,16 @@ type RenderStore = {
   incForceRender: () => void;
   device: Device;
   setDevice: (device: Device) => void;
-  appConfig: AppConfig;
-  setAppConfig: (appConfig: AppConfig) => void;
+  baseSize: BaseSize;
+  setBaseSize: (baseSize: BaseSize) => void;
   projectColors?: ProjectColors;
   setProjectColors: (projectColors?: ProjectColors) => void;
   theme: Theme;
   setTheme: (theme: Theme) => void;
   defaultLanguage: string;
   setDefaultLanguage: (lang: string) => void;
+  localization: Localication;
+  setLocalization: (localization: Localication) => void;
   isRtl: boolean;
   setIsRtl: (isRtl: boolean) => void;
   previewMode: boolean;
@@ -106,14 +110,16 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
         set((state) => ({ forceRender: state.forceRender + 1 })),
       device: getDefaultDevice(),
       setDevice: (device) => set({ device }),
-      appConfig: defaultAppConfig,
-      setAppConfig: (appConfig) => set({ appConfig }),
+      baseSize: defaultBaseSize,
+      setBaseSize: (baseSize) => set({ baseSize }),
       projectColors: undefined,
       setProjectColors: (projectColors) => set({ projectColors }),
       theme: defaultTheme,
       setTheme: (theme) => set({ theme }),
       defaultLanguage: 'en',
       setDefaultLanguage: (lang) => set({ defaultLanguage: lang }),
+      localization: defaultLocalization,
+      setLocalization: (localization) => set({ localization }),
       isRtl: false,
       setIsRtl: (isRtl) => set({ isRtl }),
       previewMode: false,

package/src/styles/modals/_inspect-modal.scss

@@ -31,7 +31,9 @@
   font-weight: 500;
   color: colors.$mutedTextColor;
   border-bottom: 2px solid transparent;
-  transition: color 0.15s, border-color 0.15s;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
 
   &:hover {
     color: colors.$textColor;
@@ -99,7 +101,8 @@
 }
 
 .inspect-modal__cell-key {
-  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', monospace;
+  font-family:
+    ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', monospace;
   font-size: sizes.$fontSizeXs;
   word-break: break-all;
   max-width: 320px;
@@ -110,7 +113,8 @@
 }
 
 .inspect-modal__cell-value {
-  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', monospace;
+  font-family:
+    ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', monospace;
   font-size: sizes.$fontSizeXs;
   word-break: break-all;
   display: flex;

package/src/types/Icons.generated.ts

@@ -0,0 +1,244 @@
+// NOTE: This file is generated. Do not edit it manually.
+//TODO: we might use font-icon or something more optimize
+export const Icons = [
+  'activity',
+  'activity-heart',
+  'alert-circle',
+  'alert-triangle',
+  'anchor',
+  'archive',
+  'arrow-down',
+  'arrow-left',
+  'arrow-narrow-down-left',
+  'arrow-narrow-up-right',
+  'arrow-right',
+  'arrow-right-smooth',
+  'asterisk-01',
+  'asterisk-02',
+  'at-sign',
+  'award',
+  'battery-charging',
+  'bell-01',
+  'bell-02',
+  'bell-ringing-02',
+  'bookmark',
+  'bookmark-add',
+  'bookmark-check',
+  'bookmark-minus',
+  'bookmark-x',
+  'bubble',
+  'building-01',
+  'building-02',
+  'building-03',
+  'building-04',
+  'building-05',
+  'building-06',
+  'building-07',
+  'building-08',
+  'building-09',
+  'camera',
+  'camera-01',
+  'camera-steel',
+  'check',
+  'check-circle',
+  'check-circle-bold',
+  'check-circle-broken',
+  'check-done-01',
+  'check-done-02',
+  'check-heart',
+  'check-square',
+  'check-square-broken',
+  'check-verified-01',
+  'check-verified-02',
+  'check-verified-03',
+  'checkbox',
+  'checkv',
+  'chevron-down',
+  'chevron-down2',
+  'chevron-left',
+  'chevron-left-2',
+  'chevron-right',
+  'chevron-right-empty',
+  'chevron-right-smooth',
+  'chevron-up',
+  'circle',
+  'clock',
+  'clock-fast-forward',
+  'close',
+  'close-circle',
+  'cloud-01',
+  'cloud-blank-01',
+  'cloud-blank-02',
+  'coin',
+  'coins-02',
+  'colors',
+  'copy-01',
+  'copy-02',
+  'copy-03',
+  'copy-04',
+  'copy-05',
+  'copy-06',
+  'copy-07',
+  'corner-down-right',
+  'crypto-bold',
+  'delete-icon',
+  'diamond',
+  'dice-3',
+  'divide-01',
+  'divide-02',
+  'divide-03',
+  'document-check-bold',
+  'dots-circle',
+  'dots-grid',
+  'dots-horizontal',
+  'dots-vertical',
+  'download-01',
+  'download-02',
+  'download-03',
+  'edit-03',
+  'edit-04',
+  'edit-05',
+  'element-3',
+  'ellipse-127',
+  'exclaimation-circle',
+  'eye-off-line',
+  'face-smile',
+  'file-04',
+  'file-05',
+  'file-check-02',
+  'file-plus-01',
+  'file-shield-02',
+  'filter-funnel-01',
+  'flag-03',
+  'flash',
+  'folder',
+  'folder-plus',
+  'gallery',
+  'globe-01',
+  'globe-04',
+  'globe-bold',
+  'guard',
+  'headphones-01',
+  'headphones-02',
+  'headset-bold',
+  'heart',
+  'heart-bold',
+  'help-circle',
+  'home-2',
+  'home-line',
+  'hourglass-02',
+  'image',
+  'image-01',
+  'image-03',
+  'inbox-01',
+  'inbox-arrow-down',
+  'info-circle',
+  'keyboard-line',
+  'lamp-charge',
+  'layer',
+  'light',
+  'like-dislike',
+  'lock-03',
+  'logout',
+  'magicpen',
+  'mail',
+  'mail-01',
+  'marker',
+  'medal-star',
+  'menu',
+  'menu-04',
+  'message-circle-01',
+  'message-plus-circle',
+  'message-question-circle',
+  'message-text-circle-01',
+  'message-text-square-02',
+  'message-x-square',
+  'microphone-02',
+  'microphone-slash',
+  'mirror',
+  'moon-01',
+  'moon-bold',
+  'mouse-circle',
+  'move',
+  'notification',
+  'notification-fill',
+  'notification-text',
+  'pdf-01',
+  'pencil-01',
+  'phone',
+  'phone-01',
+  'phone-arrow-down-left',
+  'phone-arrow-up-right',
+  'phone-hang-up',
+  'phone-hangup2',
+  'phone-incoming-01',
+  'phone-outgoing-01',
+  'phone-plus',
+  'phone-x',
+  'plus',
+  'plus-circle',
+  'printer',
+  'question-mark-circle',
+  'refresh-ccw-01',
+  'refresh-cw-01',
+  'refresh-cw-04',
+  'refresh-right-square-bold',
+  'remove-circle',
+  'repeat-04',
+  'repeat-bold',
+  'ruler-pen',
+  'search',
+  'search-lg',
+  'search-md',
+  'search-refraction',
+  'send-01',
+  'send-02',
+  'send-diagonal',
+  'setting-2',
+  'settings',
+  'settings-02',
+  'settings-04',
+  'settings-2',
+  'settings-cog',
+  'share-01',
+  'share-03',
+  'share-04',
+  'share-05',
+  'share-06',
+  'share-bold',
+  'shield-01',
+  'shield-bold',
+  'solar-check',
+  'speaker',
+  'speaker-wave',
+  'speedometer-03',
+  'star',
+  'star-rounded',
+  'sun',
+  'target-03',
+  'text-input',
+  'translate',
+  'trash',
+  'trash-02',
+  'trash-03',
+  'trash-04',
+  'trush-square-bold',
+  'unlimited',
+  'user-circle',
+  'user-jogging',
+  'user-plus-01',
+  'user-square',
+  'user-x-01',
+  'user-x-02',
+  'user2',
+  'users-02',
+  'users-speaker',
+  'verify',
+  'voice-cricle',
+  'x-circle',
+  'x-close',
+  'x-sm',
+  'zap',
+] as const;
+
+export type IconsType = (typeof Icons)[number];

package/src/types/PreviewConfig.ts

@@ -1,10 +1,5 @@
 export type Theme = 'light' | 'dark';
 
-export interface AppConfig {
-  localication: Localication;
-  baseSize: { width: number; height: number };
-}
-
 export type LocalizationKey =
   // paywall – period
   | 'base.builder.paywall.period.monthly'
@@ -159,7 +154,8 @@ export function mergeLocalization(
 
 export const defaultTheme: Theme = 'light';
 
-export const defaultAppConfig: AppConfig = {
-  localication: defaultLocalization,
-  baseSize: { width: 375, height: 812 },
-};
+export type BaseSize = { width: number; height: number };
+
+export const defaultBaseSize: BaseSize = { width: 375, height: 812 };
+
+export const defaultLanguage = 'en';

package/src/types/Project.ts

@@ -1,5 +1,5 @@
 import { Node } from '../types/Node';
-import { AppConfig } from './PreviewConfig';
+import { BaseSize, Localication } from './PreviewConfig';
 
 export type ProjectColorTokenMap = Record<string, string>;
 
@@ -23,7 +23,8 @@ export interface ProjectBase<T> {
    */
   type?: 'paywall' | 'onboard' | 'other';
   data: T;
-  appConfig?: AppConfig;
+  baseSize?: BaseSize;
+  localization?: Localication;
   projectColors?: ProjectColors;
 }
 
@@ -32,7 +33,7 @@ export interface Project extends ProjectBase<Node> {}
 /**
  * Lightweight subset of Project containing only the essential metadata
  * needed for persistence (name, version, type, data).
- * Excludes runtime/editor-only fields like appConfig and projectColors.
+ * Excludes runtime/editor-only fields like projectColors.
  */
 export type ProjectMeta = Pick<Project, 'name' | 'version' | 'type' | 'data'>;
 

package/src/utils/extractImageStyle.ts

@@ -23,7 +23,9 @@ export function extractImageStyle<T extends ImagePropsGenerated['attributes']>(
   const stylesBag = getStyleBag(attributes) as
     | ImagePropsGenerated['attributes']['style']
     | undefined;
-  const resizeMode: ResizeModeOptionType | undefined = stylesBag?.resizeMode;
+  const resizeMode: ResizeModeOptionType | undefined =
+    stylesBag?.resizeMode ?? (attributes as any).resizeMode;
+
   if (resizeMode === 'cover') style.objectFit = 'cover';
   else if (resizeMode === 'contain') style.objectFit = 'contain';
   else if (resizeMode === 'stretch') style.objectFit = 'fill';
@@ -43,7 +45,7 @@ export function extractImageStyleNative<
     | ImagePropsGenerated['attributes']['style']
     | undefined;
   const resizeMode: ResizeModeOptionType | undefined =
-    nativeStylesBag?.resizeMode;
+    nativeStylesBag?.resizeMode ?? (attributes as any).resizeMode;
 
   // In RN, resizeMode is usually an Image prop, but many codebases also accept it on ImageStyle.
   // We return it here so consumers can pass it through as they prefer.

package/src/utils/extractTextStyle/extractTextStyle.ts

@@ -7,6 +7,7 @@ import type { Theme } from '../../types/PreviewConfig';
 import { defaultTheme } from '../../types/PreviewConfig';
 import type { ProjectColors } from '../../types/Project';
 import type { Fonts } from '../../types/Fonts';
+import type { BaseSize } from '../../types/PreviewConfig';
 import { fs, parseSize } from '../../size-matters';
 import { parseColor } from '../parseColor';
 import { extractViewStyle } from '../extractViewStyle';
@@ -19,6 +20,8 @@ import {
 import { fontsDebug } from '../fontsDebug';
 import { getStyleBag, toAttributeRecord } from '../attributeStyle';
 
+// ... imports
+
 const inFlightFontLoads: Map<string, Promise<void>> = new Map<
   string,
   Promise<void>
@@ -91,6 +94,7 @@ export type ExtractTextStyleOptions = {
   onFontLoaded?: (fontFamily: string) => void;
   onError?: (error: string) => void;
   directlyTextStyle?: boolean;
+  baseSize?: BaseSize;
 };
 
 export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
@@ -123,7 +127,7 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   // Typography
   const fontSize = get('fontSize') as string | number | undefined;
   if (fontSize !== undefined) {
-    const parsed = parseSize(fontSize);
+    const parsed = parseSize(fontSize, options.baseSize);
     style.fontSize = parsed as React.CSSProperties['fontSize'];
   } else {
     style.fontSize = fs(14);
@@ -189,6 +193,7 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   const viewStyle = extractViewStyle(node, {
     projectColors: options.projectColors,
     theme,
+    baseSize: options.baseSize,
   });
   const fullStyle = { ...viewStyle, ...style };
 

package/src/utils/extractTextStyle/extractTextStyleNative.ts

@@ -4,6 +4,7 @@ import type { Theme } from '../../types/PreviewConfig';
 import { defaultTheme } from '../../types/PreviewConfig';
 import type { ProjectColors } from '../../types/Project';
 import type { Fonts } from '../../types/Fonts';
+import type { BaseSize } from '../../types/PreviewConfig';
 import { fs, parseSize } from '../../size-matters';
 import { parseColor } from '../parseColor';
 import { extractViewStyleNative } from '../extractViewStyle';
@@ -18,6 +19,7 @@ export type ExtractTextStyleNativeOptions = {
   theme?: Theme;
   projectColors?: ProjectColors;
   fonts?: Fonts;
+  baseSize?: BaseSize;
 };
 
 function weightToNumericKey(weight: unknown): string | undefined {
@@ -61,7 +63,7 @@ export function extractTextStyleNative<
   }
 
   const rawFontSize = get('fontSize') as string | number | undefined;
-  const parsedFontSize = parseSize(rawFontSize);
+  const parsedFontSize = parseSize(rawFontSize, options.baseSize);
   if (typeof parsedFontSize === 'number') style.fontSize = parsedFontSize;
   else style.fontSize = fs(14);
 
@@ -103,6 +105,7 @@ export function extractTextStyleNative<
   const viewStyle = extractViewStyleNative(node, {
     projectColors: options.projectColors,
     theme,
+    baseSize: options.baseSize,
   });
   return { ...viewStyle, ...style };
 }

package/src/utils/extractViewStyle/extractViewStyle.ts

@@ -4,6 +4,7 @@ import {
 } from '../../build-components/View/ViewProps.generated';
 import type { NodeData } from '../../types/Node';
 import type { ProjectColors } from '../../types/Project';
+import type { BaseSize } from '../../types/PreviewConfig';
 import { parseSize } from '../../size-matters';
 import { parseColor } from '../parseColor';
 import { getStyleBag, toAttributeRecord } from '../attributeStyle';
@@ -11,6 +12,7 @@ import { getStyleBag, toAttributeRecord } from '../attributeStyle';
 export type ExtractViewStyleOptions = {
   projectColors?: ProjectColors;
   theme?: string;
+  baseSize?: BaseSize;
 };
 
 export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
@@ -72,7 +74,7 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     rawValue: string | number | undefined,
   ) => {
     if (isEmptySizeValue(rawValue)) return;
-    const parsed = parseSize(rawValue);
+    const parsed = parseSize(rawValue, options.baseSize);
     style[property] = parsed as React.CSSProperties[K];
   };
 
@@ -85,13 +87,13 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     | number
     | undefined;
   if (!isEmptySizeValue(paddingHorizontal)) {
-    const parsed = parseSize(paddingHorizontal);
+    const parsed = parseSize(paddingHorizontal, options.baseSize);
     style.paddingLeft = parsed as React.CSSProperties['paddingLeft'];
     style.paddingRight = parsed as React.CSSProperties['paddingRight'];
   }
   const paddingVertical = get('paddingVertical') as string | number | undefined;
   if (!isEmptySizeValue(paddingVertical)) {
-    const parsed = parseSize(paddingVertical);
+    const parsed = parseSize(paddingVertical, options.baseSize);
     style.paddingTop = parsed as React.CSSProperties['paddingTop'];
     style.paddingBottom = parsed as React.CSSProperties['paddingBottom'];
   }
@@ -115,14 +117,14 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     (attrRecord.marginHorizontal as string | number | undefined) ??
     (styleBag?.marginHorizontal as string | number | undefined);
   if (!isEmptySizeValue(marginHorizontalRaw)) {
-    const parsed = parseSize(marginHorizontalRaw);
+    const parsed = parseSize(marginHorizontalRaw, options.baseSize);
     style.marginLeft = parsed as React.CSSProperties['marginLeft'];
     style.marginRight = parsed as React.CSSProperties['marginRight'];
   }
 
   const marginVertical = get('marginVertical') as string | number | undefined;
   if (!isEmptySizeValue(marginVertical)) {
-    const parsed = parseSize(marginVertical);
+    const parsed = parseSize(marginVertical, options.baseSize);
     style.marginTop = parsed as React.CSSProperties['marginTop'];
     style.marginBottom = parsed as React.CSSProperties['marginBottom'];
   }

package/src/utils/extractViewStyle/extractViewStyleNative.ts

@@ -1,6 +1,7 @@
 import type { ViewPropsGenerated } from '../../build-components/View/ViewProps.generated';
 import type { NodeData } from '../../types/Node';
 import type { ProjectColors } from '../../types/Project';
+import type { BaseSize } from '../../types/PreviewConfig';
 import { parseSize } from '../../size-matters';
 import { parseColor } from '../parseColor';
 import { getStyleBag, toAttributeRecord } from '../attributeStyle';
@@ -8,6 +9,7 @@ import { getStyleBag, toAttributeRecord } from '../attributeStyle';
 export type ExtractViewStyleNativeOptions = {
   projectColors?: ProjectColors;
   theme?: string;
+  baseSize?: BaseSize;
 };
 
 /**
@@ -49,7 +51,7 @@ export function extractViewStyleNative<
 
   const setParsedSize = (property: string, rawValue: unknown) => {
     if (isEmptySizeValue(rawValue)) return;
-    const parsed = parseSize(rawValue as string | number);
+    const parsed = parseSize(rawValue as string | number, options.baseSize);
     // RN generally expects numbers (dp). We allow percentages for width/height-like props.
     if (typeof parsed === 'number' || typeof parsed === 'string') {
       style[property] = parsed;

package/src/utils/getDefaultProject.ts

@@ -27,7 +27,6 @@ export function getDefaultProject(
     name,
     version,
     data: (overrides.data ?? null) as Node,
-    appConfig: overrides.appConfig,
     projectColors: overrides.projectColors,
     type: overrides.type,
   };

package/src/utils/replaceLocalizationParams.ts

@@ -1,6 +1,6 @@
 export function replaceLocalizationParams(
   text: string,
-  params?: Record<string, string | undefined> | null
+  params?: Record<string, string | undefined> | null,
 ): string {
   if (!text) return text;
   if (!params) return text;