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

package/src/build-components/RenderNode.generated.tsx

@@ -21,7 +21,13 @@ import type { CarouselButtonsComponentProps } from './CarouselButtons/CarouselBu
 import type { CarouselDotsComponentProps } from './CarouselDots/CarouselDotsProps.generated';
 import type { CarouselItemComponentProps } from './CarouselItem/CarouselItemProps.generated';
 import type { CarouselProviderComponentProps } from './CarouselProvider/CarouselProviderProps.generated';
+import type { CheckboxComponentProps } from './Checkbox/CheckboxProps.generated';
 import type { CountDownComponentProps } from './CountDown/CountDownProps.generated';
+import type { FormCheckboxComponentProps } from './FormCheckbox/FormCheckboxProps.generated';
+import type { FormErrorTextComponentProps } from './FormErrorText/FormErrorTextProps.generated';
+import type { FormProviderComponentProps } from './FormProvider/FormProviderProps.generated';
+import type { FormSubmitButtonComponentProps } from './FormSubmitButton/FormSubmitButtonProps.generated';
+import type { GlobalProviderComponentProps } from './GlobalProvider/GlobalProviderProps.generated';
 import type { ImageComponentProps } from './Image/ImageProps.generated';
 import type { MainComponentProps } from './Main/MainProps.generated';
 import type { NavigationBarColorComponentProps } from './NavigationBarColor/NavigationBarColorProps.generated';
@@ -47,8 +53,11 @@ import type { PromoComponentProps } from './Promo/PromoProps.generated';
 import type { RadioButtonComponentProps } from './RadioButton/RadioButtonProps.generated';
 import type { SeparatorComponentProps } from './Separator/SeparatorProps.generated';
 import type { StatusBarColorComponentProps } from './StatusBarColor/StatusBarColorProps.generated';
+import type { SystemButtonComponentProps } from './SystemButton/SystemButtonProps.generated';
+import type { TermsProviderComponentProps } from './TermsProvider/TermsProviderProps.generated';
 import type { TextComponentProps } from './Text/TextProps.generated';
 import type { ViewComponentProps } from './View/ViewProps.generated';
+import type { WebViewComponentProps } from './WebView/WebViewProps.generated';
 import { BIcon } from './BIcon/BIcon';
 import { BackgroundImage } from './BackgroundImage/BackgroundImage';
 import { Button } from './Button/Button';
@@ -57,7 +66,13 @@ import CarouselButtons from './CarouselButtons/CarouselButtons';
 import CarouselDots from './CarouselDots/CarouselDots';
 import { CarouselItem } from './CarouselItem/CarouselItem';
 import CarouselProvider from './CarouselProvider/CarouselProvider';
+import { Checkbox } from './Checkbox/Checkbox';
 import { CountDown } from './CountDown/CountDown';
+import { FormCheckbox } from './FormCheckbox/FormCheckbox';
+import { FormErrorText } from './FormErrorText/FormErrorText';
+import { FormProvider } from './FormProvider/FormProvider';
+import { FormSubmitButton } from './FormSubmitButton/FormSubmitButton';
+import GlobalProvider from './GlobalProvider/GlobalProvider';
 import Image from './Image/Image';
 import Main from './Main/Main';
 import NavigationBarColor from './NavigationBarColor/NavigationBarColor';
@@ -83,8 +98,11 @@ import Promo from './Promo/Promo';
 import RadioButton from './RadioButton/RadioButton';
 import Separator from './Separator/Separator';
 import StatusBarColor from './StatusBarColor/StatusBarColor';
+import { SystemButton } from './SystemButton/SystemButton';
+import TermsProvider from './TermsProvider/TermsProvider';
 import { Text } from './Text/Text';
 import View from './View/View';
+import { WebView } from './WebView/WebView';
 
 type BuilderNode =
   | (BIconComponentProps['node'] & { type: 'BIcon' })
@@ -95,7 +113,13 @@ type BuilderNode =
   | (CarouselDotsComponentProps['node'] & { type: 'CarouselDots' })
   | (CarouselItemComponentProps['node'] & { type: 'CarouselItem' })
   | (CarouselProviderComponentProps['node'] & { type: 'CarouselProvider' })
+  | (CheckboxComponentProps['node'] & { type: 'Checkbox' })
   | (CountDownComponentProps['node'] & { type: 'CountDown' })
+  | (FormCheckboxComponentProps['node'] & { type: 'FormCheckbox' })
+  | (FormErrorTextComponentProps['node'] & { type: 'FormErrorText' })
+  | (FormProviderComponentProps['node'] & { type: 'FormProvider' })
+  | (FormSubmitButtonComponentProps['node'] & { type: 'FormSubmitButton' })
+  | (GlobalProviderComponentProps['node'] & { type: 'GlobalProvider' })
   | (ImageComponentProps['node'] & { type: 'Image' })
   | (MainComponentProps['node'] & { type: 'Main' })
   | (NavigationBarColorComponentProps['node'] & { type: 'NavigationBarColor' })
