@developer_tribe/react-builder 1.2.22 → 1.2.24

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

@@ -0,0 +1,59 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "Separator",
+    "children": "never",
+    "attributes": {
+      "title": "title",
+      "description": "description",
+      "style": {
+        "backgroundColor": "color",
+        "width": "size",
+        "height": "size",
+        "marginHorizontal": "size",
+        "marginVertical": "size",
+        "marginTop": "size",
+        "marginBottom": "size"
+      }
+    }
+  },
+  "meta": {
+    "desiredParent": ["all"],
+    "label": "Separator",
+    "description": "Horizontal line separator.",
+    "styles": {
+      "backgroundColor": {
+        "label": "Color",
+        "description": "Separator line color.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 1
+      }
+    },
+    "attributes": {
+      "width": {
+        "label": "Width",
+        "description": "Separator width.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 1,
+        "preferredScale": "s"
+      },
+      "height": {
+        "label": "Height",
+        "description": "Separator thickness.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 2,
+        "preferredScale": "vs"
+      }
+    }
+  },
+  "defaults": {
+    "style": {
+      "width": "100%",
+      "height": 2,
+      "backgroundColor": "#000000"
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react';
+import type { StatusBarColorComponentProps } from './StatusBarColorProps.generated';
+import useNode from '../useNode';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { parseColor } from '../../utils/parseColor';
+import { getStyleBag } from '../../utils/attributeStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { useRenderStore } from '../../store';
+
+function StatusBarColor({ node }: StatusBarColorComponentProps) {
+  useLogRender('StatusBarColor');
+  node = useNode(node);
+
+  const { appConfig, projectColors } = useBuilderParams();
+  const setStatusBarOverrideColor = useRenderStore(
+    (s) => s.setStatusBarOverrideColor,
+  );
+
+  const rawBg = getStyleBag(node.attributes)?.backgroundColor as
+    | string
+    | undefined;
+  const resolvedColor = parseColor(rawBg, {
+    projectColors,
+    theme: appConfig?.theme,
+  });
+
+  useEffect(() => {
+    if (resolvedColor) {
+      setStatusBarOverrideColor(resolvedColor);
+    }
+    return () => {
+      setStatusBarOverrideColor(null);
+    };
+  }, [resolvedColor, setStatusBarOverrideColor]);
+
+  return null;
+}
+
+export default React.memo(StatusBarColor);

package/src/build-components/StatusBarColor/StatusBarColorProps.generated.ts

@@ -0,0 +1,71 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+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 StatusBarColorStyleGenerated {
+  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 StatusBarColorPropsGenerated {
+  child: string;
+  attributes: {
+    style?: StatusBarColorStyleGenerated;
+    scrollable?: boolean;
+    title?: string;
+    description?: string;
+  };
+}
+
+export interface StatusBarColorComponentProps {
+  node: NodeData<StatusBarColorPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,34 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "StatusBarColor",
+    "children": "never",
+    "extends": "View",
+    "attributes": {
+      "title": "title",
+      "description": "description",
+      "style": {
+        "backgroundColor": "color"
+      }
+    }
+  },
+  "meta": {
+    "desiredParent": ["all"],
+    "label": "Status Bar Color",
+    "description": "Sets the OS status bar background color.",
+    "styles": {
+      "backgroundColor": {
+        "label": "Background Color",
+        "description": "Status bar background color.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 1
+      }
+    }
+  },
+  "defaults": {
+    "style": {
+      "backgroundColor": "THEME_COLORS.BACKGROUND"
+    }
+  }
+}

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

@@ -16,6 +16,13 @@
         "fontWeight": "fontWeight",
         "textAlign": ["left", "center", "right", "justify"]
       }
+    },
+    "defaults": {
+      "style": {
+        "color": "THEME_COLORS.TEXT",
+        "fontSize": "16@fs",
+        "fontWeight": "400"
+      }
     }
   },
   "meta": {
@@ -23,45 +30,45 @@
     "label": "Text",
     "description": "Displays simple text.",
 
-    "attributes": {
-      "styles": {
-        "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,
-          "preferredScale": "s"
-        },
-        "fontFamily": {
-          "label": "Font Family",
-          "description": "Font family used for the text.",
-          "category": "style",
-          "specialCategory": null,
-          "sort": 3
-        },
-        "fontWeight": {
-          "label": "Font Weight",
-          "description": "Text weight.",
-          "category": "style",
-          "specialCategory": null,
-          "sort": 4
-        },
-        "textAlign": {
-          "label": "Text Align",
-          "description": "Text alignment.",
-          "category": "style",
-          "specialCategory": null,
-          "sort": 5
-        }
+    "styles": {
+      "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,
+        "preferredScale": "s"
       },
+      "fontFamily": {
+        "label": "Font Family",
+        "description": "Font family used for the text.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "fontWeight": {
+        "label": "Font Weight",
+        "description": "Text weight.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 4
+      },
+      "textAlign": {
+        "label": "Text Align",
+        "description": "Text alignment.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 5
+      }
+    },
+    "attributes": {
       "adjustsFontSizeToFit": {
         "label": "Adjust Font Size To Fit",
         "description": "Automatically reduces font size to fit the available space.",

package/src/build-components/index.ts

@@ -17,6 +17,7 @@ export const allcomponentNames = [
   'Counter',
   'Image',
   'Main',
+  'NavigationBarColor',
   'Onboard',
   'OnboardButton',
   'OnboardButtons',
@@ -34,6 +35,8 @@ export const allcomponentNames = [
   'PaywallProvider',
   'PaywallSubscribeButton',
   'RadioButton',
+  'Separator',
+  'StatusBarColor',
   'Text',
   'View',
 ] as const;
@@ -86,6 +89,10 @@ export type {
   MainPropsGenerated,
   MainComponentProps,
 } from './Main/MainProps.generated';
+export type {
+  NavigationBarColorPropsGenerated,
+  NavigationBarColorComponentProps,
+} from './NavigationBarColor/NavigationBarColorProps.generated';
 export type {
   OnboardPropsGenerated,
   OnboardComponentProps,
@@ -154,6 +161,14 @@ export type {
   RadioButtonPropsGenerated,
   RadioButtonComponentProps,
 } from './RadioButton/RadioButtonProps.generated';
+export type {
+  SeparatorPropsGenerated,
+  SeparatorComponentProps,
+} from './Separator/SeparatorProps.generated';
+export type {
+  StatusBarColorPropsGenerated,
+  StatusBarColorComponentProps,
+} from './StatusBarColor/StatusBarColorProps.generated';
 export type {
   TextPropsGenerated,
   TextComponentProps,