frontend: finally add sliders for mood entry

Pedro Lucas Porcellis porcellis@eletrotupi.com 1 month ago 3dd5c9c336e53556c29b79567dbbc8913667907e

Parents: 0329ddc

2 file(s) changed

frontend/app/(tabs)/new/entry.tsx +40 -1
frontend/components/ui/ScaleSlider.tsx +173 -0

frontend/app/(tabs)/new/entry.tsx

@@ -21,11 +21,19 @@ import { Button } from '@/components/ui/Button';
    import { Input, TextArea } from '@/components/ui/Input';
    import { Section, SectionHeader } from '@/components/ui/Sections';
    import { Spacing, Typography, Colors } from '@/constants/theme';
  + import { ScaleSlider } from '@/components/ui/ScaleSlider';
  + import { Ionicons } from '@expo/vector-icons';
  + import { useThemeColor } from '@/hooks/use-theme-color';
    
    export default function NewMoodEntry() {
      const { user } = useAuth();
  +   const tintColor = useThemeColor({}, 'tint');
  + 
      // TODO: transform this into a specific mood component
      const { initialMood } = useLocalSearchParams();
  +   const [stress, setStress] = useState(0);
  +   const [anxiety, setAnxiety] = useState(0);
  +   const [energy, setEnergy] = useState(0);
    
      const editComponents = () => {
        console.log("Wants to open the components");

@@ -47,6 +55,37 @@ </ThemedText>
              </Center>
    
              <Card style={styles.resumeCard}>
  +             <Col gap={24}>
  +               <ScaleSlider
  +                 variant="rich"
  +                 label="Energia"
  +                 value={energy}
  +                 onValueChange={setEnergy}
  +                 icon={<Ionicons name="flower-outline" size={20} color={tintColor} />}
  +                 minLabel="Baixa"
  +                 maxLabel="Alta"
  +               />
  + 
  +               <ScaleSlider
  +                 variant="rich"
  +                 label="Ansiedade"
  +                 value={anxiety}
  +                 onValueChange={setAnxiety}
  +                 icon={<Ionicons name="sad-outline" size={20} color="#FB923C" />}
  +                 minLabel="Calmo"
  +                 maxLabel="Ansioso"
  +               />
  + 
  +               <ScaleSlider
  +                 variant="rich"
  +                 label="Estresse"
  +                 value={stress}
  +                 onValueChange={setStress}
  +                 icon={<Ionicons name="flame" size={20} color="#f87171" />}
  +                 minLabel="Relaxado"
  +                 maxLabel="Estressado"
  +               />
  +             </Col>
              </Card>
    
              <Card style={styles.annotationsCard}>

@@ -96,6 +135,6 @@ annotationsCard: {
        padding: Spacing.cardGap
      },
      resumeCard: {
  -     height: 361
  +     padding: Spacing.cardGap,
      }
    });

frontend/components/ui/ScaleSlider.tsx

