@proulr/sdui-components 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
   "exports": {

package/src/bdc/compile-bdc-to-wire.ts

@@ -44,6 +44,19 @@ function textFromChildren(children: BdcElement[]): string {
     .trim();
 }
 
+function mapHeaderToWire(header: Record<string, unknown>): SduiHeaderWire {
+  const wire: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(header)) {
+    if (key === 'slotBlocks' || key === 'slot_blocks' || key === 'headerSlot') continue;
+    if (key === 'headerSearch') {
+      wire.header_search = value;
+      continue;
+    }
+    wire[camelToSnake(key)] = value;
+  }
+  return wire as SduiHeaderWire;
+}
+
 export function compileBdcBlock(element: BdcElement, path = '0'): SduiBlockWire {
   return mapBlock(element, path);
 }
@@ -105,7 +118,7 @@ export function compileBdcToWire(root: BdcElement): SduiScreenWire {
     .filter((child) => child.type !== '_fragment')
     .map((child, index) => mapBlock(child, String(index)));
 
-  const compiledHeader = header ? { ...header } : undefined;
+  const compiledHeader = header ? mapHeaderToWire(header as Record<string, unknown>) : undefined;
   if (compiledHeader && headerSlot) {
     const slotRoots = Array.isArray(headerSlot) ? headerSlot : [headerSlot];
     compiledHeader.slot_blocks = slotRoots.map((slot, index) => mapBlock(slot, `header.${index}`));

package/src/bdc/components/native-blocks.tsx

@@ -29,6 +29,7 @@ export const ProfileOnboarding: BdcComponent = (props) => nativeBlock('profile_o
 export const AlbumGrid: BdcComponent = (props) => nativeBlock('album_grid', props);
 export const AlbumDetail: BdcComponent = (props) => nativeBlock('album_detail', props);
 export const NewPostComposer: BdcComponent = (props) => nativeBlock('new_post_composer', props);
+export const NewStoryComposer: BdcComponent = (props) => nativeBlock('new_story_composer', props);
 export const PostComments: BdcComponent = (props) => nativeBlock('post_comments', props);
 export const SocialProfile: BdcComponent = (props) => nativeBlock('social_profile', props);
 export const SettingsHome: BdcComponent = (props) => nativeBlock('settings_home', props);

package/src/bdc/index.ts

@@ -25,6 +25,7 @@ export {
   ChatThread,
   FlashInboxList,
   NewPostComposer,
+  NewStoryComposer,
   PostComments,
   ProfileOnboarding,
   ProfileSelf,

package/src/renderer/blocks/SduiNativeDomainBlocks.tsx

@@ -31,6 +31,7 @@ function NativeBlockShell({
     | 'renderAlbumGrid'
     | 'renderAlbumDetail'
     | 'renderNewPostComposer'
+    | 'renderNewStoryComposer'
     | 'renderPostComments'
     | 'renderSocialProfile'
     | 'renderSettingsHome'
@@ -118,6 +119,10 @@ export function SduiNewPostComposerBlock(props: SduiBlockRenderProps) {
   return <NativeBlockShell {...props} rendererKey="renderNewPostComposer" fallbackLabel="Nova publicação" />;
 }
 
+export function SduiNewStoryComposerBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderNewStoryComposer" fallbackLabel="Novo story" />;
+}
+
 export function SduiPostCommentsBlock(props: SduiBlockRenderProps) {
   return <NativeBlockShell {...props} rendererKey="renderPostComments" fallbackLabel="Comentários" />;
 }

package/src/renderer/sdui-component-registry.tsx

@@ -37,6 +37,7 @@ import {
   SduiChatThreadBlock,
   SduiFlashInboxListBlock,
   SduiNewPostComposerBlock,
+  SduiNewStoryComposerBlock,
   SduiPostCommentsBlock,
   SduiProfileOnboardingBlock,
   SduiProfileSelfBlock,
@@ -88,6 +89,7 @@ const REGISTRY: Record<string, SduiBlockComponent> = {
   album_grid: SduiAlbumGridBlock,
   album_detail: SduiAlbumDetailBlock,
   new_post_composer: SduiNewPostComposerBlock,
+  new_story_composer: SduiNewStoryComposerBlock,
   post_comments: SduiPostCommentsBlock,
   social_profile: SduiSocialProfileBlock,
   settings_home: SduiSettingsHomeBlock,

package/src/renderer/sdui-hybrid-renderer-context.tsx

@@ -66,6 +66,7 @@ export type SduiHybridRenderers = {
   renderAlbumGrid?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderAlbumDetail?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderNewPostComposer?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderNewStoryComposer?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderPostComments?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderSocialProfile?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderSettingsHome?: (props: SduiNativeBlockRenderProps) => ReactNode;

package/src/renderer/ui/app-glyphs.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, Text, View } from 'react-native';
 import { m3Colors } from '../theme/proulr-theme';
 
 export type AppChromeGlyphProps = {
@@ -833,48 +833,23 @@ export function AppChromeRepostGlyph({ color = m3Colors.primary, size = 24 }: Ap
 type HeartGlyphProps = AppChromeGlyphProps & { filled?: boolean };
 
 function AppChromeHeartShape({ color = m3Colors.primary, size = 24, filled = false }: HeartGlyphProps) {
-  const stroke = strokeFor(size);
-  const unit = size * 0.26;
-  const fill = filled ? color : 'transparent';
-  const borderW = filled ? 0 : stroke;
-
+  const glyph = filled ? '♥' : '♡';
   return (
     <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
+      <Text
         style={{
-          width: unit * 1.65,
-          height: unit * 1.65,
-          transform: [{ rotate: '-45deg' }],
-          marginTop: unit * 0.18,
+          color,
+          fontSize: size * 0.9,
+          lineHeight: size,
+          height: size,
+          textAlign: 'center',
+          ...(Platform.OS === 'android'
+            ? { includeFontPadding: false, textAlignVertical: 'center' as const }
+            : null),
         }}
       >
-        <View
-          style={{
-            position: 'absolute',
-            width: unit,
-            height: unit * 1.62,
-            borderRadius: unit,
-            backgroundColor: fill,
-            borderWidth: borderW,
-            borderColor: color,
-            top: 0,
-            left: unit * 0.32,
-          }}
-        />
-        <View
-          style={{
-            position: 'absolute',
-            width: unit * 1.62,
-            height: unit,
-            borderRadius: unit,
-            backgroundColor: fill,
-            borderWidth: borderW,
-            borderColor: color,
-            top: unit * 0.32,
-            left: 0,
-          }}
-        />
-      </View>
+        {glyph}
+      </Text>
     </View>
   );
 }
@@ -928,6 +903,60 @@ export function AppChromeHeartFilledGlyph(props: AppChromeGlyphProps) {
   return <AppChromeHeartShape {...props} filled />;
 }
 
+type ThumbsUpGlyphProps = AppChromeGlyphProps & { filled?: boolean };
+
+function AppChromeThumbsUpShape({ color = m3Colors.primary, size = 24, filled = false }: ThumbsUpGlyphProps) {
+  const stroke = strokeFor(size);
+  const palmW = size * 0.46;
+  const palmH = size * 0.34;
+  const thumbW = size * 0.2;
+  const thumbH = size * 0.36;
+  const fill = filled ? color : 'transparent';
+  const borderW = filled ? 0 : stroke;
+  const radius = Math.max(2, size * 0.07);
+
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View style={{ width: palmW, height: palmH + thumbH * 0.62 }}>
+        <View
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: palmW * 0.04,
+            width: thumbW,
+            height: thumbH,
+            borderRadius: thumbW / 2,
+            backgroundColor: fill,
+            borderWidth: borderW,
+            borderColor: color,
+          }}
+        />
+        <View
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            width: palmW,
+            height: palmH,
+            borderRadius: radius,
+            backgroundColor: fill,
+            borderWidth: borderW,
+            borderColor: color,
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+export function AppChromeThumbsUpGlyph(props: AppChromeGlyphProps) {
+  return <AppChromeThumbsUpShape {...props} filled={false} />;
+}
+
+export function AppChromeThumbsUpFilledGlyph(props: AppChromeGlyphProps) {
+  return <AppChromeThumbsUpShape {...props} filled />;
+}
+
 export function AppChromePlusGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
   const stroke = strokeFor(size);
   const arm = size * 0.46;

package/src/renderer/ui/app-icon.tsx

@@ -16,6 +16,8 @@ import {
   AppChromeFlipCameraGlyph,
   AppChromeHeartFilledGlyph,
   AppChromeHeartGlyph,
+  AppChromeThumbsUpFilledGlyph,
+  AppChromeThumbsUpGlyph,
   AppChromeHuntGlyph,
   AppChromeIncognitoGlyph,
   AppChromeListGlyph,
@@ -102,6 +104,8 @@ export type AppIconName =
   | 'repost'
   | 'heart'
   | 'heart-filled'
+  | 'thumbs-up'
+  | 'thumbs-up-filled'
   | 'play'
   | 'pause'
   | 'plus'
@@ -154,6 +158,8 @@ const ICON_REGISTRY: Record<AppIconName, ComponentType<AppChromeGlyphProps>> = {
   repost: AppChromeRepostGlyph,
   heart: AppChromeHeartGlyph,
   'heart-filled': AppChromeHeartFilledGlyph,
+  'thumbs-up': AppChromeThumbsUpGlyph,
+  'thumbs-up-filled': AppChromeThumbsUpFilledGlyph,
   play: AppChromePlayGlyph,
   pause: AppChromePauseGlyph,
   plus: AppChromePlusGlyph,

package/src/renderer/ui/index.ts

@@ -33,6 +33,8 @@ export {
   AppChromeFlipCameraGlyph,
   AppChromeHeartFilledGlyph,
   AppChromeHeartGlyph,
+  AppChromeThumbsUpFilledGlyph,
+  AppChromeThumbsUpGlyph,
   AppChromeHuntGlyph,
   AppChromeIncognitoGlyph,
   AppChromeListGlyph,