refactor: use shared app modes provider from build-tools

Author: mxschll

package-lock.json

@@ -2,16 +2,27 @@
 // SPDX-License-Identifier: Apache-2.0
 import { HashRouter, Link, Route, Routes, useLocation } from "react-router-dom";
 
+import { AppModesProvider, type AppUrlParams } from "@cloudscape-design/build-tools/lib/dev-pages-utils";
+import { applyDensity, applyMode, Density, disableMotion, Mode } from "@cloudscape-design/global-styles";
+
 import { pages } from "../pages";
 import Page from "./page";
 
+function applyModes(params: AppUrlParams, target?: Element) {
+  applyMode(params.mode as Mode, target);
+  applyDensity(params.density as Density, target);
+  disableMotion(params.motionDisabled, target);
+}
+
 export default function App() {
   return (
     <HashRouter>
-      <Routes>
-        <Route path="/" element={<Start />} />
-        <Route path="/*" element={<PageWithFallback />} />
-      </Routes>
+      <AppModesProvider applyModes={applyModes}>
+        <Routes>
+          <Route path="/" element={<Start />} />
+          <Route path="/*" element={<PageWithFallback />} />
+        </Routes>
+      </AppModesProvider>
     </HashRouter>
   );
 }

pages/app/index.tsx

@@ -2,20 +2,20 @@
 // SPDX-License-Identifier: Apache-2.0
 import { Suspense } from "react";
 
+import { useAppModes } from "@cloudscape-design/build-tools/lib/dev-pages-utils";
 import { SpaceBetween, Toggle } from "@cloudscape-design/components";
 import { Density, Mode } from "@cloudscape-design/global-styles";
 
 import { pagesMap } from "../pages";
 import PageLayout from "./page-layout";
-import useModes from "./use-modes";
 
 export interface PageProps {
   pageId: string;
 }
 
 export default function Page({ pageId }: PageProps) {
   const Component = pagesMap[pageId];
-  const { mode, density, setParams } = useModes();
+  const { urlParams, setUrlParams } = useAppModes();
 
   return (
     <PageLayout>
@@ -24,14 +24,16 @@ export default function Page({ pageId }: PageProps) {
           <a href="/index.html#">Back to all pages</a>
           <SpaceBetween direction="horizontal" size="m">
             <Toggle
-              checked={mode === Mode.Dark}
-              onChange={(event) => setParams({ mode: event.detail.checked ? Mode.Dark : Mode.Light })}
+              checked={urlParams.mode === Mode.Dark}
+              onChange={(event) => setUrlParams({ mode: event.detail.checked ? Mode.Dark : Mode.Light })}
             >
               Dark mode
             </Toggle>
             <Toggle
-              checked={density === Density.Compact}
-              onChange={(event) => setParams({ density: event.detail.checked ? Density.Compact : Density.Comfortable })}
+              checked={urlParams.density === Density.Compact}
+              onChange={(event) =>
+                setUrlParams({ density: event.detail.checked ? Density.Compact : Density.Comfortable })
+              }
             >
               Compact mode
             </Toggle>