@storybook/react-native 6.5.0-rc.1 → 6.5.0-rc.10

package/dist/constants.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Duration for a typical transition animation, such as rescaling the canvas
+ * UI.
+ */
+export declare const ANIMATION_DURATION_TRANSITION = 400;

package/dist/constants.js

@@ -0,0 +1,5 @@
+/**
+ * Duration for a typical transition animation, such as rescaling the canvas
+ * UI.
+ */
+export const ANIMATION_DURATION_TRANSITION = 400;

package/dist/hooks.d.ts

@@ -1,4 +1,5 @@
 import type { StoryContext } from '@storybook/csf';
+import type { Theme } from './preview/components/Shared/theme';
 import type { ReactNativeFramework } from './types/types-6.0';
 /**
  * Hook that returns a function to set the current story context.
@@ -20,3 +21,46 @@ export declare function useIsStorySelected(storyId: string): boolean;
  * Hook that indicates if `title` is the currently selected story section.
  */
 export declare function useIsStorySectionSelected(title: string): boolean;
+/**
+ * Hook that causes a re-render when the currently selected story is changed.
+ */
+export declare function useUpdateOnStoryChanged(): void;
+/**
+ * Hook that gets the current theme values.
+ */
+export declare function useTheme(): Theme;
+/**
+ * A boolean atom creator for an atom that can only be toggled between
+ * true/false.
+ *
+ * @see {@link https://jotai.org/docs/recipes/atom-creators#atomwithtoggle}
+ */
+export declare function atomWithToggle(initialValue?: boolean): import("jotai").WritableAtom<boolean, [nextValue?: boolean], void> & {
+    init: boolean;
+};
+/**
+ * Hook that retrieves the current state, and a setter, for the `isUIVisible`
+ * atom.
+ */
+export declare function useIsUIVisible(): [boolean, (nextValue?: boolean) => void];
+/**
+ * Hook that retrieves the current state, and a setter, for the
+ * `isSplitPanelVisibleAtom` atom.
+ */
+export declare function useIsSplitPanelVisible(): [boolean, (nextValue?: boolean) => void];
+interface SyncExternalUIParams {
+    isUIVisible?: boolean;
+    isSplitPanelVisible?: boolean;
+}
+/**
+ * Sync the UI atom states with external values, such as from Story parameters.
+ */
+export declare function syncExternalUI({ isUIVisible, isSplitPanelVisible }: SyncExternalUIParams): void;
+/**
+ * Hook that manages the state for the currently selected addon.
+ *
+ * This value persists across stories, so that the same addon will be selected
+ * when switching stories.
+ */
+export declare function useSelectedAddon(initialValue?: string): [string, (args_0: string | ((prev: string) => string)) => void];
+export {};

package/dist/hooks.js

