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

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 = {
@@ -61,8 +61,12 @@ var iconSources = {
 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,6 +37,7 @@ 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"));
@@ -88,9 +89,7 @@ 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',
@@ -111,16 +110,12 @@ var HeaderContainer = native_1.default.TouchableOpacity({
 var SectionHeader = react_1.default.memo(function (_a) {
     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)));
+    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',
@@ -143,9 +138,7 @@ 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) || 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)));
+    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 },
@@ -161,24 +154,20 @@ var RenderItem = function (_a) {
     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 }))); }))));
+    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;
@@ -199,16 +188,14 @@ var StoryListView = function (_a) {
     };
     var renderItem = react_1.default.useCallback(function (_a) {
         var item = _a.item;
-        return react_1.default.createElement(RenderItem, { item: item, changeStory: changeStory });
+        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.FlatList, { style: styles.sectionList, contentContainerStyle: [
-                styles.sectionListContentContainer,
-                {
-                    paddingVertical: theme.panel.paddingVertical,
-                    paddingHorizontal: theme.panel.paddingHorizontal,
-                },
-            ], testID: "Storybook.ListView", renderItem: renderItem, keyExtractor: keyExtractor, data: data })));
+    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/StoryView/StoryView.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+declare const _default: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/preview/components/StoryView/StoryView.js

@@ -14,6 +14,7 @@ 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 react_1 = __importDefault(require("react"));
 var react_native_1 = require("react-native");
 var hooks_1 = require("../../../hooks");
@@ -39,9 +40,8 @@ var StoryView = function () {
     var backgroundColor = (0, hooks_1.useTheme)().backgroundColor;
     if (context && context.unboundStoryFn) {
         var StoryComponent = context.unboundStoryFn;
-        return (react_1.default.createElement(layout_1.Box, { flex: true, key: id, testID: id, onStartShouldSetResponder: dismissOnStartResponder, backgroundColor: backgroundColor }, StoryComponent && react_1.default.createElement(StoryComponent, __assign({}, context))));
+        return ((0, jsx_runtime_1.jsx)(layout_1.Box, { flex: true, testID: id, onStartShouldSetResponder: dismissOnStartResponder, backgroundColor: backgroundColor, children: StoryComponent && (0, jsx_runtime_1.jsx)(StoryComponent, __assign({}, context)) }, id));
     }
-    return (react_1.default.createElement(layout_1.Box, { flex: true, padding: 16, alignItems: "center", justifyContent: "center" },
-        react_1.default.createElement(react_native_1.Text, null, "Please open the sidebar and select a story to preview.")));
+    return ((0, jsx_runtime_1.jsx)(layout_1.Box, { flex: true, padding: 16, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "Please open the sidebar and select a story to preview." }) }));
 };
 exports.default = react_1.default.memo(StoryView);

package/dist/preview/executeLoadable.js

