@namiml/expo-sdk 3.4.0-dev.202605060437

package/src/components/elements/NamiText.tsx

@@ -0,0 +1,311 @@
+import React, { useCallback, useMemo } from 'react';
+import { Text, View, StyleSheet, Linking } from 'react-native';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { applyStyles, textStyles, childSpacingStyle, parseSize, parseColor } from '../../utils/styles';
+import { resolveFontDescriptor } from '../../utils/fonts';
+import { buildSmartTextReplacements, interpolateSmartText } from '../../utils/smartText';
+import { formatDate, isValidISODate } from '@namiml/sdk-core';
+import { useInheritedFocusedStyle } from '../../context/FocusContext';
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  isSymbol?: boolean;
+  parentDirection?: string;
+}
+
+const SYMBOL_FALLBACK_MAP: Record<string, string> = {
+  check: '\u2713',
+  close: '\u2715',
+  plus: '+',
+  minus: '\u2212',
+  right: '\u203A',
+  left: '\u2039',
+  up: '\u2303',
+  down: '\u2304',
+  dot: '\u2022',
+};
+
+type MarkdownToken =
+  | { type: 'text'; value: string }
+  | { type: 'bold'; value: string }
+  | { type: 'italic'; value: string }
+  | { type: 'link'; value: string; href: string };
+
+function parseEmphasis(input: string): MarkdownToken[] {
+  const tokens: MarkdownToken[] = [];
+  const EMPHASIS_REGEX = /(\*\*([^*]+)\*\*|\*([^*]+)\*)/g;
+  let start = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = EMPHASIS_REGEX.exec(input)) !== null) {
+    if (match.index > start) {
+      tokens.push({ type: 'text', value: input.slice(start, match.index) });
+    }
+    if (match[2] != null) {
+      tokens.push({ type: 'bold', value: match[2] });
+    } else if (match[3] != null) {
+      tokens.push({ type: 'italic', value: match[3] });
+    }
+    start = match.index + match[0].length;
+  }
+
+  if (start < input.length) {
+    tokens.push({ type: 'text', value: input.slice(start) });
+  }
+
+  return tokens;
+}
+
+function parseInlineMarkdown(input: string): MarkdownToken[] {
+  const tokens: MarkdownToken[] = [];
+  const LINK_REGEX = /\[([^\]]+)\]\(([^)\s]+)\)/g;
+  let start = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = LINK_REGEX.exec(input)) !== null) {
+    if (match.index > start) {
+      tokens.push(...parseEmphasis(input.slice(start, match.index)));
+    }
+    tokens.push({ type: 'link', value: match[1], href: match[2] });
+    start = match.index + match[0].length;
+  }
+
+  if (start < input.length) {
+    tokens.push(...parseEmphasis(input.slice(start)));
+  }
+
+  return tokens;
+}
+
+export const NamiText: React.FC<Props> = ({ component, scaleFactor, isSymbol, parentDirection }) => {
+  const ctx = usePaywallContext();
+  const isFocused = useInheritedFocusedStyle();
+  const smartTextSku = component?.smartTextSku ?? component?.sku;
+  const replacements = useMemo(
+    () => buildSmartTextReplacements(ctx.state, ctx.flow, smartTextSku),
+    [ctx.state, ctx.flow, smartTextSku]
+  );
+
+  const resolvedText = useMemo(() => {
+    const raw = component.text ?? component.title ?? '';
+    const resolved = interpolateSmartText(raw, replacements);
+    const str = resolved == null ? '' : String(resolved);
+    if (component.dateTimeFormat && isValidISODate(str)) {
+      return formatDate(str, component.dateTimeFormat);
+    }
+    return str;
+  }, [component.text, component.title, replacements, component.dateTimeFormat]);
+
+  const resolvedListItems = useMemo(() => {
+    if (Array.isArray(component.texts)) {
+      return component.texts
+        .map((value: any) => {
+          const resolved = interpolateSmartText(value, replacements);
+          return resolved == null ? '' : String(resolved);
+        })
+        .filter((value: string) => value.trim().length > 0);
+    }
+    return resolvedText
+      .split('\n')
+      .map((value: string) => value.trim())
+      .filter(Boolean);
+  }, [component.texts, resolvedText, replacements]);
+  const inlineTokens = useMemo(
+    () => parseInlineMarkdown(resolvedText),
+    [resolvedText],
+  );
+  const hasInlineFormatting = useMemo(
+    () => hasRichInlineContent(inlineTokens, resolvedText),
+    [inlineTokens, resolvedText],
+  );
+  const resolvedListItemTokens = useMemo(
+    () => resolvedListItems.map((item: string) => parseInlineMarkdown(item)),
+    [resolvedListItems],
+  );
+
+  if (!resolvedText && !isSymbol && component.component !== 'text-list') return null;
+
+  const containerStyle = useMemo(
+    () => applyStyles(component, scaleFactor, isFocused, parentDirection),
+    [component, scaleFactor, isFocused, parentDirection],
+  );
+  const txtStyle = useMemo(
+    () => textStyles(component, scaleFactor, isFocused),
+    [component, scaleFactor, isFocused]
+  );
+  const linkColor = parseColor(component.linkColor) ?? '#0000EE';
+  const linkStyle = useMemo(() => [styles.link, { color: linkColor }], [linkColor]);
+  const emphasisBaseStyle = useMemo(
+    () => ({
+      ...(txtStyle.color ? { color: txtStyle.color } : {}),
+      ...(txtStyle.fontSize ? { fontSize: txtStyle.fontSize } : {}),
+      ...(txtStyle.lineHeight ? { lineHeight: txtStyle.lineHeight } : {}),
+    }),
+    [txtStyle.color, txtStyle.fontSize, txtStyle.lineHeight],
+  );
+  const baseFontName = component.fontName ?? component.fontFamily;
+  const boldHostedFont = useMemo(
+    () => resolveFontDescriptor(baseFontName, { bold: true, italic: false }),
+    [baseFontName],
+  );
+  const italicHostedFont = useMemo(
+    () => resolveFontDescriptor(baseFontName, { bold: false, italic: true }),
+    [baseFontName],
+  );
+  const boldStyle = useMemo(
+    () => [
+      emphasisBaseStyle,
+      boldHostedFont.family
+        ? {
+            fontFamily: boldHostedFont.family,
+            fontWeight: 'normal' as const,
+            fontStyle: 'normal' as const,
+          }
+        : styles.bold,
+    ],
+    [boldHostedFont.family, emphasisBaseStyle],
+  );
+  const italicStyle = useMemo(
+    () => [
+      emphasisBaseStyle,
+      italicHostedFont.family
+        ? {
+            fontFamily: italicHostedFont.family,
+            fontWeight: 'normal' as const,
+            fontStyle: 'normal' as const,
+            ...(italicHostedFont.variant !== 'italic' && italicHostedFont.variant !== 'boldItalic'
+              ? { transform: [{ skewX: '-10deg' as const }] }
+              : {}),
+          }
+        : styles.italic,
+    ],
+    [italicHostedFont.family, italicHostedFont.variant, emphasisBaseStyle],
+  );
+
+  const openHref = useCallback((href: string) => {
+    Linking.canOpenURL(href).then((canOpen) => {
+      if (canOpen) {
+        Linking.openURL(href);
+      }
+    });
+  }, []);
+
+  if (component.component === 'text-list') {
+    const bullet = component.bulletComponent;
+    const bulletText = bullet?.text
+      ?? SYMBOL_FALLBACK_MAP[(bullet?.name ?? '').toLowerCase()]
+      ?? '\u2022';
+    const inlineGap = parseSize(component.spacing, scaleFactor) ?? 0;
+
+    return (
+      <View style={containerStyle}>
+        {resolvedListItems.map((item: string, i: number) => (
+          <View key={i} style={childSpacingStyle(i, { spacing: component.spacing, direction: 'vertical' }, scaleFactor)}>
+            <View style={styles.listRow}>
+              <Text style={[txtStyle, { marginRight: inlineGap }]} allowFontScaling={false}>{bulletText}</Text>
+              {hasRichInlineContent(resolvedListItemTokens[i], item) ? (
+                <Text style={[txtStyle, styles.listText]} allowFontScaling={false}>
+                  {resolvedListItemTokens[i].map((token: MarkdownToken, index: number) => {
+                    if (token.type === 'link') {
+                      return (
+                        <Text
+                          key={`link-${i}-${index}`}
+                          style={linkStyle}
+                          onPress={() => openHref(token.href)}
+                          suppressHighlighting
+                        >
+                          {token.value}
+                        </Text>
+                      );
+                    }
+                    if (token.type === 'bold') {
+                      return <Text key={`bold-${i}-${index}`} style={boldStyle}>{token.value}</Text>;
+                    }
+                    if (token.type === 'italic') {
+                      return <Text key={`italic-${i}-${index}`} style={italicStyle}>{token.value}</Text>;
+                    }
+                    return <Text key={`text-${i}-${index}`}>{token.value}</Text>;
+                  })}
+                </Text>
+              ) : (
+                <Text style={[txtStyle, styles.listText]} allowFontScaling={false}>
+                  {item}
+                </Text>
+              )}
+            </View>
+          </View>
+        ))}
+      </View>
+    );
+  }
+
+  const fitContent = component.width === 'fitContent';
+  const numberOfLines = component.maxLines ?? (fitContent ? 1 : undefined);
+  const ellipsizeMode = fitContent ? 'clip' : undefined;
+
+  return (
+    <View style={containerStyle}>
+      <Text
+        style={txtStyle}
+        numberOfLines={numberOfLines}
+        ellipsizeMode={ellipsizeMode}
+        allowFontScaling={false}
+      >
+        {hasInlineFormatting ? (
+          inlineTokens.map((token: MarkdownToken, index: number) => {
+            if (token.type === 'link') {
+              return (
+                <Text
+                  key={`link-${index}`}
+                  style={linkStyle}
+                  onPress={() => openHref(token.href)}
+                  suppressHighlighting
+                >
+                  {token.value}
+                </Text>
+              );
+            }
+            if (token.type === 'bold') {
+              return <Text key={`bold-${index}`} style={boldStyle}>{token.value}</Text>;
+            }
+            if (token.type === 'italic') {
+              return <Text key={`italic-${index}`} style={italicStyle}>{token.value}</Text>;
+            }
+            return <Text key={`text-${index}`}>{token.value}</Text>;
+          })
+        ) : (
+          resolvedText
+        )}
+      </Text>
+    </View>
+  );
+};
+
+function hasRichInlineContent(tokens: MarkdownToken[], originalText: string): boolean {
+  return !(
+    tokens.length === 1
+    && tokens[0]?.type === 'text'
+    && tokens[0]?.value === originalText
+  );
+}
+
+const styles = StyleSheet.create({
+  listRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  listText: {
+    flexShrink: 1,
+    flexWrap: 'wrap',
+  },
+  link: {
+    textDecorationLine: 'underline',
+  },
+  bold: {
+    fontWeight: '700',
+  },
+  italic: {
+    fontStyle: 'italic',
+  },
+});

