@proulr/sdui-components 0.1.0

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

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { m3Colors, spacing } from '../theme/proulr-theme';
+import { ComposeToolbarIcon } from './compose-toolbar-icon';
+
+const TOOLBAR_ICON_SIZE = 48;
+
+export function ComposeToolbar({
+  children,
+  bottomInset = 0,
+  inline = false,
+}: {
+  children: ReactNode;
+  bottomInset?: number;
+  inline?: boolean;
+}) {
+  const insets = useSafeAreaInsets();
+  const padBottom = inline ? Math.max(insets.bottom, bottomInset) + spacing.xs : bottomInset;
+
+  return (
+    <View
+      style={[styles.toolbar, inline && styles.toolbarInline, { paddingBottom: padBottom }]}
+      pointerEvents="box-none"
+    >
+      {children}
+    </View>
+  );
+}
+
+export { ComposeToolbarIcon };
+
+const styles = StyleSheet.create({
+  toolbar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    paddingHorizontal: spacing.md,
+    paddingTop: spacing.sm,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: m3Colors.outlineVariant,
+    backgroundColor: m3Colors.surface,
+    zIndex: 2,
+  },
+  toolbarInline: {
+    position: 'relative',
+    left: undefined,
+    right: undefined,
+    bottom: undefined,
+  },
+});
+
+export const COMPOSE_TOOLBAR_ICON_SIZE = TOOLBAR_ICON_SIZE;

package/src/renderer/ui/compose-visibility-row.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+import { fonts, m3Colors, spacing } from '../theme/proulr-theme';
+import { ComposeGlobeGlyph } from './compose-glyphs';
+
+export function ComposeVisibilityRow({
+  label,
+  icon,
+  onPress,
+  variant = 'footer',
+}: {
+  label: string;
+  icon?: ReactNode;
+  onPress?: () => void;
+  variant?: 'inline' | 'footer';
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={!onPress}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      style={({ pressed }) => [
+        styles.row,
+        variant === 'footer' && styles.rowFooter,
+        pressed && onPress && { opacity: 0.82 },
+      ]}
+    >
+      {icon ?? <ComposeGlobeGlyph />}
+      <Text style={styles.label}>{label}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  rowFooter: {
+    paddingTop: spacing.sm,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: m3Colors.outlineVariant,
+  },
+  label: {
+    color: m3Colors.primary,
+    fontFamily: fonts.medium,
+    fontSize: 13,
+  },
+});

package/src/renderer/ui/floating-create-menu.tsx

