Remove legacy @mui/styles and fix bundle creation

ricard33 · Dec 30, 2021 · eaafc27 · eaafc27
1 parent 2c90c91
commit eaafc27
Show file tree

Hide file tree

Showing 19 changed files with 474 additions and 1,162 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -3,11 +3,11 @@ root = true
 [*]
 charset = utf-8
 end_of_line = lf
-indent_size = 4
+indent_size = 2
 indent_style = space
 insert_final_newline = true
 max_line_length = 120
-tab_width = 4
+tab_width = 2
 
 [{*.har,*.jsb2,*.jsb3,*.json,.babelrc,.eslintrc,.prettierrc,.stylelintrc,bowerrc,jest.config}]
 indent_size = 4
diff --git a/README.md b/README.md
@@ -2,8 +2,8 @@
 
 A react date range picker implementation using @mui (v5).
 
-<a href='https://www.npmjs.com/package/materialui-daterange-picker'>
-    <img src='https://img.shields.io/npm/v/materialui-daterange-picker.svg' alt='Latest npm version'>
+<a href='https://www.npmjs.com/package/mui-daterange-picker'>
+    <img src='https://img.shields.io/npm/v/mui-daterange-picker.svg' alt='Latest npm version'>
 </a>
 
 ## Preview
@@ -12,7 +12,7 @@ A react date range picker implementation using @mui (v5).
 
 ## Live Demo
 
-Check out the project running [here](https://codesandbox.io/s/materialui-daterange-picker-2p3f1?file=/src/App.js)!
+Check out the project running [here](https://codesandbox.io/s/mui-daterange-picker-playground-for-pb-r9rmn?file=/src/App.js)!
 
 ## Usage
 

diff --git a/package/.eslintrc.js b/package/.eslintrc.js
@@ -5,21 +5,21 @@ module.exports = {
     node: true,
   },
   settings: {
-    "import/resolver": {
+    'import/resolver': {
       node: {
-        paths: ["src"],
+        paths: ['src'],
         extensions: [
-          ".js",
-          ".ts",
-          ".jsx",
-          ".tsx",
+          '.js',
+          '.ts',
+          '.jsx',
+          '.tsx',
         ],
       },
     },
   },
   extends: [
     'plugin:react/recommended',
-    'airbnb',
+    // 'airbnb',
   ],
   globals: {
     Atomics: 'readonly',
@@ -38,8 +38,13 @@ module.exports = {
     '@typescript-eslint',
   ],
   rules: {
-    "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],
-    "react/jsx-props-no-spreading": 0,
-    "import/extensions": 0,
+    // note you must disable the base rule as it can report incorrect errors
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': ['error'],
+    'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.jsx'] }],
+    'react/jsx-props-no-spreading': 0,
+    'import/extensions': 0,
+    'react/function-component-definition': 'off',
+    'no-unused-vars': 'warn',
   },
 };
diff --git a/package/package.json b/package/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mui-daterange-picker",
-    "version": "1.0.0",
+    "version": "1.0.2",
     "description": "A react date range picker implementation using @mui.",
     "author": "ricard33",
     "license": "MIT",
@@ -19,11 +19,10 @@
         "prepublish": "yarn run build && yarn run copy_publish_files"
     },
     "peerDependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
         "@mui/icons-material": "^5.0.4",
