@storybook/react-native 6.0.1-alpha.3 → 6.0.1-beta.0

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};

package/dist/index.d.ts

@@ -3,6 +3,8 @@
 import { StoryApi } from '@storybook/addons';
 import { ClientApi } from '@storybook/client-api';
 import { ReactNode } from 'react';
+import Preview from './preview';
+export declare const preview: Preview;
 export declare const setAddon: ClientApi['setAddon'];
 export declare const addDecorator: ClientApi['addDecorator'];
 export declare const addParameters: ClientApi['addParameters'];

package/dist/index.js

@@ -1,5 +1,5 @@
 import Preview from './preview';
-const preview = new Preview();
+export const preview = new Preview();
 const rawStoriesOf = preview.api().storiesOf.bind(preview);
 export const setAddon = preview.api().setAddon.bind(preview);
 export const addDecorator = preview.api().addDecorator.bind(preview);

package/dist/preview/Preview.d.ts

@@ -4,27 +4,32 @@ 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';
-interface AsyncStorage {
-    getItem: (key: string) => Promise<string | null>;
-    setItem: (key: string, value: string) => Promise<void>;
+interface InitialSelection {
+    /**
+     * Kind is the default export name or the storiesOf("name") name
+     */
+    kind: string;
+    /**
+     * Name is the named export or the .add("name") name
+     */
+    name: string;
 }
 export declare type Params = {
-    onDeviceUI: boolean;
-    asyncStorage: AsyncStorage | null;
-    resetStorybook: boolean;
-    disableWebsockets: boolean;
-    query: string;
-    host: string;
-    port: number;
-    secured: boolean;
-    initialSelection: any;
-    shouldPersistSelection: boolean;
-    tabOpen: number;
-    isUIHidden: boolean;
-    shouldDisableKeyboardAvoidingView: boolean;
-    keyboardAvoidingViewVerticalOffset: number;
+    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;
+    theme?: typeof theme;
 };
 export default class Preview {
     _clientApi: ClientApi;
@@ -33,18 +38,17 @@ export default class Preview {
     _channel: Channel;
     _decorators: any[];
     _asyncStorageStoryId: string;
-    _asyncStorage: AsyncStorage | null;
     _configApi: ConfigApi;
     configure: (loadable: Loadable, m: NodeModule, showDeprecationWarning: boolean) => void;
     constructor();
     api: () => ClientApi;
     getStorybookUI: (params?: Partial<Params>) => () => JSX.Element;
-    _setInitialStory: (initialSelection: any, shouldPersistSelection?: boolean) => Promise<void>;
-    _getInitialStory: (initialSelection: any, shouldPersistSelection?: boolean) => Promise<import("@storybook/client-api").PublishedStoreItem>;
+    _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;
-    }): void;
+    }, shouldPersistSelection: any): void;
     _selectStory(story: any): void;
     _checkStory(storyId: string): import("@storybook/client-api").PublishedStoreItem;
 }

package/dist/preview/Preview.js

@@ -7,15 +7,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         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 { loadCsf } from './loadCsf';
 import OnDeviceUI from './components/OnDeviceUI';
 import { theme } from './components/Shared/theme';