package/src/components/elements/NamiToggleButton.tsx

@@ -0,0 +1,102 @@
+import React, { useCallback, useMemo, useRef } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { applyStyles, parseColor, parseSize, childSpacingStyle, shadowStyles, focusedStyleOverrides } 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;
+}
+
+export const NamiToggleButton: React.FC<Props> = ({ component, scaleFactor, onClose, parentDirection }) => {
+  const ctx = usePaywallContext();
+  const focusEnabled = useFocusEnabled();
+  const touchableRef = useRef<any>(null);
+  const { isFocused, onFocus, onBlur } = useFocusableState(
+    Boolean(component.focused),
+    focusEnabled,
+  );
+  useTVPreferredFocus(
+    touchableRef,
+    focusEnabled && Boolean(component.focused),
+  );
+  useRegisterPreferredFocus(
+    touchableRef.current,
+    focusEnabled && Boolean(component.focused),
+  );
+  const formId = component.formId ?? component.id ?? '';
+  const mode = component.mode ?? 'toggle';
+  const currentValue = ctx.state.formStates?.[formId];
+  const isActive = mode === 'radio'
+    ? currentValue === component.value
+    : !!currentValue;
+
+  const onPress = useCallback(() => {
+    const functionName = component.onTap?.function;
+    if (!functionName) return;
+
+    handleAction({
+      onTap: {
+        function: functionName,
+        parameters: {
+          ...(component.onTap?.parameters ?? {}),
+          formId,
+          value: mode === 'radio' ? component.value : undefined,
+        },
+      },
+      ctx,
+      onClose,
+    });
+  }, [formId, mode, component.value, ctx, component.onTap, onClose]);
+
+  const containerStyle = useMemo(() => {
+    const base = applyStyles(component, scaleFactor, false, parentDirection);
+    const fillColor = isActive
+      ? (component.activeFillColor ?? component.activeFillColorFallback ?? component.selectedFillColor ?? component.focusedFillColor)
+      : (component.inactiveFillColor ?? component.inactiveFillColorFallback ?? component.fillColor);
+    const borderColor = isActive ? component.activeBorderColor : component.inactiveBorderColor;
+    const borderWidth = isActive ? component.activeBorderWidth : component.inactiveBorderWidth;
+    const dropShadow = isActive ? component.activeDropShadow : component.inactiveDropShadow;
+
+    const bg = parseColor(fillColor);
+    if (bg) base.backgroundColor = bg;
+    const bc = parseColor(borderColor);
+    if (bc) base.borderColor = bc;
+    const bw = parseSize(borderWidth, scaleFactor);
+    if (bw != null) base.borderWidth = bw;
+    if (dropShadow) {
+      Object.assign(base, shadowStyles({ ...component, dropShadow } as any));
+    }
+    if (isFocused) {
+      Object.assign(base, focusedStyleOverrides(component, scaleFactor));
+    }
+    return base;
+  }, [component, scaleFactor, isActive, isFocused, parentDirection]);
+
+  return (
+    <TouchableOpacity
+      ref={touchableRef}
+      onPress={onPress}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      hasTVPreferredFocus={focusEnabled && Boolean(component.focused)}
+      activeOpacity={0.7}
+      style={containerStyle}
+    >
+      <FocusedStyleProvider focused={isFocused || isActive}>
+        {component.components?.map((child: TComponent, i: number) => (
+          <View key={child.id ?? i} style={childSpacingStyle(i, { spacing: component.spacing, direction: component.direction }, scaleFactor)}>
+            <TemplateRenderer component={child} scaleFactor={scaleFactor} onClose={onClose} parentDirection={parentDirection} />
+          </View>
+        ))}
+      </FocusedStyleProvider>
+    </TouchableOpacity>
+  );
+};

