Merge pull request #5333 from paolostyle/use-vite-to-build-docs-site

chore(docs): use Vite to build docs site
Hacker0x01 · Jan 21, 2025 · 2cff74b · 2cff74b
2 parents 7080adf + 6b19c57
commit 2cff74b
Show file tree

Hide file tree

Showing 15 changed files with 3,588 additions and 12,122 deletions.
diff --git a/README.md b/README.md
@@ -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.
 

diff --git a/docs-site/.env b/docs-site/.env
diff --git a/docs-site/config-overrides.js b/docs-site/config-overrides.js
diff --git a/docs-site/eslint.config.js b/docs-site/eslint.config.js
@@ -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,
+        },
+      ],
+    },
+  },
+];
diff --git a/docs-site/index.html b/docs-site/index.html
@@ -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>
diff --git a/docs-site/package.json b/docs-site/package.json
@@ -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 .",
+    "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]"
 }
diff --git a/docs-site/public/index.html b/docs-site/public/index.html
diff --git a/docs-site/src/components/App/index.js → docs-site/src/components/App/index.jsx b/docs-site/src/components/App/index.js → docs-site/src/components/App/index.jsx
@@ -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

diff --git a/docs-site/src/components/Example/index.js → docs-site/src/components/Example/index.jsx b/docs-site/src/components/Example/index.js → docs-site/src/components/Example/index.jsx
@@ -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,
@@ -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);
@@ -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,