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,238 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
View, Text, ScrollView, TouchableOpacity, StyleSheet, Alert,
|
||||
} from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { usePresetStore } from '@store/presetStore';
|
||||
import { isUserOwnedPreset } from '@domain/SpoolPreset';
|
||||
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||
|
||||
/**
|
||||
* Tela de Presets de Carretéis — M4-0
|
||||
*/
|
||||
export default function ConfigScreen(): React.ReactElement {
|
||||
const router = useRouter();
|
||||
const { systemPresets, userPresets, removePreset } = usePresetStore();
|
||||
|
||||
function handleDelete(id: string, name: string): void {
|
||||
Alert.alert(
|
||||
'Excluir preset',
|
||||
`Deseja excluir o preset "${name}"?`,
|
||||
[
|
||||
{ text: 'Cancelar', style: 'cancel' },
|
||||
{ text: 'Excluir', style: 'destructive', onPress: () => removePreset(id) },
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.safe}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<View>
|
||||
<Text style={styles.headerSub}>Configurações</Text>
|
||||
<Text style={styles.headerTitle}>Presets de Carretéis</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={styles.addBtn}
|
||||
onPress={() => router.push('/(app)/config/presets/new' as never)}
|
||||
>
|
||||
<Ionicons name="add" size={24} color={colors.bgBase} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView showsVerticalScrollIndicator={false} style={styles.scroll}>
|
||||
{/* Presets do Sistema */}
|
||||
<View style={styles.section}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<Text style={styles.sectionLabel}>PRESETS DO SISTEMA</Text>
|
||||
<View style={styles.readonlyBadge}>
|
||||
<Text style={styles.readonlyText}>Somente leitura</Text>
|
||||
</View>
|
||||
</View>
|
||||
{systemPresets.map((preset) => (
|
||||
<View key={preset.id} style={styles.presetRow}>
|
||||
<View style={styles.presetIcon}>
|
||||
<Ionicons name="disc-outline" size={20} color={colors.textSecondary} />
|
||||
</View>
|
||||
<View style={styles.presetInfo}>
|
||||
<Text style={styles.presetName}>{preset.name}</Text>
|
||||
<Text style={styles.presetSub}>
|
||||
{/* type field not in SpoolPreset domain yet — show dash */}
|
||||
Carretel · {preset.spoolWeightG}g
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.weightBadge}>
|
||||
<Text style={styles.weightBadgeText}>{preset.spoolWeightG}g</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Meus Presets */}
|
||||
{userPresets.length > 0 && (
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionLabel}>MEUS PRESETS</Text>
|
||||
{userPresets.map((preset) => (
|
||||
<View key={preset.id} style={styles.presetRow}>
|
||||
<View style={styles.presetIcon}>
|
||||
<Ionicons name="disc-outline" size={20} color={colors.textSecondary} />
|
||||
</View>
|
||||
<View style={styles.presetInfo}>
|
||||
<Text style={styles.presetName}>{preset.name}</Text>
|
||||
<Text style={styles.presetSub}>Customizado · {preset.spoolWeightG}g</Text>
|
||||
</View>
|
||||
<View style={styles.userPresetActions}>
|
||||
<View style={styles.weightBadge}>
|
||||
<Text style={styles.weightBadgeText}>{preset.spoolWeightG}g</Text>
|
||||
</View>
|
||||
{isUserOwnedPreset(preset) && (
|
||||
<>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push(`/(app)/config/presets/${preset.id}/edit` as never)}
|
||||
>
|
||||
<Ionicons name="create-outline" size={20} color={colors.textSecondary} />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => handleDelete(preset.id, preset.name)}>
|
||||
<Ionicons name="trash-outline" size={20} color={colors.textSecondary} />
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{userPresets.length === 0 && (
|
||||
<View style={styles.emptyUser}>
|
||||
<Text style={styles.emptyText}>Nenhum preset personalizado ainda.</Text>
|
||||
<TouchableOpacity onPress={() => router.push('/(app)/config/presets/new' as never)}>
|
||||
<Text style={styles.emptyLink}>+ Criar preset</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
safe: { flex: 1, backgroundColor: colors.bgBase },
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: spacing[5],
|
||||
paddingTop: spacing[5],
|
||||
paddingBottom: spacing[4],
|
||||
},
|
||||
headerSub: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.sm,
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
headerTitle: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.xl,
|
||||
fontWeight: typography.fontWeight.bold,
|
||||
color: colors.textPrimary,
|
||||
},
|
||||
addBtn: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: radius.lg,
|
||||
backgroundColor: colors.accent,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
scroll: { flex: 1, paddingHorizontal: spacing[5] },
|
||||
section: { marginBottom: spacing[6] },
|
||||
sectionHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: spacing[3],
|
||||
marginBottom: spacing[3],
|
||||
},
|
||||
sectionLabel: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.xs,
|
||||
fontWeight: typography.fontWeight.bold,
|
||||
color: colors.textSecondary,
|
||||
letterSpacing: 0.8,
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
readonlyBadge: {
|
||||
backgroundColor: colors.accentMuted,
|
||||
paddingHorizontal: spacing[3],
|
||||
paddingVertical: 3,
|
||||
borderRadius: radius.full,
|
||||
},
|
||||
readonlyText: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.xs,
|
||||
color: colors.accent,
|
||||
},
|
||||
presetRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: spacing[3],
|
||||
backgroundColor: colors.bgSurface,
|
||||
borderRadius: radius.lg,
|
||||
padding: spacing[4],
|
||||
marginBottom: spacing[2],
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
},
|
||||
presetIcon: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: radius.md,
|
||||
backgroundColor: colors.bgHover,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
presetInfo: { flex: 1 },
|
||||
presetName: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.base,
|
||||
fontWeight: typography.fontWeight.medium,
|
||||
color: colors.textPrimary,
|
||||
},
|
||||
presetSub: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.xs,
|
||||
color: colors.textSecondary,
|
||||
marginTop: 2,
|
||||
},
|
||||
weightBadge: {
|
||||
backgroundColor: colors.bgHover,
|
||||
paddingHorizontal: spacing[3],
|
||||
paddingVertical: 5,
|
||||
borderRadius: radius.sm,
|
||||
},
|
||||
weightBadgeText: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.sm,
|
||||
fontWeight: typography.fontWeight.medium,
|
||||
color: colors.textPrimary,
|
||||
},
|
||||
userPresetActions: { flexDirection: 'row', alignItems: 'center', gap: spacing[3] },
|
||||
emptyUser: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: spacing[8],
|
||||
gap: spacing[3],
|
||||
},
|
||||
emptyText: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.sm,
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
emptyLink: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.sm,
|
||||
color: colors.accent,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user