tools-template-cli 0.1.0

package/supabase-expo-app/components/Avatar.tsx

@@ -0,0 +1,173 @@
+import { useState, useEffect } from 'react'
+import { StyleSheet, View, Image, TouchableOpacity, Alert, ActivityIndicator } from 'react-native'
+import * as ImagePicker from 'expo-image-picker'
+import { supabase } from '../lib/supabase'
+
+interface AvatarProps {
+  size: number
+  url: string | null
+  onUpload: (url: string) => void
+}
+
+export default function Avatar({ size, url, onUpload }: AvatarProps) {
+  const [uploading, setUploading] = useState(false)
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (url) {
+      downloadImage(url)
+    }
+  }, [url])
+
+  async function downloadImage(path: string) {
+    try {
+      setLoading(true)
+      const { data, error } = await supabase.storage.from('avatars').download(path)
+
+      if (error) {
+        throw error
+      }
+
+      const fr = new FileReader()
+      fr.readAsDataURL(data)
+      fr.onload = () => {
+        setAvatarUrl(fr.result as string)
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        console.log('Error downloading image: ', error.message)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function uploadAvatar() {
+    try {
+      setUploading(true)
+
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        allowsMultipleSelection: false,
+        allowsEditing: true,
+        quality: 1,
+        exif: false,
+      })
+
+      if (result.canceled || !result.assets || result.assets.length === 0) {
+        return
+      }
+
+      const image = result.assets[0]
+
+      if (!image.uri) {
+        return
+      }
+
+      const arraybuffer = await fetch(image.uri).then((res) => res.arrayBuffer())
+      const fileExt = image.uri?.split('.').pop()?.toLowerCase() ?? 'jpeg'
+      const path = `${Date.now()}.${fileExt}`
+      const { data, error: uploadError } = await supabase.storage
+        .from('avatars')
+        .upload(path, arraybuffer, {
+          contentType: image.mimeType ?? `image/${fileExt}`,
+        })
+
+      if (uploadError) {
+        throw uploadError
+      }
+
+      onUpload(data.path)
+    } catch (error) {
+      if (error instanceof Error) {
+        Alert.alert('上传失败', error.message)
+      }
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      {loading ? (
+        <View style={[styles.avatar, { width: size, height: size }]}>
+          <ActivityIndicator size="large" color="#10b981" />
+        </View>
+      ) : avatarUrl ? (
+        <Image
+          source={{ uri: avatarUrl }}
+          style={[styles.avatar, { width: size, height: size, borderRadius: size / 2 }]}
+        />
+      ) : (
+        <View style={[styles.avatar, styles.noImage, { width: size, height: size, borderRadius: size / 2 }]}>
+          <View style={[styles.placeholder, { width: size * 0.4, height: size * 0.4, borderRadius: size * 0.2 }]} />
+        </View>
+      )}
+      <TouchableOpacity
+        style={[styles.button, { top: size * 0.7, left: size * 0.7 }]}
+        onPress={uploadAvatar}
+        disabled={uploading}
+      >
+        {uploading ? (
+          <ActivityIndicator size="small" color="#10b981" />
+        ) : (
+          <View style={styles.buttonContent}>
+            <View style={styles.plusHorizontal} />
+            <View style={styles.plusVertical} />
+          </View>
+        )}
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    alignSelf: 'center',
+  },
+  avatar: {
+    backgroundColor: '#f3f4f6',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  noImage: {
+    backgroundColor: '#e5e7eb',
+  },
+  placeholder: {
+    backgroundColor: '#9ca3af',
+  },
+  button: {
+    position: 'absolute',
+    backgroundColor: '#fff',
+    borderRadius: 15,
+    width: 30,
+    height: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  buttonContent: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  plusHorizontal: {
+    position: 'absolute',
+    backgroundColor: '#10b981',
+    width: 12,
+    height: 2,
+    borderRadius: 1,
+  },
+  plusVertical: {
+    position: 'absolute',
+    backgroundColor: '#10b981',
+    width: 2,
+    height: 12,
+    borderRadius: 1,
+  },
+})

package/supabase-expo-app/index.ts

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

package/supabase-expo-app/lib/supabase.ts

@@ -0,0 +1,63 @@
+import { createClient } from "@supabase/supabase-js"
+import AsyncStorage from "@react-native-async-storage/async-storage"
+import * as SecureStore from 'expo-secure-store'
+import * as aesjs from 'aes-js'
+import 'react-native-get-random-values'
+
+// As Expo's SecureStore does not support values larger than 2048
+// bytes, an AES-256 key is generated and stored in SecureStore, while
+// it is used to encrypt/decrypt values stored in AsyncStorage.
+class LargeSecureStore {
+  private async _encrypt(key: string, value: string) {
+    const encryptionKey = crypto.getRandomValues(new Uint8Array(256 / 8))
+
+    const cipher = new aesjs.ModeOfOperation.ctr(encryptionKey, new aesjs.Counter(1))
+    const encryptedBytes = cipher.encrypt(aesjs.utils.utf8.toBytes(value))
+
+    await SecureStore.setItemAsync(key, aesjs.utils.hex.fromBytes(encryptionKey))
+
+    return aesjs.utils.hex.fromBytes(encryptedBytes)
+  }
+
+  private async _decrypt(key: string, value: string) {
+    const encryptionKeyHex = await SecureStore.getItemAsync(key)
+    if (!encryptionKeyHex) {
+      return encryptionKeyHex
+    }
+
+    const cipher = new aesjs.ModeOfOperation.ctr(aesjs.utils.hex.toBytes(encryptionKeyHex), new aesjs.Counter(1))
+    const decryptedBytes = cipher.decrypt(aesjs.utils.hex.toBytes(value))
+
+    return aesjs.utils.utf8.fromBytes(decryptedBytes)
+  }
+
+  async getItem(key: string) {
+    const encrypted = await AsyncStorage.getItem(key)
+    if (!encrypted) { return encrypted }
+
+    return await this._decrypt(key, encrypted)
+  }
+
+  async removeItem(key: string) {
+    await AsyncStorage.removeItem(key)
+    await SecureStore.deleteItemAsync(key)
+  }
+
+  async setItem(key: string, value: string) {
+    const encrypted = await this._encrypt(key, value)
+
+    await AsyncStorage.setItem(key, encrypted)
+  }
+}
+
+const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL!
+const supabasePublishableKey = process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY!
+
+export const supabase = createClient(supabaseUrl, supabasePublishableKey, {
+  auth: {
+    storage: new LargeSecureStore(),
+    autoRefreshToken: true,
+    persistSession: true,
+    detectSessionInUrl: false,
+  },
+})