@proulr/sdui-components 0.1.0

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

@@ -0,0 +1,144 @@
+import { Text, View } from 'react-native';
+import { m3Colors } from '../theme/proulr-theme';
+
+type GlyphProps = {
+  color?: string;
+  size?: number;
+};
+
+export function StorySettingsGlyph({ color = m3Colors.onSurface, size = 22 }: GlyphProps) {
+  const tooth = size * 0.14;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: size * 0.72,
+          height: size * 0.72,
+          borderRadius: size * 0.36,
+          borderWidth: 1.8,
+          borderColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <View style={{ width: tooth, height: tooth, borderRadius: tooth / 2, backgroundColor: color }} />
+      </View>
+      {[0, 60, 120, 180, 240, 300].map((deg) => (
+        <View
+          key={deg}
+          style={{
+            position: 'absolute',
+            width: tooth * 0.9,
+            height: tooth * 1.4,
+            borderRadius: 1,
+            backgroundColor: color,
+            transform: [{ rotate: `${deg}deg` }, { translateY: -size * 0.36 }],
+          }}
+        />
+      ))}
+    </View>
+  );
+}
+
+export function StoryTextGlyph({ color = m3Colors.onSurface, size = 28 }: GlyphProps) {
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ color, fontSize: size * 0.62, fontWeight: '700' }}>Aa</Text>
+    </View>
+  );
+}
+
+export function StoryMusicGlyph({ color = m3Colors.onSurface, size = 28 }: GlyphProps) {
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ color, fontSize: size * 0.58 }}>{'\u266A'}</Text>
+    </View>
+  );
+}
+
+export function StoryCollageGlyph({ color = m3Colors.onSurface, size = 28 }: GlyphProps) {
+  const cell = size * 0.28;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View style={{ flexDirection: 'row', gap: 2 }}>
+        <View style={{ gap: 2 }}>
+          <View style={{ width: cell, height: cell, backgroundColor: color, borderRadius: 2 }} />
+          <View style={{ width: cell, height: cell * 0.7, backgroundColor: color, borderRadius: 2 }} />
+        </View>
+        <View style={{ gap: 2, justifyContent: 'center' }}>
+          <View style={{ width: cell, height: cell * 1.2, backgroundColor: color, borderRadius: 2 }} />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export function StoryStickerGlyph({ color = m3Colors.onPrimary, size = 22 }: GlyphProps) {
+  const frame = size * 0.78;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: frame,
+          height: frame,
+          borderRadius: size * 0.12,
+          borderWidth: 1.6,
+          borderColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <View
+          style={{
+            width: frame * 0.28,
+            height: frame * 0.12,
+            borderRadius: frame * 0.06,
+            backgroundColor: color,
+            marginBottom: 2,
+          }}
+        />
+        <View
+          style={{
+            width: frame * 0.42,
+            height: frame * 0.08,
+            borderRadius: frame * 0.04,
+            backgroundColor: color,
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+export function StoryEffectsGlyph({ color = m3Colors.onPrimary, size = 22 }: GlyphProps) {
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ color, fontSize: size * 0.62 }}>{'\u2728'}</Text>
+    </View>
+  );
+}
+
+export function StoryMentionGlyph({ color = m3Colors.onPrimary, size = 22 }: GlyphProps) {
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ color, fontSize: size * 0.72, fontWeight: '700' }}>@</Text>
+    </View>
+  );
+}
+
+export function StoryBackGlyph({ color = m3Colors.onPrimary, size = 22 }: GlyphProps) {
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: size * 0.34,
+          height: size * 0.34,
+          borderLeftWidth: 2.2,
+          borderBottomWidth: 2.2,
+          borderColor: color,
+          transform: [{ rotate: '45deg' }, { translateX: size * 0.06 }],
+        }}
+      />
+    </View>
+  );
+}

package/src/renderer/ui/story-surface-picker.tsx

@@ -0,0 +1,124 @@
+import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
+
+export type StorySurfaceOption = {
+  value: string;
+  label: string;
+  hint: string;
+};
+
+export function StorySurfacePicker({
+  visible,
+  value,
+  options,
+  onClose,
+  onSelect,
+}: {
+  visible: boolean;
+  value: string;
+  options: StorySurfaceOption[];
+  onClose: () => void;
+  onSelect: (value: string) => 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}>Onde publicar</Text>
+          <Text style={styles.subtitle}>Escolha em qual superfície o story vai aparecer.</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.optionBody}>
+                  <Text style={styles.optionLabel}>{option.label}</Text>
+                  <Text style={styles.optionHint}>{option.hint}</Text>
+                </View>
+                {selected ? <Text style={styles.check}>{'\u2713'}</Text> : null}
+              </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,
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: spacing.md,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: m3Colors.outlineVariant,
+  },
+  optionBody: {
+    flex: 1,
+    minWidth: 0,
+  },
+  optionLabel: {
+    color: m3Colors.onSurface,
+    fontFamily: fonts.semibold,
+    fontSize: 16,
+  },
+  optionHint: {
+    color: m3Colors.onSurfaceVariant,
+    ...m3Type.bodySmall,
+    marginTop: 2,
+  },
+  check: {
+    color: m3Colors.primary,
+    fontSize: 18,
+    fontFamily: fonts.bold,
+    marginLeft: spacing.sm,
+  },
+});