@developer_tribe/react-builder 0.1.32 → 1.0.2

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

@@ -2,8 +2,10 @@ import React from 'react';
 import type { OnboardSubtitleComponentProps } from './OnboardSubtitleProps.generated';
 import Text from '../Text/Text';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardSubtitle({ node }: OnboardSubtitleComponentProps) {
+  useLogRender('OnboardSubtitle');
   node = useNode(node);
   return <Text node={node} />;
 }

package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.ts

@@ -34,7 +34,7 @@ export interface OnboardSubtitlePropsGenerated {
   child: string;
   attributes: {
     color?: string;
-    fontSize?: number;
+    fontSize?: string;
     fontWeight?: FontWeightOptionType;
     textAlign?: TextAlignOptionType;
     scrollable?: boolean;
@@ -42,7 +42,7 @@ export interface OnboardSubtitlePropsGenerated {
     alignItems?: AlignItemsOptionType;
     justifyContent?: JustifyContentOptionType;
     gap?: string;
-    padding?: number;
+    padding?: string;
     paddingHorizontal?: string;
     paddingVertical?: string;
     paddingTop?: string;
@@ -50,7 +50,6 @@ export interface OnboardSubtitlePropsGenerated {
     paddingLeft?: string;
     paddingRight?: string;
     margin?: string;
-    marginHorizontal?: string;
     marginVertical?: string;
     marginTop?: string;
     marginBottom?: string;
@@ -58,8 +57,8 @@ export interface OnboardSubtitlePropsGenerated {
     marginRight?: string;
     backgroundColor?: string;
     borderRadius?: string;
-    width?: number;
-    height?: number;
+    width?: string;
+    height?: string;
   };
 }
 

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

@@ -10,5 +10,11 @@
   "defaults": {
     "fontSize": "14@fs",
     "fontWeight": "600"
+  },
+  "meta": {
+    "desiredParent": [">OnboardProvider", ">OnboardItem"],
+    "label": "Onboard Subtitle",
+    "description": "Subtitle text for an onboarding step.",
+    "attributes": {}
   }
 }

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

@@ -2,8 +2,10 @@ import React from 'react';
 import type { OnboardTitleComponentProps } from './OnboardTitleProps.generated';
 import Text from '../Text/Text';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardTitle({ node }: OnboardTitleComponentProps) {
+  useLogRender('OnboardTitle');
   node = useNode(node);
   return <Text node={node} />;
 }

package/src/build-components/OnboardTitle/OnboardTitleProps.generated.ts

@@ -34,7 +34,7 @@ export interface OnboardTitlePropsGenerated {
   child: string;
   attributes: {
     color?: string;
-    fontSize?: number;
+    fontSize?: string;
     fontWeight?: FontWeightOptionType;
     textAlign?: TextAlignOptionType;
     scrollable?: boolean;
@@ -42,7 +42,7 @@ export interface OnboardTitlePropsGenerated {
     alignItems?: AlignItemsOptionType;
     justifyContent?: JustifyContentOptionType;
     gap?: string;
-    padding?: number;
+    padding?: string;
     paddingHorizontal?: string;
     paddingVertical?: string;
     paddingTop?: string;
@@ -50,7 +50,6 @@ export interface OnboardTitlePropsGenerated {
     paddingLeft?: string;
     paddingRight?: string;
     margin?: string;
-    marginHorizontal?: string;
     marginVertical?: string;
     marginTop?: string;
     marginBottom?: string;
@@ -58,8 +57,8 @@ export interface OnboardTitlePropsGenerated {
     marginRight?: string;
     backgroundColor?: string;
     borderRadius?: string;
-    width?: number;
-    height?: number;
+    width?: string;
+    height?: string;
   };
 }
 

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

@@ -11,5 +11,11 @@
     "fontSize": "24@fs",
     "fontWeight": "700",
     "textAlign": "center"
+  },
+  "meta": {
+    "desiredParent": [">OnboardItem", ">OnboardProvider"],
+    "label": "Onboard Title",
+    "description": "Title text for an onboarding step.",
+    "attributes": {}
   }
 }

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

@@ -1,20 +1,26 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { TextComponentProps } from './TextProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { extractTextStyle } from '../../utils/extractTextStyle';
+import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useLogRender } from '../../utils/useLogRender';
 
 function Text({ node }: TextComponentProps) {
+  useLogRender('Text');
   node = useNode(node);
-  const { defaultLanguage, localication } = useRenderStore((s) => ({
-    defaultLanguage: s.defaultLanguage,
-    localication: s.localication,
+  const attributeKey = (node as any)?.sourceType ?? node.type ?? 'text';
+  const { appConfig } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
   }));
+  const { defaultLanguage, localication } = appConfig;
   const keyOrText: string = node.children as string;
-  const style = extractTextStyle(node);
+  const textStyle = extractTextStyle(node);
+  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
+  const style = { ...viewStyle, ...textStyle };
 
   return (
-    <p style={style}>
+    <p attribute-key={attributeKey} style={style}>
       {localication?.[defaultLanguage ?? 'en']?.[keyOrText] ?? keyOrText}
     </p>
   );

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

@@ -38,7 +38,7 @@ export interface TextPropsGenerated {
     alignItems?: AlignItemsOptionType;
     justifyContent?: JustifyContentOptionType;
     gap?: string;
-    padding?: number;
+    padding?: string;
     paddingHorizontal?: string;
     paddingVertical?: string;
     paddingTop?: string;
@@ -46,7 +46,6 @@ export interface TextPropsGenerated {
     paddingLeft?: string;
     paddingRight?: string;
     margin?: string;
-    marginHorizontal?: string;
     marginVertical?: string;
     marginTop?: string;
     marginBottom?: string;
@@ -54,10 +53,10 @@ export interface TextPropsGenerated {
     marginRight?: string;
     backgroundColor?: string;
     borderRadius?: string;
-    width?: number;
-    height?: number;
+    width?: string;
+    height?: string;
     color?: string;
-    fontSize?: number;
+    fontSize?: string;
     fontWeight?: FontWeightOptionType;
     textAlign?: TextAlignOptionType;
   };

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

@@ -6,8 +6,8 @@
     "children": "string",
     "extends": "View",
     "attributes": {
-      "color": "string",
-      "fontSize": "number",
+      "color": "color",
+      "fontSize": "size",
       "fontWeight": [
         "normal",
         "bold",
@@ -23,5 +23,41 @@
       ],
       "textAlign": ["left", "center", "right", "justify"]
     }
+  },
+  "meta": {
+    "desiredParent": ["all"],
+    "label": "Text",
+    "description": "Displays simple text.",
+    "attributes": {
+      "color": {
+        "label": "Color",
+        "description": "Text color.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "fontSize": {
+        "label": "Font Size",
+        "description": "Text size.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 2,
+        "preferedScale": "s"
+      },
+      "fontWeight": {
+        "label": "Font Weight",
+        "description": "Text weight.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "textAlign": {
+        "label": "Text Align",
+        "description": "Text alignment.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 4
+      }
+    }
   }
 }

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

@@ -1,17 +1,22 @@
-import React from 'react';
-import type {
-  ViewComponentProps,
-  ViewPropsGenerated,
-} from './ViewProps.generated';
+import React, { useMemo } from 'react';
+import type { ViewComponentProps } from './ViewProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { Node } from '../../types/Node';
 import useNode from '../useNode';
 import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useLogRender } from '../../utils/useLogRender';
 
 export function View({ node }: ViewComponentProps) {
+  useLogRender('View');
   node = useNode(node);
+  const attributeKey = (node as any)?.sourceType ?? node.type ?? 'view';
+  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
   return (
-    <div style={extractViewStyle(node)} className="scroll-container">
+    <div
+      attribute-key={attributeKey}
+      style={viewStyle}
+      className="scroll-container"
+    >
       <RenderNode node={node.children as Node} />
     </div>
   );

package/src/build-components/View/ViewProps.generated.ts

@@ -25,7 +25,7 @@ export interface ViewPropsGenerated {
     alignItems?: AlignItemsOptionType;
     justifyContent?: JustifyContentOptionType;
     gap?: string;
-    padding?: number;
+    padding?: string;
     paddingHorizontal?: string;
     paddingVertical?: string;
     paddingTop?: string;
@@ -33,7 +33,6 @@ export interface ViewPropsGenerated {
     paddingLeft?: string;
     paddingRight?: string;
     margin?: string;
-    marginHorizontal?: string;
     marginVertical?: string;
     marginTop?: string;
     marginBottom?: string;
@@ -41,8 +40,8 @@ export interface ViewPropsGenerated {
     marginRight?: string;
     backgroundColor?: string;
     borderRadius?: string;
-    width?: number;
-    height?: number;
+    width?: string;
+    height?: string;
   };
 }
 

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

@@ -16,25 +16,233 @@
         "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",
+      "height": "size"
+    },
+    "defaults": {
+      "flexDirection": "column"
+    }
+  },
+  "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
+      }
+    },
+    "attributes": {
+      "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"
+      },
+      "height": {
+        "label": "Height",
+        "description": "Fixed height value.",
+        "category": "container",
+        "specialCategory": "size",
+        "sort": 1,
+        "preferedScale": "vs"
+      }
     }
   }
 }

package/src/build-components/index.ts

@@ -4,6 +4,28 @@ export { default as RenderNode } from './RenderNode.generated';
 
 export { patterns } from './patterns.generated';
 
+export const allcomponentNames = [
+  'button',
+  'carousel',
+  'carouselButtons',
+  'carouselDots',
+  'carouselItem',
+  'carouselProvider',
+  'image',
+  'Onboard',
+  'OnboardButton',
+  'OnboardButtons',
+  'OnboardDot',
+  'OnboardFooter',
+  'OnboardImage',
+  'OnboardItem',
+  'OnboardProvider',
+  'OnboardSubtitle',
+  'OnboardTitle',
+  'text',
+  'view',
+] as const;
+
 export type {
   ButtonPropsGenerated,
   ButtonComponentProps,