@proulr/sdui-components 0.1.0

package/src/renderer/theme/resolve-style-props.ts

@@ -0,0 +1,85 @@
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { ColorToken, ShapeToken, SpacingToken, StyleWire, TypeToken } from '@proulr/sdui-contract';
+import { m3Colors, m3Shape, m3Type, spacing } from './proulr-theme';
+
+function resolveColor(token: ColorToken | undefined): string | undefined {
+  if (!token) return undefined;
+  return m3Colors[token as keyof typeof m3Colors];
+}
+
+function resolveSpacing(token: SpacingToken | number | undefined): number | undefined {
+  if (token == null) return undefined;
+  if (typeof token === 'number') return token;
+  return spacing[token];
+}
+
+function resolveShape(token: ShapeToken | number | undefined): number | undefined {
+  if (token == null) return undefined;
+  if (typeof token === 'number') return token;
+  return m3Shape[token];
+}
+
+function resolveTypography(token: TypeToken | undefined): TextStyle | undefined {
+  if (!token) return undefined;
+  return m3Type[token];
+}
+
+function snakeToCamel(key: string): string {
+  return key.replace(/_([a-z])/g, (_, c: string) => c.toUpperCase());
+}
+
+function normalizeStyleWire(style: StyleWire | Record<string, unknown> | undefined): StyleWire {
+  if (!style) return {};
+  const normalized: StyleWire = {};
+  for (const [key, value] of Object.entries(style)) {
+    const camelKey = snakeToCamel(key) as keyof StyleWire;
+    (normalized as Record<string, unknown>)[camelKey] = value;
+  }
+  return normalized;
+}
+
+export function resolveViewStyleProps(
+  styleWire: StyleWire | Record<string, unknown> | undefined,
+): StyleProp<ViewStyle> {
+  const style = normalizeStyleWire(styleWire);
+  return {
+    backgroundColor: resolveColor(style.background_color),
+    padding: resolveSpacing(style.padding),
+    paddingHorizontal: resolveSpacing(style.padding_horizontal),
+    paddingVertical: resolveSpacing(style.padding_vertical),
+    marginTop: resolveSpacing(style.margin_top),
+    gap: resolveSpacing(style.gap),
+    borderRadius: resolveShape(style.border_radius),
+    borderWidth: style.border_width,
+    borderColor: resolveColor(style.border_color),
+    opacity: style.opacity,
+    flex: style.flex,
+    alignItems: style.align_items,
+  };
+}
+
+export function resolveTextStyleProps(
+  styleWire: StyleWire | Record<string, unknown> | undefined,
+  variant?: string,
+): StyleProp<TextStyle> {
+  const style = normalizeStyleWire(styleWire);
+  const variantType = (style.typography ?? variant) as TypeToken | undefined;
+  return {
+    ...resolveTypography(variantType),
+    color: resolveColor(style.color),
+    marginTop: resolveSpacing(style.margin_top),
+    opacity: style.opacity,
+  };
+}
+
+export function resolveGapProp(gap: unknown, fallback: number): number {
+  if (typeof gap === 'number') return gap;
+  if (typeof gap === 'string' && gap in spacing) return spacing[gap as SpacingToken];
+  return fallback;
+}
+
+export function resolvePaddingProp(padding: unknown, fallback = 0): number {
+  if (typeof padding === 'number') return padding;
+  if (typeof padding === 'string' && padding in spacing) return spacing[padding as SpacingToken];
+  return fallback;
+}

package/src/renderer/ui/AppButton.tsx

