@proulr/sdui-components 0.1.0

package/README.md

@@ -0,0 +1,29 @@
+# proulr-sdui-components (Proulr UI — analogia Nuds)
+
+Lib de UI completa do Proulr: identidade Night Stalker OLED + componentes BDC + renderer RN.
+
+## Exports
+
+| Export | Consumidor | Uso |
+|--------|------------|-----|
+| `@proulr/sdui-components/bdc` | BFFs | Autoria com `<Button>`, `<Text>`, `<Screen>` |
+| `@proulr/sdui-components/renderer` | `proulr-app` | Blocos RN + theme |
+
+`jsxImportSource` no tsconfig do BFF: `@proulr/sdui-components/bdc` (resolve `./bdc/jsx-runtime` automaticamente).
+
+## Setup
+
+```bash
+cd ../proulr-sdui-contract && npm install
+npm install
+npm run typecheck
+```
+
+## Novo bloco
+
+1. Adicionar em `src/catalog/block-types.ts`
+2. Criar componente BDC em `src/bdc/components/`
+3. Criar renderer em `src/renderer/blocks/`
+4. Registrar em `sdui-component-registry.tsx`
+
+Ver `docs/adding-a-block-type.md`.

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@proulr/sdui-components",
+  "version": "0.1.0",
+  "main": "./src/renderer/index.ts",
+  "types": "./src/renderer/index.ts",
+  "exports": {
+    "./bdc": "./src/bdc/index.ts",
+    "./bdc/jsx-runtime": "./src/bdc/jsx-runtime.ts",
+    "./renderer": "./src/renderer/index.ts"
+  },
+  "files": [
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/saviorbp/proulr-sdui-components.git"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run typecheck"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@proulr/sdui-contract": "^0.1.0"
+  },
+  "peerDependencies": {
+    "expo-linear-gradient": ">=56",
+    "react": ">=19",
+    "react-native": ">=0.85",
+    "react-native-google-mobile-ads": ">=16",
+    "react-native-safe-area-context": ">=5"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "expo-linear-gradient": {
+      "optional": true
+    },
+    "react-native-google-mobile-ads": {
+      "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^22.20.0",
+    "@types/react": "~19.2.2",
+    "expo-linear-gradient": "~56.0.4",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
+    "typescript": "~6.0.3"
+  }
+}

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

@@ -0,0 +1,123 @@
+import type {
+  SduiActionWire,
+  SduiBlockWire,
+  SduiHeaderWire,
+  SduiScreenMetaWire,
+  SduiScreenWire,
+  StyleWire,
+} from '@proulr/sdui-contract';
+import type { BdcElement } from './jsx-runtime';
+
+function camelToSnake(key: string): string {
+  return key.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
+}
+
+function mapPropsToWire(props: Record<string, unknown>): Record<string, unknown> {
+  const wire: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (key === 'children') continue;
+    if (key === 'actionId') {
+      wire.action_id = value;
+      continue;
+    }
+    if (key === 'style' && value && typeof value === 'object') {
+      const styleWire: Record<string, unknown> = {};
+      for (const [sk, sv] of Object.entries(value as StyleWire)) {
+        styleWire[camelToSnake(sk)] = sv;
+      }
+      wire.style = styleWire;
+      continue;
+    }
+    wire[camelToSnake(key)] = value;
+  }
+  return wire;
+}
+
+function textFromChildren(children: BdcElement[]): string {
+  return children
+    .map((child) => {
+      if (child.type === '_text_node') return String(child.props.value ?? '');
+      if (child.type === 'text' && typeof child.props.text === 'string') return child.props.text;
+      return '';
+    })
+    .join('')
+    .trim();
+}
+
+export function compileBdcBlock(element: BdcElement, path = '0'): SduiBlockWire {
+  return mapBlock(element, path);
+}
+
+function mapBlock(element: BdcElement, path: string): SduiBlockWire {
+  if (element.type === '_text_node') {
+    return { id: path, type: 'text', props: { text: String(element.props.value ?? '') } };
+  }
+
+  const props = mapPropsToWire(element.props);
+
+  if (element.type === 'button' && !props.label) {
+    props.label = textFromChildren(element.children);
+  }
+
+  if (element.type === 'text' && !props.text) {
+    props.text = textFromChildren(element.children);
+  }
+
+  const blockChildren = element.children.filter(
+    (child) => child.type !== '_text_node' && child.type !== '_fragment',
+  );
+
+  return {
+    id: typeof element.props.id === 'string' ? element.props.id : path,
+    type: element.type,
+    props,
+    children: blockChildren.map((child, index) => mapBlock(child, `${path}.${index}`)),
+  };
+}
+
+export function compileBdcToWire(root: BdcElement): SduiScreenWire {
+  if (root.type !== 'screen') {
+    throw new Error('bdc_root_must_be_screen');
+  }
+
+  const {
+    id,
+    header,
+    headerSlot,
+    actions,
+    meta,
+    data,
+    children: _ignored,
+    ...rest
+  } = root.props as {
+    id: string;
+    header?: SduiHeaderWire;
+    headerSlot?: BdcElement | BdcElement[];
+    actions?: Record<string, SduiActionWire>;
+    meta?: SduiScreenMetaWire;
+    data?: Record<string, unknown>;
+    children?: unknown;
+  };
+
+  void rest;
+
+  const blocks = root.children
+    .filter((child) => child.type !== '_fragment')
+    .map((child, index) => mapBlock(child, String(index)));
+
+  const compiledHeader = header ? { ...header } : undefined;
+  if (compiledHeader && headerSlot) {
+    const slotRoots = Array.isArray(headerSlot) ? headerSlot : [headerSlot];
+    compiledHeader.slot_blocks = slotRoots.map((slot, index) => mapBlock(slot, `header.${index}`));
+  }
+
+  return {
+    schema_version: 1,
+    screen_id: id,
+    header: compiledHeader,
+    blocks,
+    data: data ?? {},
+    actions: actions ?? {},
+    meta: meta ?? { bff: undefined, cache_ttl_ms: 30_000, offline_policy: 'cache_only' },
+  };
+}

