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

package/src/hooks/useSafeAreaViewStyle.ts

@@ -34,10 +34,6 @@ export function useSafeAreaViewStyle(
   const statusBarOverrideTranslucent = useRenderStore(
     (s) => s.statusBarOverrideTranslucent,
   );
-  const navBarOverrideTranslucent = useRenderStore(
-    (s) => s.navBarOverrideTranslucent,
-  );
-
   return useMemo(() => {
     if (!enabled) return baseStyle;
 
@@ -74,11 +70,5 @@ export function useSafeAreaViewStyle(
       width: subtractInset(baseStyle.width ?? '100%', horizontal),
       height: subtractInset(baseStyle.height ?? '100%', vertical),
     };
-  }, [
-    enabled,
-    baseStyle,
-    device,
-    statusBarOverrideTranslucent,
-    navBarOverrideTranslucent,
-  ]);
+  }, [enabled, baseStyle, device, statusBarOverrideTranslucent]);
 }

package/src/index.web.ts

@@ -12,6 +12,9 @@ export * from './build-components';
 export { default as useNode } from './build-components/useNode';
 export type { EventObjectGenerated } from './build-components/OnboardButton/OnboardButtonProps.generated';
 
+// Host-app API: store (tema vb. builder içinde kullanılır; örn. tema toggle'ı builder'a senkronize etmek için).
+export { useRenderStore } from './store';
+
 // Host-app API: let parent apps inject a custom "Text" field renderer.
 import { useRenderStore } from './store';
 import type { ComponentType } from 'react';

package/src/mockOS/components/MockOSRouter.tsx

@@ -35,6 +35,17 @@ function OnboardComponent() {
   );
 }
 
