@proulr/sdui-components 0.1.0

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

@@ -0,0 +1,400 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { m3Colors } from '../theme/proulr-theme';
+
+type GlyphProps = {
+  color?: string;
+  size?: number;
+};
+
+export function ComposeCloseGlyph({ color = m3Colors.onSurface, size = 18 }: GlyphProps) {
+  const stroke = Math.max(1.5, size * 0.1);
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View style={[styles.diag, { width: size, backgroundColor: color, transform: [{ rotate: '45deg' }] }]} />
+      <View style={[styles.diag, { width: size, backgroundColor: color, transform: [{ rotate: '-45deg' }] }]} />
+    </View>
+  );
+}
+
+export function ComposeCameraGlyph({ color = m3Colors.primary, size = 24 }: GlyphProps) {
+  const bodyW = size * 0.92;
+  const bodyH = size * 0.62;
+  const lens = size * 0.28;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: bodyW,
+          height: bodyH,
+          borderRadius: size * 0.12,
+          borderWidth: 1.8,
+          borderColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <View
+          style={{
+            width: lens,
+            height: lens,
+            borderRadius: lens / 2,
+            borderWidth: 1.8,
+            borderColor: color,
+          }}
+        />
+      </View>
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.14,
+          right: size * 0.18,
+          width: size * 0.16,
+          height: size * 0.1,
+          borderRadius: 2,
+          backgroundColor: color,
+        }}
+      />
+    </View>
+  );
+}
+
+export function ComposeGalleryGlyph({ color = m3Colors.primary, size = 24 }: GlyphProps) {
+  const frame = size * 0.88;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: frame,
+          height: frame,
+          borderRadius: size * 0.14,
+          borderWidth: 1.8,
+          borderColor: color,
+          overflow: 'hidden',
+        }}
+      >
+        <View
+          style={{
+            position: 'absolute',
+            bottom: frame * 0.12,
+            left: frame * 0.1,
+            width: frame * 0.42,
+            height: frame * 0.22,
+            borderRadius: 2,
+            backgroundColor: color,
+          }}
+        />
+        <View
+          style={{
+            position: 'absolute',
+            top: frame * 0.16,
+            right: frame * 0.14,
+            width: frame * 0.18,
+            height: frame * 0.18,
+            borderRadius: frame * 0.09,
+            backgroundColor: color,
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+export function ComposeVideoGlyph({ color = m3Colors.primary, size = 24 }: GlyphProps) {
+  const frame = size * 0.9;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: frame,
+          height: frame * 0.72,
+          borderRadius: size * 0.1,
+          borderWidth: 1.8,
+          borderColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <View
+          style={{
+            width: 0,
+            height: 0,
+            borderTopWidth: size * 0.14,
+            borderBottomWidth: size * 0.14,
+            borderLeftWidth: size * 0.22,
+            borderTopColor: 'transparent',
+            borderBottomColor: 'transparent',
+            borderLeftColor: color,
+            marginLeft: size * 0.04,
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+export function ComposeGlobeGlyph({ color = m3Colors.primary, size = 16 }: GlyphProps) {
+  const diameter = size;
+  return (
+    <View
+      style={{
+        width: diameter,
+        height: diameter,
+        borderRadius: diameter / 2,
+        borderWidth: 1.4,
+        borderColor: color,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <View style={{ width: diameter * 0.55, height: 1.2, backgroundColor: color }} />
+      <View
+        style={{
+          position: 'absolute',
+          width: diameter * 0.42,
+          height: diameter * 0.72,
+          borderRadius: diameter * 0.21,
+          borderWidth: 1.2,
+          borderColor: color,
+        }}
+      />
+    </View>
+  );
+}
+
+export function ComposeFollowersGlyph({ color = m3Colors.onPrimary, size = 20 }: GlyphProps) {
+  const head = size * 0.22;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: head,
+          height: head,
+          borderRadius: head / 2,
+          backgroundColor: color,
+          marginBottom: 1,
+        }}
+      />
+      <View
+        style={{
+          width: size * 0.52,
+          height: size * 0.24,
+          borderTopLeftRadius: size * 0.26,
+          borderTopRightRadius: size * 0.26,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.08,
+          bottom: size * 0.18,
+          width: size * 0.22,
+          height: size * 0.22,
+          borderRadius: size * 0.11,
+          borderWidth: 1.4,
+          borderColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <View
+          style={{
+            width: 0,
+            height: 0,
+            borderLeftWidth: size * 0.05,
+            borderRightWidth: size * 0.05,
+            borderBottomWidth: size * 0.08,
+            borderLeftColor: 'transparent',
+            borderRightColor: 'transparent',
+            borderBottomColor: color,
+            transform: [{ rotate: '-90deg' }],
+            marginLeft: size * 0.01,
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+export function ComposeFollowingGlyph({ color = m3Colors.onPrimary, size = 20 }: GlyphProps) {
+  const head = size * 0.22;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: head,
+          height: head,
+          borderRadius: head / 2,
+          backgroundColor: color,
+          marginBottom: 1,
+        }}
+      />
+      <View
+        style={{
+          width: size * 0.52,
+          height: size * 0.24,
+          borderTopLeftRadius: size * 0.26,
+          borderTopRightRadius: size * 0.26,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.1,
+          bottom: size * 0.2,
+          width: size * 0.18,
+          height: size * 0.1,
+          borderBottomWidth: 1.6,
+          borderRightWidth: 1.6,
+          borderColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+    </View>
+  );
+}
+
+export function ComposeMentionGlyph({ color = m3Colors.onPrimary, size = 20 }: GlyphProps) {
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ color, fontSize: size * 0.72, fontWeight: '700', lineHeight: size * 0.8 }}>@</Text>
+    </View>
+  );
+}
+
+export function ComposeTrashGlyph({ color = m3Colors.primary, size = 22 }: GlyphProps) {
+  const binW = size * 0.62;
+  const binH = size * 0.58;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View style={{ width: binW * 1.1, height: 1.6, backgroundColor: color, marginBottom: 2 }} />
+      <View
+        style={{
+          width: binW,
+          height: binH,
+          borderBottomLeftRadius: 3,
+          borderBottomRightRadius: 3,
+          borderWidth: 1.6,
+          borderTopWidth: 0,
+          borderColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.2,
+          width: binW * 0.42,
+          height: 1.6,
+          backgroundColor: color,
+        }}
+      />
+    </View>
+  );
+}
+
+export function ComposePostGlyph({ color = m3Colors.onPrimary, size = 22 }: GlyphProps) {
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: size * 0.14,
+          height: size * 0.72,
+          borderRadius: size * 0.07,
+          backgroundColor: color,
+          transform: [{ rotate: '-18deg' }],
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.08,
+          left: size * 0.34,
+          width: size * 0.34,
+          height: size * 0.12,
+          borderTopWidth: 1.8,
+          borderRightWidth: 1.8,
+          borderColor: color,
+          borderTopRightRadius: size * 0.08,
+          transform: [{ rotate: '12deg' }],
+        }}
+      />
+    </View>
+  );
+}
+
+export function ComposeStoryGlyph({ color = m3Colors.primary, size = 22 }: GlyphProps) {
+  const ring = size * 0.82;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: ring,
+          height: ring,
+          borderRadius: ring / 2,
+          borderWidth: 2,
+          borderColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <View
+          style={{
+            width: ring * 0.42,
+            height: ring * 0.42,
+            borderRadius: ring * 0.21,
+            backgroundColor: color,
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+export function ComposeLiveGlyph({ color = m3Colors.primary, size = 22 }: GlyphProps) {
+  const bodyW = size * 0.88;
+  const bodyH = size * 0.58;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: bodyW,
+          height: bodyH,
+          borderRadius: size * 0.1,
+          borderWidth: 1.8,
+          borderColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <View
+          style={{
+            width: bodyW * 0.24,
+            height: bodyH * 0.48,
+            borderRadius: 2,
+            backgroundColor: color,
+          }}
+        />
+      </View>
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.04,
+          top: size * 0.2,
+          width: size * 0.14,
+          height: size * 0.1,
+          borderRadius: 2,
+          backgroundColor: color,
+        }}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  diag: {
+    position: 'absolute',
+    height: 1.8,
+    borderRadius: 1,
+  },
+});

package/src/renderer/ui/compose-media-carousel.tsx

@@ -0,0 +1,116 @@
+import type { ReactNode } from 'react';
+import { Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+
+export type ComposeMediaCarouselItem = {
+  id: string;
+  uri: string;
+  mediaType: 'image' | 'video';
+};
+
+const TILE_SIZE = 168;
+
+export function ComposeMediaCarousel({
+  items,
+  limit,
+  onRemove,
+  renderVideo,
+}: {
+  items: ComposeMediaCarouselItem[];
+  limit: number;
+  onRemove: (id: string) => void;
+  renderVideo?: (uri: string) => ReactNode;
+}) {
+  if (!items.length) return null;
+
+  return (
+    <View style={styles.wrap}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {items.map((item) => (
+          <View key={item.id} style={styles.tile}>
+            {item.mediaType === 'video' ? (
+              renderVideo ? (
+                renderVideo(item.uri)
+              ) : (
+                <View style={styles.videoFallback}>
+                  <Text style={styles.videoFallbackText}>Vídeo</Text>
+                </View>
+              )
+            ) : (
+              <Image source={{ uri: item.uri }} style={styles.media} resizeMode="cover" />
+            )}
+            <Pressable
+              onPress={() => onRemove(item.id)}
+              accessibilityRole="button"
+              accessibilityLabel="Remover mídia"
+              style={styles.removeBtn}
+            >
+              <Text style={styles.removeIcon}>{'\u2715'}</Text>
+            </Pressable>
+          </View>
+        ))}
+      </ScrollView>
+      <Text style={styles.counter}>
+        {items.length}/{limit}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    marginTop: spacing.md,
+    marginLeft: 48,
+  },
+  scrollContent: {
+    gap: spacing.sm,
+    paddingRight: spacing.md,
+  },
+  tile: {
+    width: TILE_SIZE,
+    height: TILE_SIZE,
+    borderRadius: m3Shape.cornerLarge,
+    overflow: 'hidden',
+    backgroundColor: m3Colors.surfaceContainerHigh,
+  },
+  media: {
+    width: '100%',
+    height: '100%',
+  },
+  videoFallback: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  videoFallbackText: {
+    color: m3Colors.onSurfaceVariant,
+    fontFamily: fonts.medium,
+    fontSize: 13,
+  },
+  removeBtn: {
+    position: 'absolute',
+    top: spacing.xs,
+    right: spacing.xs,
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: m3Colors.scrim,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  removeIcon: {
+    color: m3Colors.onPrimary,
+    fontSize: 14,
+    fontFamily: fonts.semibold,
+  },
+  counter: {
+    marginTop: spacing.xs,
+    color: m3Colors.onSurfaceVariant,
+    fontFamily: fonts.medium,
+    fontSize: 12,
+  },
+});

package/src/renderer/ui/compose-media-shortcut.tsx

@@ -0,0 +1,80 @@
+import type { ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+
+const MEDIA_TILE_SIZE = 88;
+
+export function ComposeMediaShortcut({
+  label,
+  hint,
+  children,
+  onPress,
+}: {
+  label: string;
+  hint?: string;
+  children: ReactNode;
+  onPress: () => void;
+}) {
+  return (
+    <View style={styles.wrap}>
+      {hint ? (
+        <View style={styles.hintBubble}>
+          <Text style={styles.hintText}>{hint}</Text>
+          <View style={styles.hintTail} />
+        </View>
+      ) : null}
+      <Pressable
+        onPress={onPress}
+        accessibilityRole="button"
+        accessibilityLabel={label}
+        style={({ pressed }) => [styles.tile, pressed && { opacity: 0.85 }]}
+      >
+        {children}
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    alignItems: 'center',
+  },
+  hintBubble: {
+    marginBottom: spacing.xs,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+    borderRadius: m3Shape.cornerFull,
+    backgroundColor: m3Colors.primary,
+    position: 'relative',
+  },
+  hintText: {
+    color: m3Colors.onPrimary,
+    fontFamily: fonts.medium,
+    fontSize: 11,
+  },
+  hintTail: {
+    position: 'absolute',
+    bottom: -5,
+    alignSelf: 'center',
+    width: 0,
+    height: 0,
+    borderLeftWidth: 6,
+    borderRightWidth: 6,
+    borderTopWidth: 6,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderTopColor: m3Colors.primary,
+  },
+  tile: {
+    width: MEDIA_TILE_SIZE,
+    height: MEDIA_TILE_SIZE,
+    borderRadius: m3Shape.cornerLarge,
+    borderWidth: 1,
+    borderColor: m3Colors.outlineVariant,
+    backgroundColor: m3Colors.surfaceContainer,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export const COMPOSE_MEDIA_TILE_SIZE = MEDIA_TILE_SIZE;