@namiml/expo-sdk 3.4.0-dev.202605060437

package/src/components/elements/NamiProgressBar.tsx

@@ -0,0 +1,90 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import { View, StyleSheet, Animated } from 'react-native';
+import { applyStyles, parseColor, parseSize } from '../../utils/styles';
+
+const DEFAULT_INDETERMINATE_DURATION = 2;
+const DEFAULT_INDETERMINATE_WIDTH_PCT = 30;
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  parentDirection?: string;
+}
+
+export const NamiProgressBar: React.FC<Props> = ({ component, scaleFactor, parentDirection }) => {
+  const containerStyle = applyStyles(component, scaleFactor, false, parentDirection);
+  const mode = component.mode ?? 'determinate';
+  const innerPadding = parseSize(component.innerPadding ?? 0, scaleFactor) ?? 0;
+  const trackColor = parseColor(component.inactiveFillColor ?? component.inactiveFillColorFallback ?? component.trackColor) ?? '#E0E0E0';
+  const fillColor = parseColor(component.activeFillColor ?? component.activeFillColorFallback ?? component.progressColor ?? component.fillColor) ?? '#007AFF';
+  const barHeight = parseSize(component.height ?? component.barHeight ?? 4, scaleFactor) ?? 4;
+  const inactiveRadius = parseSize(component.inactiveBorderRadius ?? component.borderRadius, scaleFactor) ?? barHeight / 2;
+  const activeRadius = parseSize(component.activeBorderRadius ?? component.borderRadius, scaleFactor) ?? barHeight / 2;
+
+  const [trackWidth, setTrackWidth] = useState(0);
+  const translateX = useState(new Animated.Value(0))[0];
+
+  const progressPct = useMemo(() => {
+    const raw = component.percentage ?? component.progress ?? 0;
+    if (typeof raw === 'number') {
+      if (!Number.isInteger(raw) && raw <= 1) return Math.max(0, Math.min(100, raw * 100));
+      return Math.max(0, Math.min(100, raw));
+    }
+    return 0;
+  }, [component.percentage, component.progress]);
+
+  useEffect(() => {
+    if (mode !== 'indeterminate' || trackWidth <= 0) return;
+    const activeWidth = component.activeWidth ?? `${DEFAULT_INDETERMINATE_WIDTH_PCT}%`;
+    const isPct = typeof activeWidth === 'string' && activeWidth.trim().endsWith('%');
+    const barWidth = isPct
+      ? trackWidth * (parseFloat(activeWidth) / 100)
+      : (typeof activeWidth === 'number' ? activeWidth : parseFloat(activeWidth));
+    const duration = (component.duration ?? DEFAULT_INDETERMINATE_DURATION) * 1000;
+    translateX.setValue(-barWidth);
+    const anim = Animated.loop(
+      Animated.timing(translateX, {
+        toValue: trackWidth,
+        duration,
+        useNativeDriver: true,
+      })
+    );
+    anim.start();
+    return () => anim.stop();
+  }, [mode, trackWidth, component.activeWidth, component.duration, translateX]);
+
+  return (
+    <View style={containerStyle}>
+      <View
+        style={[styles.track, { backgroundColor: trackColor, height: barHeight, borderRadius: inactiveRadius, padding: innerPadding }]}
+        onLayout={(e) => setTrackWidth(e.nativeEvent.layout.width)}
+      >
+        {mode === 'indeterminate' ? (
+          <Animated.View
+            style={[
+              styles.fill,
+              {
+                backgroundColor: fillColor,
+                borderRadius: activeRadius,
+                width: component.activeWidth ?? `${DEFAULT_INDETERMINATE_WIDTH_PCT}%`,
+                transform: [{ translateX }],
+              },
+            ]}
+          />
+        ) : (
+          <View
+            style={[
+              styles.fill,
+              { backgroundColor: fillColor, width: `${progressPct}%`, borderRadius: activeRadius },
+            ]}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  track: { width: '100%', overflow: 'hidden' },
+  fill: { height: '100%' },
+});

package/src/components/elements/NamiProgressIndicator.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import { applyStyles, parseColor, parseSize } from '../../utils/styles';
+import { NamiFlowManager } from '@namiml/sdk-core';
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  parentDirection?: string;
+}
+
+export const NamiProgressIndicator: React.FC<Props> = ({ component, scaleFactor, parentDirection }) => {
+  const containerStyle = applyStyles(component, scaleFactor, false, parentDirection);
+  const innerPadding = parseSize(component.innerPadding ?? 0, scaleFactor) ?? 0;
+  const trackColor = parseColor(component.inactiveFillColor ?? component.inactiveFillColorFallback) ?? '#E0E0E0';
+  const fillColor = parseColor(component.activeFillColor ?? component.activeFillColorFallback ?? component.fillColor) ?? '#007AFF';
+  const barHeight = parseSize(component.height ?? component.indicatorSize ?? 4, scaleFactor) ?? 4;
+  const inactiveRadius = parseSize(component.inactiveBorderRadius ?? component.borderRadius, scaleFactor) ?? barHeight / 2;
+  const activeRadius = parseSize(component.activeBorderRadius ?? component.borderRadius, scaleFactor) ?? barHeight / 2;
+
+  const [percent, setPercent] = useState<number>(0);
+
+  useEffect(() => {
+    let target = component.percentage ?? 0;
+    if (target === 'auto') {
+      target = NamiFlowManager.getCurrentFlowProgress(component.id) * 100;
+    }
+    const value = typeof target === 'number'
+      ? (target <= 1 && !Number.isInteger(target) ? target * 100 : target)
+      : 0;
+    setPercent(Math.min(100, Math.max(0, value)));
+  }, [component, component.percentage]);
+
+  return (
+    <View style={containerStyle}>
+      <View style={{ backgroundColor: trackColor, height: barHeight, borderRadius: inactiveRadius, padding: innerPadding }}>
+        <View style={{ backgroundColor: fillColor, height: '100%', width: `${percent}%`, borderRadius: activeRadius }} />
+      </View>
+    </View>
+  );
+};

package/src/components/elements/NamiQRCode.tsx

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { LIQUID_VARIABLE_REGEX } from '@namiml/sdk-core';
+import QRCode from 'react-native-qrcode-svg';
+
+import { applyStyles, parseColor, parseSize } from '../../utils/styles';
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  parentDirection?: string;
+}
+
+export const NamiQRCode: React.FC<Props> = ({ component, scaleFactor, parentDirection }) => {
+  const containerStyle = useMemo(
+    () => applyStyles(component, scaleFactor, false, parentDirection),
+    [component, scaleFactor, parentDirection]
+  );
+
+  const borderWidth = parseSize(component.borderWidth ?? 0, scaleFactor) ?? 0;
+  const width = parseSize(component.width, scaleFactor) ?? 360;
+  const size = Math.max(1, Math.floor(width - borderWidth * 2));
+  const outerSize = Math.max(1, Math.floor(width));
+  const value = component.url ?? '';
+  const hasResolvedValue = typeof value === 'string'
+    ? value.trim().length > 0 && !value.match(LIQUID_VARIABLE_REGEX)
+    : Boolean(value);
+  const color = parseColor(component.color) ?? '#000000';
+  const backgroundColor = parseColor(component.fillColor ?? component.borderColor) ?? 'transparent';
+
+  if (!hasResolvedValue) {
+    return (
+      <View style={[containerStyle, styles.fallback, { width: outerSize, height: outerSize, backgroundColor }]} />
+    );
+  }
+
+  return (
+    <View style={[containerStyle, { backgroundColor, width: outerSize, height: outerSize }]}>
+      <QRCode value={String(value)} size={size} color={color} backgroundColor={backgroundColor} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  fallback: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#000',
+  },
+});

