Skip to content

Commit 18def4c

Browse files
mxschmittmartijnrusschen
mxschmitt
authored and
martijnrusschen
committed
feat: added interactive examples (Hacker0x01#1864)
* feat: added interactive examples * feat: more examples * feat: more examples and enhanced direct links by slugify * feat: some components * feat: migrated components to useState * feat: rework using create-react-app * fix: cleanup * feat: cleanup * fix: lgtm issues
1 parent 29ce63f commit 18def4c

File tree

154 files changed

+13527
-4536
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

154 files changed

+13527
-4536
lines changed

‎.babelrc.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
const { NODE_ENV, MODULES } = process.env;
2-
3-
const modules = MODULES === "false" || NODE_ENV === "test" ? "commonjs" : false;
1+
const { NODE_ENV } = process.env;
42

53
const presets = [
64
"@babel/preset-env",

‎.gitignore

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,6 @@ typings/
6767
.yarn-integrity
6868

6969
# dotenv environment variables file
70-
.env
7170
.env.test
7271

7372
# parcel-bundler cache (https://parceljs.org/)
@@ -102,9 +101,6 @@ tmp
102101
*.iml
103102
.idea
104103

105-
docs-site/*bundle.js
106-
docs-site/style.css
107-
108104
docs/calendar.md
109105
docs/date_input.md
110106
docs/day.md

‎.travis.yml

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,14 @@ script:
1111
after_success:
1212
- yarn run codecov
1313
before_deploy:
14-
- yarn run build:docs
14+
- yarn --cwd docs-site install
15+
- yarn --cwd docs-site build
1516
deploy:
1617
provider: pages
1718
skip_cleanup: true
1819
github_token: $GITHUB_TOKEN # Set in the settings page of your repository, as a secure variable
1920
keep_history: false
20-
local_dir: docs-site
21+
local_dir: docs-site/build
2122
on:
2223
branch: master
2324
addons:

‎CODE_OF_CONDUCT.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo
88

99
Examples of behavior that contributes to creating a positive environment include:
1010

11-
* Using welcoming and inclusive language
12-
* Being respectful of differing viewpoints and experiences
13-
* Gracefully accepting constructive criticism
14-
* Focusing on what is best for the community
15-
* Showing empathy towards other community members
11+
- Using welcoming and inclusive language
12+
- Being respectful of differing viewpoints and experiences
13+
- Gracefully accepting constructive criticism
14+
- Focusing on what is best for the community
15+
- Showing empathy towards other community members
1616

1717
Examples of unacceptable behavior by participants include:
1818

19-
* The use of sexualized language or imagery and unwelcome sexual attention or advances
20-
* Trolling, insulting/derogatory comments, and personal or political attacks
21-
* Public or private harassment
22-
* Publishing others' private information, such as a physical or electronic address, without explicit permission
23-
* Other conduct which could reasonably be considered inappropriate in a professional setting
19+
- The use of sexualized language or imagery and unwelcome sexual attention or advances
20+
- Trolling, insulting/derogatory comments, and personal or political attacks
21+
- Public or private harassment
22+
- Publishing others' private information, such as a physical or electronic address, without explicit permission
23+
- Other conduct which could reasonably be considered inappropriate in a professional setting
2424

2525
## Our Responsibilities
2626

@@ -40,7 +40,7 @@ Project maintainers who do not follow or enforce the Code of Conduct in good fai
4040

4141
## Attribution
4242

43-
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
43+
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [https://contributor-covenant.org/version/1/4][version]
4444

45-
[homepage]: http://contributor-covenant.org
46-
[version]: http://contributor-covenant.org/version/1/4/
45+
[homepage]: https://contributor-covenant.org
46+
[version]: https://contributor-covenant.org/version/1/4/

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
[![Build Status](https://travis-ci.org/Hacker0x01/react-datepicker.svg?branch=master)](https://travis-ci.org/Hacker0x01/react-datepicker)
55
[![Dependency Status](https://david-dm.org/Hacker0x01/react-datepicker.svg)](https://david-dm.org/Hacker0x01/react-datepicker)
66
[![codecov](https://codecov.io/gh/Hacker0x01/react-datepicker/branch/master/graph/badge.svg)](https://codecov.io/gh/Hacker0x01/react-datepicker)
7-
[![Downloads](http://img.shields.io/npm/dm/react-datepicker.svg)](https://npmjs.org/package/react-datepicker)
7+
[![Downloads](https://img.shields.io/npm/dm/react-datepicker.svg)](https://npmjs.org/package/react-datepicker)
88
[![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)
99
[![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)
1010

‎docs-site/.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

‎docs-site/.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎docs-site/CNAME

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs-site/config-overrides.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const path = require("path");
2+
const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
3+
4+
module.exports = function override(config, env) {
5+
//do stuff with the webpack config...
6+
config.module.rules.push({
7+
test: /\.js/,
8+
include: path.resolve(__dirname, "src/examples"),
9+
use: "raw-loader"
10+
});
11+
config.resolve.plugins = config.resolve.plugins.filter(
12+
plugin => !(plugin instanceof ModuleScopePlugin)
13+
);
14+
// Enable it, so that our custom .eslintrc for the examples will work
15+
for (let i = 0; i < config.module.rules.length; i++) {
16+
if (Array.isArray(config.module.rules[i].use)) {
17+
for (let j = 0; j < config.module.rules[i].use.length; j++) {
18+
if (config.module.rules[i].use[j].loader.includes("eslint-loader")) {
19+
config.module.rules[i].use[j].options.useEslintrc = true;
20+
break;
21+
}
22+
}
23+
}
24+
}
25+
return config;
26+
};

‎docs-site/index.html

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎docs-site/package.json

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "react-datepicker-docs",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"react": "^16.9.0",
7+
"react-app-rewired": "^2.1.3",
8+
"react-datepicker": "file:..",
9+
"react-dom": "^16.9.0",
10+
"react-scripts": "3.1.1"
11+
},
12+
"scripts": {
13+
"start": "react-app-rewired start",
14+
"build": "react-app-rewired build",
15+
"test": "react-app-rewired test",
16+
"eject": "react-scripts eject"
17+
},
18+
"eslintConfig": {
19+
"extends": "react-app"
20+
},
21+
"browserslist": {
22+
"production": [
23+
">0.2%",
24+
"not dead",
25+
"not op_mini all"
26+
],
27+
"development": [
28+
"last 1 chrome version",
29+
"last 1 firefox version",
30+
"last 1 safari version"
31+
]
32+
},
33+
"devDependencies": {
34+
"node-sass": "^4.12.0",
35+
"raw-loader": "^3.1.0"
36+
}
37+
}

‎docs-site/public/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta name="description" content="A simple and reusable datepicker component for React.">
9+
<meta name="keywords" content="React, HTML, CSS, JavaScript, JSX, date, datepicker">
10+
<title>React.js Datepicker crafted by HackerOne</title>
11+
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
12+
</head>
13+
14+
<body>
15+
<noscript>You need to enable JavaScript to run this app.</noscript>
16+
<div id="root"></div>
17+
</body>
18+
19+
</html>

‎docs-site/public/robots.txt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *

‎docs-site/src/boot.jsx

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎docs-site/src/code_example_component.jsx

Lines changed: 0 additions & 23 deletions
This file was deleted.

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.App {
2+
text-align: center;
3+
}
4+
5+
.App-logo {
6+
animation: App-logo-spin infinite 20s linear;
7+
height: 40vmin;
8+
pointer-events: none;
9+
}
10+
11+
.App-header {
12+
background-color: #282c34;
13+
min-height: 100vh;
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
justify-content: center;
18+
font-size: calc(10px + 2vmin);
19+
color: white;
20+
}
21+
22+
.App-link {
23+
color: #61dafb;
24+
}
25+
26+
@keyframes App-logo-spin {
27+
from {
28+
transform: rotate(0deg);
29+
}
30+
to {
31+
transform: rotate(360deg);
32+
}
33+
}

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

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React, { useState } from "react";
2+
import ExampleComponents from "../Examples";
3+
import ribbon from "./ribbon.png";
4+
import logo from "./logo.png";
5+
import DatePicker from "react-datepicker";
6+
7+
const Root = () => {
8+
const [startDate, setStartDate] = useState(new Date());
9+
return (
10+
<div>
11+
<div className="hero">
12+
<div className="hero__content">
13+
<h1 className="hero__title">ReactJS Datepicker</h1>
14+
<div className="hero__crafted-by">
15+
<a href="https://hackerone.com" className="hero__crafted-by-link">
16+
Crafted by{" "}
17+
<img
18+
src={logo}
19+
ungiu
20+
className="hero__image"
21+
alt="HackerOne"
22+
title="HackerOne"
23+
/>
24+
</a>
25+
</div>
26+
<div className="hero__example">
27+
<DatePicker
28+
autoFocus
29+
selected={startDate}
30+
onChange={date => setStartDate(date)}
31+
/>
32+
</div>
33+
</div>
34+
</div>
35+
<div className="wrapper">
36+
<h1>ReactJS Datepicker</h1>
37+
<p className="badges">
38+
<a href="https://npmjs.org/package/react-datepicker">
39+
<img
40+
src="https://badge.fury.io/js/react-datepicker.svg"
41+
alt="NPM package version badge"
42+
className="badge"
43+
/>
44+
</a>
45+
<a href="https://travis-ci.org/Hacker0x01/react-datepicker">
46+
<img
47+
src="https://travis-ci.org/Hacker0x01/react-datepicker.svg?branch=master"
48+
alt="Travis CI status badge"
49+
className="badge"
50+
/>
51+
</a>
52+
<a href="https://david-dm.org/Hacker0x01/react-datepicker">
53+
<img
54+
src="https://david-dm.org/Hacker0x01/react-datepicker.svg"
55+
alt="Dependency status badge"
56+
className="badge"
57+
/>
58+
</a>
59+
<a href={"https://npmjs.org/package/react-datepicker"}>
60+
<img
61+
src="https://img.shields.io/npm/dm/react-datepicker.svg"
62+
alt="Download count badge"
63+
className="badge"
64+
/>
65+
</a>
66+
</p>
67+
<p>A simple and reusable datepicker component for React.</p>
68+
69+
<h2>Installation</h2>
70+
<p>The package can be installed via NPM:</p>
71+
<p>
72+
<code>npm install react-datepicker --save</code>
73+
</p>
74+
<p>Or by using Yarn:</p>
75+
<p>
76+
<code>yarn add react-datepicker</code>
77+
</p>
78+
</div>
79+
<div className="wrapper">
80+
<ExampleComponents />
81+
</div>
82+
83+
<a href="https://github.com/Hacker0x01/react-datepicker/">
84+
<img className="github-ribbon" src={ribbon} alt="Fork me on GitHub" />
85+
</a>
86+
</div>
87+
);
88+
};
89+
90+
export default Root;

‎docs-site/src/images/logo.png renamed to ‎docs-site/src/components/App/logo.png

File renamed without changes.

‎docs-site/src/images/ribbon.png renamed to ‎docs-site/src/components/App/ribbon.png

File renamed without changes.

0 commit comments

Comments
 (0)