@developer_tribe/react-builder 1.2.29 → 1.2.31

package/src/build-components/index.generated.ts

@@ -0,0 +1,184 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+export { default as RenderNode } from './RenderNode.generated';
+
+export { patterns } from './patterns.generated';
+
+export const allcomponentNames = [
+  'BIcon',
+  'BackgroundImage',
+  'Button',
+  'Carousel',
+  'CarouselButtons',
+  'CarouselDots',
+  'CarouselItem',
+  'CarouselProvider',
+  'CountDown',
+  'Image',
+  'Main',
+  'NavigationBarColor',
+  'Onboard',
+  'OnboardButton',
+  'OnboardButtons',
+  'OnboardDot',
+  'OnboardFooter',
+  'OnboardImage',
+  'OnboardItem',
+  'OnboardProvider',
+  'OnboardSubtitle',
+  'OnboardTitle',
+  'PaywallBackground',
+  'PaywallCloseButton',
+  'PaywallOptions',
+  'PaywallProvider',
+  'PaywallSubscribeButton',
+  'PriceTag',
+  'Pricing',
+  'Promo',
+  'RadioButton',
+  'Separator',
+  'StatusBarColor',
+  'Text',
+  'View',
+] as const;
+
+export type {
+  BIconPropsGenerated,
+  BIconComponentProps,
+} from './BIcon/BIconProps.generated';
+export type {
+  BackgroundImagePropsGenerated,
+  BackgroundImageComponentProps,
+} from './BackgroundImage/BackgroundImageProps.generated';
+export type {
+  ButtonPropsGenerated,
+  ButtonComponentProps,
+} from './Button/ButtonProps.generated';
+export type {
+  CarouselPropsGenerated,
+  CarouselComponentProps,
+} from './Carousel/CarouselProps.generated';
+export type {
+  CarouselButtonsPropsGenerated,
+  CarouselButtonsComponentProps,
+} from './CarouselButtons/CarouselButtonsProps.generated';
+export type {
+  CarouselDotsPropsGenerated,
+  CarouselDotsComponentProps,
+} from './CarouselDots/CarouselDotsProps.generated';
+export type {
+  CarouselItemPropsGenerated,
+  CarouselItemComponentProps,
+} from './CarouselItem/CarouselItemProps.generated';
+export type {
+  CarouselProviderPropsGenerated,
+  CarouselProviderComponentProps,
+} from './CarouselProvider/CarouselProviderProps.generated';
+export type {
+  CountDownPropsGenerated,
+  CountDownComponentProps,
+} from './CountDown/CountDownProps.generated';
+export type {
+  ImagePropsGenerated,
+  ImageComponentProps,
+} from './Image/ImageProps.generated';
+export type {
+  MainPropsGenerated,
+  MainComponentProps,
+} from './Main/MainProps.generated';
+export type {
+  NavigationBarColorPropsGenerated,
+  NavigationBarColorComponentProps,
+} from './NavigationBarColor/NavigationBarColorProps.generated';
+export type {
+  OnboardPropsGenerated,
+  OnboardComponentProps,
+} from './Onboard/OnboardProps.generated';
+export type {
+  OnboardButtonPropsGenerated,
+  OnboardButtonComponentProps,
+} from './OnboardButton/OnboardButtonProps.generated';
+export type {
+  OnboardButtonsPropsGenerated,
+  OnboardButtonsComponentProps,
+} from './OnboardButtons/OnboardButtonsProps.generated';
+export type {
+  OnboardDotPropsGenerated,
+  OnboardDotComponentProps,
+} from './OnboardDot/OnboardDotProps.generated';
+export type {
+  OnboardFooterPropsGenerated,
+  OnboardFooterComponentProps,
+} from './OnboardFooter/OnboardFooterProps.generated';
+export type {
+  OnboardImagePropsGenerated,
+  OnboardImageComponentProps,
+} from './OnboardImage/OnboardImageProps.generated';
+export type {
+  OnboardItemPropsGenerated,
+  OnboardItemComponentProps,
+} from './OnboardItem/OnboardItemProps.generated';
+export type {
+  OnboardProviderPropsGenerated,
+  OnboardProviderComponentProps,
+} from './OnboardProvider/OnboardProviderProps.generated';
+export type {
+  OnboardSubtitlePropsGenerated,
+  OnboardSubtitleComponentProps,
+} from './OnboardSubtitle/OnboardSubtitleProps.generated';
+export type {
+  OnboardTitlePropsGenerated,
+  OnboardTitleComponentProps,
+} from './OnboardTitle/OnboardTitleProps.generated';
+export type {
+  PaywallBackgroundPropsGenerated,
+  PaywallBackgroundComponentProps,
+} from './PaywallBackground/PaywallBackgroundProps.generated';
+export type {
+  PaywallCloseButtonPropsGenerated,
+  PaywallCloseButtonComponentProps,
+} from './PaywallCloseButton/PaywallCloseButtonProps.generated';
+export type {
+  PaywallOptionsPropsGenerated,
+  PaywallOptionsComponentProps,
+} from './PaywallOptions/PaywallOptionsProps.generated';
+export type {
+  PaywallProviderPropsGenerated,
+  PaywallProviderComponentProps,
+} from './PaywallProvider/PaywallProviderProps.generated';
+export type {
+  PaywallSubscribeButtonPropsGenerated,
+  PaywallSubscribeButtonComponentProps,
+} from './PaywallSubscribeButton/PaywallSubscribeButtonProps.generated';
+export type {
+  PriceTagPropsGenerated,
+  PriceTagComponentProps,
+} from './PriceTag/PriceTagProps.generated';
+export type {
+  PricingPropsGenerated,
+  PricingComponentProps,
+} from './Pricing/PricingProps.generated';
+export type {
+  PromoPropsGenerated,
+  PromoComponentProps,
+} from './Promo/PromoProps.generated';
+export type {
+  RadioButtonPropsGenerated,
+  RadioButtonComponentProps,
+} from './RadioButton/RadioButtonProps.generated';
+export type {
+  SeparatorPropsGenerated,
+  SeparatorComponentProps,
+} from './Separator/SeparatorProps.generated';
+export type {
+  StatusBarColorPropsGenerated,
+  StatusBarColorComponentProps,
+} from './StatusBarColor/StatusBarColorProps.generated';
+export type {
+  TextPropsGenerated,
+  TextComponentProps,
+} from './Text/TextProps.generated';
+export type {
+  ViewPropsGenerated,
+  ViewComponentProps,
+} from './View/ViewProps.generated';

