feat: added interactive examples

.babelrc.js

@@ -1,6 +1,4 @@
-const { NODE_ENV, MODULES } = process.env;
-
-const modules = MODULES === "false" || NODE_ENV === "test" ? "commonjs" : false;
+const { NODE_ENV } = process.env;
 
 const presets = [
   "@babel/preset-env",

.gitignore

@@ -67,7 +67,6 @@ typings/
 .yarn-integrity
 
 # dotenv environment variables file
-.env
 .env.test
 
 # parcel-bundler cache (https://parceljs.org/)
@@ -102,9 +101,6 @@ tmp
 *.iml
 .idea
 
-docs-site/*bundle.js
-docs-site/style.css
-
 docs/calendar.md
 docs/date_input.md
 docs/day.md

.travis.yml

@@ -11,13 +11,14 @@ script:
 after_success:
   - yarn run codecov
 before_deploy:
-  - yarn run build:docs
+  - yarn --cwd docs-site install
+  - yarn --cwd docs-site build
 deploy:
   provider: pages
   skip_cleanup: true
   github_token: $GITHUB_TOKEN  # Set in the settings page of your repository, as a secure variable
   keep_history: false
-  local_dir: docs-site
+  local_dir: docs-site/build
   on:
     branch: master
 addons:

CODE_OF_CONDUCT.md

@@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo
 
 Examples of behavior that contributes to creating a positive environment include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
 
 ## Our Responsibilities
 
@@ -40,7 +40,7 @@ Project maintainers who do not follow or enforce the Code of Conduct in good fai
 
 ## Attribution
 
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [https://contributor-covenant.org/version/1/4][version]
 
-[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/
+[homepage]: https://contributor-covenant.org
+[version]: https://contributor-covenant.org/version/1/4/

README.md

@@ -4,7 +4,7 @@
 [![Build Status](https://travis-ci.org/Hacker0x01/react-datepicker.svg?branch=master)](https://travis-ci.org/Hacker0x01/react-datepicker)
 [![Dependency Status](https://david-dm.org/Hacker0x01/react-datepicker.svg)](https://david-dm.org/Hacker0x01/react-datepicker)
 [![codecov](https://codecov.io/gh/Hacker0x01/react-datepicker/branch/master/graph/badge.svg)](https://codecov.io/gh/Hacker0x01/react-datepicker)
-[![Downloads](http://img.shields.io/npm/dm/react-datepicker.svg)](https://npmjs.org/package/react-datepicker)
+[![Downloads](https://img.shields.io/npm/dm/react-datepicker.svg)](https://npmjs.org/package/react-datepicker)
 [![Code Quality: Javascript](https://img.shields.io/lgtm/grade/javascript/g/Hacker0x01/react-datepicker.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/Hacker0x01/react-datepicker/context:javascript)
 [![Total Alerts](https://img.shields.io/lgtm/alerts/g/Hacker0x01/react-datepicker.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/Hacker0x01/react-datepicker/alerts)
 

docs-site/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

docs-site/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs-site/config-overrides.js

@@ -0,0 +1,26 @@
+const path = require("path");
+const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
+
+module.exports = function override(config, env) {
+  //do stuff with the webpack config...
+  config.module.rules.push({
+    test: /\.js/,
+    include: path.resolve(__dirname, "src/examples"),
+    use: "raw-loader"
+  });
+  config.resolve.plugins = config.resolve.plugins.filter(
+    plugin => !(plugin instanceof ModuleScopePlugin)
+  );
+  // Enable it, so that our custom .eslintrc for the examples will work
+  for (let i = 0; i < config.module.rules.length; i++) {
+    if (Array.isArray(config.module.rules[i].use)) {
+      for (let j = 0; j < config.module.rules[i].use.length; j++) {
+        if (config.module.rules[i].use[j].loader.includes("eslint-loader")) {
+          config.module.rules[i].use[j].options.useEslintrc = true;
+          break;
+        }
+      }
+    }
+  }
+  return config;
+};

docs-site/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "react-datepicker-docs",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.9.0",
+    "react-app-rewired": "^2.1.3",
+    "react-datepicker": "file:..",
+    "react-dom": "^16.9.0",
+    "react-scripts": "3.1.1"
+  },
+  "scripts": {
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "node-sass": "^4.12.0",
+    "raw-loader": "^3.1.0"
+  }
+}

docs-site/public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="A simple and reusable datepicker component for React.">
+  <meta name="keywords" content="React, HTML, CSS, JavaScript, JSX, date, datepicker">
+  <title>React.js Datepicker crafted by HackerOne</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>

docs-site/public/robots.txt

@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *

docs-site/src/components/App/index.css

@@ -0,0 +1,33 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

docs-site/src/components/App/index.js

@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import ExampleComponents from "../Examples";
+import ribbon from "./ribbon.png";
+import logo from "./logo.png";
+import DatePicker from "react-datepicker";
+
+const Root = () => {
+  const [startDate, setStartDate] = useState(new Date());
+  return (
+    <div>
+      <div className="hero">
+        <div className="hero__content">
+          <h1 className="hero__title">ReactJS Datepicker</h1>
+          <div className="hero__crafted-by">
+            <a href="https://hackerone.com" className="hero__crafted-by-link">
+              Crafted by{" "}
+              <img
+                src={logo}
+                ungiu
+                className="hero__image"
+                alt="HackerOne"
+                title="HackerOne"
+              />
+            </a>
+          </div>
+          <div className="hero__example">
+            <DatePicker
+              autoFocus
+              selected={startDate}
+              onChange={date => setStartDate(date)}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="wrapper">
+        <h1>ReactJS Datepicker</h1>
+        <p className="badges">
+          <a href="https://npmjs.org/package/react-datepicker">
+            <img
+              src="https://badge.fury.io/js/react-datepicker.svg"
+              alt="NPM package version badge"
+              className="badge"
+            />
+          </a>
+          <a href="https://travis-ci.org/Hacker0x01/react-datepicker">
+            <img
+              src="https://travis-ci.org/Hacker0x01/react-datepicker.svg?branch=master"
+              alt="Travis CI status badge"
+              className="badge"
+            />
+          </a>
+          <a href="https://david-dm.org/Hacker0x01/react-datepicker">
+            <img
+              src="https://david-dm.org/Hacker0x01/react-datepicker.svg"
+              alt="Dependency status badge"
+              className="badge"
+            />
+          </a>
+          <a href={"https://npmjs.org/package/react-datepicker"}>
+            <img
+              src="https://img.shields.io/npm/dm/react-datepicker.svg"
+              alt="Download count badge"
+              className="badge"
+            />
+          </a>
+        </p>
+        <p>A simple and reusable datepicker component for React.</p>
+
+        <h2>Installation</h2>
+        <p>The package can be installed via NPM:</p>
+        <p>
+          <code>npm install react-datepicker --save</code>
+        </p>
+        <p>Or by using Yarn:</p>
+        <p>
+          <code>yarn add react-datepicker</code>
+        </p>
+      </div>
+      <div className="wrapper">
+        <ExampleComponents />
+      </div>
+
+      <a href="https://github.com/Hacker0x01/react-datepicker/">
+        <img className="github-ribbon" src={ribbon} alt="Fork me on GitHub" />
+      </a>
+    </div>
+  );
+};
+
+export default Root;