update readme, changelog

Author: goguda

CHANGELOG.md

@@ -4,6 +4,28 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## 3.0.0
+
+### Changed
+
+- Project development taken over by iROOMit Inc!
+- All components rewritten in TypeScript
+- Class components converted to functional components
+- Rewrote all PropTypes declarations as TypeScript type definitions
+- `date-fns` dependency upgraded to v3
+- `Webpack` upgraded to v5
+- Upgraded `Babel`, `Jest`, `React` dependencies to latest versions
+- Removed `shallow-equal` dependency in favour of built-in `JSON.stringify()`
+
+### To Do
+
+- Convert demo project to TypeScript
+- Convert tests to TypeScript
+
+Going forward, any changes should reference cooresponding commit IDs. Because this version marks a takeover and entire rewrite of the project, commit IDs have been omitted due to various changes taking place over several commits.
+
+**This should not be a breaking release. All previous props and components from this library are still valid after the TypeScript rewrite.**
+
 ## 1.4.0
 
 ### Added

README.md

@@ -1,8 +1,7 @@
 # @iroomit/react-date-range
-[![npm](https://img.shields.io/npm/v/react-date-range)](https://www.npmjs.com/package/react-date-range)
-[![npm](https://img.shields.io/npm/l/react-date-range)]()
-[![npm](https://img.shields.io/npm/dw/react-date-range)](https://www.npmjs.com/package/react-date-range)
-[![sponsors](https://img.shields.io/github/sponsors/hypeserver)](https://github.com/sponsors/hypeserver)
+[![npm](https://img.shields.io/npm/v/@iroomit/react-date-range)](https://www.npmjs.com/package/@iroomit/react-date-range)
+[![npm](https://img.shields.io/npm/l/@iroomit/react-date-range)]()
+[![npm](https://img.shields.io/npm/dw/@iroomit/react-date-range)](https://www.npmjs.com/package/react-date-range)
 
 
 A date library agnostic React component for choosing dates and date ranges. Uses [date-fns](http://date-fns.org/) for date operations.
@@ -11,7 +10,9 @@ A date library agnostic React component for choosing dates and date ranges. Uses
 
 This awesome project is a fork of the original [react-date-range](https://github.com/hypeserver/react-date-range) by hypeserver.
 
-This fork aims at keeping this project alive. Dependencies have been upgraded, class components updated to function components and the entire project has been rewritten in TypeScript. Some of the code has also been optimized further with newer React features.
+This fork aims at keeping this project alive!
+
+Dependencies have been upgraded, class components updated to function components and the entire project has been rewritten in TypeScript. Some of the code has also been optimized further with newer React features.
 
 ### Why should you use `@iroomit/react-date-range`?
 
@@ -22,11 +23,11 @@ This fork aims at keeping this project alive. Dependencies have been upgraded, c
 - Based on native js dates
 - Drag n Drop selection
 - Keyboard friendly
-- TypeScript support
+- Built-in TypeScript support
 
-**Live Demo :** [http://hypeserver.github.io/react-date-range](http://hypeserver.github.io/react-date-range)
+**Live Demo :** [http://iroomitapp.github.io/react-date-range](http://iroomitapp.github.io/react-date-range)
 
-![](https://raw.githubusercontent.com/hypeserver/react-date-range/master/demo/ss.png)
+![](https://raw.githubusercontent.com/iroomitapp/react-date-range/master/demo/ss.png)
 
 
 ## Getting Started
@@ -55,6 +56,12 @@ This plugin expects `react` and `date-fns` as peerDependencies, It means that yo
 npm install react date-fns
 ```
 
+or
+
+```
+yarn add react date-fns
+```
+
 ## Usage
 
 You need to import skeleton and theme styles first.
@@ -162,8 +169,8 @@ startDatePlaceholder                 | String    | `Early`          | Start Date
 endDatePlaceholder                   | String    | `Continuous`     | End Date Placeholder
 fixedHeight                          | Boolean   | false            | Since some months require less than 6 lines to show, by setting this prop, you can force 6 lines for all months.
 renderStaticRangeLabel(`DefinedRange`)| Function |                  | Callback function to be triggered for the static range configurations that have `hasCustomRendering: true` on them. Instead of rendering `staticRange.label`, return value of this callback will be rendered.
-staticRanges(`DefinedRange`, `DateRangePicker`)  | Array            | [default preDefined ranges](https://github.com/hypeserver/react-date-range/blob/master/src/defaultRanges.js)             | -
-inputRanges(`DefinedRange`, `DateRangePicker`)   | Array            | [default input ranges](https://github.com/hypeserver/react-date-range/blob/master/src/defaultRanges.js)             | -
+staticRanges(`DefinedRange`, `DateRangePicker`)  | Array            | [default preDefined ranges](https://github.com/iroomitapp/react-date-range/blob/master/src/defaultRanges.ts)             | -
+inputRanges(`DefinedRange`, `DateRangePicker`)   | Array            | [default input ranges](https://github.com/iroomitapp/react-date-range/blob/master/src/defaultRanges.ts)             | -
 ariaLabels                           | Object    | {}               | inserts aria-label to inner elements
 dayContentRenderer                   | Function  | null             | Function to customize the rendering of Calendar Day. given a date is supposed to return what to render.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iroomit/react-date-range",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "description": "A React component for choosing dates and date ranges.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -81,7 +81,7 @@
     "postcss": "^8.2.13",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.0.0",
-    "postcss-loader": "^7.3.4",
+    "postcss-loader": "^8.0.0",
     "prettier": "^3.1.1",
     "react": "^18.0.0",
     "react-docgen-typescript": "^2.2.2",

src/index.ts

@@ -1,5 +1,5 @@
-export { default as DateRange } from './components/DateRange';
-export { default as Calendar } from './components/Calendar';
-export { default as DateRangePicker } from './components/DateRangePicker';
+export { default as DateRange, type DateRangeProps } from './components/DateRange';
+export { default as Calendar, type CalendarProps } from './components/Calendar';
+export { default as DateRangePicker, type DateRangePickerProps } from './components/DateRangePicker';
 export { default as DefinedRange } from './components/DefinedRange';
 export { defaultInputRanges, defaultStaticRanges, createStaticRanges } from './defaultRanges';

src/utils.ts

@@ -14,29 +14,29 @@ import { DateRange } from './components/DayCell';
 
 export function calcFocusDate(currentFocusedDate: Date, shownDate?: Date, date?: Date, months?: number, ranges?: DateRange[], focusedRange?: number[], displayMode?: "dateRange" | "date") {
   // find primary date according the props
-  let targetInterval;
+  let targetInterval: DateRange;
   if (displayMode === 'dateRange') {
     const range = ranges[focusedRange[0]];
     targetInterval = {
-      start: range?.startDate,
-      end: range?.endDate,
+      startDate: range?.startDate,
+      endDate: range?.endDate,
     };
   } else {
     targetInterval = {
-      start: date,
-      end: date,
+      startDate: date,
+      endDate: date,
     };
   }
-  targetInterval.start = startOfMonth(targetInterval.start || new Date());
-  targetInterval.end = endOfMonth(targetInterval.end || targetInterval.start);
-  const targetDate = targetInterval.start || targetInterval.end || shownDate || new Date();
+  targetInterval.startDate = startOfMonth(targetInterval.startDate || new Date());
+  targetInterval.endDate = endOfMonth(targetInterval.endDate || targetInterval.startDate);
+  const targetDate = targetInterval.startDate || targetInterval.endDate || shownDate || new Date();
 
   // initial focus
   if (!currentFocusedDate) return shownDate || targetDate;
 
   // // just return targetDate for native scrolled calendars
   // if (scroll.enabled) return targetDate;
-  if (differenceInCalendarMonths(targetInterval.start, targetInterval.end) > months) {
+  if (differenceInCalendarMonths(targetInterval.startDate, targetInterval.endDate) > months) {
     // don't change focused if new selection in view area
     return currentFocusedDate;
   }