@storybook/react-native 6.0.1-beta.0 → 6.0.1-beta.10

package/dist/preview/rn-host-detect.d.ts

@@ -0,0 +1 @@
+export default function getHost(hostname: any): any;

package/dist/preview/rn-host-detect.js

@@ -0,0 +1,62 @@
+'use strict';
+/*
+ * It only for Debug Remotely mode for Android
+ * When __DEV__ === false, we can't use window.require('NativeModules')
+ */
+function getByRemoteConfig(hostname) {
+    var remoteModuleConfig = typeof window !== 'undefined' &&
+        window.__fbBatchedBridgeConfig &&
+        window.__fbBatchedBridgeConfig.remoteModuleConfig;
+    if (!Array.isArray(remoteModuleConfig) ||
+        (hostname !== 'localhost' && hostname !== '127.0.0.1')) {
+        return { hostname: hostname, passed: false };
+    }
+    var constants = (remoteModuleConfig.find(getConstants) || [])[1];
+    if (constants) {
+        var serverHost = constants.ServerHost || hostname;
+        return { hostname: serverHost.split(':')[0], passed: true };
+    }
+    return { hostname: hostname, passed: false };
+}
+function getConstants(config) {
+    return config && (config[0] === 'AndroidConstants' || config[0] === 'PlatformConstants');
+}
+function getByRNRequirePolyfill(hostname) {
+    var NativeModules;
+    var PlatformConstants;
+    var AndroidConstants;
+    if (typeof window === 'undefined' ||
+        !window.__DEV__ ||
+        typeof window.require !== 'function' ||
+        // RN >= 0.56
+        // TODO: Get NativeModules for RN >= 0.56
+        window.require.name === 'metroRequire') {
+        return hostname;
+    }
+    NativeModules = window.require('NativeModules');
+    if (!NativeModules || (!NativeModules.PlatformConstants && !NativeModules.AndroidConstants)) {
+        return hostname;
+    }
+    PlatformConstants = NativeModules.PlatformConstants;
+    AndroidConstants = NativeModules.AndroidConstants;
+    var serverHost = (PlatformConstants ? PlatformConstants.ServerHost : AndroidConstants.ServerHost) || hostname;
+    return serverHost.split(':')[0];
+}
+/*
+ * Get React Native server IP if hostname is `localhost`
+ * On Android emulator, the IP of host is `10.0.2.2` (Genymotion: 10.0.3.2)
+ */
+export default function getHost(hostname) {
+    // Check if it in React Native environment
+    if (typeof __fbBatchedBridge !== 'object' ||
+        (hostname !== 'localhost' && hostname !== '127.0.0.1')) {
+        return hostname;
+    }
+    var result = getByRemoteConfig(hostname);
+    // Leave if get hostname by remote config successful
+    if (result.passed) {
+        return result.hostname;
+    }
+    // Otherwise, use RN's require polyfill
+    return getByRNRequirePolyfill(hostname);
+}

package/dist/preview/start.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="webpack-env" />
+/// <reference types="node" />
+import { Loadable } from '@storybook/core-client';
+import { PreviewWeb } from '@storybook/preview-web';
+import { ClientApi } from '@storybook/client-api';
+import type { ReactNativeFramework } from '../types/types-6.0';
+import { View } from './View';
+import type { ArgsStoryFn } from '@storybook/csf';
+export declare const render: ArgsStoryFn<ReactNativeFramework>;
+export declare function start(): {
+    view: View;
+    forceReRender: () => void;
+    clientApi: ClientApi<ReactNativeFramework>;
+    preview: PreviewWeb<ReactNativeFramework>;
+    configure(loadable: Loadable, m: NodeModule): void;
+};

