@storybook/react-native 6.0.1-alpha.5 → 6.0.1-beta.1

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.js

@@ -25,7 +25,7 @@ export default class Preview {
             return this._clientApi;
         };
         this.getStorybookUI = (params = {}) => {
-            const { initialSelection, shouldPersistSelection } = params;
+            const { initialSelection, shouldPersistSelection = true } = params;
             this._setInitialStory(initialSelection, shouldPersistSelection);
             this._channel.on(Events.SET_CURRENT_STORY, (d) => {
                 this._selectStoryEvent(d, shouldPersistSelection);

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.5",
+  "version": "6.0.1-beta.1",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -49,13 +49,13 @@
   "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",
@@ -66,7 +66,7 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "@types/react-native": "^0.65.1",
+    "@types/react-native": "^0.66.15",
     "babel-jest": "^26.6.3",
     "jest": "^26.6.3",
     "react-test-renderer": "17.0.2"
@@ -82,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6f8419cefb00be5cf88132a626b768ec8a332515"
+  "gitHead": "bad70d5d87f5ce1d72b8bdd466fb67fa30b0cf27"
 }

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

@@ -1,5 +1,40 @@
 // 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. */

package/scripts/loader.js

@@ -17,6 +17,21 @@ const previewImports = `
   }
 `;
 
+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;
+  }
+
+  // when the paths aren't a string or an (empty) array of strings, return
+  return undefined;
+}
+
 function requireUncached(module) {
   delete require.cache[require.resolve(module)];
   return require(module);
@@ -36,8 +51,19 @@ 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 });
+    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];
   }, []);
 

package/scripts/loader.test.js

@@ -86,6 +86,20 @@ describe('loader', () => {
       });
     });
 
+    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' });

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 },
+});