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

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/Text/Text.tsx

@@ -44,9 +44,10 @@ export function Text({ node }: TextComponentProps) {
     | undefined;
   const adjustsFontSizeToFit = styleBag?.adjustsFontSizeToFit ?? false;
   const showEllipsis = styleBag?.showEllipsis ?? false;
+  const numberOfLines = (node.attributes as any)?.numberOfLines;
 
   useLayoutEffect(() => {
-    if (!adjustsFontSizeToFit) {
+    if (numberOfLines !== 1 || !adjustsFontSizeToFit) {
       setAutoFontSizePx(null);
       return;
     }
@@ -95,12 +96,12 @@ export function Text({ node }: TextComponentProps) {
       ro?.disconnect();
       window.removeEventListener('resize', compute);
     };
-  }, [adjustsFontSizeToFit, localizedText]);
+  }, [adjustsFontSizeToFit, localizedText, numberOfLines]);
 
   const extraStyle = useMemo((): React.CSSProperties | undefined => {
     let next: React.CSSProperties | undefined;
 
-    if (showEllipsis) {
+    if (numberOfLines == 1 && adjustsFontSizeToFit) {
       next = {
         ...(next ?? {}),
         overflow: 'hidden',
@@ -117,7 +118,7 @@ export function Text({ node }: TextComponentProps) {
     }
 
     return next;
-  }, [showEllipsis, autoFontSizePx]);
+  }, [showEllipsis, autoFontSizePx, numberOfLines, adjustsFontSizeToFit]);
 
   const style = useMergedStyle(
     useMergedStyle(textStyle, extraStyle),

package/src/build-components/Text/TextProps.generated.ts

@@ -68,7 +68,7 @@ export interface TextPropsGenerated {
     scrollable?: boolean;
     testID?: string;
     adjustsFontSizeToFit?: boolean;
-    showEllipsis?: boolean;
+    numberOfLines?: number;
     translateCounter?: number;
   };
 }

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

@@ -8,7 +8,7 @@
     "extends": "View",
     "attributes": {
       "adjustsFontSizeToFit": "boolean",
-      "showEllipsis": "boolean",
+      "numberOfLines": "number",
       "translateCounter": "number",
       "styles": {
         "color": "color",
@@ -20,6 +20,7 @@
     },
     "defaults": {
       "translateCounter": 1,
+      "numberOfLines": 1,
       "styles": {
         "color": "THEME_COLORS.TEXT",
         "fontSize": "16@fs",

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';