-        "@mui/material": "^5.0.4",
-        "@mui/styles": "^5.0.1"
+        "@mui/system": "^5.0.6",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
     },
     "devDependencies": {
         "@babel/core": "^7.0.0",
@@ -46,23 +45,25 @@
         "@babel/plugin-syntax-import-meta": "^7.0.0",
         "@babel/preset-env": "^7.0.0",
         "@babel/preset-react": "^7.0.0",
+        "@emotion/react": "^11.7.1",
+        "@emotion/styled": "^11.6.0",
         "@mui/icons-material": "^5.0.4",
-        "@mui/material": "^5.0.4",
-        "@mui/styles": "^5.0.1",
+        "@mui/material": "^5.2.6",
         "@types/classnames": "^2.3.1",
         "@types/jest": "^25.1.2",
         "@types/lodash.isequal": "^4.5.5",
         "@types/react": "^17.0.38",
-        "@typescript-eslint/eslint-plugin": "^2.19.0",
-        "@typescript-eslint/parser": "^2.19.0",
-        "babel-eslint": "^10.0.1",
+        "@typescript-eslint/eslint-plugin": "^5.8.1",
+        "@typescript-eslint/parser": "^5.8.1",
+        "babel-eslint": "^10.1.0",
         "cross-env": "^5.2.0",
-        "eslint": "^6.8.0",
-        "eslint-config-airbnb": "^18.0.1",
-        "eslint-plugin-import": "^2.20.1",
-        "eslint-plugin-jsx-a11y": "^6.2.3",
-        "eslint-plugin-react": "^7.18.3",
-        "eslint-plugin-react-hooks": "^1.7.0",
+        "date-fns": "^2.28.0",
+        "eslint": "^7.32.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-plugin-import": "^2.25.3",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-react": "^7.28.0",
+        "eslint-plugin-react-hooks": "^4.3.0",
         "react": "^17.0.2",
         "react-dom": "17.0.2",
         "react-scripts": "^5.0.0",
@@ -76,8 +77,7 @@
         "typescript": "^4.5.4"
     },
     "dependencies": {
-        "classnames": "^2.3.1",
-        "date-fns": "^1.30.1"
+        "classnames": "^2.3.1"
     },
     "keywords": [
         "react",

diff --git a/package/rollup.config.js b/package/rollup.config.js
@@ -7,6 +7,29 @@ import url from 'rollup-plugin-url';
 
 import pkg from './package.json';
 
+const commonjsOptions = {
+  include: 'node_modules/**',
+  // left-hand side can be an absolute path, a path
+  // relative to the current directory, or the name
+  // of a module in node_modules
+  namedExports: {
+    'node_modules/react/index.js': [
+      'cloneElement',
+      'createContext',
+      'Component',
+      'createElement',
+    ],
+    'node_modules/react-dom/index.js': ['render', 'hydrate'],
+    'node_modules/react-is/index.js': [
+      'isElement',
+      'isFragment',
+      'isValidElementType',
+      'ForwardRef',
+      'Memo',
+    ],
+  },
+};
+
 export default {
   input: 'src/index.ts',
   output: [
@@ -32,6 +55,6 @@ export default {
       rollupCommonJSResolveHack: true,
       clean: true,
     }),
-    commonjs(),
+    commonjs(commonjsOptions),
   ],
 };
diff --git a/package/src/components/DateRangePicker.tsx b/package/src/components/DateRangePicker.tsx
@@ -1,33 +1,12 @@
-/* eslint-disable no-multi-assign */
-/* eslint-disable no-param-reassign */
-
 import * as React from 'react';
 import {
-  addMonths,
-  isSameDay,
-  isWithinRange,
-  isAfter,
-  isBefore,
-  isSameMonth,
-  addYears,
-  max,
-  min,
+  addMonths, addYears, isAfter, isBefore, isSameDay, isSameMonth, isWithinInterval, max, min,
 } from 'date-fns';
-
-// eslint-disable-next-line no-unused-vars
-import { DateRange, NavigationAction, DefinedRange } from '../types';
+import { DateRange, DefinedRange, NavigationAction } from '../types';
 import { getValidatedMonths, parseOptionalDate } from '../utils';
-
 import { defaultRanges } from '../defaults';
-
 import Menu from './Menu';
