Set all modes from dev pages

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,41 @@
+// 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, visualRefresh } = urlParams;
+
+  function setParams(newParams: Partial<AppUrlParams>) {
+    setSearchParams(formatQuery({ ...urlParams, ...newParams }));
+
+    if (
+      (newParams.direction && newParams.direction !== direction) ||
+      (newParams.visualRefresh && newParams.visualRefresh !== visualRefresh)
+    ) {
+      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, visualRefresh, setParams };
+}

pages/app/utils.ts

@@ -0,0 +1,57 @@
+// 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;
+  visualRefresh: boolean;
+}
+
+export const defaults: AppUrlParams = {
+  mode: Mode.Light,
+  density: Density.Comfortable,
+  direction: "ltr",
+  motionDisabled: false,
+  visualRefresh: true,
+};
+
+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;
+}
+
+const awsuiVisualRefreshFlag = Symbol.for("awsui-visual-refresh-flag");
+interface ExtendedWindow extends Window {
+  [awsuiVisualRefreshFlag]?: () => boolean;
+}
+declare const window: ExtendedWindow;
+
+export function setVisualRefresh() {
+  const { visualRefresh } = parseQuery(new URLSearchParams(window.location.hash.split("?")[1]));
+
+  window[awsuiVisualRefreshFlag] = () => visualRefresh ?? true;
+}

pages/main.tsx

@@ -4,9 +4,12 @@ import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 
 import App from "./app";
+import { setVisualRefresh } from "./app/utils";
 
 import "@cloudscape-design/global-styles/index.css";
 
+setVisualRefresh();
+
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <StrictMode>
     <App />