chore: migrate formatToIST to date-fns-tz
Overview
This MR implement a robust IST date formatter using date-fns and date-fns-tz. It clarifies that [formatToIST] is currently a single-purpose utility for the Asia/Kolkata timezone while adopting the recommended libraries to provide a standardized, robust implementation for the entire application.
What does this MR do and why?
The [formatToIST] utility was previously a custom implementation using native APIs. This MR addresses the technical debt by:
-
Migrating the implementation to
date-fns+date-fns-tzto ensure consistency. - Standardizing the date handling behavior across all browser and environment locales.
This keeps the implementation lightweight while making the current helper's scope clear and library-backed.
Changes Made
-
Modified
[src/lib/utils.ts]- Refactored [formatToIST] to use
formatInTimeZonefromdate-fns-tz. - Added robust timezone handling and input normalization.
- Refactored [formatToIST] to use
-
Modified
[package.json]&[package-lock.json]- Added
date-fnsanddate-fns-tzdependencies.
- Added
-
Modified
[CHANGELOG.md]- Added the migration entry and cleaned up duplicate authorization entries.
Technical Details
The implementation ensures zero regressions in output format.
The migration addresses the following triggers:
- Robust
Asia/Kolkatatimezone enforcement. - Support for detailed timestamps (
showTime: true). - Foundation for future date arithmetic and relative time features.
Type of Change
-
🐛 Bug fix (non-breaking change that fixes an issue) -
✨ New feature (non-breaking change that adds functionality) -
💥 Breaking change (fix or feature that would cause existing functionality to change) -
📝 Documentation update -
🎨 UI/UX improvement -
♻ ️ Refactor (no functional changes - migrated implementation) -
⚡ Performance improvement -
🧪 Test update -
🔧 Configuration change -
🚨 Security fix
Related Issues / References
- #252 (closed)
- Related to:
chore: document date formatting scope and evaluate date-fns if requirements grow
Screenshots or Screen Recordings
Not applicable (visual output remains identical).
How to Set Up and Validate Locally
-
Checkout this branch:
git checkout chore/date-formatter-eval -
Verify dependencies:
npm install -
Run the unit tests:
npm run test -- tests/utils.test.ts/cn.test.ts
Testing Done
-
Manual testing completed -
Unit tests passed
Code Quality Checklist
Code Standards
-
Code follows project conventions (naming, structure, formatting) -
No console.log()or debugger statements left in code -
No unused imports, variables, or functions -
TypeScript types are properly defined -
ESLint and Prettier checks pass
React Best Practices
-
Components are properly split and single-responsibility -
Hooks follow rules (no conditional hooks, proper dependencies) -
State management is appropriate (local vs global state) -
No unnecessary re-renders (memoization used where needed) -
Event handlers are properly cleaned up
Component Patterns
-
shadcn/ui components used correctly -
Tailwind classes follow utility-first approach -
Responsive design considered (mobile-first if applicable) -
Accessibility attributes included (aria-*, role, etc.) -
Icons from lucide-react used consistently
API & Data Fetching
-
TanStack Query used for server state (if applicable) -
Loading and error states handled -
API types defined in src/types/api.ts -
Axios interceptors handle auth tokens correctly -
Use of Zod for data validations
Error Handling
-
Errors are caught and handled gracefully -
User-friendly error messages displayed -
Errors are being toasted properly -
Network failures handled appropriately
Documentation
-
README.md updated (not needed) -
.env.exampleupdated (not needed) -
CHANGELOG.md updated
Known Limitations / Technical Debt
- The project now relies on
date-fnsfor IST formatting.
Additional Notes
This MR fulfills the documentation requirement while providing the actual technical implementation. It improves maintainability by standardizing date handling across the codebase.
MR Acceptance Checklist
Evaluated against the MR acceptance checklist. This change is low risk and provides a scalable foundation for the project's date-related needs.