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

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Image, ImageBackground, ImageBackgroundProps, ImageStyle } from 'react-native';
 declare const iconSources: {
     grid: {
         uri: string;
@@ -24,12 +25,29 @@ declare const iconSources: {
     'layout-split-inverse': {
         uri: string;
     };
+    folder: {
+        uri: string;
+    };
 };
 export type IconName = keyof typeof iconSources;
-declare const StyledImage: any;
-interface IconProps extends React.ComponentProps<typeof StyledImage> {
+declare const StyledImage: import("@emotion/native").StyledComponent<import("react-native").ImageProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & ImageStyle & ImageBackgroundProps, {}, {
+    ref?: React.Ref<Image>;
+}>;
+declare const StyledImageBackground: import("@emotion/native").StyledComponent<ImageBackgroundProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & ImageStyle, {}, {
+    ref?: React.Ref<ImageBackground>;
+}>;
+interface IconProps extends Omit<React.ComponentProps<typeof StyledImage>, 'source'> {
+    name: IconName;
+}
+export declare function Icon({ name, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+interface BackgroungIconProps extends Omit<React.ComponentProps<typeof StyledImageBackground>, 'source'> {
     name: IconName;
-    background?: boolean;
 }
-export declare function Icon({ name, background, ...props }: IconProps): JSX.Element;
+export declare function BackgroundIcon({ name, ...props }: BackgroungIconProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -25,8 +25,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Icon = void 0;
-var react_1 = __importDefault(require("react"));
+exports.BackgroundIcon = exports.Icon = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_native_1 = require("react-native");
 var native_1 = __importDefault(require("@emotion/native"));
 var iconSources = {
@@ -54,12 +54,19 @@ 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)();
 function Icon(_a) {
-    var name = _a.name, _b = _a.background, background = _b === void 0 ? false : _b, props = __rest(_a, ["name", "background"]);
-    var IconComponent = background ? StyledImageBackground : StyledImage;
-    return (react_1.default.createElement(IconComponent, __assign({ source: __assign(__assign({}, iconSources[name]), { width: 16, height: 16 }) }, props)));
+    var name = _a.name, props = __rest(_a, ["name"]);
+    return ((0, jsx_runtime_1.jsx)(StyledImage, __assign({ source: __assign(__assign({}, iconSources[name]), { width: 16, height: 16 }) }, props)));
 }
 exports.Icon = Icon;
+function BackgroundIcon(_a) {
+    var name = _a.name, props = __rest(_a, ["name"]);
+    return ((0, jsx_runtime_1.jsx)(StyledImageBackground, __assign({ source: __assign(__assign({}, iconSources[name]), { width: 16, height: 16 }) }, props)));
+}
+exports.BackgroundIcon = BackgroundIcon;

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

@@ -1,3 +1,11 @@
+/// <reference types="react" />
+import { ViewProps, ViewStyle } from 'react-native';
+interface BoxProps extends ViewProps, Omit<ViewStyle, 'flex'> {
+    /**
+     * Flex value, can be `true` to mean the commonly used `flex={1}`.
+     */
+    flex?: boolean | number;
+}
 /**
  * A general (flex)box layout component that accepts props for flexbox layout
  * styles, such as `flex`, `alignItems`, `marginVertical`, etc.
@@ -9,4 +17,10 @@
  * </Box>
  * ```
  */
-export declare const Box: any;
+export declare const Box: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+} & BoxProps, {}, {
+    ref?: import("react").Ref<import("react-native").View>;
+}>;
+export {};

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

@@ -1,26 +1,4 @@
 "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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -39,6 +17,8 @@ var native_1 = __importDefault(require("@emotion/native"));
  * ```
  */
 exports.Box = native_1.default.View(function (_a) {
-    var flex = _a.flex, layoutProps = __rest(_a, ["flex"]);
-    return (__assign({ flex: flex === true ? 1 : flex === false ? 0 : flex }, layoutProps));
+    var flex = _a.flex;
+    return ({
+        flex: flex === true ? 1 : flex === false ? 0 : flex,
+    });
 });

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

@@ -7,7 +7,7 @@ interface TabButtonProps {
     testID?: string;
     children: React.ReactNode;
 }
-export declare const TabButton: React.MemoExoticComponent<({ onPress, id, active, children, testID }: TabButtonProps) => JSX.Element>;
+export declare const TabButton: React.MemoExoticComponent<({ onPress, id, active, children, testID }: TabButtonProps) => import("react/jsx-runtime").JSX.Element>;
 interface TabBarProps {
     /**
      * Should the tab bar contents scroll horizontally?
@@ -16,5 +16,5 @@ interface TabBarProps {
     style?: StyleProp<ViewStyle>;
     children: React.ReactNode;
 }
-export declare const TabBar: React.MemoExoticComponent<({ scrollable, style, children }: TabBarProps) => JSX.Element>;
+export declare const TabBar: React.MemoExoticComponent<({ scrollable, style, children }: TabBarProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabBar = exports.TabButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var react_native_1 = require("react-native");
 var native_1 = __importDefault(require("@emotion/native"));
@@ -30,20 +31,18 @@ var TabButtonTouchable = native_1.default.TouchableOpacity(function (_a) {
 });
 exports.TabButton = react_1.default.memo(function (_a) {
     var onPress = _a.onPress, id = _a.id, active = _a.active, children = _a.children, testID = _a.testID;
-    return (react_1.default.createElement(TabButtonTouchable, { active: active, testID: testID, onPress: function () { return onPress(id); }, activeOpacity: 0.8, hitSlop: hitSlop },
-        react_1.default.createElement(TabButtonText, { active: active }, children)));
+    return ((0, jsx_runtime_1.jsx)(TabButtonTouchable, { active: active, testID: testID, onPress: function () { return onPress(id); }, activeOpacity: 0.8, hitSlop: hitSlop, children: (0, jsx_runtime_1.jsx)(TabButtonText, { active: active, children: children }) }));
 });
 exports.TabBar = react_1.default.memo(function (_a) {
     var _b = _a.scrollable, scrollable = _b === void 0 ? false : _b, style = _a.style, children = _a.children;
     var theme = (0, hooks_1.useTheme)();
     if (scrollable) {
-        children = (react_1.default.createElement(react_native_1.ScrollView, { showsHorizontalScrollIndicator: false, horizontal: true, contentContainerStyle: { paddingHorizontal: theme.tokens.spacing2 } }, children));
+        children = ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { showsHorizontalScrollIndicator: false, horizontal: true, contentContainerStyle: { paddingHorizontal: theme.tokens.spacing2 }, children: children }));
     }
-    return (react_1.default.createElement(react_native_1.View, { style: style },
-        react_1.default.createElement(TabBarContainer, null, children)));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: style, children: (0, jsx_runtime_1.jsx)(TabBarContainer, { children: children }) }));
 });
-var TabBarContainer = native_1.default.View({
+var TabBarContainer = native_1.default.View(function () { return ({
     flexDirection: 'row',
     paddingVertical: 6,
     justifyItems: 'center',
-});
+}); });

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

@@ -3,5 +3,5 @@ import React from 'react';
 interface Props {
     storyIndex: StoryIndex;
 }
-declare const _default: React.MemoExoticComponent<({ storyIndex }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ storyIndex }: Props) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

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

@@ -37,20 +37,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
 var native_1 = __importDefault(require("@emotion/native"));
 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) {
@@ -86,15 +89,13 @@ var SearchContainer = native_1.default.View(function (_a) {
 });
 var SearchBar = function (props) {
     var theme = (0, hooks_1.useTheme)();
-    return (react_1.default.createElement(SearchContainer, null,
-        react_1.default.createElement(icons_1.Icon, { name: "search", opacity: 0.5, color: 'white' }),
-        react_1.default.createElement(SearchInput, __assign({}, props, { autoCapitalize: "none", autoComplete: "off", autoCorrect: false, spellCheck: false, clearButtonMode: "while-editing", disableFullscreenUI: true, placeholderTextColor: theme.storyList.search.placeholderTextColor, returnKeyType: "search" }))));
+    return ((0, jsx_runtime_1.jsxs)(SearchContainer, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "search", opacity: 0.5 }), (0, jsx_runtime_1.jsx)(SearchInput, __assign({}, props, { autoCapitalize: "none", autoComplete: "off", autoCorrect: false, spellCheck: false, clearButtonMode: "while-editing", disableFullscreenUI: true, placeholderTextColor: theme.storyList.search.placeholderTextColor, returnKeyType: "search" }))] }));
 };
 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 +103,19 @@ 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 ((0, jsx_runtime_1.jsxs)(HeaderContainer, { selected: selected, childSelected: isChildSelected, onPress: onPress, activeOpacity: 0.8, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                    transform: [{ rotate: expanded ? '90deg' : '0deg' }],
+                    marginRight: 6,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { fontSize: 8, color: 'grey', lineHeight: 8 }, children: '➤' }) }), (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: icon, width: 12, height: 12, marginRight: 6 }), (0, jsx_runtime_1.jsx)(SectionHeaderText, { numberOfLines: 2, selected: selected, children: name })] }, name));
 });
 var ItemTouchable = native_1.default.TouchableOpacity({
     flexDirection: 'row',
@@ -128,38 +134,44 @@ 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);
-    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 sectionSelected = (0, hooks_1.useIsStorySectionSelected)(kind) || isSiblingSelected;
+    return ((0, jsx_runtime_1.jsxs)(ItemTouchable, { onPress: onPress, activeOpacity: 0.8, testID: "Storybook.ListItem.".concat(kind, ".").concat(title), accessibilityLabel: "Storybook.ListItem.".concat(title), selected: selected, sectionSelected: sectionSelected, isLastItem: isLastItem, children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { width: 14, height: 14, name: selected ? 'story-white' : 'story-blue', marginRight: 6 }), (0, jsx_runtime_1.jsx)(StoryNameText, { selected: selected, children: title })] }, title));
 };
 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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(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 ((0, jsx_runtime_1.jsx)(ListItem, { storyId: story.id, title: story.name, kind: item.name, isSiblingSelected: isChildSelected, isLastItem: idx === item.stories.length - 1, onPress: function () { return changeStory(story.id); } }, story.id)); })), showChildren &&
+                ((_c = item.children) === null || _c === void 0 ? void 0 : _c.map(function (child, idx) { return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { marginLeft: 16 }, children: (0, jsx_runtime_1.jsx)(RenderItem, { item: child, changeStory: changeStory }) }, "".concat(child.title, "-").concat(idx))); }))] }));
+};
 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 +180,22 @@ 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 (0, jsx_runtime_1.jsx)(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: [
-                styles.sectionListContentContainer,
-                {
-                    paddingVertical: theme.panel.paddingVertical,
-                    paddingHorizontal: theme.panel.paddingHorizontal,
-                },
-            ], testID: "Storybook.ListView", renderItem: renderItem, renderSectionHeader: renderSectionHeader, keyExtractor: keyExtractor, sections: data, stickySectionHeadersEnabled: false })));
+    return ((0, jsx_runtime_1.jsxs)(layout_1.Box, { flex: true, children: [(0, jsx_runtime_1.jsx)(SearchBar, { testID: "Storybook.ListView.SearchBar", onChangeText: handleChangeSearchText, placeholder: "Find by name" }), (0, jsx_runtime_1.jsx)(react_native_1.FlatList, { style: styles.sectionList, contentContainerStyle: [
+                    styles.sectionListContentContainer,
+                    {
+                        paddingVertical: theme.panel.paddingVertical,
+                        paddingHorizontal: theme.panel.paddingHorizontal,
+                    },
+                ], 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 {};