Initial Commit

frontend/src/core/units/UnitsContext.tsx

@@ -0,0 +1,117 @@
+/**
+ * @ai-summary React context for unit system preferences
+ * @ai-context Provides unit preferences and conversion functions throughout the app
+ */
+
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { UnitSystem, UnitPreferences } from './units.types';
+import {
+  formatDistanceBySystem,
+  formatVolumeBySystem,
+  formatFuelEfficiencyBySystem,
+  formatPriceBySystem,
+  convertDistanceBySystem,
+  convertVolumeBySystem,
+  convertFuelEfficiencyBySystem,
+  getDistanceUnit,
+  getVolumeUnit,
+  getFuelEfficiencyUnit
+} from './units.utils';
+
+interface UnitsContextType {
+  unitSystem: UnitSystem;
+  setUnitSystem: (system: UnitSystem) => void;
+  preferences: UnitPreferences;
+  
+  // Conversion functions
+  convertDistance: (miles: number) => number;
+  convertVolume: (gallons: number) => number;
+  convertFuelEfficiency: (mpg: number) => number;
+  
+  // Formatting functions
+  formatDistance: (miles: number, precision?: number) => string;
+  formatVolume: (gallons: number, precision?: number) => string;
+  formatFuelEfficiency: (mpg: number, precision?: number) => string;
+  formatPrice: (pricePerGallon: number, currency?: string, precision?: number) => string;
+}
+
+const UnitsContext = createContext<UnitsContextType | undefined>(undefined);
+
+interface UnitsProviderProps {
+  children: ReactNode;
+  initialSystem?: UnitSystem;
+}
+
+export const UnitsProvider: React.FC<UnitsProviderProps> = ({ 
+  children, 
+  initialSystem = 'imperial' 
+}) => {
+  const [unitSystem, setUnitSystem] = useState<UnitSystem>(initialSystem);
+  
+  // Load unit preference from localStorage on mount
+  useEffect(() => {
+    const stored = localStorage.getItem('motovaultpro-unit-system');
+    if (stored === 'imperial' || stored === 'metric') {
+      setUnitSystem(stored);
+    }
+  }, []);
+  
+  // Save unit preference to localStorage when changed
+  const handleSetUnitSystem = (system: UnitSystem) => {
+    setUnitSystem(system);
+    localStorage.setItem('motovaultpro-unit-system', system);
+  };
+  
+  // Generate preferences object based on current system
+  const preferences: UnitPreferences = {
+    system: unitSystem,
+    distance: getDistanceUnit(unitSystem),
+    volume: getVolumeUnit(unitSystem),
+    fuelEfficiency: getFuelEfficiencyUnit(unitSystem),
+  };
+  
+  // Conversion functions using current unit system
+  const convertDistance = (miles: number) => convertDistanceBySystem(miles, unitSystem);
+  const convertVolume = (gallons: number) => convertVolumeBySystem(gallons, unitSystem);
+  const convertFuelEfficiency = (mpg: number) => convertFuelEfficiencyBySystem(mpg, unitSystem);
+  
+  // Formatting functions using current unit system
+  const formatDistance = (miles: number, precision?: number) => 
+    formatDistanceBySystem(miles, unitSystem, precision);
+  
+  const formatVolume = (gallons: number, precision?: number) => 
+    formatVolumeBySystem(gallons, unitSystem, precision);
+    
+  const formatFuelEfficiency = (mpg: number, precision?: number) => 
+    formatFuelEfficiencyBySystem(mpg, unitSystem, precision);
+    
+  const formatPrice = (pricePerGallon: number, currency?: string, precision?: number) => 
+    formatPriceBySystem(pricePerGallon, unitSystem, currency, precision);
+
+  const value: UnitsContextType = {
+    unitSystem,
+    setUnitSystem: handleSetUnitSystem,
+    preferences,
+    convertDistance,
+    convertVolume,
+    convertFuelEfficiency,
+    formatDistance,
+    formatVolume,
+    formatFuelEfficiency,
+    formatPrice,
+  };
+
+  return (
+    <UnitsContext.Provider value={value}>
+      {children}
+    </UnitsContext.Provider>
+  );
+};
+
+export const useUnits = (): UnitsContextType => {
+  const context = useContext(UnitsContext);
+  if (context === undefined) {
+    throw new Error('useUnits must be used within a UnitsProvider');
+  }
+  return context;
+};