Skip to content

Commit f57a219

Browse files
paolostylepaolostyle
committed
chore(docs): use Vite to buiild docs site
1 parent 7080adf commit f57a219

File tree

15 files changed

+3588
-12122
lines changed

15 files changed

+3588
-12122
lines changed

‎README.md‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -134,13 +134,11 @@ The `main` branch contains the latest version of the Datepicker component.
134134

135135
To begin local development:
136136

137-
1. Run `yarn link` from project root
138-
2. Run `cd docs-site && yarn link react-datepicker`
139-
3. Run `yarn install` from project root
140-
4. Run `yarn build` from project root
141-
5. Run `yarn start` from project root
137+
1. Run `yarn install` from project root
138+
2. Run `yarn build` from project root
139+
3. Run `yarn start` from project root
142140

143-
The last step starts documentation app as a simple webserver on http://localhost:3000.
141+
The last step starts documentation app as a simple webserver on http://localhost:5173.
144142

145143
You can run `yarn test` to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in `/tests`). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
146144

‎docs-site/.env‎

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

‎docs-site/config-overrides.js‎

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

‎docs-site/eslint.config.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import js from "@eslint/js";
2+
import globals from "globals";
3+
import react from "eslint-plugin-react";
4+
import reactHooks from "eslint-plugin-react-hooks";
5+
import reactRefresh from "eslint-plugin-react-refresh";
6+
7+
export default [
8+
{ ignores: ["dist"] },
9+
{
10+
files: ["**/*.{js,jsx}"],
11+
languageOptions: {
12+
ecmaVersion: 2020,
13+
globals: globals.browser,
14+
parserOptions: {
15+
ecmaVersion: "latest",
16+
ecmaFeatures: { jsx: true },
17+
sourceType: "module",
18+
},
19+
},
20+
settings: { react: { version: "18.3" } },
21+
plugins: {
22+
react,
23+
"react-hooks": reactHooks,
24+
"react-refresh": reactRefresh,
25+
},
26+
rules: {
27+
...js.configs.recommended.rules,
28+
...react.configs.recommended.rules,
29+
...react.configs["jsx-runtime"].rules,
30+
...reactHooks.configs.recommended.rules,
31+
"react/jsx-no-target-blank": "off",
32+
"react-refresh/only-export-components": [
33+
"warn",
34+
{ allowConstantExport: true },
35+
],
36+
"react/no-unescaped-entities": "off",
37+
"react/prop-types": "off",
38+
},
39+
},
40+
{
41+
files: ["src/examples/**/*.{js,jsx}"],
42+
languageOptions: {
43+
globals: {
44+
useState: false,
45+
render: false,
46+
DatePicker: false,
47+
getHours: false,
48+
setHours: false,
49+
setSeconds: false,
50+
setMinutes: false,
51+
getDate: false,
52+
addDays: false,
53+
subDays: false,
54+
addMonths: false,
55+
fi: false,
56+
getDay: false,
57+
isValid: false,
58+
format: false,
59+
range: false,
60+
getYear: false,
61+
getMonth: false,
62+
CalendarContainer: false,
63+
subMonths: false,
64+
forwardRef: false,
65+
},
66+
},
67+
rules: {
68+
"no-unused-expressions": "off",
69+
"react/react-in-jsx-scope": "off",
70+
"react/jsx-no-undef": [
71+
"error",
72+
{
73+
allowGlobals: true,
74+
},
75+
],
76+
},
77+
},
78+
];

‎docs-site/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="theme-color" content="#000000" />
7+
<meta
8+
name="description"
9+
content="A simple and reusable datepicker component for React."
10+
/>
11+
<meta
12+
name="keywords"
13+
content="React, HTML, CSS, JavaScript, JSX, date, datepicker"
14+
/>
15+
<title>React Datepicker crafted by HackerOne</title>
16+
<link
17+
href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"
18+
rel="stylesheet"
19+
/>
20+
<link
21+
rel="stylesheet"
22+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
23+
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
24+
crossorigin="anonymous"
25+
referrerpolicy="no-referrer"
26+
/>
27+
</head>
28+
<body>
29+
<div id="root"></div>
30+
<script type="module" src="/src/index.jsx"></script>
31+
</body>
32+
</html>