-
-type Marker = symbol;
-
-export const MARKERS: { [key: string]: Marker } = {
-  FIRST_MONTH: Symbol('firstMonth'),
-  SECOND_MONTH: Symbol('secondMonth'),
-};
+import { Marker, MARKERS } from './Markers';
 
 interface DateRangePickerProps {
   open: boolean;
@@ -86,8 +65,8 @@ const DateRangePicker: React.FunctionComponent<DateRangePickerProps> = (
     let { startDate: newStart, endDate: newEnd } = range;
 
     if (newStart && newEnd) {
-      range.startDate = newStart = max(newStart, minDateValid);
-      range.endDate = newEnd = min(newEnd, maxDateValid);
+      range.startDate = newStart = max([newStart, minDateValid]);
+      range.endDate = newEnd = min([newEnd, maxDateValid]);
 
       setDateRange(range);
       onChange(range);
@@ -139,7 +118,7 @@ const DateRangePicker: React.FunctionComponent<DateRangePickerProps> = (
       && !endDate
       && hoverDay
       && isAfter(hoverDay, startDate)
-      && isWithinRange(day, startDate, hoverDay)) as boolean;
+      && isWithinInterval(day, { start: startDate, end: hoverDay })) as boolean;
 
   const helpers = {
     inHoverRange,

diff --git a/package/src/components/DateRangePickerExporter.tsx b/package/src/components/DateRangePickerExporter.tsx
@@ -1,18 +1,12 @@
-import * as React from 'react';
-import { StylesProvider } from '@mui/styles';
-
-// eslint-disable-next-line no-unused-vars
-import DateRangePickerWrapper, { DateRangePickerWrapperProps } from './DateRangePickerWrapper';
-import generateClassName from '../generateClassName';
+import React from "react";
+import DateRangePickerWrapper, { DateRangePickerWrapperProps } from "./DateRangePickerWrapper";
 
 const DateRangePickerExporter: React.FunctionComponent<DateRangePickerWrapperProps> = (
-  props: DateRangePickerWrapperProps,
+  props: DateRangePickerWrapperProps
 ) => (
-  <StylesProvider generateClassName={generateClassName}>
-    <DateRangePickerWrapper
-      {...props}
-    />
-  </StylesProvider>
+  <DateRangePickerWrapper
+    {...props}
+  />
 );
 
 export default DateRangePickerExporter;
diff --git a/package/src/components/DateRangePickerWrapper.tsx b/package/src/components/DateRangePickerWrapper.tsx
@@ -1,34 +1,13 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
-import * as React from 'react';
-import classNames from 'classnames';
-import { makeStyles } from '@mui/styles';
+import React from 'react';
 
+import { Box } from '@mui/material';
 import DateRangePicker from './DateRangePicker';
 
 // eslint-disable-next-line no-unused-vars
 import { DateRange, DefinedRange } from '../types';
 
-const useStyles = makeStyles(() => ({
-  dateRangePickerContainer: {
-    position: 'relative',
-  },
-  dateRangePicker: {
-    position: 'relative',
-    zIndex: 1,
-  },
-  dateRangeBackdrop: {
-    position: 'fixed',
-    height: '100vh',
-    width: '100vw',
-    bottom: 0,
-    zIndex: 0,
-    right: 0,
-    left: 0,
-    top: 0,
-  },
-}));
-
 export interface DateRangePickerWrapperProps {
   open: boolean;
   toggle: () => void;
@@ -44,8 +23,6 @@ export interface DateRangePickerWrapperProps {
 const DateRangePickerWrapper: React.FunctionComponent<DateRangePickerWrapperProps> = (
   props: DateRangePickerWrapperProps,
 ) => {
-  const classes = useStyles();
-
   const {
     closeOnClickOutside,
     wrapperClassName,
@@ -63,24 +40,31 @@ const DateRangePickerWrapper: React.FunctionComponent<DateRangePickerWrapperProp
 
   const handleKeyPress = (event: any) => event?.key === 'Escape' && handleToggle();
 
-  const wrapperClasses = classNames(classes.dateRangePicker, wrapperClassName);
-
   return (
-    <div className={classes.dateRangePickerContainer}>
+    <Box sx={{ position: 'relative' }}>
       {
         open && (
-          <div
-            className={classes.dateRangeBackdrop}
+          <Box
+            sx={{
+              position: 'fixed',
+              height: '100vh',
+              width: '100vw',
+              bottom: 0,
+              zIndex: 0,
+              right: 0,
+              left: 0,
+              top: 0,
+            }}
             onKeyPress={handleKeyPress}
             onClick={handleToggle}
           />
         )
       }
 
-      <div className={wrapperClasses}>
+      <Box sx={{ position: 'relative', zIndex: 1 }} className={wrapperClassName} >
         <DateRangePicker {...props} />
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };