@storybook/react-native 6.0.1-beta.7 → 6.0.1-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.0.1-beta.7",
+  "version": "6.0.1-canary.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -49,14 +49,15 @@
   "dependencies": {
     "@emotion/core": "^10.0.20",
     "@emotion/native": "^10.0.14",
-    "@storybook/addons": "~6.3",
-    "@storybook/channel-websocket": "~6.3",
-    "@storybook/channels": "~6.3",
-    "@storybook/client-api": "~6.3",
-    "@storybook/client-logger": "~6.3",
-    "@storybook/core-client": "~6.3",
-    "@storybook/core-events": "~6.3",
-    "@storybook/csf": "0.0.1",
+    "@storybook/addons": "^6.5",
+    "@storybook/channel-websocket": "^6.5",
+    "@storybook/channels": "^6.5",
+    "@storybook/client-api": "^6.5",
+    "@storybook/client-logger": "^6.5",
+    "@storybook/core-client": "^6.5",
+    "@storybook/core-events": "^6.5",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
+    "@storybook/preview-web": "^6.5",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "emotion-theming": "^10.0.19",
@@ -66,15 +67,17 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "@types/react-native": "^0.66.15",
+    "@types/react": "^18.0.21",
+    "@types/react-native": "^0.70.4",
     "babel-jest": "^26.6.3",
     "jest": "^26.6.3",
-    "react-test-renderer": "17.0.2"
+    "react-test-renderer": "18.2.0"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=1",
     "react": "*",
-    "react-native": ">=0.57.0"
+    "react-native": ">=0.57.0",
+    "react-native-safe-area-context": "*"
   },
   "engines": {
     "node": ">=8.0.0"
@@ -82,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8eb7ea7834e59194bc72376725af56960ffffcaf"
+  "gitHead": "2aa26caa5afbee685a7a9eb673ef0afd9b3ad857"
 }

package/scripts/loader.js