+import { loadCsf } from './loadCsf';
 const STORAGE_KEY = 'lastOpenedStory';
 export default class Preview {
     constructor() {
@@ -23,20 +25,10 @@ export default class Preview {
             return this._clientApi;
         };
         this.getStorybookUI = (params = {}) => {
-            if (params.asyncStorage === undefined) {
-                console.warn(`
-    Starting Storybook v5.3.0, we require you to manually pass an asyncStorage prop. Pass null to disable or use https://github.com/react-native-async-storage/async-storage.
-
-    More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-native-async-storage
-          `.trim());
-            }
-            if (params.asyncStorage) {
-                this._asyncStorage = params.asyncStorage;
-            }
-            const { initialSelection, shouldPersistSelection } = params;
+            const { initialSelection, shouldPersistSelection = true } = params;
             this._setInitialStory(initialSelection, shouldPersistSelection);
             this._channel.on(Events.SET_CURRENT_STORY, (d) => {
-                this._selectStoryEvent(d);
+                this._selectStoryEvent(d, shouldPersistSelection);
             });
             const { _storyStore } = this;
             addons.loadAddons(this._clientApi);
@@ -52,14 +44,17 @@ export default class Preview {
         });
         this._getInitialStory = (initialSelection, shouldPersistSelection = true) => __awaiter(this, void 0, void 0, function* () {
             let story = null;
-            if (initialSelection && this._checkStory(initialSelection)) {
-                story = initialSelection;
+            const initialSelectionId = initialSelection
+                ? toId(initialSelection.kind, initialSelection.name)
+                : undefined;
+            if (initialSelection && initialSelectionId && this._checkStory(initialSelectionId)) {
+                story = initialSelectionId;
             }
             else if (shouldPersistSelection) {
                 try {
                     let value = this._asyncStorageStoryId;
-                    if (!value && this._asyncStorage) {
-                        value = JSON.parse(yield this._asyncStorage.getItem(STORAGE_KEY));
+                    if (!value) {
+                        value = JSON.parse(yield AsyncStorage.getItem(STORAGE_KEY));
                         this._asyncStorageStoryId = value;
                     }
                     if (this._checkStory(value)) {
@@ -96,10 +91,10 @@ export default class Preview {
     _getStory(storyId) {
         return this._storyStore.fromId(storyId);
     }
-    _selectStoryEvent({ storyId }) {
+    _selectStoryEvent({ storyId }, shouldPersistSelection) {
         if (storyId) {
-            if (this._asyncStorage) {
-                this._asyncStorage.setItem(STORAGE_KEY, JSON.stringify(storyId)).catch(() => { });
+            if (shouldPersistSelection) {
+                AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(storyId)).catch(() => { });
             }
             const story = this._getStory(storyId);
             this._selectStory(story);
@@ -114,7 +109,7 @@ export default class Preview {
             return null;
         }
         const story = this._getStory(storyId);
-        if (story.storyFn === null) {
+        if (story === null || story.storyFn === null) {
             return null;
         }
         return story;

package/dist/preview/components/OnDeviceUI/OnDeviceUI.js

@@ -11,12 +11,14 @@ import { getAddonPanelPosition, getNavigatorPanelPosition, getPreviewPosition, g
 import Navigation from './navigation';
 import { PREVIEW, ADDONS } from './navigation/constants';
 import Panel from './Panel';
+import { useWindowDimensions } from 'react-native';
 const ANIMATION_DURATION = 300;
 const IS_IOS = Platform.OS === 'ios';
 // @ts-ignore: Property 'Expo' does not exist on type 'Global'
 const getExpoRoot = () => global.Expo || global.__expo || global.__exponent;
 export const IS_EXPO = getExpoRoot() !== undefined;
 const IS_ANDROID = Platform.OS === 'android';
+const BREAKPOINT = 1024;
 const flex = { flex: 1 };
 const Preview = styled.View(flex, ({ disabled, theme }) => ({
     borderLeftWidth: disabled ? 0 : 1,
@@ -62,6 +64,7 @@ const OnDeviceUI = ({ storyStore, isUIHidden, shouldDisableKeyboardAvoidingView,
     });
     const story = useSelectedStory(storyStore);
     const animatedValue = useRef(new Animated.Value(tabOpen));
+    const wide = useWindowDimensions().width >= BREAKPOINT;
     const handleToggleTab = (newTabOpen) => {
         if (newTabOpen === tabOpen) {
             return;
@@ -81,9 +84,9 @@ const OnDeviceUI = ({ storyStore, isUIHidden, shouldDisableKeyboardAvoidingView,
     };
     const previewWrapperStyles = [
         flex,
-        getPreviewPosition(animatedValue.current, previewDimensions, slideBetweenAnimation),
+        getPreviewPosition(animatedValue.current, previewDimensions, slideBetweenAnimation, wide),
     ];
-    const previewStyles = [flex, getPreviewScale(animatedValue.current, slideBetweenAnimation)];
+    const previewStyles = [flex, getPreviewScale(animatedValue.current, slideBetweenAnimation, wide)];
     return (React.createElement(SafeAreaView, { style: [flex, IS_ANDROID && IS_EXPO && styles.expoAndroidContainer] },
         React.createElement(KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW, behavior: IS_IOS ? 'padding' : null, keyboardVerticalOffset: keyboardAvoidingViewVerticalOffset, style: flex },
             React.createElement(AbsolutePositionedKeyboardAwareView, { onLayout: setPreviewDimensions, previewDimensions: previewDimensions },
@@ -92,9 +95,9 @@ const OnDeviceUI = ({ storyStore, isUIHidden, shouldDisableKeyboardAvoidingView,
                         React.createElement(Preview, { disabled: tabOpen === PREVIEW },
                             React.createElement(StoryView, { story: story })),
                         tabOpen !== PREVIEW ? (React.createElement(TouchableOpacity, { style: absolutePosition, onPress: () => handleToggleTab(PREVIEW) })) : null)),
-                React.createElement(Panel, { style: getNavigatorPanelPosition(animatedValue.current, previewDimensions.width) },
+                React.createElement(Panel, { style: getNavigatorPanelPosition(animatedValue.current, previewDimensions.width, wide) },
                     React.createElement(StoryListView, { storyStore: storyStore, selectedStory: story })),
-                React.createElement(Panel, { style: getAddonPanelPosition(animatedValue.current, previewDimensions.width) },
+                React.createElement(Panel, { style: getAddonPanelPosition(animatedValue.current, previewDimensions.width, wide) },
                     React.createElement(Addons, { active: tabOpen === ADDONS }))),
             React.createElement(Navigation, { tabOpen: tabOpen, onChangeTab: handleToggleTab, initialUiVisible: !isUIHidden }))));
 };

package/dist/preview/components/OnDeviceUI/animation.d.ts

@@ -1,18 +1,18 @@
 import { Animated } from 'react-native';
 import { PreviewDimens } from './absolute-positioned-keyboard-aware-view';
-export declare const getNavigatorPanelPosition: (animatedValue: Animated.Value, previewWidth: number) => {
+export declare const getNavigatorPanelPosition: (animatedValue: Animated.Value, previewWidth: number, wide: boolean) => {
     transform: {
         translateX: Animated.AnimatedInterpolation;
     }[];
     width: number;
 }[];
-export declare const getAddonPanelPosition: (animatedValue: Animated.Value, previewWidth: number) => {
+export declare const getAddonPanelPosition: (animatedValue: Animated.Value, previewWidth: number, wide: boolean) => {
     transform: {
         translateX: Animated.AnimatedInterpolation;
     }[];
     width: number;
 }[];
-export declare const getPreviewPosition: (animatedValue: Animated.Value, { width: previewWidth, height: previewHeight }: PreviewDimens, slideBetweenAnimation: boolean) => {
+export declare const getPreviewPosition: (animatedValue: Animated.Value, { width: previewWidth, height: previewHeight }: PreviewDimens, slideBetweenAnimation: boolean, wide: boolean) => {
     transform: ({
         translateX: Animated.AnimatedInterpolation;
         translateY?: undefined;
@@ -21,7 +21,7 @@ export declare const getPreviewPosition: (animatedValue: Animated.Value, { width
         translateX?: undefined;
     })[];
 };
-export declare const getPreviewScale: (animatedValue: Animated.Value, slideBetweenAnimation: boolean) => {
+export declare const getPreviewScale: (animatedValue: Animated.Value, slideBetweenAnimation: boolean, wide: boolean) => {
     transform: {
         scale: Animated.AnimatedInterpolation;
     }[];

package/dist/preview/components/OnDeviceUI/animation.js

@@ -1,39 +1,47 @@
 import { NAVIGATOR, PREVIEW, ADDONS } from './navigation/constants';
 const PREVIEW_SCALE = 0.3;
-const panelWidth = (width) => width * (1 - PREVIEW_SCALE - 0.05);
-export const getNavigatorPanelPosition = (animatedValue, previewWidth) => {
+const PREVIEW_WIDE_SCREEN = 0.7;
+const SCALE_OFFSET = 0.025;
+const TRANSLATE_X_OFFSET = 6;
+const TRANSLATE_Y_OFFSET = 12;
+const panelWidth = (width, wide) => {
+    const scale = wide ? PREVIEW_WIDE_SCREEN : PREVIEW_SCALE;
+    return width * (1 - scale - SCALE_OFFSET);
+};
+export const getNavigatorPanelPosition = (animatedValue, previewWidth, wide) => {
     return [
         {
             transform: [
                 {
                     translateX: animatedValue.interpolate({
                         inputRange: [NAVIGATOR, PREVIEW],
-                        outputRange: [0, -panelWidth(previewWidth) - 1],
+                        outputRange: [0, -panelWidth(previewWidth, wide) - 1],
                     }),
                 },
             ],
-            width: panelWidth(previewWidth),
+            width: panelWidth(previewWidth, wide),
         },
     ];
 };
-export const getAddonPanelPosition = (animatedValue, previewWidth) => {
+export const getAddonPanelPosition = (animatedValue, previewWidth, wide) => {
     return [
         {
             transform: [
                 {
                     translateX: animatedValue.interpolate({
                         inputRange: [PREVIEW, ADDONS],
-                        outputRange: [previewWidth, previewWidth - panelWidth(previewWidth)],
+                        outputRange: [previewWidth, previewWidth - panelWidth(previewWidth, wide)],
                     }),
                 },
             ],
-            width: panelWidth(previewWidth),
+            width: panelWidth(previewWidth, wide),
         },
     ];
 };
-export const getPreviewPosition = (animatedValue, { width: previewWidth, height: previewHeight }, slideBetweenAnimation) => {
-    const translateX = previewWidth / 2 - (previewWidth * PREVIEW_SCALE) / 2 - 6;
-    const translateY = -(previewHeight / 2 - (previewHeight * PREVIEW_SCALE) / 2 - 12);
+export const getPreviewPosition = (animatedValue, { width: previewWidth, height: previewHeight }, slideBetweenAnimation, wide) => {
+    const scale = wide ? PREVIEW_WIDE_SCREEN : PREVIEW_SCALE;
+    const translateX = previewWidth / 2 - (previewWidth * scale) / 2 - TRANSLATE_X_OFFSET;
+    const translateY = -(previewHeight / 2 - (previewHeight * scale) / 2 - TRANSLATE_Y_OFFSET);
     return {
         transform: [
             {
@@ -51,13 +59,14 @@ export const getPreviewPosition = (animatedValue, { width: previewWidth, height:
         ],
     };
 };
-export const getPreviewScale = (animatedValue, slideBetweenAnimation) => {
+export const getPreviewScale = (animatedValue, slideBetweenAnimation, wide) => {
+    const scale = wide ? PREVIEW_WIDE_SCREEN : PREVIEW_SCALE;
     return {
         transform: [
             {
                 scale: animatedValue.interpolate({
                     inputRange: [NAVIGATOR, PREVIEW, ADDONS],
-                    outputRange: [PREVIEW_SCALE, slideBetweenAnimation ? PREVIEW_SCALE : 1, PREVIEW_SCALE],
+                    outputRange: [scale, slideBetweenAnimation ? scale : 1, scale],
                 }),
             },
         ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.0.1-alpha.3",
+  "version": "6.0.1-beta.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -19,8 +19,8 @@
   "license": "MIT",
   "main": "dist/index.js",
   "bin": {
-    "sbn-get-stories": "./bin/get-stories.js",
-    "sbn-watcher": "./bin/watcher.js"
+    "sb-rn-get-stories": "./bin/get-stories.js",
+    "sb-rn-watcher": "./bin/watcher.js"
   },
   "files": [
     "bin/**/*",
@@ -32,29 +32,47 @@
   ],
   "scripts": {
     "preprepare": "rm -rf dist/",
-    "prepare": "tsc"
+    "prepare": "tsc",
+    "test": "jest"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node"
+    ],
+    "preset": "react-native"
   },
   "dependencies": {
     "@emotion/core": "^10.0.20",
     "@emotion/native": "^10.0.14",
-    "@storybook/addons": "^6",
-    "@storybook/channel-websocket": "^6",
-    "@storybook/channels": "^6",
-    "@storybook/client-api": "^6",
-    "@storybook/client-logger": "^6",
-    "@storybook/core-client": "^6",
-    "@storybook/core-events": "^6",
+    "@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",
     "chokidar": "^3.5.1",
+    "commander": "^8.2.0",
     "emotion-theming": "^10.0.19",
     "glob": "^7.1.7",
+    "prettier": "^2.4.1",
     "react-native-swipe-gestures": "^1.0.5",
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "@types/react-native": "^0.64.6"
+    "@types/react-native": "^0.66.15",
+    "babel-jest": "^26.6.3",
+    "jest": "^26.6.3",
+    "react-test-renderer": "17.0.2"
   },
   "peerDependencies": {
+    "@react-native-async-storage/async-storage": ">=1",
     "react": "*",
     "react-native": ">=0.57.0"
   },
@@ -64,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "11deb93dc1c4aa183624c3b1df98b5882ccd53a3"
+  "gitHead": "3490aec85c84210997f38b92afa515b6dc41b8b5"
 }

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

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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 \\"@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) {
+    decorators.forEach((decorator) => addDecorator(decorator));
+  }
+
+  if (parameters) {
+    addParameters(parameters);
+  }
+
+
+      argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer))
+
+      const getStories=() => {
+        return [require(\\"include-components/FakeStory.stories.tsx\\")];
+      }
+
+      configure(getStories, module, false)
+  "
+`;
+
+exports[`loader writeRequires when there is a story glob 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 \\"@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) {
+    decorators.forEach((decorator) => addDecorator(decorator));
+  }
+
+  if (parameters) {
+    addParameters(parameters);
+  }
+
+
+      argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer))
+
+      const getStories=() => {
+        return [require(\\"./FakeStory.stories.tsx\\")];
+      }
+
+      configure(getStories, module, false)
+  "
+`;
+
+exports[`loader writeRequires when there is no preview does not add preview related stuff 1`] = `
+"
+      /* do not change this file, it is auto generated by storybook. */
+
+      import { configure, addDecorator, addParameters, addArgsEnhancer } 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\\"
+
+      
+
+      argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer))
+
+      const getStories=() => {
+        return [require(\\"./FakeStory.stories.tsx\\")];
+      }
+
+      configure(getStories, module, false)
+  "
+`;
+
+exports[`loader writeRequires when there is no story glob or addons writes no story imports or addons 1`] = `
+"
+      /* do not change this file, it is auto generated by storybook. */
+
+      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+
+      
+
+      
+
+      
+
+      
+
+      const getStories=() => {
+        return [];
+      }
+
+      configure(getStories, module, false)
+  "
+`;

package/scripts/get-stories.js

@@ -1,3 +1,5 @@
 const { writeRequires } = require('./loader');
+const { getArguments } = require('./handle-args');
+const args = getArguments();
 
-writeRequires();
+writeRequires(args);

package/scripts/handle-args.js

@@ -0,0 +1,18 @@
+function getArguments() {
+  const { program } = require('commander');
+
+  program
+    .description('Getter and watcher for react native storybook')
+    .option(
+      '-c, --config-path <path>',
+      'The path to your config folder relative to your project-dir',
+      './.storybook'
+    )
+    .option('-a, --absolute', 'Use absolute paths for story imports');
+
+  program.parse();
+
+  return program.opts();
+}
+
+module.exports = { getArguments };

package/scripts/loader.js

@@ -1,98 +1,115 @@
 const path = require('path');
 const fs = require('fs');
 const glob = require('glob');
-const storybookRequiresLocation = '/.storybook/storybook.requires.js';
+const prettier = require('prettier');
 
-function requireUncached(module) {
-  delete require.cache[require.resolve(module)];
-  return require(module);
-}
+const cwd = process.cwd();
 
-function getMainPath() {
-  const cwd = process.cwd();
-  return path.join(cwd, '.storybook/main.js');
-}
+const previewImports = `
+  import { decorators, parameters } from './preview';
 
-function getPreviewPath() {
-  const cwd = process.cwd();
-  return path.join(cwd, '.storybook/preview.js');
-}
+  if (decorators) {
+    decorators.forEach((decorator) => addDecorator(decorator));
+  }
 
-function getPreviewExists() {
-  return fs.existsSync(getPreviewPath());
-}
+  if (parameters) {
+    addParameters(parameters);
+  }
+`;
 
-function getGlobs() {
-  // we need to invalidate the cache because otherwise the latest changes don't get loaded
-  const { stories: storyGlobs } = requireUncached(getMainPath());
+function normalizeExcludePaths(paths) {
+  // automatically convert a string to an array of a single string
+  if (typeof paths === 'string') {
+    return [paths];
+  }
+
+  // ensure the paths is an array and if any items exists, they are strings
+  if (Array.isArray(paths) && paths.every((p) => typeof p === 'string')) {
+    return paths;
+  }
 
-  return storyGlobs;
+  // when the paths aren't a string or an (empty) array of strings, return
+  return undefined;
 }
 
-function getAddons() {
-  const { addons } = requireUncached(getMainPath());
+function requireUncached(module) {
+  delete require.cache[require.resolve(module)];
+  return require(module);
+}
 
-  return addons;
+function getMain({ configPath }) {
+  const mainPath = path.resolve(cwd, configPath, 'main.js');
+  return requireUncached(mainPath);
 }
 
-function getPaths() {
-  return getGlobs().reduce((acc, storyGlob) => {
-    const paths = glob.sync(storyGlob);
-    return [...acc, ...paths.map((storyPath) => `../${storyPath}`)];
-  }, []);
+function getPreviewExists({ configPath }) {
+  const previewPath = path.resolve(cwd, configPath, 'preview.js');
+  return fs.existsSync(previewPath);
 }
 
-function writeRequires() {
-  const cwd = process.cwd();
+function writeRequires({ configPath, absolute = false }) {
+  const storybookRequiresLocation = path.resolve(cwd, configPath, 'storybook.requires.js');
+
+  const main = getMain({ configPath });
+  const reactNativeOptions = main.reactNativeOptions;
+  const excludePaths = reactNativeOptions && reactNativeOptions.excludePaths;
+  const normalizedExcludePaths = normalizeExcludePaths(excludePaths);
+
+  const storyPaths = main.stories.reduce((acc, storyGlob) => {
+    const paths = glob.sync(storyGlob, {
+      cwd: path.resolve(cwd, configPath),
+      absolute,
+      // default to always ignore (exclude) anything in node_modules
+      ignore: normalizedExcludePaths !== undefined
+        ? normalizedExcludePaths
+        : ['**/node_modules'],
+    });
+    return [...acc, ...paths];
+  }, []);
 
-  const storyPaths = getPaths();
-  const addons = getAddons();
+  fs.writeFileSync(storybookRequiresLocation, '');
 
-  fs.writeFileSync(path.join(cwd, storybookRequiresLocation), '');
+  const previewExists = getPreviewExists({ configPath });
 
-  const previewExists = getPreviewExists();
-  let previewJs = previewExists
-    ? `
-import { decorators, parameters } from './preview';
-if (decorators) {
-  decorators.forEach((decorator) => addDecorator(decorator));
-}
-if (parameters) {
-  addParameters(parameters);
-}`
-    : '';
+  let previewJs = previewExists ? previewImports : '';
 
-  const storyRequires = storyPaths.map((storyPath) => `\t\trequire("${storyPath}")`).join(', \n');
-  const path_array_str = `[\n${storyRequires}\n\t]`;
+  const storyRequires = storyPaths.map((storyPath) => `require("${storyPath}")`).join(',');
+  const path_array_str = `[${storyRequires}]`;
 
-  const registerAddons = addons.map((addon) => `import "${addon}/register";`).join('\n');
+  const registerAddons = main.addons.map((addon) => `import "${addon}/register";`).join('\n');
+  let enhancersImport = '';
   let enhancers = '';
 
   // TODO: implement presets or something similar
-  if (addons.includes('@storybook/addon-ondevice-actions')) {
-    enhancers = `import { argsEnhancers } from '@storybook/addon-actions/dist/modern/preset/addArgs';
-argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer))`;
+  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))';
   }
 
   const fileContent = `
-/*
-  do not change this file, it is auto generated by storybook.
-*/
-import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
-${registerAddons}
+      /* do not change this file, it is auto generated by storybook. */
 
-${enhancers}
+      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
 
-${previewJs}
+      ${registerAddons}
 
-const getStories=() => {
-  return ${path_array_str};
-}
-configure(getStories, module, false)
+      ${enhancersImport}
+
+      ${previewJs}
 
+      ${enhancers}
+
+      const getStories=() => {
+        return ${path_array_str};
+      }
+
+      configure(getStories, module, false)
   `;
 
-  fs.writeFileSync(path.join(cwd, storybookRequiresLocation), fileContent, {
+  const formattedFileContent = prettier.format(fileContent, { parser: 'babel' });
+
+  fs.writeFileSync(storybookRequiresLocation, formattedFileContent, {
     encoding: 'utf8',
     flag: 'w',
   });
@@ -100,8 +117,6 @@ configure(getStories, module, false)
 
 module.exports = {
   writeRequires,
-  getGlobs,
-  getMainPath,
+  getMain,
   getPreviewExists,
-  getPreviewPath,
 };

package/scripts/loader.test.js

@@ -0,0 +1,133 @@
+const path = require('path');
+const { writeRequires, getMain, getPreviewExists } = require('./loader');
+const glob = require('glob');
+
+let pathMock;
+let fileContentMock;
+
+jest.mock('fs', () => ({
+  ...jest.requireActual('fs'),
+  writeFileSync: (filePath, fileContent, opts) => {
+    pathMock = filePath;
+    fileContentMock = fileContent;
+  },
+}));
+
+jest.mock('prettier', () => ({
+  format(s, opts) {
+    return s;
+  },
+}));
+
+describe('loader', () => {
+  describe('getMain', () => {
+    it('should return the main js default export as an object', () => {
+      const main = getMain({ configPath: path.resolve(__dirname, 'mocks/all-config-files') });
+      expect(main).toEqual({
+        stories: ['./FakeStory.stories.tsx'],
+        addons: [
+          '@storybook/addon-ondevice-notes',
+          '@storybook/addon-ondevice-controls',
+          '@storybook/addon-ondevice-backgrounds',
+          '@storybook/addon-ondevice-actions',
+        ],
+      });
+    });
+
+    it('should also work with relative paths', () => {
+      // relative from where the command is run
+      const main = getMain({ configPath: './scripts/mocks/all-config-files' });
+      expect(main).toEqual({
+        stories: ['./FakeStory.stories.tsx'],
+        addons: [
+          '@storybook/addon-ondevice-notes',
+          '@storybook/addon-ondevice-controls',
+          '@storybook/addon-ondevice-backgrounds',
+          '@storybook/addon-ondevice-actions',
+        ],
+      });
+    });
+  });
+
+  describe('getPreviewExists', () => {
+    describe('when using a relative path', () => {
+      it('should return true if the preview exists', () => {
+        expect(getPreviewExists({ configPath: 'scripts/mocks/all-config-files' })).toBe(true);
+      });
+
+      it('should return false if the preview does not exist', () => {
+        expect(getPreviewExists({ configPath: './scripts/mocks/no-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);
+      });
+
+      it('should return false if the preview does not exist', () => {
+        expect(getPreviewExists({ configPath: path.resolve(__dirname, 'mocks/no-preview') })).toBe(
+          false
+        );
+      });
+    });
+  });
+
+  describe('writeRequires', () => {
+    describe('when there is a story glob', () => {
+      it('writes the story imports', () => {
+        writeRequires({ configPath: 'scripts/mocks/all-config-files' });
+        expect(pathMock).toEqual(
+          path.resolve(__dirname, 'mocks/all-config-files/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' });
+        expect(pathMock).toEqual(
+          path.resolve(__dirname, 'mocks/exclude-config-files/storybook.requires.js')
+        );
+
+        expect(fileContentMock).toContain('include-components/FakeStory.stories.tsx');
+        expect(fileContentMock).not.toContain('exclude-components/FakeStory.stories.tsx');
+
+        expect(fileContentMock).toMatchSnapshot();
+      });
+    });
+
+    describe('when there is no story glob or addons', () => {
+      it('writes no story imports or addons', () => {
+        writeRequires({ configPath: 'scripts/mocks/blank-config' });
+        expect(pathMock).toEqual(
+          path.resolve(__dirname, 'mocks/blank-config/storybook.requires.js')
+        );
+        expect(fileContentMock).toMatchSnapshot();
+      });
+    });
+
+    describe('when there is no preview', () => {
+      it('does not add preview related stuff', () => {
+        writeRequires({ configPath: 'scripts/mocks/no-preview' });
+        expect(pathMock).toEqual(path.resolve(__dirname, 'mocks/no-preview/storybook.requires.js'));
+        expect(fileContentMock).toMatchSnapshot();
+      });
+    });
+
+    describe('when the absolute option is true', () => {
+      it('should write absolute paths to the requires file', () => {
+        writeRequires({ configPath: 'scripts/mocks/all-config-files', absolute: true });
+        expect(pathMock).toEqual(
+          path.resolve(__dirname, 'mocks/all-config-files/storybook.requires.js')
+        );
+        expect(fileContentMock).toContain(
+          path.resolve(__dirname, 'mocks/all-config-files/FakeStory.stories.tsx')
+        );
+      });
+    });
+  });
+});

package/scripts/mocks/all-config-files/FakeComponent.tsx

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

package/scripts/mocks/all-config-files/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/all-config-files/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/all-config-files/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/blank-config/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: [],
+  addons: [],
+};

package/scripts/mocks/exclude-config-files/exclude-components/FakeComponent.tsx

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

package/scripts/mocks/exclude-config-files/exclude-components/FakeStory.stories.tsx

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

package/scripts/mocks/exclude-config-files/include-components/FakeComponent.tsx

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

package/scripts/mocks/exclude-config-files/include-components/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/exclude-config-files/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  stories: ['**/*.stories.tsx'],
+  reactNativeOptions: {
+    excludePaths: '**/exclude-components/**',
+  },
+  addons: [
+    '@storybook/addon-ondevice-notes',
+    '@storybook/addon-ondevice-controls',
+    '@storybook/addon-ondevice-backgrounds',
+    '@storybook/addon-ondevice-actions',
+  ],
+};

package/scripts/mocks/exclude-config-files/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/no-preview/FakeComponent.tsx

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

package/scripts/mocks/no-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/no-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/watcher.js

@@ -1,29 +1,62 @@
 const chokidar = require('chokidar');
 const path = require('path');
-const {
-  getGlobs,
-  writeRequires,
-  getMainPath,
-  getPreviewPath,
-  getPreviewExists,
-} = require('./loader');
 
+const { writeRequires, getMain, getPreviewExists } = require('./loader');
+
+const { getArguments } = require('./handle-args');
+
+const args = getArguments();
 const log = console.log.bind(console);
 
-const watchPaths = [getMainPath()];
-if (getPreviewExists()) {
-  watchPaths.push(getPreviewPath());
+const watchPaths = ['./main.js'];
+
+if (getPreviewExists(args)) {
+  watchPaths.push('./preview.js');
 }
 
 const updateRequires = (event, watchPath) => {
   if (typeof watchPath === 'string') {
     log(`event ${event} for file ${path.basename(watchPath)}`);
   }
-  writeRequires();
+  writeRequires(args);
 };
 
-chokidar.watch(watchPaths).on('change', (watchPath) => updateRequires('change', watchPath));
+const globs = getMain(args).stories;
+
+chokidar
+  .watch(watchPaths, { cwd: args.configPath })
+  .on('change', (watchPath) => updateRequires('change', watchPath));
+
+let isReady = false;
+
 chokidar
-  .watch(getGlobs())
-  .on('add', (watchPath) => updateRequires('add', watchPath))
-  .on('unlink', (watchPath) => updateRequires('unlink', watchPath));
+  .watch(globs, { cwd: args.configPath })
+  .on('ready', () => {
+    log('Watcher is ready, performing initial write');
+    writeRequires(args);
+    log('Waiting for changes, press r to manually re-write');
+    isReady = true;
+  })
+  .on('add', (watchPath) => {
+    if (isReady) {
+      updateRequires('add', watchPath);
+    }
+  })
+  .on('unlink', (watchPath) => {
+    if (isReady) {
+      updateRequires('unlink', watchPath);
+    }
+  });
+
+const readline = require('readline');
+readline.emitKeypressEvents(process.stdin);
+process.stdin.setRawMode(true);
+process.stdin.on('keypress', (str, key) => {
+  if (key.ctrl && key.name === 'c') {
+    process.exit();
+  }
+  if (key.name === 'r') {
+    log('Detected "r" keypress, rewriting story imports...');
+    writeRequires(args);
+  }
+});