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

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

@@ -1,8 +1,5 @@
-import React, { useContext, useId, useRef } from 'react';
-import type {
-  EventObjectGenerated,
-  OnboardButtonComponentProps,
-} from './OnboardButtonProps.generated';
+import React, { useContext, useId, useCallback } from 'react';
+import type { OnboardButtonComponentProps } from './OnboardButtonProps.generated';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
@@ -11,6 +8,11 @@ import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtra
 import { useMockOSContext, useMockPermission } from '../../mockOS';
 import { useLocalize } from '../../hooks/useLocalize';
 import { parseColor } from '../../utils/parseColor';
+import {
+  usePlacementButtonEvents,
+  type PlacementEventObject,
+} from '../SystemButton/usePlacementButtonEvents';
+import { useGlobalNavigation } from '../GlobalProvider/useGlobalNavigation';
 
 export function OnboardButton({ node }: OnboardButtonComponentProps) {
   useLogRender('OnboardButton');
@@ -20,7 +22,7 @@ export function OnboardButton({ node }: OnboardButtonComponentProps) {
   const { selectedTheme: theme, projectColors } = useBuilderParams();
   const context = useMockOSContext();
   const mockPermissionManager = useMockPermission(context);
-  const handledEventsRef = useRef<EventObjectGenerated[]>([]);
+  const globalNavigate = useGlobalNavigation();
   const generatedId = useId();
   const attributeKey = node.key ?? generatedId;
   const attrs = node.attributes;
@@ -30,40 +32,43 @@ export function OnboardButton({ node }: OnboardButtonComponentProps) {
   const rawTextColor = attrs?.styles?.color as string | undefined;
   const textColor = parseColor(rawTextColor, { projectColors, theme });
   const viewStyle = useExtractViewStyle(node);
-  const handleClick = async () => {
-    //TODO: any ??
-    const events: EventObjectGenerated[] = attrs?.events ?? [];
 
-    for (const e of events) {
-      // Check if event is already handled
-      if (handledEventsRef.current.includes(e)) {
-        continue;
+  const onNavigateWithoutPlacement = useCallback(
+    (e: PlacementEventObject): boolean => {
+      const eventTargetIndex = e.targetIndex;
+      if (typeof eventTargetIndex === 'number') {
+        emblaApi?.scrollTo(eventTargetIndex);
+        return true;
       }
-
-      if (e.type === 'Permission') {
-        const permission = e.permission ?? 'camera';
-        await mockPermissionManager.requestPermission(permission);
-        handledEventsRef.current.push(e);
-      } else if (e.type === 'Navigate') {
-        const eventTargetIndex = e.targetIndex;
-        if (typeof eventTargetIndex === 'number') {
-          emblaApi?.scrollTo(eventTargetIndex);
-          handledEventsRef.current.push(e);
-        } else if (e.navigate_to) {
-          const eventTarget = e.navigate_to;
-          if (typeof eventTarget === 'string') {
-            handledEventsRef.current.push(e);
-            if (context) {
-              context.navigation(eventTarget as any);
-            } else {
-              console.warn('Mock OS context not available for navigation.');
-            }
-          }
+      if (e.navigate_to && typeof e.navigate_to === 'string') {
+        if (globalNavigate(e.navigate_to)) return true;
+        if (context) {
+          context.navigation(
+            e.navigate_to as
+              | 'onboard'
+              | 'terms'
+              | 'subscription'
+              | 'app'
+              | 'home'
+              | 'launchscreen',
+          );
+        } else {
+          console.warn('Mock OS context not available for navigation.');
         }
+        return true;
       }
-    }
-    // Fallback: do nothing when there is no Navigate event
-  };
+      return false;
+    },
+    [emblaApi, context, globalNavigate],
+  );
+
+  const handleClick = usePlacementButtonEvents(attrs?.events, {
+    context,
+    requestPermission: (permission) =>
+      mockPermissionManager.requestPermission(permission),
+    onNavigateWithoutPlacement,
+    globalNavigate,
+  });
 
   return (
     <button

package/src/build-components/OnboardButton/OnboardButtonProps.generated.ts

@@ -2,8 +2,7 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type TypeOptionType = 'Permission' | 'Navigate';
-export type PermissionOptionType = 'att' | 'notification' | 'rating' | 'GDPR';
+export type TypeOptionType = 'Permission' | 'Navigate' | 'Placement';
 export type TestIDOptionType = 'onboardSkip' | 'onboardNext';
 export type AnimationOptionType =
   | 'simple-animation'
@@ -30,12 +29,21 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface EventObjectGenerated {
   type?: TypeOptionType;
-  permission?: PermissionOptionType | null;
+  permission?: string;
   navigate_to?: string;
   targetIndex?: number;
+  placementKey?: string;
 }
 
 export interface OnboardButtonStyleGenerated {
+  color?: string;
+  backgroundColor?: string;
+  height?: string;
+  borderRadius?: string;
+  fontSize?: string;
+  fontWeight?: string;
+  fontFamily?: string;
+  textAlign?: string;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
@@ -55,12 +63,9 @@ export interface OnboardButtonStyleGenerated {
   marginBottom?: string;
   marginLeft?: string;
   marginRight?: string;
-  backgroundColor?: string;
-  borderRadius?: string;
   width?: string;
   minWidth?: string;
   maxWidth?: string;
-  height?: string;
   minHeight?: string;
   maxHeight?: string;
   flex?: number;
@@ -70,19 +75,21 @@ export interface OnboardButtonStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
-  color?: string;
 }
 
 export interface OnboardButtonPropsGenerated {
   child: string;
   attributes: {
     styles?: OnboardButtonStyleGenerated;
-    scrollable?: boolean;
-    testID?: TestIDOptionType;
     labelKey?: string;
+    events?: EventObjectGenerated[];
+    testID?: TestIDOptionType;
+    adjustsFontSizeToFit?: boolean;
+    numberOfLines?: number;
+    translateCounter?: number;
+    scrollable?: boolean;
     animation?: AnimationOptionType;
     animation_color?: string;
-    events?: EventObjectGenerated[];
   };
 }
 

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

@@ -5,7 +5,7 @@
     "title": "title",
     "description": "description",
     "children": "never",
-    "extends": "View",
+    "extends": "SystemButton",
     "attributes": {
       "labelKey": "string",
       "animation": [
@@ -32,10 +32,11 @@
   },
   "types": {
     "EventObject": {
-      "type": ["Permission", "Navigate"],
-      "permission": ["att", "notification", "rating", "GDPR", "null"],
+      "type": ["Permission", "Navigate", "Placement"],
+      "permission": "string",
       "navigate_to": "string",
-      "targetIndex": "number"
+      "targetIndex": "number",
+      "placementKey": "string"
     }
   },
   "meta": {

package/src/build-components/OnboardProvider/OnboardProviderProps.generated.ts

@@ -3,6 +3,17 @@
 import type { NodeData } from '../../types/Node';
 
 export type ThemeOptionType = 'light' | 'dark' | 'all';
+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 =
@@ -65,6 +76,7 @@ export interface OnboardProviderPropsGenerated {
     testID?: string;
     theme?: ThemeOptionType;
     borderRadius?: never;
+    animation?: AnimationOptionType;
   };
 }
 

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

@@ -8,7 +8,8 @@
     "extends": "View",
     "attributes": {
       "theme": ["light", "dark", "all"],
-      "borderRadius": "never"
+      "borderRadius": "never",
+      "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": {
@@ -30,6 +31,13 @@
         "specialCategory": null,
         "sort": -10
       },
+      "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": 2
+      },
       "styles": {
         "paddingTop": {
           "label": "Padding Top",

package/src/build-components/PaywallProvider/PaywallProviderProps.generated.ts

@@ -2,6 +2,17 @@
 
 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 =
@@ -63,6 +74,7 @@ export interface PaywallProviderPropsGenerated {
     scrollable?: boolean;
     testID?: string;
     delay?: number;
+    animation?: AnimationOptionType;
   };
 }
 

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

@@ -7,7 +7,8 @@
     "children": "node",
     "extends": "View",
     "attributes": {
-      "delay": "number"
+      "delay": "number",
+      "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": {
@@ -27,6 +28,13 @@
         "category": "other",
         "specialCategory": null,
         "sort": 1
+      },
+      "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": 2
       }
     },
     "mockableFeatures": {

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,71 @@
+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';
+
+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 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,
+  });
+
+  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,89 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type TypeOptionType = 'Permission' | 'Navigate' | 'Placement';
+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?: string;
+  navigate_to?: string;
+  targetIndex?: number;
+  placementKey?: string;
+}
+
+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,61 @@
+{
+  "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": ["Permission", "Navigate", "Placement"],
+      "permission": "string",
+      "navigate_to": "string",
+      "targetIndex": "number",
+      "placementKey": "string"
+    }
+  },
+  "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
+      }
+    }
+  }
+}