package/src/bdc/components/discover.tsx

@@ -0,0 +1,55 @@
+import type { BdcComponent, BdcElement } from '../jsx-runtime';
+
+type LayoutProps = {
+  id?: string;
+  gap?: number | string;
+  padding?: number | string;
+  children?: BdcElement[];
+};
+
+function layoutBlock(type: string, props: LayoutProps): BdcElement {
+  return { type, props: { ...props }, children: props.children ?? [] };
+}
+
+type ChipProps = LayoutProps & {
+  label: string;
+  actionId?: string;
+  actionParams?: Record<string, string>;
+  active?: boolean;
+  variant?: 'default' | 'on_header';
+};
+
+export const Chip: BdcComponent = (props) => layoutBlock('chip', props as ChipProps);
+
+type ChipRowProps = LayoutProps & {
+  variant?: 'default' | 'on_header';
+};
+
+export const ChipRow: BdcComponent = (props) => layoutBlock('chip_row', props as ChipRowProps);
+
+type DiscoverGridProps = LayoutProps & {
+  itemsRef: string;
+  columns?: number;
+  profileActionId?: string;
+  adPlacement?: string;
+};
+
+export const DiscoverGrid: BdcComponent = (props) =>
+  layoutBlock('discover_grid', props as DiscoverGridProps);
+
+type DiscoverProfileCardProps = LayoutProps & {
+  profileRef: string;
+  actionId?: string;
+  width?: number;
+};
+
+export const DiscoverProfileCard: BdcComponent = (props) =>
+  layoutBlock('discover_profile_card', props as DiscoverProfileCardProps);
+
+type DiscoverMapProps = LayoutProps & {
+  centerRef?: string;
+  labelRef?: string;
+  height?: number;
+};
+
+export const DiscoverMap: BdcComponent = (props) => layoutBlock('discover_map', props as DiscoverMapProps);

package/src/bdc/components/forms.tsx

@@ -0,0 +1,20 @@
+import type { BdcComponent, BdcElement } from '../jsx-runtime';
+
+type LayoutProps = {
+  id?: string;
+  gap?: number | string;
+  padding?: number | string;
+  children?: BdcElement[];
+};
+
+function layoutBlock(type: string, props: LayoutProps): BdcElement {
+  return { type, props: { ...props }, children: props.children ?? [] };
+}
+
+type TextFieldProps = LayoutProps & {
+  placeholder?: string;
+  dataRef?: string;
+  submitActionId?: string;
+};
+
+export const TextField: BdcComponent = (props) => layoutBlock('text_field', props as TextFieldProps);

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

