feat: store panel open state in storage

packages/react-native-ui/src/Layout.tsx

@@ -16,6 +16,7 @@ import { BottomBarToggleIcon } from './icon/BottomBarToggleIcon';
 import { DarkLogo } from './icon/DarkLogo';
 import { Logo } from './icon/Logo';
 import { MenuIcon } from './icon/MenuIcon';
+import { useStoreState } from './hooks/useStoreState';
 
 export const Layout = ({
   storyHash,
@@ -34,9 +35,12 @@ export const Layout = ({
   const insets = useSafeAreaInsets();
   const { isDesktop } = useLayout();
 
-  const [desktopSidebarOpen, setDesktopSidebarOpen] = useState(true);
+  const [desktopSidebarOpen, setDesktopSidebarOpen] = useStoreState('desktopSidebarState', true);
 
-  const [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = useState(true);
+  const [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = useStoreState(
+    'desktopPanelState',
+    true
+  );
 
   if (isDesktop) {
     return (

packages/react-native-ui/src/Sidebar.tsx

@@ -10,7 +10,7 @@ import { Explorer } from './Explorer';
 import { Search } from './Search';
 import { SearchResults } from './SearchResults';
 import type { CombinedDataset, Selection } from './types';
-import { useLastViewed } from './useLastViewed';
+import { useLastViewed } from './hooks/useLastViewed';
 import { DEFAULT_REF_ID } from './constants';
 import { View } from 'react-native';
 

packages/react-native-ui/src/Tree.tsx

@@ -14,8 +14,8 @@ import { CollapseAllIcon } from './icon/CollapseAllIcon';
 import { CollapseIcon } from './icon/CollapseIcon';
 import { ExpandAllIcon } from './icon/ExpandAllIcon';
 import { Item } from './types';
-import type { ExpandAction, ExpandedState } from './useExpanded';
-import { useExpanded } from './useExpanded';
+import type { ExpandAction, ExpandedState } from './hooks/useExpanded';
+import { useExpanded } from './hooks/useExpanded';
 import { getGroupStatus, statusMapping } from './util/status';
 import { createId, getAncestorIds, getDescendantIds, isStoryHoistable } from './util/tree';
 

packages/react-native-ui/src/useExpanded.ts → packages/react-native-ui/src/hooks/useExpanded.ts

@@ -1,7 +1,7 @@
 import type { StoriesHash } from '@storybook/core/manager-api';
 import type { Dispatch, Reducer } from 'react';
 import { useCallback, useEffect, useReducer } from 'react';
-import { getAncestorIds } from './util/tree';
+import { getAncestorIds } from '../util/tree';
 
 export type ExpandedState = Record<string, boolean>;
 

packages/react-native-ui/src/useLastViewed.ts → packages/react-native-ui/src/hooks/useLastViewed.ts

@@ -2,7 +2,7 @@ import debounce from 'lodash/debounce.js';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import store from 'store2';
 
-import type { Selection, StoryRef } from './types';
+import type { Selection, StoryRef } from '../types';
 
 const save = debounce((value) => store.set('lastViewedStoryIds', value), 1000);
 

packages/react-native-ui/src/hooks/useStoreState.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+import store from 'store2';
+
+export const useStoreState = <T>(key: string, defaultValue: T): ReturnType<typeof useState<T>> => {
+  const [val, setVal] = useState<T>(store.get(key) ?? defaultValue);
+
+  useEffect(() => {
+    store.set(key, val);
+  }, [key, val]);
+
+  return [val, setVal];
+};