repo: update biome.json to lint website

biome.json

@@ -8,14 +8,18 @@
   "files": {
     "ignoreUnknown": false,
     "includes": [
-      "*.md",
       "*.ts",
       "*.tsx",
       "*.js",
       "src/**/*.ts",
       "src/**/*.tsx",
       "examples/**/*.ts",
-      "examples/**/*.tsx"
+      "examples/**/*.tsx",
+      "website/*.ts",
+      "website/src/**/*.ts",
+      "website/src/**/*.tsx",
+      "examples-app/src/**/*.ts",
+      "examples-app/src/**/*.tsx"
     ]
   },
   "formatter": {

examples-app/src/App.tsx

@@ -23,6 +23,7 @@ function App() {
     }
   }, []);
 
+  // biome-ignore lint: suspicious/noDynamicNamespaceImportAccess: not a concern
   const Component: React.ComponentType = Examples[
     example as keyof typeof Examples
   ] as React.ComponentType;

examples-app/src/main.tsx

@@ -5,8 +5,8 @@ import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById("root") ?? document.body).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );

react-day-picker.code-workspace

@@ -25,31 +25,16 @@
   ],
   "settings": {
     "cSpell.enabled": true,
-    "editor.defaultFormatter": "biomejs.biome",
-    "editor.formatOnSave": true,
-    "editor.formatOnType": true,
+    "editor.codeActionsOnSave": {
+      "source.organizeImports.biome": "explicit",
+      "source.fixAll.biome": "explicit"
+    },
     "editor.tabSize": 2,
     "npm.packageManager": "pnpm",
     "search.exclude": {
       "node_modules": true,
       "versioned_docs": true
     },
     "jest.runMode": "on-demand",
-    "workbench.colorCustomizations": {
-      "activityBar.background": "#005994",
-      "activityBar.foreground": "#d8d8d8",
-      "activityBar.inactiveForeground": "#d8d8d877",
-      "activityBarBadge.background": "#dd006f",
-      "activityBarBadge.foreground": "#e7e7e7"
-    },
-    "[typescript]": {
-      "editor.defaultFormatter": "biomejs.biome"
-    },
-    "[typescriptreact]": {
-      "editor.defaultFormatter": "biomejs.biome"
-    },
-    "[json]": {
-      "editor.defaultFormatter": "biomejs.biome"
-    }
   }
 }

website/docusaurus.config.ts

@@ -19,7 +19,7 @@ const config: Config = {
 
   i18n: {
     defaultLocale: "en",
-    locales: ["en"]
+    locales: ["en"],
   },
 
   presets: [
@@ -33,25 +33,25 @@ const config: Config = {
           editUrl: "https://github.com/gpbl/react-day-picker/tree/main/website",
           remarkPlugins: [
             require("@docusaurus/remark-plugin-npm2yarn"),
-            [require("remark-github"), { repository: "gpbl/react-day-picker" }]
+            [require("remark-github"), { repository: "gpbl/react-day-picker" }],
           ],
           lastVersion: "current",
           versions: {
             "8.10.1": {
               label: "8.10.1",
               badge: true,
-              path: "/v8"
+              path: "/v8",
             },
             current: {
               label: `${pkg.version}`,
               path: "/",
-              badge: false
-            }
-          }
+              badge: false,
+            },
+          },
         },
         blog: false,
         theme: {
-          customCss: ["./src/css/custom.css", "../src/style.css"]
+          customCss: ["./src/css/custom.css", "../src/style.css"],
         },
         sitemap: {
           lastmod: "date",
@@ -63,40 +63,40 @@ const config: Config = {
             const { defaultCreateSitemapItems, ...rest } = params;
             const items = await defaultCreateSitemapItems(rest);
             return items.filter((item) => !item.url.includes("/page/"));
-          }
-        }
-      } satisfies Preset.Options
-    ]
+          },
+        },
+      } satisfies Preset.Options,
+    ],
   ],
 
   plugins: [
     [
       "docusaurus-plugin-typedoc",
       {
         entryPoints: ["../src/index.ts"],
-        tsconfig: "../tsconfig-docs.json"
-      }
+        tsconfig: "../tsconfig-docs.json",
+      },
     ],
     [
       "@docusaurus/plugin-client-redirects",
       {
         redirects: [
           {
             to: "/guides/accessibility",
-            from: ["/docs/accessibility"]
-          }
-        ]
-      }
-    ]
+            from: ["/docs/accessibility"],
+          },
+        ],
+      },
+    ],
   ],
 
   scripts: [
     {
       src: "/q/p/script.js",
       defer: true,
       "data-domain": "daypicker.dev",
-      "data-api": "/q/a/event"
-    }
+      "data-api": "/q/a/event",
+    },
   ],
 
   themeConfig: {
@@ -105,25 +105,25 @@ const config: Config = {
       {
         name: "og:description",
         content:
-          "Date picker component for React. Add date pickers, calendars, and date inputs to your web applications."
+          "Date picker component for React. Add date pickers, calendars, and date inputs to your web applications.",
       },
       {
         name: "description",
         content:
-          "Date picker component for React. Add date pickers, calendars, and date inputs to your web applications."
+          "Date picker component for React. Add date pickers, calendars, and date inputs to your web applications.",
       },
       {
         name: "keywords",
         content:
-          "date picker, react component, calendar component, react datepicker, daypicker, react day picker, date-fns date picker, typescript date picker"
-      }
+          "date picker, react component, calendar component, react datepicker, daypicker, react day picker, date-fns date picker, typescript date picker",
+      },
     ],
     navbar: {
       title: "React DayPicker",
       logo: {
         alt: "DayPicker Logo",
         src: "img/logo.png",
-        srcDark: "img/logo-dark.png"
+        srcDark: "img/logo-dark.png",
       },
       items: [
         {
@@ -134,62 +134,62 @@ const config: Config = {
           dropdownItemsAfter: [
             {
               href: "https://react-day-picker-v7.netlify.app",
-              label: "7.4.10"
-            }
-          ]
+              label: "7.4.10",
+            },
+          ],
         },
         {
           type: "docSidebar",
           sidebarId: "docs",
           position: "left",
-          label: "Documentation"
+          label: "Documentation",
         },
         {
           href: "/playground",
           label: "Playground",
-          position: "left"
+          position: "left",
         },
         {
           type: "docSidebar",
           sidebarId: "api",
           position: "left",
-          label: "API Reference"
+          label: "API Reference",
         },
 
         {
           href: "https://github.com/gpbl/react-day-picker/discussions",
           label: "Support",
-          position: "right"
+          position: "right",
         },
         {
           href: "https://github.com/gpbl/react-day-picker",
           label: "GitHub",
-          position: "right"
-        }
-      ]
+          position: "right",
+        },
+      ],
     },
     footer: undefined,
     prism: {
       additionalLanguages: ["bash", "diff", "json", "css"],
       theme: prismThemes.vsLight,
-      darkTheme: prismThemes.dracula
+      darkTheme: prismThemes.dracula,
     },
     algolia: {
       appId: "N44150BS2A",
       apiKey: "263c558c76fc0b83a5def5fb818391d7",
       indexName: "react-day-picker-js",
       contextualSearch: true,
-      searchPagePath: "search"
+      searchPagePath: "search",
     },
     colorMode: {
       defaultMode: "light",
-      respectPrefersColorScheme: true
-    }
+      respectPrefersColorScheme: true,
+    },
   },
   future: {
     v4: true,
-    experimental_faster: true
-  } satisfies Preset.ThemeConfig
+    experimental_faster: true,
+  } satisfies Preset.ThemeConfig,
 };
 
 export default config;

