From 62e9b20f08fb087f4932a07552717906c5865a28 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sat, 28 Feb 2026 18:55:58 +0000 Subject: [PATCH 1/2] 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. --- package.json | 3 +- packages/react-native-ui-lite/package.json | 2 +- .../react-native-ui-lite/src/LegendList.tsx | 14 ++++++++ .../src/SearchResults.tsx | 19 ++-------- packages/react-native-ui-lite/src/Tree.tsx | 2 +- pnpm-lock.yaml | 35 ++++++++----------- 6 files changed, 34 insertions(+), 41 deletions(-) create mode 100644 packages/react-native-ui-lite/src/LegendList.tsx diff --git a/package.json b/package.json index 79a5223208..1e5a3d984c 100644 --- a/package.json +++ b/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": { diff --git a/packages/react-native-ui-lite/package.json b/packages/react-native-ui-lite/package.json index 7be6b23cfd..54e6270789 100644 --- a/packages/react-native-ui-lite/package.json +++ b/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", diff --git a/packages/react-native-ui-lite/src/LegendList.tsx b/packages/react-native-ui-lite/src/LegendList.tsx new file mode 100644 index 0000000000..f9eceeac31 --- /dev/null +++ b/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 = LegendListRenderItemPropsNative; +export type LegendListRef = LegendListRefNative; + +const isWeb = Platform.OS === 'web'; + +export const LegendList = (isWeb ? LegendListWeb : LegendListNative) as typeof LegendListNative; diff --git a/packages/react-native-ui-lite/src/SearchResults.tsx b/packages/react-native-ui-lite/src/SearchResults.tsx index 5f8adbf45d..c23be9a65d 100644 --- a/packages/react-native-ui-lite/src/SearchResults.tsx +++ b/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 ( - -
- {listData.map((item) => ( -
{renderItem({ item })}
- ))} -
- - ); - } - return ( =7.0.3' importers: @@ -570,8 +571,8 @@ importers: specifier: ^1.0.14 version: 1.0.14(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0) '@legendapp/list': - specifier: 3.0.0-beta.31 - version: 3.0.0-beta.31(react-dom@19.2.0(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0) + specifier: 3.0.0-beta.38 + version: 3.0.0-beta.38(react-dom@19.2.0(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0) '@nozbe/microfuzz': specifier: ^1.0.0 version: 1.0.0 @@ -2751,8 +2752,8 @@ packages: peerDependencies: tslib: '2' - '@legendapp/list@3.0.0-beta.31': - resolution: {integrity: sha512-9KpPvwK/14QTJZVbEgDxjzRwcgSf1gkYSxw/d8GE03uasjnzCHe/fm4qrqpobDLYYt90wuemhjkE3YE18XMKEg==} + '@legendapp/list@3.0.0-beta.38': + resolution: {integrity: sha512-toPEL1P3nqwJHg7ycTjChQrrgnpMs9wzq59cQ2kVmC0fbRnae5EoztY2ZftB/fz3p4pLoBaQbAeFoYOUxmkmEg==} peerDependencies: react: '*' react-dom: '*' @@ -8738,9 +8739,6 @@ packages: resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==} engines: {node: '>=10'} - randombytes@2.1.0: - resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} - range-parser@1.2.0: resolution: {integrity: sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==} engines: {node: '>= 0.6'} @@ -9235,8 +9233,9 @@ packages: resolution: {integrity: sha512-ghgmKt5o4Tly5yEG/UJp8qTd0AN7Xalw4XBtDEKP655B699qMEtra1WlXeE6WIvdEG481JvRxULKsInq/iNysw==} engines: {node: '>=0.10.0'} - serialize-javascript@6.0.2: - resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==} + serialize-javascript@7.0.3: + resolution: {integrity: sha512-h+cZ/XXarqDgCjo+YSyQU/ulDEESGGf8AMK9pPNmhNSl/FzPl6L8pMp1leca5z6NuG6tvV/auC8/43tmovowww==} + engines: {node: '>=20.0.0'} serve-handler@6.1.6: resolution: {integrity: sha512-x5RL9Y2p5+Sh3D38Fh9i/iQ5ZK+e4xuXRd/pGbM4D13tgo/MGwbttUk8emytcr1YYzBYs+apnUngBDFYfpjPuQ==} @@ -13727,7 +13726,7 @@ snapshots: '@jsonjoy.com/codegen': 17.67.0(tslib@2.8.1) tslib: 2.8.1 - '@legendapp/list@3.0.0-beta.31(react-dom@19.2.0(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)': + '@legendapp/list@3.0.0-beta.38(react-dom@19.2.0(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)': dependencies: react: 19.2.0 use-sync-external-store: 1.6.0(react@19.2.0) @@ -16291,7 +16290,7 @@ snapshots: globby: 13.2.2 normalize-path: 3.0.0 schema-utils: 4.3.3 - serialize-javascript: 6.0.2 + serialize-javascript: 7.0.3 webpack: 5.105.3(@swc/core@1.15.17) core-js-compat@3.48.0: @@ -16400,7 +16399,7 @@ snapshots: jest-worker: 29.7.0 postcss: 8.5.6 schema-utils: 4.3.3 - serialize-javascript: 6.0.2 + serialize-javascript: 7.0.3 webpack: 5.105.3(@swc/core@1.15.17) optionalDependencies: clean-css: 5.3.3 @@ -21126,10 +21125,6 @@ snapshots: quick-lru@5.1.1: {} - randombytes@2.1.0: - dependencies: - safe-buffer: 5.2.1 - range-parser@1.2.0: {} range-parser@1.2.1: {} @@ -21841,9 +21836,7 @@ snapshots: serialize-error@2.1.0: {} - serialize-javascript@6.0.2: - dependencies: - randombytes: 2.1.0 + serialize-javascript@7.0.3: {} serve-handler@6.1.6: dependencies: @@ -22365,7 +22358,7 @@ snapshots: '@jridgewell/trace-mapping': 0.3.31 jest-worker: 27.5.1 schema-utils: 4.3.3 - serialize-javascript: 6.0.2 + serialize-javascript: 7.0.3 terser: 5.46.0 webpack: 5.105.3(@swc/core@1.15.17) optionalDependencies: @@ -22376,7 +22369,7 @@ snapshots: '@jridgewell/trace-mapping': 0.3.31 jest-worker: 27.5.1 schema-utils: 4.3.3 - serialize-javascript: 6.0.2 + serialize-javascript: 7.0.3 terser: 5.46.0 webpack: 5.105.3(esbuild@0.27.3) optionalDependencies: From 115fa289fc32dd05ccd77fe2057c1be43473848d Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sat, 28 Feb 2026 18:57:52 +0000 Subject: [PATCH 2/2] changeset --- .changeset/polite-brooms-decide.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/polite-brooms-decide.md diff --git a/.changeset/polite-brooms-decide.md b/.changeset/polite-brooms-decide.md new file mode 100644 index 0000000000..29d34ac31a --- /dev/null +++ b/.changeset/polite-brooms-decide.md @@ -0,0 +1,5 @@ +--- +'@storybook/react-native-ui-lite': patch +--- + +feat: use legend list react for web