feat: add domain models and repositories for user, spool presets, and filaments
- Introduced SpoolPreset and User domain models with necessary DTOs and utility functions. - Created AuthRepository, FilamentRepository, and SpoolPresetRepository interfaces for authentication and data management. - Implemented UI components for filament display, including ColorSwatch, FilamentCard, and StockBar. - Developed layout components such as Header and Screen for consistent app structure. - Added reusable UI components like Badge, Button, Card, and Input for better user interaction. - Established global constants and theme settings for consistent styling across the application. - Implemented utility functions for filament calculations and formatting. - Created Zustand stores for managing authentication, filament, and preset states. - Configured TypeScript settings for improved development experience.
This commit is contained in:
@@ -0,0 +1,189 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
View, Text, TouchableOpacity, StyleSheet, Alert, Share,
|
||||
} from 'react-native';
|
||||
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { useFilamentStore } from '@store/filamentStore';
|
||||
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||
import { Button } from '@presentation/components/ui/Button';
|
||||
|
||||
/**
|
||||
* Tela de QR Code — 1CF-0
|
||||
*/
|
||||
export default function QRCodeScreen(): React.ReactElement {
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const router = useRouter();
|
||||
const { filaments } = useFilamentStore();
|
||||
|
||||
const filament = filaments.find((f) => f.id === id);
|
||||
|
||||
const slug = filament
|
||||
? `${filament.brand.toLowerCase()}-${(filament.model ?? '').toLowerCase()}-${filament.colorHex.replace('#', '').toLowerCase()}`.replace(/\s+/g, '-')
|
||||
: 'desconhecido';
|
||||
|
||||
const deepLink = `meowspool.app/f/${slug}`;
|
||||
|
||||
async function handleShare(): Promise<void> {
|
||||
try {
|
||||
await Share.share({ message: `meowspool://filament/${id}`, url: `https://${deepLink}` });
|
||||
} catch {
|
||||
// cancelled
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCopyLink(): Promise<void> {
|
||||
// expo-clipboard not installed — show alert as placeholder
|
||||
Alert.alert('Link copiado', deepLink);
|
||||
}
|
||||
|
||||
if (!filament) {
|
||||
return (
|
||||
<SafeAreaView style={styles.safe}>
|
||||
<View style={styles.notFound}>
|
||||
<Text style={styles.notFoundText}>Filamento não encontrado</Text>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.safe}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity onPress={() => router.back()}>
|
||||
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>QR Code</Text>
|
||||
<View style={{ width: 24 }} />
|
||||
</View>
|
||||
|
||||
{/* Filament identity */}
|
||||
<View style={styles.identity}>
|
||||
<View style={[styles.swatch, { backgroundColor: filament.colorHex }]} />
|
||||
<View>
|
||||
<Text style={styles.name}>
|
||||
{filament.brand}{filament.model ? ` ${filament.model}` : ''}
|
||||
</Text>
|
||||
<Text style={styles.meta}>
|
||||
{filament.brand} · {filament.material} · {filament.colorHex}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* QR Code area */}
|
||||
<View style={styles.qrContainer}>
|
||||
<View style={styles.qrCard}>
|
||||
{/* Placeholder QR — real impl would use react-native-qrcode-svg */}
|
||||
<View style={styles.qrPlaceholder}>
|
||||
<Ionicons name="qr-code" size={160} color={colors.black} />
|
||||
</View>
|
||||
</View>
|
||||
<Text style={styles.qrHint}>Aponte a câmera para escanear</Text>
|
||||
<View style={styles.linkBadge}>
|
||||
<Text style={styles.linkText}>{deepLink}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Actions */}
|
||||
<View style={styles.footer}>
|
||||
<Button
|
||||
label="Compartilhar QR Code"
|
||||
leftIcon={<Ionicons name="share-outline" size={18} color={colors.bgBase} />}
|
||||
onPress={handleShare}
|
||||
/>
|
||||
<TouchableOpacity style={styles.copyBtn} onPress={handleCopyLink}>
|
||||
<Text style={styles.copyBtnText}>Copiar link</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
safe: { flex: 1, backgroundColor: colors.bgBase },
|
||||
notFound: { flex: 1, alignItems: 'center', justifyContent: 'center' },
|
||||
notFoundText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textSecondary },
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: spacing[5],
|
||||
paddingVertical: spacing[4],
|
||||
},
|
||||
headerTitle: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.md,
|
||||
fontWeight: typography.fontWeight.semibold,
|
||||
color: colors.textPrimary,
|
||||
},
|
||||
identity: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: spacing[3],
|
||||
paddingHorizontal: spacing[5],
|
||||
paddingBottom: spacing[4],
|
||||
},
|
||||
swatch: { width: 44, height: 44, borderRadius: radius.md },
|
||||
name: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.base,
|
||||
fontWeight: typography.fontWeight.semibold,
|
||||
color: colors.textPrimary,
|
||||
},
|
||||
meta: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.sm,
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
qrContainer: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: spacing[4],
|
||||
paddingHorizontal: spacing[5],
|
||||
},
|
||||
qrCard: {
|
||||
backgroundColor: '#F5EFE0',
|
||||
borderRadius: radius.xl,
|
||||
padding: spacing[6],
|
||||
},
|
||||
qrPlaceholder: {
|
||||
width: 200,
|
||||
height: 200,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
qrHint: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.sm,
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
linkBadge: {
|
||||
backgroundColor: colors.bgSurface,
|
||||
paddingHorizontal: spacing[4],
|
||||
paddingVertical: spacing[2],
|
||||
borderRadius: radius.full,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
},
|
||||
linkText: {
|
||||
fontFamily: typography.fontFamily.mono,
|
||||
fontSize: typography.fontSize.xs,
|
||||
color: colors.accent,
|
||||
},
|
||||
footer: {
|
||||
padding: spacing[5],
|
||||
gap: spacing[3],
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: colors.border,
|
||||
backgroundColor: colors.bgBase,
|
||||
},
|
||||
copyBtn: { alignItems: 'center', paddingVertical: spacing[2] },
|
||||
copyBtnText: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.base,
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user