@developer_tribe/react-builder 1.1.0 → 1.2.0

package/src/components/BuilderButton.tsx

@@ -0,0 +1,161 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { isNodeNullOrUndefined, isNodeString } from '../utils/analyseNode';
+import type { Node, NodeData, NodeDefaultAttribute } from '../types/Node';
+import { getPatternByType } from '../utils/patterns';
+import { Icon } from './Icon.generated';
+
+export type BuilderButtonProps = {
+  node: Node;
+  onClick: () => void;
+  onDelete?: (node: Node) => void;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+};
+
+export function BuilderButton({
+  node,
+  onClick,
+  onDelete,
+  onMoveUp,
+  onMoveDown,
+}: BuilderButtonProps) {
+  // IMPORTANT: Hooks must be called unconditionally on every render.
+  // (Early returns before hooks can trigger React internal invariants.)
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const actionsRef = useRef<HTMLDivElement | null>(null);
+  const menuId = useMemo(
+    () => `builder-node-actions-${Math.random().toString(36).slice(2, 9)}`,
+    [],
+  );
+
+  const handleDelete = () => {
+    if (!onDelete) return;
+    if (isNodeNullOrUndefined(node) || isNodeString(node)) return;
+    onDelete(node);
+  };
+
+  // Copy/Paste intentionally removed for now.
+
+  useEffect(() => {
+    if (!isMenuOpen) return;
+
+    const handlePointerDown = (e: MouseEvent | TouchEvent) => {
+      const el = actionsRef.current;
+      if (!el) return;
+      if (e.target instanceof Element && el.contains(e.target)) return;
+      setIsMenuOpen(false);
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsMenuOpen(false);
+    };
+
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('touchstart', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('touchstart', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isMenuOpen]);
+
+  if (isNodeNullOrUndefined(node)) {
+    return <div className="builder__placeholder">Null or undefined</div>;
+  }
+  if (isNodeString(node)) {
+    return <div className="builder__text">{node as string}</div>;
+  }
+
+  const nodeData = node as NodeData<NodeDefaultAttribute>;
+  let extra = '';
+  if (nodeData.attributes?.condition) {
+    extra = ` (${nodeData.attributes.condition} ${nodeData.attributes.conditionVariable})`;
+  }
+  const patternLabel = getPatternByType(nodeData.type)?.meta?.label?.trim();
+  const baseLabel =
+    patternLabel && patternLabel.length > 0 ? patternLabel : nodeData.type;
+  const conditionLabel = extra.trim() ? extra : '';
+
+  return (
+    <div className="builder__button">
+      {(onMoveUp || onMoveDown) && (
+        <div className="builder__sort-controls">
+          <button
+            type="button"
+            className="builder__sort-button"
+            onClick={(event) => {
+              event.stopPropagation();
+              onMoveUp?.();
+            }}
+            disabled={!onMoveUp}
+            aria-label="Move up"
+          >
+            ↑
+          </button>
+          <button
+            type="button"
+            className="builder__sort-button"
+            onClick={(event) => {
+              event.stopPropagation();
+              onMoveDown?.();
+            }}
+            disabled={!onMoveDown}
+            aria-label="Move down"
+          >
+            ↓
+          </button>
+        </div>
+      )}
+      <button type="button" className="builder__button-link" onClick={onClick}>
+        {baseLabel}
+      </button>
+      <div className="builder__button-actions" ref={actionsRef}>
+        <button
+          type="button"
+          className="builder__button-actions-trigger"
+          aria-label="Open node actions"
+          aria-haspopup="menu"
+          aria-expanded={isMenuOpen}
+          aria-controls={menuId}
+          onClick={(event) => {
+            event.stopPropagation();
+            setIsMenuOpen((v) => !v);
+          }}
+        >
+          <Icon iconType="chevron-right" size={16} />
+        </button>
+        {isMenuOpen && (
+          <ul
+            id={menuId}
+            className="builder__button-actions-menu"
+            role="menu"
+            aria-label="Node actions"
+          >
+            <li role="none">
+              <button
+                type="button"
+                className="builder__button-actions-item builder__button-actions-item--danger"
+                role="menuitem"
+                disabled={!onDelete}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (!onDelete) return;
+                  const shouldDelete = window.confirm('Do you want to delete?');
+                  if (!shouldDelete) return;
+                  handleDelete();
+                  setIsMenuOpen(false);
+                }}
+              >
+                Delete
+              </button>
+            </li>
+          </ul>
+        )}
+      </div>
+      {conditionLabel && (
+        <span className="builder__button-condition">{conditionLabel}</span>
+      )}
+    </div>
+  );
+}