+function TermsComponent() {
+  return (
+    <div className="mockos-screen mockos-screen--terms">
+      <div className="mockos-screen__heading">Terms and Privacy</div>
+      <div className="mockos-screen__text">
+        Please review our terms and conditions.
+      </div>
+    </div>
+  );
+}
+
 function SubscriptionComponent() {
   return (
     <div className="mockos-screen mockos-screen--subscription">
@@ -68,6 +79,14 @@ function ScreenRenderer({
     return <>{children}</>;
   }
 
+  // app_launch flow: terms route shows builder (terms UI); onboard route shows default onboard screen
+  if (children && childrenBelongTo === 'app' && currentRoute === 'terms') {
+    return <>{children}</>;
+  }
+  if (childrenBelongTo === 'app' && currentRoute === 'onboard') {
+    return <OnboardComponent />;
+  }
+
   // Otherwise render default screens based on route
   switch (currentRoute) {
     case 'launchscreen':
@@ -78,6 +97,8 @@ function ScreenRenderer({
       return <HomeComponent />;
     case 'onboard':
       return <OnboardComponent />;
+    case 'terms':
+      return <TermsComponent />;
     case 'subscription':
       return <SubscriptionComponent />;
     default:

package/src/mockOS/context/MockOSContext.tsx

@@ -80,8 +80,12 @@ export function MockOSProvider({
   const [navigationStack, setNavigationStack] = useState<RouteStackItem[]>([
     { route: defaultRoute, timestamp: Date.now() },
   ]);
+  const [termsAccepted, setTermsAccepted] = useState(false);
 
   const navigation = useCallback((route: RouteType) => {
+    if (route === 'terms') {
+      setTermsAccepted(false);
+    }
     setCurrentRoute(route);
 
     // If navigating from launchscreen and the last item in stack is launchscreen,
@@ -179,6 +183,8 @@ export function MockOSProvider({
       navigation,
       goBack,
       navigationStack,
+      termsAccepted,
+      setTermsAccepted,
     }),
     [
       permission,
@@ -188,6 +194,7 @@ export function MockOSProvider({
       navigation,
       goBack,
       navigationStack,
+      termsAccepted,
     ],
   );
 

package/src/mockOS/context/MockOSContextBase.ts

@@ -6,6 +6,7 @@ export type RouteType =
   | 'app'
   | 'home'
   | 'onboard'
+  | 'terms'
   | 'subscription';
 
 export interface RouteStackItem {
@@ -26,6 +27,9 @@ export interface MockOSContextValue {
   navigation: (route: RouteType) => void;
   goBack: () => boolean;
   navigationStack: RouteStackItem[];
+  // Terms and Privacy sample: accept button proceeds only when checkbox is checked
+  termsAccepted: boolean;
+  setTermsAccepted: (value: boolean) => void;
 }
 
 /**

package/src/styles/components/_checkbox.scss

@@ -0,0 +1,19 @@
+/* Checkbox build-component: layout in CSS; only dynamic values (sizes, colors) inline. */
+
+.rb-checkbox {
+  display: flex;
+  align-items: flex-start;
+}
+
+.rb-checkbox__box {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 2px;
+  transition: all 0.2s;
+}
+
+.rb-checkbox__label {
+  flex: 1;
+}

package/src/styles/components/_global-provider.scss

@@ -0,0 +1,131 @@
+/* Page transition animations for GlobalProvider (platform-style names). */
+$page-transition-duration: 0.3s;
+$page-transition-easing: cubic-bezier(0.32, 0.72, 0, 1);
+
+.global-provider-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.global-provider-page--none {
+  animation: none;
+}
+
+.global-provider-page--default {
+  animation: global-provider-fade $page-transition-duration $page-transition-easing;
+}
+
+.global-provider-page--fade {
+  animation: global-provider-fade $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.global-provider-page--fade_from_bottom {
+  animation: global-provider-fade-from-bottom $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-fade-from-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.global-provider-page--fade_from_right {
+  animation: global-provider-fade-from-right $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-fade-from-right {
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.global-provider-page--reveal_from_bottom {
+  animation: global-provider-reveal-from-bottom $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-reveal-from-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.global-provider-page--scale_from_center {
+  animation: global-provider-scale-from-center $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-scale-from-center {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.global-provider-page--slide_from_right {
+  animation: global-provider-slide-from-right $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-slide-from-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.global-provider-page--slide_from_left {
+  animation: global-provider-slide-from-left $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-slide-from-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.global-provider-page--slide_from_bottom {
+  animation: global-provider-slide-from-bottom $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-slide-from-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}

package/src/styles/components/_webview.scss

@@ -0,0 +1,52 @@
+/* WebView build-component: web-only layout/structure. Numeric values come from pattern defaults via CSS vars (shared with native). */
+
+.rb-webview {
+  position: relative;
+  overflow: hidden;
+}
+
+.rb-webview__overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rb-webview__loader {
+  width: var(--rb-webview-loader-size, 30px);
+  height: var(--rb-webview-loader-size, 30px);
+  border-radius: 50%;
+  border: var(--rb-webview-loader-border-width, 3px) solid transparent;
+  border-top-color: currentColor;
+  animation: rb-webview-spin var(--rb-webview-loader-duration, 1s) linear infinite;
+}
+
+@keyframes rb-webview-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.rb-webview__frame-wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.rb-webview__frame-inner {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
+.rb-webview__frame {
+  width: 100%;
+  height: 100%;
+  border: none;
+  transition: opacity 0.3s ease-in-out;
+}

package/src/styles/index.scss

@@ -16,6 +16,10 @@
 @use './components/mockos-router';
 @use './components/bottom-bar';
 @use './components/onboard';
+@use './components/global-provider';
+
+@use './components/webview';
+@use './components/checkbox';
 
 @use './modals/modal-shell';
 @use './modals/add-component';

package/src/types/PreviewConfig.ts

@@ -57,6 +57,12 @@ export type LocalizationKey =
   | 'base.builder.paywall.footer.description'
   | 'base.builder.paywall.btnPrivacy'
   | 'base.builder.paywall.btnTerms'
+  // terms and privacy
+  | 'view.terms.header.title'
+  | 'view.terms.accept.button'
+  | 'view.terms.checkbox.label'
+  | 'view.terms.error.must_accept'
+  | 'form.error.validation_required'
   | (string & {});
 
 export type Localication = Record<
@@ -138,6 +144,12 @@ export const defaultLocalization: Localication = {
       'By clicking continue, you will be accepting the Terms of service and privacy policy',
     'base.builder.paywall.btnPrivacy': 'Privacy Policy',
     'base.builder.paywall.btnTerms': 'Terms of Service',
+    // terms and privacy
+    'view.terms.header.title': 'Terms & Privacy',
+    'view.terms.accept.button': 'Accept',
+    'view.terms.checkbox.label': 'I accept the terms and privacy policy',
+    'view.terms.error.must_accept': 'You must accept to continue',
+    'form.error.validation_required': 'Please complete the required fields.',
   },
   tr: {
     // paywall – period
@@ -181,6 +193,13 @@ export const defaultLocalization: Localication = {
       'Devam et butonuna tıklayarak Hizmet Şartları ve Gizlilik Politikası kabul etmiş olursunuz',
     'base.builder.paywall.btnPrivacy': 'Gizlilik Politikası',
     'base.builder.paywall.btnTerms': 'Hizmet Şartları',
+
+    // terms and privacy
+    'view.terms.header.title': 'Gizlilik ve Hizmet Şartları',
+    'view.terms.accept.button': 'Kabul Et',
+    'view.terms.checkbox.label': 'Gizlilik ve Hizmet Şartlarını kabul ediyorum',
+    'view.terms.error.must_accept': 'Kabul etmeden geçiş yapılamaz',
+    'form.error.validation_required': 'Lütfen zorunlu alanları tamamlayın.',
   },
 };
 

package/src/utils/analyseNodeByPatterns.ts

@@ -432,12 +432,15 @@ function validateAttributesByPattern(
       if (
         attrName === 'title' ||
         attrName === 'description' ||
-        attrName === 'testID'
+        attrName === 'testID' ||
+        attrName === 'animation'
       ) {
         const res = validateAttributeValue(
           pattern.pattern.type,
           attrValue,
-          attrName === 'testID' ? 'string' : attrName,
+          attrName === 'testID' || attrName === 'animation'
+            ? 'string'
+            : attrName,
           joinPath(path, attrName),
         );
         if (!res.valid) return res;

package/src/utils/extractViewStyle/extractViewStyle.ts

@@ -8,7 +8,6 @@ import type { BaseSize } from '../../types/PreviewConfig';
 import { parseSize } from '../../size-matters';
 import { parseColor } from '../parseColor';
 import { getStyleBag, toAttributeRecord } from '../attributeStyle';
-import { getDefaultDevice } from '../getDevices';
 
 export type ExtractViewStyleOptions = {
   projectColors?: ProjectColors;

package/src/utils/projectColors.ts

@@ -27,6 +27,8 @@ export const defaultProjectColors: ProjectColors = {
       ONBOARD_SUBTITLE: '#44454D',
       ONBOARD_BUTTON_SECONDARY_TEXT: '#81838F',
       ONBOARD_FOOTER_TEXT: '#81838F',
+      CHECKBOX_ACTIVE_COLOR: '#0066FF',
+      FORM_ERROR_TEXT_COLOR: '#B91C1C',
     },
     dark: {
       TEXT: '#E9EBF9',
@@ -37,6 +39,8 @@ export const defaultProjectColors: ProjectColors = {
       ONBOARD_SUBTITLE: '#C7C7C7',
       ONBOARD_BUTTON_SECONDARY_TEXT: '#A9AAAC',
       ONBOARD_FOOTER_TEXT: '#A2A4B1',
+      CHECKBOX_ACTIVE_COLOR: '#0066FF',
+      FORM_ERROR_TEXT_COLOR: '#B91C1C',
     },
   },
 };

package/src/utils/useMergedStyle.ts

@@ -6,7 +6,6 @@ const EMPTY_STYLE: CSSProperties = {};
 export function useMergedStyle(
   ...args: (CSSProperties | undefined | null | false)[]
 ): CSSProperties {
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- spread args intentionally
   return useMemo(() => {
     const validStyles = args.filter((arg): arg is CSSProperties => !!arg);
 
@@ -14,5 +13,6 @@ export function useMergedStyle(
     if (validStyles.length === 1) return validStyles[0];
 
     return Object.assign({}, ...validStyles);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, args);
 }