Update the dependecies to the new versions

.storybook/config.js

@@ -0,0 +1,3 @@
+import { configure } from '@storybook/react'
+
+configure(require.context('../src', true, /\.stories\.tsx$/), module)

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+ stories: ['../src/**/*.stories.tsx'],
+ // addons: ['@storybook/preset-typescript'],
+};

.storybook/webpack.config.js

@@ -0,0 +1,19 @@
+const path = require('path')
+const SRC_PATH = path.join(__dirname, '../src')
+
+module.exports = ({ config }) => {
+ config.module.rules.push({
+ test: /\.(ts|tsx)$/,
+ include: [SRC_PATH],
+ use: [
+ {
+ loader: require.resolve('awesome-typescript-loader'),
+ options: {
+ configFileName: './tsconfig.json'
+ }
+ }
+ ]
+ })
+ config.resolve.extensions.push('.ts', '.tsx')
+ return config
+}

package.json

@@ -11,25 +11,34 @@
  "url": "https://github.com/matharumanpreet00/react-daterange-picker"
  },
  "main": "build/index.js",
+ "module": "build/index.es.js",
+ "jsnext:main": "build/index.es.js",
  "scripts": {
- "start": "tsc --watch",
- "build": "tsc",
- "test": "echo \"Error: no test specified\" && exit 1"
+ "build": "rollup -c",
+ "storybook": "start-storybook"
  },
  "dependencies": {
- "@material-ui/core": "^3.9.2",
- "@material-ui/icons": "^3.0.2",
- "date-fns": "^1.30.1"
+ "@material-ui/core": "^4.9.5",
+ "@material-ui/icons": "^4.5.1",
+ "date-fns": "^2.10.0"
  },
  "devDependencies": {
- "@types/react": "^16.8.8",
- "@types/react-dom": "^16.8.3",
- "typescript": "^3.3.4"
+ "@babel/core": "^7.8.6",
+ "@storybook/react": "^5.3.14",
+ "awesome-typescript-loader": "^5.2.1",
+ "babel-loader": "^8.0.6",
+ "rollup": "^1.27.13",
+ "rollup-plugin-commonjs": "^10.1.0",
+ "rollup-plugin-node-resolve": "^5.2.0",
+ "rollup-plugin-peer-deps-external": "^2.2.0",
+ "rollup-plugin-typescript2": "^0.25.3",
+ "typescript": "^3.7.3"
  },
  "peerDependencies": {
- "@material-ui/core": "^3.9.2",
- "react": "^16.8.4",
- "react-dom": "^16.8.4"
+ "@material-ui/core": "^4.9.5",
+ "@material-ui/icons": "^4.5.1",
+ "react": "^16",
+ "react-dom": "^16"
  },
  "keywords": [
  "react",

rollup.config.js

@@ -0,0 +1,46 @@
+import typescript from 'rollup-plugin-typescript2'
+import commonjs from 'rollup-plugin-commonjs'
+import external from 'rollup-plugin-peer-deps-external'
+import resolve from 'rollup-plugin-node-resolve'
+import pkg from './package.json'
+
+export default {
+ input: 'src/index.tsx',
+ output: [
+ {
+ file: pkg.main,
+ format: 'cjs',
+ exports: 'named',
+ sourcemap: true
+ },
+ {
+ file: pkg.module,
+ format: 'es',
+ exports: 'named',
+ sourcemap: true
+ }
+ ],
+ plugins: [
+ external(),
+ resolve(),
+ typescript({
+ rollupCommonJSResolveHack: true,
+ exclude: [
+ '**/__tests__/**'
+ ],
+ clean: true
+ }),
+ commonjs({
+ include: ['node_modules/**'],
+ namedExports: {
+ 'node_modules/react/react.js': [
+ 'Children',
+ 'Component',
+ 'PropTypes',
+ 'createElement'
+ ],
+ 'node_modules/react-dom/index.js': ['render']
+ }
+ })
+ ]
+}

src/components/Day.tsx

@@ -1,93 +1,87 @@
 import * as React from "react";
-import {
- IconButton,
- Typography,
- createStyles,
- Theme,
- WithStyles,
- withStyles
-} from "@material-ui/core";
 import { combine } from "../utils";
+import { IconButton, Typography } from "@material-ui/core";
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
 
-interface DayProps extends WithStyles<typeof styles> {
- filled?: boolean;
- outlined?: boolean;
- highlighted?: boolean;
- disabled?: boolean;
- startOfRange?: boolean;
- endOfRange?: boolean;
- onClick?: () => void;
- onHover?: () => void;
- value: number | string;
+interface DayProps {
+ filled?: boolean;
+ outlined?: boolean;
+ highlighted?: boolean;
+ disabled?: boolean;
+ startOfRange?: boolean;
+ endOfRange?: boolean;
+ onClick?: () => void;
+ onHover?: () => void;
+ value: number | string;
 }
 
-const styles = (theme: Theme) =>
- createStyles({
- leftBorderRadius: {
- borderRadius: "50% 0 0 50%"
- },
- rightBorderRadius: {
- borderRadius: "0 50% 50% 0"
- },
- buttonContainer: {
- display: "flex"
- },
- button: {
- height: 36,
- width: 36,
- padding: 0
- },
- buttonText: {
- lineHeight: 1.6
- },
- outlined: {
- border: `1px solid ${theme.palette.primary.dark}`
- },
- filled: {
- "&:hover": {
- backgroundColor: theme.palette.primary.dark
- },
- backgroundColor: theme.palette.primary.dark
- },
- highlighted: {
- backgroundColor: theme.palette.action.hover
- },
- contrast: {
- color: theme.palette.primary.contrastText
- }
- });
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ leftBorderRadius: {
+ borderRadius: "50% 0 0 50%"
+ },
+ rightBorderRadius: {
+ borderRadius: "0 50% 50% 0"
+ },
+ buttonContainer: {
+ display: "flex"
+ },
+ button: {
+ height: 36,
+ width: 36,
+ padding: 0
+ },
+ buttonText: {
+ lineHeight: 1.6
+ },
+ outlined: {
+ border: `1px solid ${theme.palette.primary.dark}`
+ },
+ filled: {
+ "&:hover": {
+ backgroundColor: theme.palette.primary.dark
+ },
+ backgroundColor: theme.palette.primary.dark
+ },
+ highlighted: {
+ backgroundColor: theme.palette.action.hover
+ },
+ contrast: {
+ color: theme.palette.primary.contrastText
+ }
+ })
+)
 