@@ -0,0 +1,165 @@
+import type { ReactNode } from 'react';
+import { useCallback, useState } from 'react';
+import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import { fonts, m3Colors, m3Elevation, m3Shape, spacing } from '../theme/proulr-theme';
+
+export type FloatingCreateMenuAction = {
+  id: string;
+  label: string;
+  tone?: 'primary' | 'surface';
+  icon: ReactNode;
+  onPress: () => void;
+};
+
+const MAIN_FAB_SIZE = 56;
+const ACTION_FAB_SIZE = 48;
+
+export function FloatingCreateMenu({
+  bottomInset,
+  actions,
+  accessibilityLabel = 'Criar conteúdo',
+}: {
+  bottomInset: number;
+  actions: FloatingCreateMenuAction[];
+  accessibilityLabel?: string;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const close = useCallback(() => setOpen(false), []);
+
+  const onActionPress = useCallback(
+    (action: FloatingCreateMenuAction) => {
+      close();
+      action.onPress();
+    },
+    [close],
+  );
+
+  const orderedActions = actions;
+
+  return (
+    <>
+      <Pressable
+        onPress={() => setOpen((value) => !value)}
+        accessibilityRole="button"
+        accessibilityLabel={open ? 'Fechar menu de criação' : accessibilityLabel}
+        style={({ pressed }) => [
+          styles.mainFab,
+          { bottom: bottomInset + spacing.sm },
+          open && styles.mainFabOpen,
+          pressed && { opacity: 0.9 },
+        ]}
+      >
+        <Text style={[styles.mainFabGlyph, open && styles.mainFabGlyphOpen]}>{open ? '\u2715' : '+'}</Text>
+      </Pressable>
+
+      <Modal visible={open} transparent animationType="fade" onRequestClose={close}>
+        <View style={styles.overlay}>
+          <Pressable style={styles.backdrop} onPress={close} accessibilityLabel="Fechar menu" />
+
+          <View style={[styles.stack, { bottom: bottomInset + spacing.sm + MAIN_FAB_SIZE + spacing.md }]}>
+            {orderedActions.map((action) => {
+              const isPrimary = action.tone === 'primary';
+              return (
+                <View key={action.id} style={styles.row}>
+                  <Pressable
+                    onPress={() => onActionPress(action)}
+                    accessibilityRole="button"
+                    accessibilityLabel={action.label}
+                    style={({ pressed }) => [styles.labelBtn, pressed && { opacity: 0.85 }]}
+                  >
+                    <Text style={styles.label}>{action.label}</Text>
+                  </Pressable>
+
+                  <Pressable
+                    onPress={() => onActionPress(action)}
+                    accessibilityRole="button"
+                    accessibilityLabel={action.label}
+                    style={({ pressed }) => [
+                      styles.actionFab,
+                      isPrimary ? styles.actionFabPrimary : styles.actionFabSurface,
+                      pressed && { opacity: 0.9 },
+                    ]}
+                  >
+                    {action.icon}
+                  </Pressable>
+                </View>
+              );
+            })}
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  mainFab: {
+    position: 'absolute',
+    right: spacing.sm,
+    width: MAIN_FAB_SIZE,
+    height: MAIN_FAB_SIZE,
+    borderRadius: MAIN_FAB_SIZE / 2,
+    backgroundColor: m3Colors.secondary,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 20,
+    ...m3Elevation.level3,
+  },
+  mainFabOpen: {
+    backgroundColor: m3Colors.surfaceContainerHighest,
+    borderWidth: 1,
+    borderColor: m3Colors.outlineVariant,
+  },
+  mainFabGlyph: {
+    color: m3Colors.onSecondary,
+    fontSize: 30,
+    fontFamily: fonts.bold,
+    marginTop: -2,
+  },
+  mainFabGlyphOpen: {
+    color: m3Colors.onSurface,
+    fontSize: 22,
+  },
+  overlay: {
+    flex: 1,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: m3Colors.scrim,
+  },
+  stack: {
+    position: 'absolute',
+    right: spacing.sm,
+    alignItems: 'flex-end',
+    gap: spacing.md,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  labelBtn: {
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+  },
+  label: {
+    color: m3Colors.onSurface,
+    fontFamily: fonts.semibold,
+    fontSize: 16,
+  },
+  actionFab: {
+    width: ACTION_FAB_SIZE,
+    height: ACTION_FAB_SIZE,
+    borderRadius: ACTION_FAB_SIZE / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...m3Elevation.level2,
+  },
+  actionFabPrimary: {
+    backgroundColor: m3Colors.primary,
+  },
+  actionFabSurface: {
+    backgroundColor: m3Colors.inverseSurface,
+  },
+});

package/src/renderer/ui/index.ts

@@ -0,0 +1,44 @@
+export { AppButton } from './AppButton';
+export { AppLoadingSpinner } from './AppLoadingSpinner';
+export { AuthStepShell } from './AuthStepShell';
+export { Card } from './Card';
+export { ComposeAudiencePill } from './compose-audience-pill';
+export {
+  ComposeCameraGlyph,
+  ComposeCloseGlyph,
+  ComposeFollowersGlyph,
+  ComposeFollowingGlyph,
+  ComposeGalleryGlyph,
+  ComposeGlobeGlyph,
+  ComposeLiveGlyph,
+  ComposeMentionGlyph,
+  ComposePostGlyph,
+  ComposeStoryGlyph,
+  ComposeTrashGlyph,
+  ComposeVideoGlyph,
+} from './compose-glyphs';
+export { ComposeMediaCarousel, type ComposeMediaCarouselItem } from './compose-media-carousel';
+export { ComposeMediaShortcut, COMPOSE_MEDIA_TILE_SIZE } from './compose-media-shortcut';
+export { ComposeRecentMediaGrid, type ComposeRecentMediaItem } from './compose-recent-media-grid';
+export { ComposeScreenHeader } from './compose-screen-header';
+export { ComposeTextArea, ComposeMediaPreviewFrame } from './compose-text-area';
+export { ComposeToolbar, ComposeToolbarIcon, COMPOSE_TOOLBAR_ICON_SIZE } from './compose-toolbar';
+export { ComposeReplyAudienceSheet, type ComposeReplyAudienceOption, type ComposeReplyAudienceValue } from './compose-reply-audience-sheet';
+export { ComposeVisibilityRow } from './compose-visibility-row';
+export { DateField } from './DateField';
+export { FloatingCreateMenu, type FloatingCreateMenuAction } from './floating-create-menu';
+export { InfoBanner } from './InfoBanner';
+export { PasswordField, TextField } from './TextField';
+export {
+  StoryCollageGlyph,
+  StoryEffectsGlyph,
+  StoryMentionGlyph,
+  StoryMusicGlyph,
+  StorySettingsGlyph,
+  StoryStickerGlyph,
+  StoryTextGlyph,
+} from './story-glyphs';
+export { StoryComposeHeader } from './story-compose-header';
+export { StoryCreateShortcutRow, type StoryCreateShortcutItem } from './story-create-shortcut-row';
+export { StoryEditorChrome, type StoryEditorTool } from './story-editor-chrome';
+export { StorySurfacePicker, type StorySurfaceOption } from './story-surface-picker';

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

@@ -0,0 +1,72 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { fonts, m3Colors, m3Type, spacing } from '../theme/proulr-theme';
+import { ComposeCloseGlyph } from './compose-glyphs';
+import { StorySettingsGlyph } from './story-glyphs';
+
+export function StoryComposeHeader({
+  title,
+  onClose,
+  onSettings,
+}: {
+  title: string;
+  onClose: () => void;
+  onSettings?: () => 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.sideBtn}
+      >
+        <ComposeCloseGlyph />
+      </Pressable>
+
+      <Text style={styles.title} numberOfLines={1}>
+        {title}
+      </Text>
+
+      {onSettings ? (
+        <Pressable
+          onPress={onSettings}
+          hitSlop={10}
+          accessibilityRole="button"
+          accessibilityLabel="Configurações do story"
+          style={styles.sideBtn}
+        >
+          <StorySettingsGlyph />
+        </Pressable>
+      ) : (
+        <View style={styles.sideBtn} />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: spacing.md,
+    paddingBottom: spacing.sm,
+    backgroundColor: m3Colors.surface,
+  },
+  sideBtn: {
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    flex: 1,
+    color: m3Colors.onSurface,
+    ...m3Type.titleSmall,
+    textAlign: 'center',
+    fontFamily: fonts.bold,
+  },
+});

package/src/renderer/ui/story-create-shortcut-row.tsx

@@ -0,0 +1,89 @@
+import type { ReactNode } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
+
+export type StoryCreateShortcutItem = {
+  id: string;
+  label: string;
+  badge?: string;
+  icon: ReactNode;
+};
+
+const SHORTCUT_WIDTH = 108;
+const SHORTCUT_HEIGHT = 112;
+
+export function StoryCreateShortcutRow({
+  items,
+  onPress,
+}: {
+  items: StoryCreateShortcutItem[];
+  onPress: (id: string) => void;
+}) {
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.scrollContent}
+    >
+      {items.map((item) => (
+        <Pressable
+          key={item.id}
+          onPress={() => onPress(item.id)}
+          accessibilityRole="button"
+          accessibilityLabel={item.label}
+          style={({ pressed }) => [styles.card, pressed && { opacity: 0.88 }]}
+        >
+          {item.badge ? (
+            <View style={styles.badge}>
+              <Text style={styles.badgeText}>{item.badge}</Text>
+            </View>
+          ) : null}
+          <View style={styles.iconWrap}>{item.icon}</View>
+          <Text style={styles.label}>{item.label}</Text>
+        </Pressable>
+      ))}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrollContent: {
+    paddingHorizontal: spacing.md,
+    gap: spacing.sm,
+    paddingBottom: spacing.sm,
+  },
+  card: {
+    width: SHORTCUT_WIDTH,
+    height: SHORTCUT_HEIGHT,
+    borderRadius: m3Shape.cornerLarge,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    borderWidth: 1,
+    borderColor: m3Colors.outlineVariant,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: spacing.sm,
+    position: 'relative',
+  },
+  badge: {
+    position: 'absolute',
+    top: spacing.xs,
+    right: spacing.xs,
+    paddingHorizontal: spacing.xs,
+    paddingVertical: 2,
+    borderRadius: m3Shape.cornerExtraSmall,
+    backgroundColor: m3Colors.secondary,
+  },
+  badgeText: {
+    color: m3Colors.onSecondary,
+    fontFamily: fonts.bold,
+    fontSize: 10,
+  },
+  iconWrap: {
+    marginBottom: spacing.xs,
+  },
+  label: {
+    color: m3Colors.onSurface,
+    ...m3Type.labelSmall,
+    textAlign: 'center',
+  },
+});

