Merge pull request #631 from hypeserver/date-fns-support

upgrade for datefns 3

Author: keremciu

.babelrc

@@ -4,9 +4,8 @@
     ["@babel/preset-react"]
   ],
   "plugins": [
-    ["@babel/plugin-proposal-class-properties"],
-    ["@babel/plugin-proposal-export-default-from"],
-    "date-fns"
+    ["@babel/plugin-transform-class-properties"],
+    ["@babel/plugin-proposal-export-default-from"]
   ]
 }
 

.github/workflows/tests.yml

@@ -5,10 +5,10 @@ jobs:
     name: Test
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: borales/actions-yarn@v2.0.0
+      - uses: actions/checkout@v3
+      - uses: borales/actions-yarn@v4
         with:
           cmd: install
-      - uses: borales/actions-yarn@v2.0.0
+      - uses: borales/actions-yarn@v4
         with:
           cmd: test

.vscode/settings.json

@@ -1,7 +1,4 @@
 {
   "eslint.enable": true,
-  "editor.tabSize": 2,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  }
+  "editor.tabSize": 2
 }

demo/components/Logo.js demo/components/Logo.jsxdemo/components/Logo.js renamed to demo/components/Logo.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Styled from 'rsg-components/Styled';
-import Heading from 'rsg-components/Heading';
 // Import default implementation from react-styleguidist using the full path
 import DefaultSectionsRenderer from 'react-styleguidist/lib/client/rsg-components/Sections/SectionsRenderer';
 
@@ -15,7 +14,7 @@ const styles = ({ fontFamily, space }) => ({
   },
 });
 
-export function SectionsRenderer({ classes, children }) {
+function SectionsRenderer({ children }) {
   return (
     <div>
       <DefaultSectionsRenderer>{children}</DefaultSectionsRenderer>

demo/components/SectionsRenderer.js demo/components/SectionsRenderer.jsxdemo/components/SectionsRenderer.js renamed to demo/components/SectionsRenderer.jsx

@@ -1,6 +1,6 @@
 {
   "name": "react-date-range",
-  "version": "1.4.0",
+  "version": "2.0.0-alpha.4",
   "description": "A React component for choosing dates and date ranges.",
   "main": "dist/index.js",
   "scripts": {
@@ -44,22 +44,21 @@
     "shallow-equal": "^1.2.1"
   },
   "peerDependencies": {
-    "date-fns": "2.0.0-alpha.7 || >=2.0.0",
+    "date-fns": "3.0.6 || >=3.0.0",
     "react": "^0.14 || ^15.0.0-rc || >=15.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.7",
+    "@babel/cli": "^7.23.4",
     "@babel/core": "^7.4.4",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-proposal-export-default-from": "^7.7.4",
+    "@babel/plugin-transform-class-properties": "^7.23.3",
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "^7.7.4",
     "autoprefixer": "^9.7.3",
     "babel-eslint": "^10.0.3",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-date-fns": "^2.0.0",
-    "css-loader": "^3.2.0",
-    "date-fns": "^2.8.1",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^3.6.0",
+    "date-fns": "^3.0.6",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.3",
@@ -79,9 +78,9 @@
     "prettier": "^1.19.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-styleguidist": "^10.4.0",
-    "style-loader": "^1.0.0",
+    "react-styleguidist": "^12.0.1",
+    "style-loader": "^1.3.0",
     "url-loader": "^3.0.0",
-    "webpack": "^4.41.5"
+    "webpack": "^5.89.0"
   }
 }

demo/components/StyleGuide.js demo/components/StyleGuide.jsxdemo/components/StyleGuide.js renamed to demo/components/StyleGuide.jsx

@@ -27,7 +27,7 @@ import {
   min,
   max,
 } from 'date-fns';
-import defaultLocale from 'date-fns/locale/en-US';
+import { enUS as defaultLocale } from 'date-fns/locale/en-US';
 import coreStyles from '../../styles';
 import { ariaLabelsShape } from '../../accessibility';
 
@@ -99,9 +99,9 @@ class Calendar extends PureComponent {
   updateShownDate = (props = this.props) => {
     const newProps = props.scroll.enabled
       ? {
-          ...props,
-          months: this.list.getVisibleRange().length,
-        }
+        ...props,
+        months: this.list.getVisibleRange().length,
+      }
       : props;
     const newFocus = calcFocusDate(this.state.focusedDate, newProps);
     this.focusToDate(newFocus, newProps);
@@ -493,7 +493,7 @@ class Calendar extends PureComponent {
               isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal
             )}>
             {new Array(this.props.months).fill(null).map((_, i) => {
-              let monthStep = addMonths(this.state.focusedDate, i);;
+              let monthStep = addMonths(this.state.focusedDate, i);
               if (this.props.calendarFocus === 'backwards') {
                 monthStep = subMonths(this.state.focusedDate, this.props.months - 1 - i);
               }
@@ -530,7 +530,7 @@ Calendar.defaultProps = {
   showMonthArrow: true,
   showMonthAndYearPickers: true,
   disabledDates: [],
-  disabledDay: () => {},
+  disabledDay: () => { },
   classNames: {},
   locale: defaultLocale,
   ranges: [],

package.json

@@ -6,25 +6,18 @@ module.exports = {
   //ignore: ['**/*.test.js', '**/DateInput/*', '**/DayCell/*', '**/Month/*', '**/InputRangeField/*'],
   title: 'react-date-range',
   showSidebar: false,
+  require: [
+    path.join(__dirname, 'dist/styles.css'),
+    path.join(__dirname, 'dist/theme/default.css'),
+    path.join(__dirname, 'demo/styles.css')
+  ],
   template: {
     head: {
       links: [
         {
           rel: 'stylesheet',
           href: 'https://fonts.googleapis.com/css?family=Open+Sans:300,400',
         },
-        {
-          rel: 'stylesheet',
-          href: './dist/styles.css',
-        },
-        {
-          rel: 'stylesheet',
-          href: './dist/theme/default.css',
-        },
-        {
-          rel: 'stylesheet',
-          href: './demo/styles.css',
-        },
       ],
     },
   },
@@ -75,20 +68,22 @@ module.exports = {
     'react-date-range': path.resolve(__dirname, moduleSource),
   },
   webpackConfig: {
+    mode: isDEV ? 'development' : 'production',
+    devtool: isDEV ? 'eval' : 'source-map',
     module: {
       rules: [
         {
-          test: /\.jsx?$/,
+          test: /\.(?:jsx|mjs|cjs|js)$/,
           exclude: /node_modules/,
-          loader: 'babel-loader',
+          use: 'babel-loader',
         },
         {
           test: /\.css$/,
-          loader: 'style-loader!css-loader?modules',
+          use: ["style-loader", "css-loader"],
         },
         {
           test: /\.svg$/,
-          loader: 'url-loader',
+          use: 'url-loader',
         },
       ],
     },