@proulr/sdui-components 0.1.0

package/src/renderer/ui/compose-recent-media-grid.tsx

@@ -0,0 +1,268 @@
+import { useMemo } from 'react';
+import {
+  Image,
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
+import { AppLoadingSpinner } from './AppLoadingSpinner';
+import { ComposeCameraGlyph } from './compose-glyphs';
+import { StoryTextGlyph } from './story-glyphs';
+
+export type ComposeRecentMediaItem = {
+  id: string;
+  uri: string;
+  mediaType: 'photo' | 'video';
+  duration?: number;
+};
+
+const GRID_COLUMNS = 3;
+const GRID_GAP = 2;
+const GRID_PANEL_MIN_HEIGHT = 220;
+const GRID_MAX_CELLS = 30;
+
+type GridCell =
+  | { id: string; kind: 'camera' }
+  | { id: string; kind: 'text' }
+  | (ComposeRecentMediaItem & { kind: 'asset' });
+
+function chunkGridRows(cells: GridCell[], columns: number): GridCell[][] {
+  const rows: GridCell[][] = [];
+  for (let index = 0; index < cells.length; index += columns) {
+    rows.push(cells.slice(index, index + columns));
+  }
+  return rows;
+}
+
+export function ComposeRecentMediaGrid({
+  items,
+  loading,
+  selectedId,
+  selectedIds,
+  emptyHint,
+  onSelectCamera,
+  onSelectText,
+  onSelectItem,
+  onSelectFromLibrary,
+}: {
+  items: ComposeRecentMediaItem[];
+  loading?: boolean;
+  selectedId?: string | null;
+  selectedIds?: string[];
+  emptyHint?: string;
+  onSelectCamera: () => void;
+  onSelectText?: () => void;
+  onSelectItem: (item: ComposeRecentMediaItem) => void;
+  onSelectFromLibrary: () => void;
+}) {
+  const { width } = useWindowDimensions();
+  const cellSize = useMemo(() => {
+    const horizontalPad = spacing.md * 2;
+    return Math.floor((width - horizontalPad - GRID_GAP * (GRID_COLUMNS - 1)) / GRID_COLUMNS);
+  }, [width]);
+
+  const gridRows = useMemo(() => {
+    const reservedSlots = 1 + (onSelectText ? 1 : 0);
+    const cells: GridCell[] = [
+      { id: '__camera__', kind: 'camera' },
+      ...(onSelectText ? [{ id: '__text__', kind: 'text' as const }] : []),
+      ...items.slice(0, GRID_MAX_CELLS - reservedSlots).map((item) => ({ ...item, kind: 'asset' as const })),
+    ];
+    return chunkGridRows(cells, GRID_COLUMNS);
+  }, [items, onSelectText]);
+
+  return (
+    <View style={styles.panel}>
+      <View style={styles.header}>
+        <Text style={styles.albumLabel}>Recentes</Text>
+
+        <Pressable
+          onPress={onSelectFromLibrary}
+          accessibilityRole="button"
+          accessibilityLabel="Selecionar da galeria"
+          style={({ pressed }) => [styles.selectBtn, pressed && { opacity: 0.85 }]}
+        >
+          <Text style={styles.selectLabel}>Selecionar</Text>
+        </Pressable>
+      </View>
+
+      {loading ? (
+        <View style={[styles.loadingWrap, { minHeight: GRID_PANEL_MIN_HEIGHT }]}>
+          <AppLoadingSpinner />
+        </View>
+      ) : (
+        <View style={styles.grid}>
+          {items.length === 0 && emptyHint ? (
+            <Text style={styles.emptyHint}>{emptyHint}</Text>
+          ) : null}
+          {gridRows.map((row, rowIndex) => (
+            <View key={`row-${rowIndex}`} style={styles.gridRow}>
+              {row.map((item) => {
+                if (item.kind === 'camera') {
+                  return (
+                    <Pressable
+                      key={item.id}
+                      onPress={onSelectCamera}
+                      accessibilityRole="button"
+                      accessibilityLabel="Abrir câmera"
+                      style={({ pressed }) => [
+                        styles.cell,
+                        { width: cellSize, height: cellSize },
+                        pressed && { opacity: 0.85 },
+                      ]}
+                    >
+                      <ComposeCameraGlyph color={m3Colors.onSurface} />
+                    </Pressable>
+                  );
+                }
+
+                if (item.kind === 'text') {
+                  return (
+                    <Pressable
+                      key={item.id}
+                      onPress={onSelectText}
+                      accessibilityRole="button"
+                      accessibilityLabel="Criar story de texto"
+                      style={({ pressed }) => [
+                        styles.cell,
+                        { width: cellSize, height: cellSize },
+                        pressed && { opacity: 0.85 },
+                      ]}
+                    >
+                      <StoryTextGlyph color={m3Colors.onSurface} size={32} />
+                      <Text style={styles.textCellLabel}>Texto</Text>
+                    </Pressable>
+                  );
+                }
+
+                const selected =
+                  selectedIds?.includes(item.id) || selectedId === item.id;
+                return (
+                  <Pressable
+                    key={item.id}
+                    onPress={() => onSelectItem(item)}
+                    accessibilityRole="button"
+                    accessibilityLabel={item.mediaType === 'video' ? 'Selecionar vídeo' : 'Selecionar foto'}
+                    style={({ pressed }) => [
+                      styles.cell,
+                      { width: cellSize, height: cellSize },
+                      selected && styles.cellSelected,
+                      pressed && { opacity: 0.9 },
+                    ]}
+                  >
+                    <Image source={{ uri: item.uri }} style={styles.thumb} resizeMode="cover" />
+                    {item.mediaType === 'video' ? (
+                      <View style={styles.videoBadge}>
+                        <Text style={styles.videoBadgeText}>
+                          {formatVideoDuration(item.duration)}
+                        </Text>
+                      </View>
+                    ) : null}
+                  </Pressable>
+                );
+              })}
+            </View>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+}
+
+function formatVideoDuration(duration?: number): string {
+  if (!duration || duration <= 0) return 'Vídeo';
+  const total = Math.round(duration);
+  const minutes = Math.floor(total / 60);
+  const seconds = total % 60;
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+}
+
+const styles = StyleSheet.create({
+  panel: {
+    marginTop: spacing.md,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: m3Colors.outlineVariant,
+    backgroundColor: m3Colors.surfaceContainer,
+    paddingTop: spacing.sm,
+    marginHorizontal: -spacing.md,
+    paddingHorizontal: spacing.md,
+    paddingBottom: spacing.sm,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: spacing.sm,
+  },
+  albumLabel: {
+    color: m3Colors.onSurface,
+    ...m3Type.label,
+  },
+  selectBtn: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.xs,
+    borderRadius: m3Shape.cornerFull,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    borderWidth: 1,
+    borderColor: m3Colors.outlineVariant,
+  },
+  selectLabel: {
+    color: m3Colors.onSurface,
+    fontFamily: fonts.medium,
+    fontSize: 13,
+  },
+  loadingWrap: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyHint: {
+    color: m3Colors.onSurfaceVariant,
+    ...m3Type.bodySmall,
+    marginBottom: spacing.sm,
+  },
+  grid: {
+    gap: GRID_GAP,
+  },
+  gridRow: {
+    flexDirection: 'row',
+    gap: GRID_GAP,
+  },
+  cell: {
+    borderRadius: m3Shape.cornerSmall,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  cellSelected: {
+    borderWidth: 2,
+    borderColor: m3Colors.primary,
+  },
+  thumb: {
+    width: '100%',
+    height: '100%',
+  },
+  videoBadge: {
+    position: 'absolute',
+    left: spacing.xs,
+    bottom: spacing.xs,
+    paddingHorizontal: spacing.xs,
+    paddingVertical: 2,
+    borderRadius: m3Shape.cornerExtraSmall,
+    backgroundColor: m3Colors.scrim,
+  },
+  videoBadgeText: {
+    color: m3Colors.onPrimary,
+    fontFamily: fonts.medium,
+    fontSize: 10,
+  },
+  textCellLabel: {
+    marginTop: spacing.xs,
+    color: m3Colors.onSurfaceVariant,
+    fontFamily: fonts.medium,
+    fontSize: 11,
+  },
+});

package/src/renderer/ui/compose-reply-audience-sheet.tsx

@@ -0,0 +1,155 @@
+import type { ReactNode } from 'react';
+import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
+
+export type ComposeReplyAudienceValue = 'everyone' | 'followers' | 'mentioned';
+
+export type ComposeReplyAudienceOption = {
+  value: ComposeReplyAudienceValue;
+  label: string;
+  hint: string;
+  icon: ReactNode;
+};
+
+export function ComposeReplyAudienceSheet({
+  visible,
+  value,
+  options,
+  onClose,
+  onSelect,
+}: {
+  visible: boolean;
+  value: ComposeReplyAudienceValue;
+  options: ComposeReplyAudienceOption[];
+  onClose: () => void;
+  onSelect: (value: ComposeReplyAudienceValue) => void;
+}) {
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <View style={styles.backdrop}>
+        <Pressable style={styles.backdropPress} onPress={onClose} accessibilityLabel="Fechar" />
+        <View style={styles.sheet}>
+          <View style={styles.handle} />
+          <Text style={styles.title}>Quem pode responder?</Text>
+          <Text style={styles.subtitle}>
+            Escolha quem pode responder a este post. Perfis mencionados sempre poderão responder.
+          </Text>
+
+          {options.map((option) => {
+            const selected = option.value === value;
+            return (
+              <Pressable
+                key={option.value}
+                onPress={() => {
+                  onSelect(option.value);
+                  onClose();
+                }}
+                accessibilityRole="button"
+                accessibilityState={{ selected }}
+                style={({ pressed }) => [styles.option, pressed && { opacity: 0.86 }]}
+              >
+                <View style={styles.optionIconWrap}>{option.icon}</View>
+                <View style={styles.optionBody}>
+                  <Text style={styles.optionLabel}>{option.label}</Text>
+                  <Text style={styles.optionHint}>{option.hint}</Text>
+                </View>
+                {selected ? (
+                  <View style={styles.checkBadge}>
+                    <Text style={styles.checkMark}>{'\u2713'}</Text>
+                  </View>
+                ) : (
+                  <View style={styles.checkSpacer} />
+                )}
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  backdropPress: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: m3Colors.scrim,
+  },
+  sheet: {
+    backgroundColor: m3Colors.surface,
+    borderTopLeftRadius: m3Shape.cornerExtraLarge,
+    borderTopRightRadius: m3Shape.cornerExtraLarge,
+    paddingHorizontal: spacing.lg,
+    paddingBottom: spacing.xl,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: m3Colors.outlineVariant,
+  },
+  handle: {
+    alignSelf: 'center',
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: m3Colors.outline,
+    marginTop: spacing.sm,
+    marginBottom: spacing.md,
+  },
+  title: {
+    color: m3Colors.onSurface,
+    ...m3Type.titleSmall,
+    fontFamily: fonts.bold,
+    marginBottom: spacing.xs,
+  },
+  subtitle: {
+    color: m3Colors.onSurfaceVariant,
+    ...m3Type.bodySmall,
+    marginBottom: spacing.md,
+    lineHeight: 18,
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: spacing.md,
+    gap: spacing.md,
+  },
+  optionIconWrap: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: m3Colors.primary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  optionBody: {
+    flex: 1,
+    minWidth: 0,
+  },
+  optionLabel: {
+    color: m3Colors.onSurface,
+    fontFamily: fonts.semibold,
+    fontSize: 16,
+  },
+  optionHint: {
+    color: m3Colors.onSurfaceVariant,
+    ...m3Type.bodySmall,
+    marginTop: 2,
+  },
+  checkBadge: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: m3Colors.primary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkMark: {
+    color: m3Colors.onPrimary,
+    fontSize: 14,
+    fontFamily: fonts.bold,
+  },
+  checkSpacer: {
+    width: 24,
+  },
+});

package/src/renderer/ui/compose-screen-header.tsx

@@ -0,0 +1,115 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
+import { AppLoadingSpinner } from './AppLoadingSpinner';
+import { ComposeCloseGlyph } from './compose-glyphs';
+
+export function ComposeScreenHeader({
+  title,
+  actionLabel = 'Publicar',
+  canAction,
+  loading,
+  onClose,
+  onAction,
+}: {
+  title?: string;
+  actionLabel?: string;
+  canAction: boolean;
+  loading?: boolean;
+  onClose: () => void;
+  onAction: () => void;
+}) {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View style={[styles.header, { paddingTop: insets.top + spacing.xs }]}>
+      <Pressable
+        onPress={onClose}
+        hitSlop={10}
+        accessibilityRole="button"
+        accessibilityLabel="Fechar"
+        style={styles.closeBtn}
+      >
+        <ComposeCloseGlyph />
+      </Pressable>
+
+      {title ? (
+        <Text style={styles.title} numberOfLines={1}>
+          {title}
+        </Text>
+      ) : (
+        <View style={styles.titleSpacer} />
+      )}
+
+      <Pressable
+        onPress={onAction}
+        disabled={!canAction || loading}
+        accessibilityRole="button"
+        accessibilityLabel={actionLabel}
+        style={({ pressed }) => [
+          styles.publishPill,
+          canAction && styles.publishPillActive,
+          (!canAction || loading) && styles.publishPillDisabled,
+          pressed && canAction && { opacity: 0.88 },
+        ]}
+      >
+        {loading ? (
+          <AppLoadingSpinner color={m3Colors.onPrimary} />
+        ) : (
+          <Text style={[styles.publishLabel, canAction && styles.publishLabelActive]}>{actionLabel}</Text>
+        )}
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: spacing.md,
+    paddingBottom: spacing.sm,
+    gap: spacing.sm,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: m3Colors.outlineVariant,
+    backgroundColor: m3Colors.surface,
+  },
+  closeBtn: {
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    flex: 1,
+    color: m3Colors.onSurface,
+    ...m3Type.titleSmall,
+    textAlign: 'center',
+  },
+  titleSpacer: {
+    flex: 1,
+  },
+  publishPill: {
+    minWidth: 88,
+    height: 36,
+    borderRadius: m3Shape.cornerFull,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: spacing.md,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+  },
+  publishPillActive: {
+    backgroundColor: m3Colors.primary,
+  },
+  publishPillDisabled: {
+    opacity: 0.45,
+  },
+  publishLabel: {
+    color: m3Colors.onSurfaceVariant,
+    fontFamily: fonts.semibold,
+    fontSize: 14,
+  },
+  publishLabelActive: {
+    color: m3Colors.onPrimary,
+  },
+});

package/src/renderer/ui/compose-text-area.tsx

@@ -0,0 +1,94 @@
+import type { ReactNode } from 'react';
+import { Platform, Pressable, StyleSheet, TextInput, TextInputProps, View } from 'react-native';
+import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+
+export function ComposeTextArea(props: TextInputProps) {
+  return (
+    <TextInput
+      placeholder="O que está acontecendo?"
+      placeholderTextColor={m3Colors.onSurfaceVariant}
+      multiline
+      style={styles.input}
+      {...(Platform.OS === 'android' ? { includeFontPadding: false } : {})}
+      {...props}
+    />
+  );
+}
+
+export function ComposeMediaPreviewFrame({
+  children,
+  onRemove,
+}: {
+  children: ReactNode;
+  onRemove: () => void;
+}) {
+  return (
+    <View style={styles.previewWrap}>
+      <View style={styles.preview}>{children}</View>
+      <Pressable
+        onPress={onRemove}
+        accessibilityRole="button"
+        accessibilityLabel="Remover mídia"
+        style={styles.previewRemove}
+      >
+        <ComposeRemoveGlyph />
+      </Pressable>
+    </View>
+  );
+}
+
+function ComposeRemoveGlyph() {
+  return (
+    <View style={styles.removeGlyph}>
+      <View style={[styles.removeLine, { transform: [{ rotate: '45deg' }] }]} />
+      <View style={[styles.removeLine, { transform: [{ rotate: '-45deg' }] }]} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  input: {
+    color: m3Colors.onSurface,
+    fontFamily: fonts.regular,
+    fontSize: 20,
+    lineHeight: 28,
+    minHeight: 120,
+    textAlignVertical: 'top',
+    paddingTop: spacing.xs,
+  },
+  previewWrap: {
+    position: 'relative',
+    marginTop: spacing.xs,
+  },
+  preview: {
+    width: '100%',
+    aspectRatio: 1,
+    borderRadius: m3Shape.cornerLarge,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    overflow: 'hidden',
+  },
+  previewRemove: {
+    position: 'absolute',
+    top: spacing.sm,
+    right: spacing.sm,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: m3Colors.scrim,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  removeGlyph: {
+    width: 14,
+    height: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  removeLine: {
+    position: 'absolute',
+    width: 14,
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: m3Colors.onPrimary,
+  },
+});

package/src/renderer/ui/compose-toolbar-icon.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import { m3Colors } from '../theme/proulr-theme';
+
+const TOOLBAR_ICON_SIZE = 48;
+
+export function ComposeToolbarIcon({
+  label,
+  active,
+  children,
+  onPress,
+}: {
+  label: string;
+  active?: boolean;
+  children: ReactNode;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      style={({ pressed }) => [
+        styles.icon,
+        active && styles.iconActive,
+        pressed && { opacity: 0.75 },
+      ]}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    width: TOOLBAR_ICON_SIZE,
+    height: TOOLBAR_ICON_SIZE,
+    borderRadius: TOOLBAR_ICON_SIZE / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconActive: {
+    backgroundColor: m3Colors.primaryContainer,
+  },
+});