@proulr/sdui-components 0.1.18 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
   "exports": {
@@ -9,7 +9,8 @@
     "./renderer": "./src/renderer/index.ts",
     "./ui": "./src/renderer/ui/index.ts",
     "./primitives": "./src/renderer/ui/primitives.ts",
-    "./theme": "./src/renderer/theme/index.ts"
+    "./theme": "./src/renderer/theme/index.ts",
+    "./catalog": "./src/catalog/index.ts"
   },
   "files": [
     "src"

package/src/catalog/app-icon-names.ts

@@ -0,0 +1,84 @@
+/** AppIconName tokens — fonte sem React Native (BFF + app + registry). */
+export const APP_ICON_NAMES = [
+  'search',
+  'hunt',
+  'back',
+  'overflow',
+  'location',
+  'mic',
+  'send',
+  'chat',
+  'close',
+  'chevron-down',
+  'chevron-right',
+  'flip-camera',
+  'flash',
+  'gallery',
+  'video',
+  'camera',
+  'trash',
+  'globe',
+  'tab-discover',
+  'tab-vibes',
+  'tab-flash',
+  'tab-chat',
+  'boost',
+  'fire',
+  'settings',
+  'edit',
+  'incognito',
+  'events',
+  'shield',
+  'profile',
+  'bookmark',
+  'list',
+  'communities',
+  'star',
+  'sign-out',
+  'publish',
+  'story',
+  'story-music',
+  'story-sticker',
+  'story-text',
+  'story-effects',
+  'story-mention',
+  'repost',
+  'heart',
+  'heart-filled',
+  'thumbs-up',
+  'thumbs-up-filled',
+  'play',
+  'pause',
+  'plus',
+  'followers',
+  'mention',
+  'visibility',
+  'visibility-off',
+  'check',
+  'arrow-right',
+  'arrow-up-right',
+  'arrow-down-right',
+  'reply',
+  'pending',
+  'download',
+  'radio-unchecked',
+  'copy',
+  'attachment',
+  'poll',
+  'lock',
+  'volume-on',
+  'volume-off',
+  'info',
+  'warning',
+  'signal',
+  'hourglass',
+  'bell',
+] as const;
+
+export type AppIconName = (typeof APP_ICON_NAMES)[number];
+
+const APP_ICON_NAME_SET: ReadonlySet<string> = new Set(APP_ICON_NAMES);
+
+export function isAppIconName(value: string): value is AppIconName {
+  return APP_ICON_NAME_SET.has(value);
+}

package/src/catalog/chat-emoji-catalog.ts

@@ -0,0 +1,115 @@
+export type EmojiCategoryId = 'spicy' | 'smileys' | 'gestures' | 'hearts' | 'animals' | 'food' | 'objects' | 'symbols';
+
+export type EmojiCategory = {
+  id: EmojiCategoryId;
+  label: string;
+  tab: string;
+  emojis: readonly string[];
+};
+
+/** Pilula padrao quando ainda nao ha historico de uso. */
+export const DEFAULT_QUICK_REACTIONS = ['👍', '🔥', '🍆', '💦', '❤️', '😂'] as const;
+
+export const QUICK_REACTION_SLOTS = 6;
+
+export const CHAT_EMOJI_CATEGORIES: EmojiCategory[] = [
+  {
+    id: 'spicy',
+    label: 'Safadinhos',
+    tab: '😈',
+    emojis: [
+      '👍', '🔥', '🍆', '💦', '👅', '🤤', '🍑', '😈', '💋', '🫦', '🥵', '😏',
+      '🛏️', '🫣', '👀', '💪', '🤭', '😘', '🥰', '😍', '🫠', '😮‍💨', '🍒', '🌶️',
+      '🥒', '🍌', '🧴', '🛁', '🚿', '🔞', '🫦', '😜', '😝', '🤫', '😳',
+    ],
+  },
+  {
+    id: 'smileys',
+    label: 'Rostos',
+    tab: '😀',
+    emojis: [
+      '😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '😉', '😊',
+      '😇', '🥰', '😍', '🤩', '😘', '😗', '😚', '😙', '🥲', '😋', '😛', '😜',
+      '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔', '🤐', '🤨', '😐', '😑', '😶',
+      '😏', '😒', '🙄', '😬', '🤥', '😌', '😔', '😪', '🤤', '😴', '😷', '🤒',
+      '🤕', '🤢', '🤮', '🤧', '🥵', '🥶', '🥴', '😵', '🤯', '🤠', '🥳', '🥸',
+      '😎', '🤓', '🧐', '😕', '😟', '🙁', '☹️', '😮', '😯', '😲', '😳', '🥺',
+      '😦', '😧', '😨', '😰', '😥', '😢', '😭', '😱', '😖', '😣', '😞', '😓',
+      '😩', '😫', '🥱', '😤', '😡', '😠', '🤬',
+    ],
+  },
+  {
+    id: 'gestures',
+    label: 'Gestos',
+    tab: '👋',
+    emojis: [
+      '👍', '👎', '👏', '🙌', '👐', '🤲', '🤝', '🙏', '✌️', '🤞', '🤟', '🤘',
+      '🤙', '👈', '👉', '👆', '👇', '☝️', '✋', '🤚', '🖐', '🖖', '👋', '🤏',
+      '✊', '👊', '🤛', '🤜', '💪', '🦾', '🖕', '✍️', '🤳', '💅',
+    ],
+  },
+  {
+    id: 'hearts',
+    label: 'Amor',
+    tab: '❤️',
+    emojis: [
+      '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔', '❤️‍🔥', '❤️‍🩹',
+      '💕', '💞', '💓', '💗', '💖', '💘', '💝', '💟', '💌', '💑', '💏', '🌹',
+    ],
+  },
+  {
+    id: 'animals',
+    label: 'Animais',
+    tab: '🐶',
+    emojis: [
+      '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮',
+      '🐷', '🐸', '🐵', '🐔', '🐧', '🐦', '🐤', '🦄', '🐝', '🦋', '🐢', '🐍',
+    ],
+  },
+  {
+    id: 'food',
+    label: 'Comida',
+    tab: '🍕',
+    emojis: [
+      '🍕', '🍔', '🍟', '🌭', '🍿', '🧁', '🍰', '🎂', '🍩', '🍪', '🍫', '🍬',
+      '🍭', '🍦', '🍧', '🍨', '🍎', '🍊', '🍋', '🍉', '🍇', '🍓', '🍑', '🍒',
+      '🥑', '🌮', '🍣', '🍺', '🍷', '🥂', '🍾', '☕', '🧃',
+    ],
+  },
+  {
+    id: 'objects',
+    label: 'Coisas',
+    tab: '💡',
+    emojis: [
+      '⌚', '📱', '💻', '📷', '🎮', '🎧', '🎬', '🎤', '🎵', '🎶', '🎁', '🎈',
+      '🎉', '🎊', '🏆', '🥇', '🥈', '🥉', '⚽', '🏀', '🎾', '🚗', '✈️', '🚀',
+    ],
+  },
+  {
+    id: 'symbols',
+    label: 'Símbolos',
+    tab: '✨',
+    emojis: [
+      '🔥', '✨', '💫', '⭐', '🌟', '💥', '💯', '💢', '💦', '💨', '🕳️', '💣',
+      '✅', '❌', '❓', '❗', '‼️', '⁉️', '🔴', '🟠', '🟡', '🟢', '🔵', '🟣',
+      '⚫', '⚪', '🟤', '🔶', '🔷', '🔸', '🔹',
+    ],
+  },
+];
+
+export function getEmojiCategory(id: EmojiCategoryId): EmojiCategory {
+  return CHAT_EMOJI_CATEGORIES.find((category) => category.id === id) ?? CHAT_EMOJI_CATEGORIES[0];
+}
+
+export function allCatalogEmojis(): string[] {
+  const seen = new Set<string>();
+  const result: string[] = [];
+  for (const category of CHAT_EMOJI_CATEGORIES) {
+    for (const emoji of category.emojis) {
+      if (seen.has(emoji)) continue;
+      seen.add(emoji);
+      result.push(emoji);
+    }
+  }
+  return result;
+}

package/src/catalog/flash-reaction-catalog.ts

@@ -0,0 +1,46 @@
+export const FLASH_REACTION_IDS = ['flash', 'fire', 'heart', 'eyes', 'wave', 'chat'] as const;
+
+export type FlashReactionId = (typeof FLASH_REACTION_IDS)[number];
+
+export type FlashReaction = {
+  id: FlashReactionId;
+  emoji: string;
+  label: string;
+  message: string;
+};
+
+export const FLASH_REACTIONS: FlashReaction[] = [
+  { id: 'flash', emoji: '\u26a1', label: 'Flash', message: 'te enviou um Flash' },
+  { id: 'fire', emoji: '\u{1F525}', label: 'Quente', message: 'achou você quente' },
+  { id: 'heart', emoji: '\u{1F9E1}', label: 'Curti', message: 'curtiu você' },
+  { id: 'eyes', emoji: '\u{1F440}', label: 'Interesse', message: 'está de olho em você' },
+  { id: 'wave', emoji: '\u{1F44B}', label: 'Oi', message: 'mandou um oi' },
+  { id: 'chat', emoji: '\u{1F4AC}', label: 'Conversar', message: 'quer conversar' },
+];
+
+export const FLASH_FILTER_ALL_ACTION_ID = 'flash_filter_all';
+
+const reactionById = Object.fromEntries(FLASH_REACTIONS.map((reaction) => [reaction.id, reaction])) as Record<
+  FlashReactionId,
+  FlashReaction
+>;
+
+export function getFlashReaction(id?: string | null): FlashReaction {
+  if (id && id in reactionById) return reactionById[id as FlashReactionId];
+  return reactionById.flash;
+}
+
+export function flashFilterActionId(reactionId: FlashReactionId): string {
+  return `flash_filter_${reactionId}`;
+}
+
+export function parseFlashInboxFilter(value: string | undefined): 'all' | FlashReactionId {
+  if (value && FLASH_REACTION_IDS.includes(value as FlashReactionId)) {
+    return value as FlashReactionId;
+  }
+  return 'all';
+}
+
+export function isFlashReactionId(value: string): value is FlashReactionId {
+  return FLASH_REACTION_IDS.includes(value as FlashReactionId);
+}

package/src/catalog/index.ts

@@ -0,0 +1,5 @@
+export * from './block-types';
+export * from './style-tokens';
+export * from './chat-emoji-catalog';
+export * from './flash-reaction-catalog';
+export * from './app-icon-names';

package/src/renderer/blocks/SduiLayoutBlocks.tsx

@@ -2,6 +2,7 @@ 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 { AppIcon } from '../ui/app-icon';
 import { colors, fonts, m3Colors, m3Type, spacing } from '../theme/proulr-theme';
 import {
   resolveDataRefBoolean,
@@ -69,7 +70,7 @@ export function SduiListItemBlock({ block, data, onAction }: SduiBlockRenderProp
           </Text>
         ) : null}
       </View>
-      {navChevron ? <Text style={styles.chevron}>{'\u203a'}</Text> : null}
+      {navChevron ? <AppIcon name="chevron-right" size={22} color={m3Colors.onSurfaceVariant} /> : null}
       {trailingText ? <Text style={styles.trailingText}>{trailingText}</Text> : null}
     </>
   );
