weekStartsOn propagation

.babelrc

@@ -1,12 +1,3 @@
 {
-  "presets": [
-    ["@babel/preset-env"],
-    ["@babel/preset-react"]
-  ],
-  "plugins": [
-    ["@babel/plugin-proposal-class-properties"],
-    ["@babel/plugin-proposal-export-default-from"],
-    "date-fns"
-  ]
-}
-
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

LICENSE

@@ -1,6 +1,7 @@
 The MIT License (MIT)
 Copyright (c) 2015-2020 Adphorus
 Copyright (c) 2020-     Hypeserver
+Copyright (c) 2021-     Guillermo Pages
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -1,35 +1,36 @@
 # 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/react-date-range-ts)](https://www.npmjs.com/package/react-date-range-ts)
+[![npm](https://img.shields.io/npm/dw/react-date-range-ts)](https://www.npmjs.com/package/react-date-range-ts)
+[![sponsors](https://img.shields.io/github/sponsors/hypeserver)](https://github.com/sponsors/hypeserver-ts)
 
 A date library agnostic React component for choosing dates and date ranges. Uses [date-fns](http://date-fns.org/) for date operations.
 
-### Why should you use `react-date-range`?
+## Why should you use `react-date-range-ts`
 
 - Stateless date operations
 - Highly configurable
 - Multiple range selection
 - Based on native js dates
 - Drag n Drop selection
 - Keyboard friendly
+- Fully Typed with Typescript
 
-**Live Demo :** [http://hypeserver.github.io/react-date-range](http://hypeserver.github.io/react-date-range)
-
-![](https://raw.githubusercontent.com/hypeserver/react-date-range/master/demo/ss.png)
+**Live Demo :** [http://gbili.github.io/react-date-range-ts](http://gbili.github.io/react-date-range-ts)
 
+![demo-calendar-screenshot](https://raw.githubusercontent.com/gbili/react-date-range-ts/master/demo/ss.png)
 
 ## Getting Started
+
 ### Installation
 
+```sh
+npm install --save react-date-range-ts
 ```
-npm install --save react-date-range
-```
+
 This plugin expects `react` and `date-fns` as peerDependencies, It means that you need to install them in your project folder.
 
-```
+```sh
 npm install --save react date-fns
 ```
 
@@ -38,13 +39,14 @@ npm install --save react date-fns
 You need to import skeleton and theme styles first.
 
 ```javascript
-import 'react-date-range/dist/styles.css'; // main style file
-import 'react-date-range/dist/theme/default.css'; // theme css file
+import 'react-date-range-ts/dist/styles.css'; // main style file
+import 'react-date-range-ts/dist/theme/default.css'; // theme css file
 ```
 
 ### `DatePicker`
+
 ```javascript
-import { Calendar } from 'react-date-range';
+import { Calendar } from 'react-date-range-ts';
 
 class MyComponent extends Component {
   handleSelect(date){
@@ -63,8 +65,9 @@ class MyComponent extends Component {
 ```
 
 ### `DateRangePicker / DateRange`
+
 ```javascript
-import { DateRangePicker } from 'react-date-range';
+import { DateRangePicker } from 'react-date-range-ts';
 
 class MyComponent extends Component {
   handleSelect(ranges){
@@ -146,6 +149,7 @@ ariaLabels                           | Object    | {}               | inserts ar
 dayContentRenderer                   | Function  | null             | Function to customize the rendering of Calendar Day. given a date is supposed to return what to render.
 
  *shape of range:
+
  ```js
   {
     startDate: PropTypes.object,
@@ -159,6 +163,7 @@ dayContentRenderer                   | Function  | null             | Function t
 ```
 
  **shape of ariaLabels:
+
  ```js
   {
     // The key of dateInput should be same as key in range.
@@ -174,6 +179,7 @@ dayContentRenderer                   | Function  | null             | Function t
     nextButton: PropTypes.string,
   }
 ```
+
 #### Infinite Scrolled Mode
 
 To enable infinite scroll set `scroll={{enabled: true}}` basically. Infinite scroll feature is affected by `direction`(rendering direction for months) and `months`(for rendered months count) props directly.
@@ -191,8 +197,8 @@ If you prefer, you can overwrite calendar sizes with `calendarWidth`/`calendarHe
   }),
 ```
 
-
 ### Release workflow
+
 - Merge everything that needs to be in the release to master
 - Open a new release PR than:
   - bumps version to appropriate one <new_version>

demo/README.md

@@ -1,14 +1,14 @@
-**react-date-range** can be installed with **npm**, by the following command:
+**react-date-range-ts** can be installed with **npm**, by the following command:
 
-```bash static 
-npm install react-date-range
+```bash static
+npm install react-date-range-ts
 ```
 
 First, styles and theme file must be imported:
 
-```js static 
-import 'react-date-range/dist/styles.css'; // main css file
-import 'react-date-range/dist/theme/default.css'; // theme css file
+```js static
+import 'react-date-range-ts/dist/styles.css'; // main css file
+import 'react-date-range-ts/dist/theme/default.css'; // theme css file
 ```
 
 Then, import one of the 4 standalone components: [DateRange](#daterange), [DateRangePicker](#daterangepicker), [Calendar](#calendar), [DefinedRange](#definedrange)

demo/components/StyleGuide.js

@@ -74,7 +74,7 @@ export function StyleGuideRenderer({ classes, title, homepageUrl, children }) {
               </a>
             </Logo>
             <nav className={classes.nav}>
-              <a className={classes.headerLink} href="https://github.com/hypeserver/react-date-range">
+              <a className={classes.headerLink} href="https://github.com/gbili/react-date-range-ts">
                 GitHub
               </a>
             </nav>

demo/components/StyleGuide.tsx.back

@@ -0,0 +1,105 @@
+import React from 'react';
+import Logo from 'rsg-components/Logo';
+import Markdown from 'rsg-components/Markdown';
+import Styled from 'rsg-components/Styled';
+
+const xsmall = '@media (max-width: 600px)';
+type StylesProps = { font: string; base: string; light: string; link: string; baseBackground: string; mq: { small: string; } };
+const styles = ({ font, base, light, link, baseBackground, mq }: StylesProps) => ({
+  root: {
+    color: base,
+    backgroundColor: baseBackground,
+  },
+  header: {
+    color: '#fff',
+    backgroundColor: link,
+  },
+  bar: {
+    display: 'flex',
+    alignItems: 'center',
+    [xsmall]: {
+      flexDirection: 'column',
+      alignItems: 'center',
+    },
+  },
+  nav: {
+    marginLeft: 'auto',
+    marginRight: '-0.5em',
+    [xsmall]: {
+      margin: [[10, 0, 0]],
+    },
+  },
+  headerLink: {
+    '&, &:link, &:visited': {
+      marginLeft: '0.5em',
+      marginRight: '0.5em',
+      fontFamily: font,
+      color: '#efefef',
+    },
+    '&:hover, &:active': {
+      color: '#fff',
+      cursor: 'pointer',
+    },
+  },
+  content: {
+    maxWidth: 1000,
+    padding: [[15, 30]],
+    margin: [[0, 'auto']],
+    [mq.small]: {
+      padding: 15,
+    },
+    display: 'block',
+  },
+  components: {
+    overflow: 'auto', // To prevent the pane from growing out of the screen
+  },
+  footer: {
+    display: 'block',
+    color: light,
+    fontFamily: font,
+    fontSize: 12,
+  },
+});
+
+type ClassesProp = {
+  root: string;
+  header: string;
+  content: string;
+  bar: string;
+  headerLink: string;
+  nav: string;
+  footer: string;
+}
+
+type StyleGuideRendererProps = { classes: ClassesProp; title: JSX.Element | string | number; homepageUrl: string; children: JSX.Element; };
+
+export function StyleGuideRenderer({ classes, title, homepageUrl, children }: StyleGuideRendererProps) {
+  return (
+    <div className={classes.root}>
+      <header className={classes.header}>
+        <div className={classes.content}>
+          <div className={classes.bar}>
+            <Logo>
+              <a className={classes.headerLink} href="#">
+                {title}
+              </a>
+            </Logo>
+            <nav className={classes.nav}>
+              <a className={classes.headerLink} href="https://github.com/gbili/react-date-range-ts">
+                GitHub
+              </a>
+            </nav>
+          </div>
+        </div>
+      </header>
+      <main className={classes.content}>
+        {children}
+        <footer className={classes.footer}>
+          <Markdown text={`Created with [React Styleguidist](${homepageUrl}) ❤️`} />
+        </footer>
+      </main>
+    </div>
+  );
+}
+
+export default Styled(styles)(StyleGuideRenderer);

jest.config.ts

@@ -0,0 +1,17 @@
+const config = {
+  verbose: true,
+  testURL: 'http://localhost/',
+  setupFiles: ['<rootDir>/setupTests.ts'],
+  maxWorkers: 100,
+  roots: ['<rootDir>/src'],
+  testMatch: [
+    "**/__tests__/**/*.+(ts|tsx|js)",
+    "**/?(*.)+(spec|test).+(ts|tsx|js)"
+  ],
+  testEnvironment: "jsdom",
+  transform: { "^.+\\.(ts|tsx)$": "ts-jest" },
+  moduleFileExtensions: ['ts', 'tsx', 'js'], //...defaults.moduleFileExtensions,
+  testPathIgnorePatterns: ['/node_modules/', '/dist/', '/demo/dist/'],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+};
+export default config;