package/src/components/elements/NamiToggleSwitch.tsx

@@ -0,0 +1,64 @@
+import React, { useCallback, useEffect } from 'react';
+import { Switch, View } from 'react-native';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { applyStyles, parseColor } from '../../utils/styles';
+import { handleAction } from '../../utils/actionHandler';
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  onClose?: () => void;
+  parentDirection?: string;
+}
+
+export const NamiToggleSwitch: React.FC<Props> = ({ component, scaleFactor, onClose, parentDirection }) => {
+  const ctx = usePaywallContext();
+  const formId = component.formId ?? component.id ?? '';
+  const isOn = !!ctx.state.formStates?.[formId];
+
+  useEffect(() => {
+    if (!formId) return;
+    if (ctx.state.formStates?.[formId] === undefined) {
+      ctx.setFormState(formId, !!component.checked);
+    }
+  }, [formId, ctx, component.checked]);
+
+  const onValueChange = useCallback((val: boolean) => {
+    ctx.setFormState(formId, val);
+    if (component.onTap) {
+      handleAction({
+        onTap: {
+          function: component.onTap.function,
+          parameters: {
+            ...(component.onTap.parameters ?? {}),
+            formId,
+            value: val ? 'true' : '',
+          },
+        },
+        ctx,
+        onClose,
+      });
+    }
+  }, [formId, ctx, component.onTap, onClose]);
+
+  const containerStyle = applyStyles(component, scaleFactor, false, parentDirection);
+  const trackColor = {
+    false: parseColor(component.inactivePlateFillColor ?? component.offTrackColor) ?? '#ccc',
+    true: parseColor(component.activePlateFillColor ?? component.onTrackColor ?? component.fillColor) ?? '#4CD964',
+  };
+  const thumbColor = parseColor(isOn
+    ? (component.activeHandleFillColor ?? component.thumbColor)
+    : (component.inactiveHandleFillColor ?? component.thumbColor)
+  ) ?? '#fff';
+
+  return (
+    <View style={containerStyle}>
+      <Switch
+        value={isOn}
+        onValueChange={onValueChange}
+        trackColor={trackColor}
+        thumbColor={thumbColor}
+      />
+    </View>
+  );
+};