@@ -0,0 +1,173 @@
  + import React, { useState } from 'react';
  + import {
  +   View,
  +   Text,
  +   StyleSheet,
  +   ViewStyle,
  + } from 'react-native';
  + import Slider from '@react-native-community/slider';
  + import { useThemeColor } from '@/hooks/use-theme-color';
  + import { Theme } from '@/constants/theme';
  + 
  + type SliderVariant = 'rich' | 'compact';
  + 
  + interface ScaleSliderProps {
  +   label: string;
  +   value: number;
  +   onValueChange: (value: number) => void;
  +   min?: number;
  +   max?: number;
  +   step?: number;
  +   minLabel?: string;
  +   maxLabel?: string;
  +   icon?: React.ReactNode;      // rich variant only
  +   showMax?: boolean;           // shows "x/10" format instead of just "x"
  +   variant?: SliderVariant;
  +   style?: ViewStyle;
  + }
  + 
  + export const ScaleSlider: React.FC<ScaleSliderProps> = ({
  +   label,
  +   value,
  +   onValueChange,
  +   min = 0,
  +   max = 10,
  +   step = 1,
  +   minLabel,
  +   maxLabel,
  +   icon,
  +   showMax,
  +   variant = 'compact',
  +   style,
  + }) => {
  +   const textColor = useThemeColor({}, 'text');
  +   const secondaryColor = useThemeColor({}, 'textSecondary');
  +   const tintColor = useThemeColor({}, 'tint');
  +   const trackingColor = useThemeColor({}, 'sliderTracking');
  +   const sliderLabelsColor = useThemeColor({}, 'sliderLabels');
  + 
  +   const isRich = variant === 'rich';
  + 
  +   const valueDisplay = showMax || !isRich
  +     ? `${value}/${max}`
  +     : `${value}`;
  + 
  +   return (
  +     <View style={[styles.container, style]}>
  + 
  +       {/* Header row */}
  +       <View style={styles.header}>
  +         <View style={styles.labelRow}>
  +           {isRich && icon && (
  +             <View style={styles.iconWrapper}>{icon}</View>
  +           )}
  +           <Text style={[
  +             isRich ? styles.labelRich : styles.labelCompact,
  +             { color: textColor },
  +           ]}>
  +             {label}
  +           </Text>
  +         </View>
  + 
  +         <Text style={[
  +           isRich ? styles.valueRich : styles.valueCompact,
  +           { color: textColor },
  +         ]}>
  +           {valueDisplay}
  +         </Text>
  +       </View>
  + 
  +       <View style={{ marginRight: -10, marginLeft: -10 }}>
  +         {/* Slider */}
  +         <Slider
  +           style={styles.slider}
  +           minimumValue={min}
  +           maximumValue={max}
  +           step={step}
  +           value={value}
  +           onValueChange={onValueChange}
  +           minimumTrackTintColor={trackingColor}
  +           maximumTrackTintColor={trackingColor}
  +           thumbTintColor={tintColor}
  +         />
  +       </View>
  + 
  +       {/* Min / Max labels */}
  +       {(minLabel || maxLabel) && (
  +         <View style={styles.rangeLabels}>
  +           {minLabel && (
  +             <Text style={[styles.rangeLabel, { color: sliderLabelsColor }]}>
  +               {minLabel.toUpperCase()}
  +             </Text>
  +           )}
  +           {maxLabel && (
  +             <Text style={[styles.rangeLabel, { color: sliderLabelsColor }]}>
  +               {maxLabel.toUpperCase()}
  +             </Text>
  +           )}
  +         </View>
  +       )}
  + 
  +     </View>
  +   );
  + };
  + 
  + // ============================================================================
  + // STYLES
  + // ============================================================================
  + 
  + const styles = StyleSheet.create({
  +   container: {
  +     width: '100%',
  +   },
  +   header: {
  +     flexDirection: 'row',
  +     justifyContent: 'space-between',
  +     alignItems: 'center',
  +     marginBottom: 4,
  +   },
  +   labelRow: {
  +     flexDirection: 'row',
  +     alignItems: 'center',
  +     gap: 8,
  +   },
  +   iconWrapper: {
  +     justifyContent: 'center',
  +     alignItems: 'center',
  +   },
  + 
  +   // Rich variant
  +   labelRich: {
  +     fontSize: 14,
  +     fontWeight: 500
  +   },
  +   valueRich: {
  +     fontSize: 18,
  +     lineHeight: 28,
  +     fontWeight: 600
  +   },
  + 
  +   // Compact variant
  +   labelCompact: {
  +     fontSize: Theme.typography.bodyLg.fontSize,
  +   },
  +   valueCompact: {
  +     fontSize: Theme.typography.bodyMd.fontSize,
  +     fontWeight: Theme.typography.bodyMd.fontWeight,
  +     color: secondaryColor,
  +   },
  + 
  +   slider: {
  +     width: '100%',
  +     height: 40,
  +   },
  +   rangeLabels: {
  +     flexDirection: 'row',
  +     justifyContent: 'space-between',
  +     marginTop: -4,
  +   },
  +   rangeLabel: {
  +     ...Theme.typography.labelXs,
  +     fontWeight: 500,
  +   },
  + });