@storybook/react-native 6.0.1-alpha.2 → 6.0.1-alpha.7

package/babel.config.js

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

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

@@ -1,24 +1,79 @@
+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 { 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 {
-    _clientApi;
-    _storyStore;
-    _addons;
-    _channel;
-    _decorators;
-    _asyncStorageStoryId;
-    _asyncStorage;
-    _configApi;
-    configure;
     constructor() {
+        this.api = () => {
+            return this._clientApi;
+        };
+        this.getStorybookUI = (params = {}) => {
+            const { initialSelection, shouldPersistSelection } = 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
+                ? toId(initialSelection.kind, initialSelection.name)
+                : undefined;
+            if (initialSelection && initialSelectionId && 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 });
@@ -33,74 +88,13 @@ export default class Preview {
         this.configure = (...args) => configure('react-native', ...args);
         addons.setChannel(channel);
     }
-    api = () => {
-        return this._clientApi;
-    };
-    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;
-        this._setInitialStory(initialSelection, shouldPersistSelection);
-        this._channel.on(Events.SET_CURRENT_STORY, (d) => {
-            this._selectStoryEvent(d);
-        });
-        const { _storyStore } = this;
-        addons.loadAddons(this._clientApi);
-        const appliedTheme = { ...theme, ...params.theme };
-        return () => (<ThemeProvider theme={appliedTheme}>
-        <OnDeviceUI storyStore={_storyStore} isUIHidden={params.isUIHidden} tabOpen={params.tabOpen} shouldDisableKeyboardAvoidingView={params.shouldDisableKeyboardAvoidingView} keyboardAvoidingViewVerticalOffset={params.keyboardAvoidingViewVerticalOffset}/>
-      </ThemeProvider>);
-    };
-    _setInitialStory = async (initialSelection, shouldPersistSelection = true) => {
-        const story = await this._getInitialStory(initialSelection, shouldPersistSelection);
-        if (story) {
-            this._selectStory(story);
-        }
-    };
-    _getInitialStory = async (initialSelection, shouldPersistSelection = true) => {
-        let story = null;
-        if (initialSelection && this._checkStory(initialSelection)) {
-            story = initialSelection;
-        }
-        else if (shouldPersistSelection) {
-            try {
-                let value = this._asyncStorageStoryId;
-                if (!value && this._asyncStorage) {
-                    value = JSON.parse(await this._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;
-    };
     _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);
@@ -115,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,
@@ -36,7 +38,8 @@ const styles = StyleSheet.create({
     expoAndroidContainer: { paddingTop: StatusBar.currentHeight },
 });
 const useSelectedStory = (storyStore) => {
-    const [storyId, setStoryId] = useState(storyStore.getSelection()?.storyId || '');
+    var _a;
+    const [storyId, setStoryId] = useState(((_a = storyStore.getSelection()) === null || _a === void 0 ? void 0 : _a.storyId) || '');
     const [, forceUpdate] = useReducer((x) => x + 1, 0);
     const channel = useRef(addons.getChannel());
     useEffect(() => {
@@ -61,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;
@@ -80,29 +84,21 @@ 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)];
-    return (<SafeAreaView style={[flex, IS_ANDROID && IS_EXPO && styles.expoAndroidContainer]}>
-      <KeyboardAvoidingView enabled={!shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW} behavior={IS_IOS ? 'padding' : null} keyboardVerticalOffset={keyboardAvoidingViewVerticalOffset} style={flex}>
-        <AbsolutePositionedKeyboardAwareView onLayout={setPreviewDimensions} previewDimensions={previewDimensions}>
-          <Animated.View style={previewWrapperStyles}>
-            <Animated.View style={previewStyles}>
-              <Preview disabled={tabOpen === PREVIEW}>
-                <StoryView story={story}/>
-              </Preview>
-              {tabOpen !== PREVIEW ? (<TouchableOpacity style={absolutePosition} onPress={() => handleToggleTab(PREVIEW)}/>) : null}
-            </Animated.View>
-          </Animated.View>
-          <Panel style={getNavigatorPanelPosition(animatedValue.current, previewDimensions.width)}>
-            <StoryListView storyStore={storyStore} selectedStory={story}/>
-          </Panel>
-          <Panel style={getAddonPanelPosition(animatedValue.current, previewDimensions.width)}>
-            <Addons active={tabOpen === ADDONS}/>
-          </Panel>
-        </AbsolutePositionedKeyboardAwareView>
-        <Navigation tabOpen={tabOpen} onChangeTab={handleToggleTab} initialUiVisible={!isUIHidden}/>
-      </KeyboardAvoidingView>
-    </SafeAreaView>);
+    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 },
+                React.createElement(Animated.View, { style: previewWrapperStyles },
+                    React.createElement(Animated.View, { style: previewStyles },
+                        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, wide) },
+                    React.createElement(StoryListView, { storyStore: storyStore, selectedStory: story })),
+                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 }))));
 };
 export default React.memo(OnDeviceUI);

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

