@developer_tribe/react-builder 1.1.0 → 1.2.0

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

@@ -1,13 +1,21 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
-    "type": "view",
-    "children": ["node", "array"],
+    "type": "View",
+    "children": "node",
     "attributes": {
       "scrollable": "boolean",
-      "flexDirection": ["row", "column"],
-      "alignItems": ["flex-start", "center", "flex-end", "stretch", "baseline"],
+      "flexDirection": [
+        "row",
+        "column"
+      ],
+      "alignItems": [
+        "flex-start",
+        "center",
+        "flex-end",
+        "stretch",
+        "baseline"
+      ],
       "justifyContent": [
         "flex-start",
         "center",
@@ -16,25 +24,344 @@
         "space-around",
         "space-evenly"
       ],
-      "gap": "string",
-      "padding": "number",
-      "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": "number",
-      "height": "number"
+      "gap": "size",
+      "padding": "size",
+      "paddingHorizontal": "size",
+      "paddingVertical": "size",
+      "paddingTop": "size",
+      "paddingBottom": "size",
+      "paddingLeft": "size",
+      "paddingRight": "size",
+      "margin": "size",
+      "marginVertical": "size",
+      "marginTop": "size",
+      "marginBottom": "size",
+      "marginLeft": "size",
+      "marginRight": "size",
+      "backgroundColor": "color",
+      "borderRadius": "size",
+      "width": "size",
+      "minWidth": "size",
+      "maxWidth": "size",
+      "height": "size",
+      "minHeight": "size",
+      "maxHeight": "size",
+      "flex": "number",
+      "position": [
+        "relative",
+        "absolute"
+      ],
+      "top": "size",
+      "bottom": "size",
+      "left": "size",
+      "right": "size",
+      "zIndex": "number"
+    }
+  },
+  "meta": {
+    "desiredParent": [
+      "all"
+    ],
+    "label": "View",
+    "description": "Base layout container.",
+    "specialCategories": {
+      "padding": {
+        "label": "Padding",
+        "description": "Uniform padding on all sides.",
+        "category": "container",
+        "sort": 1
+      },
+      "margin": {
+        "label": "Margin",
+        "description": "Uniform margin on all sides.",
+        "category": "container",
+        "sort": 2
+      },
+      "size": {
+        "label": "Size",
+        "description": "Fixed dimensions.",
+        "category": "container",
+        "sort": 3
+      },
+      "offset": {
+        "label": "Offset",
+        "description": "Absolute positioning offsets.",
+        "category": "container",
+        "sort": 4
+      }
+    },
+    "styles": {
+      "scrollable": {
+        "label": "Scrollable",
+        "description": "Turns scroll interaction on.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": -1
+      },
+      "flexDirection": {
+        "label": "Flex Direction",
+        "description": "Sets row or column layout.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 4
+      },
+      "alignItems": {
+        "label": "Align Items",
+        "description": "Controls cross-axis alignment.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "justifyContent": {
+        "label": "Justify Content",
+        "description": "Controls main-axis alignment.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 5
+      },
+      "gap": {
+        "label": "Gap",
+        "description": "Space between children.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 10,
+        "preferedScale": "s"
+      },
+      "padding": {
+        "label": "Padding",
+        "description": "Uniform padding on all sides.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 6,
+        "preferedScale": "s"
+      },
+      "paddingHorizontal": {
+        "label": "Padding Horizontal",
+        "description": "Left and right padding.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 7,
+        "preferedScale": "s"
+      },
+      "paddingVertical": {
+        "label": "Padding Vertical",
+        "description": "Top and bottom padding.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 8,
+        "preferedScale": "vs"
+      },
+      "paddingTop": {
+        "label": "Padding Top",
+        "description": "Top padding only.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 9,
+        "preferedScale": "vs"
+      },
+      "paddingBottom": {
+        "label": "Padding Bottom",
+        "description": "Bottom padding only.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 10,
+        "preferedScale": "vs"
+      },
+      "paddingLeft": {
+        "label": "Padding Left",
+        "description": "Left padding only.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 11,
+        "preferedScale": "s"
+      },
+      "paddingRight": {
+        "label": "Padding Right",
+        "description": "Right padding only.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 12,
+        "preferedScale": "s"
+      },
+      "margin": {
+        "label": "Margin",
+        "description": "Uniform margin on all sides.",
+        "category": "container",
+        "specialCategory": "margin",
+        "sort": 13,
+        "preferedScale": "s"
+      },
+      "marginHorizontal": {
+        "label": "Margin Horizontal",
+        "description": "Left and right margin.",
+        "category": "container",
+        "specialCategory": "margin",
+        "sort": 14,
+        "preferedScale": "s"
+      },
+      "marginVertical": {
+        "label": "Margin Vertical",
+        "description": "Top and bottom margin.",
+        "category": "container",
+        "specialCategory": "margin",
+        "sort": 15,
+        "preferedScale": "vs"
+      },
+      "marginTop": {
+        "label": "Margin Top",
+        "description": "Top margin only.",
+        "category": "container",
+        "specialCategory": "margin",
+        "sort": 16,
+        "preferedScale": "vs"
+      },
+      "marginBottom": {
+        "label": "Margin Bottom",
+        "description": "Bottom margin only.",
+        "category": "container",
+        "specialCategory": "margin",
+        "sort": 17,
+        "preferedScale": "vs"
+      },
+      "marginLeft": {
+        "label": "Margin Left",
+        "description": "Left margin only.",
+        "category": "container",
+        "specialCategory": "margin",
+        "sort": 18,
+        "preferedScale": "s"
+      },
+      "marginRight": {
+        "label": "Margin Right",
+        "description": "Right margin only.",
+        "category": "container",
+        "specialCategory": "margin",
+        "sort": 19,
+        "preferedScale": "s"
+      },
+      "backgroundColor": {
+        "label": "Background Color",
+        "description": "Background fill color.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 20
+      },
+      "borderRadius": {
+        "label": "Border Radius",
+        "description": "Corner rounding amount.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 21,
+        "preferedScale": "s"
+      },
+      "width": {
+        "label": "Width",
+        "description": "Fixed width value.",
+        "category": "container",
+        "specialCategory": "size",
+        "sort": 0,
+        "preferedScale": "s"
+      },
+      "minWidth": {
+        "label": "Min Width",
+        "description": "Minimum width constraint.",
+        "category": "container",
+        "specialCategory": "size",
+        "sort": 1,
+        "preferedScale": "s"
+      },
+      "maxWidth": {
+        "label": "Max Width",
+        "description": "Maximum width constraint.",
+        "category": "container",
+        "specialCategory": "size",
+        "sort": 2,
+        "preferedScale": "s"
+      },
+      "height": {
+        "label": "Height",
+        "description": "Fixed height value.",
+        "category": "container",
+        "specialCategory": "size",
+        "sort": 3,
+        "preferedScale": "vs"
+      },
+      "minHeight": {
+        "label": "Min Height",
+        "description": "Minimum height constraint.",
+        "category": "container",
+        "specialCategory": "size",
+        "sort": 4,
+        "preferedScale": "vs"
+      },
+      "maxHeight": {
+        "label": "Max Height",
+        "description": "Maximum height constraint.",
+        "category": "container",
+        "specialCategory": "size",
+        "sort": 5,
+        "preferedScale": "vs"
+      },
+      "flex": {
+        "label": "Flex",
+        "description": "Flex grow factor (e.g. 1 fills available space).",
+        "category": "container",
+        "specialCategory": "size",
+        "sort": 6
+      },
+      "position": {
+        "label": "Position",
+        "description": "Sets layout positioning mode.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "top": {
+        "label": "Top",
+        "description": "Offset from the top edge.",
+        "category": "container",
+        "specialCategory": "offset",
+        "sort": 22,
+        "preferedScale": "vs"
+      },
+      "bottom": {
+        "label": "Bottom",
+        "description": "Offset from the bottom edge.",
+        "category": "container",
+        "specialCategory": "offset",
+        "sort": 23,
+        "preferedScale": "vs"
+      },
+      "left": {
+        "label": "Left",
+        "description": "Offset from the left edge.",
+        "category": "container",
+        "specialCategory": "offset",
+        "sort": 24,
+        "preferedScale": "s"
+      },
+      "right": {
+        "label": "Right",
+        "description": "Offset from the right edge.",
+        "category": "container",
+        "specialCategory": "offset",
+        "sort": 25,
+        "preferedScale": "s"
+      },
+      "zIndex": {
+        "label": "Z-Index",
+        "description": "Controls stacking order.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 26
+      }
+    }
+  },
+  "defaults": {
+    "style": {
+      "flexDirection": "column",
+      "position": "relative",
+      "zIndex": 1
     }
   }
 }

