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

package/src/assets/samples/terms-and-privacy-no-form.json

@@ -0,0 +1,108 @@
+{
+  "name": "Terms and Privacy (no form)",
+  "version": "1.1.2",
+  "type": "terms",
+  "data": {
+    "type": "Main",
+    "isMain": true,
+    "attributes": {
+      "useSafeAreaView": true,
+      "description": "Terms and Privacy screen without FormProvider; plain Checkbox and SystemButton.",
+      "title": "Terms & Privacy",
+      "styles": {
+        "backgroundColor": "THEME_COLORS.BACKGROUND",
+        "flex": 1
+      },
+      "testID": "TermsPrivacyNoForm-Main"
+    },
+    "children": [
+      {
+        "type": "View",
+        "attributes": {
+          "description": "Header section",
+          "styles": {
+            "padding": 16,
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderBottomColor": "THEME_COLORS.LINE",
+            "backgroundColor": "THEME_COLORS.BACKGROUND"
+          }
+        },
+        "children": [
+          {
+            "type": "Text",
+            "children": "view.terms.header.title",
+            "attributes": {
+              "styles": {
+                "fontSize": 20,
+                "fontWeight": "700",
+                "color": "THEME_COLORS.TEXT"
+              }
+            }
+          }
+        ]
+      },
+      {
+        "type": "WebView",
+        "attributes": {
+          "iosUrl": "https://stage.vpn111.net/page/ios/privacy",
+          "androidUrl": "https://stage.vpn111.net/page/android/privacy",
+          "styles": {
+            "flex": 1,
+            "backgroundColor": "THEME_COLORS.BACKGROUND"
+          },
+          "testID": "TermsPrivacyNoForm-WebView"
+        }
+      },
+      {
+        "type": "View",
+        "attributes": {
+          "description": "Footer section",
+          "styles": {
+            "padding": 20,
+            "backgroundColor": "THEME_COLORS.BACKGROUND",
+            "borderTopWidth": 1,
+            "borderTopColor": "THEME_COLORS.LINE",
+            "gap": 16
+          }
+        },
+        "children": [
+          {
+            "type": "Checkbox",
+            "attributes": {
+              "checked": false,
+              "label": "view.terms.checkbox.label",
+              "checkedColor": "THEME_COLORS.CHECKBOX_ACTIVE_COLOR",
+              "styles": {
+                "marginBottom": 8
+              },
+              "testID": "TermsPrivacyNoForm-Checkbox"
+            }
+          },
+          {
+            "type": "SystemButton",
+            "attributes": {
+              "labelKey": "view.terms.accept.button",
+              "events": [
+                {
+                  "type": "Navigate",
+                  "navigate_to": "home"
+                }
+              ],
+              "styles": {
+                "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
+                "color": "#FFFFFF",
+                "height": 48,
+                "borderRadius": 8,
+                "alignItems": "center",
+                "justifyContent": "center",
+                "fontWeight": "600"
+              },
+              "testID": "TermsPrivacyNoForm-AcceptButton"
+            }
+          }
+        ]
+      }
+    ]
+  }
+}

package/src/assets/samples/terms-and-privacy.json

