fix: add LegendList wrapper to use react entrypoint on web (#859)

* fix: add LegendList wrapper to use react entrypoint on web

Create a LegendList wrapper component that uses @legendapp/list/react
on web and @legendapp/list/react-native on native via a runtime
Platform check. This removes the need for @ts-ignore comments in
Tree.tsx and SearchResults.tsx.

* changeset

Author: dannyhw

.changeset/polite-brooms-decide.md

@@ -0,0 +1,5 @@
+---
+'@storybook/react-native-ui-lite': patch
+---
+
+feat: use legend list react for web

package.json

@@ -61,7 +61,8 @@
       "markdown-it": "^14.0.0",
       "@types/markdown-it": "^14.0.1",
       "zod-validation-error": "^4.0.0",
-      "minimatch@3": "~3.1.3"
+      "minimatch@3": "~3.1.3",
+      "serialize-javascript": ">=7.0.3"
     }
   },
   "engines": {

packages/react-native-ui-lite/package.json

@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@legendapp/list": "3.0.0-beta.31",
+    "@legendapp/list": "3.0.0-beta.38",
     "@nozbe/microfuzz": "^1.0.0",
     "@storybook/react": "10.3.0-alpha.12",
     "@storybook/react-native-theming": "^10.3.0-next.3",

packages/react-native-ui-lite/src/LegendList.tsx

@@ -0,0 +1,14 @@
+import { LegendList as LegendListWeb } from '@legendapp/list/react';
+import {
+  LegendList as LegendListNative,
+  LegendListRef as LegendListRefNative,
+  LegendListRenderItemProps as LegendListRenderItemPropsNative,
+} from '@legendapp/list/react-native';
+import { Platform } from 'react-native';
+
+export type LegendListRenderItemProps<T> = LegendListRenderItemPropsNative<T>;
+export type LegendListRef = LegendListRefNative;
+
+const isWeb = Platform.OS === 'web';
+
+export const LegendList = (isWeb ? LegendListWeb : LegendListNative) as typeof LegendListNative;

packages/react-native-ui-lite/src/SearchResults.tsx

@@ -1,4 +1,4 @@
-import { LegendList } from '@legendapp/list';
+import { LegendList } from './LegendList';
 import { styled, useTheme } from '@storybook/react-native-theming';
 import type {
   GetSearchItemProps,
@@ -9,12 +9,10 @@ import { Button, IconButton, isExpandType, ExpandType } from '@storybook/react-n
 import { transparentize } from 'polished';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import React, { useCallback, useMemo } from 'react';
-import { Platform, PressableProps, View, ViewStyle, TextStyle } from 'react-native';
+import { PressableProps, View, ViewStyle, TextStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ComponentIcon, StoryIcon } from './icon/iconDataUris';
 
-const isWeb = Platform.OS === 'web';
-
 // Microfuzz highlight types
 type HighlightRange = [number, number];
 type HighlightRanges = HighlightRange[];
@@ -327,19 +325,6 @@ export const SearchResults: FC<{
     [getItemProps, highlightedIndex]
   );
 
-  // On web, use a simple scrollable div to avoid LegendList web infinite update stack
-  if (isWeb) {
-    return (
-      <View style={flexStyle}>
-        <div style={{ flex: 1, overflow: 'auto', ...contentContainerStyle }}>
-          {listData.map((item) => (
-            <div key={keyExtractor(item)}>{renderItem({ item })}</div>
-          ))}
-        </div>
-      </View>
-    );
-  }
-
   return (
     <View style={flexStyle}>
       <LegendList

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

@@ -12,7 +12,7 @@ import {
 } from '@storybook/react-native-ui-common';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { View, ViewStyle } from 'react-native';
-import { LegendList, LegendListRef, LegendListRenderItemProps } from '@legendapp/list';
+import { LegendList, LegendListRef, LegendListRenderItemProps } from './LegendList';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useSelectedNode } from './SelectedNodeProvider';
 import type {