@@ -0,0 +1,35 @@
+import type { BdcComponent, BdcElement } from '../jsx-runtime';
+
+type NativeBlockProps = {
+  id?: string;
+  dataRef?: string;
+  conversationIdRef?: string;
+  peerIdRef?: string;
+  peerNameRef?: string;
+  handleRef?: string;
+  postIdRef?: string;
+  albumIdRef?: string;
+  profileIdRef?: string;
+};
+
+function nativeBlock(type: string, props: NativeBlockProps): BdcElement {
+  return { type, props: { ...props }, children: [] };
+}
+
+export const FlashInboxList: BdcComponent = (props) => nativeBlock('flash_inbox_list', props);
+export const ChatInboxList: BdcComponent = (props) => nativeBlock('chat_inbox_list', props);
+export const ChatThread: BdcComponent = (props) => nativeBlock('chat_thread', props);
+export const SocialPostFeed: BdcComponent = (props) => nativeBlock('social_post_feed', props);
+export const ThoughtFeed: BdcComponent = (props) => nativeBlock('thought_feed', props);
+export const VerticalVideoPager: BdcComponent = (props) => nativeBlock('vertical_video_pager', props);
+export const ProfileView: BdcComponent = (props) => nativeBlock('profile_view', props);
+export const ProfileSelf: BdcComponent = (props) => nativeBlock('profile_self', props);
+export const ProfileSetup: BdcComponent = (props) => nativeBlock('profile_setup', props);
+export const ProfileOnboarding: BdcComponent = (props) => nativeBlock('profile_onboarding', props);
+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 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);
+export const DiscoverBrowseLocation: BdcComponent = (props) => nativeBlock('discover_browse_location', props);

package/src/bdc/components/social.tsx

@@ -0,0 +1,27 @@
+import type { BdcComponent, BdcElement } from '../jsx-runtime';
+
+type LayoutProps = {
+  id?: string;
+  gap?: number | string;
+  padding?: number | string;
+  children?: BdcElement[];
+};
+
+function layoutBlock(type: string, props: LayoutProps): BdcElement {
+  return { type, props: { ...props }, children: props.children ?? [] };
+}
+
+type StoryRailProps = LayoutProps & {
+  surface?: 'discover' | 'vibes';
+};
+
+export const StoryRail: BdcComponent = (props) => layoutBlock('story_rail', props as StoryRailProps);
+
+type ProfileCompletionBannerProps = LayoutProps & {
+  percentRef?: string;
+  dismissActionId?: string;
+  completeActionId?: string;
+};
+
+export const ProfileCompletionBanner: BdcComponent = (props) =>
+  layoutBlock('profile_completion_banner', props as ProfileCompletionBannerProps);

package/src/bdc/components/ui.tsx

