@storybook/react-native 6.5.0-rc.2 → 6.5.0-rc.4

package/dist/constants.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Duration for a typical transition animation, such as rescaling the preview
+ * 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 preview
+ * 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/preview/View.d.ts

@@ -1,7 +1,7 @@
 /// <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';
 type StoryKind = string;
@@ -16,6 +16,9 @@ type InitialSelection = `${StoryKind}--${StoryName}` | {
      */
     name: StoryName;
 };
+type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
 export type Params = {
     onDeviceUI?: boolean;
     enableWebsockets?: boolean;
@@ -27,10 +30,10 @@ export 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,14 @@ 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 StoryView from './components/StoryView';
 import createChannel from '@storybook/channel-websocket';
 import getHost from './rn-host-detect';
 import events from '@storybook/core-events';
+import deepmerge from 'deepmerge';
 const STORAGE_KEY = 'lastOpenedStory';
 export class View {
     constructor(preview) {
@@ -65,6 +66,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 +89,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(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 +117,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,19 +1,19 @@
 import styled from '@emotion/native';
-import { useTheme } from 'emotion-theming';
 import React, { useState, useRef } from 'react';
 import { Animated, Dimensions, Easing, Keyboard, KeyboardAvoidingView, Platform, TouchableOpacity, StatusBar, StyleSheet, View, } from 'react-native';
-import { useStoryContextParam } from '../../../hooks';
+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 { AddonsSkeleton } from './addons/AddonsSkeleton';
 import { getAddonPanelPosition, getNavigatorPanelPosition, getPreviewShadowStyle, getPreviewStyle, } from './animation';
 import Navigation from './navigation';
 import { PREVIEW, ADDONS } from './navigation/constants';
 import Panel from './Panel';
 import { useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-const ANIMATION_DURATION = 400;
 const IS_IOS = Platform.OS === 'ios';
 // @ts-ignore: Property 'Expo' does not exist on type 'Global'
 const getExpoRoot = () => global.Expo || global.__expo || global.__exponent;
@@ -26,15 +26,15 @@ const flex = { flex: 1 };
  */
 function Preview({ animatedValue, style, children }) {
     const theme = useTheme();
-    const containerStyle = Object.assign({ backgroundColor: theme.backgroundColor }, getPreviewShadowStyle(animatedValue));
+    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 Container = styled.View(({ theme }) => (Object.assign({ flex: 1, backgroundColor: theme.backgroundColor }, (IS_ANDROID && IS_EXPO ? styles.expoAndroidContainer : undefined))));
-const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }) => {
+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 || PREVIEW);
     const lastTabOpen = React.useRef(tabOpen);
     const [previewDimensions, setPreviewDimensions] = useState(() => ({
@@ -44,8 +44,6 @@ const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView,
     const animatedValue = useRef(new Animated.Value(tabOpen));
     const wide = useWindowDimensions().width >= BREAKPOINT;
     const insets = useSafeAreaInsets();
-    const theme = useTheme();
-    const [isUIVisible, setIsUIVisible] = useState(isUIHidden !== undefined ? !isUIHidden : true);
     const handleToggleTab = React.useCallback((newTabOpen) => {
         if (newTabOpen === tabOpen) {
             return;
@@ -53,7 +51,7 @@ const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView,
         lastTabOpen.current = tabOpen;
         Animated.timing(animatedValue.current, {
             toValue: newTabOpen,
-            duration: ANIMATION_DURATION,
+            duration: ANIMATION_DURATION_TRANSITION,
             easing: Easing.inOut(Easing.cubic),
             useNativeDriver: true,
         }).start();
@@ -75,6 +73,7 @@ const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView,
             lastTabOpen: lastTabOpen.current,
         }),
     ];
+    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 }) => {
@@ -95,26 +94,39 @@ const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView,
     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 !== PREVIEW;
     return (React.createElement(React.Fragment, null,
         React.createElement(Container, null,
-            React.createElement(KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW, behavior: IS_IOS ? 'padding' : null, keyboardVerticalOffset: keyboardAvoidingViewVerticalOffset, style: flex },
+            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(Preview, { style: safeAreaMargins, animatedValue: animatedValue.current },
-                            React.createElement(StoryView, null)),
-                        tabOpen !== PREVIEW ? (React.createElement(TouchableOpacity, { style: StyleSheet.absoluteFillObject, onPress: () => handleToggleTab(PREVIEW) })) : null),
-                    React.createElement(Panel, { style: [
+                            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(PREVIEW) })) : null),
+                    React.createElement(Panel, { edge: "right", style: [
                             getNavigatorPanelPosition(animatedValue.current, previewDimensions.width, wide),
-                            safeAreaMargins,
-                            { backgroundColor: theme.storyListBackgroundColor },
+                            panelSafeAreaMargins,
                         ] },
                         React.createElement(StoryListView, { storyIndex: storyIndex })),
-                    React.createElement(Panel, { style: [
+                    React.createElement(Panel, { edge: "left", style: [
                             getAddonPanelPosition(animatedValue.current, previewDimensions.width, wide),
-                            safeAreaMargins,
+                            panelSafeAreaMargins,
                         ] },
                         React.createElement(Addons, { active: tabOpen === ADDONS })))),
-            React.createElement(Navigation, { onLayout: measureNavigation, 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/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,19 @@
-import React, { useState } from 'react';
-import { SafeAreaView, StyleSheet } from 'react-native';
-import styled from '@emotion/native';
+import React from 'react';
+import { Text } from 'react-native';
 import { addons } from '@storybook/addons';
+import { useSelectedAddon } 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';
 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]);
     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 {};

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from '@emotion/native';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+import { ANIMATION_DURATION_TRANSITION } from '../../../../constants';
+/**
+ * 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 const AddonsSkeleton = React.memo(function AddonsSkeleton({ visible }) {
+    const progress = React.useRef(new Animated.Value(visible ? 1 : 0));
+    React.useEffect(() => {
+        Animated.timing(progress.current, {
+            toValue: visible ? 1 : 0,
+            duration: ANIMATION_DURATION_TRANSITION,
+            useNativeDriver: true,
+            easing: Easing.inOut(Easing.cubic),
+        }).start();
+    }, [visible]);
+    return (React.createElement(AddonsSkeletonContainer, { pointerEvents: "none", opacity: progress.current },
+        React.createElement(TabsSkeleton, null),
+        React.createElement(AddonsContentSkeleton, null)));
+});
+const TabSkeleton = styled.View(({ theme, active }) => ({
+    opacity: active ? 1 : 0.5,
+    backgroundColor: active ? theme.tabs.activeBackgroundColor : theme.tokens.color.grey200,
+    borderRadius: theme.tokens.borderRadius.round,
+    width: active ? 100 : 70,
+    height: 30,
+    marginRight: 12,
+}));
+const BoxSkeleton = styled.View(({ theme, width, height }) => ({
+    backgroundColor: theme.tokens.color.blue200,
+    borderRadius: theme.tokens.borderRadius.large,
+    height,
+    width,
+}));
+function AddonsFieldSkeleton({ long = false }) {
+    return (React.createElement(View, { style: { marginBottom: 32 } },
+        React.createElement(BoxSkeleton, { width: 75, height: 10, marginBottom: 12 }),
+        React.createElement(BoxSkeleton, { width: long ? 200 : 120, height: 15 })));
+}
+function AddonsContentSkeleton() {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(AddonsFieldSkeleton, { long: true }),
+        React.createElement(AddonsFieldSkeleton, { long: true }),
+        React.createElement(AddonsFieldSkeleton, null),
+        React.createElement(AddonsFieldSkeleton, null)));
+}
+function TabsSkeleton() {
+    return (React.createElement(View, { style: { flexDirection: 'row', marginBottom: 16 } },
+        React.createElement(TabSkeleton, null),
+        React.createElement(TabSkeleton, { active: true }),
+        React.createElement(TabSkeleton, null)));
+}
+const AddonsSkeletonContainer = styled(Animated.View)(({ theme }) => (Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { flex: 1, backgroundColor: theme.panel.backgroundColor, borderTopWidth: theme.panel.borderWidth, borderColor: theme.panel.borderColor, padding: theme.panel.paddingHorizontal, overflow: 'hidden' })));

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

@@ -1,20 +1,11 @@
 import React from 'react';
-import { ScrollView } from 'react-native';
-import styled from '@emotion/native';
-import Button from '../navigation/Button';
-const Container = styled.View(({ theme }) => ({
-    flexDirection: 'row',
-    borderBottomWidth: 1,
-    borderBottomColor: theme.borderColor || '#e6e6e6',
-}));
+import { TabBar, TabButton } from '../../Shared/tabs';
 const AddonList = ({ panels, addonSelected, onPressAddon }) => {
     const addonKeys = Object.keys(panels);
-    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);
-        }))));
+    return (React.createElement(TabBar, { scrollable: true }, addonKeys.map((id) => {
+        const { title } = panels[id];
+        const resolvedTitle = typeof title === 'function' ? title() : title;
+        return (React.createElement(TabButton, { active: id === addonSelected, key: id, id: id, onPress: () => onPressAddon(id) }, resolvedTitle.toUpperCase()));
+    })));
 };
 export default React.memo(AddonList);

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

@@ -1,22 +1,21 @@
 import React from 'react';
-import { View, ScrollView, StyleSheet } from 'react-native';
-const style = StyleSheet.create({
-    invisible: {
-        height: 0,
-        width: 0,
-        opacity: 0,
-        position: 'absolute',
-    },
-    flex: {
-        flex: 1,
-    },
-});
+import { ScrollView } from 'react-native';
+import styled from '@emotion/native';
+import { useTheme, useUpdateOnStoryChanged } from '../../../../hooks';
+const Container = styled.View(({ selected }) => ({
+    display: selected ? 'flex' : 'none',
+    flex: 1,
+}));
 const Wrapper = ({ panels, addonSelected }) => {
+    // Force a re-render when the current story changes, to ensure that the addon
+    // panels state is not desynced.
+    useUpdateOnStoryChanged();
+    const theme = useTheme();
     const addonKeys = Object.keys(panels);
     const content = addonKeys.map((id) => {
         const selected = addonSelected === id;
-        return (React.createElement(View, { key: id, style: selected ? style.flex : style.invisible },
-            React.createElement(ScrollView, null, panels[id].render({ active: selected, key: id }))));
+        return (React.createElement(Container, { key: id, selected: selected },
+            React.createElement(ScrollView, { contentContainerStyle: { padding: theme.panel.paddingHorizontal } }, panels[id].render({ active: selected, key: id }))));
     });
     return React.createElement(React.Fragment, null, content);
 };

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

@@ -1,11 +1,9 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import React from 'react';
 import { ViewProps } from 'react-native';
-interface Props {
+interface NavigationProps {
     tabOpen: number;
     onChangeTab: (index: number) => void;
-    isUIVisible: boolean;
-    setIsUIVisible: Dispatch<SetStateAction<boolean>>;
     onLayout: ViewProps['onLayout'];
 }
-declare const _default: React.MemoExoticComponent<({ tabOpen, onChangeTab, isUIVisible, setIsUIVisible, onLayout }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ tabOpen, onChangeTab, onLayout }: NavigationProps) => JSX.Element>;
 export default _default;