@storybook/react-native-ui-common 10.2.1 → 10.2.2-alpha.1

package/dist/index.d.ts

@@ -7,7 +7,6 @@ import * as react_native from 'react-native';
 import { TouchableOpacityProps, PressableProps, ViewStyle, TextStyle, ImageStyle, StyleProp } from 'react-native';
 import { StoryContext, Args } from 'storybook/internal/csf';
 import { ReactRenderer } from '@storybook/react';
-import * as Fuse from 'fuse.js';
 import { State, StoriesHash, API, IndexHash } from 'storybook/manager-api';
 import { StatusesByStoryIdAndTypeId, StatusValue, API_IndexHash, API_PreparedStoryIndex, StoryIndexV2, StoryIndexV3, API_Provider, DocsOptions } from 'storybook/internal/types';
 
@@ -60,6 +59,8 @@ declare const StorageProvider: FC<PropsWithChildren<{
 }>>;
 declare const useStorage: () => Storage;
 
+type HighlightRange = [number, number];
+type HighlightRanges = HighlightRange[];
 type Refs = State['refs'];
 type RefType = Refs[keyof Refs] & {
     allStatuses?: StatusesByStoryIdAndTypeId;
@@ -92,7 +93,11 @@ type SearchItem = Item & {
     status?: StatusValue;
     showAll?: () => void;
 };
-type SearchResult = Fuse.FuseResult<SearchItem>;
+interface SearchResult {
+    item: SearchItem;
+    score: number | null;
+    matches: HighlightRanges[];
+}
 type SearchResultProps = SearchResult & {
     icon: string;
     isHighlighted: boolean;
@@ -188,5 +193,6 @@ declare const useLastViewed: (selection: Selection) => {
 };
 
 declare const useStoreBooleanState: (key: string, defaultValue: boolean) => ReturnType<typeof useState<boolean>>;
+declare const useStoreNumberState: (key: string, defaultValue: number) => [number, (value: number | ((prev: number) => number)) => void];
 
-export { Button, ButtonIcon, type ButtonProps, ButtonText, type CombinedDataset, type Dataset, type ExpandAction, type ExpandType, type ExpandedProps, type ExpandedState, type GetSearchItemProps, type Highlight, IconButton, type Item, type ItemRef, LayoutProvider, type RefType, type Refs, type SBUI, type SearchChildrenFn, type SearchItem, type SearchResult, type SearchResultProps, type Selection, type Storage, StorageProvider, type StoryRef, createId, cycle, get, getAncestorIds, getDescendantIds, getParent, getParents, getPath, getStateType, intersect, isAncestor, isExpandType, isStoryHoistable, merge, noArrayMerge, prevent, removeNoiseFromName, searchItem, transformStoryIndexToStoriesHash, transformStoryIndexV2toV3, transformStoryIndexV3toV4, transformStoryIndexV4toV5, useExpanded, useLastViewed, useLayout, useStorage, useStoreBooleanState, useStyle };
+export { Button, ButtonIcon, type ButtonProps, ButtonText, type CombinedDataset, type Dataset, type ExpandAction, type ExpandType, type ExpandedProps, type ExpandedState, type GetSearchItemProps, type Highlight, type HighlightRange, type HighlightRanges, IconButton, type Item, type ItemRef, LayoutProvider, type RefType, type Refs, type SBUI, type SearchChildrenFn, type SearchItem, type SearchResult, type SearchResultProps, type Selection, type Storage, StorageProvider, type StoryRef, createId, cycle, get, getAncestorIds, getDescendantIds, getParent, getParents, getPath, getStateType, intersect, isAncestor, isExpandType, isStoryHoistable, merge, noArrayMerge, prevent, removeNoiseFromName, searchItem, transformStoryIndexToStoriesHash, transformStoryIndexV2toV3, transformStoryIndexV3toV4, transformStoryIndexV4toV5, useExpanded, useLastViewed, useLayout, useStorage, useStoreBooleanState, useStoreNumberState, useStyle };

package/dist/index.js

@@ -62,6 +62,7 @@ __export(index_exports, {
   useLayout: () => useLayout,
   useStorage: () => useStorage,
   useStoreBooleanState: () => useStoreBooleanState,
+  useStoreNumberState: () => useStoreNumberState,
   useStyle: () => useStyle
 });
 module.exports = __toCommonJS(index_exports);
@@ -664,6 +665,31 @@ var useStoreBooleanState = (key, defaultValue) => {
   }, [key, storage, val]);
   return [val, setVal];
 };