package/src/components/elements/NamiRadioButton.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { applyStyles, parseColor, parseSize, shadowStyles } from '../../utils/styles';
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  parentDirection?: string;
+}
+
+export const NamiRadioButton: React.FC<Props> = ({ component, scaleFactor, parentDirection }) => {
+  const ctx = usePaywallContext();
+  const skuId = component.sku?.id ?? '';
+  const selected = Object.values(ctx.state.selectedProducts ?? {}).includes(skuId);
+
+  const size = parseSize(component.radioSize ?? component.width ?? 24, scaleFactor) ?? 24;
+  const activeFill = parseColor(component.activeFillColor ?? component.fillColor) ?? '#007AFF';
+  const inactiveFill = parseColor(component.inactiveFillColor) ?? 'transparent';
+  const activeBorder = parseColor(component.activeBorderColor) ?? activeFill;
+  const inactiveBorder = parseColor(component.inactiveBorderColor ?? component.borderColor) ?? '#ccc';
+  const activeBorderWidth = parseSize(component.activeBorderWidth ?? component.borderWidth ?? 2, scaleFactor) ?? 2;
+  const inactiveBorderWidth = parseSize(component.inactiveBorderWidth ?? component.borderWidth ?? 2, scaleFactor) ?? 2;
+  const innerPadding = parseSize(component.innerPadding ?? 0, scaleFactor) ?? 0;
+
+  const containerStyle = applyStyles(component, scaleFactor, false, parentDirection);
+  const shadow = selected && component.dropShadow ? shadowStyles({ ...component, dropShadow: component.dropShadow } as any) : {};
+
+  return (
+    <View style={containerStyle}>
+      <View
+        style={[
+          styles.outer,
+          {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            borderColor: selected ? activeBorder : inactiveBorder,
+            borderWidth: selected ? activeBorderWidth : inactiveBorderWidth,
+            padding: innerPadding,
+          },
+          shadow,
+        ]}
+      >
+        <View
+          style={[
+            styles.inner,
+            {
+              backgroundColor: selected ? activeFill : inactiveFill,
+              borderRadius: (size - innerPadding * 2) / 2,
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  outer: { borderWidth: 2, justifyContent: 'center', alignItems: 'center' },
+  inner: {},
+});

package/src/components/elements/NamiSegmentPicker.tsx

@@ -0,0 +1,67 @@
+import React, { useMemo } from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
+import { applyStyles, parseSize } from '../../utils/styles';
+import { NamiSegmentPickerItem } from './NamiSegmentPickerItem';
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  onClose?: () => void;
+  parentDirection?: string;
+}
+
+export const NamiSegmentPicker: React.FC<Props> = ({
+  component,
+  scaleFactor,
+  onClose,
+  parentDirection,
+}) => {
+  const containerStyle = useMemo(
+    () => applyStyles(component, scaleFactor, false, parentDirection),
+    [component, scaleFactor, parentDirection]
+  );
+
+  const direction = component.direction ?? 'horizontal';
+  const parentFormId = component.formId ?? component.id ?? '';
+  const segments = component.components ?? [];
+  const spacing = parseSize(component.spacing, scaleFactor) ?? 0;
+
+  return (
+    <View style={containerStyle}>
+      <ScrollView
+        horizontal={direction !== 'vertical'}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={[
+          styles.scrollContent,
+          direction === 'vertical' ? styles.vertical : styles.horizontal,
+        ]}
+      >
+        {segments.map((segment: any, i: number) => (
+          <View
+            key={segment.id ?? segment.value ?? i}
+            style={i === 0 ? null : { marginLeft: direction === 'horizontal' ? spacing : 0, marginTop: direction === 'vertical' ? spacing : 0 }}
+          >
+            <NamiSegmentPickerItem
+              component={segment}
+              scaleFactor={scaleFactor}
+              onClose={onClose}
+              parentDirection={direction}
+              parentFormId={parentFormId}
+              parentOnTap={component.onTap}
+            />
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollContent: {
+    alignItems: 'stretch',
+    flexGrow: 1,
+  },
+  horizontal: { flexDirection: 'row' },
+  vertical: { flexDirection: 'column' },
+});

package/src/components/elements/NamiSegmentPickerItem.tsx

@@ -0,0 +1,184 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useFirstFocusReadyContext, usePaywallContext } from '../../context/PaywallContext';
+import {
+  applyStyles,
+  childSpacingStyle,
+  extractPrefixedStyles,
+  parseColor,
+  parseSize,
+  shadowStyles,
+  textStyles,
+} from '../../utils/styles';
+import { handleAction } from '../../utils/actionHandler';
+import { TemplateRenderer } from '../TemplateRenderer';
+import type { TComponent } from '@namiml/sdk-core';
+import { FocusedStyleProvider, useFocusableState, useFocusEnabled, useRegisterPreferredFocus } from '../../context/FocusContext';
+import { useTVPreferredFocus } from '../../utils/tvFocus';
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  onClose?: () => void;
+  parentDirection?: string;
+  parentFormId?: string;
+  parentOnTap?: { function: string; parameters?: Record<string, any> };
+}
+
+export const NamiSegmentPickerItem: React.FC<Props> = ({
+  component,
+  scaleFactor,
+  onClose,
+  parentDirection,
+  parentFormId,
+  parentOnTap,
+}) => {
+  const ctx = usePaywallContext();
+  const focusReadyCtx = useFirstFocusReadyContext();
+  const focusEnabled = useFocusEnabled();
+  const pressableRef = useRef<any>(null);
+  const { isFocused, onFocus, onBlur } = useFocusableState(
+    Boolean(component.focused || component.checked),
+    focusEnabled,
+  );
+  useTVPreferredFocus(
+    pressableRef,
+    focusEnabled && Boolean(component.focused || component.checked),
+  );
+  useRegisterPreferredFocus(
+    pressableRef.current,
+    focusEnabled && Boolean(component.focused || component.checked),
+  );
+
+  const selectedFormValue = parentFormId ? ctx.state.formStates?.[parentFormId] : '';
+  const currentGroupId = ctx.state.currentGroupId ?? '';
+  const isActive = component.formId
+    ? (selectedFormValue ? selectedFormValue === component.formId : !!component.checked)
+    : (currentGroupId ? component.id === currentGroupId : !!component.checked);
+
+  useEffect(() => {
+    if (!component.checked) return;
+    if (component.formId && parentFormId) {
+      if (!selectedFormValue) {
+        ctx.setFormState(parentFormId, component.formId);
+      }
+      return;
+    }
+    if (!ctx.state.currentGroupId && component.id) {
+      ctx.setCurrentGroupData(component.id, component.text ?? '');
+    }
+  }, [
+    component.checked,
+    component.formId,
+    component.id,
+    component.text,
+    parentFormId,
+    selectedFormValue,
+    ctx,
+    ctx.state.currentGroupId,
+  ]);
+
+  const activeStyles = extractPrefixedStyles(component, 'active');
+  const inactiveStyles = extractPrefixedStyles(component, 'inactive');
+  const merged = { ...component, ...(isActive ? activeStyles : inactiveStyles) };
+
+  const itemStyle = useMemo(() => {
+    const base = applyStyles(merged, scaleFactor, isFocused, parentDirection);
+    const fill = parseColor(merged.fillColor ?? merged.selectedFillColor);
+    if (fill) base.backgroundColor = fill;
+    if (merged.borderRadius != null) {
+      base.borderRadius = parseSize(merged.borderRadius, scaleFactor);
+    }
+    if (merged.dropShadow) {
+      Object.assign(base, shadowStyles({ ...merged, dropShadow: merged.dropShadow } as any));
+    }
+    return base;
+  }, [merged, scaleFactor, parentDirection, isFocused]);
+
+  const onPress = () => {
+    if (component.formId && parentFormId) {
+      ctx.setFormState(parentFormId, component.formId);
+    } else if (component.id) {
+      ctx.setCurrentGroupData(component.id, component.text ?? '');
+    }
+    if (component.onTap) {
+      handleAction({
+        onTap: component.onTap,
+        ctx,
+        onClose,
+        componentChange: {
+          id: component.id,
+          name: component.title ?? component.text,
+        },
+      });
+    }
+    if (parentOnTap) {
+      handleAction({
+        onTap: parentOnTap,
+        ctx,
+        onClose,
+        componentChange: {
+          id: component.id,
+          name: component.title ?? component.text,
+        },
+      });
+    }
+  };
+
+  const handleFocus = () => {
+    onFocus();
+    focusReadyCtx.notifyFirstFocusReady(
+      ctx.state.selectedPaywall?.id ?? 'unknown',
+      ctx.state.currentPage ?? 'unknown',
+      ctx.state.formFactor,
+    );
+  };
+
+  const direction = component.direction ?? 'horizontal';
+
+  return (
+    <Pressable
+      ref={pressableRef}
+      onPress={onPress}
+      onFocus={handleFocus}
+      onBlur={onBlur}
+      hasTVPreferredFocus={focusEnabled && Boolean(component.focused || component.checked)}
+      style={({ pressed }) => [styles.item, itemStyle, pressed ? styles.pressed : null]}
+    >
+      <FocusedStyleProvider focused={isFocused || isActive}>
+        {component.components?.length ? (
+          component.components.map((child: TComponent, i: number) => (
+            <View
+              key={child.id ?? i}
+              style={i === 0 ? null : childSpacingStyle(i, { spacing: component.spacing, direction }, scaleFactor)}
+            >
+              <TemplateRenderer
+                component={child}
+                scaleFactor={scaleFactor}
+                onClose={onClose}
+                parentDirection={direction}
+              />
+            </View>
+          ))
+        ) : (
+          <Text
+            style={[
+              textStyles(merged, scaleFactor, isFocused || isActive),
+              isActive && {
+                color: parseColor(activeStyles.fontColor ?? activeStyles.textColor ?? component.selectedFontColor) ?? '#fff',
+              },
+            ]}
+            allowFontScaling={false}
+          >
+            {component.text ?? component.title ?? ''}
+          </Text>
+        )}
+      </FocusedStyleProvider>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  item: { minWidth: 0 },
+  pressed: { opacity: 0.7 },
+});

package/src/components/elements/NamiSpacer.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { View } from 'react-native';
+import { parseSize, applyStyles } from '../../utils/styles';
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  parentDirection?: string;
+}
+
+export const NamiSpacer: React.FC<Props> = ({ component, scaleFactor, parentDirection }) => {
+  const hasExplicitSize = component.height || component.fixedHeight || component.width || component.fixedWidth;
+  const height = parseSize(component.height ?? component.fixedHeight ?? component.spacing ?? 8, scaleFactor);
+  const width = parseSize(component.width ?? component.fixedWidth, scaleFactor);
+  const baseStyle = applyStyles(component, scaleFactor, false, parentDirection);
+  const style = {
+    ...baseStyle,
+    height,
+    width,
+    ...(hasExplicitSize ? {} : { flexGrow: 1 }),
+  };
+  return <View style={style} />;
+};

package/src/components/elements/NamiSymbol.tsx

@@ -0,0 +1,104 @@
+import React, { useMemo } from 'react';
+// import { Platform, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
+import { applyStyles, textStyles } from '../../utils/styles';
+import { useInheritedFocusedStyle } from '../../context/FocusContext';
+import { iconPathsByName } from '../../utils/iconMap';
+
+let SvgComponent: React.ComponentType<any> | null = null;
+let SvgPathComponent: React.ComponentType<any> | null = null;
+// if (!Platform.isTV) {
+  try {
+    const reactNativeSvg = require('react-native-svg');
+    SvgComponent = reactNativeSvg.default ?? reactNativeSvg.Svg ?? null;
+    SvgPathComponent = reactNativeSvg.Path ?? null;
+  } catch {
+    SvgComponent = null;
+    SvgPathComponent = null;
+  }
+// }
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  parentDirection?: string;
+}
+
+const SYMBOL_FALLBACK_MAP: Record<string, string> = {
+  check: '\u2713',
+  close: '\u2715',
+  plus: '+',
+  minus: '\u2212',
+  right: '\u203A',
+  left: '\u2039',
+  up: '\u2303',
+  down: '\u2304',
+  info: '\u2139',
+  question: '?',
+  play: '\u25B6',
+  pause: '\u23F8',
+  sound: '\uD83D\uDD0A',
+  volume: '\uD83D\uDD0A',
+  muted: '\uD83D\uDD07',
+  heart: '\u2665',
+  star: '\u2605',
+  like: '\uD83D\uDC4D',
+  unlock: '\uD83D\uDD13',
+  calendar: '\uD83D\uDCC5',
+  cloud: '\u2601',
+  fire: '\uD83D\uDD25',
+  bell: '\uD83D\uDD14',
+  message: '\uD83D\uDCAC',
+  smile: '\u263A',
+  caret: '\u25BE',
+};
+
+function resolveSymbol(name?: string): string {
+  if (!name) return '';
+  const key = name.toLowerCase();
+  const exact = SYMBOL_FALLBACK_MAP[key];
+  if (exact) return exact;
+
+  const match = Object.entries(SYMBOL_FALLBACK_MAP).find(([token]) => key.includes(token));
+  return match?.[1] ?? '';
+}
+
+export const NamiSymbol: React.FC<Props> = ({ component, scaleFactor, parentDirection }) => {
+  const isFocused = useInheritedFocusedStyle();
+  const containerStyle = applyStyles(component, scaleFactor, isFocused, parentDirection);
+  const symbolStyle = textStyles(component, scaleFactor, isFocused);
+  const svgPaths = useMemo(() => iconPathsByName(component.name), [component.name]);
+  const value = resolveSymbol(component.name) || (component.text ?? '');
+  const iconSize = typeof symbolStyle.fontSize === 'number' ? symbolStyle.fontSize : 16 * scaleFactor;
+  const iconColor = typeof symbolStyle.color === 'string' ? symbolStyle.color : '#ffffff';
+  const iconMarginTop = typeof symbolStyle.lineHeight === 'number'
+    ? symbolStyle.lineHeight / 10
+    : iconSize * 0.12;
+  const canRenderSvg = Boolean(svgPaths && SvgComponent && SvgPathComponent);
+  const resolvedSvgPaths = svgPaths ?? [];
+
+  if (!svgPaths && !value) return null;
+
+  return (
+    <View style={containerStyle}>
+      {canRenderSvg ? (
+        <View style={{ marginTop: iconMarginTop }}>
+          {(() => {
+            const SafeSvgComponent = SvgComponent as React.ComponentType<any>;
+            const SafeSvgPathComponent = SvgPathComponent as React.ComponentType<any>;
+
+            return (
+              <SafeSvgComponent width={iconSize} height={iconSize} viewBox="64 64 896 896">
+                {resolvedSvgPaths.map((d, index) => (
+                  <SafeSvgPathComponent key={`${component.name ?? 'icon'}-${index}`} d={d} fill={iconColor} />
+                ))}
+              </SafeSvgComponent>
+            );
+          })()}
+        </View>
+      ) : (
+        <Text style={symbolStyle} allowFontScaling={false}>{value}</Text>
+      )}
+    </View>
+  );
+};