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,249 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View, Text, TouchableOpacity, StyleSheet, Alert,
|
||||
} from 'react-native';
|
||||
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { usePresetStore } from '@store/presetStore';
|
||||
import { Input } from '@presentation/components/ui/Input';
|
||||
import { Button } from '@presentation/components/ui/Button';
|
||||
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||
|
||||
const schema = z.object({
|
||||
name: z.string().min(1, 'Nome obrigatório'),
|
||||
spoolWeightG: z.coerce.number().min(1, 'Peso obrigatório'),
|
||||
});
|
||||
|
||||
type FormData = z.infer<typeof schema>;
|
||||
|
||||
type SpoolType = 'Plástico' | 'Papelão' | 'Outro';
|
||||
|
||||
/**
|
||||
* Tela de Editar Preset — 1KD-0
|
||||
*/
|
||||
export default function EditPresetScreen(): React.ReactElement {
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const router = useRouter();
|
||||
const { presets, updatePreset, removePreset } = usePresetStore();
|
||||
|
||||
const preset = presets.find((p) => p.id === id);
|
||||
const [spoolType, setSpoolType] = useState<SpoolType>('Plástico');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const { control, handleSubmit, formState: { errors } } = useForm<FormData>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
name: preset?.name ?? '',
|
||||
spoolWeightG: preset?.spoolWeightG ?? undefined,
|
||||
},
|
||||
});
|
||||
|
||||
if (!preset) {
|
||||
return (
|
||||
<SafeAreaView style={styles.safe}>
|
||||
<View style={styles.notFound}>
|
||||
<Text style={styles.notFoundText}>Preset não encontrado</Text>
|
||||
<TouchableOpacity onPress={() => router.back()}>
|
||||
<Text style={styles.backLink}>Voltar</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
function handleDelete(): void {
|
||||
Alert.alert(
|
||||
'Excluir preset',
|
||||
`Deseja excluir o preset "${preset!.name}"?`,
|
||||
[
|
||||
{ text: 'Cancelar', style: 'cancel' },
|
||||
{
|
||||
text: 'Excluir',
|
||||
style: 'destructive',
|
||||
onPress: () => {
|
||||
removePreset(preset!.id);
|
||||
router.replace('/(app)/(tabs)/config' as never);
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
async function onSubmit(data: FormData): Promise<void> {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
// TODO: UpdatePresetUseCase via DI container
|
||||
updatePreset({
|
||||
...preset!,
|
||||
name: data.name,
|
||||
spoolWeightG: Number(data.spoolWeightG),
|
||||
});
|
||||
router.back();
|
||||
} catch {
|
||||
Alert.alert('Erro', 'Não foi possível salvar as alterações.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
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}>Editar Preset</Text>
|
||||
<TouchableOpacity onPress={handleDelete}>
|
||||
<Ionicons name="trash-outline" size={20} color={colors.textPrimary} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.content}>
|
||||
{/* Ícone */}
|
||||
<View style={styles.iconContainer}>
|
||||
<View style={styles.iconBg}>
|
||||
<Ionicons name="disc-outline" size={48} color={colors.accent} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Nome */}
|
||||
<Controller
|
||||
control={control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
label="NOME DO PRESET"
|
||||
placeholder="Ex: Minha Marca Especial"
|
||||
error={errors.name?.message}
|
||||
onChangeText={field.onChange}
|
||||
value={field.value}
|
||||
leftIcon={<Ionicons name="create-outline" size={16} color={colors.textSecondary} />}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Peso */}
|
||||
<Controller
|
||||
control={control}
|
||||
name="spoolWeightG"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
label="PESO DO CARRETEL VAZIO"
|
||||
placeholder="Ex: 250"
|
||||
keyboardType="numeric"
|
||||
error={errors.spoolWeightG?.message}
|
||||
onChangeText={field.onChange}
|
||||
value={field.value?.toString() ?? ''}
|
||||
leftIcon={<Ionicons name="scale-outline" size={16} color={colors.textSecondary} />}
|
||||
rightLabel="g"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Text style={styles.hint}>
|
||||
Pese o carretel vazio em uma balança e insira o valor em gramas.
|
||||
</Text>
|
||||
|
||||
{/* Tipo */}
|
||||
<View style={styles.typeRow}>
|
||||
<Text style={styles.typeLabel}>TIPO DE CARRETEL</Text>
|
||||
<Text style={styles.optional}>Opcional</Text>
|
||||
</View>
|
||||
<View style={styles.typeChips}>
|
||||
{(['Plástico', 'Papelão', 'Outro'] as SpoolType[]).map((t) => (
|
||||
<TouchableOpacity
|
||||
key={t}
|
||||
onPress={() => setSpoolType(t)}
|
||||
style={[styles.chip, spoolType === t && styles.chipActive]}
|
||||
>
|
||||
<Text style={[styles.chipText, spoolType === t && styles.chipTextActive]}>{t}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* CTA */}
|
||||
<View style={styles.footer}>
|
||||
<Button label="Salvar Alterações" onPress={handleSubmit(onSubmit)} isLoading={isLoading} />
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
safe: { flex: 1, backgroundColor: colors.bgBase },
|
||||
notFound: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: spacing[4] },
|
||||
notFoundText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textSecondary },
|
||||
backLink: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.accent },
|
||||
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,
|
||||
},
|
||||
content: { flex: 1, paddingHorizontal: spacing[5], gap: spacing[4] },
|
||||
iconContainer: { alignItems: 'center', paddingVertical: spacing[6] },
|
||||
iconBg: {
|
||||
width: 96,
|
||||
height: 96,
|
||||
borderRadius: radius.xl,
|
||||
backgroundColor: colors.bgSurface,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
hint: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.sm,
|
||||
color: colors.textSecondary,
|
||||
lineHeight: typography.fontSize.sm * 1.6,
|
||||
marginTop: -spacing[2],
|
||||
},
|
||||
typeRow: { flexDirection: 'row', alignItems: 'center', gap: spacing[3] },
|
||||
typeLabel: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.xs,
|
||||
fontWeight: typography.fontWeight.bold,
|
||||
color: colors.textSecondary,
|
||||
letterSpacing: 0.8,
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
optional: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.xs,
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
typeChips: { flexDirection: 'row', gap: spacing[2] },
|
||||
chip: {
|
||||
paddingHorizontal: spacing[4],
|
||||
paddingVertical: spacing[3],
|
||||
borderRadius: radius.md,
|
||||
backgroundColor: colors.bgSurface,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
},
|
||||
chipActive: { backgroundColor: colors.accent, borderColor: colors.accent },
|
||||
chipText: {
|
||||
fontFamily: typography.fontFamily.ui,
|
||||
fontSize: typography.fontSize.sm,
|
||||
fontWeight: typography.fontWeight.medium,
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
chipTextActive: { color: colors.bgBase },
|
||||
footer: {
|
||||
padding: spacing[5],
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: colors.border,
|
||||
backgroundColor: colors.bgBase,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user