refactor: Switch from microbundle to tsdx

example/.npmignore

@@ -0,0 +1,3 @@
+node_modules
+.cache
+dist

example/App.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import "../css/react-datetime.css";
+
+import SimpleExample from "./SimpleExample";
+import LocalizationExample from "./LocalizationExample";
+import CustomizableExample from "./CustomizableExample";
+import OpenExample from "./OpenExample";
+import ValidatedExample from "./ValidatedExample";
+
+export default function App() {
+  return (
+    <div>
+      <SimpleExample />
+      <hr />
+      <LocalizationExample />
+      <hr />
+      <CustomizableExample />
+      <hr />
+      <OpenExample />
+      <hr />
+      <ValidatedExample />
+      <hr />
+    </div>
+  );
+}

example/CustomizableExample.tsx

@@ -0,0 +1,113 @@
+import * as React from "react";
+import DateTime from "../.";
+
+export default class CustomizableExample extends React.Component<any, any> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      viewMode: "days",
+      dateFormat: "MM/DD/YYYY",
+      timeFormat: "HH:mm A",
+      input: true,
+      utc: false,
+      closeOnSelect: false,
+      closeOnTab: true,
+      disableOnClickOutside: false
+    };
+
+    // Bind functions
+    this.renderSelect = this.renderSelect.bind(this);
+    this.renderCheckbox = this.renderCheckbox.bind(this);
+  }
+
+  renderSelect({ name, children }) {
+    return (
+      <div className="form-group">
+        <label className="control-label col-xs-6">{name}</label>
+
+        <div className="col-xs-6">
+          <select
+            className="form-control"
+            value={this.state[name]}
+            onChange={e => this.setState({ [name]: e.target.value })}
+          >
+            {children}
+          </select>
+        </div>
+      </div>
+    );
+  }
+
+  renderCheckbox({ name }) {
+    return (
+      <div className="form-group">
+        <label className="control-label col-xs-6">{name}</label>
+
+        <div className="col-xs-6">
+          <input
+            type="checkbox"
+            checked={this.state[name]}
+            onChange={e => this.setState({ [name]: e.target.checked })}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const Select = this.renderSelect;
+    const Checkbox = this.renderCheckbox;
+
+    return (
+      <div className="form-horizontal">
+        <h2>Customization props</h2>
+        <p>
+          Try out various configuration options and see how they affect the
+          component.
+        </p>
+
+        <DateTime
+          defaultValue={new Date()}
+          onChange={console.log}
+          {...this.state}
+        />
+
+        <hr />
+
+        <Select name="dateFormat">
+          <option value="">false</option>
+          <option>YYYY-MM-DD</option>
+          <option>MM/DD/YYYY</option>
+          <option>DD.MM.YYYY</option>
+          <option>MM-DD</option>
+          <option>MMMM</option>
+          <option>YYYY/MM</option>
+          <option>YYYY</option>
+        </Select>
+
+        <Select name="timeFormat">
+          <option value="">false</option>
+          <option>hh:mm A</option>
+          <option>HH:mm:ss</option>
+          <option>HH:mm:SSS</option>
+          <option>hh:mm:SSS a</option>
+          <option>hmm</option>
+          <option>HH:mm Z</option>
+        </Select>
+
+        <Select name="viewMode">
+          <option>years</option>
+          <option>months</option>
+          <option>days</option>
+          <option>time</option>
+        </Select>
+
+        <Checkbox name="utc" />
+        <Checkbox name="closeOnSelect" />
+        <Checkbox name="closeOnTab" />
+        <Checkbox name="disableOnClickOutside" />
+      </div>
+    );
+  }
+}

example/LocalizationExample.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import DateTime from "../.";
+import nl from "date-fns/locale/nl";
+import es from "date-fns/locale/es";
+import fr from "date-fns/locale/fr";
+
+class LocalizationExample extends React.Component<any, any> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentLocale: undefined
+    };
+
+    // Bind functions
+    this.renderButton = this.renderButton.bind(this);
+  }
+
+  renderButton(text, newLocale) {
+    return (
+      <button
+        type="button"
+        onClick={() => this.setState({ currentLocale: newLocale })}
+        disabled={this.state.currentLocale === newLocale}
+      >
+        {text}
+      </button>
+    );
+  }
+
+  render() {
+    return (
+      <div className="form-horizontal">
+        <h2>Locale props</h2>
+        <p>Try out various locales and see how they affect the component.</p>
+        <p>
+          {this.renderButton("EN - undefined", undefined)}
+          {this.renderButton("NL - nl", nl)}
+          {this.renderButton("ES - es", es)}
+          {this.renderButton("FR - fr", fr)}
+        </p>
+
+        <DateTime
+          viewMode="months"
+          defaultValue={Date.UTC(2000, 0, 15, 2, 2, 2, 2)}
+          locale={this.state.currentLocale}
+          open={true}
+          input={false}
+        />
+      </div>
+    );
+  }
+}
+
+export default LocalizationExample;