‎docs-site/package.json‎

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,36 @@
22
"name": "react-datepicker-docs",
33
"version": "0.1.0",
44
"private": true,
5+
"type": "module",
56
"dependencies": {
7+
"date-fns": "^4.1.0",
68
"highlight.js": "^11.11.1",
9+
"lodash": "^4.17.21",
10+
"prism-react-renderer": "^2.4.1",
711
"react": "^19.0.0",
12+
"react-datepicker": "portal:../",
813
"react-dom": "^19.0.0",
9-
"react-live": "^4.1.8"
14+
"react-live": "^4.1.8",
15+
"slugify": "^1.6.6"
1016
},
1117
"scripts": {
12-
"start": "react-app-rewired start",
13-
"build": "react-app-rewired build",
14-
"test": "react-app-rewired test",
15-
"eject": "react-scripts eject"
16-
},
17-
"eslintConfig": {
18-
"extends": "react-app"
19-
},
20-
"browserslist": {
21-
"production": [">0.2%", "not dead", "not op_mini all"],
22-
"development": [
23-
"last 1 chrome version",
24-
"last 1 firefox version",
25-
"last 1 safari version"
26-
]
18+
"start": "vite",
19+
"build": "vite build",
20+
"lint": "eslint .",
21+
"preview": "vite preview"
2722
},
2823
"devDependencies": {
29-
"raw-loader": "^4.0.2",
30-
"react-app-rewired": "^2.2.1",
31-
"react-scripts": "5.0.1",
32-
"sass": "^1.83.4"
33-
},
34-
"resolutions": {
35-
"strip-ansi": "6.0.1"
24+
"@eslint/js": "^9.17.0",
25+
"@types/react": "^18.3.18",
26+
"@types/react-dom": "^18.3.5",
27+
"@vitejs/plugin-react": "^4.3.4",
28+
"eslint": "^9.17.0",
29+
"eslint-plugin-react": "^7.37.2",
30+
"eslint-plugin-react-hooks": "^5.0.0",
31+
"eslint-plugin-react-refresh": "^0.4.16",
32+
"globals": "^15.14.0",
33+
"sass": "^1.83.4",
34+
"vite": "^6.0.10"
3635
},
3736
"packageManager": "[email protected]"
3837
}

‎docs-site/public/index.html‎

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

‎docs-site/src/components/App/index.js‎ renamed to ‎docs-site/src/components/App/index.jsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,22 @@
1-
import React, { useState, useEffect } from "react";
1+
import { useEffect, useState } from "react";
2+
import DatePicker from "react-datepicker";
23
import ExampleComponents from "../Examples";
3-
import ribbon from "./ribbon.png";
44
import logo from "./logo.png";
5-
import DatePicker from "react-datepicker";
5+
import ribbon from "./ribbon.png";
66

77
const Example = () => {
88
const [isOpen, setIsOpen] = useState(true);
99
const [startDate, setStartDate] = useState(new Date());
1010
const [isScrolled, setIsScrolled] = useState(true);
1111

1212
useEffect(() => {
13+
const handleScroll = () => setIsScrolled(window.scrollY < 400);
1314
document.addEventListener("scroll", handleScroll);
14-
}, []);
1515

16-
const handleScroll = () => {
17-
const Show = window.scrollY < 400;
18-
if (Show) {
19-
setIsScrolled(true);
20-
} else {
21-
setIsScrolled(false);
22-
}
23-
};
16+
return () => {
17+
document.removeEventListener("scroll", handleScroll);
18+
};
19+
}, []);
2420

2521
return (
2622
<DatePicker

‎docs-site/src/components/Example/index.js‎ renamed to ‎docs-site/src/components/Example/index.jsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { forwardRef, useState } from "react";
2-
import PropTypes from "prop-types";
32
import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
43
import DatePicker, {
54
registerLocale,
@@ -15,9 +14,6 @@ import { themes } from "prism-react-renderer";
1514
import editIcon from "./edit-regular.svg";
1615

1716
export default class CodeExampleComponent extends React.Component {
18-
static propTypes = {
19-
example: PropTypes.object.isRequired,
20-
};
2117
componentDidMount() {
2218
registerLocale("fi", fi);
2319
registerLocale("pt-BR", ptBR);
@@ -38,7 +34,6 @@ export default class CodeExampleComponent extends React.Component {
3834
code={component.trim()}
3935
scope={{
4036
// NB any globals added here should also be referenced in ../../examples/.eslintrc
41-
PropTypes,
4237
useState,
4338
DatePicker,
4439
CalendarContainer,

0 commit comments

Comments
 (0)