@@ -1,5 +1,6 @@
-import { useMemo } from 'react';
-import { atom, useAtomValue, useSetAtom } from 'jotai';
+import React, { useMemo } from 'react';
+import { atom, useAtom, useAtomValue, useSetAtom, getDefaultStore } from 'jotai';
+import { useTheme as useEmotionTheme } from 'emotion-theming';
 const storyContextAtom = atom(null);
 /**
  * Hook that returns a function to set the current story context.
@@ -18,18 +19,92 @@ export function useStoryContext() {
  */
 export function useStoryContextParam(name, defaultValue) {
     var _a;
-    const paramAtom = useMemo(() => atom(get => { var _a, _b; return (_b = (_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.parameters) === null || _b === void 0 ? void 0 : _b[name]; }), [name]);
+    const paramAtom = useMemo(() => atom((get) => { var _a, _b; return (_b = (_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.parameters) === null || _b === void 0 ? void 0 : _b[name]; }), [name]);
     return (_a = useAtomValue(paramAtom)) !== null && _a !== void 0 ? _a : defaultValue;
 }
 /**
  * Hook that indicates if `storyId` is the currently selected story.
  */
 export function useIsStorySelected(storyId) {
-    return useAtomValue(useMemo(() => atom(get => { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.id) === storyId; }), [storyId]));
+    return useAtomValue(useMemo(() => atom((get) => { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.id) === storyId; }), [storyId]));
 }
 /**
  * Hook that indicates if `title` is the currently selected story section.
  */
 export function useIsStorySectionSelected(title) {
-    return useAtomValue(useMemo(() => atom(get => { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.title) === title; }), [title]));
+    return useAtomValue(useMemo(() => atom((get) => { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.title) === title; }), [title]));
+}
+/**
+ * Hook that causes a re-render when the currently selected story is changed.
+ */
+export function useUpdateOnStoryChanged() {
+    useAtomValue(useMemo(() => atom((get) => { var _a; return (_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.id; }), []));
+}
+/**
+ * Hook that gets the current theme values.
+ */
+export function useTheme() {
+    return useEmotionTheme();
+}
+/**
+ * A boolean atom creator for an atom that can only be toggled between
+ * true/false.
+ *
+ * @see {@link https://jotai.org/docs/recipes/atom-creators#atomwithtoggle}
+ */
+export function atomWithToggle(initialValue) {
+    const anAtom = atom(initialValue, (get, set, nextValue) => {
+        const update = nextValue !== null && nextValue !== void 0 ? nextValue : !get(anAtom);
+        set(anAtom, update);
+    });
+    return anAtom;
+}
+const isUIVisibleAtom = atomWithToggle(true);
+/**
+ * Hook that retrieves the current state, and a setter, for the `isUIVisible`
+ * atom.
+ */
+export function useIsUIVisible() {
+    return useAtom(isUIVisibleAtom);
+}
+const isSplitPanelVisibleAtom = atomWithToggle(false);
+/**
+ * Hook that retrieves the current state, and a setter, for the
+ * `isSplitPanelVisibleAtom` atom.
+ */
+export function useIsSplitPanelVisible() {
+    return useAtom(isSplitPanelVisibleAtom);
+}
+/**
+ * Sync the UI atom states with external values, such as from Story parameters.
+ */
+export function syncExternalUI({ isUIVisible, isSplitPanelVisible }) {
+    const jotaiStore = getDefaultStore();
+    if (isUIVisible !== undefined) {
+        jotaiStore.set(isUIVisibleAtom, isUIVisible);
+    }
+    if (isSplitPanelVisible !== undefined) {
+        jotaiStore.set(isSplitPanelVisibleAtom, isSplitPanelVisible);
+    }
+}
+const selectedAddonAtom = atom(undefined);
+/**
+ * Hook that manages the state for the currently selected addon.
+ *
+ * This value persists across stories, so that the same addon will be selected
+ * when switching stories.
+ */
+export function useSelectedAddon(initialValue) {
+    const result = useAtom(selectedAddonAtom);
+    const set = result[1];
+    React.useEffect(() => {
+        const jotaiStore = getDefaultStore();
+        // Only apply the initial value once, and only if the atom doesn't have a
+        // value yet.
+        if (jotaiStore.get(selectedAddonAtom) === undefined) {
+            set(initialValue);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return result;
 }

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import { ReactNode } from 'react';
 import type { ReactNativeFramework } from './types/types-6.0';
 declare const configure: (loadable: import("@storybook/core-client").Loadable, m: NodeModule) => void;
 export { configure };
-declare type C = ClientApi<ReactNativeFramework>;
+type C = ClientApi<ReactNativeFramework>;
 export declare const setAddon: C['setAddon'];
 export declare const addDecorator: C['addDecorator'];
 export declare const addParameters: C['addParameters'];
@@ -18,3 +18,4 @@ export declare const raw: C['raw'];
 export declare const storiesOf: (kind: string, _module: NodeModule) => StoryApi<ReactNode>;
 export declare const getStorybookUI: (params?: Partial<import("./preview/View").Params>) => () => JSX.Element;
 export * from './types/types-6.0';
+export { theme, darkTheme } from './preview/components/Shared/theme';

package/dist/index.js

@@ -1,3 +1,4 @@
+var _a;
 import { start } from './preview/start';
 const { clientApi, configure, view } = start();
 export { configure };
@@ -15,3 +16,8 @@ export const storiesOf = (kind, _module) => rawStoriesOf(kind, { hot: () => { }
 });
 export const getStorybookUI = view.getStorybookUI;
 export * from './types/types-6.0';
+// @storybook/addon-storyshots v6 needs global.__STORYBOOK_STORY_STORE__.initializationPromise
+global.__STORYBOOK_STORY_STORE__ = {
+    initializationPromise: (_a = clientApi.storyStore) === null || _a === void 0 ? void 0 : _a.initializationPromise,
+};
+export { theme, darkTheme } from './preview/components/Shared/theme';

package/dist/preview/View.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { StoryIndex, SelectionSpecifier } from '@storybook/store';
 import { StoryContext } from '@storybook/csf';
-import { theme } from './components/Shared/theme';
+import { Theme } from './components/Shared/theme';
 import type { ReactNativeFramework } from '../types/types-6.0';
 import { PreviewWeb } from '@storybook/preview-web';
-declare type StoryKind = string;
-declare type StoryName = string;
-declare type InitialSelection = `${StoryKind}--${StoryName}` | {
+type StoryKind = string;
+type StoryName = string;
+type InitialSelection = `${StoryKind}--${StoryName}` | {
     /**
      * Kind is the default export name or the storiesOf("name") name
      */
@@ -16,7 +16,10 @@ declare type InitialSelection = `${StoryKind}--${StoryName}` | {
      */
     name: StoryName;
 };
-export declare type Params = {
+type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+export type Params = {
     onDeviceUI?: boolean;
     enableWebsockets?: boolean;
     query?: string;
@@ -27,10 +30,10 @@ export declare type Params = {
     shouldPersistSelection?: boolean;
     tabOpen?: number;
     isUIHidden?: boolean;
+    isSplitPanelVisible?: boolean;
     shouldDisableKeyboardAvoidingView?: boolean;
     keyboardAvoidingViewVerticalOffset?: number;
-} & {
-    theme?: typeof theme;
+    theme: DeepPartial<Theme>;
 };
 export declare class View {
     _storyIndex: StoryIndex;

package/dist/preview/View.js

@@ -13,13 +13,15 @@ import { toId } from '@storybook/csf';
 import { addons } from '@storybook/addons';
 import { ThemeProvider } from 'emotion-theming';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { useSetStoryContext } from '../hooks';
+import { useSetStoryContext, syncExternalUI } from '../hooks';
 import OnDeviceUI from './components/OnDeviceUI';
-import { theme } from './components/Shared/theme';
+import { darkTheme, theme } from './components/Shared/theme';
 import StoryView from './components/StoryView';
 import createChannel from '@storybook/channel-websocket';
 import getHost from './rn-host-detect';
 import events from '@storybook/core-events';
+import { Appearance } from 'react-native';
+import deepmerge from 'deepmerge';
 const STORAGE_KEY = 'lastOpenedStory';
 export class View {
     constructor(preview) {
@@ -65,6 +67,7 @@ export class View {
             });
         };
         this.getStorybookUI = (params = {}) => {
+            var _a;
             const { shouldPersistSelection = true, onDeviceUI = true, enableWebsockets = false } = params;
             const initialStory = this._getInitialStory(params);
             if (enableWebsockets) {
@@ -87,7 +90,12 @@ export class View {
             });
             // eslint-disable-next-line consistent-this
             const self = this;
-            const appliedTheme = Object.assign(Object.assign({}, theme), params.theme);
+            const appliedTheme = deepmerge(Appearance.getColorScheme() === 'dark' ? darkTheme : theme, (_a = params.theme) !== null && _a !== void 0 ? _a : {});
+            // Sync the Storybook parameters (external) with app UI state (internal), to initialise them.
+            syncExternalUI({
+                isUIVisible: params.isUIHidden !== undefined ? !params.isUIHidden : undefined,
+                isSplitPanelVisible: params.isSplitPanelVisible,
+            });
             return () => {
                 const setContext = useSetStoryContext();
                 const [, forceUpdate] = useReducer((x) => x + 1, 0);
@@ -110,7 +118,7 @@ export class View {
                 if (onDeviceUI) {
                     return (React.createElement(SafeAreaProvider, null,
                         React.createElement(ThemeProvider, { theme: appliedTheme },
-                            React.createElement(OnDeviceUI, { storyIndex: self._storyIndex, isUIHidden: params.isUIHidden, tabOpen: params.tabOpen, shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset }))));
+                            React.createElement(OnDeviceUI, { storyIndex: self._storyIndex, tabOpen: params.tabOpen, shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset }))));
                 }
                 else {
                     return React.createElement(StoryView, null);

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

@@ -5,9 +5,8 @@ interface OnDeviceUIProps {
     storyIndex: StoryIndex;
     url?: string;
     tabOpen?: number;
-    isUIHidden?: boolean;
     shouldDisableKeyboardAvoidingView?: boolean;
     keyboardAvoidingViewVerticalOffset?: number;
 }
-declare const _default: React.MemoExoticComponent<({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }: OnDeviceUIProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ storyIndex, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }: OnDeviceUIProps) => JSX.Element>;
 export default _default;

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

@@ -1,18 +1,19 @@
 import styled from '@emotion/native';
 import React, { useState, useRef } from 'react';
-import { Animated, Dimensions, Keyboard, KeyboardAvoidingView, Platform, SafeAreaView, TouchableOpacity, StatusBar, StyleSheet, View, } from 'react-native';
-import { useStoryContextParam } from '../../../hooks';
+import { Animated, Dimensions, Easing, Keyboard, KeyboardAvoidingView, Platform, TouchableOpacity, StatusBar, StyleSheet, View, } from 'react-native';
+import { useIsSplitPanelVisible, useIsUIVisible, useStoryContextParam, useTheme, } from '../../../hooks';
+import { ANIMATION_DURATION_TRANSITION } from '../../../constants';
 import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
 import AbsolutePositionedKeyboardAwareView from './absolute-positioned-keyboard-aware-view';
 import Addons from './addons/Addons';
-import { getAddonPanelPosition, getNavigatorPanelPosition, getPreviewPosition, getPreviewScale, } from './animation';
+import { AddonsSkeleton } from './addons/AddonsSkeleton';
+import { getAddonPanelPosition, getSidebarPanelPosition, getPreviewShadowStyle, getPreviewStyle, } from './animation';
 import Navigation from './navigation';
-import { PREVIEW, ADDONS } from './navigation/constants';
+import { CANVAS, ADDONS } from './navigation/constants';
 import Panel from './Panel';
 import { useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-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;
@@ -20,28 +21,22 @@ 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,
-    borderTopWidth: disabled ? 0 : 1,
-    borderRightWidth: disabled ? 0 : 1,
-    borderBottomWidth: disabled ? 0 : 1,
-    borderColor: disabled ? 'transparent' : theme.previewBorderColor,
-    borderRadius: disabled ? 0 : 12,
-    overflow: 'hidden',
-}));
-const absolutePosition = {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-};
+/**
+ * Story preview container.
+ */
+function Preview({ animatedValue, style, children }) {
+    const theme = useTheme();
+    const containerStyle = Object.assign({ backgroundColor: theme.preview.backgroundColor }, getPreviewShadowStyle(animatedValue));
+    return (React.createElement(Animated.View, { style: [flex, containerStyle] },
+        React.createElement(View, { style: [flex, style] }, children)));
+}
 const styles = StyleSheet.create({
     expoAndroidContainer: { paddingTop: StatusBar.currentHeight },
 });
-const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }) => {
-    const [tabOpen, setTabOpen] = useState(initialTabOpen || PREVIEW);
-    const [slideBetweenAnimation, setSlideBetweenAnimation] = useState(false);
+const Container = styled.View(({ theme }) => (Object.assign(Object.assign({ flex: 1, backgroundColor: theme.preview.containerBackgroundColor }, (IS_ANDROID && IS_EXPO ? styles.expoAndroidContainer : undefined)), Platform.select({ web: { overflow: 'hidden' } }))));
+const OnDeviceUI = ({ storyIndex, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }) => {
+    const [tabOpen, setTabOpen] = useState(initialTabOpen || CANVAS);
+    const lastTabOpen = React.useRef(tabOpen);
     const [previewDimensions, setPreviewDimensions] = useState(() => ({
         width: Dimensions.get('window').width,
         height: Dimensions.get('window').height,
@@ -49,56 +44,89 @@ const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView,
     const animatedValue = useRef(new Animated.Value(tabOpen));
     const wide = useWindowDimensions().width >= BREAKPOINT;
     const insets = useSafeAreaInsets();
-    const [isUIVisible, setIsUIVisible] = useState(isUIHidden !== undefined ? !isUIHidden : true);
     const handleToggleTab = React.useCallback((newTabOpen) => {
         if (newTabOpen === tabOpen) {
             return;
         }
+        lastTabOpen.current = tabOpen;
         Animated.timing(animatedValue.current, {
             toValue: newTabOpen,
-            duration: ANIMATION_DURATION,
+            duration: ANIMATION_DURATION_TRANSITION,
+            easing: Easing.inOut(Easing.cubic),
             useNativeDriver: true,
         }).start();
         setTabOpen(newTabOpen);
-        const isSwipingBetweenNavigatorAndAddons = tabOpen + newTabOpen === PREVIEW;
-        setSlideBetweenAnimation(isSwipingBetweenNavigatorAndAddons);
         // close the keyboard opened from a TextInput from story list or knobs
-        if (newTabOpen === PREVIEW) {
+        if (newTabOpen === CANVAS) {
             Keyboard.dismiss();
         }
     }, [tabOpen]);
     const noSafeArea = useStoryContextParam('noSafeArea', false);
     const previewWrapperStyles = [
         flex,
-        getPreviewPosition({
+        getPreviewStyle({
             animatedValue: animatedValue.current,
             previewDimensions,
-            slideBetweenAnimation,
             wide,
-            noSafeArea,
             insets,
+            tabOpen,
+            lastTabOpen: lastTabOpen.current,
         }),
     ];
-    const previewStyles = [flex, getPreviewScale(animatedValue.current, slideBetweenAnimation, wide)];
-    const WrapperView = noSafeArea ? View : SafeAreaView;
-    const wrapperMargin = { marginBottom: isUIVisible ? insets.bottom + 40 : 0 };
+    const [isUIVisible] = useIsUIVisible();
+    // The initial value is just a guess until the layout calculation has been done.
+    const [navBarHeight, setNavBarHeight] = React.useState(insets.bottom + 40);
+    const measureNavigation = React.useCallback(({ nativeEvent }) => {
+        const inset = insets.bottom;
+        setNavBarHeight(isUIVisible ? nativeEvent.layout.height - inset : 0);
+    }, [isUIVisible, insets]);
+    // There are 4 cases for the additional UI margin:
+    //   1. Storybook UI is visible, and `noSafeArea` is false: Include top and
+    //      bottom safe area insets, and also include the navigation bar height.
+    //
+    //   2. Storybook UI is not visible, and `noSafeArea` is false: Include top
+    //      and bottom safe area insets.
+    //
+    //   3. Storybook UI is visible, and `noSafeArea` is true: Include only the
+    //      bottom safe area inset and the navigation bar height.
+    //
+    //   4. Storybook UI is not visible, and `noSafeArea` is true: No margin.
+    const safeAreaMargins = {
+        paddingBottom: isUIVisible ? insets.bottom + navBarHeight : noSafeArea ? 0 : insets.bottom,
+        paddingTop: !noSafeArea ? insets.top : 0,
+        overflow: 'hidden',
+    };
+    // The panels always apply the safe area, regardless of the story parameters.
+    const panelSafeAreaMargins = {
+        paddingBottom: insets.bottom + navBarHeight,
+        paddingTop: insets.top,
+    };
+    // Adjust the keyboard offset (possibly in a negative direction) to account
+    // for the safe area and navigation bar.
+    const keyboardVerticalOffset = -panelSafeAreaMargins.paddingBottom + (keyboardAvoidingViewVerticalOffset !== null && keyboardAvoidingViewVerticalOffset !== void 0 ? keyboardAvoidingViewVerticalOffset : 0);
+    const [isSplitPanelVisible] = useIsSplitPanelVisible();
+    const isPreviewInactive = tabOpen !== CANVAS;
     return (React.createElement(React.Fragment, null,
-        React.createElement(View, { 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(Container, null,
+            React.createElement(KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || isPreviewInactive, behavior: IS_IOS ? 'padding' : null, keyboardVerticalOffset: keyboardVerticalOffset, 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(WrapperView, { style: [flex, wrapperMargin] },
-                                    React.createElement(StoryView, null))),
-                            tabOpen !== PREVIEW ? (React.createElement(TouchableOpacity, { style: absolutePosition, onPress: () => handleToggleTab(PREVIEW) })) : null)),
-                    React.createElement(Panel, { style: getNavigatorPanelPosition(animatedValue.current, previewDimensions.width, wide) },
+                        React.createElement(Preview, { style: safeAreaMargins, animatedValue: animatedValue.current },
+                            React.createElement(StoryView, null),
+                            isSplitPanelVisible ? (React.createElement(Panel, { edge: "top", style: { flex: 1 } },
+                                React.createElement(Addons, { active: true }),
+                                React.createElement(AddonsSkeleton, { visible: isPreviewInactive }))) : null),
+                        isPreviewInactive ? (React.createElement(TouchableOpacity, { style: StyleSheet.absoluteFillObject, onPress: () => handleToggleTab(CANVAS) })) : null),
+                    React.createElement(Panel, { edge: "right", style: [
+                            getSidebarPanelPosition(animatedValue.current, previewDimensions.width, wide),
+                            panelSafeAreaMargins,
+                        ] },
                         React.createElement(StoryListView, { storyIndex: storyIndex })),
-                    React.createElement(Panel, { style: [
+                    React.createElement(Panel, { edge: "left", style: [
                             getAddonPanelPosition(animatedValue.current, previewDimensions.width, wide),
-                            wrapperMargin,
+                            panelSafeAreaMargins,
                         ] },
                         React.createElement(Addons, { active: tabOpen === ADDONS })))),
-            React.createElement(Navigation, { tabOpen: tabOpen, onChangeTab: handleToggleTab, isUIVisible: isUIVisible, setIsUIVisible: setIsUIVisible }))));
+            React.createElement(Navigation, { onLayout: measureNavigation, tabOpen: tabOpen, onChangeTab: handleToggleTab }))));
 };
 export default React.memo(OnDeviceUI);

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

@@ -1,7 +1,9 @@
-import React, { ReactNode } from 'react';
-interface Props {
-    style: any[];
-    children: ReactNode;
+import React from 'react';
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+interface PanelProps {
+    edge: 'left' | 'right' | 'top';
+    style: StyleProp<Animated.AnimatedProps<ViewStyle>>;
+    children: React.ReactNode;
 }
-declare const _default: React.MemoExoticComponent<({ children, style }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ edge, children, style }: PanelProps) => JSX.Element>;
 export default _default;

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

@@ -1,9 +1,18 @@
 import React from 'react';
 import { StyleSheet, Animated } from 'react-native';
 import styled from '@emotion/native';
-// @ts-ignore styled is being weird ;(
-const Container = styled(Animated.View)(({ theme }) => ({
-    backgroundColor: theme.backgroundColor || 'white',
+const Container = styled(Animated.View)(({ theme, edge }) => ({
+    backgroundColor: theme.panel.backgroundColor,
+    borderTopWidth: edge === 'top' ? theme.panel.borderWidth : undefined,
+    borderStartWidth: edge === 'left' ? theme.panel.borderWidth : undefined,
+    borderEndWidth: edge === 'right' ? theme.panel.borderWidth : undefined,
+    borderColor: theme.panel.borderColor,
 }));
-const Panel = ({ children, style }) => (React.createElement(Container, { style: [StyleSheet.absoluteFillObject, ...style] }, children));
+const Panel = ({ edge, children, style }) => {
+    const containerStyle = StyleSheet.flatten([
+        edge === 'top' ? undefined : StyleSheet.absoluteFillObject,
+        style,
+    ]);
+    return (React.createElement(Container, { edge: edge, style: containerStyle }, children));
+};
 export default React.memo(Panel);

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

@@ -3,7 +3,7 @@ export interface PreviewDimens {
     width: number;
     height: number;
 }
-declare type Props = {
+type Props = {
     onLayout: (dimens: PreviewDimens) => void;
     previewDimensions: PreviewDimens;
     children: ReactNode;

package/dist/preview/components/OnDeviceUI/addons/Addons.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-declare const _default: React.MemoExoticComponent<({ active }: {
+interface AddonsProps {
     active: boolean;
-}) => JSX.Element>;
+}
+declare const _default: React.MemoExoticComponent<({ active }: AddonsProps) => JSX.Element>;
 export default _default;

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

@@ -1,33 +1,28 @@
-import React, { useState } from 'react';
-import { SafeAreaView, StyleSheet } from 'react-native';
-import styled from '@emotion/native';
+import React from 'react';
 import { addons } from '@storybook/addons';
+import { useSelectedAddon, useStoryContext } from '../../../../hooks';
 import AddonsList from './List';
 import AddonWrapper from './Wrapper';
-import { Label } from '../../Shared/text';
-const NoAddonContainer = styled.View({
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-});
-const Container = styled.View(({ theme }) => ({
-    flex: 1,
-    backgroundColor: theme.backgroundColor,
+import { Box } from '../../Shared/layout';
+import styled from '@emotion/native';
+const Text = styled.Text(({ theme }) => ({
+    marginTop: theme.tokens.spacing4,
 }));
 const Addons = ({ active }) => {
     const panels = addons.getElements('panel');
-    const [addonSelected, setAddonSelected] = useState(Object.keys(panels)[0] || null);
+    const [addonSelected, setAddonSelected] = useSelectedAddon(Object.keys(panels)[0]);
+    const context = useStoryContext();
+    const id = context === null || context === void 0 ? void 0 : context.id;
+    if (!id) {
+        return (React.createElement(Box, { alignItems: "center", justifyContent: "center" },
+            React.createElement(Text, null, "No Story Selected")));
+    }
     if (Object.keys(panels).length === 0) {
-        return (React.createElement(SafeAreaView, { style: styles.container },
-            React.createElement(NoAddonContainer, null,
-                React.createElement(Label, null, "No addons loaded."))));
+        return (React.createElement(Box, { alignItems: "center", justifyContent: "center" },
+            React.createElement(Text, null, "No addons loaded.")));
     }
-    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 }))));
+    return (React.createElement(Box, { flex: true },
+        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 },
-});
 export default React.memo(Addons);

package/dist/preview/components/OnDeviceUI/addons/AddonsSkeleton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * Component that mimics the addons panel.
+ *
+ * The main reason this exists is that the scaled addons view feels more
+ * cluttered than a more abstract skeleton view, which allows users to focus
+ * on the story content rather than become distracted by the addons UI in an
+ * already small view.
+ */
+export declare const AddonsSkeleton: React.NamedExoticComponent<AddonsSkeletonProps>;
+interface AddonsSkeletonProps {
+    visible: boolean;
+}
+export {};