@proulr/sdui-components 0.1.88 → 0.1.91

package/src/renderer/SduiTemplateRow.tsx

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import type { SduiBlock, SduiBlockWire } from '@proulr/sdui-contract';
+import { renderBlockTree } from './sdui-component-registry';
+import { materializeRowTemplate, type SduiRowTemplateSource } from './lib/sdui-row-template';
+
+type Props = {
+  /** Props do bloco hospedeiro (`{ row_template, item_key, section }`) ou array nu de blocos do template. */
+  template: SduiRowTemplateSource | null | undefined;
+  /** Item vivo do feed (`screen.data[...]`). */
+  item: unknown;
+  /** Índice do item — fallback do sufixo de id quando `item_key` não resolve. */
+  index?: number;
+  /** `screen.data` repassado ao renderer de blocos. */
+  data?: Record<string, unknown>;
+  onAction: (actionId: string, vars?: Record<string, string>) => void;
+};
+
+function toDomainBlock(block: SduiBlockWire): SduiBlock {
+  return {
+    id: block.id,
+    type: block.type,
+    props: block.props ?? {},
+    children: (block.children ?? []).map(toDomainBlock),
+  };
+}
+
+/**
+ * Renderiza **uma** linha de um row template wire-driven: materializa o subtree
+ * do bloco template para o item (bindings `{{item.*}}` + ids estáveis) e monta
+ * via registry de blocos do SDUI (`renderBlockTree`) — componentes genéricos,
+ * sem layout de linha hardcoded no híbrido.
+ *
+ * ```tsx
+ * {items.map((post, i) => (
+ *   <SduiTemplateRow
+ *     key={post.id}
+ *     template={readSduiRowTemplate(block.props)}
+ *     item={post}
+ *     index={i}
+ *     data={data}
+ *     onAction={onAction}
+ *   />
+ * ))}
+ * ```
+ */
+export function SduiTemplateRow({ template, item, index = 0, data = {}, onAction }: Props) {
+  const blocks = useMemo(
+    () => (template ? materializeRowTemplate(template, item, index) : []),
+    [template, item, index],
+  );
+  return (
+    <>
+      {blocks.map((block) => {
+        const domainBlock = toDomainBlock(block);
+        return (
+          <React.Fragment key={domainBlock.id}>
+            {renderBlockTree(domainBlock, data, onAction)}
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
+}

package/src/renderer/blocks/SduiContentBlocks.tsx

@@ -0,0 +1,299 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
+import { AppIcon } from '../ui/app-icon';
+import { isAppIconName, type AppIconName } from '../../catalog/app-icon-names';
+import { resolveDataRef } from '../lib/resolve-data-ref';
+import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
+
+function itemsFrom(
+  block: SduiBlockRenderProps['block'],
+  data: Record<string, unknown>,
+  fallback = '',
+): unknown[] {
+  const refProp = block.props.items_ref;
+  const ref = typeof refProp === 'string' && refProp ? refProp : fallback;
+  if (!ref) return [];
+  const raw = resolveDataRef(data, ref);
+  return Array.isArray(raw) ? raw : [];
+}
+
+function asRecord(item: unknown): Record<string, unknown> | null {
+  return item && typeof item === 'object' ? (item as Record<string, unknown>) : null;
+}
+
+function toText(value: unknown): string {
+  if (typeof value === 'string') return value;
+  if (value != null) return String(value);
+  return '';
+}
+
+function toIcon(value: unknown): AppIconName | undefined {
+  return typeof value === 'string' && isAppIconName(value) ? value : undefined;
+}
+
+/* ── stat_tile_row ─────────────────────────────────────────────────────────── */
+
+type StatTile = {
+  icon?: AppIconName;
+  value: string;
+  label: string;
+  actionId?: string;
+  actionParams?: Record<string, string>;
+};
+
+function chunk<T>(items: T[], size: number): T[][] {
+  const rows: T[][] = [];
+  for (let i = 0; i < items.length; i += size) rows.push(items.slice(i, i + size));
+  return rows;
+}
+
+function StatTileView({
+  tile,
+  card,
+  onAction,
+}: {
+  tile: StatTile;
+  card: boolean;
+  onAction: SduiBlockRenderProps['onAction'];
+}) {
+  const content = card ? (
+    <>
+      <View style={styles.cardHead}>
+        {tile.icon ? (
+          <View style={styles.cardIcon}>
+            <AppIcon name={tile.icon} size={16} color={m3Colors.primary} />
+          </View>
+        ) : null}
+        {tile.actionId ? <AppIcon name="arrow-up-right" size={16} color={m3Colors.onSurfaceVariant} /> : null}
+      </View>
+      <Text style={styles.cardValue} numberOfLines={2}>{tile.value}</Text>
+      <Text style={styles.label} numberOfLines={1}>{tile.label}</Text>
+    </>
+  ) : (
+    <>
+      {tile.icon ? <AppIcon name={tile.icon} size={17} color={m3Colors.onSurfaceVariant} /> : null}
+      <Text style={styles.value} numberOfLines={1}>{tile.value}</Text>
+      <Text style={styles.label} numberOfLines={1}>{tile.label}</Text>
+    </>
+  );
+  const tileStyle = card ? styles.card : styles.tile;
+  const actionId = tile.actionId;
+  if (!actionId) return <View style={tileStyle}>{content}</View>;
+  return (
+    <Pressable
+      accessibilityRole="link"
+      accessibilityLabel={`${tile.label} ${tile.value}`.trim()}
+      onPress={() => onAction(actionId, tile.actionParams)}
+      style={({ pressed }) => [tileStyle, card && styles.cardLink, pressed && styles.pressed]}
+    >
+      {content}
+    </Pressable>
+  );
+}
+
+/** Tiles genéricos de métrica (ícone + valor + rótulo) — layout vem do wire, regra do BFF. */
+export function SduiStatTileRowBlock({ block, data, onAction }: SduiBlockRenderProps) {
+  const tiles: StatTile[] = itemsFrom(block, data, 'stats')
+    .map(asRecord)
+    .filter((row): row is Record<string, unknown> => row !== null)
+    .map((row) => ({
+      icon: toIcon(row.icon),
+      value: toText(row.value),
+      label: toText(row.label),
+      actionId: typeof row.action_id === 'string' && row.action_id ? row.action_id : undefined,
+      actionParams:
+        row.action_params && typeof row.action_params === 'object'
+          ? (row.action_params as Record<string, string>)
+          : undefined,
+    }))
+    .filter((tile) => tile.value || tile.label);
+  if (tiles.length === 0) return null;
+
+  const columnsProp = block.props.columns;
+  const columns =
+    typeof columnsProp === 'number' && Number.isInteger(columnsProp) && columnsProp > 0
+      ? columnsProp
+      : tiles.length;
+  const card = block.props.align === 'start';
+  const rows = chunk(tiles, columns);
+
+  return (
+    <View style={styles.grid} accessibilityRole="list">
+      {rows.map((row, rIndex) => (
+        <View key={`row-${rIndex}`} style={styles.row}>
+          {row.map((tile, index) => (
+            <StatTileView key={`${tile.label}-${index}`} tile={tile} card={card} onAction={onAction} />
+          ))}
+          {Array.from({ length: columns - row.length }, (_, pad) => (
+            <View key={`pad-${pad}`} style={styles.pad} />
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+/* ── data_group_list ──────────────────────────────────────────────────────── */
+
+/** Grupos de detalhes (cabeçalho com ícone + linhas rótulo→valor). Reutilizável em qualquer tela. */
+export function SduiDataGroupListBlock({ block, data }: SduiBlockRenderProps) {
+  const groups = itemsFrom(block, data)
+    .map(asRecord)
+    .filter((g): g is Record<string, unknown> => g !== null)
+    .map((group) => {
+      const rowsRaw = Array.isArray(group.rows) ? group.rows : [];
+      const rows = rowsRaw
+        .map(asRecord)
+        .filter((r): r is Record<string, unknown> => r !== null)
+        .map((row) => ({ label: toText(row.label), value: toText(row.value) }))
+        .filter((row) => row.label || row.value);
+      return {
+        icon: toIcon(group.icon),
+        title: toText(group.title),
+        rows,
+      };
+    })
+    .filter((group) => group.rows.length > 0);
+  if (groups.length === 0) return null;
+
+  return (
+    <View style={styles.groups}>
+      {groups.map((group, gIndex) => (
+        <View key={`${group.title}-${gIndex}`} style={styles.group}>
+          <View style={styles.groupHead} accessibilityRole="header">
+            {group.icon ? <AppIcon name={group.icon} size={16} color={m3Colors.onSurface} /> : null}
+            <Text style={styles.groupTitle}>{group.title}</Text>
+          </View>
+          {group.rows.map((row, rIndex) => (
+            <View key={`${row.label}-${rIndex}`} style={styles.dataRow}>
+              <Text style={styles.dataLabel} numberOfLines={1}>{row.label}</Text>
+              <Text style={styles.dataValue}>{row.value}</Text>
+            </View>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+/* ── vouch_list ───────────────────────────────────────────────────────────── */
+
+/** Cartões de citação/recomendação (cabeçalho + citações com autor). Reutilizável (depoimentos, reviews). */
+export function SduiVouchListBlock({ block, data }: SduiBlockRenderProps) {
+  const itemsRefProp = block.props.items_ref;
+  const itemsRef = typeof itemsRefProp === 'string' && itemsRefProp ? itemsRefProp : 'vouches';
+  const container = asRecord(resolveDataRef(data, itemsRef));
+  const header = container ? toText(container.header) : '';
+  const items = (container && Array.isArray(container.items) ? container.items : [])
+    .map(asRecord)
+    .filter((i): i is Record<string, unknown> => i !== null)
+    .map((item) => ({
+      quote: toText(item.quote),
+      author: toText(item.author_name),
+      meta: toText(item.meta),
+    }))
+    .filter((item) => item.quote);
+  if (!header && items.length === 0) return null;
+
+  return (
+    <View style={styles.vouchWrap}>
+      {header ? <Text style={styles.vouchHeader}>{header}</Text> : null}
+      {items.map((item, index) => (
+        <View key={`vouch-${index}`} style={styles.vouchCard}>
+          <Text style={styles.vouchQuote}>“{item.quote}”</Text>
+          <View style={styles.vouchFooter}>
+            <Text style={styles.vouchAuthor}>{item.author}</Text>
+            {item.meta ? <Text style={styles.vouchMeta}>{item.meta}</Text> : null}
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  grid: { gap: spacing.sm },
+  row: { flexDirection: 'row', gap: spacing.sm },
+  pad: { flex: 1 },
+  tile: {
+    flex: 1,
+    minHeight: 64,
+    borderRadius: m3Shape.cornerMedium,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    borderWidth: 1,
+    borderColor: m3Colors.outlineVariant,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 1,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.xs,
+  },
+  value: { ...m3Type.title, color: m3Colors.onSurface, fontFamily: fonts.extrabold },
+  label: { ...m3Type.labelSmall, color: m3Colors.onSurfaceVariant },
+  card: {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 92,
+    borderRadius: m3Shape.cornerMedium,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    borderWidth: 1,
+    borderColor: m3Colors.outlineVariant,
+    gap: spacing.xs,
+    padding: spacing.sm + 4,
+  },
+  cardLink: { borderColor: m3Colors.outlineInteractive },
+  cardHead: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+  cardIcon: {
+    width: 28,
+    height: 28,
+    borderRadius: m3Shape.cornerSmall,
+    backgroundColor: m3Colors.surfaceContainerHighest,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cardValue: { ...m3Type.body, color: m3Colors.onSurface, fontFamily: fonts.bold },
+  pressed: { opacity: 0.85 },
+
+  groups: { gap: spacing.md },
+  group: {
+    borderRadius: m3Shape.cornerMedium,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    borderWidth: 1,
+    borderColor: m3Colors.outlineVariant,
+    overflow: 'hidden',
+  },
+  groupHead: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    backgroundColor: 'rgba(255,255,255,0.08)',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+  },
+  groupTitle: { ...m3Type.label, color: m3Colors.onSurface, fontFamily: fonts.bold },
+  dataRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    gap: spacing.md,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+  },
+  dataLabel: { ...m3Type.bodySmall, color: m3Colors.onSurfaceVariant, flexShrink: 0 },
+  dataValue: { ...m3Type.bodySmall, color: m3Colors.onSurface, fontFamily: fonts.semibold, flex: 1, textAlign: 'right' },
+
+  vouchWrap: { gap: spacing.sm },
+  vouchHeader: { ...m3Type.bodySmall, color: m3Colors.onSurfaceVariant },
+  vouchCard: {
+    borderRadius: m3Shape.cornerMedium,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    borderWidth: 1,
+    borderColor: m3Colors.outlineVariant,
+    padding: spacing.md,
+    gap: spacing.sm,
+  },
+  vouchQuote: { ...m3Type.body, color: m3Colors.onSurface },
+  vouchFooter: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: spacing.sm },
+  vouchAuthor: { ...m3Type.labelSmall, color: m3Colors.secondary, fontFamily: fonts.bold },
+  vouchMeta: { ...m3Type.labelSmall, color: m3Colors.onSurfaceVariant },
+});

package/src/renderer/blocks/SduiDiscoverBlocks.tsx

@@ -13,7 +13,7 @@ import type { SduiBlock } from '@proulr/sdui-contract';
 import { TextField as UiTextField } from '../ui/TextField';
 import { Chip } from '../ui/Chip';
 import { ChipRow } from '../ui/ChipRow';
-import { AppIcon } from '../ui/app-icon';
+import { AppIcon, isAppIconName } from '../ui/app-icon';
 import { colors, fonts, gradients, m3Colors, m3Elevation, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 import { resolveDataRef, resolveDataRefString } from '../lib/resolve-data-ref';
 import { useSduiHybridRenderer } from '../sdui-hybrid-renderer-context';
@@ -280,6 +280,7 @@ export function SduiDiscoverGridBlock({ block, data, onAction }: SduiBlockRender
 export function SduiChipBlock({ block, onAction }: SduiBlockRenderProps) {
   const label = readStringProp(block, 'label') ?? '';
   const glyph = readStringProp(block, 'glyph');
+  const tone = readStringProp(block, 'tone');
   const actionId = readStringProp(block, 'action_id');
   const actionParams = readStringRecordProp(block, 'action_params');
   const active = readBooleanProp(block, 'active');
@@ -288,6 +289,7 @@ export function SduiChipBlock({ block, onAction }: SduiBlockRenderProps) {
     <Chip
       label={label}
       icon={glyph}
+      tone={tone === 'secondary' || tone === 'primary' ? tone : undefined}
       active={active}
       disabled={!actionId}
       onPress={() => actionId && onAction(actionId, actionParams)}
@@ -295,8 +297,42 @@ export function SduiChipBlock({ block, onAction }: SduiBlockRenderProps) {
   );
 }
 
-export function SduiChipRowBlock({ children }: SduiBlockRenderProps) {
-  return <ChipRow>{children}</ChipRow>;
+export function SduiChipRowBlock({ block, data, children, onAction }: SduiBlockRenderProps) {
+  const itemsRef = readStringProp(block, 'items_ref');
+  const wrap = readStringProp(block, 'layout') === 'wrap';
+  if (itemsRef) {
+    const raw = resolveDataRef(data, itemsRef);
+    const items = Array.isArray(raw) ? raw : [];
+    return (
+      <ChipRow wrap={wrap}>
+        {items.map((item, index) => {
+          if (!item || typeof item !== 'object') return null;
+          const row = item as Record<string, unknown>;
+          const label = typeof row.label === 'string' ? row.label : '';
+          if (!label) return null;
+          const glyph = typeof row.glyph === 'string' && isAppIconName(row.glyph) ? row.glyph : undefined;
+          const toneRaw = row.tone;
+          const tone = toneRaw === 'secondary' || toneRaw === 'primary' ? toneRaw : undefined;
+          const actionId = typeof row.action_id === 'string' ? row.action_id : undefined;
+          const actionParams =
+            row.action_params && typeof row.action_params === 'object'
+              ? (row.action_params as Record<string, string>)
+              : undefined;
+          return (
+            <Chip
+              key={`${label}-${index}`}
+              label={label}
+              icon={glyph}
+              tone={tone}
+              readOnly={!actionId}
+              onPress={() => actionId && onAction(actionId, actionParams)}
+            />
+          );
+        })}
+      </ChipRow>
+    );
+  }
+  return <ChipRow wrap={wrap}>{children}</ChipRow>;
 }
 
 export function SduiTextFieldBlock({ block, data, onAction }: SduiBlockRenderProps) {