package/dist/preview/start.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import Channel from '@storybook/channels';
+import { addons } from '@storybook/addons';
+import Events from '@storybook/core-events';
+import { PreviewWeb } from '@storybook/preview-web';
+import { ClientApi, setGlobalRender } from '@storybook/client-api';
+import { View } from './View';
+import { executeLoadableForChanges } from './executeLoadable';
+export const render = (args, context) => {
+    const { id, component: Component } = context;
+    if (!Component) {
+        throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);
+    }
+    return React.createElement(Component, Object.assign({}, args));
+};
+export function start() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const channel = new Channel({ async: true });
+    addons.setChannel(channel);
+    const clientApi = new ClientApi();
+    const preview = new PreviewWeb();
+    clientApi.storyStore = preview.storyStore;
+    setGlobalRender(render);
+    preview.urlStore = {
+        selection: { storyId: '', viewMode: 'story' },
+        selectionSpecifier: null,
+        setQueryParams: () => { },
+        setSelection: (selection) => {
+            preview.urlStore.selection = selection;
+        },
+    };
+    preview.view = Object.assign(Object.assign({}, preview.view), { prepareForStory: () => null, showNoPreview: () => { }, showPreparingStory: () => { }, applyLayout: () => { }, showErrorDisplay: (e) => {
+            console.log(e);
+        }, showStoryDuringRender: () => { }, showMain: () => { }, 
+        // these are just to make typescript happy
+        showDocs: (_a = preview.view) === null || _a === void 0 ? void 0 : _a.showDocs, storyRoot: (_b = preview.view) === null || _b === void 0 ? void 0 : _b.storyRoot, prepareForDocs: (_c = preview.view) === null || _c === void 0 ? void 0 : _c.prepareForDocs, docsRoot: (_d = preview.view) === null || _d === void 0 ? void 0 : _d.docsRoot, checkIfLayoutExists: (_e = preview.view) === null || _e === void 0 ? void 0 : _e.checkIfLayoutExists, showMode: (_f = preview.view) === null || _f === void 0 ? void 0 : _f.showMode, showPreparingDocs: (_g = preview.view) === null || _g === void 0 ? void 0 : _g.showPreparingDocs, showStory: (_h = preview.view) === null || _h === void 0 ? void 0 : _h.showStory });
+    let initialized = false;
+    function onStoriesChanged() {
+        const storyIndex = clientApi.getStoryIndex();
+        preview.onStoriesChanged({ storyIndex });
+        view._storyIndex = storyIndex;
+    }
+    const view = new View(preview);
+    return {
+        view,
+        forceReRender: () => channel.emit(Events.FORCE_RE_RENDER),
+        clientApi,
+        preview,
+        // This gets called each time the user calls configure (i.e. once per HMR)
+        // The first time, it constructs the preview, subsequently it updates it
+        configure(loadable, m) {
+            clientApi.addParameters({ framework: 'react-native' });
+            // We need to run the `executeLoadableForChanges` function *inside* the `getProjectAnnotations
+            // function in case it throws. So we also need to process its output there also
+            const getProjectAnnotations = () => {
+                const { added, removed } = executeLoadableForChanges(loadable, m);
+                Array.from(added.entries()).forEach(([fileName, fileExports]) => clientApi.facade.addStoriesFromExports(fileName, fileExports));
+                Array.from(removed.entries()).forEach(([fileName]) => clientApi.facade.clearFilenameExports(fileName));
+                return Object.assign(Object.assign({}, clientApi.facade.projectAnnotations), { renderToDOM: (context) => {
+                        view._setStory(context.storyContext);
+                    } });
+            };
+            const importFn = (path) => clientApi.importFn(path);
+            if (!initialized) {
+                preview.initialize({
+                    getStoryIndex: () => {
+                        const index = clientApi.getStoryIndex();
+                        view._storyIndex = index;
+                        return index;
+                    },
+                    importFn,
+                    getProjectAnnotations,
+                });
+                initialized = true;
+            }
+            else {
+                // TODO -- why don't we care about the new annotations?
+                getProjectAnnotations();
+                onStoriesChanged();
+            }
+        },
+    };
+}

package/dist/types/types-6.0.d.ts