@@ -0,0 +1,114 @@
+import type {
+  SduiActionWire,
+  SduiHeaderWire,
+  SduiScreenMetaWire,
+  StyleWire,
+} from '@proulr/sdui-contract';
+import type { BdcComponent, BdcElement } from '../jsx-runtime';
+
+type LayoutProps = {
+  id?: string;
+  gap?: number | string;
+  padding?: number | string;
+  height?: number;
+  variant?: string;
+  style?: StyleWire;
+  children?: BdcElement[];
+};
+
+function layoutBlock(type: string, props: LayoutProps): BdcElement {
+  return { type, props: { ...props }, children: props.children ?? [] };
+}
+
+export const Screen: BdcComponent = (props) => ({
+  type: 'screen',
+  props,
+  children: (props.children as BdcElement[]) ?? [],
+});
+
+export const Column: BdcComponent = (props) => layoutBlock('column', props as LayoutProps);
+
+export const Row: BdcComponent = (props) => layoutBlock('row', props as LayoutProps);
+
+export const Scroll: BdcComponent = (props) => layoutBlock('scroll', props as LayoutProps);
+
+export const Spacer: BdcComponent = (props) => layoutBlock('spacer', props as LayoutProps);
+
+type TextProps = LayoutProps & {
+  text?: string;
+  variant?: 'headline' | 'title' | 'body' | 'label';
+};
+
+export const Text: BdcComponent = (props) => layoutBlock('text', props as TextProps);
+
+type ButtonProps = LayoutProps & {
+  actionId: string;
+  label?: string;
+  variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger';
+};
+
+export const Button: BdcComponent = (props) => layoutBlock('button', props as ButtonProps);
+
+type InfoBannerProps = LayoutProps & {
+  message: string;
+};
+
+export const InfoBanner: BdcComponent = (props) => layoutBlock('info_banner', props as InfoBannerProps);
+
+type NativeAdProps = LayoutProps & {
+  placement?: string;
+  width?: number;
+  aspect_ratio?: number;
+};
+
+export const NativeAd: BdcComponent = (props) => layoutBlock('native_ad', props as NativeAdProps);
+
+type CardProps = LayoutProps;
+
+export const Card: BdcComponent = (props) => layoutBlock('card', props as CardProps);
+
+type SectionHeaderProps = LayoutProps & {
+  title?: string;
+  actionLabel?: string;
+  actionId?: string;
+};
+
+export const SectionHeader: BdcComponent = (props) =>
+  layoutBlock('section_header', props as SectionHeaderProps);
+
+type ListItemProps = LayoutProps & {
+  title?: string;
+  subtitle?: string;
+  subtitleRef?: string;
+  trailingText?: string;
+  trailingRef?: string;
+  actionId?: string;
+  showDivider?: boolean;
+  showChevron?: boolean;
+};
+
+export const ListItem: BdcComponent = (props) => layoutBlock('list_item', props as ListItemProps);
+
+type ToggleRowProps = LayoutProps & {
+  label?: string;
+  hint?: string;
+  dataRef?: string;
+  toggleActionId?: string;
+  disabled?: boolean;
+};
+
+export const ToggleRow: BdcComponent = (props) => layoutBlock('toggle_row', props as ToggleRowProps);
+
+export type ScreenProps = {
+  id: string;
+  header?: SduiHeaderWire;
+  headerSlot?: BdcElement | BdcElement[];
+  actions?: Record<string, SduiActionWire>;
+  meta?: SduiScreenMetaWire;
+  data?: Record<string, unknown>;
+  children?: BdcElement[];
+};
+
+export function screenProps(props: ScreenProps): ScreenProps {
+  return props;
+}

package/src/bdc/index.ts

@@ -0,0 +1,41 @@
+export { compileBdcToWire, compileBdcBlock } from './compile-bdc-to-wire';
+export {
+  Button,
+  Card,
+  Column,
+  InfoBanner,
+  ListItem,
+  NativeAd,
+  Row,
+  Screen,
+  Scroll,
+  SectionHeader,
+  Spacer,
+  Text,
+  ToggleRow,
+  screenProps,
+} from './components/ui';
+export { Chip, ChipRow, DiscoverGrid, DiscoverMap, DiscoverProfileCard } from './components/discover';
+export { TextField } from './components/forms';
+export { ProfileCompletionBanner, StoryRail } from './components/social';
+export {
+  AlbumDetail,
+  AlbumGrid,
+  ChatInboxList,
+  ChatThread,
+  FlashInboxList,
+  NewPostComposer,
+  PostComments,
+  ProfileOnboarding,
+  ProfileSelf,
+  ProfileSetup,
+  ProfileView,
+  SocialPostFeed,
+  SocialProfile,
+  SettingsHome,
+  DiscoverBrowseLocation,
+  ThoughtFeed,
+  VerticalVideoPager,
+} from './components/native-blocks';
+export type { BdcElement } from './jsx-runtime';
+export type { ScreenProps } from './components/ui';

package/src/bdc/jsx-runtime.ts

@@ -0,0 +1,49 @@
+import type { StyleWire } from '@proulr/sdui-contract';
+
+export type BdcElement = {
+  type: string;
+  props: Record<string, unknown>;
+  children: BdcElement[];
+};
+
+export type BdcComponent = (props: Record<string, unknown>) => BdcElement;
+
+function flattenChild(child: unknown): BdcElement[] {
+  if (child == null || typeof child === 'boolean') return [];
+  if (Array.isArray(child)) return child.flatMap(flattenChild);
+  if (typeof child === 'object' && 'type' in child) return [child as BdcElement];
+  if (typeof child === 'string' || typeof child === 'number') {
+    return [{ type: '_text_node', props: { value: String(child) }, children: [] }];
+  }
+  return [];
+}
+
+function createElement(
+  type: string | BdcComponent,
+  props: Record<string, unknown> | null,
+  ...childInputs: unknown[]
+): BdcElement {
+  const rawProps = props ?? {};
+  const { children: propsChildren, ...restProps } = rawProps as Record<string, unknown> & {
+    children?: unknown;
+  };
+
+  const children = [
+    ...flattenChild(propsChildren),
+    ...childInputs.flatMap(flattenChild),
+  ];
+
+  if (typeof type === 'function') {
+    return type({ ...restProps, children });
+  }
+
+  return { type, props: restProps, children };
+}
+
+export const jsx = createElement;
+export const jsxs = createElement;
+export const Fragment = '_fragment';
+
+export function styleWire(style: StyleWire): { style: StyleWire } {
+  return { style };
+}