@@ -0,0 +1,130 @@
+{
+  "name": "Terms and Privacy",
+  "version": "1.1.2",
+  "type": "terms",
+  "data": {
+    "type": "Main",
+    "isMain": true,
+    "attributes": {
+      "useSafeAreaView": true,
+      "description": "Terms and Privacy screen container",
+      "title": "Terms & Privacy",
+      "styles": {
+        "backgroundColor": "THEME_COLORS.BACKGROUND",
+        "flex": 1
+      },
+      "testID": "TermsPrivacy-Main"
+    },
+    "children": [
+      {
+        "type": "View",
+        "attributes": {
+          "description": "Header section",
+          "styles": {
+            "padding": 16,
+            "alignItems": "center",
+            "borderBottomWidth": 1,
+            "borderBottomColor": "THEME_COLORS.LINE",
+            "backgroundColor": "THEME_COLORS.BACKGROUND"
+          }
+        },
+        "children": [
+          {
+            "type": "Text",
+            "children": "view.terms.header.title",
+            "attributes": {
+              "styles": {
+                "fontSize": 20,
+                "fontWeight": "700",
+                "color": "THEME_COLORS.TEXT"
+              }
+            }
+          }
+        ]
+      },
+      {
+        "type": "WebView",
+        "attributes": {
+          "iosUrl": "https://stage.vpn111.net/page/ios/privacy",
+          "androidUrl": "https://stage.vpn111.net/page/android/privacy",
+          "styles": {
+            "flex": 1,
+            "backgroundColor": "THEME_COLORS.BACKGROUND"
+          },
+          "testID": "TermsPrivacy-WebView"
+        }
+      },
+      {
+        "type": "View",
+        "attributes": {
+          "description": "Footer section",
+          "styles": {
+            "padding": 20,
+            "backgroundColor": "THEME_COLORS.BACKGROUND",
+            "borderTopWidth": 1,
+            "borderTopColor": "THEME_COLORS.LINE",
+            "gap": 16
+          }
+        },
+        "children": [
+          {
+            "type": "FormProvider",
+            "attributes": {
+              "defaultValues": "{\"termsAccepted\": false}",
+              "validationErrorMessageKey": "view.terms.error.must_accept"
+            },
+            "children": [
+              {
+                "type": "FormCheckbox",
+                "attributes": {
+                  "name": "termsAccepted",
+                  "validation": ["required"],
+                  "checked": false,
+                  "label": "view.terms.checkbox.label",
+                  "checkedColor": "THEME_COLORS.CHECKBOX_ACTIVE_COLOR",
+                  "styles": {
+                    "marginBottom": 8
+                  },
+                  "testID": "TermsPrivacy-Checkbox"
+                }
+              },
+              {
+                "type": "FormErrorText",
+                "attributes": {
+                  "styles": {
+                    "marginBottom": 8
+                  },
+                  "testID": "TermsPrivacy-FormErrorText"
+                }
+              },
+              {
+                "type": "FormSubmitButton",
+                "attributes": {
+                  "labelKey": "view.terms.accept.button",
+                  "validationRequired": true,
+                  "disableIfUnvalidated": true,
+                  "events": [
+                    {
+                      "type": "Navigate",
+                      "navigate_to": "home"
+                    }
+                  ],
+                  "styles": {
+                    "backgroundColor": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
+                    "color": "#FFFFFF",
+                    "height": 48,
+                    "borderRadius": 8,
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "fontWeight": "600"
+                  },
+                  "testID": "TermsPrivacy-AcceptButton"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

package/src/attributes-editor/AttributesEditorView.tsx

@@ -81,6 +81,7 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
     loadedFonts,
     markFontLoaded,
     addError,
+    projectOptions,
   } = props;
 
   const headerSection = (
@@ -277,6 +278,7 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
               viewAttributes={viewAttributes}
               label={isBoolean ? label : undefined}
               preferredScale={preferredScale}
+              projectOptions={projectOptions}
             />
           )}
         </div>
@@ -355,6 +357,7 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
                         viewAttributes={viewAttributes}
                         label={isBoolean ? label : undefined}
                         preferredScale={preferredScale}
+                        projectOptions={projectOptions}
                       />
                     )}
                   </div>

package/src/attributes-editor/Field.tsx

@@ -12,6 +12,7 @@ import { Checkbox } from '../components/Checkbox';
 import { LayoutPreviewPicker } from './LayoutPreviewPicker';
 import { SizeField, type PreferredScale } from './SizeField';
 import { LayoutContext, LayoutFieldName, isBooleanFieldType } from './types';
+import type { ProjectOptions } from '../utils/nodeTree';
 
 type FieldProps = {
   name: string;
@@ -24,6 +25,7 @@ type FieldProps = {
   viewAttributes?: Partial<ViewPropsGenerated['attributes']>;
   label?: React.ReactNode;
   preferredScale?: PreferredScale;
+  projectOptions?: ProjectOptions;
 };
 
 const layoutFieldNames: LayoutFieldName[] = [
@@ -47,6 +49,7 @@ export function Field({
   viewAttributes,
   label,
   preferredScale,
+  projectOptions,
 }: FieldProps) {
   if (Array.isArray(type)) {
     if (isLayoutField(name)) {
@@ -64,6 +67,11 @@ export function Field({
         />
       );
     }
+    const options =
+      name === 'type'
+        ? Array.from(new Set([...type, ...(projectOptions?.eventTypes ?? [])]))
+        : type;
+
     return (
       <select
         value={value ?? ''}
@@ -71,7 +79,7 @@ export function Field({
         className="input"
       >
         <option value="">(none)</option>
-        {type.map((opt) => (
+        {options.map((opt) => (
           <option key={opt} value={opt}>
             {opt}
           </option>
@@ -117,6 +125,54 @@ export function Field({
             );
           case 'string':
           case 'description':
+            if (name === 'validation') {
+              const options = projectOptions?.validationTypes ?? [];
+              return (
+                <select
+                  value={itemValue ?? ''}
+                  onChange={(e) => {
+                    const next = [...arr];
+                    next[idx] =
+                      e.target.value === '' ? undefined : e.target.value;
+                    onChange(next);
+                  }}
+                  className="input"
+                  style={{ flex: 1 }}
+                >
+                  <option value="">(none)</option>
+                  {options.map((opt) => (
+                    <option key={opt} value={opt}>
+                      {opt}
+                    </option>
+                  ))}
+                </select>
+              );
+            }
+            if (name === 'type') {
+              const options = projectOptions?.eventTypes ?? [];
+              if (options.length > 0) {
+                return (
+                  <select
+                    value={itemValue ?? ''}
+                    onChange={(e) => {
+                      const next = [...arr];
+                      next[idx] =
+                        e.target.value === '' ? undefined : e.target.value;
+                      onChange(next);
+                    }}
+                    className="input"
+                    style={{ flex: 1 }}
+                  >
+                    <option value="">(none)</option>
+                    {options.map((opt) => (
+                      <option key={opt} value={opt}>
+                        {opt}
+                      </option>
+                    ))}
+                  </select>
+                );
+              }
+            }
             return (
               <input
                 type="text"
@@ -244,6 +300,7 @@ export function Field({
                           layoutContext={layoutContext}
                           viewAttributes={viewAttributes}
                           label={fieldName}
+                          projectOptions={projectOptions}
                         />
                       </div>
                     );
@@ -265,6 +322,7 @@ export function Field({
                         projectColors={projectColors}
                         layoutContext={layoutContext}
                         viewAttributes={viewAttributes}
+                        projectOptions={projectOptions}
                       />
                     </React.Fragment>
                   );
@@ -369,6 +427,7 @@ export function Field({
                     layoutContext={layoutContext}
                     viewAttributes={viewAttributes}
                     label={fieldName}
+                    projectOptions={projectOptions}
                   />
                 </div>
               );
@@ -388,6 +447,7 @@ export function Field({
                   projectColors={projectColors}
                   layoutContext={layoutContext}
                   viewAttributes={viewAttributes}
+                  projectOptions={projectOptions}
                 />
               </React.Fragment>
             );
@@ -496,7 +556,35 @@ export function Field({
         />
       );
     case 'string':
-    case 'description':
+    case 'description': {
+      let options: string[] = [];
+      if (name === 'navigate_to' || name === 'pageKey') {
+        options = projectOptions?.pageKeys ?? [];
+      } else if (name === 'conditionKey') {
+        options = projectOptions?.conditionKeys ?? [];
+      } else if (name === 'placementKey') {
+        options = projectOptions?.placementKeys ?? [];
+      } else if (name === 'name' && componentType?.startsWith('Form')) {
+        options = projectOptions?.formFieldNames ?? [];
+      }
+
+      if (options.length > 0) {
+        return (
+          <select
+            value={value ?? ''}
+            onChange={(e) => onChange(e.target.value || undefined)}
+            className="input"
+          >
+            <option value="">(none)</option>
+            {options.map((opt) => (
+              <option key={opt} value={opt}>
+                {opt}
+              </option>
+            ))}
+          </select>
+        );
+      }
+
       return (
         <input
           type="text"
@@ -507,6 +595,7 @@ export function Field({
           className="input"
         />
       );
+    }
     case 'title':
       return (
         <input

package/src/attributes-editor/attributesEditorModelTypes.ts

@@ -3,6 +3,7 @@ import type { ProjectColors } from '../types/Project';
 import type { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
 import type { Fonts } from '../types/Fonts';
 import type { LayoutContext, SchemaEntry } from './types';
+import type { ProjectOptions } from '../utils/nodeTree';
 
 export type TabId = 'style' | 'container' | 'other';
 
@@ -10,6 +11,7 @@ export type AttributesEditorProps = {
   node: Node;
   onChange: (next: Node) => void;
   projectColors?: ProjectColors;
+  projectRoot?: Node;
 };
 
 export type AttributesEditorTabConfig = {
@@ -60,6 +62,7 @@ export type AttributesEditorModel = {
   projectColorsForPicker?: ProjectColors;
   viewAttributes?: Partial<ViewPropsGenerated['attributes']>;
   layoutContext: LayoutContext;
+  projectOptions: ProjectOptions;
   getAttributeValue: (name: string) => unknown;
   handleAttributeChange: (name: string, val: unknown) => void;
   handleChildrenChange: (val: string) => void;

package/src/attributes-editor/useAttributesEditorModel.ts

@@ -13,6 +13,7 @@ import {
 } from '../utils/patterns';
 import { useRenderStore } from '../store';
 import type { LayoutContext, SchemaEntry } from './types';
+import { collectProjectMetadata } from '../utils/nodeTree';
 import {
   buildAttributesEditorEntries,
   findLegacyFlatStyleKeys,
@@ -36,6 +37,7 @@ export function useAttributesEditorModel({
   node,
   onChange,
   projectColors,
+  projectRoot,
 }: AttributesEditorProps): AttributesEditorModel {
   const isInvalidNode = !node || isNodeString(node);
   // Memoize baseData to prevent it from changing on every render
@@ -141,6 +143,11 @@ export function useAttributesEditorModel({
     [projectColors],
   );
 
+  const projectOptions = useMemo(
+    () => collectProjectMetadata(projectRoot || baseData),
+    [projectRoot, baseData],
+  );
+
   const viewAttributes = useMemo<
     Partial<ViewPropsGenerated['attributes']> | undefined
   >(
@@ -428,6 +435,7 @@ export function useAttributesEditorModel({
     projectColorsForPicker,
     viewAttributes,
     layoutContext,
+    projectOptions,
     getAttributeValue,
     handleAttributeChange,
     handleChildrenChange,

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

@@ -0,0 +1,165 @@
+import React, { useState, useId } from 'react';
+import type { NodeData } from '../../types/Node';
+import type { ViewPropsGenerated } from '../View/ViewProps.generated';
+import { CheckboxComponentProps } from './CheckboxProps.generated';
+import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
+import { parseColor, type ParseColorOptions } from '../../utils/parseColor';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { useLocalize } from '../../hooks/useLocalize';
+import { Icon } from '../../components/Icon.generated';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
+
+export interface CheckboxProps extends CheckboxComponentProps {
+  checked?: boolean;
+  onCheckedChange?: (value: boolean) => void;
+}
+
+function resolveCheckedColor(
+  attrRecord: Record<string, unknown>,
+  stylesBag: Record<string, unknown> | undefined,
+  colorOpts: ParseColorOptions,
+): string {
+  const raw =
+    (attrRecord.checkedColor as string | undefined) ??
+    (attrRecord.color as string | undefined) ??
+    (stylesBag?.color as string | undefined);
+  const token =
+    (typeof raw === 'string' && raw.trim()) ||
+    'THEME_COLORS.CHECKBOX_ACTIVE_COLOR';
+  return parseColor(token, colorOpts) ?? '#000000';
+}
+
+export function Checkbox({
+  node,
+  checked: controlledChecked,
+  onCheckedChange,
+}: CheckboxProps) {
+  useLogRender('Checkbox');
+  node = useNode(node);
+  const attrs = node.attributes;
+  const attrRecord = toAttributeRecord(attrs);
+  const stylesBag = getStyleBag(attrs);
+  const labelId = useId();
+  const viewStyle = useExtractViewStyle(
+    node as NodeData<ViewPropsGenerated['attributes']>,
+  );
+  const { selectedTheme: theme, projectColors } = useBuilderParams();
+  const localize = useLocalize();
+  const colorOpts: ParseColorOptions = {
+    projectColors,
+    theme: theme ?? 'light',
+  };
+
+  const isControlled =
+    controlledChecked !== undefined && onCheckedChange !== undefined;
+  const [internalChecked, setInternalChecked] = useState(
+    attrs?.checked ?? false,
+  );
+  const checked = isControlled ? controlledChecked : internalChecked;
+
+  const activeColor = resolveCheckedColor(attrRecord, stylesBag, colorOpts);
+
+  const inactiveBorderColor =
+    parseColor('THEME_COLORS.LINE', colorOpts) ??
+    parseColor('STATIC_COLORS.ONBOARD_SEPARATOR_COLOR', colorOpts);
+
+  const labelRaw = attrs?.label ?? '';
+  const label = localize(labelRaw);
+
+  const labelFontSize = attrs?.styles?.fontSize ?? 14;
+  const labelFontFamily = attrs?.styles?.fontFamily as string | undefined;
+  const labelFontWeight = attrs?.styles?.fontWeight as
+    | string
+    | number
+    | undefined;
+  const labelTextAlign = attrs?.styles?.textAlign as
+    | React.CSSProperties['textAlign']
+    | undefined;
+  const labelColor =
+    parseColor(attrs?.styles?.color as string, colorOpts) ??
+    parseColor('THEME_COLORS.TEXT', colorOpts) ??
+    parseColor('STATIC_COLORS.BLACK', colorOpts);
+
+  const checkIconColor =
+    parseColor('STATIC_COLORS.WHITE', colorOpts) ?? undefined;
+
+  const styles = attrs?.styles;
+  const boxWidth = styles?.width ?? 20;
+  const boxHeight = styles?.height ?? 20;
+  const boxBorderRadius = styles?.borderRadius ?? 4;
+  const checkIconSize = styles?.checkIconSize ?? 12;
+  const checkIconStrokeWidth = styles?.checkIconStrokeWidth ?? 1.7;
+  const boxMarginRight = styles?.marginRight ?? 10;
+
+  const handleToggle = () => {
+    const next = !checked;
+    if (isControlled) {
+      onCheckedChange?.(next);
+    } else {
+      setInternalChecked(next);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      handleToggle();
+    }
+  };
+
+  const containerStyle = useMergedStyle(viewStyle);
+  const boxStyle = {
+    width: boxWidth,
+    height: boxHeight,
+    minWidth: boxWidth,
+    minHeight: boxHeight,
+    borderRadius: boxBorderRadius,
+    border: `2px solid ${checked ? (activeColor ?? 'transparent') : (inactiveBorderColor ?? 'transparent')}`,
+    backgroundColor: checked ? (activeColor ?? 'transparent') : 'transparent',
+    marginRight: boxMarginRight,
+  };
+  const labelStyle: React.CSSProperties = {
+    fontSize: labelFontSize,
+    color: labelColor ?? undefined,
+    fontFamily: labelFontFamily,
+    fontWeight: labelFontWeight,
+    textAlign: labelTextAlign,
+  };
+
+  return (
+    <div
+      role="checkbox"
+      aria-checked={checked}
+      aria-labelledby={label ? labelId : undefined}
+      aria-label={!label ? 'Checkbox' : undefined}
+      tabIndex={0}
+      className="rb-checkbox"
+      style={containerStyle}
+      onClick={handleToggle}
+      onKeyDown={handleKeyDown}
+      data-testid={attrs?.testID}
+    >
+      <div className="rb-checkbox__box" style={boxStyle}>
+        {checked && (
+          <Icon
+            iconType="check"
+            size={checkIconSize}
+            strokeWidth={checkIconStrokeWidth}
+            color={
+              typeof checkIconColor === 'string' ? checkIconColor : undefined
+            }
+            alt=""
+          />
+        )}
+      </div>
+      {label ? (
+        <span id={labelId} className="rb-checkbox__label" style={labelStyle}>
+          {label}
+        </span>
+      ) : null}
+    </div>
+  );
+}