package/src/build-components/patterns.generated.ts

@@ -2129,6 +2129,10 @@ export const patterns = [
           'sliding_dot',
           'liquid_like',
         ],
+        dot_thickness: 'size',
+        inactive_dot_opacity: 'number',
+        inactive_dot_color: 'color',
+        active_dot_color: 'color',
       },
     },
     meta: {
@@ -2453,6 +2457,11 @@ export const patterns = [
         flexGrow: 0,
         flexShrink: 0,
       },
+      dotType: 'expanding_dot',
+      dot_thickness: 10,
+      inactive_dot_opacity: 0.3,
+      active_dot_color: 'STATIC_COLORS.ONBOARD_DOT_ACTIVE',
+      inactive_dot_color: 'THEME_COLORS.BACKGROUND',
     },
     types: {},
   },
@@ -5270,7 +5279,6 @@ export const patterns = [
           zIndex: 'number',
         },
         labelKey: 'string',
-        button_text_color: 'color',
         animation: [
           'simple-animation',
           'line-animation',
@@ -5279,7 +5287,6 @@ export const patterns = [
           'blur-line-animation',
         ],
         animation_color: 'color',
-        button_background_color: 'color',
         flex: 'number',
         events: 'EventObject[]',
       },
@@ -5330,13 +5337,6 @@ export const patterns = [
           sort: 21,
           preferredScale: 's',
         },