example/OpenExample.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import DateTime from '../.';
+
+export default class OpenExample extends React.Component<any, any> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      viewMode: undefined,
+    };
+
+    // Bind functions
+    this.renderButton = this.renderButton.bind(this);
+  }
+
+  renderButton(text, viewMode) {
+    return (
+      <button
+        type="button"
+        onClick={() => this.setState({ viewMode: viewMode })}
+        disabled={this.state.viewMode === viewMode}
+      >
+        {text}
+      </button>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <h2>open</h2>
+        <p>
+          The "open" prop is only consumed when the component is mounted. Useful
+          for embedding inside your own popover components.
+        </p>
+        <p>Try out various viewModes and see how they affect the component.</p>
+        <p>
+          {this.renderButton('Default - undefined', undefined)}
+          {this.renderButton('Years', 'years')}
+          {this.renderButton('Months', 'months')}
+          {this.renderButton('Days', 'days')}
+          {this.renderButton('Time', 'time')}
+        </p>
+
+        <DateTime
+          open
+          input={false}
+          onChange={console.log}
+          viewMode={this.state.viewMode}
+        />
+      </div>
+    );
+  }
+}

example/SimpleExample.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import DateTime from '../.';
+
+export default class SimpleExample extends React.Component<any, any> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: undefined,
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <h2>Simple Scenario</h2>
+        <DateTime
+          value={this.state.value}
+          onChange={newVal => {
+            console.log({ newVal });
+            this.setState({ value: newVal });
+          }}
+        />
+      </div>
+    );
+  }
+}

example/ValidatedExample.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import DateTime from '../.';
+import isBefore from 'date-fns/is_before';
+import startOfMonth from 'date-fns/start_of_month';
+
+export default class ValidatedExample extends React.Component<any, any> {
+  render() {
+    return (
+      <div>
+        <h2>isValidDate</h2>
+        <p>You can use "isValidDate" to disable all dates after last month.</p>
+        <DateTime
+          viewMode="months"
+          dateFormat="MMMM"
+          isValidDate={current => isBefore(current, startOfMonth(new Date()))}
+          onChange={console.log}
+        />
+      </div>
+    );
+  }
+}

example/index.css

@@ -0,0 +1,9 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+
+  width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}

example/index.html

@@ -0,0 +1,15 @@
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Playground</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="./index.tsx"></script>
+</body>
+
+</html>

example/index.tsx

@@ -0,0 +1,8 @@
+import "react-app-polyfill/ie11";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import "./index.css";
+import App from "./App";
+
+ReactDOM.render(<App />, document.getElementById("root"));

example/package.json

@@ -2,30 +2,24 @@
   "name": "react-datetime-example",
   "homepage": "https://NateRadebaugh.github.io/react-datetime",
   "version": "0.0.0",
+  "main": "index.js",
   "license": "MIT",
   "private": true,
   "scripts": {
-    "now-build": "cd .. && yarn install && yarn build && yarn link && cd example && yarn install && yarn link @nateradebaugh/react-datetime && cross-env PUBLIC_URL=./ yarn build && mv build dist",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "start": "parcel index.html",
+    "build": "parcel build index.html"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
   "dependencies": {
-    "@nateradebaugh/react-datetime": "link:..",
-    "date-fns": "^1.30.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-scripts": "^3.0.1"
+    "react-app-polyfill": "^1.0.0"
+  },
+  "alias": {
+    "react": "../node_modules/react",
+    "react-dom": "../node_modules/react-dom"
   },
   "devDependencies": {
-    "cross-env": "^5.2.0",
-    "microbundle": "^0.11.0"
+    "@types/react": "^16.8.15",
+    "@types/react-dom": "^16.8.4",
+    "parcel": "^1.12.3",
+    "typescript": "^3.4.5"
   }
 }