feat(storage-plugin): add storage plugin (#184)

## Description

This PR introduces a new official plugin: `@rozenite/storage-plugin`.

It provides a generic storage inspector experience across multiple
storage backends, with adapter-based integration and support for both
single-storage and multi-storage setups.

User-facing highlights:
- Adds a new Storage plugin package with a React Native hook API:
  - `useRozeniteStoragePlugin({ storages })`
- Supports multiple adapters and named storages so users can inspect and
manage distinct storage instances in one place.
- Includes adapters for:
  - MMKV (multiple storages, full typed values)
  - AsyncStorage (v2 and v3-style usage)
  - Expo SecureStore
- Improves editing workflow in the panel:
- clicking an entry pre-fills the key field for faster update/delete
actions.
- Adds Storage plugin documentation page to the website and links it
from the official plugins overview.
- Adds deprecation guidance to MMKV docs, pointing users to the new
generic Storage plugin as the future path.

## Related Issue

N/A

## Context

The goal is to move from a MMKV-specific experience to a generic storage
plugin that can support multiple storage libraries consistently.

This phase intentionally keeps `@rozenite/mmkv-plugin` intact while
introducing the new plugin and docs migration path.

## Testing

- `pnpm --filter @rozenite/storage-plugin typecheck`
- `pnpm --filter @rozenite/storage-plugin build`
- Manual playground verification for storage plugin flows (including
AsyncStorage variants and MMKV/SecureStore adapters)

Author: V3RON

.changeset/bright-toes-share.md

@@ -0,0 +1,12 @@
+---
+"@rozenite/storage-plugin": minor
+---
+
+Introduce `@rozenite/storage-plugin` as a generic storage inspector for React Native devtools.
+
+User-facing changes:
+- Add `useRozeniteStoragePlugin({ storages })` API for registering one or more adapters.
+- Support named storages across adapters so multiple independent stores can be inspected in a single plugin panel.
+- Provide built-in adapters for MMKV, AsyncStorage (including v2 and v3-style usage), and Expo SecureStore.
+- Improve entry workflows in the panel by prefilling the key when an entry is selected, making update/delete actions faster.
+- Add official documentation for the new Storage plugin and guide users from MMKV docs toward the generic plugin path.

apps/playground/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
+    "@react-native-async-storage/async-storage": "^3.0.1",
     "@react-navigation/bottom-tabs": "^7.4.7",
     "@react-navigation/elements": "^2.6.3",
     "@react-navigation/native": "^7.1.17",
@@ -28,6 +29,7 @@
     "@rozenite/react-navigation-plugin": "workspace:*",
     "@rozenite/redux-devtools-plugin": "workspace:*",
     "@rozenite/require-profiler-plugin": "workspace:*",
+    "@rozenite/storage-plugin": "workspace:*",
     "@rozenite/tanstack-query-plugin": "workspace:*",
     "@rozenite/web": "workspace:*",
     "@tanstack/react-query": "^5.81.5",
@@ -38,6 +40,7 @@
     "expo-image": "~55.0.3",
     "expo-linking": "~55.0.4",
     "expo-router": "~55.0.0-preview.7",
+    "expo-secure-store": "^55.0.8",
     "expo-splash-screen": "~55.0.5",
     "expo-status-bar": "~55.0.2",
     "expo-symbols": "~55.0.3",

apps/playground/src/app/App.tsx

@@ -7,6 +7,7 @@ import { useMMKVDevTools } from '@rozenite/mmkv-plugin';
 import { useNetworkActivityDevTools } from '@rozenite/network-activity-plugin';
 import { usePerformanceMonitorDevTools } from '@rozenite/performance-monitor-plugin';
 import { useReactNavigationDevTools } from '@rozenite/react-navigation-plugin';
+import { useRozeniteStoragePlugin } from '@rozenite/storage-plugin';
 import { useTanStackQueryDevTools } from '@rozenite/tanstack-query-plugin';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useRef } from 'react';
@@ -25,6 +26,8 @@ import { PerformanceMonitorScreen } from './screens/PerformanceMonitorScreen';
 import { ReduxTestScreen } from './screens/ReduxTestScreen';
 import { RequestBodyTestScreen } from './screens/RequestBodyTestScreen';
 import { RequireProfilerTestScreen } from './screens/RequireProfilerTestScreen';
+import { StoragePluginScreen } from './screens/StoragePluginScreen';
+import { storagePluginAdapters } from './storage-plugin-adapters';
 import { primaryStore } from './store';
 import { useRequireProfilerDevTools } from '@rozenite/require-profiler-plugin';
 import { withOnBootNetworkActivityRecording } from '@rozenite/network-activity-plugin';
@@ -47,6 +50,9 @@ const Wrapper = () => {
     storages: mmkvStorages,
     blacklist: /user-storage:sensitiveToken/,
   });
+  useRozeniteStoragePlugin({
+    storages: storagePluginAdapters,
+  });
   usePerformanceMonitorDevTools();
   useRequireProfilerDevTools();
 
@@ -60,6 +66,7 @@ const Wrapper = () => {
     >
       <Stack.Screen name="Landing" component={LandingScreen} />
       <Stack.Screen name="MMKVPlugin" component={MMKVPluginScreen} />
+      <Stack.Screen name="StoragePlugin" component={StoragePluginScreen} />
       <Stack.Screen name="NetworkTest" component={NetworkTestScreen} />
       <Stack.Screen name="RequestBodyTest" component={RequestBodyTestScreen} />
       <Stack.Screen name="ReduxTest" component={ReduxTestScreen} />
@@ -104,6 +111,7 @@ const linking = {
     screens: {
       Landing: '',
       MMKVPlugin: 'mmkv',
+      StoragePlugin: 'storage',
       NetworkTest: 'network',
       ReduxTest: 'redux',
       PerformanceMonitor: 'performance',

apps/playground/src/app/navigation/types.ts

@@ -3,6 +3,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 export type RootStackParamList = {
   Landing: undefined;
   MMKVPlugin: undefined;
+  StoragePlugin: undefined;
   NetworkTest: undefined;
   RequestBodyTest: undefined;
   ReduxTest: undefined;

apps/playground/src/app/screens/LandingScreen.tsx

@@ -30,6 +30,13 @@ export const LandingScreen = () => {
               <Text style={styles.buttonText}>MMKV Plugin</Text>
             </TouchableOpacity>
 
+            <TouchableOpacity
+              style={styles.navigationButton}
+              onPress={() => navigation.navigate('StoragePlugin' as never)}
+            >
+              <Text style={styles.buttonText}>Storage Plugin</Text>
+            </TouchableOpacity>
+
             <TouchableOpacity
               style={styles.navigationButton}
               onPress={() => navigation.navigate('NetworkTest' as never)}