website/sidebars.ts

@@ -12,11 +12,11 @@ const typedocSidebarFixed = typedocSidebar.map((item) => {
           return {
             type: "doc",
             id: "api/classes/DateLib",
-            label: "DateLib"
+            label: "DateLib",
           };
         }
         return item;
-      })
+      }),
     };
   }
   return item;
@@ -36,9 +36,9 @@ const sidebars: SidebarsConfig = {
       items: [
         {
           type: "autogenerated",
-          dirName: "docs"
-        }
-      ]
+          dirName: "docs",
+        },
+      ],
     },
     {
       type: "category",
@@ -47,9 +47,9 @@ const sidebars: SidebarsConfig = {
       items: [
         {
           type: "autogenerated",
-          dirName: "guides"
-        }
-      ]
+          dirName: "guides",
+        },
+      ],
     },
     {
       type: "category",
@@ -58,12 +58,12 @@ const sidebars: SidebarsConfig = {
       items: [
         {
           type: "autogenerated",
-          dirName: "development"
-        }
-      ]
-    }
+          dirName: "development",
+        },
+      ],
+    },
   ],
-  api: ["api/index", typedocSidebarFixed]
+  api: ["api/index", typedocSidebarFixed],
 };
 
 export default sidebars;

website/src/components/BrowserWindow.tsx

@@ -25,7 +25,7 @@ export function BrowserWindow({
   style,
   bodyStyle,
   shadow = true,
-  styleStr
+  styleStr,
 }: Props) {
   return (
     <div className={styles.browserWindow} style={{ ...style, minHeight }}>

website/src/components/HighlightWithTheme.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-
+/** biome-ignore-all lint/suspicious/noArrayIndexKey: not a concern */
 import { usePrismTheme } from "@docusaurus/theme-common";
-import { Highlight, HighlightProps } from "prism-react-renderer";
+import { Highlight, type HighlightProps } from "prism-react-renderer";
 
 export function HighlightWithTheme(props: Partial<HighlightProps>) {
   const prismTheme = usePrismTheme();
@@ -13,11 +12,7 @@ export function HighlightWithTheme(props: Partial<HighlightProps>) {
             return (
               <div key={i}>
                 {line.map((token, key) => {
-                  return (
-                    <>
-                      <span key={key} {...getTokenProps({ token })} />
-                    </>
-                  );
+                  return <span key={key} {...getTokenProps({ token })} />;
                 })}
               </div>
             );