Introduce PropTypes to DoseCalculator component

[Copilot]

This PR adds comprehensive PropTypes validation to a new DoseCalculator component in src/components/DoseCalculator.js (implemented as TypeScript .tsx). The component enhances type checking during development, catches prop misuse early, and promotes better code quality without affecting production builds or app functionality.

Key Features

Comprehensive PropTypes Validation (42 total props):

• 13 required setter functions for proper state management (e.g., setDose, setUnit, setSubstanceName)
• Enum validation for restricted values like units (mg, mcg, units, mL), medication types, calculation steps, and themes
• Shape validation for complex objects like syringe configuration with required type and volume properties
• Type validation for strings, numbers, booleans, and functions
• Default props for all optional properties ensuring sensible fallbacks

Example PropTypes implementation:

DoseCalculator.propTypes = {
  // Required setter functions
  setDose: PropTypes.func.isRequired,
  setUnit: PropTypes.func.isRequired,
  
  // Enum validation for units
  unit: PropTypes.oneOf(['mg', 'mcg', 'units', 'mL']),
  
  // Shape validation for complex objects
  manualSyringe: PropTypes.shape({
    type: PropTypes.oneOf(['Insulin', 'Standard']).isRequired,
    volume: PropTypes.string.isRequired,
  }),
  
  // Optional props with validation
  isLoading: PropTypes.bool,
  theme: PropTypes.oneOf(['light', 'dark', 'auto']),
};

Benefits

• Enhanced development experience - PropTypes provide runtime validation and helpful error messages during development
• Early error detection - Catches prop misuse before it reaches production
• Better code documentation - PropTypes serve as live documentation of component interfaces
• Improved maintainability - Clear prop contracts make the codebase easier to maintain
• Zero production impact - PropTypes are automatically stripped in production builds

Implementation Details

The component is designed to integrate seamlessly with the existing useDoseCalculator hook and can be used alongside or in place of existing dose calculation UI components. It includes comprehensive validation for:

• Dose input management (amounts, units, substance names)
• Medication source configuration (concentration vs total amount)
• Syringe selection and validation
• Error handling and user hints
• Step-by-step calculation flow
• Custom validation functions

Files Added

• src/components/DoseCalculator.tsx - Main component with PropTypes validation
• src/components/DoseCalculator.test.tsx - Comprehensive test suite
• src/components/DoseCalculatorIntegration.tsx - Integration examples
• src/components/README.md - Detailed documentation
• Verification scripts demonstrating PropTypes functionality

Fixes #387.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
safe-dose	Ready	Preview	Comment	Sep 19, 2025 7:36pm