package/src/build-components/index.ts

@@ -5,13 +5,16 @@ export { default as RenderNode } from './RenderNode.generated';
 export { patterns } from './patterns.generated';
 
 export const allcomponentNames = [
-  'button',
-  'carousel',
-  'carouselButtons',
-  'carouselDots',
-  'carouselItem',
-  'carouselProvider',
-  'image',
+  'BIcon',
+  'BackgroundImage',
+  'Button',
+  'Carousel',
+  'CarouselButtons',
+  'CarouselDots',
+  'CarouselItem',
+  'CarouselProvider',
+  'Image',
+  'Main',
   'Onboard',
   'OnboardButton',
   'OnboardButtons',
@@ -22,10 +25,24 @@ export const allcomponentNames = [
   'OnboardProvider',
   'OnboardSubtitle',
   'OnboardTitle',
-  'text',
-  'view',
+  'PaywallBackground',
+  'PaywallCloseButton',
+  'PaywallOptions',
+  'PaywallProvider',
+  'PaywallSubscribeButton',
+  'RadioButton',
+  'Text',
+  'View',
 ] as const;
 
+export type {
+  BIconPropsGenerated,
+  BIconComponentProps,
+} from './BIcon/BIconProps.generated';
+export type {
+  BackgroundImagePropsGenerated,
+  BackgroundImageComponentProps,
+} from './BackgroundImage/BackgroundImageProps.generated';
 export type {
   ButtonPropsGenerated,
   ButtonComponentProps,
@@ -54,6 +71,10 @@ export type {
   ImagePropsGenerated,
   ImageComponentProps,
 } from './Image/ImageProps.generated';
+export type {
+  MainPropsGenerated,
+  MainComponentProps,
+} from './Main/MainProps.generated';
 export type {
   OnboardPropsGenerated,
   OnboardComponentProps,
@@ -94,6 +115,30 @@ export type {
   OnboardTitlePropsGenerated,
   OnboardTitleComponentProps,
 } from './OnboardTitle/OnboardTitleProps.generated';
+export type {
+  PaywallBackgroundPropsGenerated,
+  PaywallBackgroundComponentProps,
+} from './PaywallBackground/PaywallBackgroundProps.generated';
+export type {
+  PaywallCloseButtonPropsGenerated,
+  PaywallCloseButtonComponentProps,
+} from './PaywallCloseButton/PaywallCloseButtonProps.generated';
+export type {
+  PaywallOptionsPropsGenerated,
+  PaywallOptionsComponentProps,
+} from './PaywallOptions/PaywallOptionsProps.generated';
+export type {
+  PaywallProviderPropsGenerated,
+  PaywallProviderComponentProps,
+} from './PaywallProvider/PaywallProviderProps.generated';
+export type {
+  PaywallSubscribeButtonPropsGenerated,
+  PaywallSubscribeButtonComponentProps,
+} from './PaywallSubscribeButton/PaywallSubscribeButtonProps.generated';
+export type {
+  RadioButtonPropsGenerated,
+  RadioButtonComponentProps,
+} from './RadioButton/RadioButtonProps.generated';
 export type {
   TextPropsGenerated,
   TextComponentProps,

package/src/build-components/other.tsx

@@ -2,5 +2,20 @@ import React from 'react';
 import type { Node } from '../types/Node';
 
 export function other(type: string, node: Node): React.ReactNode {
+  // Intentionally-crashing component for testing error boundaries / unvalidated flows.
+  // NOTE: This is NOT part of the generated component patterns, so it will never
+  // show up in the "Add component" modal. It can only be used by loading JSON
+  // that contains { type: "CrashComponent" }.
+  if (type === 'CrashComponent') {
+    const details =
+      node && typeof node === 'object' && !Array.isArray(node)
+        ? (node as any).attributes
+        : undefined;
+    throw new Error(
+      `CrashComponent: intentional crash for testing${
+        details ? ` (attributes=${JSON.stringify(details)})` : ''
+      }`,
+    );
+  }
   return null;
 }