-        button_text_color: {
-          label: 'Button Text Color',
-          description: 'Text color of the button.',
-          category: 'style',
-          specialCategory: null,
-          sort: 2,
-        },
         animation: {
           label: 'Animation',
           description: 'Animation style for the button.',
@@ -5351,13 +5351,6 @@ export const patterns = [
           specialCategory: null,
           sort: 4,
         },
-        button_background_color: {
-          label: 'Button Background Color',
-          description: 'Background color of the button.',
-          category: 'style',
-          specialCategory: null,
-          sort: 5,
-        },
       },
       attributes: {
         scrollable: {
@@ -6524,7 +6517,8 @@ export const patterns = [
       dotType: 'expanding_dot',
       dot_thickness: 10,
       inactive_dot_opacity: 0.3,
-      active_dot_color: '#007AFF',
+      active_dot_color: 'STATIC_COLORS.ONBOARD_DOT_ACTIVE',
+      inactive_dot_color: 'THEME_COLORS.BACKGROUND',
     },
     types: {},
   },

package/src/components/BottomBar.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { Icon } from './Icon.generated';
-import type { IconsType } from '../types/Icons';
+import type { IconsType } from '../types/Icons.generated';
 import { useRenderStore } from '../store';
 import type { Localication } from '../types/PreviewConfig';
 import { InspectModal, LocalicationModal, Modal } from '../modals';
@@ -31,8 +31,8 @@ export function BottomBar({
   const inspectIcon: IconsType = 'info-circle';
 
   const {
-    appConfig,
-    setAppConfig,
+    localization,
+    setLocalization,
     theme,
     setTheme,
     defaultLanguage,
@@ -42,8 +42,8 @@ export function BottomBar({
     isRtl,
     setIsRtl,
   } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    setAppConfig: s.setAppConfig,
+    localization: s.localization,
+    setLocalization: s.setLocalization,
     theme: s.theme,
     setTheme: s.setTheme,
     defaultLanguage: s.defaultLanguage,
@@ -62,7 +62,7 @@ export function BottomBar({
   const activeLanguage = defaultLanguage;
 
   const handleLocalicationChange = (next: Localication) => {
-    setAppConfig({ ...appConfig, localication: next });
+    setLocalization(next);
   };
 
   const themeIsActive = theme === 'dark';
@@ -170,7 +170,7 @@ export function BottomBar({
 
       {isLocalizationOpen && (
         <LocalicationModal
-          data={appConfig.localication ?? {}}
+          data={localization ?? {}}
           onChange={handleLocalicationChange}
           onClose={() => setIsLocalizationOpen(false)}
         />
@@ -191,8 +191,6 @@ export function BottomBar({
             description="Inspect and edit raw node JSON."
             previewMode={previewMode}
             setPreviewMode={setPreviewMode}
-            appConfig={appConfig}
-            setAppConfig={setAppConfig}
             logLabel="BottomBar Debug JSON"
           />
         </Modal>

package/src/components/BuilderProvider.tsx

@@ -2,10 +2,13 @@ import React, { createContext, useContext, useMemo } from 'react';
 import type { Product } from '../paywall/types/paywall-types';
 import type { PaywallBenefits } from '../paywall/types/benefits';
 import {
-  type AppConfig,
   type Theme,
   defaultLocalization,
   defaultTheme,
+  type Localication,
+  defaultBaseSize,
+  type BaseSize,
+  defaultLanguage,
   mergeLocalization,
 } from '../types/PreviewConfig';
 import type { Fonts } from '../types/Fonts';
@@ -19,8 +22,7 @@ import { defaultProjectColors, mergeProjectColors } from '../utils';
 export type Products = Product;
 
 export type BuilderProviderParams = {
-  mockProducts: Products[];
-  mockBenefits: PaywallBenefits;
+  // Props that are NOT in store (or are platform specific overrides)
   /**
    * Render platform for style extraction + meta filtering.
    * - 'web' (default): returns CSS-friendly styles for DOM rendering.
@@ -28,22 +30,25 @@ export type BuilderProviderParams = {
    */
   platform?: 'web' | 'native';
   onPaywallSubscribe?: (product?: Product) => void | boolean | Promise<boolean>;
-  /**
-   * Optional runtime config + styling inputs.
-   * These are intentionally passed down via BuilderProvider so `build-components`
-   * never need to touch `useRenderStore`.
-   */
-  theme?: Theme;
-  defaultLanguage?: string;
-  appConfig?: AppConfig;
+
+  // Optional overrides for store values (though usually store is source of truth)
+  // We keep these in type for backwards compatibility or explicit overrides if needed,
+  // but internally we prefer store values.
+  mockProducts?: Products[];
+  mockBenefits?: PaywallBenefits;
+  mockTheme?: Theme;
+  mockDefaultLanguage?: string;
+  localization?: Localication;
+  baseSize?: BaseSize;
+  // projectColors, fonts, previewMode, selectedKey kept as they are commonly used and not explicitly asked to rename
   projectColors?: ProjectColors;
   fonts?: Fonts;
-  appFont?: string | undefined;
-  /**
-   * Optional selection info (used by builder UI; ignored by host runtime).
-   */
   previewMode?: boolean;
   selectedKey?: string;
+
+  // Derived / Convenience values provided by the context (populated from mock* if present)
+  theme?: Theme;
+  defaultLanguage?: string;
 };
 
 type BuilderProviderProps = {
@@ -56,65 +61,29 @@ const builderContext = createContext<BuilderProviderParams | undefined>(
 );
 
 export function BuilderProvider({ params, children }: BuilderProviderProps) {
-  const value = useMemo<BuilderProviderParams>(
-    () => ({
-      mockProducts: Array.isArray(params?.mockProducts)
-        ? params.mockProducts
-        : [],
-      mockBenefits:
-        params?.mockBenefits && typeof params.mockBenefits === 'object'
-          ? (params.mockBenefits as PaywallBenefits)
-          : {},
-      onPaywallSubscribe:
-        typeof params?.onPaywallSubscribe === 'function'
-          ? params.onPaywallSubscribe
-          : undefined,
-      theme:
-        params?.theme === 'light' || params?.theme === 'dark'
-          ? params.theme
-          : defaultTheme,
-      defaultLanguage:
-        typeof params?.defaultLanguage === 'string'
-          ? params.defaultLanguage
-          : 'en',
-      appConfig:
-        params?.appConfig && typeof params.appConfig === 'object'
-          ? {
-              ...(params.appConfig as AppConfig),
-              localication: mergeLocalization(
-                defaultLocalization,
-                (params.appConfig as AppConfig).localication ?? {},
-              ),
-            }
-          : undefined,
-      projectColors:
-        params?.projectColors && typeof params.projectColors === 'object'
-          ? mergeProjectColors(defaultProjectColors, params.projectColors)
-          : defaultProjectColors,
-      fonts: Array.isArray(params?.fonts) ? (params.fonts as Fonts) : undefined,
-      appFont: params?.appFont,
-      platform: params?.platform === 'native' ? 'native' : 'web',
-      previewMode: !!params?.previewMode,
-      selectedKey:
-        typeof params?.selectedKey === 'string'
-          ? params.selectedKey
-          : undefined,
-    }),
-    [
-      params?.mockBenefits,
-      params?.mockProducts,
-      params?.platform,
-      params?.onPaywallSubscribe,
-      params?.theme,
-      params?.defaultLanguage,
-      params?.appConfig,
-      params?.projectColors,
-      params?.fonts,
-      params?.appFont,
-      params?.previewMode,
-      params?.selectedKey,
-    ],
-  );
+  // We rely purely on params passed from parent (which reads from store)
+  const value = useMemo<BuilderProviderParams>(() => {
+    const theme = params.mockTheme ?? defaultTheme;
+    const lang = params.mockDefaultLanguage ?? defaultLanguage;
+    return {
+      ...params,
+      // Ensure defaults if mxissing
+      mockProducts: params.mockProducts ?? [],
+      mockBenefits: params.mockBenefits ?? {},
+      mockTheme: theme,
+      mockDefaultLanguage: lang,
+      theme,
+      defaultLanguage: lang,
+      baseSize: params.baseSize ?? defaultBaseSize,
+      projectColors: params.projectColors
+        ? mergeProjectColors(defaultProjectColors, params.projectColors)
+        : defaultProjectColors,
+      localization: params.localization
+        ? mergeLocalization(defaultLocalization, params.localization)
+        : defaultLocalization,
+      platform: params.platform ?? 'web',
+    };
+  }, [params]);
 
   return (
     <builderContext.Provider value={value}>{children}</builderContext.Provider>
@@ -122,14 +91,8 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
 }
 
 export function useBuilderParams(): Readonly<BuilderProviderParams> {
-  return (
-    useContext(builderContext) ?? {
-      mockProducts: [],
-      mockBenefits: {},
-      platform: 'web',
-      theme: defaultTheme,
-      defaultLanguage: 'en',
-      projectColors: defaultProjectColors,
-    }
-  );
+  const ctx = useContext(builderContext);
+  if (ctx) return ctx;
+
+  throw new Error('useBuilderParams must be used within BuilderProvider');
 }

package/src/components/EditorHeader.tsx

@@ -37,13 +37,15 @@ export function EditorHeader({
     device: selectedDevice,
     setDevice,
     setCurrent,
-    setAppConfig,
+    setLocalization,
+    setBaseSize,
     setProjectColors,
   } = useRenderStore((s) => ({
     device: s.device,
     setDevice: s.setDevice,
     setCurrent: s.setCurrent,
-    setAppConfig: s.setAppConfig,
+    setLocalization: s.setLocalization,
+    setBaseSize: s.setBaseSize,
     setProjectColors: s.setProjectColors,
   }));
 
@@ -143,7 +145,8 @@ export function EditorHeader({
     const next = repairNodeKeys(cloneNode(sample.data));
     setEditorData(next);
     setCurrent(next);
-    if (sample.appConfig) setAppConfig(sample.appConfig);
+    if (sample.localization) setLocalization(sample.localization);
+    if (sample.baseSize) setBaseSize(sample.baseSize);
     setProjectColors(sample.projectColors);
     toast.success(`Replaced with "${sample.name}"`);
   };

package/src/hooks/useLocalize.ts

@@ -1,27 +1,31 @@
 import { useCallback } from 'react';
-import type { AppConfig } from '../types/PreviewConfig';
-import { defaultAppConfig } from '../types/PreviewConfig';
+import { type Localication, defaultLocalization } from '../types/PreviewConfig';
 import { useBuilderParams } from '../components/BuilderProvider';
 import { useLocalizationParams } from './useLocalizationParams';
 import { replaceLocalizationParams } from '../utils/replaceLocalizationParams';
 
 export type LocalizeFn = (keyOrText: string) => string;
 
-export function useLocalize(options?: { appConfig?: AppConfig }): LocalizeFn {
+export function useLocalize(options?: {
+  localization?: Localication;
+  defaultLanguage?: string;
+}): LocalizeFn {
   const {
-    appConfig: builderAppConfig,
-    defaultLanguage: builderDefaultLanguage,
+    localization: builderLocalization,
+    mockDefaultLanguage: builderDefaultLanguage,
   } = useBuilderParams();
-  const appConfig = options?.appConfig ?? builderAppConfig ?? defaultAppConfig;
-  const defaultLanguage = builderDefaultLanguage ?? 'en';
-  const { localication } = appConfig;
+  //TODO: genelle (react-native ksımına export et)
+  const localization =
+    options?.localization ?? builderLocalization ?? defaultLocalization;
+  const defaultLanguage =
+    options?.defaultLanguage ?? builderDefaultLanguage ?? 'en';
   const params = useLocalizationParams();
 
   return useCallback(
     (keyOrText: string) => {
-      const raw = localication?.[defaultLanguage]?.[keyOrText] ?? keyOrText;
+      const raw = localization?.[defaultLanguage]?.[keyOrText] ?? keyOrText;
       return replaceLocalizationParams(raw, params);
     },
-    [defaultLanguage, localication, params],
+    [defaultLanguage, localization, params],
   );
 }

package/src/hooks/usePreviewSelection.ts

@@ -0,0 +1,66 @@
+import { useEffect, type RefObject } from 'react';
+import type { Node } from '../types/Node';
+import { findNodeByKeyNested } from '../utils/findNodeByKeyNested';
+
+type UsePreviewSelectionParams = {
+  previewMode: boolean;
+  data: Node;
+  rootRef: RefObject<HTMLDivElement>;
+  onSelectNode?: (node: Node | null) => void;
+  setCurrent: (node: Node) => void;
+  forceRender: number;
+};
+
+export function usePreviewSelection({
+  previewMode,
+  data,
+  rootRef,
+  onSelectNode,
+  setCurrent,
+  forceRender,
+}: UsePreviewSelectionParams) {
+  useEffect(() => {
+    if (!previewMode) {
+      return;
+    }
+
+    const root = rootRef.current;
+    if (!root) {
+      return;
+    }
+
+    const handleClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement | null;
+
+      if (!target) return;
+
+      // Ignore clicks on carousel dots to avoid interfering with navigation
+      if (target.closest('.embla__dot')) {
+        return;
+      }
+
+      // Some build-components may attach synthetic keys (e.g. React `useId()`),
+      // which are not present in the persisted node tree. Walk up until we find
+      // an attribute-key that resolves to a real node.
+      let element = target.closest('[attribute-key]') as HTMLElement | null;
+      while (element) {
+        const key = element.getAttribute('attribute-key');
+        if (key) {
+          const node = findNodeByKeyNested(data, key);
+          if (node) {
+            setCurrent(node);
+            onSelectNode?.(node);
+            return;
+          }
+        }
+        element = element.parentElement?.closest('[attribute-key]') ?? null;
+      }
+    };
+
+    root.addEventListener('click', handleClick);
+
+    return () => {
+      root.removeEventListener('click', handleClick);
+    };
+  }, [previewMode, data, onSelectNode, setCurrent, forceRender, rootRef]); // forceRender: retrigger effect when we want to force a refresh (e.g. route change)
+}

package/src/index.ts

@@ -16,13 +16,11 @@ export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
 export type { Project, ProjectColors, ProjectMeta } from './types/Project';
 export type { Device } from './types/Device';
 export type {
-  AppConfig,
   Theme,
   Localication,
   LocalizationKey,
 } from './types/PreviewConfig';
 export {
-  defaultAppConfig,
   defaultTheme,
   defaultLocalization,
   mergeLocalization,

package/src/logger.ts

@@ -6,33 +6,17 @@
  */
 
 type LogPayload = Record<string, unknown>;
-type LogOptions = { remote?: boolean };
 
 function noop() {}
-
+//TODO: bizim logger'ı kullan
 export const iapLogger = {
-  error(
-    _tags: string[],
-    message: string,
-    payload?: LogPayload,
-    _opts?: LogOptions,
-  ) {
+  error(_tags: string[], message: string, payload?: LogPayload) {
     console.error(`[iap] ${message}`, payload);
   },
-  warn(
-    _tags: string[],
-    message: string,
-    payload?: LogPayload,
-    _opts?: LogOptions,
-  ) {
+  warn(_tags: string[], message: string, payload?: LogPayload) {
     console.warn(`[iap] ${message}`, payload);
   },
-  info(
-    _tags: string[],
-    message: string,
-    payload?: LogPayload,
-    _opts?: LogOptions,
-  ) {
+  info(_tags: string[], message: string, payload?: LogPayload) {
     console.info(`[iap] ${message}`, payload);
   },
   debug: noop,

package/src/modals/IconPickerModal.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import Modal from './Modal';
-import { Icons, type IconsType } from '../types/Icons';
+import { Icons, type IconsType } from '../types/Icons.generated';
 import { Icon } from '../components/Icon.generated';
 
 type IconPickerModalProps = {