package/src/components/BuilderProvider.tsx

@@ -0,0 +1,65 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import type { Product } from '../paywall/types/paywall-types';
+import type { PaywallBenefits } from '../paywall/types/benefits';
+import { RenderErrorBoundary } from './RenderErrorBoundary';
+
+// NOTE: We keep this context intentionally tiny.
+// IMPORTANT: This provider may be mounted once but consumed by multiple `build-components`
+// on the same screen. Keep the value minimal + stable to avoid unnecessary rerenders.
+// In React Native, `products` should be sourced from an IAP wrapper (e.g. `react-native-iap`)
+// and passed in via `params` from the host app.
+export type Products = Product;
+
+export type BuilderProviderParams = {
+  products: Products[];
+  benefits: PaywallBenefits;
+  onPaywallClose?: () => void;
+  onPaywallSubscribe?: (product?: Product) => void | boolean | Promise<boolean>;
+};
+
+type BuilderProviderProps = {
+  params: BuilderProviderParams;
+  children: React.ReactNode;
+};
+
+const BuilderContext = createContext<BuilderProviderParams | undefined>(
+  undefined,
+);
+
+export function BuilderProvider({ params, children }: BuilderProviderProps) {
+  const value = useMemo<BuilderProviderParams>(
+    () => ({
+      products: Array.isArray(params?.products) ? params.products : [],
+      benefits:
+        params?.benefits && typeof params.benefits === 'object'
+          ? (params.benefits as PaywallBenefits)
+          : {},
+      onPaywallClose:
+        typeof params?.onPaywallClose === 'function'
+          ? params.onPaywallClose
+          : undefined,
+      onPaywallSubscribe:
+        typeof params?.onPaywallSubscribe === 'function'
+          ? params.onPaywallSubscribe
+          : undefined,
+    }),
+    [
+      params?.benefits,
+      params?.products,
+      params?.onPaywallClose,
+      params?.onPaywallSubscribe,
+    ],
+  );
+
+  return (
+    <BuilderContext.Provider value={value}>
+      <RenderErrorBoundary subtitle="caught by BuilderProvider">
+        {children}
+      </RenderErrorBoundary>
+    </BuilderContext.Provider>
+  );
+}
+
+export function useBuilderParams(): BuilderProviderParams {
+  return useContext(BuilderContext) ?? { products: [], benefits: {} };
+}

package/src/components/Checkbox.tsx

