feat: store web panel open state in storage (#641)

* feat: store panel open state in storage

* fix: use storage provided by user

* fix: respect default value

---------

Co-authored-by: Daniel Williams <[email protected]>

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

@@ -3,7 +3,7 @@ import { addons } from '@storybook/core/manager-api';
 import { type API_IndexHash, type Args, type StoryContext } from '@storybook/core/types';
 import type { ReactRenderer } from '@storybook/react';
 import { styled, useTheme } from '@storybook/react-native-theming';
-import { ReactNode, useRef, useState } from 'react';
+import { ReactNode, useRef } from 'react';
 import { ScrollView, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { IconButton } from './IconButton';
@@ -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 { useStoreBooleanState } from './hooks/useStoreState';
 
 export const Layout = ({
   storyHash,
@@ -32,9 +33,15 @@ export const Layout = ({
   const insets = useSafeAreaInsets();
   const { isDesktop } = useLayout();
 
-  const [desktopSidebarOpen, setDesktopSidebarOpen] = useState(true);
+  const [desktopSidebarOpen, setDesktopSidebarOpen] = useStoreBooleanState(
+    'desktopSidebarState',
+    true
+  );
 
-  const [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = useState(true);
+  const [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = useStoreBooleanState(
+    '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/StorageProvider.tsx

@@ -0,0 +1,21 @@
+import type { FC, PropsWithChildren } from 'react';
+import { createContext, useContext } from 'react';
+
+interface Storage {
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: string) => Promise<void>;
+}
+
+const StorageContext = createContext<Storage>({
+  getItem: async () => null,
+  setItem: async () => {},
+});
+
+export const StorageProvider: FC<PropsWithChildren<{ storage: Storage }>> = ({
+  storage,
+  children,
+}) => {
+  return <StorageContext.Provider value={storage}>{children}</StorageContext.Provider>;
+};
+
+export const useStorage = () => useContext(StorageContext);

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,27 @@
+import { useEffect, useState } from 'react';
+import { useStorage } from '../StorageProvider';
+
+export const useStoreBooleanState = (
+  key: string,
+  defaultValue: boolean
+): ReturnType<typeof useState<boolean>> => {
+  const storage = useStorage();
+
+  const [val, setVal] = useState<boolean>(defaultValue);
+
+  useEffect(() => {
+    storage.getItem(key).then((newVal) => {
+      if (newVal === null || newVal === undefined) {
+        setVal(defaultValue);
+      } else {
+        setVal(newVal === 'true');
+      }
+    });
+  }, [key, storage, defaultValue]);
+
+  useEffect(() => {
+    storage.setItem(key, val.toString());
+  }, [key, storage, val]);
+
+  return [val, setVal];
+};

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

@@ -8,3 +8,4 @@ export * from './Sidebar';
 export * from './types';
 export * from './Layout';
 export * from './util/StoryHash';
+export * from './StorageProvider';

packages/react-native/src/View.tsx

@@ -9,6 +9,7 @@ import { Theme, ThemeProvider, darkTheme, theme } from '@storybook/react-native-
 import {
   Layout,
   LayoutProvider,
+  StorageProvider,
   transformStoryIndexToStoriesHash,
 } from '@storybook/react-native-ui';
 import type { API_IndexHash, PreparedStory, StoryId, StoryIndex } from '@storybook/core/types';
@@ -287,11 +288,13 @@ export class View {
               <GestureHandlerRootView style={{ flex: 1 }}>
                 <BottomSheetModalProvider>
                   {/* @ts-ignore something weird with story type */}
-                  <LayoutProvider>
-                    <Layout storyHash={storyHash} story={story}>
-                      <StoryView />
-                    </Layout>
-                  </LayoutProvider>
+                  <StorageProvider storage={storage}>
+                    <LayoutProvider>
+                      <Layout storyHash={storyHash} story={story}>
+                        <StoryView />
+                      </Layout>
+                    </LayoutProvider>
+                  </StorageProvider>
                 </BottomSheetModalProvider>
               </GestureHandlerRootView>
             </SafeAreaProvider>