@@ -0,0 +1,71 @@
+import { Pressable, StyleSheet, Text } from 'react-native';
+import { fonts, m3Colors, m3Elevation, m3Shape, spacing } from '../theme/proulr-theme';
+import { AppLoadingSpinner } from './AppLoadingSpinner';
+
+export function AppButton({
+  label,
+  onPress,
+  variant = 'primary',
+  disabled,
+  loading,
+  compact,
+}: {
+  label: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger';
+  disabled?: boolean;
+  loading?: boolean;
+  compact?: boolean;
+}) {
+  const isPrimary = variant === 'primary';
+  const isSecondary = variant === 'secondary';
+  const isOutline = variant === 'outline';
+  const isDanger = variant === 'danger';
+  const labelColor =
+    isPrimary || isDanger || isSecondary
+      ? m3Colors.onPrimary
+      : isOutline || variant === 'ghost'
+        ? m3Colors.primary
+        : m3Colors.onPrimary;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled || loading}
+      style={({ pressed }) => [
+        styles.btn,
+        compact && styles.btnCompact,
+        isPrimary && { backgroundColor: m3Colors.primary },
+        isSecondary && { backgroundColor: m3Colors.surfaceContainerHigh },
+        isDanger && { backgroundColor: m3Colors.error },
+        isOutline && {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderColor: m3Colors.outline,
+        },
+        variant === 'ghost' && { backgroundColor: 'transparent' },
+        (disabled || loading) && { opacity: 0.38 },
+        pressed && { opacity: 0.85 },
+        (isPrimary || isSecondary) && m3Elevation.level1,
+      ]}
+    >
+      {loading ? (
+        <AppLoadingSpinner color={labelColor} />
+      ) : (
+        <Text style={[styles.btnText, { color: labelColor }]}>{label}</Text>
+      )}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  btn: {
+    height: 48,
+    borderRadius: m3Shape.cornerFull,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: spacing.xl,
+  },
+  btnCompact: { height: 40, paddingHorizontal: spacing.sm },
+  btnText: { fontSize: 14, fontFamily: fonts.medium, letterSpacing: 0.1 },
+});

package/src/renderer/ui/AppLoadingSpinner.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ActivityIndicator, StyleSheet, View, ViewStyle } from 'react-native';
+import { m3Colors } from '../theme/proulr-theme';
+
+export const loadingIndicatorSize = 'large' as const;
+export const loadingIndicatorColor = m3Colors.primary;
+
+type LoadingIndicatorProps = {
+  fullScreen?: boolean;
+  color?: string;
+  style?: ViewStyle;
+};
+
+export function AppLoadingSpinner({
+  fullScreen = false,
+  color = loadingIndicatorColor,
+  style,
+}: LoadingIndicatorProps) {
+  const spinner = <ActivityIndicator color={color} size={loadingIndicatorSize} />;
+
+  if (fullScreen) {
+    return <View style={[styles.fullScreen, style]}>{spinner}</View>;
+  }
+
+  if (style) {
+    return <View style={style}>{spinner}</View>;
+  }
+
+  return spinner;
+}
+
+const styles = StyleSheet.create({
+  fullScreen: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/renderer/ui/AuthStepShell.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { colors, fonts, m3Colors, m3Type, spacing } from '../theme/proulr-theme';
+
+type AuthStepShellProps = {
+  title: string;
+  subtitle?: string;
+  onBack?: () => void;
+  backLabel?: string;
+  headerSlot?: React.ReactNode;
+  children: React.ReactNode;
+  contentStyle?: ViewStyle;
+};
+
+/** Shell de auth/onboarding — título inline, sem chrome pill. */
+export function AuthStepShell({
+  title,
+  subtitle,
+  onBack,
+  backLabel = 'Voltar',
+  headerSlot,
+  children,
+  contentStyle,
+}: AuthStepShellProps) {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.root}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      <View style={[styles.inner, { paddingTop: insets.top + spacing.md }]}>
+        {onBack ? (
+          <Pressable
+            accessibilityRole="button"
+            onPress={onBack}
+            style={({ pressed }) => [styles.backBtn, pressed && styles.pressed]}
+          >
+            <Text style={styles.backGlyph}>{'\u2039'}</Text>
+            <Text style={styles.backLabel}>{backLabel}</Text>
+          </Pressable>
+        ) : null}
+
+        {headerSlot ? <View style={styles.headerSlot}>{headerSlot}</View> : null}
+
+        <Text style={styles.title}>{title}</Text>
+        {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
+
+        <ScrollView
+          style={styles.scroll}
+          contentContainerStyle={[
+            styles.scrollContent,
+            { paddingBottom: insets.bottom + spacing.xxl },
+            contentStyle,
+          ]}
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+        >
+          {children}
+        </ScrollView>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: m3Colors.surface,
+  },
+  inner: {
+    flex: 1,
+    paddingHorizontal: spacing.xl,
+  },
+  backBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    gap: spacing.xs,
+    marginBottom: spacing.md,
+    paddingVertical: spacing.xs,
+  },
+  backGlyph: {
+    color: m3Colors.onSurface,
+    fontSize: 24,
+    fontFamily: fonts.bold,
+    marginTop: -2,
+  },
+  backLabel: {
+    color: colors.textMuted,
+    fontSize: 14,
+    fontFamily: fonts.medium,
+  },
+  pressed: {
+    opacity: 0.6,
+  },
+  headerSlot: {
+    alignItems: 'center',
+    marginBottom: spacing.lg,
+  },
+  title: {
+    ...m3Type.headline,
+    fontFamily: fonts.extrabold,
+    color: m3Colors.onSurface,
+  },
+  subtitle: {
+    ...m3Type.body,
+    color: m3Colors.onSurfaceVariant,
+    marginTop: spacing.sm,
+  },
+  scroll: {
+    flex: 1,
+    marginTop: spacing.xl,
+  },
+  scrollContent: {
+    gap: spacing.sm,
+  },
+});

