@developer_tribe/react-builder 0.1.27 → 0.1.28

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

@@ -1,7 +1,8 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import type { OnboardFooterComponentProps } from './OnboardFooterProps.generated';
-import { mainNodeContext } from '../../RenderMainNode';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
+import { useRenderStore } from '../../store';
+import { parseSize } from '../../size-matters';
 
 type Segment =
   | { type: 'text'; value: string }
@@ -84,9 +85,11 @@ function buildSegments(
 }
 
 function OnboardFooter({ node }: OnboardFooterComponentProps) {
-  node = useDefaults(node);
-  const { localication, defaultLanguage, setWarning } =
-    useContext(mainNodeContext) ?? {};
+  node = useNode(node);
+  const { defaultLanguage, localication } = useRenderStore((s) => ({
+    defaultLanguage: s.defaultLanguage,
+    localication: s.localication,
+  }));
   const t = (key?: string) =>
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
@@ -125,8 +128,17 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
     cursor: color ? 'pointer' : undefined,
   });
 
+  const paddingHorizontal = parseSize(node?.attributes?.paddingHorizontal);
+  console.log('----', node?.attributes);
   return (
-    <div className="primitive primitive-footer" style={style}>
+    <div
+      style={{
+        ...style,
+        paddingLeft: paddingHorizontal,
+        paddingRight: paddingHorizontal,
+        textAlign: 'center',
+      }}
+    >
       {!!text &&
         (() => {
           const firstText = t(node?.attributes?.linkedWordFirstLocalizationKey);
@@ -146,17 +158,15 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
             },
           ]);
 
-          const textColor = node?.attributes?.textColor;
+          const textColor = node?.attributes?.color;
 
           const handleClick = (page?: string) => {
             if (!page) return;
-            // Demo environment: surface intent via warning banner if available
-            if (setWarning) setWarning(`Navigate to page: ${page}`);
           };
 
           return (
             <>
-              <p style={{ color: textColor }}>
+              <p style={{ color: textColor, alignItems: 'center' }}>
                 {segments.map((seg, i) =>
                   seg.type === 'text' ? (
                     <span key={i}>{seg.value}</span>
@@ -172,7 +182,7 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
                 )}
               </p>
               {matchCount === 0 && (
-                <div style={{ display: 'flex', gap: 8 }}>
+                <div>
                   {node?.attributes?.linkedWordFirstLocalizationKey && (
                     <span
                       style={linkStyle(node?.attributes?.linkedWordFirstColor)}

package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts

@@ -5,6 +5,20 @@ import type { NodeData } from '../../types/Node';
 export interface OnboardFooterPropsGenerated {
   child: string;
   attributes: {
+    color?: string;
+    fontSize?: number;
+    fontWeight?:
+      | 'normal'
+      | 'bold'
+      | '100'
+      | '200'
+      | '300'
+      | '400'
+      | '500'
+      | '600'
+      | '700'
+      | '800'
+      | '900';
     scrollable?: boolean;
     flexDirection?: 'row' | 'column';
     alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
@@ -15,15 +29,26 @@ export interface OnboardFooterPropsGenerated {
       | 'space-between'
       | 'space-around'
       | 'space-evenly';
-    gap?: number;
+    gap?: string;
     padding?: number;
-    margin?: 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?: number;
+    borderRadius?: string;
     width?: number;
     height?: number;
     textLocalizationKey?: string;
-    textColor?: string;
     linkedWordFirstLocalizationKey?: string;
     linkedWordFirstColor?: string;
     linkedWordFirstPage?: string;

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

@@ -4,27 +4,9 @@
   "pattern": {
     "type": "OnboardFooter",
     "children": "node",
+    "extends": "Text",
     "attributes": {
-      "scrollable": "boolean",
-      "flexDirection": ["row", "column"],
-      "alignItems": ["flex-start", "center", "flex-end", "stretch", "baseline"],
-      "justifyContent": [
-        "flex-start",
-        "center",
-        "flex-end",
-        "space-between",
-        "space-around",
-        "space-evenly"
-      ],
-      "gap": "number",
-      "padding": "number",
-      "margin": "number",
-      "backgroundColor": "string",
-      "borderRadius": "number",
-      "width": "number",
-      "height": "number",
       "textLocalizationKey": "string",
-      "textColor": "string",
       "linkedWordFirstLocalizationKey": "string",
       "linkedWordFirstColor": "string",
       "linkedWordFirstPage": "string",
@@ -32,5 +14,8 @@
       "linkedWordSecondColor": "string",
       "linkedWordSecondPage": "string"
     }
+  },
+  "defaults": {
+    "paddingHorizontal": "24@s"
   }
 }

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { OnboardImageComponentProps } from './OnboardImageProps.generated';
 import Image from '../Image/Image';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
 
 function OnboardImage({ node }: OnboardImageComponentProps) {
-  node = useDefaults(node);
+  node = useNode(node);
   return <Image node={{ ...node, type: 'image' } as any} />;
 }
 

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

@@ -1,26 +1,27 @@
-import React, { useMemo } from 'react';
-import type { NodeData } from '../../types/Node';
+import React from 'react';
 import type { OnboardItemComponentProps } from './OnboardItemProps.generated';
-import CarouselItem from '../CarouselItem/CarouselItem';
-import { isNodeArray } from '../../utils/analyseNode';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
+import { RenderNode } from '../..';
+import { parseSize } from '../../size-matters';
 
 function OnboardItem({ node }: OnboardItemComponentProps) {
-  node = useDefaults(node);
-  const children = useMemo(() => {
-    return (
-      (
-        (isNodeArray(node.children)
-          ? node.children
-          : [node.children]) as NodeData[]
-      )
-        //NOTE: İstisna!! Onboard button carousel dışında olacak
-        .filter((s) => (s as NodeData)?.type != 'OnboardButtons')
-    );
-  }, [node.children]) as NodeData[];
-
+  node = useNode(node);
+  const flexDirection = node.attributes?.flexDirection;
+  const display = node.attributes?.display;
+  const paddingHorizontal = parseSize(node.attributes?.paddingHorizontal);
   return (
-    <CarouselItem node={{ ...node, type: 'carouselItem', children } as any} />
+    <div
+      className="embla__slide"
+      style={{
+        gap: parseSize(node.attributes?.gap),
+        flexDirection,
+        display,
+        paddingRight: paddingHorizontal,
+        paddingLeft: paddingHorizontal,
+      }}
+    >
+      {node.children && <RenderNode node={node.children} />}
+    </div>
   );
 }
 

package/src/build-components/OnboardItem/OnboardItemProps.generated.ts

@@ -4,7 +4,12 @@ import type { NodeData } from '../../types/Node';
 
 export interface OnboardItemPropsGenerated {
   child: string;
-  attributes: {};
+  attributes: {
+    display?: 'flex' | 'block';
+    gap?: string;
+    flexDirection?: 'row' | 'column';
+    paddingHorizontal?: string;
+  };
 }
 
 export interface OnboardItemComponentProps {

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

@@ -4,6 +4,17 @@
   "pattern": {
     "type": "OnboardItem",
     "children": "node",
-    "attributes": {}
+    "attributes": {
+      "display": ["flex", "block"],
+      "gap": "string",
+      "flexDirection": ["row", "column"],
+      "paddingHorizontal": "string"
+    }
+  },
+  "defaults": {
+    "gap": "16@vs",
+    "display": "flex",
+    "flexDirection": "column",
+    "paddingHorizontal": "24@s"
   }
 }

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

@@ -7,18 +7,17 @@ import React, {
 } from 'react';
 import type { NodeData } from '../../types/Node';
 import type { OnboardProviderComponentProps } from './OnboardProviderProps.generated';
-import { mainNodeContext } from '../../RenderMainNode';
 import useEmblaCarousel from 'embla-carousel-react';
 import RenderNode from '../RenderNode.generated';
-import { renderPageContext } from '../../RenderPage';
-import useDefaults from '../useNode';
+import { useRenderStore } from '../../store';
+import useNode from '../useNode';
 
 export const onboardContext = createContext<any>(undefined);
 function OnboardProvider({ node }: OnboardProviderComponentProps) {
-  node = useDefaults(node);
-  const { device } = useContext(renderPageContext) ?? {};
+  node = useNode(node);
+  console.log('node', node);
+  const device = useRenderStore((s) => s.device);
   const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
-  const { theme, setWarning } = useContext(mainNodeContext) ?? {};
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   const children = useMemo(() => {
@@ -45,21 +44,25 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
     });
   }, [emblaApi]);
 
-  useEffect(() => {
+  /* useEffect(() => {
     if (theme !== (node.attributes as any)?.theme) {
       setWarning?.('Wrong theme');
     }
-  }, [theme]);
+  }, [theme]);*/
 
   return (
     <onboardContext.Provider value={{ emblaApi, selectedIndex }}>
       <div
         className="carousel-provider"
         style={{
-          paddingTop: device?.insets?.[0],
-          paddingRight: device?.insets?.[1],
-          paddingBottom: device?.insets?.[2],
-          paddingLeft: device?.insets?.[3],
+          paddingTop:
+            device?.insets?.[0] + (node.attributes as any)?.paddingTop,
+          paddingRight:
+            device?.insets?.[1] + (node.attributes as any)?.paddingRight,
+          paddingBottom:
+            device?.insets?.[2] + (node.attributes as any)?.paddingBottom,
+          paddingLeft:
+            device?.insets?.[3] + (node.attributes as any)?.paddingLeft,
         }}
       >
         <div className="embla">

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

@@ -7,6 +7,10 @@ export interface OnboardProviderPropsGenerated {
   attributes: {
     theme?: string;
     use_safe_area_inset?: boolean;
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
   };
 }
 

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

@@ -6,7 +6,17 @@
     "children": "node",
     "attributes": {
       "theme": "string",
-      "use_safe_area_inset": "boolean"
+      "use_safe_area_inset": "boolean",
+      "paddingTop": "number",
+      "paddingRight": "number",
+      "paddingBottom": "number",
+      "paddingLeft": "number"
     }
+  },
+  "defaults": {
+    "paddingTop": 0,
+    "paddingRight": 0,
+    "paddingBottom": 8,
+    "paddingLeft": 0
   }
 }

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

@@ -1,25 +1,11 @@
 import React from 'react';
 import type { OnboardSubtitleComponentProps } from './OnboardSubtitleProps.generated';
 import Text from '../Text/Text';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
 
 function OnboardSubtitle({ node }: OnboardSubtitleComponentProps) {
-  node = useDefaults(node);
-  return (
-    <Text
-      node={
-        {
-          ...node,
-          type: 'text',
-          attributes: {
-            fontSize: 14,
-            fontWeight: '600',
-            ...(node.attributes as any),
-          },
-        } as any
-      }
-    />
-  );
+  node = useNode(node);
+  return <Text node={node} />;
 }
 
 export default React.memo(OnboardSubtitle);

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

@@ -7,7 +7,6 @@ export interface OnboardSubtitlePropsGenerated {
   attributes: {
     color?: string;
     fontSize?: number;
-    textAlign?: 'left' | 'center' | 'right' | 'justify';
     fontWeight?:
       | 'normal'
       | 'bold'
@@ -20,6 +19,35 @@ export interface OnboardSubtitlePropsGenerated {
       | '700'
       | '800'
       | '900';
+    scrollable?: boolean;
+    flexDirection?: 'row' | 'column';
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+    justifyContent?:
+      | 'flex-start'
+      | 'center'
+      | 'flex-end'
+      | 'space-between'
+      | '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;
   };
 }
 

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

@@ -4,27 +4,11 @@
   "pattern": {
     "type": "OnboardSubtitle",
     "children": "node",
-    "attributes": {
-      "color": "string",
-      "fontSize": "number",
-      "textAlign": ["left", "center", "right", "justify"],
-      "fontWeight": [
-        "normal",
-        "bold",
-        "100",
-        "200",
-        "300",
-        "400",
-        "500",
-        "600",
-        "700",
-        "800",
-        "900"
-      ]
-    }
+    "extends": "Text",
+    "attributes": {}
   },
   "defaults": {
-    "fontSize": 14,
+    "fontSize": "14@fs",
     "fontWeight": "600"
   }
 }

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

@@ -1,25 +1,12 @@
 import React from 'react';
 import type { OnboardTitleComponentProps } from './OnboardTitleProps.generated';
 import Text from '../Text/Text';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
 
 function OnboardTitle({ node }: OnboardTitleComponentProps) {
-  node = useDefaults(node);
-  return (
-    <Text
-      node={
-        {
-          ...node,
-          type: 'text',
-          attributes: {
-            fontSize: 24,
-            fontWeight: '700',
-            ...(node.attributes as any),
-          },
-        } as any
-      }
-    />
-  );
+  node = useNode(node);
+  console.log('node', node);
+  return <Text node={node} />;
 }
 
 export default React.memo(OnboardTitle);

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

@@ -19,6 +19,35 @@ export interface OnboardTitlePropsGenerated {
       | '700'
       | '800'
       | '900';
+    scrollable?: boolean;
+    flexDirection?: 'row' | 'column';
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+    justifyContent?:
+      | 'flex-start'
+      | 'center'
+      | 'flex-end'
+      | 'space-between'
+      | '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;
   };
 }
 

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

@@ -4,26 +4,12 @@
   "pattern": {
     "type": "OnboardTitle",
     "children": "node",
-    "attributes": {
-      "color": "string",
-      "fontSize": "number",
-      "fontWeight": [
-        "normal",
-        "bold",
-        "100",
-        "200",
-        "300",
-        "400",
-        "500",
-        "600",
-        "700",
-        "800",
-        "900"
-      ]
-    }
+    "extends": "Text",
+    "attributes": {}
   },
   "defaults": {
-    "fontSize": 24,
-    "fontWeight": "700"
+    "fontSize": "24@fs",
+    "fontWeight": "700",
+    "textAlign": "center"
   }
 }

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

@@ -1,17 +1,29 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import type { TextComponentProps } from './TextProps.generated';
-import { mainNodeContext } from '../../RenderMainNode';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
+import { useRenderStore } from '../../store';
+import { fs, parseSize } from '../../size-matters';
 
 function Text({ node }: TextComponentProps) {
-  node = useDefaults(node);
-  const { localication, defaultLanguage } = useContext(mainNodeContext) ?? {};
+  node = useNode(node);
+  const { screenStyle, theme } = useRenderStore((s) => ({
+    screenStyle: s.screenStyle,
+    theme: s.theme,
+  }));
+  const color =
+    theme === 'light' ? screenStyle.light.color : screenStyle.dark.color;
+  const { defaultLanguage, localication } = useRenderStore((s) => ({
+    defaultLanguage: s.defaultLanguage,
+    localication: s.localication,
+  }));
   const keyOrText: string = node.children as string;
+  const style = (node.attributes as React.CSSProperties) ?? {};
+  const fontSize = node.attributes?.fontSize
+    ? parseSize(node.attributes.fontSize)
+    : fs(14);
+
   return (
-    <p
-      style={node.attributes as React.CSSProperties}
-      className="primitive primitive-text"
-    >
+    <p style={{ ...style, fontSize, color: style.color ?? color }}>
       {localication?.[defaultLanguage ?? 'en']?.[keyOrText] ?? keyOrText}
     </p>
   );

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

@@ -5,6 +5,35 @@ import type { NodeData } from '../../types/Node';
 export interface TextPropsGenerated {
   child: string;
   attributes: {
+    scrollable?: boolean;
+    flexDirection?: 'row' | 'column';
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+    justifyContent?:
+      | 'flex-start'
+      | 'center'
+      | 'flex-end'
+      | 'space-between'
+      | '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;
     color?: string;
     fontSize?: number;
     fontWeight?:

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

@@ -4,6 +4,7 @@
   "pattern": {
     "type": "text",
     "children": "string",
+    "extends": "View",
     "attributes": {
       "color": "string",
       "fontSize": "number",

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

@@ -5,7 +5,7 @@ import type {
 } from './ViewProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { Node } from '../../types/Node';
-import useDefaults from '../useNode';
+import useNode from '../useNode';
 
 function mapAttributesToStyle(
   attributes: ViewPropsGenerated['attributes'],
@@ -49,11 +49,11 @@ function mapAttributesToStyle(
 }
 
 export function View({ node }: ViewComponentProps) {
-  node = useDefaults(node);
+  node = useNode(node);
   return (
     <div
       style={mapAttributesToStyle(node.attributes ?? {})}
-      className="primitive primitive-view"
+      className="scroll-container"
     >
       <RenderNode node={node.children as Node} />
     </div>