@@ -0,0 +1,72 @@
+import { ComponentProps, ComponentType, JSXElementConstructor, ReactElement } from 'react';
+import type { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
+export declare type StoryFnReactReturnType = ReactElement<unknown>;
+export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
+export declare type ReactNativeFramework = {
+    component: ComponentType<any>;
+    storyResult: StoryFnReactReturnType;
+};
+/**
+ * For the common case where a component's stories are simple components that receives args as props:
+ *
+ * ```tsx
+ * export default { ... } as ComponentMeta<typeof Button>;
+ * ```
+ */
+export declare type ComponentMeta<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Meta<ComponentProps<T>>;
+/**
+ * For the common case where a (CSFv2) story is a simple component that receives args as props:
+ *
+ * ```tsx
+ * const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
+ * ```
+ */
+export declare type ComponentStoryFn<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = StoryFn<ComponentProps<T>>;
+/**
+ * For the common case where a (CSFv3) story is a simple component that receives args as props:
+ *
+ * ```tsx
+ * const MyStory: ComponentStory<typeof Button> = {
+ *   args: { buttonArg1: 'val' },
+ * }
+ * ```
+ */
+export declare type ComponentStoryObj<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = StoryObj<ComponentProps<T>>;
+/**
+ * For the common case where a (CSFv2) story is a simple component that receives args as props:
+ *
+ * ```tsx
+ * const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
+ * ```
+ *
+ * NOTE: this is an alias for `ComponentStoryFn`.
+ * In Storybook v7, `ComponentStory` will alias `ComponentStoryObj`
+ */
+export declare type ComponentStory<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Story<ComponentProps<T>>;
+/**
+ * Metadata to configure the stories for a component.
+ *
+ * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ */
+export declare type Meta<TArgs = Args> = ComponentAnnotations<ReactNativeFramework, TArgs>;
+/**
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export declare type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactNativeFramework, TArgs>;
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export declare type StoryObj<TArgs = Args> = StoryAnnotations<ReactNativeFramework, TArgs>;
+/**
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ *
+ * NOTE that in Storybook 7.0, this type will be renamed to `StoryFn` and replaced by the current `StoryObj` type.
+ *
+ */
+export declare type Story<TArgs = Args> = StoryFn<TArgs>;

package/dist/types/types-6.0.js

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

package/dist/types/types.d.ts

@@ -0,0 +1,14 @@
+import { RenderContext, RenderContextWithoutStoryContext } from '@storybook/client-api';
+export interface PreviewError {
+    message?: string;
+    stack?: string;
+}
+export interface RequireContext {
+    keys: () => string[];
+    (id: string): any;
+    resolve(id: string): string;
+}
+export declare type LoaderFunction = () => void | any[];
+export declare type Loadable = RequireContext | RequireContext[] | LoaderFunction;
+export type { RenderContext, RenderContextWithoutStoryContext };
+export declare type RenderStoryFunction = (context: RenderContext) => void;

package/dist/types/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.0.1-beta.0",
+  "version": "6.0.1-beta.10",
   "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": "3490aec85c84210997f38b92afa515b6dc41b8b5"
+  "gitHead": "0288f6d0728b0f29698435b5cd2d46dc7dde57fc"
 }

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