@@ -43,8 +43,17 @@ function getMain({ configPath }) {
 }
 
 function getPreviewExists({ configPath }) {
-  const previewPath = path.resolve(cwd, configPath, 'preview.js');
-  return fs.existsSync(previewPath);
+  const supportedExtensions = ['js', 'jsx', 'ts', 'tsx'];
+
+  for (const ext of supportedExtensions) {
+    const previewPath = path.resolve(cwd, configPath, `preview.${ext}`);
+
+    if (fs.existsSync(previewPath)) {
+      return true;
+    }
+  }
+
+  return false;
 }
 
 function writeRequires({ configPath, absolute = false }) {

package/scripts/loader.test.js

@@ -1,6 +1,5 @@
 const path = require('path');
 const { writeRequires, getMain, getPreviewExists } = require('./loader');
-const glob = require('glob');
 
 let pathMock;
 let fileContentMock;
@@ -50,21 +49,34 @@ describe('loader', () => {
   });
 
   describe('getPreviewExists', () => {
+    const supportedExtensions = ['js', 'jsx', 'ts', 'tsx'];
     describe('when using a relative path', () => {
       it('should return true if the preview exists', () => {
-        expect(getPreviewExists({ configPath: 'scripts/mocks/all-config-files' })).toBe(true);
+        supportedExtensions.forEach((ext) => {
+          expect(getPreviewExists({ configPath: `scripts/mocks/preview-files/${ext}` })).toBe(true);
+        });
       });
 
       it('should return false if the preview does not exist', () => {
         expect(getPreviewExists({ configPath: './scripts/mocks/no-preview' })).toBe(false);
       });
+
+      it('should return false if the preview does not match any of supportedExtensions values', () => {
+        expect(getPreviewExists({ configPath: './scripts/mocks/wrong-extension-preview' })).toBe(
+          false
+        );
+      });
     });
 
     describe('when using an absolute path', () => {
       it('should return true if the preview exists', () => {
-        expect(
-          getPreviewExists({ configPath: path.resolve(__dirname, 'mocks/all-config-files') })
-        ).toBe(true);
+        supportedExtensions.forEach((ext) => {
+          expect(
+            getPreviewExists({
+              configPath: path.resolve(__dirname, `mocks/preview-files/${ext}`),
+            })
+          ).toBe(true);
+        });
       });
 
       it('should return false if the preview does not exist', () => {
@@ -72,6 +84,12 @@ describe('loader', () => {
           false
         );
       });
+
+      it('should return false if the preview does not match any of supportedExtensions values', () => {
+        expect(
+          getPreviewExists({ configPath: path.resolve(__dirname, 'mocks/wrong-extension-preview') })
+        ).toBe(false);
+      });
     });
   });
 

package/scripts/mocks/preview-files/js/preview.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
+
+export const decorators = [
+  (StoryFn) => (
+    <View style={styles.container}>
+      <StoryFn />
+    </View>
+  ),
+  withBackgrounds,
+];
+export const parameters = {
+  my_param: 'anything',
+  backgrounds: [
+    { name: 'plain', value: 'white', default: true },
+    { name: 'warm', value: 'hotpink' },
+    { name: 'cool', value: 'deepskyblue' },
+  ],
+};
+
+const styles = StyleSheet.create({
+  container: { padding: 8, flex: 1 },
+});

package/scripts/mocks/preview-files/jsx/preview.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
+
+export const decorators = [
+  (StoryFn) => (
+    <View style={styles.container}>
+      <StoryFn />
+    </View>
+  ),
+  withBackgrounds,
+];
+export const parameters = {
+  my_param: 'anything',
+  backgrounds: [
+    { name: 'plain', value: 'white', default: true },
+    { name: 'warm', value: 'hotpink' },
+    { name: 'cool', value: 'deepskyblue' },
+  ],
+};
+
+const styles = StyleSheet.create({
+  container: { padding: 8, flex: 1 },
+});

package/scripts/mocks/preview-files/ts/preview.ts

@@ -0,0 +1,9 @@
+export const decorators: any = [];
+export const parameters = {
+  my_param: 'anything',
+  backgrounds: [
+    { name: 'plain', value: 'white', default: true },
+    { name: 'warm', value: 'hotpink' },
+    { name: 'cool', value: 'deepskyblue' },
+  ],
+};

package/scripts/mocks/preview-files/tsx/preview.tsx

@@ -0,0 +1,9 @@
+export const decorators: any = [];
+export const parameters = {
+    my_param: 'anything',
+    backgrounds: [
+        { name: 'plain', value: 'white', default: true },
+        { name: 'warm', value: 'hotpink' },
+        { name: 'cool', value: 'deepskyblue' },
+    ],
+};

package/scripts/mocks/wrong-extension-preview/FakeComponent.tsx

@@ -0,0 +1 @@
+export const FakeComponent = () => null;

package/scripts/mocks/wrong-extension-preview/FakeStory.stories.tsx

@@ -0,0 +1,10 @@
+import { FakeComponent } from './FakeComponent';
+
+export default {
+  title: 'components/FakeComponent',
+  component: FakeComponent,
+};
+
+export const Basic = {
+  args: {},
+};

package/scripts/mocks/wrong-extension-preview/main.js

@@ -0,0 +1,9 @@
+module.exports = {
+  stories: ['./FakeStory.stories.tsx'],
+  addons: [
+    '@storybook/addon-ondevice-notes',
+    '@storybook/addon-ondevice-controls',
+    '@storybook/addon-ondevice-backgrounds',
+    '@storybook/addon-ondevice-actions',
+  ],
+};

package/scripts/mocks/wrong-extension-preview/preview.txt

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
+
+export const decorators = [
+  (StoryFn) => (
+    <View style={styles.container}>
+      <StoryFn />
+    </View>
+  ),
+  withBackgrounds,
+];
+export const parameters = {
+  my_param: 'anything',
+  backgrounds: [
+    { name: 'plain', value: 'white', default: true },
+    { name: 'warm', value: 'hotpink' },
+    { name: 'cool', value: 'deepskyblue' },
+  ],
+};
+
+const styles = StyleSheet.create({
+  container: { padding: 8, flex: 1 },
+});

package/dist/preview/Preview.d.ts

@@ -1,57 +0,0 @@
-/// <reference types="webpack-env" />
-/// <reference types="node" />
-import Channel from '@storybook/channels';
-import { ClientApi, ConfigApi, StoryStore } from '@storybook/client-api';
-import { Loadable } from '@storybook/core-client';
-import { theme } from './components/Shared/theme';
-declare type StoryKind = string;
-declare type StoryName = string;
-declare type InitialSelection = `${StoryKind}--${StoryName}` | {
-    /**
-     * Kind is the default export name or the storiesOf("name") name
-     */
-    kind: StoryKind;
-    /**
-     * Name is the named export or the .add("name") name
-     */
-    name: StoryName;
-};
-export declare type Params = {
-    onDeviceUI?: boolean;
-    resetStorybook?: boolean;
-    disableWebsockets?: boolean;
-    query?: string;
-    host?: string;
-    port?: number;
-    secured?: boolean;
-    initialSelection?: InitialSelection;
-    shouldPersistSelection?: boolean;
-    tabOpen?: number;
-    isUIHidden?: boolean;
-    shouldDisableKeyboardAvoidingView?: boolean;
-    keyboardAvoidingViewVerticalOffset?: number;
-} & {
-    theme?: typeof theme;
-};
-export default class Preview {
-    _clientApi: ClientApi;
-    _storyStore: StoryStore;
-    _addons: any;
-    _channel: Channel;
-    _decorators: any[];
-    _asyncStorageStoryId: string;
-    _configApi: ConfigApi;
-    configure: (loadable: Loadable, m: NodeModule, showDeprecationWarning: boolean) => void;
-    constructor();
-    api: () => ClientApi;
-    getStorybookUI: (params?: Partial<Params>) => () => JSX.Element;
-    _setInitialStory: (initialSelection?: InitialSelection, shouldPersistSelection?: boolean) => Promise<void>;
-    _getInitialStory: (initialSelection?: InitialSelection, shouldPersistSelection?: boolean) => Promise<import("@storybook/client-api").PublishedStoreItem>;
-    _getStory(storyId: string): import("@storybook/client-api").PublishedStoreItem;
-    _selectStoryEvent({ storyId }: {
-        storyId: string;
-    }, shouldPersistSelection: any): void;
-    _selectStory(story: any): void;
-    _checkStory(storyId: string): import("@storybook/client-api").PublishedStoreItem;
-}
-export {};

package/dist/preview/Preview.js

@@ -1,119 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { addons } from '@storybook/addons';
-import Channel from '@storybook/channels';
-import { ClientApi, ConfigApi, StoryStore } from '@storybook/client-api';
-import Events from '@storybook/core-events';
-import { toId } from '@storybook/csf';
-import { ThemeProvider } from 'emotion-theming';
-import React from 'react';
-import OnDeviceUI from './components/OnDeviceUI';
-import { theme } from './components/Shared/theme';
-import { loadCsf } from './loadCsf';
-const STORAGE_KEY = 'lastOpenedStory';
-export default class Preview {
-    constructor() {
-        this.api = () => {
-            return this._clientApi;
-        };
-        this.getStorybookUI = (params = {}) => {
-            const { initialSelection, shouldPersistSelection = true } = params;
-            this._setInitialStory(initialSelection, shouldPersistSelection);
-            this._channel.on(Events.SET_CURRENT_STORY, (d) => {
-                this._selectStoryEvent(d, shouldPersistSelection);
-            });
-            const { _storyStore } = this;
-            addons.loadAddons(this._clientApi);
-            const appliedTheme = Object.assign(Object.assign({}, theme), params.theme);
-            return () => (React.createElement(ThemeProvider, { theme: appliedTheme },
-                React.createElement(OnDeviceUI, { storyStore: _storyStore, isUIHidden: params.isUIHidden, tabOpen: params.tabOpen, shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset })));
-        };
-        this._setInitialStory = (initialSelection, shouldPersistSelection = true) => __awaiter(this, void 0, void 0, function* () {
-            const story = yield this._getInitialStory(initialSelection, shouldPersistSelection);
-            if (story) {
-                this._selectStory(story);
-            }
-        });
-        this._getInitialStory = (initialSelection, shouldPersistSelection = true) => __awaiter(this, void 0, void 0, function* () {
-            let story = null;
-            const initialSelectionId = initialSelection === undefined
-                ? undefined
-                : typeof initialSelection === 'string'
-                    ? initialSelection
-                    : toId(initialSelection.kind, initialSelection.name);
-            if (initialSelectionId !== undefined && this._checkStory(initialSelectionId)) {
-                story = initialSelectionId;
-            }
-            else if (shouldPersistSelection) {
-                try {
-                    let value = this._asyncStorageStoryId;
-                    if (!value) {
-                        value = JSON.parse(yield AsyncStorage.getItem(STORAGE_KEY));
-                        this._asyncStorageStoryId = value;
-                    }
-                    if (this._checkStory(value)) {
-                        story = value;
-                    }
-                }
-                catch (e) {
-                    //
-                }
-            }
-            if (story) {
-                return this._getStory(story);
-            }
-            const stories = this._storyStore.raw();
-            if (stories && stories.length) {
-                return this._getStory(stories[0].id);
-            }
-            return null;
-        });
-        const channel = new Channel({ async: true });
-        this._decorators = [];
-        this._storyStore = new StoryStore({ channel });
-        this._clientApi = new ClientApi({ storyStore: this._storyStore });
-        this._configApi = new ConfigApi({ storyStore: this._storyStore });
-        this._channel = channel;
-        const configure = loadCsf({
-            clientApi: this._clientApi,
-            storyStore: this._storyStore,
-            configApi: this._configApi,
-        });
-        this.configure = (...args) => configure('react-native', ...args);
-        addons.setChannel(channel);
-    }
-    _getStory(storyId) {
-        return this._storyStore.fromId(storyId);
-    }
-    _selectStoryEvent({ storyId }, shouldPersistSelection) {
-        if (storyId) {
-            if (shouldPersistSelection) {
-                AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(storyId)).catch(() => { });
-            }
-            const story = this._getStory(storyId);
-            this._selectStory(story);
-        }
-    }
-    _selectStory(story) {
-        this._storyStore.setSelection({ storyId: story.id, viewMode: 'story' });
-        this._channel.emit(Events.SELECT_STORY, story);
-    }
-    _checkStory(storyId) {
-        if (!storyId) {
-            return null;
-        }
-        const story = this._getStory(storyId);
-        if (story === null || story.storyFn === null) {
-            return null;
-        }
-        return story;
-    }
-}

package/dist/preview/global.d.ts

@@ -1,8 +0,0 @@
-export {};
-declare global {
-    namespace NodeJS {
-        interface Global {
-            previousExports: Map<any, string>;
-        }
-    }
-}

package/dist/preview/index.d.ts

@@ -1 +0,0 @@
-export { default } from './Preview';

package/dist/preview/index.js

@@ -1 +0,0 @@
-export { default } from './Preview';

package/dist/preview/loadCsf.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="webpack-env" />
-/// <reference types="node" />
-import { ClientApi, ConfigApi, StoryStore } from '@storybook/client-api';
-import './global';
-export interface RequireContext {
-    keys: () => string[];
-    (id: string): any;
-    resolve(id: string): string;
-}
-export declare type LoadableFunction = () => void | any[];
-export declare type Loadable = RequireContext | RequireContext[] | LoadableFunction;
-export declare const loadCsf: ({ clientApi, storyStore, configApi, }: {
-    clientApi: ClientApi;
-    storyStore: StoryStore;
-    configApi: ConfigApi;
-}) => (framework: string, loadable: Loadable, m: NodeModule, showDeprecationWarning?: boolean) => void;

package/dist/preview/loadCsf.js

@@ -1,180 +0,0 @@
-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;
-};
-import { logger } from '@storybook/client-logger';
-import { isExportStory, storyNameFromExport, toId } from '@storybook/csf';
-import './global';
-const deprecatedStoryAnnotationWarning = () => logger.log(`
-    CSF .story annotations deprecated; annotate story functions directly:
-    - StoryFn.story.name => StoryFn.storyName
-    - StoryFn.story.(parameters|decorators) => StoryFn.(parameters|decorators)
-    See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-annotations for details and codemod.
-`);
-const duplicateKindWarning = (kindName) => {
-    logger.warn(`Duplicate title: '${kindName}'
-    Duplicate title used in multiple files; use unique titles or a primary file for a component with re-exported stories.
-
-    https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-support-for-duplicate-kinds
-  `);
-};
-global.previousExports = new Map();
-const loadStories = (loadable, framework, { clientApi, storyStore }) => () => {
-    // Make sure we don't try to define a kind more than once within the same load
-    const loadedKinds = new Set();
-    let reqs = null;
-    // todo discuss / improve type check
-    if (Array.isArray(loadable)) {
-        reqs = loadable;
-    }
-    else if (loadable.keys) {
-        reqs = [loadable];
-    }
-    let currentExports = new Map();
-    // reqs is not null when require context is used,
-    // this comes from storybook core client and will never be true in RN
-    // keeping this here only to get an idea how the core version could be re-used
-    if (reqs) {
-        reqs.forEach((req) => {
-            req.keys().forEach((filename) => {
-                try {
-                    const fileExports = req(filename);
-                    currentExports.set(fileExports, 
-                    // todo discuss: types infer that this is RequireContext; no checks needed?
-                    // NOTE: turns out `babel-plugin-require-context-hook` doesn't implement this (yet)
-                    typeof req.resolve === 'function' ? req.resolve(filename) : filename);
-                }
-                catch (error) {
-                    logger.warn(`Unexpected error while loading ${filename}: ${error}`);
-                }
-            });
-        });
-    }
-    else {
-        try {
-            const exported = loadable();
-            if (Array.isArray(exported)) {
-                const csfExports = exported.filter((obj) => obj.default != null);
-                currentExports = new Map(csfExports.map((fileExports) => [fileExports, null]));
-            }
-            else {
-                logger.warn(`Loader function passed to 'configure' should return void or an array of module exports that all contain a 'default' export. Received: ${JSON.stringify(exported)}`);
-            }
-        }
-        catch (error) {
-            logger.warn(`Unexpected error while loading stories: ${error}`);
-        }
-    }
-    const removed = Array.from(global.previousExports.keys()).filter((exp) => !currentExports.has(exp));
-    removed.forEach((exp) => {
-        if (exp.default) {
-            storyStore.removeStoryKind(exp.default.title);
-        }
-    });
-    const added = Array.from(currentExports.keys()).filter((exp) => !global.previousExports.has(exp));
-    added.forEach((fileExports) => {
-        // An old-style story file
-        if (!fileExports.default) {
-            return;
-        }
-        if (!fileExports.default.title) {
-            throw new Error(`Unexpected default export without title: ${JSON.stringify(fileExports.default)}`);
-        }
-        const { default: meta, __namedExportsOrder } = fileExports, namedExports = __rest(fileExports, ["default", "__namedExportsOrder"]);
-        let exports = namedExports;
-        // prefer a user/loader provided `__namedExportsOrder` array if supplied
-        // we do this as es module exports are always ordered alphabetically
-        // see https://github.com/storybookjs/storybook/issues/9136
-        if (Array.isArray(__namedExportsOrder)) {
-            exports = {};
-            __namedExportsOrder.forEach((name) => {
-                if (namedExports[name]) {
-                    exports[name] = namedExports[name];
-                }
-            });
-        }
-        const { title: kindName, id: componentId, parameters: kindParameters, decorators: kindDecorators, loaders: kindLoaders = [], component, subcomponents, args: kindArgs, argTypes: kindArgTypes, } = meta;
-        if (loadedKinds.has(kindName)) {
-            duplicateKindWarning(kindName);
-        }
-        loadedKinds.add(kindName);
-        // We pass true here to avoid the warning about HMR. It's cool clientApi, we got this
-        // todo discuss: TS now wants a NodeModule; should we fix this differently?
-        const kind = clientApi.storiesOf(kindName, true);
-        // we should always have a framework, rest optional
-        kind.addParameters(Object.assign(Object.assign({ framework,
-            component,
-            subcomponents, fileName: currentExports.get(fileExports) }, kindParameters), { args: kindArgs, argTypes: kindArgTypes }));
-        // todo add type
-        (kindDecorators || []).forEach((decorator) => {
-            kind.addDecorator(decorator);
-        });
-        kindLoaders.forEach((loader) => {
-            kind.addLoader(loader);
-        });
-        const storyExports = Object.keys(exports);
-        if (storyExports.length === 0) {
-            logger.warn(`
-          Found a story file for "${kindName}" but no exported stories.
-          Check the docs for reference: https://storybook.js.org/docs/formats/component-story-format/
-        `);
-            return;
-        }
-        storyExports.forEach((key) => {
-            if (isExportStory(key, meta)) {
-                const storyFn = exports[key];
-                const { story } = storyFn;
-                const name = story === null || story === void 0 ? void 0 : story.name;
-                const { storyName = name } = storyFn;
-                // storyFn.x and storyFn.story.x get merged with
-                // storyFn.x taking precedence in the merge
-                const parameters = Object.assign(Object.assign({}, story === null || story === void 0 ? void 0 : story.parameters), storyFn.parameters);
-                const decorators = [...(storyFn.decorators || []), ...((story === null || story === void 0 ? void 0 : story.decorators) || [])];
-                const loaders = [...(storyFn.loaders || []), ...((story === null || story === void 0 ? void 0 : story.loaders) || [])];
-                const args = Object.assign(Object.assign({}, story === null || story === void 0 ? void 0 : story.args), storyFn.args);
-                const argTypes = Object.assign(Object.assign({}, story === null || story === void 0 ? void 0 : story.argTypes), storyFn.argTypes);
-                if (story) {
-                    logger.debug('deprecated story', story);
-                    deprecatedStoryAnnotationWarning();
-                }
-                const exportName = storyNameFromExport(key);
-                const storyParams = Object.assign(Object.assign({}, parameters), { __id: toId(componentId || kindName, exportName), decorators,
-                    loaders,
-                    args,
-                    argTypes });
-                kind.add(storyName || exportName, storyFn, storyParams);
-            }
-        });
-    });
-    global.previousExports = currentExports;
-};
-const configureDeprecationWarning = () => logger.log(`\`configure()\` is deprecated and will be removed in Storybook 7.0. 
-Please use the \`stories\` field of \`main.js\` to load stories.
-Read more at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-configure`);
-export const loadCsf = ({ clientApi, storyStore, configApi, }) => 
-/**
- * Load a collection of stories. If it has a default export, assume that it is a module-style
- * file and process its named exports as stories. If not, assume it's an old-style
- * storiesof file and require it.
- *
- * @param {*} framework - name of framework in use, e.g. "react"
- * @param {*} loadable a require.context `req`, an array of `req`s, or a loader function that returns void or an array of exports
- * @param {*} m - ES module object for hot-module-reloading (HMR)
- * @param {boolean} showDeprecationWarning - show the deprecation warning (default true)
- */
-(framework, loadable, m, showDeprecationWarning = true) => {
-    if (showDeprecationWarning) {
-        configureDeprecationWarning();
-    }
-    if (typeof m === 'string') {
-        throw new Error(`Invalid module '${m}'. Did you forget to pass \`module\` as the second argument to \`configure\`"?`);
-    }
-    configApi.configure(loadStories(loadable, framework, { clientApi, storyStore }), m);
-};