Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(docs): use Vite to build docs site #5333

Merged
merged 2 commits into from
Jan 21, 2025
Merged

chore(docs): use Vite to build docs site #5333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f57a219
chore(docs): use Vite to buiild docs site
paolostyle Jan 21, 2025
6b19c57
fix: formatting
paolostyle Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,13 +134,11 @@ The `main` branch contains the latest version of the Datepicker component.

To begin local development:

1. Run `yarn link` from project root
2. Run `cd docs-site && yarn link react-datepicker`
3. Run `yarn install` from project root
4. Run `yarn build` from project root
5. Run `yarn start` from project root
1. Run `yarn install` from project root
2. Run `yarn build` from project root
3. Run `yarn start` from project root

The last step starts documentation app as a simple webserver on http://localhost:3000.
The last step starts documentation app as a simple webserver on http://localhost:5173.

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.

Expand Down
1 change: 0 additions & 1 deletion docs-site/.env
View file
Open in desktop

This file was deleted.

28 changes: 0 additions & 28 deletions docs-site/config-overrides.js
View file
Open in desktop

This file was deleted.

78 changes: 78 additions & 0 deletions docs-site/eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import js from "@eslint/js";
import globals from "globals";
import react from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";

export default [
{ ignores: ["dist"] },
{
files: ["**/*.{js,jsx}"],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: "latest",
ecmaFeatures: { jsx: true },
sourceType: "module",
},
},
settings: { react: { version: "18.3" } },
plugins: {
react,
"react-hooks": reactHooks,
"react-refresh": reactRefresh,
},
rules: {
...js.configs.recommended.rules,
...react.configs.recommended.rules,
...react.configs["jsx-runtime"].rules,
...reactHooks.configs.recommended.rules,
"react/jsx-no-target-blank": "off",
"react-refresh/only-export-components": [
"warn",
{ allowConstantExport: true },
],
"react/no-unescaped-entities": "off",
"react/prop-types": "off",
},
},
{
files: ["src/examples/**/*.{js,jsx}"],
languageOptions: {
globals: {
useState: false,
render: false,
DatePicker: false,
getHours: false,
setHours: false,
setSeconds: false,
setMinutes: false,
getDate: false,
addDays: false,
subDays: false,
addMonths: false,
fi: false,
getDay: false,
isValid: false,
format: false,
range: false,
getYear: false,
getMonth: false,
CalendarContainer: false,
subMonths: false,
forwardRef: false,
},
},
rules: {
"no-unused-expressions": "off",
"react/react-in-jsx-scope": "off",
"react/jsx-no-undef": [
"error",
{
allowGlobals: true,
},
],
},
},
];
32 changes: 32 additions & 0 deletions docs-site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 Datepicker crafted by HackerOne</title>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>
45 changes: 22 additions & 23 deletions docs-site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,36 @@
"name": "react-datepicker-docs",
"version": "0.1.0",
"private": true,
"type": "module",
"dependencies": {
"date-fns": "^4.1.0",
"highlight.js": "^11.11.1",
"lodash": "^4.17.21",
"prism-react-renderer": "^2.4.1",
"react": "^19.0.0",
"react-datepicker": "portal:../",
"react-dom": "^19.0.0",
"react-live": "^4.1.8"
"react-live": "^4.1.8",
"slugify": "^1.6.6"
},
"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"
]
"start": "vite",
"build": "vite build",
"lint": "eslint .",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably call this somewhere in the CI script as well

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add to .github/workflows/build-docs-site.yml

- name: Run linter
        run: yarn --cwd docs-site lint

"preview": "vite preview"
},
"devDependencies": {
"raw-loader": "^4.0.2",
"react-app-rewired": "^2.2.1",
"react-scripts": "5.0.1",
"sass": "^1.83.4"
},
"resolutions": {
"strip-ansi": "6.0.1"
"@eslint/js": "^9.17.0",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.17.0",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.14.0",
"sass": "^1.83.4",
"vite": "^6.0.10"
},
"packageManager": "[email protected]"
}
22 changes: 0 additions & 22 deletions docs-site/public/index.html
View file
Open in desktop

This file was deleted.

20 changes: 8 additions & 12 deletions docs-site/src/components/App/index.js → docs-site/src/components/App/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,22 @@
import React, { useState, useEffect } from "react";
import { useEffect, useState } from "react";
import DatePicker from "react-datepicker";
import ExampleComponents from "../Examples";
import ribbon from "./ribbon.png";
import logo from "./logo.png";
import DatePicker from "react-datepicker";
import ribbon from "./ribbon.png";

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

useEffect(() => {
const handleScroll = () => setIsScrolled(window.scrollY < 400);
document.addEventListener("scroll", handleScroll);
}, []);

const handleScroll = () => {
const Show = window.scrollY < 400;
if (Show) {
setIsScrolled(true);
} else {
setIsScrolled(false);
}
};
return () => {
document.removeEventListener("scroll", handleScroll);
};
}, []);

return (
<DatePicker
Expand Down
5 changes: 0 additions & 5 deletions docs-site/src/components/Example/index.js → docs-site/src/components/Example/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { forwardRef, useState } from "react";
import PropTypes from "prop-types";
import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
import DatePicker, {
registerLocale,
Expand All @@ -15,9 +14,6 @@ import { themes } from "prism-react-renderer";
import editIcon from "./edit-regular.svg";

export default class CodeExampleComponent extends React.Component {
static propTypes = {
example: PropTypes.object.isRequired,
};
componentDidMount() {
registerLocale("fi", fi);
registerLocale("pt-BR", ptBR);
Expand All @@ -38,7 +34,6 @@ export default class CodeExampleComponent extends React.Component {
code={component.trim()}
scope={{
// NB any globals added here should also be referenced in ../../examples/.eslintrc
PropTypes,
useState,
DatePicker,
CalendarContainer,
Expand Down
Loading
Loading