+var useStoreNumberState = (key, defaultValue) => {
+  const storage = useStorage();
+  const [val, setVal] = (0, import_react8.useState)(defaultValue);
+  (0, import_react8.useEffect)(() => {
+    storage.getItem(key).then((newVal) => {
+      if (newVal === null || newVal === void 0) {
+        setVal(defaultValue);
+      } else {
+        const parsed = parseFloat(newVal);
+        setVal(isNaN(parsed) ? defaultValue : parsed);
+      }
+    });
+  }, [key, storage, defaultValue]);
+  const setAndStore = (0, import_react8.useCallback)(
+    (value) => {
+      setVal((prev) => {
+        const next = typeof value === "function" ? value(prev) : value;
+        storage.setItem(key, next.toString());
+        return next;
+      });
+    },
+    [key, storage]
+  );
+  return [val, setAndStore];
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
@@ -699,5 +725,6 @@ var useStoreBooleanState = (key, defaultValue) => {
   useLayout,
   useStorage,
   useStoreBooleanState,
+  useStoreNumberState,
   useStyle
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui-common",
-  "version": "10.2.1",
+  "version": "10.2.2-alpha.1",
   "description": "common ui components for react native storybook",
   "keywords": [
     "react",
@@ -37,10 +37,10 @@
     "typescript": "~5.9.3"
   },
   "dependencies": {
-    "@storybook/react": "^10.2.1",
-    "@storybook/react-native-theming": "^10.2.1",
+    "@nozbe/microfuzz": "^1.0.0",
+    "@storybook/react": "^10.2.2",
+    "@storybook/react-native-theming": "^10.2.2-alpha.1",
     "es-toolkit": "^1.41.0",
-    "fuse.js": "^7.1.0",
     "memoizerific": "^1.11.3",
     "ts-dedent": "^2.2.0"
   },
@@ -55,5 +55,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d4d35fdabf780ea51500824c9fe134b182e8c383"
+  "gitHead": "900db1ac2a226eb8206cc89b7142d1ea50272a9e"
 }

package/src/hooks/useStoreState.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useStorage } from '../StorageProvider';
 
 export const useStoreBooleanState = (
@@ -25,3 +25,36 @@ export const useStoreBooleanState = (
 
   return [val, setVal];
 };
+
+export const useStoreNumberState = (
+  key: string,
+  defaultValue: number
+): [number, (value: number | ((prev: number) => number)) => void] => {
+  const storage = useStorage();
+
+  const [val, setVal] = useState<number>(defaultValue);
+
+  useEffect(() => {
+    storage.getItem(key).then((newVal) => {
+      if (newVal === null || newVal === undefined) {
+        setVal(defaultValue);
+      } else {
+        const parsed = parseFloat(newVal);
+        setVal(isNaN(parsed) ? defaultValue : parsed);
+      }
+    });
+  }, [key, storage, defaultValue]);
+
+  const setAndStore = useCallback(
+    (value: number | ((prev: number) => number)) => {
+      setVal((prev) => {
+        const next = typeof value === 'function' ? value(prev) : value;
+        storage.setItem(key, next.toString());
+        return next;
+      });
+    },
+    [key, storage]
+  );
+
+  return [val, setAndStore];
+};

package/src/types.ts

@@ -2,7 +2,6 @@ import type { Args, StoryContext } from 'storybook/internal/csf';
 import type { ReactRenderer } from '@storybook/react';
 import { Theme } from '@storybook/react-native-theming';
 import { Storage } from './StorageProvider';
-import * as Fuse from 'fuse.js';
 import { ReactElement, ReactNode } from 'react';
 import { PressableProps } from 'react-native';
 import type { State, StoriesHash } from 'storybook/manager-api';
@@ -12,6 +11,11 @@ import type {
   StatusValue,
 } from 'storybook/internal/types';
 
+// Microfuzz highlight range: [startIndex, endIndex] (inclusive)
+export type HighlightRange = [number, number];
+// Array of highlight ranges per getText field
+export type HighlightRanges = HighlightRange[];
+
 export type Refs = State['refs'];
 export type RefType = Refs[keyof Refs] & { allStatuses?: StatusesByStoryIdAndTypeId };
 export type Item = StoriesHash[keyof StoriesHash];
@@ -51,7 +55,13 @@ export type SearchItem = Item & {
   showAll?: () => void;
 };
 
-export type SearchResult = Fuse.FuseResult<SearchItem>;
+// Native microfuzz result format
+export interface SearchResult {
+  item: SearchItem;
+  score: number | null;
+  // matches[0] = name highlights, matches[1] = path highlights
+  matches: HighlightRanges[];
+}
 
 export type SearchResultProps = SearchResult & {
   icon: string;
@@ -67,7 +77,7 @@ export type GetSearchItemProps = (args: {
 
 export type SearchChildrenFn = (args: {
   query: string;
-  results: SearchResult[]; // TODO fix this type
+  results: SearchResult[];
   isBrowsing: boolean;
   closeMenu: (cb?: () => void) => void;
   getItemProps: GetSearchItemProps;