feat: Migrate to TypeScript, build with tsdx and update Storybook

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  extends: [
+    'react-app',
+    'prettier/@typescript-eslint',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    '@typescript-eslint/consistent-type-assertions': 0,
+  },
+};

.gitignore

@@ -1,7 +1,10 @@
-coverage/
-dist/
-node_modules/
-storybook-static/
+coverage
+dist
+node_modules
 package-lock.json
 *.log
-.eslintcache
+.DS_Store
+.cache
+.rts2_cache_cjs
+.rts2_cache_esm
+.rts2_cache_umd

.nowignore

@@ -0,0 +1,2 @@
+README.md
+package-lock.json

.npmrc

@@ -0,0 +1 @@
+save-exact=true

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

.storybook/config.js

@@ -0,0 +1,4 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.tsx
+configure(require.context('../stories', true, /\.stories\.tsx$/), module);

.storybook/webpack.config.js

@@ -0,0 +1,10 @@
+module.exports = ({ config }) => {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    use: [{ loader: require.resolve('awesome-typescript-loader') }],
+  });
+
+  config.resolve.extensions.push('.ts', '.tsx');
+
+  return config;
+};

.travis.yml

@@ -7,6 +7,8 @@ notifications:
 node_js: '8'
 install: npm install
 script: npm run validate
-after_success: npx semantic-release
+after_success: test $TRAVIS_BRANCH = "master" && test $TRAVIS_PULL_REQUEST = "false" && npx semantic-release
 branches:
-  only: master
+  only:
+    - develop
+    - master

README.md