@@ -1,10 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`loader writeRequires when there are different file extensions writes the story imports 1`] = `
+"
+      /* do not change this file, it is auto generated by storybook. */
+
+      import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
+
+      import \\"@storybook/addon-ondevice-notes/register\\";
+import \\"@storybook/addon-ondevice-controls/register\\";
+import \\"@storybook/addon-ondevice-backgrounds/register\\";
+import \\"@storybook/addon-ondevice-actions/register\\";
+
+      import { argsEnhancers } from \\"@storybook/addon-actions/dist/modern/preset/addArgs\\"
+
+      
+  import { decorators, parameters } from './preview';
+
+  if (decorators) {
+    if(__DEV__){
+      // stops the warning from showing on every HMR 
+      require('react-native').LogBox.ignoreLogs([
+        '\`clearDecorators\` is deprecated and will be removed in Storybook 7.0',
+      ]);
+    }
+    // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
+    clearDecorators();
+    decorators.forEach((decorator) => addDecorator(decorator));
+  }
+
+  if (parameters) {
+    addParameters(parameters);
+  }
+
+
+      
+      try {
+        argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer));
+      } catch{}
+    
+
+      const getStories=() => {
+        return [require(\\"./FakeStory.stories.tsx\\")];
+      }
+
+      configure(getStories, module, false)
+  "
+`;
+
 exports[`loader writeRequires when there is a story glob and exclude paths globs writes the story imports 1`] = `
 "
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
 
       import \\"@storybook/addon-ondevice-notes/register\\";
 import \\"@storybook/addon-ondevice-controls/register\\";
@@ -17,6 +64,14 @@ import \\"@storybook/addon-ondevice-actions/register\\";
   import { decorators, parameters } from './preview';
 
   if (decorators) {
+    if(__DEV__){
+      // stops the warning from showing on every HMR 
+      require('react-native').LogBox.ignoreLogs([
+        '\`clearDecorators\` is deprecated and will be removed in Storybook 7.0',
+      ]);
+    }
+    // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
+    clearDecorators();
     decorators.forEach((decorator) => addDecorator(decorator));
   }
 
@@ -25,7 +80,11 @@ import \\"@storybook/addon-ondevice-actions/register\\";
   }
 
 
-      argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer))
+      
+      try {
+        argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer));
+      } catch{}
+    
 
       const getStories=() => {
         return [require(\\"include-components/FakeStory.stories.tsx\\")];
@@ -39,7 +98,7 @@ exports[`loader writeRequires when there is a story glob writes the story import
 "
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
 
       import \\"@storybook/addon-ondevice-notes/register\\";
 import \\"@storybook/addon-ondevice-controls/register\\";
@@ -52,6 +111,14 @@ import \\"@storybook/addon-ondevice-actions/register\\";
   import { decorators, parameters } from './preview';
 
   if (decorators) {
+    if(__DEV__){
+      // stops the warning from showing on every HMR 
+      require('react-native').LogBox.ignoreLogs([
+        '\`clearDecorators\` is deprecated and will be removed in Storybook 7.0',
+      ]);
+    }
+    // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
+    clearDecorators();
     decorators.forEach((decorator) => addDecorator(decorator));
   }
 
@@ -60,7 +127,11 @@ import \\"@storybook/addon-ondevice-actions/register\\";
   }
 
 
