Preserve query on toggling full page preview, add better types (#581)

Co-authored-by: Oskar Janczak <[email protected]>

Author: Oskii2311

.changeset/witty-terms-end.md

@@ -0,0 +1,5 @@
+---
+"@ladle/react": major
+---
+
+Toggling full-page preview preserves the search query.

packages/ladle/lib/app/src/app.tsx

@@ -56,6 +56,8 @@ const App = () => {
   const initialGlobalState = getUrlState(location.search);
   const [globalState, dispatch] = React.useReducer(reducer, initialGlobalState);
   const prevGlobalStateRef = React.useRef<Partial<GlobalState>>({});
+  const [search, setSearch] = React.useState("");
+
   let customBackground = "";
   if (globalState.control) {
     Object.keys(globalState.control).forEach((key) => {
@@ -177,6 +179,8 @@ const App = () => {
         )}
       </main>
       <Navigation
+        search={search}
+        setSearch={setSearch}
         stories={stories}
         hotkeys={globalState.hotkeys}
         story={globalState.story}

packages/ladle/lib/app/src/sidebar/main.tsx

@@ -18,19 +18,22 @@ const Main = ({
   story,
   updateStory,
   hotkeys,
+  search,
+  setSearch,
 }: {
   stories: string[];
   story: string;
   updateStory: UpdateStory;
   hotkeys: boolean;
+  search: string;
+  setSearch: React.Dispatch<React.SetStateAction<string>>;
 }) => {
-  const [search, setSearch] = React.useState("");
   const [width, setWidth] = React.useState(
     getSettings().sidebarWidth || DEFAULT_WIDTH,
   );
   const [resizeActive, setResizeActive] = React.useState(false);
   const handleRef = React.useRef<HTMLDivElement>(null);
-  const searchEl = React.useRef(null);
+  const searchEl = React.useRef<HTMLInputElement>(null);
   const treeRoot = React.useRef<HTMLUListElement | null>(null);
 
   React.useEffect(() => {
@@ -79,11 +82,10 @@ const Main = ({
     };
   }, [resizeActive, setResizeActive, setWidth, handleRef.current]);
 
-  useHotkeys(
-    config.hotkeys.search,
-    () => (searchEl.current as any as HTMLInputElement).focus(),
-    { preventDefault: true, enabled: hotkeys },
-  );
+  useHotkeys(config.hotkeys.search, () => searchEl.current?.focus(), {
+    preventDefault: true,
+    enabled: hotkeys,
+  });
   const canonicalSearch = search
     .toLocaleLowerCase()
     .replace(new RegExp("\\s+", "g"), "-");
@@ -92,6 +94,14 @@ const Main = ({
     story.includes(canonicalSearch),
   );
 
+  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
+    if (e.key === "ArrowDown" && treeRoot.current?.firstChild) {
+      const firstLiElement = treeRoot.current.firstChild as HTMLLIElement;
+
+      firstLiElement.focus();
+    }
+  };
+
   return (
     <>
       <div
@@ -125,11 +135,7 @@ const Main = ({
           aria-label="Search stories"
           value={search}
           ref={searchEl}
-          onKeyDown={(e) => {
-            if (e.key === "ArrowDown") {
-              (treeRoot as any).current.firstChild.focus();
-            }
-          }}
+          onKeyDown={onKeyDown}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
             setSearch(e.target.value)
           }

packages/ladle/lib/app/src/sidebar/tree-view.tsx

@@ -36,7 +36,7 @@ const TreeView = ({
 }: {
   stories: string[];
   story: string;
-  searchRef: React.Ref<HTMLLinkElement>;
+  searchRef: React.Ref<HTMLInputElement>;
   updateStory: UpdateStory;
   setTreeRootRef: (root: HTMLUListElement | null) => void;
   searchActive?: boolean;