package/src/renderer/ui/Card.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import { cardStyle } from '../theme/proulr-theme';
+
+export function Card({ children, style }: { children: React.ReactNode; style?: ViewStyle }) {
+  return <View style={[styles.card, style]}>{children}</View>;
+}
+
+const styles = StyleSheet.create({
+  card: {
+    ...cardStyle,
+  },
+});

package/src/renderer/ui/DateField.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { TextInput, TextInputProps, ViewStyle } from 'react-native';
+import { maskDateBR } from '../lib/brazilian-date-input';
+import { TextField } from './TextField';
+
+export function DateField({
+  value,
+  onChange,
+  placeholder = 'DD/MM/AAAA',
+  containerStyle,
+  inputRef,
+  returnKeyType,
+  onSubmitEditing,
+}: {
+  value: string;
+  onChange: (masked: string) => void;
+  placeholder?: string;
+  containerStyle?: ViewStyle;
+  inputRef?: React.Ref<TextInput>;
+  returnKeyType?: TextInputProps['returnKeyType'];
+  onSubmitEditing?: TextInputProps['onSubmitEditing'];
+}) {
+  return (
+    <TextField
+      inputRef={inputRef}
+      placeholder={placeholder}
+      keyboardType="number-pad"
+      maxLength={10}
+      value={value}
+      returnKeyType={returnKeyType}
+      onSubmitEditing={onSubmitEditing}
+      onChangeText={(t) => onChange(maskDateBR(t))}
+      containerStyle={containerStyle}
+    />
+  );
+}

