From 1c3570f58c0b298aec1bc18200cbc259bdd4b73d Mon Sep 17 00:00:00 2001 From: gpbl Date: Tue, 29 Jul 2025 14:22:35 +0200 Subject: [PATCH] Update biome.json and lint website Signed-off-by: gpbl --- biome.json | 8 +- examples-app/src/App.tsx | 1 + examples-app/src/main.tsx | 4 +- react-day-picker.code-workspace | 23 +----- website/docusaurus.config.ts | 82 +++++++++---------- website/sidebars.ts | 26 +++--- website/src/components/BrowserWindow.tsx | 2 +- website/src/components/HighlightWithTheme.tsx | 11 +-- .../Playground/CustomizationFieldset.tsx | 13 ++- .../Playground/LocalizationFieldset.tsx | 42 +++++----- .../Playground/NavigationFieldset.tsx | 41 +++++----- .../Playground/SelectionFieldset.tsx | 12 +-- website/src/components/Playground/index.tsx | 19 ++--- website/src/components/Playground/toJSX.ts | 2 +- .../Playground/useQueryStringSync.ts | 15 ++-- website/src/components/ShadowDomWrapper.tsx | 2 +- website/src/theme/MDXComponents.ts | 2 +- 17 files changed, 142 insertions(+), 163 deletions(-) diff --git a/biome.json b/biome.json index f45e084673..a88d9a0864 100644 --- a/biome.json +++ b/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": { diff --git a/examples-app/src/App.tsx b/examples-app/src/App.tsx index 52492de484..b14c65a2a3 100644 --- a/examples-app/src/App.tsx +++ b/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; diff --git a/examples-app/src/main.tsx b/examples-app/src/main.tsx index 35a28cd7b9..e721800e98 100644 --- a/examples-app/src/main.tsx +++ b/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( - + , ); diff --git a/react-day-picker.code-workspace b/react-day-picker.code-workspace index fb276efb24..0a07dd6bef 100644 --- a/react-day-picker.code-workspace +++ b/react-day-picker.code-workspace @@ -25,9 +25,10 @@ ], "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": { @@ -35,21 +36,5 @@ "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" - } } } diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index 5df2115e23..2786c7392a 100644 --- a/website/docusaurus.config.ts +++ b/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,10 +63,10 @@ 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: [ @@ -74,8 +74,8 @@ const config: Config = { "docusaurus-plugin-typedoc", { entryPoints: ["../src/index.ts"], - tsconfig: "../tsconfig-docs.json" - } + tsconfig: "../tsconfig-docs.json", + }, ], [ "@docusaurus/plugin-client-redirects", @@ -83,11 +83,11 @@ const config: Config = { redirects: [ { to: "/guides/accessibility", - from: ["/docs/accessibility"] - } - ] - } - ] + from: ["/docs/accessibility"], + }, + ], + }, + ], ], scripts: [ @@ -95,8 +95,8 @@ const config: Config = { 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; diff --git a/website/sidebars.ts b/website/sidebars.ts index e2278b4f63..31fde33927 100644 --- a/website/sidebars.ts +++ b/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; diff --git a/website/src/components/BrowserWindow.tsx b/website/src/components/BrowserWindow.tsx index 0e4ec32f8d..f9c68b769d 100644 --- a/website/src/components/BrowserWindow.tsx +++ b/website/src/components/BrowserWindow.tsx @@ -25,7 +25,7 @@ export function BrowserWindow({ style, bodyStyle, shadow = true, - styleStr + styleStr, }: Props) { return (
diff --git a/website/src/components/HighlightWithTheme.tsx b/website/src/components/HighlightWithTheme.tsx index 87c24f2dd3..4ab224932a 100644 --- a/website/src/components/HighlightWithTheme.tsx +++ b/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) { const prismTheme = usePrismTheme(); @@ -13,11 +12,7 @@ export function HighlightWithTheme(props: Partial) { return (
{line.map((token, key) => { - return ( - <> - - - ); + return ; })}
); diff --git a/website/src/components/Playground/CustomizationFieldset.tsx b/website/src/components/Playground/CustomizationFieldset.tsx index 16d0eafd5b..2fc63e539e 100644 --- a/website/src/components/Playground/CustomizationFieldset.tsx +++ b/website/src/components/Playground/CustomizationFieldset.tsx @@ -1,7 +1,6 @@ -import React from "react"; - import { startOfMonth } from "date-fns"; -import { DayPickerProps } from "react-day-picker"; +import React from "react"; +import type { DayPickerProps } from "react-day-picker"; import styles from "./styles.module.css"; @@ -16,7 +15,7 @@ export function CustomizationFieldset({ props, setProps, accentColor, - setAccentColor + setAccentColor, }: CustomizationFieldsetProps) { return (
@@ -32,7 +31,7 @@ export function CustomizationFieldset({ showOutsideDays: false, showWeekNumber: false, fixedWeeks: false, - hideWeekdays: false + hideWeekdays: false, }); setAccentColor(""); }} @@ -54,7 +53,7 @@ export function CustomizationFieldset({ | "dropdown-years"; const newProps = { ...props, - captionLayout: newCaptionLayout + captionLayout: newCaptionLayout, } as DayPickerProps; if (newCaptionLayout === "dropdown") { const today = new Date(); @@ -84,7 +83,7 @@ export function CustomizationFieldset({ onChange={(e) => { const newProps = { ...props, - navLayout: e.target.value ?? undefined + navLayout: e.target.value ?? undefined, } as DayPickerProps; setProps(newProps); }} diff --git a/website/src/components/Playground/LocalizationFieldset.tsx b/website/src/components/Playground/LocalizationFieldset.tsx index d976e15a1a..15fca57d17 100644 --- a/website/src/components/Playground/LocalizationFieldset.tsx +++ b/website/src/components/Playground/LocalizationFieldset.tsx @@ -1,19 +1,19 @@ import React from "react"; import { + type DayPickerProps, dateLib, - DayPickerProps, defaultDateLib, - Numerals + type Numerals, } from "react-day-picker"; import * as locales from "react-day-picker/locale"; import { enUS as enUSPersian, - faIR as faIRPersian + faIR as faIRPersian, } from "react-day-picker/persian"; import styles from "./styles.module.css"; -import { DayPickerPropsWithCalendar } from "./useQueryStringSync"; +import type { DayPickerPropsWithCalendar } from "./useQueryStringSync"; const timeZones = [ "UTC", @@ -47,7 +47,7 @@ const timeZones = [ "Europe/Paris", "Europe/Rome", "Pacific/Auckland", - "Pacific/Honolulu" + "Pacific/Honolulu", ]; const numerals: { value: Numerals; label: string }[] = [ @@ -62,7 +62,7 @@ const numerals: { value: Numerals; label: string }[] = [ { value: "tamldec", label: "Tamil" }, { value: "telu", label: "Telugu" }, { value: "knda", label: "Kannada" }, - { value: "mlym", label: "Malayalam" } + { value: "mlym", label: "Malayalam" }, ]; const calendars: ("persian" | "gregorian")[] = ["gregorian", "persian"]; const persianLocales = { faIR: faIRPersian, enUS: enUSPersian }; @@ -72,11 +72,10 @@ interface LocalizationFieldsetProps { setProps: React.Dispatch>; currentTimeZone: string; } - export function LocalizationFieldset({ props, setProps, - currentTimeZone + currentTimeZone, }: LocalizationFieldsetProps) { return (
@@ -95,7 +94,7 @@ export function LocalizationFieldset({ firstWeekContainsDate: undefined, ISOWeek: false, dir: undefined, - broadcastCalendar: false + broadcastCalendar: false, }); }} > @@ -113,7 +112,7 @@ export function LocalizationFieldset({ ...props, calendar: e.target.value as "gregorian" | "persian", locale: e.target.value === "persian" ? faIRPersian : undefined, - dir: e.target.value === "persian" ? "rtl" : undefined + dir: e.target.value === "persian" ? "rtl" : undefined, }); }} > @@ -133,7 +132,7 @@ export function LocalizationFieldset({ onChange={(e) => setProps({ ...props, - timeZone: e.target.value + timeZone: e.target.value, }) } > @@ -158,15 +157,16 @@ export function LocalizationFieldset({ e.target.value === "" ? undefined : Object.values(locales).find( - (locale) => locale.code === e.target.value - ) + (locale) => locale.code === e.target.value, + ), }) } > {Object.keys( - props.calendar === "persian" ? persianLocales : locales + props.calendar === "persian" ? persianLocales : locales, ).map((locale) => { + // biome-ignore lint/performance/noDynamicNamespaceImportAccess: not a concern const code = locales[locale as keyof typeof locales].code; return (

Selection

-

+ {selected ? ( 

@@ -171,7 +166,7 @@ export function Playground() {
           ) : (
             "Choose a selection mode to display the selected days."
           )}
-        

+        
         
Code
diff --git a/website/src/components/Playground/toJSX.ts b/website/src/components/Playground/toJSX.ts index ba501b76c2..442515fc99 100644 --- a/website/src/components/Playground/toJSX.ts +++ b/website/src/components/Playground/toJSX.ts @@ -1,4 +1,4 @@ -import { DayPickerProps } from "react-day-picker"; +import type { DayPickerProps } from "react-day-picker"; /** * Function to format a json object of props to a jsx source displaying the diff --git a/website/src/components/Playground/useQueryStringSync.ts b/website/src/components/Playground/useQueryStringSync.ts index c73ce32771..df83e10fe6 100644 --- a/website/src/components/Playground/useQueryStringSync.ts +++ b/website/src/components/Playground/useQueryStringSync.ts @@ -1,7 +1,6 @@ -import { useEffect, useMemo, useState } from "react"; - import { useHistory, useLocation } from "@docusaurus/router"; -import { type DayPickerProps } from "react-day-picker"; +import { useEffect, useMemo, useState } from "react"; +import type { DayPickerProps } from "react-day-picker"; import * as locales from "react-day-picker/locale"; const qsProps = [ @@ -36,7 +35,7 @@ const qsProps = [ "timeZone", "toMonth", "weeksStartOn", - "weekStartsOn" + "weekStartsOn", ]; export type DayPickerPropsWithCalendar = DayPickerProps & { @@ -83,7 +82,7 @@ export function useQueryStringSync(basePath: string = "/playground") { timeZone: "string", toMonth: "string", weeksStartOn: "number", - weekStartsOn: "number" + weekStartsOn: "number", }; qsProps.forEach((key) => { @@ -104,7 +103,7 @@ export function useQueryStringSync(basePath: string = "/playground") { break; case "locale": parsedProps.locale = Object.values(locales).find( - (locale) => locale.code === value + (locale) => locale.code === value, ); break; default: @@ -136,12 +135,12 @@ export function useQueryStringSync(basePath: string = "/playground") { } }); - const newQueryString = qs.length === 0 ? "" : "?" + qs.join("&"); + const newQueryString = qs.length === 0 ? "" : `?${qs.join("&")}`; if (location.search !== newQueryString) { history.replace(basePath + newQueryString); } }, - [history, location.search, basePath] + [history, location.search, basePath], ); useEffect(() => { diff --git a/website/src/components/ShadowDomWrapper.tsx b/website/src/components/ShadowDomWrapper.tsx index 3dfa7d6909..65268a82de 100644 --- a/website/src/components/ShadowDomWrapper.tsx +++ b/website/src/components/ShadowDomWrapper.tsx @@ -4,7 +4,7 @@ import root from "react-shadow"; export function ShadowDomWrapper({ children, - styleStr + styleStr, }: { children: React.ReactNode; styleStr: string | undefined; diff --git a/website/src/theme/MDXComponents.ts b/website/src/theme/MDXComponents.ts index c570a7ed51..8cdaf20ff3 100644 --- a/website/src/theme/MDXComponents.ts +++ b/website/src/theme/MDXComponents.ts @@ -9,5 +9,5 @@ export default { ...MDXComponents, BrowserWindow, Examples, - ExamplesV8 + ExamplesV8, };