@storybook/react-native 6.5.4-alpha.0 → 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/dist/preview/start.js

@@ -58,7 +58,7 @@ function start() {
         testing: false,
     };
     var urlStore = {
-        selection: { storyId: '', viewMode: 'story' },
+        selection: null,
         selectionSpecifier: null,
         setQueryParams: function () { },
         setSelection: function (selection) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.5.4-alpha.0",
+  "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": "3ab16a135c9881a69957fd330174b37e8f2bc634"
+  "gitHead": "b6ca000322c9993cd35158957a7cbc1c5207481a"
 }

package/readme.md

@@ -2,19 +2,19 @@
 
 With Storybook for React Native you can design and develop individual React Native components without running your app.
 
-This readme is for the 6.5 version [find the 5.3 readme here](https://github.com/storybookjs/react-native/tree/v5.3.25#readme)
+This readme is for the 6.5 version, [find the 5.3 readme here](https://github.com/storybookjs/react-native/tree/v5.3.25#readme)
 
 For more information about storybook visit: [storybook.js.org](https://storybook.js.org)
 
 > NOTE: `@storybook/react-native` requires atleast 6.5.14, please set other storybook packages (like @storybook/addons) to `^6.5.14` or newer
 
-If you want to help out or are just curious then check out the [project board](https://github.com/orgs/storybookjs/projects/12).
+If you want to help out or are just curious then check out the [project board](https://github.com/orgs/storybookjs/projects/12) to see the open issues related to v6+.
 
 ![picture of storybook](https://user-images.githubusercontent.com/3481514/145904252-92e3dc1e-591f-410f-88a1-b4250f4ba6f2.png)
 
-Pictured is from the template mentioned in [getting started](#getting-started)
+_Pictured is from the template mentioned in [getting started](#getting-started)_
 
-# Table of contents
+## Table of contents
 
 - 🚀 [Getting Started](#getting-started)
 - 📒 [Writing stories](#writing-stories)
@@ -24,11 +24,11 @@ Pictured is from the template mentioned in [getting started](#getting-started)
 - 🤝 [Contributing](#contributing)
 - ✨ [Examples](#examples)
 
-# Getting Started
+## Getting Started
 
-## New project
+### New project
 
-There is some project boilerplate with @storybook/react-native and @storybook/addons-react-native-web both already configured with a simple example.
+There is some project boilerplate with `@storybook/react-native` and `@storybook/addons-react-native-web` both already configured with a simple example.
 
 For expo you can use this [template](https://github.com/dannyhw/expo-template-storybook) with the following command
 
@@ -49,61 +49,96 @@ For react native cli you can use this [template](https://github.com/dannyhw/reac
 npx react-native init MyApp --template react-native-template-storybook
 ```
 
-## Existing project
+### Existing project
 
-Run init to setup your project with all the dependencies and configuration files: 
-
-`npx sb@next init --type react_native`
+Run init to setup your project with all the dependencies and configuration files:
 
+```sh
+npx sb init --type react_native
+```
 
 The only thing left to do is return Storybook's UI in your app entry point (such as `App.js`) like this:
 
 ```jsx
-export {default} from './.storybook'
+export { default } from './.storybook';
 ```
 
 If you want to be able to swap easily between storybook and your app, have a look at this [blog post](https://dev.to/dannyhw/how-to-swap-between-react-native-storybook-and-your-app-p3o)
 
-If you want to add everything yourself check out the the manual guide [here](MANUAL_SETUP.md).
+If you want to add everything yourself check out the the manual guide [here](https://github.com/storybookjs/react-native/blob/next/MANUAL_SETUP.md).
+
+### Additional steps: Update your metro config
+
+We use the sbmodern resolver field in order to resolve the modern version of storybook packages. Doing this removes the polyfills that ship in commonjs modules and fixes multiple long standing issues such as the promises never resolving bug and more (caused by corejs promises polyfill).
+
+**Expo**
+
+First create metro config file if you don't have it yet.
+
+```sh
+npx expo customize metro.config.js
+```
+
+Then add sbmodern to the start of the `resolver.resolverMainFields` list.
+
+```diff
+// metro.config.js
+
+const { getDefaultConfig } = require('expo/metro-config');
+
+--module.exports = getDefaultConfig(__dirname);
+++const defaultConfig = getDefaultConfig(__dirname);
+
+++defaultConfig.resolver.resolverMainFields.unshift('sbmodern');
+
+++module.exports = defaultConfig;
+```
+
+**React native**
 
+```js
+module.exports = {
+  /* existing config */
+  resolver: {
+    resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
+  },
+};
+```
 
-# Writing stories
+## Writing stories
 
 In v6 you can use the CSF syntax that looks like this:
 
 ```jsx
-import {MyButton} from './Button';
+import { MyButton } from './Button';
 
 export default {
   title: 'components/MyButton',
   component: MyButton,
 };
 
-export const Basic = args => (
-  <MyButton {...args} />
-);
+export const Basic = (args) => <MyButton {...args} />;
 
 Basic.args = {
   text: 'Hello World',
   color: 'purple',
 };
-
 ```
 
-You should configure the path to your story files in the main.js config file from the .storybook folder.
+You should configure the path to your story files in the `main.js` config file from the `.storybook` folder.
 
 ```js
+// .storybook/main.js
+
 module.exports = {
-  stories: [
-    '../components/**/*.stories.?(ts|tsx|js|jsx)'
-  ],
-  addons: []
-}
+  stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
+  addons: [],
+};
 ```
 
-## Decorators and Parameters
+### Decorators and Parameters
 
-For stories you can add decorators and parameters on the default export or on a specifc story
+For stories you can add decorators and parameters on the default export or on a specifc story.
 
 ```jsx
 export default {
@@ -111,7 +146,7 @@ export default {
   component: Button,
   decorators: [
     (Story) => (
-      <View style={{ alignItems: "center", justifyContent: "center", flex: 1 }}>
+      <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
         <Story />
       </View>
     ),
@@ -128,39 +163,49 @@ export default {
 };
 ```
 
-For global decorators and parameters you can add them to preview.js inside your .storybook folder.
+For global decorators and parameters, you can add them to `preview.js` inside your `.storybook` folder.
 
 ```jsx
-import {withBackgrounds} from '@storybook/addon-ondevice-backgrounds';
-export const decorators = [withBackgrounds, (Story)=> <View style={{flex: 1, color: 'blue'}}><Story/></View>];
+// .storybook/preview.js
+
+import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
+export const decorators = [
+  withBackgrounds,
+  (Story) => (
+    <View style={{ flex: 1, color: 'blue' }}>
+      <Story />
+    </View>
+  ),
+];
 export const parameters = {
   backgrounds: {
     default: 'plain',
     values: [
-      {name: 'plain', value: 'white'},
-      {name: 'warm', value: 'hotpink'},
-      {name: 'cool', value: 'deepskyblue'},
-    ]
+      { name: 'plain', value: 'white' },
+      { name: 'warm', value: 'hotpink' },
+      { name: 'cool', value: 'deepskyblue' },
+    ],
   },
 };
-
 ```
 
-# Addons
+## Addons
 
 The cli will install some basic addons for you such as controls and actions.
 Ondevice addons are addons that can render with the device ui that you see on the phone.
 
 Currently the addons available are:
 
-- @storybook/addon-ondevice-controls: adjust your components props in realtime
-- @storybook/addon-ondevice-actions: mock onPress calls with actions that will log information in the actions tab
-- @storybook/addon-ondevice-notes: Add some markdown to your stories to help document their usage
-- @storybook/addon-ondevice-backgrounds: change the background of storybook to compare the look of your component against different backgrounds
+- [`@storybook/addon-ondevice-controls`](https://storybook.js.org/addons/@storybook/addon-ondevice-controls): adjust your components props in realtime
+- [`@storybook/addon-ondevice-actions`](https://storybook.js.org/addons/@storybook/addon-ondevice-actions): mock onPress calls with actions that will log information in the actions tab
+- [`@storybook/addon-ondevice-notes`](https://storybook.js.org/addons/@storybook/addon-ondevice-notes): Add some markdown to your stories to help document their usage
+- [`@storybook/addon-ondevice-backgrounds`](https://storybook.js.org/addons/@storybook/addon-ondevice-backgrounds): change the background of storybook to compare the look of your component against different backgrounds
 
-Install each one you want to use and add them to the main.js addons list as follows:
+Install each one you want to use and add them to the `main.js` addons list as follows:
 
 ```js
+// .storybook/main.js
+
 addons: [
   '@storybook/addon-ondevice-notes',
   '@storybook/addon-ondevice-controls',
@@ -169,17 +214,16 @@ addons: [
 ],
 ```
 
-
 ### Using the addons in your story
 
 For details of each ondevice addon you can see the readme:
 
-- [actions](addons/ondevice-actions)
-- [backgrounds](addons/ondevice-backgrounds)
-- [controls](addons/ondevice-controls)
-- [notes](addons/ondevice-notes)
+- [actions](https://github.com/storybookjs/react-native/tree/next/packages/ondevice-actions#readme)
+- [backgrounds](https://github.com/storybookjs/react-native/tree/next/packages/ondevice-backgrounds#readme)
+- [controls](https://github.com/storybookjs/react-native/tree/next/packages/ondevice-controls#readme)
+- [notes](https://github.com/storybookjs/react-native/tree/next/packages/ondevice-notes#readme)
 
-# Hide/Show storybook
+## Hide/Show storybook
 
 Storybook on react native is a normal React Native component that can be used or hidden anywhere in your RN application based on your own logic.
 
@@ -189,17 +233,14 @@ Some have opted to toggle the storybook component by using a custom option in th
 - [Heres an approach for react native cli](https://dev.to/dannyhw/multiple-entry-points-for-react-native-storybook-4dkp)
 - [Heres an article about how you can do it in expo](https://dev.to/dannyhw/how-to-swap-between-react-native-storybook-and-your-app-p3o)
 
-
-
-# getStorybookUI options
-
+## getStorybookUI options
 
 You can pass these parameters to getStorybookUI call in your storybook entry point:
 
 ```
 {
     tabOpen: Number (0)
-        -- which tab should be open. -1 SideBar, 0 Canvas, 1 Addons
+        -- which tab should be open. -1 Sidebar, 0 Canvas, 1 Addons
     initialSelection: string | Object (undefined)
         -- initialize storybook with a specific story.  eg: `mybutton--largebutton` or `{ kind: 'MyButton', name: 'LargeButton' }`
     shouldDisableKeyboardAvoidingView: Boolean (false)
@@ -209,7 +250,7 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
 }
 ```
 
-# Contributing
+## Contributing
 
 We welcome contributions to Storybook!
 
@@ -222,11 +263,12 @@ Looking for a first issue to tackle?
 - We tag issues with [Good First Issue](https://github.com/storybookjs/react-native/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) when we think they are well suited for people who are new to the codebase or OSS in general.
 - [Talk to us](https://discord.gg/sMFvFsG), we'll find something to suits your skills and learning interest.
 
-# Examples
+## Examples
 
 Here are some example projects to help you get started
 
 - A mono repo setup by @axeldelafosse https://github.com/axeldelafosse/storybook-rnw-monorepo
 - Expo setup https://github.com/dannyhw/expo-storybook-starter
 - React native cli setup https://github.com/dannyhw/react-native-storybook-starter
+- Adding a separate entry point and dev menu item in native files for RN CLI project: https://github.com/zubko/react-native-storybook-with-dev-menu
 - Want to showcase your own project? open a PR and add it to the list!