-      argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer))
+      
+      try {
+        argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer));
+      } catch{}
+    
 
       const getStories=() => {
         return [require(\\"./FakeStory.stories.tsx\\")];
@@ -74,7 +145,7 @@ exports[`loader writeRequires when there is no preview does not add preview rela
 "
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
 
       import \\"@storybook/addon-ondevice-notes/register\\";
 import \\"@storybook/addon-ondevice-controls/register\\";
@@ -85,7 +156,11 @@ import \\"@storybook/addon-ondevice-actions/register\\";
 
       
 
-      argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer))
+      
+      try {
+        argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer));
+      } catch{}
+    
 
       const getStories=() => {
         return [require(\\"./FakeStory.stories.tsx\\")];
@@ -99,7 +174,7 @@ exports[`loader writeRequires when there is no story glob or addons writes no st
 "
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
 
       
 

package/scripts/loader.js

@@ -4,11 +4,21 @@ const glob = require('glob');
 const prettier = require('prettier');
 
 const cwd = process.cwd();
+const supportedExtensions = ['js', 'jsx', 'ts', 'tsx', 'cjs', 'mjs'];
 
+// we clear decorators as a workaround for global decorators getting infinitely applied on HMR
 const previewImports = `
   import { decorators, parameters } from './preview';
 
   if (decorators) {
+    if(__DEV__){
+      // stops the warning from showing on every HMR 
+      require('react-native').LogBox.ignoreLogs([
+        '\`clearDecorators\` is deprecated and will be removed in Storybook 7.0',
+      ]);
+    }
+    // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
+    clearDecorators();
     decorators.forEach((decorator) => addDecorator(decorator));
   }
 
@@ -38,19 +48,34 @@ function requireUncached(module) {
 }
 
 function getMain({ configPath }) {
-  const mainPath = path.resolve(cwd, configPath, 'main.js');
+  const fileExtension = getFilePathExtension({ configPath }, 'main');
+  if (fileExtension === null) {
+    throw new Error('main config file not found');
+  }
+  const mainPath = path.resolve(cwd, configPath, `main.${fileExtension}`);
+
   return requireUncached(mainPath);
 }
 
+function getFilePathExtension({ configPath }, fileName) {
+  for (const ext of supportedExtensions) {
+    const filePath = path.resolve(cwd, configPath, `${fileName}.${ext}`);
+    if (fs.existsSync(filePath)) {
+      return ext;
+    }
+  }
+  return null;
+}
+
 function getPreviewExists({ configPath }) {
-  const previewPath = path.resolve(cwd, configPath, 'preview.js');
-  return fs.existsSync(previewPath);
+  return !!getFilePathExtension({ configPath }, 'preview');
 }
 
 function writeRequires({ configPath, absolute = false }) {
   const storybookRequiresLocation = path.resolve(cwd, configPath, 'storybook.requires.js');
 
-  const main = getMain({ configPath });
+  const mainImport = getMain({ configPath });
+  const main = mainImport.default ?? mainImport;
   const reactNativeOptions = main.reactNativeOptions;
   const excludePaths = reactNativeOptions && reactNativeOptions.excludePaths;
   const normalizedExcludePaths = normalizeExcludePaths(excludePaths);
@@ -60,9 +85,7 @@ function writeRequires({ configPath, absolute = false }) {
       cwd: path.resolve(cwd, configPath),
       absolute,
       // default to always ignore (exclude) anything in node_modules
-      ignore: normalizedExcludePaths !== undefined
-        ? normalizedExcludePaths
-        : ['**/node_modules'],
+      ignore: normalizedExcludePaths !== undefined ? normalizedExcludePaths : ['**/node_modules'],
     });
     return [...acc, ...paths];
   }, []);
@@ -76,7 +99,7 @@ function writeRequires({ configPath, absolute = false }) {
   const storyRequires = storyPaths.map((storyPath) => `require("${storyPath}")`).join(',');
   const path_array_str = `[${storyRequires}]`;
 
-  const registerAddons = main.addons.map((addon) => `import "${addon}/register";`).join('\n');
+  const registerAddons = main.addons?.map((addon) => `import "${addon}/register";`).join('\n');
   let enhancersImport = '';
   let enhancers = '';
 
@@ -84,13 +107,19 @@ function writeRequires({ configPath, absolute = false }) {
   if (main.addons.includes('@storybook/addon-ondevice-actions')) {
     enhancersImport =
       'import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"';
-    enhancers = 'argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer))';
+
+    // try/catch is a temporary fix for https://github.com/storybookjs/react-native/issues/327 until a fix is found
+    enhancers = `
+      try {
+        argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer));
+      } catch{}
+    `;
   }
 
   const fileContent = `
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
 
       ${registerAddons}
 
@@ -119,4 +148,5 @@ module.exports = {
   writeRequires,
   getMain,
   getPreviewExists,
+  getFilePathExtension,
 };

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;
@@ -47,24 +46,51 @@ describe('loader', () => {
         ],
       });
     });
+    it('should work for any supported file extension', () => {
+      const main = getMain({ configPath: './scripts/mocks/file-extensions' });
+      expect(main).toEqual({
+        default: {
+          stories: ['./FakeStory.stories.tsx'],
+          addons: [
+            '@storybook/addon-ondevice-notes',
+            '@storybook/addon-ondevice-controls',
+            '@storybook/addon-ondevice-backgrounds',
+            '@storybook/addon-ondevice-actions',
+          ],
+        },
+      });
+    });
   });
 
   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 +98,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);
+      });
     });
   });
 
@@ -86,6 +118,16 @@ describe('loader', () => {
       });
     });
 
+    describe('when there are different file extensions', () => {
+      it('writes the story imports', () => {
+        writeRequires({ configPath: 'scripts/mocks/file-extensions' });
+        expect(pathMock).toEqual(
+          path.resolve(__dirname, 'mocks/file-extensions/storybook.requires.js')
+        );
+        expect(fileContentMock).toMatchSnapshot();
+      });
+    });
+
     describe('when there is a story glob and exclude paths globs', () => {
       it('writes the story imports', () => {
         writeRequires({ configPath: 'scripts/mocks/exclude-config-files' });