-const Day: React.FunctionComponent<DayProps> = props => {
- const { classes } = props;
- return (
- <div
- className={combine(
- classes.buttonContainer,
- props.startOfRange && classes.leftBorderRadius,
- props.endOfRange && classes.rightBorderRadius,
- !props.disabled && props.highlighted && classes.highlighted
- )}>
- <IconButton
- className={combine(
- classes.button,
- !props.disabled && props.outlined && classes.outlined,
- !props.disabled && props.filled && classes.filled
- )}
- disabled={props.disabled}
- onClick={props.onClick}
- onMouseOver={props.onHover}>
- <Typography
- color={!props.disabled ? "default" : "textSecondary"}
- className={combine(
- classes.buttonText,
- !props.disabled && props.filled && classes.contrast
- )}
- variant="body2">
- {props.value}
- </Typography>
- </IconButton>
- </div>
- );
+const Day = (props: DayProps) => {
+ const classes = useStyles();
+ return (
+ <div
+ className={combine(
+ classes.buttonContainer,
+ props.startOfRange && classes.leftBorderRadius,
+ props.endOfRange && classes.rightBorderRadius,
+ !props.disabled && props.highlighted && classes.highlighted
+ )}>
+ <IconButton
+ className={combine(
+ classes.button,
+ !props.disabled && props.outlined && classes.outlined,
+ !props.disabled && props.filled && classes.filled
+ )}
+ disabled={props.disabled}
+ onClick={props.onClick}
+ onMouseOver={props.onHover}>
+ <Typography
+ className={combine(
+ classes.buttonText,
+ !props.disabled && props.filled && classes.contrast
+ )}
+ variant="body2">
+ {props.value}
+ </Typography>
+ </IconButton>
+ </div>
+ );
 };
 
-export default withStyles(styles)(Day);
+export default Day;

src/components/Header.tsx

@@ -1,12 +1,10 @@
 import {
- WithStyles,
  Grid,
- createStyles,
- withStyles,
  IconButton,
  Select,
  MenuItem
 } from "@material-ui/core";
+import { WithStyles, createStyles, withStyles } from '@material-ui/core/styles'
 import React from "react";
 import ChevronLeft from "@material-ui/icons/ChevronLeft";
 import ChevronRight from "@material-ui/icons/ChevronRight";
@@ -19,6 +17,7 @@ interface HeaderProps extends WithStyles<typeof styles> {
  prevDisabled: boolean;
  onClickNext: () => void;
  onClickPrevious: () => void;
+ months?: [string, string, string, string, string, string, string, string, string, string, string, string];
 }
 
 const styles = createStyles({
@@ -52,7 +51,7 @@ const generateYears = (relativeTo: Date, count: number) => {
  const half = Math.floor(count / 2);
  return Array(count)
  .fill(0)
- .map((y, i) => relativeTo.getFullYear() - half + i); // TODO: make part of the state
+ .map((_, i) => relativeTo.getFullYear() - half + i); // TODO: make part of the state
 };
 
 const Header: React.FunctionComponent<HeaderProps> = ({
@@ -62,7 +61,8 @@ const Header: React.FunctionComponent<HeaderProps> = ({
  nextDisabled,
  prevDisabled,
  onClickNext,
- onClickPrevious
+ onClickPrevious,
+ months = MONTHS,
 }) => {
  const handleMonthChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
  setDate(setMonth(date, parseInt(event.target.value)));
@@ -87,7 +87,7 @@ const Header: React.FunctionComponent<HeaderProps> = ({
  value={getMonth(date)}
  onChange={handleMonthChange}
  MenuProps={{ disablePortal: true }}>
- {MONTHS.map((month, idx) => (
+ {months.map((month, idx) => (
  <MenuItem key={month} value={idx}>
  {month}
  </MenuItem>