package/src/renderer/ui/InfoBanner.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { colors, fonts, radius, spacing } from '../theme/proulr-theme';
+
+export function InfoBanner({
+  message,
+  icon = 'ℹ',
+  onDismiss,
+}: {
+  message: string;
+  icon?: string;
+  onDismiss?: () => void;
+}) {
+  return (
+    <View style={styles.infoBanner}>
+      <View style={styles.infoIconWrap}>
+        <Text style={styles.infoIcon}>{icon}</Text>
+      </View>
+      <Text style={styles.infoText}>{message}</Text>
+      {onDismiss && (
+        <Pressable onPress={onDismiss} hitSlop={8}>
+          <Text style={styles.infoDismiss}>✕</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  infoBanner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    backgroundColor: colors.accentSoft,
+    borderRadius: radius.lg,
+    padding: spacing.md,
+    borderWidth: 1,
+    borderColor: colors.border,
+  },
+  infoIconWrap: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: colors.surface2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  infoIcon: { fontSize: 16, color: colors.accentText },
+  infoText: { flex: 1, color: colors.textSecondary, fontSize: 13, lineHeight: 18, fontFamily: fonts.medium },
+  infoDismiss: { color: colors.textMuted, fontSize: 16 },
+});

package/src/renderer/ui/TextField.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, TextInputProps, View, ViewStyle } from 'react-native';
+import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+
+export function TextField(
+  props: TextInputProps & {
+    containerStyle?: ViewStyle;
+    focused?: boolean;
+    inputRef?: React.Ref<TextInput>;
+  },
+) {
+  const { containerStyle, focused, inputRef, ...rest } = props;
+  return (
+    <View
+      style={[
+        styles.field,
+        focused && { borderColor: m3Colors.primary, borderWidth: 2 },
+        containerStyle,
+      ]}
+    >
+      <TextInput
+        ref={inputRef}
+        placeholderTextColor={m3Colors.onSurfaceVariant}
+        style={styles.fieldInput}
+        {...rest}
+      />
+    </View>
+  );
+}
+
+export function PasswordField(
+  props: TextInputProps & {
+    containerStyle?: ViewStyle;
+    inputRef?: React.Ref<TextInput>;
+  },
+) {
+  const { containerStyle, inputRef, ...rest } = props;
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <View style={[styles.field, styles.passwordField, containerStyle]}>
+      <TextInput
+        ref={inputRef}
+        placeholderTextColor={m3Colors.onSurfaceVariant}
+        style={[styles.fieldInput, styles.passwordInput]}
+        secureTextEntry={!visible}
+        {...rest}
+      />
+      <Pressable
+        onPress={() => setVisible((v) => !v)}
+        hitSlop={8}
+        style={styles.passwordToggle}
+        accessibilityLabel={visible ? 'Ocultar senha' : 'Mostrar senha'}
+      >
+        <Text style={styles.passwordToggleIcon}>{visible ? '🙈' : '👁'}</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  field: {
+    minHeight: 56,
+    borderRadius: m3Shape.cornerExtraSmall,
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: m3Colors.outline,
+    paddingHorizontal: spacing.sm,
+    justifyContent: 'center',
+  },
+  fieldInput: { color: m3Colors.onSurface, fontSize: 16, fontFamily: fonts.regular },
+  passwordField: { flexDirection: 'row', alignItems: 'center', paddingRight: spacing.sm },
+  passwordInput: { flex: 1 },
+  passwordToggle: {
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  passwordToggleIcon: { fontSize: 18 },
+});

package/src/renderer/ui/compose-audience-pill.tsx

@@ -0,0 +1,47 @@
+import { Pressable, StyleSheet, Text } from 'react-native';
+import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+
+export function ComposeAudiencePill({
+  label,
+  onPress,
+}: {
+  label: string;
+  onPress?: () => void;
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={!onPress}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      style={({ pressed }) => [styles.pill, pressed && onPress && { opacity: 0.82 }]}
+    >
+      <Text style={styles.label}>{label}</Text>
+      <Text style={styles.chevron}>{'\u25BE'}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  pill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+    borderRadius: m3Shape.cornerFull,
+    borderWidth: 1,
+    borderColor: m3Colors.primary,
+    backgroundColor: m3Colors.primaryContainer,
+  },
+  label: {
+    color: m3Colors.onPrimaryContainer,
+    fontFamily: fonts.medium,
+    fontSize: 13,
+  },
+  chevron: {
+    color: m3Colors.onPrimaryContainer,
+    fontSize: 14,
+    marginTop: 1,
+  },
+});