@@ -24,7 +24,10 @@ function executeLoadable(loadable) {
             req.keys().forEach(function (filename) {
                 try {
                     var fileExports = req(filename);
-                    exportsMap.set(typeof req.resolve === 'function' ? req.resolve(filename) : filename, fileExports);
+                    exportsMap.set(
+                    // NOTE context.resolve is not yet implemented for metro
+                    // typeof req.resolve === 'function' ? req.resolve(filename) : filename,
+                    filename, fileExports);
                 }
                 catch (error) {
                     var errorString = error.message && error.stack ? "".concat(error.message, "\n ").concat(error.stack) : error.toString();

package/dist/preview/start.js

@@ -15,12 +15,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.start = exports.render = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var addons_1 = require("@storybook/addons");
 var channels_1 = __importDefault(require("@storybook/channels"));
 var client_api_1 = require("@storybook/client-api");
 var core_events_1 = __importDefault(require("@storybook/core-events"));
 var preview_web_1 = require("@storybook/preview-web");
-var react_1 = __importDefault(require("react"));
 var executeLoadable_1 = require("./executeLoadable");
 var View_1 = require("./View");
 var render = function (args, context) {
@@ -28,7 +28,7 @@ var render = function (args, context) {
     if (!Component) {
         throw new Error("Unable to render story ".concat(id, " as the component annotation is missing from the default export"));
     }
-    return react_1.default.createElement(Component, __assign({}, args));
+    return (0, jsx_runtime_1.jsx)(Component, __assign({}, args));
 };
 exports.render = render;
 function start() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.5.5-alpha.0",
+  "version": "6.5.5",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -52,8 +52,8 @@
     "preset": "react-native"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.20",
-    "@emotion/native": "^10.0.14",
+    "@emotion/native": "^11.11.0",
+    "@emotion/react": "^11.11.1",
     "@storybook/addons": "^6.5.14",
     "@storybook/channel-websocket": "^6.5.14",
     "@storybook/channels": "^6.5.14",
@@ -63,10 +63,10 @@
     "@storybook/core-events": "^6.5.14",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
     "@storybook/preview-web": "^6.5.14",
+    "@storybook/react-native-theming": "^6.5.5",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "deepmerge": "^4.3.0",
-    "emotion-theming": "^10.0.19",
     "glob": "^7.1.7",
     "jotai": "^2.0.2",
     "prettier": "^2.4.1",
@@ -75,10 +75,11 @@
   },
   "devDependencies": {
     "@types/jest": "^29.4.3",
-    "@types/react": "~18.0.27",
+    "@types/react": "~18.2.14",
     "babel-jest": "^29.4.3",
     "jest": "^29.4.3",
-    "react-test-renderer": "18.2.0"
+    "react-test-renderer": "18.2.0",
+    "typescript": "^5.1.3"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=1",
@@ -92,5 +93,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b6ca000322c9993cd35158957a7cbc1c5207481a"
+  "gitHead": "ad15a9640397fbaf3536c1b8469c7b13b70676d8"
 }

package/scripts/__snapshots__/loader.test.js.snap

@@ -41,11 +41,14 @@ import "@storybook/addon-ondevice-actions/register";
       } catch{}
     
 
+         
       const getStories=() => {
-        return {"./scripts/mocks/file-extensions/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
+          return {"./scripts/mocks/file-extensions/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
+    
+      
   "
 `;
 
@@ -90,11 +93,14 @@ import "@storybook/addon-ondevice-actions/register";
       } catch{}
     
 
+         
       const getStories=() => {
-        return {"./scripts/mocks/configuration-objects/components/FakeStory.stories.tsx": require("./components/FakeStory.stories.tsx")};
+          return {"./scripts/mocks/configuration-objects/components/FakeStory.stories.tsx": require("./components/FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
+    
+      
   "
 `;
 
@@ -139,11 +145,14 @@ import "@storybook/addon-ondevice-actions/register";
       } catch{}
     
 
+         
       const getStories=() => {
-        return {"./scripts/mocks/exclude-config-files/include-components/FakeStory.stories.tsx": require("./include-components/FakeStory.stories.tsx")};
+          return {"./scripts/mocks/exclude-config-files/include-components/FakeStory.stories.tsx": require("./include-components/FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
+    
+      
   "
 `;
 
@@ -188,11 +197,14 @@ import "@storybook/addon-ondevice-actions/register";
       } catch{}
     
 
+         
       const getStories=() => {
-        return {"./scripts/mocks/all-config-files/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
+          return {"./scripts/mocks/all-config-files/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
+    
+      
   "
 `;
 
@@ -219,11 +231,14 @@ import "@storybook/addon-ondevice-actions/register";
       } catch{}
     
 
+         
       const getStories=() => {
-        return {"./scripts/mocks/no-preview/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
+          return {"./scripts/mocks/no-preview/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
+    
+      
   "
 `;
 
@@ -243,10 +258,13 @@ exports[`loader writeRequires when there is no story glob or addons writes no st
 
       
 
+         
       const getStories=() => {
-        return {};
+          return {};
       }
 
       configure(getStories, module, false)
+    
+      
   "
 `;

package/scripts/handle-args.js

@@ -8,7 +8,11 @@ function getArguments() {
       'The path to your config folder relative to your project-dir',
       './.storybook'
     )
-    .option('-a, --absolute', 'Use absolute paths for story imports');
+    .option('-a, --absolute', 'Use absolute paths for story imports')
+    .option(
+      '-unstable_useRequireContext, --unstable_useRequireContext',
+      'Use experimental require.context to load stories'
+    );
 
   program.parse();