package/src/renderer/ui/story-editor-chrome.tsx

@@ -0,0 +1,231 @@
+import type { ReactNode } from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+import { AppLoadingSpinner } from './AppLoadingSpinner';
+import { StoryBackGlyph } from './story-glyphs';
+
+export type StoryEditorTool = {
+  id: string;
+  label: string;
+  icon: ReactNode;
+};
+
+export function StoryEditorChrome({
+  children,
+  tools,
+  caption,
+  onChangeCaption,
+  onBack,
+  onToolPress,
+  onPublish,
+  publishing,
+  publishLabel = 'Compartilhar',
+  footerLeft,
+  accessory,
+  showCaption = true,
+  mediaBackgroundColor,
+}: {
+  children: ReactNode;
+  tools: StoryEditorTool[];
+  caption: string;
+  onChangeCaption: (value: string) => void;
+  onBack: () => void;
+  onToolPress: (toolId: string) => void;
+  onPublish: () => void;
+  publishing?: boolean;
+  publishLabel?: string;
+  footerLeft?: ReactNode;
+  accessory?: ReactNode;
+  showCaption?: boolean;
+  mediaBackgroundColor?: string;
+}) {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <KeyboardAvoidingView
+      style={[
+        styles.root,
+        mediaBackgroundColor ? { backgroundColor: mediaBackgroundColor } : null,
+      ]}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      <View
+        style={[
+          styles.mediaLayer,
+          { backgroundColor: mediaBackgroundColor ?? m3Colors.surface },
+        ]}
+      >
+        {children}
+      </View>
+
+      <View style={[styles.topBar, { paddingTop: insets.top + spacing.xs }]}>
+        <Pressable
+          onPress={onBack}
+          accessibilityRole="button"
+          accessibilityLabel="Voltar"
+          style={styles.topBtn}
+        >
+          <StoryBackGlyph />
+        </Pressable>
+      </View>
+
+      <View style={[styles.bottomChrome, { paddingBottom: insets.bottom + spacing.sm }]}>
+        <View style={styles.toolRow}>
+          {tools.map((tool) => (
+            <Pressable
+              key={tool.id}
+              onPress={() => onToolPress(tool.id)}
+              accessibilityRole="button"
+              accessibilityLabel={tool.label}
+              style={styles.toolItem}
+            >
+              <View style={styles.toolIcon}>{tool.icon}</View>
+              <Text style={styles.toolLabel}>{tool.label}</Text>
+            </Pressable>
+          ))}
+        </View>
+
+        {accessory}
+
+        {showCaption ? (
+          <TextInput
+            value={caption}
+            onChangeText={onChangeCaption}
+            placeholder="Adicione uma legenda..."
+            placeholderTextColor={m3Colors.onSurfaceVariant}
+            style={styles.captionInput}
+            multiline
+            maxLength={220}
+          />
+        ) : null}
+
+        <View style={styles.footerRow}>
+          {footerLeft ?? <View style={styles.footerSpacer} />}
+          <Pressable
+            onPress={onPublish}
+            disabled={publishing}
+            accessibilityRole="button"
+            accessibilityLabel={publishLabel}
+            style={({ pressed }) => [
+              styles.publishBtn,
+              publishing && styles.publishBtnDisabled,
+              pressed && !publishing && { opacity: 0.9 },
+            ]}
+          >
+            {publishing ? (
+              <AppLoadingSpinner color={m3Colors.onPrimary} />
+            ) : (
+              <Text style={styles.publishLabel}>{publishLabel}</Text>
+            )}
+          </Pressable>
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: m3Colors.surface,
+  },
+  mediaLayer: {
+    ...StyleSheet.absoluteFill,
+  },
+  topBar: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    paddingHorizontal: spacing.md,
+    zIndex: 2,
+  },
+  topBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: m3Colors.scrim,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  bottomChrome: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    paddingHorizontal: spacing.md,
+    paddingTop: spacing.md,
+    backgroundColor: m3Colors.scrim,
+    gap: spacing.sm,
+    zIndex: 2,
+  },
+  toolRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: spacing.xs,
+  },
+  toolItem: {
+    flex: 1,
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  toolIcon: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  toolLabel: {
+    color: m3Colors.onPrimary,
+    fontFamily: fonts.medium,
+    fontSize: 11,
+    textAlign: 'center',
+  },
+  captionInput: {
+    color: m3Colors.onPrimary,
+    fontFamily: fonts.regular,
+    fontSize: 15,
+    minHeight: 40,
+    maxHeight: 72,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: m3Shape.cornerFull,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+  },
+  footerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  footerSpacer: {
+    flex: 1,
+  },
+  publishBtn: {
+    minWidth: 132,
+    height: 44,
+    borderRadius: m3Shape.cornerFull,
+    backgroundColor: m3Colors.primary,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: spacing.lg,
+  },
+  publishBtnDisabled: {
+    opacity: 0.6,
+  },
+  publishLabel: {
+    color: m3Colors.onPrimary,
+    fontFamily: fonts.bold,
+    fontSize: 15,
+  },
+});