Merge branch 'main' into pr-3988-rebase-v3

Author: laug

.eslintrc.js

@@ -36,14 +36,15 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
 
-      
-
       - name: Install dependencies
         run: yarn install
 
       - name: Install docs dependencies
         run: yarn --cwd docs-site install
 
+      - name: Lint docs
+        run: yarn --cwd docs-site lint
+
       - name: Build datepicker
         run: yarn build
 

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

@@ -41,4 +41,4 @@ jobs:
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           branch: gh-pages # The branch the action should deploy to.
-          folder: docs-site/build # The folder the action should deploy.
+          folder: docs-site/dist # The folder the action should deploy.

.github/workflows/deploy.yml

@@ -36,9 +36,7 @@ import "react-datepicker/dist/react-datepicker.css";
 
 const Example = () => {
   const [startDate, setStartDate] = useState(new Date());
-  return (
-    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
-  );
+  return <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />;
 };
 ```
 
@@ -69,12 +67,7 @@ See [here](https://github.com/Hacker0x01/react-datepicker/blob/main/docs/datepic
 You can also include a time picker by adding the showTimeSelect prop
 
 ```js
-<DatePicker
-  selected={date}
-  onChange={handleDateChange}
-  showTimeSelect
-  dateFormat="Pp"
-/>
+<DatePicker selected={date} onChange={handleDateChange} showTimeSelect dateFormat="Pp" />
 ```
 
 Times will be displayed at 30-minute intervals by default (default configurable via timeIntervals prop)
@@ -134,13 +127,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.
 

README.md

@@ -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,
+        },
+      ],
+    },
+  },
+];

docs-site/.env

@@ -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>

docs-site/config-overrides.js

@@ -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.1"
-  },
-  "resolutions": {
-    "strip-ansi": "6.0.1"
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.19.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.11"
   },
   "packageManager": "[email protected]"
 }