@@ -0,0 +1,81 @@
+import React, { useId } from 'react';
+
+type CheckboxChangeHandler = (
+  checked: boolean,
+  event: React.ChangeEvent<HTMLInputElement>,
+) => void;
+
+export type CheckboxProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type' | 'onChange' | 'className'
+> & {
+  label?: React.ReactNode;
+  helperText?: React.ReactNode;
+  className?: string;
+  inputClassName?: string;
+  onChange?: CheckboxChangeHandler;
+};
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {
+      label,
+      helperText,
+      className,
+      inputClassName,
+      onChange,
+      id,
+      disabled,
+      ...rest
+    },
+    ref,
+  ) => {
+    const autoId = useId();
+    const inputId = id ?? autoId;
+    const helperId = helperText ? `${inputId}-helper` : undefined;
+
+    const wrapperClassName = [
+      'builder-checkbox',
+      disabled ? 'builder-checkbox--disabled' : undefined,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const nativeClassName = ['builder-checkbox__native', inputClassName]
+      .filter(Boolean)
+      .join(' ');
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(event.target.checked, event);
+    };
+
+    return (
+      <div className={wrapperClassName}>
+        <label htmlFor={inputId} className="builder-checkbox__label">
+          <input
+            {...rest}
+            ref={ref}
+            id={inputId}
+            type="checkbox"
+            className={nativeClassName}
+            onChange={handleChange}
+            disabled={disabled}
+            aria-describedby={helperId}
+          />
+          <span className="builder-checkbox__control" aria-hidden="true" />
+          {label ? (
+            <span className="builder-checkbox__text">{label}</span>
+          ) : null}
+        </label>
+        {helperText ? (
+          <span id={helperId} className="builder-checkbox__helper">
+            {helperText}
+          </span>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+Checkbox.displayName = 'Checkbox';

package/src/components/DeviceButton.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Device } from '../types/Device';
+import { getImage, TribeAssetName } from '../utils/getImage';
+
+const platformIcons: Record<string, string> = {
+  android: getImage(TribeAssetName.Android),
+  ios: getImage(TribeAssetName.Apple),
+};
+
+type DeviceButtonProps = {
+  device: Device;
+  selectedDevice: Device | null;
+  onSelect: (device: Device) => void;
+};
+
+export function DeviceButton({
+  device,
+  selectedDevice,
+  onSelect,
+}: DeviceButtonProps) {
+  const platformIcon = platformIcons[device.platform];
+  const aspect =
+    device.aspect ??
+    (() => {
+      const r = device.height / device.width;
+      if (r >= 2.05) return 'tall' as const;
+      if (r <= 1.75) return 'wide' as const;
+      return 'regular' as const;
+    })();
+
+  return (
+    <button
+      type="button"
+      className={`editor-device-button${
+        selectedDevice === device ? ' editor-device-button--selected' : ''
+      }`}
+      onClick={() => onSelect(device)}
+    >
+      {device.name} <br />
+      {device.width}×{device.height} ({aspect})
+      {platformIcon && <img src={platformIcon} alt="" aria-hidden="true" />}
+    </button>
+  );
+}
+
+export default DeviceButton;

package/src/components/DeviceNavigationBar.tsx

@@ -0,0 +1,200 @@
+import React from 'react';
+import { Device } from '../types/Device';
+import { useMockOSContext } from '../mockOS/context/MockOSContextBase';
+
+type DeviceNavigationBarProps = {
+  height: number;
+  backgroundColor: string;
+  platform?: Device['platform'];
+  navigationBarType?: Device['navigationBarType'];
+  isDark: boolean;
+};
+
+const basePillStyle: React.CSSProperties = {
+  height: 5,
+  borderRadius: 999,
+  width: 120,
+};
+
+const tabItems = ['Today', 'Search', 'Profile'];
+
+export function DeviceNavigationBar({
+  height,
+  backgroundColor,
+  platform = 'android',
+  navigationBarType = 'gesture',
+  isDark,
+}: DeviceNavigationBarProps) {
+  const context = useMockOSContext();
+
+  if (!height) {
+    return null;
+  }
+
+  const barColor = isDark ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.7)';
+  const mutedColor = isDark
+    ? 'rgba(255, 255, 255, 0.55)'
+    : 'rgba(0, 0, 0, 0.4)';
+
+  function handleBackButton() {
+    if (context) {
+      const canGoBack = context.goBack();
+      // If can't go back, go to launchscreen
+      if (!canGoBack) {
+        context.navigation('launchscreen');
+      }
+    } else {
+      alert('Navigation: Back\n(Mock OS context not available)');
+    }
+  }
+
+  function handleHomeButton() {
+    if (context) {
+      context.navigation('launchscreen');
+    } else {
+      alert('Navigation: Home\n(Mock OS context not available)');
+    }
+  }
+
+  const containerStyle: React.CSSProperties = {
+    height,
+    backgroundColor,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '0 16px',
+  };
+
+  if (platform === 'ios') {
+    switch (navigationBarType) {
+      case 'homeIndicator':
+        return (
+          <div className="device-navigation-bar" style={containerStyle}>
+            <div
+              style={{
+                ...basePillStyle,
+                backgroundColor: barColor,
+              }}
+            />
+          </div>
+        );
+      case 'tabBar':
+        return (
+          <div className="device-navigation-bar" style={containerStyle}>
+            <div
+              style={{
+                display: 'flex',
+                width: '100%',
+                maxWidth: 280,
+                justifyContent: 'space-between',
+                fontSize: 11,
+                textTransform: 'uppercase',
+                letterSpacing: 0.4,
+                gap: 20,
+              }}
+            >
+              {tabItems.map((item) => (
+                <div
+                  key={item}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 4,
+                    color: item === 'Today' ? barColor : mutedColor,
+                  }}
+                >
+                  <div
+                    style={{
+                      width: 20,
+                      height: 20,
+                      borderRadius: 6,
+                      backgroundColor: item === 'Today' ? barColor : mutedColor,
+                      opacity: 0.9,
+                    }}
+                  />
+                  <span>{item}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      default:
+        return null;
+    }
+  }
+
+  // Android styles
+  if (navigationBarType === 'threeButtons') {
+    const buttonStyle: React.CSSProperties = {
+      position: 'relative',
+      width: 40,
+      height: 40,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: 18,
+      color: barColor,
+      cursor: 'pointer',
+      userSelect: 'none',
+    };
+
+    return (
+      <div className="device-navigation-bar" style={containerStyle}>
+        <div
+          style={{
+            display: 'flex',
+            gap: 64,
+          }}
+        >
+          <div
+            style={{ ...buttonStyle, fontSize: 24 }}
+            onClick={handleBackButton}
+            role="button"
+            aria-label="Back"
+          >
+            ◁
+          </div>
+          <div
+            style={{ ...buttonStyle, fontSize: 32, top: -3 }}
+            onClick={handleHomeButton}
+            role="button"
+            aria-label="Home"
+          >
+            ⌂
+          </div>
+          <div
+            style={{
+              ...buttonStyle,
+              fontSize: 20,
+              fontWeight: 1000,
+            }}
+            onClick={handleHomeButton}
+            role="button"
+            aria-label="Recent Apps"
+          >
+            ▢
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (navigationBarType === 'gesture') {
+    return (
+      <div className="device-navigation-bar" style={containerStyle}>
+        <div
+          style={{
+            ...basePillStyle,
+            width: 90,
+            backgroundColor: barColor,
+          }}
+        />
+      </div>
+    );
+  }
+
+  return null;
+}
+
+export default DeviceNavigationBar;

package/src/components/DeviceStatusBar.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+import { Device } from '../types/Device';
+
+type DeviceStatusBarProps = {
+  height: number;
+  backgroundColor: string;
+  platform?: Device['platform'];
+  isDark: boolean;
+};
+
+const formatTime = () =>
+  new Date().toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+const iosIndicators = ['5G', 'Wi-Fi', '92%'];
+const androidIndicators = ['Alarm', 'Wi-Fi', '84%'];
+
+export function DeviceStatusBar({
+  height,
+  backgroundColor,
+  platform = 'android',
+  isDark,
+}: DeviceStatusBarProps) {
+  const [time, setTime] = useState(() => formatTime());
+
+  useEffect(() => {
+    const intervalId = setInterval(() => setTime(formatTime()), 60_000);
+    return () => clearInterval(intervalId);
+  }, []);
+
+  const textColor = isDark ? 'rgb(255, 255, 255)' : 'rgb(0, 0, 0)';
+  const iconStyle: React.CSSProperties = {
+    fontSize: 10,
+    letterSpacing: 0.5,
+    textTransform: 'uppercase',
+  };
+
+  const containerStyle: React.CSSProperties = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height,
+    backgroundColor,
+    color: textColor,
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: 12,
+    fontWeight: 500,
+    padding: '0 12px',
+  };
+
+  if (platform === 'ios') {
+    return (
+      <div className="device-status-bar" style={containerStyle}>
+        <span style={{ fontWeight: 600 }}>{time}</span>
+        <div style={{ flex: 1 }} />
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          {iosIndicators.map((indicator) => (
+            <span key={indicator} style={iconStyle}>
+              {indicator}
+            </span>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="device-status-bar" style={containerStyle}>
+      <span style={{ flex: 1 }}>{time}</span>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        {androidIndicators.map((indicator) => (
+          <span key={indicator} style={iconStyle}>
+            {indicator}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default DeviceStatusBar;