@proulr/sdui-components 0.1.0

package/src/renderer/blocks/SduiDiscoverBlocks.tsx

@@ -0,0 +1,470 @@
+import React, { useMemo, useState } from 'react';
+import {
+  FlatList,
+  Image,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import type { SduiBlock } from '@proulr/sdui-contract';
+import { TextField as UiTextField } from '../ui/TextField';
+import { colors, fonts, gradients, m3Colors, m3Elevation, m3Shape, spacing } from '../theme/proulr-theme';
+import { resolveDataRef, resolveDataRefString } from '../lib/resolve-data-ref';
+import { useSduiHybridRenderer } from '../sdui-hybrid-renderer-context';
+import {
+  formatDistanceLabel,
+  getPresenceStatus,
+  profileAgeFromBirthDate,
+  readDiscoverGridItems,
+  type DiscoverGridItemWire,
+  type DiscoverNearbyProfileWire,
+} from '../lib/discover-profile-formatters';
+import { SduiNativeAdBlock } from './SduiNativeAdBlock';
+import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
+
+const GRID_COLUMNS = 3;
+const GRID_GAP = spacing.sm;
+const GRID_INITIAL_VISIBLE = 24;
+const GRID_VISIBLE_BATCH = 24;
+
+function readStringProp(block: SduiBlock, key: string): string | undefined {
+  const value = block.props[key];
+  return typeof value === 'string' ? value : undefined;
+}
+
+function readBooleanProp(block: SduiBlock, key: string): boolean {
+  return block.props[key] === true;
+}
+
+function readStringRecordProp(block: SduiBlock, key: string): Record<string, string> | undefined {
+  const value = block.props[key];
+  if (!value || typeof value !== 'object') return undefined;
+  const entries = Object.entries(value as Record<string, unknown>).filter(
+    (entry): entry is [string, string] => typeof entry[1] === 'string',
+  );
+  return entries.length > 0 ? Object.fromEntries(entries) : undefined;
+}
+
+function readNumberProp(block: SduiBlock, key: string, fallback: number): number {
+  const value = block.props[key];
+  return typeof value === 'number' ? value : fallback;
+}
+
+function readProfile(data: Record<string, unknown>, ref?: string): DiscoverNearbyProfileWire | null {
+  if (!ref) return null;
+  const value = ref.split('.').reduce<unknown>((acc, key) => {
+    if (acc && typeof acc === 'object' && key in (acc as Record<string, unknown>)) {
+      return (acc as Record<string, unknown>)[key];
+    }
+    return undefined;
+  }, data);
+  if (!value || typeof value !== 'object') return null;
+  const profile = value as DiscoverNearbyProfileWire;
+  return typeof profile.id === 'string' ? profile : null;
+}
+
+function PresenceDot({ status }: { status: ReturnType<typeof getPresenceStatus> }) {
+  const dotColor =
+    status === 'online' ? m3Colors.online : status === 'recent' ? m3Colors.secondary : m3Colors.outline;
+  return <View style={[styles.presenceDot, { backgroundColor: dotColor }]} />;
+}
+
+export function SduiDiscoverProfileCardBlock({ block, data, onAction }: SduiBlockRenderProps) {
+  const hybrid = useSduiHybridRenderer();
+  const profileRef = readStringProp(block, 'profile_ref');
+  const actionId = readStringProp(block, 'action_id');
+  const width = readNumberProp(block, 'width', 120);
+  const person = readProfile(data, profileRef);
+
+  if (!person) return null;
+
+  const handlePress = () => {
+    if (!actionId) return;
+    onAction(actionId, { profile_id: person.id });
+  };
+
+  if (hybrid.renderDiscoverProfileCard) {
+    return (
+      <>
+        {hybrid.renderDiscoverProfileCard({
+          person,
+          width,
+          onPress: handlePress,
+        })}
+      </>
+    );
+  }
+
+  const age = profileAgeFromBirthDate(person.birth_date);
+  const photoUri = person.photo_url ?? person.primary_photo_path ?? null;
+  const presence = getPresenceStatus(person.last_seen);
+  const online = presence === 'online';
+  const borderColor = person.has_new_media
+    ? m3Colors.primary
+    : online
+      ? m3Colors.online
+      : m3Colors.outline;
+
+  return (
+    <Pressable
+      style={[styles.profileCard, { width, borderColor }]}
+      onPress={handlePress}
+      disabled={!actionId}
+    >
+      {photoUri ? (
+        <Image source={{ uri: photoUri }} style={StyleSheet.absoluteFill} />
+      ) : (
+        <LinearGradient colors={gradients.brand} style={StyleSheet.absoluteFill} />
+      )}
+      <LinearGradient colors={['transparent', 'rgba(0,0,0,0.85)']} style={styles.profileShade} />
+      {person.has_new_media ? (
+        <View style={styles.newBadge}>
+          <Text style={styles.newBadgeText}>Novo</Text>
+        </View>
+      ) : null}
+      <View style={styles.profileInfo}>
+        <Text style={styles.profileName} numberOfLines={1}>
+          {person.display_name ?? 'Alguém'}
+          {age ? `, ${age}` : ''}
+        </Text>
+        <View style={styles.distRow}>
+          <PresenceDot status={presence} />
+          <Text style={styles.distText}>{formatDistanceLabel(person.distance_m)}</Text>
+        </View>
+      </View>
+    </Pressable>
+  );
+}
+
+function DiscoverGridCell({
+  item,
+  cardWidth,
+  profileActionId,
+  adPlacement,
+  data,
+  onAction,
+}: {
+  item: DiscoverGridItemWire;
+  cardWidth: number;
+  profileActionId?: string;
+  adPlacement: string;
+  data: Record<string, unknown>;
+  onAction: SduiBlockRenderProps['onAction'];
+}) {
+  if (item.kind === 'ad') {
+    return (
+      <SduiNativeAdBlock
+        block={{
+          id: item.id,
+          type: 'native_ad',
+          props: { placement: item.placement ?? adPlacement, width: cardWidth },
+          children: [],
+        }}
+        data={data}
+        onAction={onAction}
+      />
+    );
+  }
+
+  return (
+    <SduiDiscoverProfileCardBlock
+      block={{
+        id: item.id,
+        type: 'discover_profile_card',
+        props: {
+          profile_ref: `__inline_profile_${item.id}`,
+          action_id: profileActionId,
+          width: cardWidth,
+        },
+        children: [],
+      }}
+      data={{ ...data, [`__inline_profile_${item.id}`]: item.person }}
+      onAction={onAction}
+    />
+  );
+}
+
+export function SduiDiscoverGridBlock({ block, data, onAction }: SduiBlockRenderProps) {
+  const itemsRef = readStringProp(block, 'items_ref') ?? 'grid_items';
+  const columns = readNumberProp(block, 'columns', GRID_COLUMNS);
+  const profileActionId = readStringProp(block, 'profile_action_id');
+  const adPlacement = readStringProp(block, 'ad_placement') ?? 'discover_grid';
+  const { width: screenWidth } = useWindowDimensions();
+  const horizontalPadding = spacing.sm * 2;
+  const cardWidth =
+    (screenWidth - horizontalPadding - GRID_GAP * (columns - 1)) / columns;
+
+  const items = useMemo(() => readDiscoverGridItems(data, itemsRef), [data, itemsRef]);
+  const [visibleCount, setVisibleCount] = useState(GRID_INITIAL_VISIBLE);
+  const visibleItems = useMemo(() => items.slice(0, visibleCount), [items, visibleCount]);
+  const hasMore = visibleCount < items.length;
+
+  return (
+    <View>
+      <FlatList
+        data={visibleItems}
+        keyExtractor={(item) => item.id}
+        numColumns={columns}
+        columnWrapperStyle={{ gap: GRID_GAP }}
+        contentContainerStyle={styles.gridContent}
+        scrollEnabled={false}
+        removeClippedSubviews
+        windowSize={5}
+        maxToRenderPerBatch={9}
+        initialNumToRender={GRID_INITIAL_VISIBLE}
+        renderItem={({ item }) => (
+          <DiscoverGridCell
+            item={item}
+            cardWidth={cardWidth}
+            profileActionId={profileActionId}
+            adPlacement={adPlacement}
+            data={data}
+            onAction={onAction}
+          />
+        )}
+      />
+      {hasMore ? (
+        <Pressable
+          style={styles.loadMore}
+          onPress={() => setVisibleCount((count) => Math.min(count + GRID_VISIBLE_BATCH, items.length))}
+        >
+          <Text style={styles.loadMoreText}>Carregar mais perfis</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+export function SduiChipBlock({ block, onAction }: SduiBlockRenderProps) {
+  const label = readStringProp(block, 'label') ?? '';
+  const actionId = readStringProp(block, 'action_id');
+  const actionParams = readStringRecordProp(block, 'action_params');
+  const active = readBooleanProp(block, 'active');
+  const variant = readStringProp(block, 'variant') ?? 'default';
+  const isHeader = variant === 'on_header';
+
+  return (
+    <Pressable
+      style={[styles.chip, isHeader ? styles.chipOnHeader : null, active && styles.chipActive]}
+      onPress={() => actionId && onAction(actionId, actionParams)}
+      disabled={!actionId}
+    >
+      <Text style={[styles.chipLabel, active && styles.chipLabelActive]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+export function SduiChipRowBlock({ block, children }: SduiBlockRenderProps) {
+  const variant = readStringProp(block, 'variant') ?? 'default';
+  const isHeader = variant === 'on_header';
+
+  if (children) {
+    return (
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={[styles.chipRow, isHeader && styles.chipRowOnHeader]}
+      >
+        {children}
+      </ScrollView>
+    );
+  }
+
+  return <View style={[styles.chipRow, isHeader && styles.chipRowOnHeader]}>{children}</View>;
+}
+
+export function SduiTextFieldBlock({ block, data, onAction }: SduiBlockRenderProps) {
+  const hybrid = useSduiHybridRenderer();
+  const placeholder = readStringProp(block, 'placeholder') ?? '';
+  const dataRef = readStringProp(block, 'data_ref');
+  const submitActionId = readStringProp(block, 'submit_action_id');
+  const value = dataRef ? resolveDataRefString(data, dataRef) : '';
+
+  if (hybrid.renderTextField && dataRef) {
+    return (
+      <>
+        {hybrid.renderTextField({
+          dataRef,
+          placeholder,
+          value,
+          submitActionId,
+          onSubmit: () => submitActionId && onAction(submitActionId),
+        })}
+      </>
+    );
+  }
+
+  return (
+    <UiTextField
+      placeholder={placeholder}
+      value={value}
+      onChangeText={() => {
+        // Hybrid: app-side state for text input until api_call wiring lands.
+      }}
+      onSubmitEditing={() => submitActionId && onAction(submitActionId)}
+      returnKeyType={submitActionId ? 'search' : 'done'}
+      autoCapitalize="words"
+      autoCorrect={false}
+      containerStyle={styles.textField}
+    />
+  );
+}
+
+export function SduiDiscoverMapBlock({ block, data }: SduiBlockRenderProps) {
+  const hybrid = useSduiHybridRenderer();
+  const centerRefProp = readStringProp(block, 'center_ref') ?? 'browse_center';
+  const labelRef = readStringProp(block, 'label_ref') ?? 'map_label';
+  const height = readNumberProp(block, 'height', 340);
+  const regionLabel = resolveDataRefString(data, labelRef) || 'Região selecionada';
+  const centerValue = resolveDataRef(data, centerRefProp);
+  const center =
+    centerValue &&
+    typeof centerValue === 'object' &&
+    typeof (centerValue as { lat?: unknown }).lat === 'number' &&
+    typeof (centerValue as { lng?: unknown }).lng === 'number'
+      ? (centerValue as { lat: number; lng: number })
+      : { lat: -23.5505, lng: -46.6333 };
+  const centerMoveToken =
+    typeof data.map_center_move_token === 'number' ? data.map_center_move_token : 0;
+
+  if (hybrid.renderDiscoverMap) {
+    return (
+      <>
+        {hybrid.renderDiscoverMap({
+          center,
+          label: regionLabel,
+          height,
+          centerMoveToken,
+          onCenterChange: hybrid.onDiscoverMapCenterChange ?? (() => {}),
+        })}
+      </>
+    );
+  }
+
+  return (
+    <View style={[styles.mapShell, { height }]}>
+      <LinearGradient colors={gradients.brand} style={StyleSheet.absoluteFill} />
+      <View style={styles.mapOverlay}>
+        <Text style={styles.mapTitle}>{regionLabel}</Text>
+        <Text style={styles.mapCoords}>{`${center.lat.toFixed(4)}, ${center.lng.toFixed(4)}`}</Text>
+        <Text style={styles.mapHint}>Mapa interativo — render nativo no app (híbrido).</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  profileCard: {
+    aspectRatio: 0.82,
+    borderRadius: m3Shape.cornerMedium,
+    overflow: 'hidden',
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    borderWidth: 1,
+    ...m3Elevation.level1,
+  },
+  profileShade: { position: 'absolute', left: 0, right: 0, bottom: 0, height: 80 },
+  newBadge: {
+    position: 'absolute',
+    top: spacing.sm,
+    left: spacing.sm,
+    backgroundColor: m3Colors.primary,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: m3Shape.cornerSmall,
+  },
+  newBadgeText: { color: m3Colors.onPrimary, fontSize: 11, fontWeight: '700' },
+  profileInfo: { position: 'absolute', left: spacing.sm, bottom: spacing.sm, right: spacing.sm },
+  profileName: { color: colors.white, fontSize: 13, fontWeight: '700' },
+  distRow: { flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 2 },
+  distText: { color: colors.textSecondary, fontSize: 11, fontWeight: '500' },
+  presenceDot: { width: 8, height: 8, borderRadius: 4 },
+  gridContent: {
+    gap: GRID_GAP,
+    paddingHorizontal: spacing.sm,
+    paddingBottom: spacing.sm,
+  },
+  loadMore: {
+    alignItems: 'center',
+    paddingVertical: spacing.md,
+    marginHorizontal: spacing.sm,
+  },
+  loadMoreText: {
+    color: m3Colors.primary,
+    fontSize: 14,
+    fontWeight: '600',
+    fontFamily: fonts.semibold,
+  },
+  chipRow: {
+    flexDirection: 'row',
+    gap: spacing.sm,
+    paddingHorizontal: spacing.sm,
+  },
+  chipRowOnHeader: {
+    paddingHorizontal: 0,
+  },
+  chip: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: m3Shape.cornerFull,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    borderWidth: 1,
+    borderColor: m3Colors.outline,
+  },
+  chipOnHeader: {
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    borderColor: 'rgba(255,255,255,0.08)',
+  },
+  chipActive: {
+    backgroundColor: m3Colors.primaryContainer,
+    borderColor: m3Colors.primary,
+  },
+  chipLabel: {
+    color: m3Colors.onSurface,
+    fontSize: 13,
+    fontFamily: fonts.medium,
+  },
+  chipLabelActive: {
+    color: m3Colors.onPrimaryContainer,
+    fontFamily: fonts.semibold,
+  },
+  textField: {
+    flex: 1,
+    marginBottom: 0,
+  },
+  mapShell: {
+    borderRadius: m3Shape.cornerLarge,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: m3Colors.outline,
+  },
+  mapOverlay: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: spacing.lg,
+    backgroundColor: 'rgba(0,0,0,0.45)',
+    gap: spacing.sm,
+  },
+  mapTitle: {
+    color: colors.white,
+    fontSize: 16,
+    fontFamily: fonts.semibold,
+    textAlign: 'center',
+  },
+  mapCoords: {
+    color: colors.textSecondary,
+    fontSize: 14,
+    fontFamily: fonts.regular,
+    textAlign: 'center',
+  },
+  mapHint: {
+    color: colors.textSecondary,
+    fontSize: 12,
+    fontFamily: fonts.regular,
+    textAlign: 'center',
+  },
+});

package/src/renderer/blocks/SduiLayoutBlocks.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import { Pressable, StyleSheet, Switch, Text, View } from 'react-native';
+import type { SduiBlock } from '@proulr/sdui-contract';
+import { Card } from '../ui/Card';
+import { colors, fonts, m3Colors, m3Type, spacing } from '../theme/proulr-theme';
+import {
+  resolveDataRefBoolean,
+  resolveDataRefString,
+} from '../lib/resolve-data-ref';
+import { resolveViewStyleProps } from '../theme/resolve-style-props';
+import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
+
+function readStringProp(block: SduiBlock, key: string): string | undefined {
+  const value = block.props[key];
+  return typeof value === 'string' ? value : undefined;
+}
+
+function readBooleanProp(block: SduiBlock, key: string): boolean {
+  return block.props[key] === true;
+}
+
+export function SduiCardBlock({ block, children }: SduiBlockRenderProps) {
+  return (
+    <Card style={StyleSheet.flatten([styles.card, resolveViewStyleProps(block.props.style as Record<string, unknown>)])}>
+      {children}
+    </Card>
+  );
+}
+
+export function SduiSectionHeaderBlock({ block, onAction }: SduiBlockRenderProps) {
+  const title = readStringProp(block, 'title') ?? '';
+  const actionLabel = readStringProp(block, 'action_label');
+  const actionId = readStringProp(block, 'action_id');
+
+  return (
+    <View style={styles.sectionHeaderRow}>
+      <Text style={styles.sectionHeader}>{title}</Text>
+      {actionLabel && actionId ? (
+        <Pressable onPress={() => onAction(actionId)} hitSlop={8}>
+          <Text style={styles.sectionAction}>{actionLabel}</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+export function SduiListItemBlock({ block, data, onAction }: SduiBlockRenderProps) {
+  const title = readStringProp(block, 'title') ?? '';
+  const subtitleRef = readStringProp(block, 'subtitle_ref');
+  const subtitle = subtitleRef ? resolveDataRefString(data, subtitleRef) : readStringProp(block, 'subtitle');
+  const trailingRef = readStringProp(block, 'trailing_ref');
+  const trailingText = trailingRef
+    ? resolveDataRefString(data, trailingRef)
+    : readStringProp(block, 'trailing_text');
+  const actionId = readStringProp(block, 'action_id');
+  const showDivider = readBooleanProp(block, 'show_divider');
+  const showChevron = block.props.show_chevron !== false;
+  const navChevron = Boolean(actionId) && showChevron && !trailingText;
+
+  const inner = (
+    <>
+      <View style={styles.listContent}>
+        <Text style={styles.listTitle} numberOfLines={1}>
+          {title}
+        </Text>
+        {subtitle ? (
+          <Text style={styles.listSubtitle} numberOfLines={1}>
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+      {navChevron ? <Text style={styles.chevron}>{'\u203a'}</Text> : null}
+      {trailingText ? <Text style={styles.trailingText}>{trailingText}</Text> : null}
+    </>
+  );
+
+  if (actionId) {
+    return (
+      <Pressable
+        style={[styles.listItem, showDivider && styles.listItemDivider]}
+        onPress={() => onAction(actionId)}
+      >
+        {inner}
+      </Pressable>
+    );
+  }
+
+  return <View style={[styles.listItem, showDivider && styles.listItemDivider]}>{inner}</View>;
+}
+
+export function SduiToggleRowBlock({ block, data, onAction }: SduiBlockRenderProps) {
+  const label = readStringProp(block, 'label') ?? '';
+  const hint = readStringProp(block, 'hint');
+  const dataRef = readStringProp(block, 'data_ref');
+  const toggleActionId = readStringProp(block, 'toggle_action_id');
+  const disabled = readBooleanProp(block, 'disabled');
+  const value = resolveDataRefBoolean(data, dataRef);
+
+  return (
+    <View style={styles.toggleRow}>
+      <View style={styles.toggleCopy}>
+        <Text style={styles.toggleLabel}>{label}</Text>
+        {hint ? <Text style={styles.toggleHint}>{hint}</Text> : null}
+      </View>
+      <Switch
+        value={value}
+        disabled={disabled || !toggleActionId}
+        onValueChange={(next) => {
+          if (!toggleActionId) return;
+          onAction(toggleActionId, { value: String(next) });
+        }}
+        trackColor={{ false: m3Colors.surfaceContainerHighest, true: m3Colors.primary }}
+        thumbColor={m3Colors.onPrimary}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.sm,
+  },
+  sectionHeaderRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: spacing.sm,
+    marginTop: spacing.xl,
+  },
+  sectionHeader: {
+    color: colors.textSecondary,
+    fontSize: 14,
+    fontFamily: fonts.semibold,
+  },
+  sectionAction: {
+    color: colors.accentText,
+    fontSize: 13,
+    fontFamily: fonts.semibold,
+  },
+  listItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    paddingVertical: spacing.md,
+  },
+  listItemDivider: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: colors.border,
+  },
+  listContent: { flex: 1 },
+  listTitle: { color: colors.textPrimary, fontSize: 15, fontFamily: fonts.semibold },
+  listSubtitle: { color: colors.textSecondary, fontSize: 13, marginTop: 2 },
+  trailingText: { ...m3Type.bodySmall, color: colors.textSecondary },
+  chevron: { color: m3Colors.onSurfaceVariant, fontSize: 22 },
+  toggleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    paddingVertical: spacing.xs,
+  },
+  toggleCopy: {
+    flex: 1,
+    gap: spacing.xs,
+  },
+  toggleLabel: {
+    color: m3Colors.onSurface,
+    fontSize: 15,
+    fontFamily: fonts.semibold,
+  },
+  toggleHint: {
+    color: m3Colors.onSurfaceVariant,
+    fontSize: 12,
+    lineHeight: 17,
+    fontFamily: fonts.regular,
+  },
+});