@@ -152,7 +153,6 @@ const styles = StyleSheet.create({
   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',

package/src/renderer/ui/AuthStepShell.tsx

@@ -10,6 +10,7 @@ import {
   type ViewStyle,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { AppIcon } from './app-icon';
 import { colors, fonts, m3Colors, m3Type, spacing } from '../theme/proulr-theme';
 
 type AuthStepShellProps = {
@@ -46,7 +47,7 @@ export function AuthStepShell({
             onPress={onBack}
             style={({ pressed }) => [styles.backBtn, pressed && styles.pressed]}
           >
-            <Text style={styles.backGlyph}>{'\u2039'}</Text>
+            <AppIcon name="back" size={24} color={m3Colors.onSurface} />
             <Text style={styles.backLabel}>{backLabel}</Text>
           </Pressable>
         ) : null}
@@ -90,12 +91,6 @@ const styles = StyleSheet.create({
     marginBottom: spacing.md,
     paddingVertical: spacing.xs,
   },
-  backGlyph: {
-    color: m3Colors.onSurface,
-    fontSize: 24,
-    fontFamily: fonts.bold,
-    marginTop: -2,
-  },
   backLabel: {
     color: colors.textMuted,
     fontSize: 14,

package/src/renderer/ui/InfoBanner.tsx

@@ -4,7 +4,7 @@ import { colors, fonts, radius, spacing } from '../theme/proulr-theme';
 
 export function InfoBanner({
   message,
-  icon = 'ℹ',
+  icon,
   appIcon,
   onDismiss,
 }: {
@@ -13,11 +13,13 @@ export function InfoBanner({
   appIcon?: AppIconName;
   onDismiss?: () => void;
 }) {
+  const resolvedAppIcon: AppIconName | undefined = appIcon ?? (icon ? undefined : 'info');
+
   return (
     <View style={styles.infoBanner}>
       <View style={styles.infoIconWrap}>
-        {appIcon ? (
-          <AppIcon name={appIcon} size={APP_ICON_SIZE.banner} color={colors.accentText} />
+        {resolvedAppIcon ? (
+          <AppIcon name={resolvedAppIcon} size={APP_ICON_SIZE.banner} color={colors.accentText} />
         ) : (
           <Text style={styles.infoIcon}>{icon}</Text>
         )}

package/src/renderer/ui/ListItem.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { AppIcon } from './app-icon';
 import { colors, fonts, m3Colors, spacing } from '../theme/proulr-theme';
 
 export function ListItem({
@@ -34,7 +35,7 @@ export function ListItem({
           </Text>
         ) : null}
       </View>
-      {navChevron ? <Text style={styles.chevron}>{'\u203a'}</Text> : null}
+      {navChevron ? <AppIcon name="chevron-right" size={22} color={m3Colors.onSurfaceVariant} /> : null}
       {trailing ? <View style={styles.listTrailing}>{trailing}</View> : null}
     </>
   );
@@ -65,5 +66,4 @@ const styles = StyleSheet.create({
   listTitle: { color: colors.textPrimary, fontSize: 15, fontFamily: fonts.semibold },
   listSubtitle: { color: colors.textSecondary, fontSize: 13, marginTop: 2 },
   listTrailing: { alignItems: 'flex-end' },
-  chevron: { color: m3Colors.onSurfaceVariant, fontSize: 22 },
 });

package/src/renderer/ui/SelectRow.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Modal, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { AppButton } from './AppButton';
+import { AppIcon } from './app-icon';
 import { colors, fonts, radius, spacing } from '../theme/proulr-theme';
 
 function OptionModal({
@@ -31,7 +32,7 @@ function OptionModal({
               return (
                 <Pressable key={opt} style={styles.optionRow} onPress={() => onSelect(opt)}>
                   <Text style={{ color: isSel ? colors.accentText : colors.white, fontSize: 16 }}>{opt}</Text>
-                  {isSel ? <Text style={{ color: colors.accent, fontSize: 16 }}>{'\u2713'}</Text> : null}
+                  {isSel ? <AppIcon name="check" size={16} color={colors.accent} /> : null}
                 </Pressable>
               );
             })}
@@ -66,7 +67,7 @@ export function SelectRow({
         <Text style={styles.selectValue} numberOfLines={1}>
           {value || 'Selecionar'}
         </Text>
-        <Text style={styles.chevron}>{'\u203a'}</Text>
+        <AppIcon name="chevron-right" size={18} color={colors.textSecondary} />
       </Pressable>
       <OptionModal
         title={label}
@@ -102,7 +103,7 @@ export function MultiSelectRow({
         <Text style={styles.selectValue} numberOfLines={1}>
           {values.length ? values.join(', ') : 'Selecionar'}
         </Text>
-        <Text style={styles.chevron}>{'\u203a'}</Text>
+        <AppIcon name="chevron-right" size={18} color={colors.textSecondary} />
       </Pressable>
       <OptionModal
         title={label}
@@ -134,7 +135,6 @@ const styles = StyleSheet.create({
   },
   selectLabel: { flex: 1, color: colors.white, fontSize: 15, fontFamily: fonts.medium },
   selectValue: { color: colors.textSecondary, fontSize: 14, maxWidth: 160 },
-  chevron: { color: colors.textSecondary, fontSize: 18 },
   modalBackdrop: { flex: 1, backgroundColor: colors.overlay, justifyContent: 'flex-end' },
   modalSheet: {
     backgroundColor: colors.surface,