@storybook/react-native 6.5.4 → 6.5.5-alpha.0

package/dist/hooks.d.ts

@@ -1,6 +1,7 @@
 import type { StoryContext } from '@storybook/csf';
 import type { Theme } from './preview/components/Shared/theme';
 import type { ReactNativeFramework } from './types/types-6.0';
+import { StoryIndexEntry } from '@storybook/client-api';
 /**
  * Hook that returns a function to set the current story context.
  */
@@ -18,9 +19,10 @@ export declare function useStoryContextParam<T = any>(name: string, defaultValue
  */
 export declare function useIsStorySelected(storyId: string): boolean;
 /**
- * Hook that indicates if `title` is the currently selected story section.
+ * Hook that indicates if story kind (title) is the currently selected story section.
  */
 export declare function useIsStorySectionSelected(title: string): boolean;
+export declare function useIsChildSelected(entries: StoryIndexEntry[]): boolean;
 /**
  * Hook that causes a re-render when the currently selected story is changed.
  */

package/dist/hooks.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSelectedAddon = exports.syncExternalUI = exports.useIsSplitPanelVisible = exports.useIsUIVisible = exports.atomWithToggle = exports.useTheme = exports.useUpdateOnStoryChanged = exports.useIsStorySectionSelected = exports.useIsStorySelected = exports.useStoryContextParam = exports.useStoryContext = exports.useSetStoryContext = void 0;
+exports.useSelectedAddon = exports.syncExternalUI = exports.useIsSplitPanelVisible = exports.useIsUIVisible = exports.atomWithToggle = exports.useTheme = exports.useUpdateOnStoryChanged = exports.useIsChildSelected = exports.useIsStorySectionSelected = exports.useIsStorySelected = exports.useStoryContextParam = exports.useStoryContext = exports.useSetStoryContext = void 0;
 var react_1 = __importStar(require("react"));
 var jotai_1 = require("jotai");
 var emotion_theming_1 = require("emotion-theming");
@@ -59,12 +59,31 @@ function useIsStorySelected(storyId) {
 }
 exports.useIsStorySelected = useIsStorySelected;
 /**
- * Hook that indicates if `title` is the currently selected story section.
+ * Hook that indicates if story kind (title) is the currently selected story section.
  */
 function useIsStorySectionSelected(title) {
-    return (0, jotai_1.useAtomValue)((0, react_1.useMemo)(function () { return (0, jotai_1.atom)(function (get) { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.title) === title; }); }, [title]));
+    return (0, jotai_1.useAtomValue)((0, react_1.useMemo)(function () {
+        return (0, jotai_1.atom)(function (get) {
+            var _a;
+            var contextTitle = (_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.title;
+            return contextTitle === title || (contextTitle === null || contextTitle === void 0 ? void 0 : contextTitle.startsWith("".concat(title, "/")));
+        });
+    }, [title]));
 }
 exports.useIsStorySectionSelected = useIsStorySectionSelected;
+function useIsChildSelected(entries) {
+    return (0, jotai_1.useAtomValue)((0, react_1.useMemo)(function () {
+        return (0, jotai_1.atom)(function (get) {
+            var _a;
+            var contextId = (_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.id;
+            return !!entries.find(function (_a) {
+                var id = _a.id;
+                return id === contextId;
+            });
+        });
+    }, [entries]));
+}
+exports.useIsChildSelected = useIsChildSelected;
 /**
  * Hook that causes a re-render when the currently selected story is changed.
  */

package/dist/preview/components/Shared/icons.d.ts

@@ -24,6 +24,9 @@ declare const iconSources: {
     'layout-split-inverse': {
         uri: string;
     };
+    folder: {
+        uri: string;
+    };
 };
 export type IconName = keyof typeof iconSources;
 declare const StyledImage: any;

package/dist/preview/components/Shared/icons.js

@@ -54,6 +54,9 @@ var iconSources = {
     'layout-split-inverse': {
         uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEaSURBVHgB7ZntDYJADIaLcQBGYARHgAl0I0YQJ8BNdAPZ4BzBDWov8ENrkYuJtJA+SUO4D/K+1yaQAuA4jmMaRCwpjhQB5+NG0VIU8Cu0OR+EaxM15GM6szHxdLlQ7MAGHUWVZdmDT2xGNtRgR3wkaqmliY8MYF93AWwSs3B9HZAyUINdDnxAMmCpdDh7PiCVEIJhqITeNG9g4bgBbdyANm5AGzegzeINbKcW8Ff33Ex92ngJaeMGtHED2rgBbdZv4FtbzwKSgTu7V2uz0OHxPlCXsqlhzdWgkQXsm8uBaWlTNpZChzgIp/EXBuElyu38IvUhDdqjkbSus70+LKwoTqBP1CCKT4KyUVCcsf/tMxcB+zIuwXEcxzRPpfGo9y3IYogAAAAASUVORK5CYII=',
     },
+    folder: {
+        uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHTSURBVGiB7Zk7LwRRGIbf7wwRRIJGlDSEpdmI6Fw6lRWZXiJ0lkZUsn8A2dD5B0MhkS1UepGIXZu4hsKlJASxyZyjoJAx4uzutztjc57yXN58T+Z8M5kZoEKg2R4nSpL6IdCQ72YlhQLh3LLc/dUj+7YUBepC8ciWYshxidSy+1a/tHYx+s6QlzeCKcdSihZEzWtqfsCpZcrMCy6RTwgj8knsBCHDKwIEJsPVI36cKOCGK4ygnkHYbcpkNxJISO98lc+eR4Au9eJVG4DmXyY7CejUrvRPCFCIPUQifTjG1I9ZnyuynTyeiOlEx3udDkixB6CVo1RdXCHb19P21fexonokmbZPIeQQgPuiKssTS1K3d6zoZg9Choh+tATLXSuZtk8tSwyC1B1HXiH4NXtBrByNn8V7nWFIMcmVCVJzAGp0lrKJAF/HDFjkyotHtmagKcL/QAwIIxI2jEjYMCJhw4iEDSMSNoxI2DAiYcOIhI2KEfF71W2c7XGiZa/EDwVLd6mfyCApccBYTlmomKNlRAJFymvv0P8TIRzediHjHRYAMgBK9Y+EkxygUpBybHPTdr2TBADT0Z06K/ek9UUvKFpk9Usia+eCrsNgMBgMBkM5+ADkCHptw04GlAAAAABJRU5ErkJggg==',
+    },
 };
 var StyledImage = (0, native_1.default)(react_native_1.Image)();
 var StyledImageBackground = (0, native_1.default)(react_native_1.ImageBackground)();

package/dist/preview/components/StoryListView/StoryListView.js

@@ -42,15 +42,17 @@ var addons_1 = require("@storybook/addons");
 var core_events_1 = __importDefault(require("@storybook/core-events"));
 var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
+var hooks_1 = require("../../../hooks");
 var icons_1 = require("../Shared/icons");
 var layout_1 = require("../Shared/layout");
-var hooks_1 = require("../../../hooks");
+var getNestedStories_1 = require("./getNestedStories");
 var SectionHeaderText = native_1.default.Text(function (_a) {
     var theme = _a.theme;
     return ({
         fontSize: theme.storyList.fontSize,
         color: theme.storyList.headerTextColor,
         fontWeight: theme.storyList.headerFontWeight,
+        flexShrink: 1,
     });
 });
 var StoryNameText = native_1.default.Text(function (_a) {
@@ -94,7 +96,7 @@ var HeaderContainer = native_1.default.TouchableOpacity({
     flexDirection: 'row',
     alignItems: 'center',
 }, function (_a) {
-    var selected = _a.selected, theme = _a.theme;
+    var selected = _a.selected, theme = _a.theme, childSelected = _a.childSelected;
     return ({
         marginTop: theme.storyList.sectionSpacing,
         paddingHorizontal: theme.storyList.headerPaddingHorizontal,
@@ -102,14 +104,23 @@ var HeaderContainer = native_1.default.TouchableOpacity({
         backgroundColor: selected ? theme.storyList.sectionActiveBackgroundColor : undefined,
         borderTopLeftRadius: theme.storyList.sectionBorderRadius,
         borderTopRightRadius: theme.storyList.sectionBorderRadius,
+        borderBottomLeftRadius: selected && !childSelected ? theme.storyList.sectionBorderRadius : undefined,
+        borderBottomRightRadius: selected && !childSelected ? theme.storyList.sectionBorderRadius : undefined,
     });
 });
 var SectionHeader = react_1.default.memo(function (_a) {
-    var title = _a.title, onPress = _a.onPress;
-    var selected = (0, hooks_1.useIsStorySectionSelected)(title);
-    return (react_1.default.createElement(HeaderContainer, { key: title, selected: selected, onPress: onPress, activeOpacity: 0.8 },
-        react_1.default.createElement(icons_1.Icon, { name: "grid", width: 12, height: 12, marginRight: 6 }),
-        react_1.default.createElement(SectionHeaderText, { selected: selected }, title)));
+    var name = _a.name, onPress = _a.onPress, isChildSelected = _a.isChildSelected, _b = _a.icon, icon = _b === void 0 ? 'grid' : _b, expanded = _a.expanded;
+    var selected = (0, hooks_1.useIsStorySectionSelected)(name) || isChildSelected;
+    return (react_1.default.createElement(HeaderContainer, { key: name, selected: selected, childSelected: isChildSelected, onPress: onPress, activeOpacity: 0.8 },
+        react_1.default.createElement(react_native_1.View, { style: {
+                transform: [{ rotate: expanded ? '90deg' : '0deg' }],
+                marginRight: 6,
+                alignItems: 'center',
+                justifyContent: 'center',
+            } },
+            react_1.default.createElement(react_native_1.Text, { style: { fontSize: 8, color: 'grey', lineHeight: 8 } }, '➤')),
+        react_1.default.createElement(icons_1.Icon, { name: icon, width: 12, height: 12, marginRight: 6 }),
+        react_1.default.createElement(SectionHeaderText, { numberOfLines: 2, selected: selected }, name)));
 });
 var ItemTouchable = native_1.default.TouchableOpacity({
     flexDirection: 'row',
@@ -128,38 +139,50 @@ var ItemTouchable = native_1.default.TouchableOpacity({
         borderBottomRightRadius: isLastItem ? theme.storyList.sectionBorderRadius : undefined,
     });
 });
-var ListItem = react_1.default.memo(function (_a) {
-    var storyId = _a.storyId, kind = _a.kind, title = _a.title, isLastItem = _a.isLastItem, onPress = _a.onPress;
+var ListItem = function (_a) {
+    var storyId = _a.storyId, kind = _a.kind, title = _a.title, isLastItem = _a.isLastItem, onPress = _a.onPress, isSiblingSelected = _a.isSiblingSelected;
     var selected = (0, hooks_1.useIsStorySelected)(storyId);
-    var sectionSelected = (0, hooks_1.useIsStorySectionSelected)(kind);
+    var sectionSelected = (0, hooks_1.useIsStorySectionSelected)(kind) || isSiblingSelected;
     return (react_1.default.createElement(ItemTouchable, { key: title, onPress: onPress, activeOpacity: 0.8, testID: "Storybook.ListItem.".concat(kind, ".").concat(title), accessibilityLabel: "Storybook.ListItem.".concat(title), selected: selected, sectionSelected: sectionSelected, isLastItem: isLastItem },
         react_1.default.createElement(icons_1.Icon, { width: 14, height: 14, name: selected ? 'story-white' : 'story-blue', marginRight: 6 }),
         react_1.default.createElement(StoryNameText, { selected: selected }, title)));
-}, function (prevProps, nextProps) { return prevProps.storyId === nextProps.storyId; });
-var getStories = function (storyIndex) {
-    if (!storyIndex) {
-        return [];
-    }
-    var groupedStories = Object.values(storyIndex.stories).reduce(function (acc, story) {
-        var _a, _b;
-        acc[story.title] = {
-            title: story.title,
-            data: ((_b = (_a = acc[story.title]) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : []).concat(story),
-        };
-        return acc;
-    }, {});
-    return Object.values(groupedStories);
 };
 var styles = react_native_1.StyleSheet.create({
     sectionList: { flex: 1 },
     sectionListContentContainer: { paddingBottom: 6 },
 });
 function keyExtractor(item, index) {
-    return item.id + index;
+    return item.name + index;
 }
+var RenderItem = function (_a) {
+    var _b, _c;
+    var item = _a.item, changeStory = _a.changeStory;
+    var isChildSelected = (0, hooks_1.useIsChildSelected)(item.stories);
+    var firstChild = (0, getNestedStories_1.findFirstChildStory)(item);
+    var firstChildSelected = (0, hooks_1.useIsStorySelected)(firstChild === null || firstChild === void 0 ? void 0 : firstChild.id);
+    var _d = (0, react_1.useState)(false), showChildren = _d[0], setShowChildren = _d[1];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(SectionHeader, { name: item.name, isChildSelected: isChildSelected, onPress: function () {
+                if (firstChildSelected && showChildren) {
+                    setShowChildren(false);
+                }
+                else if (!showChildren && firstChild) {
+                    setShowChildren(true);
+                    changeStory(firstChild.id);
+                }
+                else if (showChildren && !firstChildSelected && firstChild) {
+                    changeStory(firstChild.id);
+                }
+            }, icon: item.children.length ? 'folder' : 'grid', expanded: showChildren }),
+        showChildren &&
+            ((_b = item.stories) === null || _b === void 0 ? void 0 : _b.map(function (story, idx) { return (react_1.default.createElement(ListItem, { key: story.id, storyId: story.id, title: story.name, kind: item.name, isSiblingSelected: isChildSelected, isLastItem: idx === item.stories.length - 1, onPress: function () { return changeStory(story.id); } })); })),
+        showChildren &&
+            ((_c = item.children) === null || _c === void 0 ? void 0 : _c.map(function (child, idx) { return (react_1.default.createElement(react_native_1.View, { key: "".concat(child.title, "-").concat(idx), style: { marginLeft: 16 } },
+                react_1.default.createElement(RenderItem, { item: child, changeStory: changeStory }))); }))));
+};
 var StoryListView = function (_a) {
     var storyIndex = _a.storyIndex;
-    var originalData = (0, react_1.useMemo)(function () { return getStories(storyIndex); }, [storyIndex]);
+    var originalData = (0, react_1.useMemo)(function () { return (0, getNestedStories_1.getNestedStories)(storyIndex); }, [storyIndex]);
     var _b = (0, react_1.useState)(originalData), data = _b[0], setData = _b[1];
     var theme = (0, hooks_1.useTheme)();
     var handleChangeSearchText = function (text) {
@@ -168,39 +191,24 @@ var StoryListView = function (_a) {
             setData(originalData);
             return;
         }
-        var checkValue = function (value) { return value.toLowerCase().includes(query.toLowerCase()); };
-        var filteredData = originalData.reduce(function (acc, story) {
-            var hasTitle = checkValue(story.title);
-            var hasKind = story.data.some(function (ref) { return checkValue(ref.name); });
-            if (hasTitle || hasKind) {
-                acc.push(__assign(__assign({}, story), { 
-                    // in case the query matches component's title, all of its stories will be shown
-                    data: !hasTitle ? story.data.filter(function (ref) { return checkValue(ref.name); }) : story.data }));
-            }
-            return acc;
-        }, []);
-        setData(filteredData);
+        setData((0, getNestedStories_1.filterNestedStories)(originalData, query));
     };
     var changeStory = function (storyId) {
         var channel = addons_1.addons.getChannel();
         channel.emit(core_events_1.default.SET_CURRENT_STORY, { storyId: storyId });
     };
     var renderItem = react_1.default.useCallback(function (_a) {
-        var item = _a.item, index = _a.index, section = _a.section;
-        return (react_1.default.createElement(ListItem, { storyId: item.id, title: item.name, kind: item.title, isLastItem: index === section.data.length - 1, onPress: function () { return changeStory(item.id); } }));
-    }, []);
-    var renderSectionHeader = react_1.default.useCallback(function (_a) {
-        var _b = _a.section, title = _b.title, sectionData = _b.data;
-        return (react_1.default.createElement(SectionHeader, { title: title, onPress: function () { return changeStory(sectionData[0].id); } }));
+        var item = _a.item;
+        return react_1.default.createElement(RenderItem, { item: item, changeStory: changeStory });
     }, []);
     return (react_1.default.createElement(layout_1.Box, { flex: true },
         react_1.default.createElement(SearchBar, { testID: "Storybook.ListView.SearchBar", onChangeText: handleChangeSearchText, placeholder: "Find by name" }),
-        react_1.default.createElement(react_native_1.SectionList, { style: styles.sectionList, contentContainerStyle: [
+        react_1.default.createElement(react_native_1.FlatList, { style: styles.sectionList, contentContainerStyle: [
                 styles.sectionListContentContainer,
                 {
                     paddingVertical: theme.panel.paddingVertical,
                     paddingHorizontal: theme.panel.paddingHorizontal,
                 },
-            ], testID: "Storybook.ListView", renderItem: renderItem, renderSectionHeader: renderSectionHeader, keyExtractor: keyExtractor, sections: data, stickySectionHeadersEnabled: false })));
+            ], testID: "Storybook.ListView", renderItem: renderItem, keyExtractor: keyExtractor, data: data })));
 };
 exports.default = react_1.default.memo(StoryListView);

package/dist/preview/components/StoryListView/getNestedStories.d.ts

@@ -0,0 +1,10 @@
+import { StoryIndex, StoryIndexEntry } from '@storybook/client-api';
+export interface StoryGroup {
+    name: string;
+    title: string;
+    children: StoryGroup[];
+    stories: StoryIndexEntry[];
+}
+export declare function getNestedStories(storyIndex: StoryIndex): StoryGroup[];
+export declare const filterNestedStories: (stories: StoryGroup[], filter: string) => StoryGroup[];
+export declare const findFirstChildStory: (story: StoryGroup) => StoryIndexEntry | undefined;

package/dist/preview/components/StoryListView/getNestedStories.js

@@ -0,0 +1,95 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findFirstChildStory = exports.filterNestedStories = exports.getNestedStories = void 0;
+// recursive funciton that transforms storyIndex to be StoryGroup[]
+function getNestedStories(storyIndex) {
+    var stories = Object.values(storyIndex.stories);
+    var group = [];
+    stories.forEach(function (story) {
+        var nameParts = story.title.split('/');
+        formGroup(nameParts, story, group);
+    });
+    return group;
+}
+exports.getNestedStories = getNestedStories;
+function formGroup(nameParts, story, group) {
+    if (nameParts.length === 1) {
+        var current = group.find(function (_a) {
+            var name = _a.name;
+            return name === nameParts[0];
+        });
+        if (current) {
+            current.stories.push(story);
+        }
+        else {
+            group.push({
+                title: story.title,
+                name: nameParts[0],
+                children: [],
+                stories: [story],
+            });
+        }
+        return;
+    }
+    var newParts = nameParts.slice(1);
+    var currentListPart = group.find(function (_a) {
+        var name = _a.name;
+        return name === nameParts[0];
+    });
+    if (!currentListPart) {
+        var toPush = {
+            name: nameParts[0],
+            title: story.title,
+            children: [],
+            stories: [],
+        };
+        group.push(toPush);
+        return formGroup(newParts, story, toPush.children);
+    }
+    else if (!currentListPart.children) {
+        currentListPart.children = [];
+    }
+    var newGroup = currentListPart.children;
+    return formGroup(newParts, story, newGroup);
+}
+var filterNestedStories = function (stories, filter) {
+    var filteredStories = [];
+    stories.forEach(function (story) {
+        var filtered = filterStoryGroup(story, filter);
+        if (filtered) {
+            filteredStories.push(filtered);
+        }
+    });
+    return filteredStories;
+};
+exports.filterNestedStories = filterNestedStories;
+var filterStoryGroup = function (story, filter) {
+    var filteredStories = story.stories.filter(function (item) {
+        return item.title.toLowerCase().includes(filter.toLowerCase()) ||
+            item.name.toLowerCase().includes(filter.toLowerCase());
+    });
+    var filteredChildren = (0, exports.filterNestedStories)(story.children, filter);
+    if (filteredStories.length || filteredChildren.length) {
+        return __assign(__assign({}, story), { children: filteredChildren, stories: filteredStories });
+    }
+};
+var findFirstChildStory = function (story) {
+    if (story.stories.length) {
+        return story.stories[0];
+    }
+    if (story.children.length) {
+        return (0, exports.findFirstChildStory)(story.children[0]);
+    }
+};
+exports.findFirstChildStory = findFirstChildStory;

package/dist/preview/components/StoryListView/getNestedStories.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/preview/components/StoryListView/getNestedStories.test.js

@@ -0,0 +1,237 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var getNestedStories_1 = require("./getNestedStories");
+var storyIndex = {
+    stories: {
+        'chat-message--message-first': {
+            id: 'chat-message--message-first',
+            importPath: './components/NestingExample/ChatMessage.stories.tsx',
+            name: 'Message First',
+            title: 'Chat/Message',
+        },
+        'chat-message--message-second': {
+            id: 'chat-message--message-second',
+            importPath: './components/NestingExample/ChatMessage.stories.tsx',
+            name: 'Message Second',
+            title: 'Chat/Message',
+        },
+        'chat-message-bubble--first': {
+            id: 'chat-message-bubble--first',
+            importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+            name: 'First',
+            title: 'Chat/Message/bubble',
+        },
+        'chat-message-bubble--second': {
+            id: 'chat-message-bubble--second',
+            importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+            name: 'Second Story',
+            title: 'Chat/Message/bubble',
+        },
+        'chat-message-reactions--message-one': {
+            id: 'chat-message-reactions--message-one',
+            importPath: './components/NestingExample/ChatMessageReactions.stories.tsx',
+            name: 'Message One',
+            title: 'Chat/Message/Reactions',
+        },
+        'chat-message-reactions--message-two': {
+            id: 'chat-message-reactions--message-two',
+            importPath: './components/NestingExample/ChatMessageReactions.stories.tsx',
+            name: 'Message Two',
+            title: 'Chat/Message/Reactions',
+        },
+        'chat-messageinput--basic': {
+            id: 'chat-messageinput--basic',
+            importPath: './components/NestingExample/ChatMessageMessageInput.stories.tsx',
+            name: 'Basic',
+            title: 'Chat/MessageInput',
+        },
+        'storylistview--basic': {
+            id: 'storylistview--basic',
+            importPath: './components/NestingExample/StoryList.stories.tsx',
+            name: 'Basic',
+            title: 'StoryListView',
+        },
+        'text-control--basic': {
+            id: 'text-control--basic',
+            importPath: './components/ControlExamples/Text/Text.stories.tsx',
+            name: 'Basic',
+            title: 'Text control',
+        },
+    },
+    v: 3,
+};
+var output = [
+    {
+        name: 'Chat',
+        title: 'Chat/Message',
+        stories: [],
+        children: [
+            {
+                name: 'Message',
+                title: 'Chat/Message',
+                stories: [
+                    {
+                        name: 'Message First',
+                        title: 'Chat/Message',
+                        id: 'chat-message--message-first',
+                        importPath: './components/NestingExample/ChatMessage.stories.tsx',
+                    },
+                    {
+                        name: 'Message Second',
+                        title: 'Chat/Message',
+                        id: 'chat-message--message-second',
+                        importPath: './components/NestingExample/ChatMessage.stories.tsx',
+                    },
+                ],
+                children: [
+                    {
+                        name: 'bubble',
+                        children: [],
+                        title: 'Chat/Message/bubble',
+                        stories: [
+                            {
+                                name: 'First',
+                                title: 'Chat/Message/bubble',
+                                id: 'chat-message-bubble--first',
+                                importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+                            },
+                            {
+                                name: 'Second Story',
+                                title: 'Chat/Message/bubble',
+                                id: 'chat-message-bubble--second',
+                                importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+                            },
+                        ],
+                    },
+                    {
+                        name: 'Reactions',
+                        title: 'Chat/Message/Reactions',
+                        children: [],
+                        stories: [
+                            {
+                                name: 'Message One',
+                                title: 'Chat/Message/Reactions',
+                                id: 'chat-message-reactions--message-one',
+                                importPath: './components/NestingExample/ChatMessageReactions.stories.tsx',
+                            },
+                            {
+                                name: 'Message Two',
+                                title: 'Chat/Message/Reactions',
+                                id: 'chat-message-reactions--message-two',
+                                importPath: './components/NestingExample/ChatMessageReactions.stories.tsx',
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                name: 'MessageInput',
+                title: 'Chat/MessageInput',
+                children: [],
+                stories: [
+                    {
+                        name: 'Basic',
+                        title: 'Chat/MessageInput',
+                        id: 'chat-messageinput--basic',
+                        importPath: './components/NestingExample/ChatMessageMessageInput.stories.tsx',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        name: 'StoryListView',
+        title: 'StoryListView',
+        stories: [
+            {
+                name: 'Basic',
+                title: 'StoryListView',
+                id: 'storylistview--basic',
+                importPath: './components/NestingExample/StoryList.stories.tsx',
+            },
+        ],
+        children: [],
+    },
+    {
+        title: 'Text control',
+        name: 'Text control',
+        stories: [
+            {
+                name: 'Basic',
+                title: 'Text control',
+                id: 'text-control--basic',
+                importPath: './components/ControlExamples/Text/Text.stories.tsx',
+            },
+        ],
+        children: [],
+    },
+];
+test('story index to grouped list', function () {
+    expect((0, getNestedStories_1.getNestedStories)(storyIndex)).toEqual(output);
+});
+test('filter nested stories', function () {
+    expect((0, getNestedStories_1.filterNestedStories)(output, 'bubble')).toEqual([
+        {
+            title: 'Chat/Message',
+            name: 'Chat',
+            stories: [],
+            children: [
+                {
+                    title: 'Chat/Message',
+                    name: 'Message',
+                    stories: [],
+                    children: [
+                        {
+                            title: 'Chat/Message/bubble',
+                            name: 'bubble',
+                            children: [],
+                            stories: [
+                                {
+                                    name: 'First',
+                                    title: 'Chat/Message/bubble',
+                                    id: 'chat-message-bubble--first',
+                                    importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+                                },
+                                {
+                                    name: 'Second Story',
+                                    title: 'Chat/Message/bubble',
+                                    id: 'chat-message-bubble--second',
+                                    importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+    ]);
+    expect((0, getNestedStories_1.filterNestedStories)(output, 'one')).toEqual([
+        {
+            name: 'Chat',
+            title: 'Chat/Message',
+            stories: [],
+            children: [
+                {
+                    title: 'Chat/Message',
+                    name: 'Message',
+                    stories: [],
+                    children: [
+                        {
+                            name: 'Reactions',
+                            title: 'Chat/Message/Reactions',
+                            children: [],
+                            stories: [
+                                {
+                                    name: 'Message One',
+                                    title: 'Chat/Message/Reactions',
+                                    id: 'chat-message-reactions--message-one',
+                                    importPath: './components/NestingExample/ChatMessageReactions.stories.tsx',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+    ]);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.5.4",
+  "version": "6.5.5-alpha.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -38,6 +38,9 @@
     "test": "jest"
   },
   "jest": {
+    "modulePathIgnorePatterns": [
+      "dist/"
+    ],
     "moduleFileExtensions": [
       "ts",
       "tsx",
@@ -71,6 +74,7 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
+    "@types/jest": "^29.4.3",
     "@types/react": "~18.0.27",
     "babel-jest": "^29.4.3",
     "jest": "^29.4.3",
@@ -88,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e0c6fd72976b228d0f97aceb69967cd707fad8ff"
+  "gitHead": "b6ca000322c9993cd35158957a7cbc1c5207481a"
 }