package/src/catalog/block-types.ts

@@ -0,0 +1,18 @@
+/** Block types registered in the SDUI renderer (snake_case wire). */
+
+export const SDUI_BLOCK_TYPES = [
+  'text',
+  'button',
+  'column',
+  'row',
+  'scroll',
+  'spacer',
+  'info_banner',
+  'native_ad',
+] as const;
+
+export type SduiBlockType = (typeof SDUI_BLOCK_TYPES)[number];
+
+export function isKnownBlockType(type: string): type is SduiBlockType {
+  return (SDUI_BLOCK_TYPES as readonly string[]).includes(type);
+}

package/src/catalog/style-tokens.ts

@@ -0,0 +1,48 @@
+export type {
+  ColorToken,
+  ShapeToken,
+  SpacingToken,
+  StyleWire,
+  TypeToken,
+} from '@proulr/sdui-contract';
+
+export const COLOR_TOKENS = [
+  'primary',
+  'onPrimary',
+  'primaryContainer',
+  'secondary',
+  'onSecondary',
+  'secondaryContainer',
+  'tertiary',
+  'surface',
+  'onSurface',
+  'onSurfaceVariant',
+  'surfaceContainer',
+  'surfaceContainerHigh',
+  'surfaceContainerHighest',
+  'outline',
+  'error',
+  'onError',
+] as const;
+
+export const SPACING_TOKENS = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;
+
+export const SHAPE_TOKENS = [
+  'cornerExtraSmall',
+  'cornerSmall',
+  'cornerMedium',
+  'cornerLarge',
+  'cornerExtraLarge',
+  'cornerFull',
+] as const;
+
+export const TYPE_TOKENS = [
+  'display',
+  'headline',
+  'title',
+  'titleSmall',
+  'body',
+  'bodySmall',
+  'label',
+  'labelSmall',
+] as const;

package/src/global.d.ts

@@ -0,0 +1 @@
+declare const __DEV__: boolean;

package/src/renderer/SduiScreenRenderer.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import type { SduiScreen } from '@proulr/sdui-contract';
+import { colors } from './theme/proulr-theme';
+import { renderBlockTree } from './sdui-component-registry';
+import { SduiLayoutDebugFrame } from './sdui-layout-debug';
+
+type Props = {
+  screen: SduiScreen;
+  onAction: (actionId: string, vars?: Record<string, string>) => void;
+};
+
+export function SduiScreenRenderer({ screen, onAction }: Props) {
+  return (
+    <SduiLayoutDebugFrame layer="renderer" style={styles.screen}>
+      {screen.blocks.map((block) => (
+        <SduiLayoutDebugFrame key={block.id} layer="block" extra={block.type} style={styles.block}>
+          {renderBlockTree(block, screen.data, onAction)}
+        </SduiLayoutDebugFrame>
+      ))}
+    </SduiLayoutDebugFrame>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: { flex: 1, minHeight: 0, backgroundColor: colors.bg },
+  block: { flex: 1, minHeight: 0 },
+});

package/src/renderer/ads/native-ad-catalog.ts

@@ -0,0 +1,23 @@
+export type NativeAdPlacementConfig = {
+  aspectRatio?: number;
+};
+
+export type NativeAdCatalog = {
+  isEnabled: () => boolean;
+  resolveAdUnitId: (placement: string, testNativeUnitId: string) => string;
+  getPlacementConfig?: (placement: string) => NativeAdPlacementConfig | undefined;
+};
+
+let nativeAdCatalog: NativeAdCatalog | null = null;
+
+export function configureNativeAdCatalog(catalog: NativeAdCatalog): void {
+  nativeAdCatalog = catalog;
+}
+
+export function getNativeAdCatalog(): NativeAdCatalog | null {
+  return nativeAdCatalog;
+}
+
+export const DEFAULT_NATIVE_AD_PLACEMENT = 'discover_grid';
+
+export const DEFAULT_NATIVE_AD_ASPECT_RATIO = 0.82;