@@ -123,8 +147,11 @@ type BuilderNode =
   | (RadioButtonComponentProps['node'] & { type: 'RadioButton' })
   | (SeparatorComponentProps['node'] & { type: 'Separator' })
   | (StatusBarColorComponentProps['node'] & { type: 'StatusBarColor' })
+  | (SystemButtonComponentProps['node'] & { type: 'SystemButton' })
+  | (TermsProviderComponentProps['node'] & { type: 'TermsProvider' })
   | (TextComponentProps['node'] & { type: 'Text' })
-  | (ViewComponentProps['node'] & { type: 'View' });
+  | (ViewComponentProps['node'] & { type: 'View' })
+  | (WebViewComponentProps['node'] & { type: 'WebView' });
 
 function RenderNode({ node }: { node: Node }) {
   if (isNodeNullOrUndefined(node)) {
@@ -172,8 +199,20 @@ function RenderNode({ node }: { node: Node }) {
       return <CarouselItem node={normalizedNode} />;
     case 'CarouselProvider':
       return <CarouselProvider node={normalizedNode} />;
+    case 'Checkbox':
+      return <Checkbox node={normalizedNode} />;
     case 'CountDown':
       return <CountDown node={normalizedNode} />;
+    case 'FormCheckbox':
+      return <FormCheckbox node={normalizedNode} />;
+    case 'FormErrorText':
+      return <FormErrorText node={normalizedNode} />;
+    case 'FormProvider':
+      return <FormProvider node={normalizedNode} />;
+    case 'FormSubmitButton':
+      return <FormSubmitButton node={normalizedNode} />;
+    case 'GlobalProvider':
+      return <GlobalProvider node={normalizedNode} />;
     case 'Image':
       return <Image node={normalizedNode} />;
     case 'Main':
@@ -224,10 +263,16 @@ function RenderNode({ node }: { node: Node }) {
       return <Separator node={normalizedNode} />;
     case 'StatusBarColor':
       return <StatusBarColor node={normalizedNode} />;
+    case 'SystemButton':
+      return <SystemButton node={normalizedNode} />;
+    case 'TermsProvider':
+      return <TermsProvider node={normalizedNode} />;
     case 'Text':
       return <Text node={normalizedNode} />;
     case 'View':
       return <View node={normalizedNode} />;
+    case 'WebView':
+      return <WebView node={normalizedNode} />;
     default:
       return other(nodeType, node);
   }

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

@@ -0,0 +1,74 @@
+import React, { useId } from 'react';
+import type { SystemButtonComponentProps } from './SystemButtonProps.generated';
+import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
+import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+import { useMockOSContext, useMockPermission } from '../../mockOS';
+import { useLocalize } from '../../hooks/useLocalize';
+import { usePlacementButtonEvents } from './usePlacementButtonEvents';
+import { useGlobalNavigation } from '../GlobalProvider/useGlobalNavigation';
+import { useGlobalContext } from '../GlobalProvider/GlobalContext';
+
+export type SystemButtonOptionalProps = {
+  onClick?: () => void;
+  disabled?: boolean;
+};
+
+export function SystemButton({
+  node,
+  onClick: onClickProp,
+  disabled = false,
+}: SystemButtonComponentProps & SystemButtonOptionalProps) {
+  useLogRender('SystemButton');
+  node = useNode(node);
+  const attributeName = node.sourceType ?? node.type ?? 'SystemButton';
+  const context = useMockOSContext();
+  const mockPermissionManager = useMockPermission(context);
+  const globalNavigate = useGlobalNavigation();
+  const globalCtx = useGlobalContext();
+  const generatedId = useId();
+  const attributeKey = node.key ?? generatedId;
+  const attrs = node.attributes;
+  const labelRaw = attrs?.labelKey ?? '';
+  const localize = useLocalize();
+  const label = localize(labelRaw);
+  const viewStyle = useExtractViewStyle(node as any);
+  const textStyle = useExtractTextStyle(node as any);
+
+  const placementClick = usePlacementButtonEvents(attrs?.events, {
+    context,
+    requestPermission: (permission) =>
+      mockPermissionManager.requestPermission(permission),
+    globalNavigate,
+    setCondition: globalCtx?.setCondition,
+  });
+
+  const handleClick = onClickProp ?? placementClick;
+
+  const buttonStyle = useMergedStyle(viewStyle, textStyle, {
+    border: 'none',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    opacity: disabled ? 0.6 : 1,
+  });
+
+  return (
+    <button
+      {...(attrs?.testID ? { 'data-testid': attrs.testID } : {})}
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      onClick={handleClick}
+      disabled={disabled}
+      type="button"
+      style={buttonStyle}
+    >
+      {label || 'Button'}
+    </button>
+  );
+}
+
+export default SystemButton;

package/src/build-components/SystemButton/SystemButtonProps.generated.ts

@@ -0,0 +1,112 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type TypeOptionType =
+  | 'Permission'
+  | 'Navigate'
+  | 'Placement'
+  | 'SetCondition';
+export type PermissionOptionType =
+  | 'notification'
+  | 'camera'
+  | 'microphone'
+  | 'location'
+  | 'photos'
+  | 'contacts'
+  | 'att'
+  | 'rating'
+  | 'GDPR';
+export type PlacementKeyOptionType =
+  | 'terms'
+  | 'onboard'
+  | 'paywall'
+  | 'subscription'
+  | 'home';
+export type ConditionKeyOptionType = 'termsAccepted';
+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 EventObjectGenerated {
+  type?: TypeOptionType;
+  permission?: PermissionOptionType;
+  navigate_to?: string;
+  targetIndex?: number;
+  placementKey?: PlacementKeyOptionType;
+  conditionKey?: ConditionKeyOptionType;
+  value?: boolean;
+}
+
+export interface SystemButtonStyleGenerated {
+  color?: string;
+  fontSize?: number;
+  fontFamily?: string;
+  fontWeight?: string;
+  textAlign?: string;
+  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?: number;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: number;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
+export interface SystemButtonPropsGenerated {
+  child: string;
+  attributes: {
+    styles?: SystemButtonStyleGenerated;
+    adjustsFontSizeToFit?: boolean;
+    numberOfLines?: number;
+    translateCounter?: number;
+    scrollable?: boolean;
+    testID?: string;
+    labelKey?: string;
+    events?: EventObjectGenerated[];
+  };
+}
+
+export interface SystemButtonComponentProps {
+  node: NodeData<SystemButtonPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,63 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "SystemButton",
+    "title": "SystemButton",
+    "description": "A reusable button component for system actions.",
+    "children": "never",
+    "extends": "Text",
+    "attributes": {
+      "labelKey": "string",
+      "events": "EventObject[]",
+      "testID": "string",
+      "styles": {
+        "color": "color",
+        "backgroundColor": "color",
+        "height": "number",
+        "borderRadius": "number",
+        "fontSize": "number",
+        "fontWeight": "string"
+      }
+    }
+  },
+  "defaults": {
+    "attributes": {
+      "labelKey": "Button"
+    },
+    "styles": {
+      "height": 48,
+      "borderRadius": 8,
+      "backgroundColor": "THEME_COLORS.SYSTEM_BUTTON_BACKGROUND",
+      "color": "THEME_COLORS.SYSTEM_BUTTON_TEXT"
+    }
+  },
+  "types": {
+    "EventObject": {
+      "type": "$ref:event-constants.eventTypes",
+      "permission": "$ref:event-constants.permissionTypes",
+      "navigate_to": "string",
+      "targetIndex": "number",
+      "placementKey": "$ref:event-constants.placementKeys",
+      "conditionKey": "$ref:event-constants.conditionKeys",
+      "value": "boolean"
+    }
+  },
+  "meta": {
+    "label": "System Button",
+    "description": "Versatile button for navigation, permissions, and more.",
+    "attributes": {
+      "labelKey": {
+        "label": "Label Key",
+        "description": "Localization key for button text.",
+        "category": "other",
+        "sort": 1
+      },
+      "events": {
+        "label": "Events",
+        "description": "Actions to perform on click.",
+        "category": "other",
+        "sort": 2
+      }
+    }
+  }
+}

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

@@ -0,0 +1,114 @@
+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; SetCondition = update a global boolean condition. */
+export interface PlacementEventObject {
+  type?: 'Permission' | 'Navigate' | 'Placement' | 'SetCondition';
+  permission?: string | null;
+  placementKey?: string;
+  navigate_to?: string;
+  targetIndex?: number;
+  conditionKey?: string;
+  value?: boolean;
+}
+
+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;
+  /**
+   * Optional callback to set a global boolean condition (from GlobalContext).
+   * Used by SetCondition events.
+   */
+  setCondition?: (key: string, value: boolean) => void;
+}
+
+/**
+ * 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,
+    setCondition,
+  } = options;
+  const handledEventsRef = useRef<PlacementEventObject[]>([]);
+
+  /**
+   * Attempts to navigate to a target. Tries globalNavigate first (GlobalProvider),
+   * then falls back to MockOSContext.
+   */
+  const navigateTo = useCallback(
+    (target: string): void => {
+      if (globalNavigate?.(target)) return;
+      context?.navigation(target as Parameters<typeof context.navigation>[0]);
+    },
+    [context, globalNavigate],
+  );
+
+  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 === 'SetCondition' && e.conditionKey) {
+        setCondition?.(e.conditionKey, e.value ?? false);
+        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);
+          }
+        }
+      }
+    }
+  }, [
+    events,
+    requestPermission,
+    setCondition,
+    navigateTo,
+    onNavigateWithoutPlacement,
+  ]);
+
+  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": {}
+  }
+}