@@ -4,5 +4,5 @@ import styled from '@emotion/native';
 const Container = styled(Animated.View)(({ theme }) => ({
     backgroundColor: theme.backgroundColor || 'white',
 }));
-const Panel = ({ children, style }) => (<Container style={[StyleSheet.absoluteFillObject, ...style]}>{children}</Container>);
+const Panel = ({ children, style }) => (React.createElement(Container, { style: [StyleSheet.absoluteFillObject, ...style] }, children));
 export default React.memo(Panel);

package/dist/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.js

@@ -9,13 +9,10 @@ const AbsolutePositionedKeyboardAwareView = ({ onLayout, previewDimensions: { wi
             width: nativeEvent.layout.width,
         });
     };
-    return (<View style={styles.container} onLayout={onLayoutHandler}>
-      <View style={width === 0
-            ? styles.container
-            : [styles.absolute, { position: 'absolute', width, height }]}>
-        {children}
-      </View>
-    </View>);
+    return (React.createElement(View, { style: styles.container, onLayout: onLayoutHandler },
+        React.createElement(View, { style: width === 0
+                ? styles.container
+                : [styles.absolute, { position: 'absolute', width, height }] }, children)));
 };
 const styles = StyleSheet.create({
     absolute: { position: 'absolute' },

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

@@ -18,18 +18,14 @@ const Addons = ({ active }) => {
     const panels = addons.getElements('panel');
     const [addonSelected, setAddonSelected] = useState(Object.keys(panels)[0] || null);
     if (Object.keys(panels).length === 0) {
-        return (<SafeAreaView style={styles.container}>
-        <NoAddonContainer>
-          <Label>No addons loaded.</Label>
-        </NoAddonContainer>
-      </SafeAreaView>);
+        return (React.createElement(SafeAreaView, { style: styles.container },
+            React.createElement(NoAddonContainer, null,
+                React.createElement(Label, null, "No addons loaded."))));
     }
-    return (<Container>
-      <SafeAreaView style={styles.container}>
-        <AddonsList onPressAddon={setAddonSelected} panels={panels} addonSelected={active ? addonSelected : null}/>
-        <AddonWrapper addonSelected={active ? addonSelected : null} panels={panels}/>
-      </SafeAreaView>
-    </Container>);
+    return (React.createElement(Container, null,
+        React.createElement(SafeAreaView, { style: styles.container },
+            React.createElement(AddonsList, { onPressAddon: setAddonSelected, panels: panels, addonSelected: active ? addonSelected : null }),
+            React.createElement(AddonWrapper, { addonSelected: active ? addonSelected : null, panels: panels }))));
 };
 const styles = StyleSheet.create({
     container: { flex: 1 },

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

@@ -9,17 +9,12 @@ const Container = styled.View(({ theme }) => ({
 }));
 const AddonList = ({ panels, addonSelected, onPressAddon }) => {
     const addonKeys = Object.keys(panels);
-    const renderTab = (id, title) => (<Button active={id === addonSelected} key={id} id={id} onPress={() => onPressAddon(id)}>
-      {title.toUpperCase()}
-    </Button>);
-    return (<Container>
-      <ScrollView showsHorizontalScrollIndicator={false} horizontal>
-        {addonKeys.map((id) => {
+    const renderTab = (id, title) => (React.createElement(Button, { active: id === addonSelected, key: id, id: id, onPress: () => onPressAddon(id) }, title.toUpperCase()));
+    return (React.createElement(Container, null,
+        React.createElement(ScrollView, { showsHorizontalScrollIndicator: false, horizontal: true }, addonKeys.map((id) => {
             const { title } = panels[id];
             const resolvedTitle = typeof title === 'function' ? title() : title;
             return renderTab(id, resolvedTitle);
-        })}
-      </ScrollView>
-    </Container>);
+        }))));
 };
 export default React.memo(AddonList);

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

@@ -15,10 +15,9 @@ const Wrapper = ({ panels, addonSelected }) => {
     const addonKeys = Object.keys(panels);
     const content = addonKeys.map((id) => {
         const selected = addonSelected === id;
-        return (<View key={id} style={selected ? style.flex : style.invisible}>
-        <ScrollView>{panels[id].render({ active: selected, key: id })}</ScrollView>
-      </View>);
+        return (React.createElement(View, { key: id, style: selected ? style.flex : style.invisible },
+            React.createElement(ScrollView, null, panels[id].render({ active: selected, key: id }))));
     });
-    return <>{content}</>;
+    return React.createElement(React.Fragment, null, content);
 };
 export default React.memo(Wrapper);

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/dist/preview/components/OnDeviceUI/navigation/Bar.js

@@ -10,15 +10,8 @@ const Container = styled.View(({ theme }) => ({
     borderBottomWidth: 1,
     borderColor: theme.borderColor || '#e6e6e6',
 }));
-const Bar = ({ index, onPress }) => (<Container>
-    <Button onPress={onPress} testID="BottomMenu.Navigator" id={NAVIGATOR} active={index === NAVIGATOR}>
-      NAVIGATOR
-    </Button>
-    <Button onPress={onPress} testID="BottomMenu.Preview" id={PREVIEW} active={index === PREVIEW}>
-      PREVIEW
-    </Button>
-    <Button onPress={onPress} testID="BottomMenu.Addons" id={ADDONS} active={index === ADDONS}>
-      ADDONS
-    </Button>
-  </Container>);
+const Bar = ({ index, onPress }) => (React.createElement(Container, null,
+    React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Navigator", id: NAVIGATOR, active: index === NAVIGATOR }, "NAVIGATOR"),
+    React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Preview", id: PREVIEW, active: index === PREVIEW }, "PREVIEW"),
+    React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Addons", id: ADDONS, active: index === ADDONS }, "ADDONS")));
 export default React.memo(Bar);

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

@@ -11,8 +11,7 @@ const ButtonText = styled.Text(({ theme, active }) => ({
     paddingVertical: 10,
     fontSize: 11,
 }));
-const Button = ({ onPress, id, active, children, testID }) => (<TouchableOpacity testID={testID} onPress={() => onPress(id)} activeOpacity={0.8}>
-    <ButtonText active={active}>{children}</ButtonText>
-    <ActiveBorder active={active}/>
-  </TouchableOpacity>);
+const Button = ({ onPress, id, active, children, testID }) => (React.createElement(TouchableOpacity, { testID: testID, onPress: () => onPress(id), activeOpacity: 0.8 },
+    React.createElement(ButtonText, { active: active }, children),
+    React.createElement(ActiveBorder, { active: active })));
 export default React.memo(Button);

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

@@ -22,15 +22,11 @@ const Navigation = ({ tabOpen, onChangeTab, initialUiVisible }) => {
             onChangeTab(tabOpen - 1);
         }
     };
-    return (<View>
-      <SafeAreaView>
-        {isUIVisible && (<GestureRecognizer onSwipeLeft={handleSwipeLeft} onSwipeRight={handleSwipeRight} config={SWIPE_CONFIG}>
-            <Bar index={tabOpen} onPress={onChangeTab}/>
-          </GestureRecognizer>)}
-        <View>
-          <VisibilityButton onPress={handleToggleUI}/>
-        </View>
-      </SafeAreaView>
-    </View>);
+    return (React.createElement(View, null,
+        React.createElement(SafeAreaView, null,
+            isUIVisible && (React.createElement(GestureRecognizer, { onSwipeLeft: handleSwipeLeft, onSwipeRight: handleSwipeRight, config: SWIPE_CONFIG },
+                React.createElement(Bar, { index: tabOpen, onPress: onChangeTab }))),
+            React.createElement(View, null,
+                React.createElement(VisibilityButton, { onPress: handleToggleUI })))));
 };
 export default React.memo(Navigation);

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

@@ -11,7 +11,6 @@ const HideIcon = styled.Text(({ theme }) => ({
     fontSize: 14,
     color: theme.buttonTextColor || '#999999',
 }));
-const VisibilityButton = ({ onPress }) => (<Touchable onPress={onPress} testID="Storybook.OnDeviceUI.toggleUI" accessibilityLabel="Storybook.OnDeviceUI.toggleUI" hitSlop={{ top: 5, left: 5, bottom: 5, right: 5 }}>
-    <HideIcon>□</HideIcon>
-  </Touchable>);
+const VisibilityButton = ({ onPress }) => (React.createElement(Touchable, { onPress: onPress, testID: "Storybook.OnDeviceUI.toggleUI", accessibilityLabel: "Storybook.OnDeviceUI.toggleUI", hitSlop: { top: 5, left: 5, bottom: 5, right: 5 } },
+    React.createElement(HideIcon, null, "\u25A1")));
 export default React.memo(VisibilityButton);