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

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",
+                  "placementKey": "onboard"
+                }
+              ],
+              "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",
+                      "placementKey": "onboard"
+                    }
+                  ],
+                  "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/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>
+  );
+}

package/src/build-components/Checkbox/CheckboxProps.generated.ts

@@ -0,0 +1,84 @@
+/* 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 CheckboxStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  textAlign?: string;
+  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?: number;
+  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;
+  checkIconSize?: number;
+  checkIconStrokeWidth?: number;
+}
+
+export interface CheckboxPropsGenerated {
+  child: string;
+  attributes: {
+    styles?: CheckboxStyleGenerated;
+    adjustsFontSizeToFit?: boolean;
+    numberOfLines?: number;
+    translateCounter?: number;
+    scrollable?: boolean;
+    testID?: string;
+    checked?: boolean;
+    label?: string;
+    checkedColor?: string;
+    syncTermsAccepted?: boolean;
+  };
+}
+
+export interface CheckboxComponentProps {
+  node: NodeData<CheckboxPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,83 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "Checkbox",
+    "title": "Checkbox",
+    "description": "A standard checkbox component.",
+    "children": "never",
+    "extends": "Text",
+    "attributes": {
+      "checked": "boolean",
+      "label": "string",
+      "checkedColor": "color",
+      "syncTermsAccepted": "boolean",
+      "styles": {
+        "borderRadius": "number",
+        "checkIconSize": "number",
+        "checkIconStrokeWidth": "number"
+      }
+    },
+    "defaults": {
+      "checked": false,
+      "label": "view.terms.checkbox.label",
+      "styles": {
+        "borderRadius": 4,
+        "checkIconSize": 12,
+        "checkIconStrokeWidth": 1.7,
+        "flexDirection": "row"
+      },
+      "checkedColor": "THEME_COLORS.CHECKBOX_ACTIVE_COLOR"
+    }
+  },
+  "meta": {
+    "label": "Checkbox",
+    "description": "A checkbox with an optional label.",
+    "attributes": {
+      "checked": {
+        "label": "Checked",
+        "description": "Whether the checkbox is checked by default.",
+        "category": "other",
+        "sort": 1
+      },
+      "label": {
+        "label": "Label",
+        "description": "The text label next to the checkbox.",
+        "category": "other",
+        "sort": 2
+      },
+      "checkedColor": {
+        "label": "Checked color",
+        "description": "The color of the checkbox when checked.",
+        "category": "style",
+        "sort": 3
+      },
+      "styles": {
+        "width": {
+          "label": "Box Width",
+          "description": "Width of the checkbox box (px).",
+          "category": "style"
+        },
+        "height": {
+          "label": "Box Height",
+          "description": "Height of the checkbox box (px).",
+          "category": "style"
+        },
+        "borderRadius": {
+          "label": "Box Border Radius",
+          "description": "Border radius of the checkbox box (px).",
+          "category": "style"
+        },
+        "checkIconSize": {
+          "label": "Check Icon Size",
+          "description": "Size of the check icon inside the box (px).",
+          "category": "style"
+        },
+        "checkIconStrokeWidth": {
+          "label": "Check Icon Stroke Width",
+          "description": "Stroke width of the check icon inside the box.",
+          "category": "style"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,106 @@
+import React, { useContext } from 'react';
+import { Controller } from 'react-hook-form';
+import type {
+  FieldValues,
+  Control,
+  ControllerRenderProps,
+} from 'react-hook-form';
+import type { FormCheckboxComponentProps } from './FormCheckboxProps.generated';
+import { formContext } from '../FormProvider/FormProvider';
+import { Checkbox } from '../Checkbox/Checkbox';
+import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
+
+/**
+ * Converts builder validation array to react-hook-form rules.
+ * Builder must send validation as key-value pairs; e.g. ['required'] or ['min', 2], ['max', 5].
+ * If 'min' or 'max' is the last element (no value following), that rule is skipped (no crash).
+ */
+function validationArrayToRules(validation: string[] | undefined): {
+  required?: boolean;
+  min?: number;
+  max?: number;
+} {
+  const rules: { required?: boolean; min?: number; max?: number } = {};
+  if (!Array.isArray(validation)) return rules;
+  if (validation.includes('required')) rules.required = true;
+  const minIdx = validation.indexOf('min');
+  if (minIdx >= 0) {
+    if (validation[minIdx + 1] != null) {
+      const minVal = Number(validation[minIdx + 1]);
+      if (Number.isFinite(minVal)) rules.min = minVal;
+      else {
+        console.warn(
+          '[FormCheckbox] validation "min" rule skipped: value must be a number.',
+          'Received:',
+          validation[minIdx + 1],
+          '— Expected e.g. ["min", 2].',
+        );
+      }
+    } else {
+      console.warn(
+        '[FormCheckbox] validation "min" rule skipped: no value after "min".',
+        'Expected e.g. ["min", 2], got:',
+        validation,
+      );
+    }
+  }
+  const maxIdx = validation.indexOf('max');
+  if (maxIdx >= 0) {
+    if (validation[maxIdx + 1] != null) {
+      const maxVal = Number(validation[maxIdx + 1]);
+      if (Number.isFinite(maxVal)) rules.max = maxVal;
+      else {
+        console.warn(
+          '[FormCheckbox] validation "max" rule skipped: value must be a number.',
+          'Received:',
+          validation[maxIdx + 1],
+          '— Expected e.g. ["max", 5].',
+        );
+      }
+    } else {
+      console.warn(
+        '[FormCheckbox] validation "max" rule skipped: no value after "max".',
+        'Expected e.g. ["max", 5], got:',
+        validation,
+      );
+    }
+  }
+  return rules;
+}
+
+/** FormCheckbox wraps Checkbox with RHF; UI and styling come from Checkbox. */
+export function FormCheckbox({ node }: FormCheckboxComponentProps) {
+  useLogRender('FormCheckbox');
+  node = useNode(node);
+  const ctx = useContext(formContext);
+  const attrs = node.attributes;
+  const name = attrs?.name as string | undefined;
+  const validation = attrs?.validation as string[] | undefined;
+
+  if (!ctx || !name) {
+    return <Checkbox node={node as Parameters<typeof Checkbox>[0]['node']} />;
+  }
+
+  const control = ctx.control as Control<FieldValues>;
+  const rules = validationArrayToRules(validation);
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      render={({
+        field,
+      }: {
+        field: ControllerRenderProps<FieldValues, string>;
+      }) => (
+        <Checkbox
+          node={node as Parameters<typeof Checkbox>[0]['node']}
+          checked={Boolean(field.value)}
+          onCheckedChange={(value) => field.onChange(value)}
+        />
+      )}
+    />
+  );
+}