chore: Set all parameters from dev pages in a consistent way

Author: jperals

pages/app/page.tsx

@@ -1,22 +1,15 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { Suspense, useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { Suspense } from "react";
 
 import { pagesMap } from "../pages";
-
+import useModes from "./use-modes";
 export interface PageProps {
   pageId: string;
 }
-
 export default function Page({ pageId }: PageProps) {
-  const [searchParams] = useSearchParams();
-  const direction = searchParams.get("direction") ?? "ltr";
-
-  useEffect(() => {
-    document.documentElement.setAttribute("dir", direction);
-  }, [direction]);
+  useModes();
 
   const Component = pagesMap[pageId];
 

pages/app/use-modes.ts

@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+
+import { applyDensity, applyMode, disableMotion } from "@cloudscape-design/global-styles";
+
+import { AppUrlParams, formatQuery, parseQuery } from "./utils";
+
+export default function useModes() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const urlParams = parseQuery(searchParams) as AppUrlParams;
+  const { density, direction, mode, motionDisabled } = urlParams;
+
+  function setParams(newParams: Partial<AppUrlParams>) {
+    setSearchParams(formatQuery({ ...urlParams, ...newParams }));
+
+    if (newParams.direction && newParams.direction !== direction) {
+      window.location.reload();
+    }
+  }
+
+  useEffect(() => {
+    applyMode(mode);
+  }, [mode]);
+
+  useEffect(() => {
+    applyDensity(density);
+  }, [density]);
+
+  useEffect(() => {
+    disableMotion(motionDisabled);
+  }, [motionDisabled]);
+
+  document.documentElement.setAttribute("dir", urlParams.direction);
+
+  return { density, direction, mode, motionDisabled, setParams };
+}

pages/app/utils.ts

@@ -0,0 +1,43 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import mapValues from "lodash/mapValues";
+
+import { Density, Mode } from "@cloudscape-design/global-styles";
+
+export interface AppUrlParams {
+  mode: Mode;
+  density: Density;
+  direction: "ltr" | "rtl";
+  motionDisabled: boolean;
+}
+
+export const defaults: AppUrlParams = {
+  mode: Mode.Light,
+  density: Density.Comfortable,
+  direction: "ltr",
+  motionDisabled: false,
+};
+
+export function parseQuery(urlParams: URLSearchParams) {
+  const queryParams: Record<string, any> = { ...defaults };
+  urlParams.forEach((value, key) => (queryParams[key] = value));
+
+  return mapValues(queryParams, (value) => {
+    if (value === "true" || value === "false") {
+      return value === "true";
+    }
+    return value;
+  });
+}
+
+export function formatQuery(params: AppUrlParams) {
+  const query: Record<string, string> = {};
+  for (const [key, value] of Object.entries(params)) {
+    if (value === defaults[key as keyof AppUrlParams]) {
+      continue;
+    }
+    query[key as keyof AppUrlParams] = String(value);
+  }
+  return query;
+}