@@ -69,19 +69,20 @@ More examples [here](https://react-semantic-ui-datepickers.now.sh).
 
 ### Own Props
 
-| property             | type                | required | default                                                                                                 | description                                                                                                     |
-| -------------------- | ------------------- | -------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
-| clearable            | boolean             | no       | true                                                                                                    | Allows the user to clear the value                                                                              |
-| format               | string              | no       | 'YYYY-MM-DD'                                                                                            | Specifies how the date will be formatted using the [date-fns' format](https://date-fns.org/v1.29.0/docs/format) |
-| keepOpenOnClear      | boolean             | no       | false                                                                                                   | Keeps the datepicker open (or opens it if it's closed) when the clear icon is clicked                           |
-| keepOpenOnSelect     | boolean             | no       | false                                                                                                   | Keeps the datepicker open when a date is selected                                                               |
-| locale               | object              | no       | [en-US](https://github.com/arthurdenner/react-semantic-ui-datepickers/blob/master/src/locales/en-US.js) | Object with the labels to be used on the library PS: Feel free to submit PR's with more locales!                |
-| onDateChange         | function            | yes      |                                                                                                         | Callback fired when the value changes                                                                           |
-| type                 | string              | no       | basic                                                                                                   | Type of input to render. Available options: 'basic' and 'range'                                                 |
-| filterDate           | function            | no       | () => true                                                                                              | Function that receives each date and returns a boolean to indicate whether it is enabled or not                 |
-| selected             | Date, arrayOf(Date) | no       |                                                                                                         | Default date selected                                                                                           |
-| pointing             | string              | no       | 'left'                                                                                                  | Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right'      |
-| clearOnSameDateClick | boolean             | no       | true                                                                                                    | Controls whether the datepicker's state resets if the same date is selected in succession.                      |
+| property             | type     | required | default                                                                                                 | description                                                                                                     |
+| -------------------- | -------- | -------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| allowOnlyNumbers     | boolean  | no       | true                                                                                                    | Allows the user enter only numbers                                                                              |
+| clearOnSameDateClick | boolean  | no       | true                                                                                                    | Controls whether the datepicker's state resets if the same date is selected in succession.                      |
+| clearable            | boolean  | no       | true                                                                                                    | Allows the user to clear the value                                                                              |
+| filterDate           | function | no       | () => true                                                                                              | Function that receives each date and returns a boolean to indicate whether it is enabled or not                 |
+| format               | string   | no       | 'YYYY-MM-DD'                                                                                            | Specifies how the date will be formatted using the [date-fns' format](https://date-fns.org/v1.29.0/docs/format) |
+| keepOpenOnClear      | boolean  | no       | false                                                                                                   | Keeps the datepicker open (or opens it if it's closed) when the clear icon is clicked                           |
+| keepOpenOnSelect     | boolean  | no       | false                                                                                                   | Keeps the datepicker open when a date is selected                                                               |
+| locale               | object   | no       | [en-US](https://github.com/arthurdenner/react-semantic-ui-datepickers/blob/master/src/locales/en-US.js) | Object with the labels to be used on the library PS: Feel free to submit PR's with more locales!                |
+| onBlur               | function | no       | () => {}                                                                                                | Callback fired when the input loses focus                                                                       |
+| onDateChange         | function | yes      |                                                                                                         | Callback fired when the value changes                                                                           |
+| pointing             | string   | no       | 'left'                                                                                                  | Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right'      |
+| type                 | string   | no       | basic                                                                                                   | Type of input to render. Available options: 'basic' and 'range'                                                 |
 
 ### Form.Input Props
 
@@ -118,15 +119,14 @@ In order to customize the elements, you can override the styles of the classes b
 - clndr-cell-selected
 - clndr-cell-other-month
 
-> If you think this way of customizing is not a good idea, feel free to open a issue suggesting something else. This was the simplest solution I thought.
+> If you think this way of customizing is not a good idea, feel free to open an issue suggesting something else. This was the simplest solution I thought.
 
 ## Roadmap
 
 - Improve accessibility
   > @donysukardi did some work on accessibility in the BaseDatePicker, but I couldn't get it working correcly. Feel free to help on this!
 - Add more tests (including e2e)
   > The current threshold is pretty useless 😕
-- Add TypeScript definitions (or migrate to TypeScript)
 
 > Feel free to open issues and/or create PRs to improve other aspects of the library!
 

date-fns-v2/package.json

@@ -1,9 +1,9 @@
 {
   "name": "date-fns-v2",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "index.ts",
   "license": "MIT",
   "dependencies": {
-    "date-fns": "^2.0.0-alpha.24"
+    "date-fns": "^2.0.0-beta.3"
   }
 }

date-fns-v2/yarn.lock

@@ -2,7 +2,7 @@
 # yarn lockfile v1
 
 
-date-fns@^2.0.0-alpha.24:
-  version "2.0.0-alpha.24"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.24.tgz#2988c137c72275af29d7d21cc53eb52b3a8c2586"
-  integrity sha512-jpLzKHKSq0nTcZ3K5ZnTelxWmUwPepuoEaXkATwIUnc1tc+/rIooAvDMR+zdAGnwQ35eVWiyn5dikoLHjhEYeA==
+date-fns@^2.0.0-beta.3:
+  version "2.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-beta.3.tgz#2e28f5af945930f774ddd778e184d68227101d55"
+  integrity sha512-z5O262BvHPhwUvA1weXH+AZodygnZUcORERw8hjwBUrRPGrAo2e/rjXfC8Ykf1OGJZGDuLnK/WXbEZBIc0exGQ==

package.json

@@ -2,25 +2,23 @@
   "name": "react-semantic-ui-datepickers",
   "version": "0.0.0-development",
   "description": "Datepickers built with Semantic UI for React and Dayzed",
-  "main": "dist/react-semantic-ui-datepickers.js",
-  "typings": "./dist/index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/react-semantic-ui-datepickers.esm.js",
+  "typings": "dist/index.d.ts",
   "scripts": {
-    "build": "kcd-scripts build --bundle cjs.minify",
-    "deploy": "now --public ./storybook-static -A ../now.json && now alias",
-    "lint": "kcd-scripts lint",
-    "predeploy": "npm run storybook:build",
+    "lint": "tsdx lint src",
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "prebuild": "rimraf dist",
     "prepare": "cd date-fns-v2/ && npm install",
-    "semantic-release": "semantic-release",
-    "storybook": "start-storybook -p 9001 -c stories",
-    "storybook:build": "build-storybook -c stories",
-    "storybook:serve": "serve ./storybook-static -p 6006",
-    "test": "kcd-scripts test",
-    "travis-deploy-once": "travis-deploy-once",
-    "validate": "kcd-scripts validate"
+    "test": "tsdx test --env=jsdom",
+    "validate": "npm run lint && npm run test && npm run build",
+    "storybook": "start-storybook -p 6006",
+    "storybook:build": "build-storybook"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "kcd-scripts pre-commit"
+      "pre-commit": "pretty-quick --staged"
     }
   },
   "files": [
@@ -35,59 +33,54 @@
   "author": "Arthur Denner <arthurdenner7@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.4.5",
-    "classnames": "^2.2.5",
-    "core-js": "^3.1.3",
-    "date-fns": "^1.29.0",
-    "dayzed": "^2.2.0",
-    "format-string-by-pattern": "^1.0.0",
-    "react-fast-compare": "^2.0.1"
+    "@babel/runtime": "7.4.5",
+    "classnames": "2.2.5",
+    "core-js": "3.1.3",
+    "date-fns": "1.30.1",
+    "dayzed": "2.2.0",
+    "format-string-by-pattern": "1.0.0",
+    "react-fast-compare": "2.0.1"
   },
   "devDependencies": {
-    "@storybook/react": "^3.4.0",
-    "babel-core": "^6.26.0",
-    "babel-runtime": "^6.26.0",
-    "kcd-scripts": "^1.8.0",
-    "prop-types": "^15.6.1",
-    "react": ">=16.2.1",
-    "react-dom": ">=16.2.1",
-    "rollup-plugin-copy": "^0.2.3",
-    "rollup-plugin-postcss": "^1.6.2",
-    "semantic-release": "^15.13.12",
-    "semantic-ui-css": "^2.3.1",
-    "semantic-ui-react": "^0.79.1",
-    "serve": "^10.0.0",
-    "travis-deploy-once": "^5.0.1"
+    "@babel/core": "7.6.2",
+    "@storybook/addon-actions": "5.2.1",
+    "@storybook/addon-links": "5.2.1",
+    "@storybook/addons": "5.2.1",
+    "@storybook/react": "5.2.1",
+    "@types/jest": "24.0.16",
+    "@types/storybook__react": "4.0.2",
+    "autoprefixer": "9.6.1",
+    "awesome-typescript-loader": "5.2.1",
+    "babel-loader": "8.0.6",
+    "cssnano": "4.1.10",
+    "husky": "3.0.2",
+    "prettier": "1.18.2",
+    "pretty-quick": "1.11.1",
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
+    "rimraf": "3.0.0",
+    "rollup-plugin-copy": "0.2.3",
+    "rollup-plugin-postcss": "2.0.3",
+    "semantic-ui-css": "2.4.1",
+    "semantic-ui-react": "0.87.3",
+    "tsdx": "0.9.3",
+    "tslib": "1.10.0",
+    "typescript": "3.5.3"
   },
   "peerDependencies": {
-    "prop-types": ">=15",
-    "react": ">=15",
+    "react": ">=16.3",
     "semantic-ui-react": ">=0.75.0"
   },
-  "eslintConfig": {
-    "extends": "./node_modules/kcd-scripts/eslint.js",
-    "rules": {
-      "no-unused-vars": [
-        "error",
-        {
-          "ignoreRestSiblings": true
-        }
-      ],
-      "complexity": [
-        "error",
-        10
-      ],
-      "import/no-unassigned-import": 0,
-      "no-console": 1
+  "jest": {
+    "globals": {
+      "ts-jest": {
+        "tsConfig": "tsconfig.test.json"
+      }
+    },
+    "transform": {
+      ".(js|ts)x?": "ts-jest"
     }
   },
-  "eslintIgnore": [
-    "node_modules",
-    "coverage",
-    "dist",
-    "storybook-static",
-    "stories"
-  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/arthurdenner/react-semantic-ui-datepickers.git"

src/__tests__/utils.test.js → src/__tests__/utils.test.ts

@@ -88,19 +88,19 @@ describe('isSelectable', () => {
   });
 
   it('should return true if the first date is after the minDate', () => {
-    expect(isSelectable(dateTest, june14, null)).toBe(true);
+    expect(isSelectable(dateTest, june14, undefined)).toBe(true);
   });
 
   it('should return false if the first date is after the minDate', () => {
-    expect(isSelectable(dateTest, june25, null)).toBe(false);
+    expect(isSelectable(dateTest, june25, undefined)).toBe(false);
   });
 
   it('should return true if the first date is before the maxDate', () => {
-    expect(isSelectable(dateTest, null, june25)).toBe(true);
+    expect(isSelectable(dateTest, undefined, june25)).toBe(true);
   });
 
   it('should return false if the first date is before the maxDate', () => {
-    expect(isSelectable(dateTest, null, june14)).toBe(false);
+    expect(isSelectable(dateTest, undefined, june14)).toBe(false);
   });
 
   it('should return true if we only provide one date to the function', () => {