chore(docs): make the docs playground version-aware (#2924)

gpbl · web-flow · commit 62fcec88a1d5 · 2026-04-18T10:50:45.000+02:00
* Make the docs playground version-aware

* Fix navbar files for biome
diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
@@ -4,6 +4,7 @@ import type { Config } from "@docusaurus/types";
 import { themes as prismThemes } from "prism-react-renderer";
 
 const nodeRequire = createRequire(import.meta.url);
+const nextDocsVersion = nodeRequire("../package.json").version;
 const stableDocsVersion = nodeRequire(
   "react-day-picker-v9/package.json",
 ).version;
@@ -48,7 +49,7 @@ const config: Config = {
           lastVersion: "current",
           versions: {
             next: {
-              label: "next",
+              label: nextDocsVersion,
               badge: true,
               banner: "unreleased",
               noIndex: true,
@@ -203,8 +204,7 @@ const config: Config = {
           label: "Documentation",
         },
         {
-          href: "/playground",
-          label: "Playground",
+          type: "custom-versionedPlayground",
           position: "left",
         },
         {
diff --git a/website/src/components/Playground/index.tsx b/website/src/components/Playground/index.tsx
@@ -54,8 +54,12 @@ const localeImportsByCalendar = {
   hebrew: { enUS: enUSHebrew, he: heHebrew },
 };
 
-export function Playground() {
-  const { props, setProps } = useQueryStringSync();
+type PlaygroundProps = {
+  basePath?: string;
+};
+
+export function Playground({ basePath = "/playground" }: PlaygroundProps) {
+  const { props, setProps } = useQueryStringSync(basePath);
   const [selected, setSelected] = React.useState<
     Date | Date[] | DateRange | undefined
   >();
diff --git a/website/src/pages/next/playground.tsx b/website/src/pages/next/playground.tsx
@@ -0,0 +1,21 @@
+import Head from "@docusaurus/Head";
+import Layout from "@theme/Layout";
+
+import { Playground } from "../../components/Playground";
+
+export default function NextPlaygroundPage() {
+  return (
+    <Layout>
+      <Head>
+        <title>DayPicker Playground (next)</title>
+        <meta
+          name="description"
+          content="Customize the upcoming DayPicker release and see the code changes in real time."
+        />
+      </Head>
+      <main>
+        <Playground basePath="/next/playground" />
+      </main>
+    </Layout>
+  );
+}
diff --git a/website/src/theme/NavbarItem/ComponentTypes.tsx b/website/src/theme/NavbarItem/ComponentTypes.tsx
@@ -0,0 +1,14 @@
+import ComponentTypes from "@theme-original/NavbarItem/ComponentTypes";
+import type { ComponentType } from "react";
+
+import VersionedPlaygroundNavbarItem from "./VersionedPlaygroundNavbarItem";
+
+type NavbarItemComponentMap = Record<
+  string,
+  ComponentType<Record<string, unknown>>
+>;
+
+export default {
+  ...(ComponentTypes as NavbarItemComponentMap),
+  "custom-versionedPlayground": VersionedPlaygroundNavbarItem,
+};
diff --git a/website/src/theme/NavbarItem/VersionedPlaygroundNavbarItem.tsx b/website/src/theme/NavbarItem/VersionedPlaygroundNavbarItem.tsx
@@ -0,0 +1,46 @@
+import Link from "@docusaurus/Link";
+import { useDocsVersionCandidates } from "@docusaurus/plugin-content-docs/client";
+import { useLocation } from "@docusaurus/router";
+
+type Props = {
+  docsPluginId?: string;
+  label?: string;
+  className?: string;
+  mobile?: boolean;
+  position?: "left" | "right";
+  [key: string]: unknown;
+};
+
+export default function VersionedPlaygroundNavbarItem({
+  docsPluginId,
+  label = "Playground",
+  className,
+  mobile = false,
+  position,
+  ...props
+}: Props) {
+  const version = useDocsVersionCandidates(docsPluginId)[0];
+  const { pathname } = useLocation();
+  const to = version.name === "next" ? "/next/playground" : "/playground";
+  const isActive = /^\/(?:next\/)?playground\/?$/.test(pathname);
+  const activeClassName = mobile
+    ? "menu__link--active"
+    : "navbar__link--active";
+  const link = (
+    <Link
+      {...props}
+      className={[
+        mobile ? "menu__link" : "navbar__item navbar__link",
+        className,
+        isActive ? activeClassName : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      to={to}
+    >
+      {label}
+    </Link>
+  );
+
+  return mobile ? <li className="menu__list-item">{link}</li> : link;
+}
diff --git a/website/versioned_docs/version-next/start.mdx b/website/versioned_docs/version-next/start.mdx
@@ -50,6 +50,7 @@ export function MyDatePicker() {
 ## Learn More
 
 - 📘 [DayPicker Anatomy](./docs/anatomy.mdx) - Understand the parts that make up a DayPicker component.
+- 🎮 [DayPicker Playground](/next/playground) - Experiment with the upcoming version and see the code update in real time.
 - 📚 [API Reference](/next/api) - Browse the prerelease v10 props, components, labels, and utilities.
 
 ### Customization
