@developer_tribe/react-builder 1.2.43 → 1.2.44-test.1

package/src/build-components/SystemButton/usePlacementButtonEvents.ts

@@ -0,0 +1,101 @@
+import { useRef, useCallback } from 'react';
+import type { MockOSContextValue } from '../../mockOS/context/MockOSContextBase';
+import type { PermissionStatus } from '../../mockOS/managers/mockPermissionManager';
+
+/** Event shape shared by SystemButton and OnboardButton. Placement = go to placementKey (onboard/terms/paywall); Navigate = navigate_to or carousel. */
+export interface PlacementEventObject {
+  type?: 'Permission' | 'Navigate' | 'Placement';
+  permission?: string | null;
+  placementKey?: string;
+  navigate_to?: string;
+  targetIndex?: number;
+}
+
+export interface UsePlacementButtonEventsOptions {
+  context: MockOSContextValue | null;
+  requestPermission: (permission: string) => Promise<PermissionStatus>;
+  /** Called for Navigate events when placementKey is not set (e.g. carousel or navigate_to). Return true if handled. */
+  onNavigateWithoutPlacement?: (
+    e: PlacementEventObject,
+  ) => Promise<boolean> | boolean;
+  /**
+   * Optional global navigate function (from useGlobalNavigation).
+   * When provided, Navigate/Placement events try this first before falling back
+   * to MockOSContext. Return true if the navigation was handled.
+   */
+  globalNavigate?: (target: string) => boolean;
+}
+
+/**
+ * Shared hook for Permission + Navigate(placementKey / navigate_to) used by SystemButton and OnboardButton.
+ * OnboardButton can pass onNavigateWithoutPlacement to handle carousel (targetIndex) and navigate_to.
+ * Onboard events are pushed to handledEventsRef too: double-click is ignored; "back to terms then click again" still works because the terms screen remounts and the ref is fresh.
+ */
+export function usePlacementButtonEvents(
+  events: PlacementEventObject[] | undefined,
+  options: UsePlacementButtonEventsOptions,
+): () => Promise<void> {
+  const {
+    context,
+    requestPermission,
+    onNavigateWithoutPlacement,
+    globalNavigate,
+  } = options;
+  const handledEventsRef = useRef<PlacementEventObject[]>([]);
+
+  /**
+   * Attempts to navigate to a target. Tries globalNavigate first (GlobalProvider),
+   * then falls back to MockOSContext.
+   */
+  function navigateTo(target: string): void {
+    if (globalNavigate?.(target)) return;
+    context?.navigation(target as Parameters<typeof context.navigation>[0]);
+  }
+
+  const handleClick = useCallback(async () => {
+    const list = events ?? [];
+
+    for (const e of list) {
+      if (handledEventsRef.current.includes(e)) {
+        continue;
+      }
+
+      if (e.type === 'Permission') {
+        const permission = e.permission ?? 'camera';
+        await requestPermission(permission);
+        handledEventsRef.current.push(e);
+      } else if (e.type === 'Placement' && e.placementKey) {
+        const target =
+          e.placementKey === 'paywall' ? 'paywall' : e.placementKey;
+        navigateTo(target);
+        handledEventsRef.current.push(e);
+      } else if (e.type === 'Navigate') {
+        if (e.placementKey) {
+          const target =
+            e.placementKey === 'paywall' ? 'paywall' : e.placementKey;
+          navigateTo(target);
+          handledEventsRef.current.push(e);
+        } else {
+          const handled =
+            onNavigateWithoutPlacement != null &&
+            (await Promise.resolve(onNavigateWithoutPlacement(e)));
+          if (handled) {
+            handledEventsRef.current.push(e);
+          } else if (e.navigate_to && typeof e.navigate_to === 'string') {
+            navigateTo(e.navigate_to);
+            handledEventsRef.current.push(e);
+          }
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    events,
+    context,
+    requestPermission,
+    onNavigateWithoutPlacement,
+    globalNavigate,
+  ]);
+
+  return handleClick;
+}

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

@@ -0,0 +1,45 @@
+import React, { useId } from 'react';
+import type { TermsProviderComponentProps } from './TermsProviderProps.generated';
+import RenderNode from '../RenderNode.generated';
+import type { Node } from '../../types/Node';
+import useNode from '../useNode';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+
+function TermsProvider({ node }: TermsProviderComponentProps) {
+  useLogRender('TermsProvider');
+  node = useNode(node);
+
+  const generatedId = useId();
+  const attributeName = node.sourceType ?? node.type ?? 'TermsProvider';
+  const attributeKey = node.key ?? generatedId;
+
+  const { previewMode, selectedKey } = useBuilderParams();
+
+  const baseStyle = useExtractViewStyle(node);
+
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    >
+      {node.children && <RenderNode node={node.children as Node} />}
+    </div>
+  );
+}
+
+export default React.memo(TermsProvider);

package/src/build-components/TermsProvider/TermsProviderProps.generated.ts

@@ -0,0 +1,82 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type AnimationOptionType =
+  | 'default'
+  | 'fade'
+  | 'fade_from_bottom'
+  | 'fade_from_right'
+  | 'reveal_from_bottom'
+  | 'scale_from_center'
+  | 'slide_from_right'
+  | 'slide_from_left'
+  | 'slide_from_bottom'
+  | 'none';
+export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
+
+export interface TermsProviderStyleGenerated {
+  flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
+export interface TermsProviderPropsGenerated {
+  child: string;
+  attributes: {
+    styles?: TermsProviderStyleGenerated;
+    scrollable?: boolean;
+    testID?: string;
+    animation?: AnimationOptionType;
+  };
+}
+
+export interface TermsProviderComponentProps {
+  node: NodeData<TermsProviderPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,35 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "TermsProvider",
+    "title": "title",
+    "description": "description",
+    "children": "node",
+    "extends": "View",
+    "attributes": {
+      "animation": ["default", "fade", "fade_from_bottom", "fade_from_right", "reveal_from_bottom", "scale_from_center", "slide_from_right", "slide_from_left", "slide_from_bottom", "none"]
+    }
+  },
+  "defaults": {
+    "styles": {
+      "width": "100%",
+      "height": "100%",
+      "flex": 1
+    }
+  },
+  "meta": {
+    "desiredParent": ["root", "GlobalProvider"],
+    "label": "Terms Provider",
+    "description": "Provider for terms & privacy page (e.g. WebView + form). Use as a GlobalProvider page.",
+    "attributes": {
+      "animation": {
+        "label": "Page transition animation",
+        "description": "When this component is a GlobalProvider page: animation used when navigating to this screen.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      }
+    },
+    "styles": {}
+  }
+}

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

@@ -0,0 +1,149 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { WebViewComponentProps } from './WebViewProps.generated';
+import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { parseColor } from '../../utils/parseColor';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+
+export function WebView({ node }: WebViewComponentProps) {
+  useLogRender('WebView');
+  node = useNode(node);
+  const attrs = node.attributes;
+  const viewStyle = useExtractViewStyle(node as any);
+  const { selectedTheme: theme, projectColors, device } = useBuilderParams();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const [loading, setLoading] = useState(true);
+
+  const platform = device?.platform || 'ios';
+  const url = platform === 'ios' ? attrs?.iosUrl : attrs?.androidUrl;
+
+  const effectiveTheme = theme ?? 'dark';
+  const colorOpts = { projectColors, theme };
+
+  const backgroundColor =
+    parseColor('THEME_COLORS.BACKGROUND', colorOpts) ??
+    parseColor('STATIC_COLORS.WHITE', colorOpts) ??
+    undefined;
+  const textColor =
+    parseColor('THEME_COLORS.TEXT', colorOpts) ??
+    parseColor('STATIC_COLORS.BLACK', colorOpts) ??
+    undefined;
+
+  const loaderColor =
+    parseColor(attrs?.styles?.loaderColor as string, colorOpts) ?? textColor;
+
+  const loaderSize = attrs?.styles?.loaderSize ?? 30;
+  const loaderBorderWidth = attrs?.styles?.loaderBorderWidth ?? 3;
+  const loaderAnimationDuration = attrs?.styles?.loaderAnimationDuration ?? 1;
+
+  const themeStyle = useMergedStyle(
+    backgroundColor != null ? { backgroundColor } : undefined,
+    textColor != null ? { color: textColor } : undefined,
+  );
+  const containerStyle = useMergedStyle(viewStyle, themeStyle, {
+    ['--rb-webview-loader-size' as string]: `${loaderSize}px`,
+    ['--rb-webview-loader-border-width' as string]: `${loaderBorderWidth}px`,
+    ['--rb-webview-loader-duration' as string]: `${loaderAnimationDuration}s`,
+  });
+  const overlayStyle = useMergedStyle(themeStyle);
+  const frameWrapperStyle = useMergedStyle(themeStyle, {
+    flex: 1,
+    minHeight: 0,
+  });
+
+  // Same-origin iframe: inject/update theme styles. Idempotent: updates existing
+  // style[data-rb-webview-theme] so theme change does not require iframe reload.
+  const injectThemeStyles = useCallback(() => {
+    if (backgroundColor == null || textColor == null) return;
+    const doc = iframeRef.current?.contentDocument;
+    if (!doc?.head) {
+      if (url) {
+        console.debug(
+          '[WebView] Theme styles not injected: contentDocument not accessible (cross-origin).',
+          'URL:',
+          url,
+          '— Use same-origin URL or rely on the wrapper filter for dark mode.',
+        );
+      }
+      return;
+    }
+    const existing = doc.querySelector('style[data-rb-webview-theme]');
+    const css = [
+      `body{background-color:${backgroundColor};color:${textColor}}`,
+      `*{color:${textColor}}`,
+      `span{background-color:${backgroundColor}}`,
+    ].join(' ');
+    if (existing) {
+      existing.textContent = css;
+    } else {
+      const style = doc.createElement('style');
+      style.setAttribute('data-rb-webview-theme', '');
+      style.textContent = css;
+      doc.head.appendChild(style);
+    }
+  }, [backgroundColor, textColor, url]);
+
+  const handleIframeLoad = useCallback(() => {
+    setLoading(false);
+    injectThemeStyles();
+  }, [injectThemeStyles]);
+
+  // Tema değişince iframe yeniden yüklemeden stil güncelle (same-origin). Cross-origin
+  // için sadece wrapper filter kullanılıyor, re-render yeterli.
+  useEffect(() => {
+    if (loading) return;
+    injectThemeStyles();
+  }, [theme, backgroundColor, textColor, loading, injectThemeStyles]);
+
+  // Cross-origin iframe'lere stil enjekte edilemez. Dark modda içeriği görsel olarak
+  // koyu göstermek için sadece iframe saran div'e CSS filter uyguluyoruz.
+  // Tema değişiminde iframe yeniden render edilmez (kullanıcı konumu/inputlar korunur).
+  const useForceDarkFilter = effectiveTheme === 'dark';
+
+  return (
+    <div
+      className="rb-webview"
+      style={containerStyle}
+      data-testid={attrs?.testID}
+    >
+      {loading && (
+        <div className="rb-webview__overlay" style={overlayStyle}>
+          <div
+            className="rb-webview__loader"
+            style={{
+              borderColor: loaderColor != null ? `${loaderColor}40` : undefined,
+              borderTopColor: loaderColor ?? undefined,
+            }}
+          />
+        </div>
+      )}
+
+      <div className="rb-webview__frame-wrapper" style={frameWrapperStyle}>
+        <div
+          className="rb-webview__frame-inner"
+          style={
+            useForceDarkFilter
+              ? {
+                  width: '100%',
+                  height: '100%',
+                  filter: 'invert(1) hue-rotate(180deg)',
+                }
+              : { width: '100%', height: '100%' }
+          }
+        >
+          <iframe
+            ref={iframeRef}
+            src={url}
+            className="rb-webview__frame"
+            style={{ opacity: loading ? 0 : 1, backgroundColor: 'transparent' }}
+            onLoad={handleIframeLoad}
+            title="WebView Content"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/build-components/WebView/WebViewProps.generated.ts

@@ -0,0 +1,76 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
+
+export interface WebViewStyleGenerated {
+  flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+  loaderColor?: string;
+  loaderSize?: number;
+  loaderBorderWidth?: number;
+  loaderAnimationDuration?: number;
+}
+
+export interface WebViewPropsGenerated {
+  child: string;
+  attributes: {
+    styles?: WebViewStyleGenerated;
+    scrollable?: boolean;
+    testID?: string;
+    iosUrl?: string;
+    androidUrl?: string;
+  };
+}
+
+export interface WebViewComponentProps {
+  node: NodeData<WebViewPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,71 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "WebView",
+    "title": "WebView",
+    "description": "A component to display web content.",
+    "children": "never",
+    "extends": "View",
+    "attributes": {
+      "iosUrl": "string",
+      "androidUrl": "string",
+      "styles": {
+        "loaderColor": "color",
+        "loaderSize": "number",
+        "loaderBorderWidth": "number",
+        "loaderAnimationDuration": "number"
+      }
+    }
+  },
+  "defaults": {
+    "styles": {
+      "loaderSize": 30,
+      "loaderBorderWidth": 3,
+      "loaderAnimationDuration": 1
+    }
+  },
+  "meta": {
+    "label": "Web View",
+    "description": "Embeds web content using an iframe on web and WebView on mobile.",
+    "attributes": {
+      "iosUrl": {
+        "label": "iOS URL",
+        "description": "The iOS URL to load in the web view.",
+        "category": "other",
+        "sort": 1
+      },
+      "androidUrl": {
+        "label": "Android URL",
+        "description": "The Android URL to load in the web view.",
+        "category": "other",
+        "sort": 2
+      },
+      "styles": {
+        "loaderColor": {
+          "label": "Loader color",
+          "description": "Loading spinner color. Defaults to THEME_COLORS.TEXT.",
+          "category": "style",
+          "sort": 1
+        },
+        "loaderSize": {
+          "label": "Loader size",
+          "description": "Size of the loading spinner (px). Shared by web and native.",
+          "category": "style",
+          "sort": 2
+        },
+        "loaderBorderWidth": {
+          "label": "Loader border width",
+          "description": "Border width of the loading spinner (px). Shared by web and native.",
+          "category": "style",
+          "sort": 3
+        },
+        "loaderAnimationDuration": {
+          "label": "Loader animation duration",
+          "description": "Duration of one full spin (seconds). Shared by web and native.",
+          "category": "style",
+          "sort": 4
+        }
+      }
+    }
+  }
+}

package/src/build-components/index.ts

@@ -13,7 +13,13 @@ export const allcomponentNames = [
   'CarouselDots',
   'CarouselItem',
   'CarouselProvider',
+  'Checkbox',
   'CountDown',
+  'FormCheckbox',
+  'FormErrorText',
+  'FormProvider',
+  'FormSubmitButton',
+  'GlobalProvider',
   'Image',
   'Main',
   'NavigationBarColor',
@@ -39,8 +45,11 @@ export const allcomponentNames = [
   'RadioButton',
   'Separator',
   'StatusBarColor',
+  'SystemButton',
+  'TermsProvider',
   'Text',
   'View',
+  'WebView',
 ] as const;
 
 export type {
@@ -75,10 +84,34 @@ export type {
   CarouselProviderPropsGenerated,
   CarouselProviderComponentProps,
 } from './CarouselProvider/CarouselProviderProps.generated';
+export type {
+  CheckboxPropsGenerated,
+  CheckboxComponentProps,
+} from './Checkbox/CheckboxProps.generated';
 export type {
   CountDownPropsGenerated,
   CountDownComponentProps,
 } from './CountDown/CountDownProps.generated';
+export type {
+  FormCheckboxPropsGenerated,
+  FormCheckboxComponentProps,
+} from './FormCheckbox/FormCheckboxProps.generated';
+export type {
+  FormErrorTextPropsGenerated,
+  FormErrorTextComponentProps,
+} from './FormErrorText/FormErrorTextProps.generated';
+export type {
+  FormProviderPropsGenerated,
+  FormProviderComponentProps,
+} from './FormProvider/FormProviderProps.generated';
+export type {
+  FormSubmitButtonPropsGenerated,
+  FormSubmitButtonComponentProps,
+} from './FormSubmitButton/FormSubmitButtonProps.generated';
+export type {
+  GlobalProviderPropsGenerated,
+  GlobalProviderComponentProps,
+} from './GlobalProvider/GlobalProviderProps.generated';
 export type {
   ImagePropsGenerated,
   ImageComponentProps,
@@ -179,6 +212,14 @@ export type {
   StatusBarColorPropsGenerated,
   StatusBarColorComponentProps,
 } from './StatusBarColor/StatusBarColorProps.generated';
+export type {
+  SystemButtonPropsGenerated,
+  SystemButtonComponentProps,
+} from './SystemButton/SystemButtonProps.generated';
+export type {
+  TermsProviderPropsGenerated,
+  TermsProviderComponentProps,
+} from './TermsProvider/TermsProviderProps.generated';
 export type {
   TextPropsGenerated,
   TextComponentProps,
@@ -187,3 +228,7 @@ export type {
   ViewPropsGenerated,
   ViewComponentProps,
 } from './View/ViewProps.generated';
+export type {
+  WebViewPropsGenerated,
+  WebViewComponentProps,
+} from './WebView/WebViewProps.generated';