@storybook/react-native 6.5.5 → 6.5.6-alpha.0

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

@@ -1,163 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IS_EXPO = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var native_1 = __importDefault(require("@emotion/native"));
-var react_1 = __importStar(require("react"));
-var react_native_1 = require("react-native");
-var hooks_1 = require("../../../hooks");
-var constants_1 = require("../../../constants");
-var StoryListView_1 = __importDefault(require("../StoryListView"));
-var StoryView_1 = __importDefault(require("../StoryView"));
-var absolute_positioned_keyboard_aware_view_1 = __importDefault(require("./absolute-positioned-keyboard-aware-view"));
-var Addons_1 = __importDefault(require("./addons/Addons"));
-var AddonsSkeleton_1 = require("./addons/AddonsSkeleton");
-var animation_1 = require("./animation");
-var navigation_1 = __importDefault(require("./navigation"));
-var constants_2 = require("./navigation/constants");
-var Panel_1 = __importDefault(require("./Panel"));
-var react_native_2 = require("react-native");
-var react_native_safe_area_context_1 = require("react-native-safe-area-context");
-var IS_IOS = react_native_1.Platform.OS === 'ios';
-// @ts-ignore: Property 'Expo' does not exist on type 'Global'
-var getExpoRoot = function () { return global.Expo || global.__expo || global.__exponent; };
-exports.IS_EXPO = getExpoRoot() !== undefined;
-var IS_ANDROID = react_native_1.Platform.OS === 'android';
-var BREAKPOINT = 1024;
-var flex = { flex: 1 };
-/**
- * Story preview container.
- */
-function Preview(_a) {
-    var animatedValue = _a.animatedValue, style = _a.style, children = _a.children;
-    var theme = (0, hooks_1.useTheme)();
-    var containerStyle = __assign({ backgroundColor: theme.preview.backgroundColor }, (0, animation_1.getPreviewShadowStyle)(animatedValue));
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [flex, containerStyle], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [flex, style], children: children }) }));
-}
-var styles = react_native_1.StyleSheet.create({
-    expoAndroidContainer: { paddingTop: react_native_1.StatusBar.currentHeight },
-});
-var Container = native_1.default.View(function (_a) {
-    var theme = _a.theme;
-    return (__assign(__assign({ flex: 1, backgroundColor: theme.preview.containerBackgroundColor }, (IS_ANDROID && exports.IS_EXPO ? styles.expoAndroidContainer : undefined)), react_native_1.Platform.select({ web: { overflow: 'hidden' } })));
-});
-var OnDeviceUI = function (_a) {
-    var storyIndex = _a.storyIndex, shouldDisableKeyboardAvoidingView = _a.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset = _a.keyboardAvoidingViewVerticalOffset, initialTabOpen = _a.tabOpen;
-    var _b = (0, react_1.useState)(initialTabOpen || constants_2.CANVAS), tabOpen = _b[0], setTabOpen = _b[1];
-    var lastTabOpen = react_1.default.useRef(tabOpen);
-    var _c = (0, react_1.useState)(function () { return ({
-        width: react_native_1.Dimensions.get('window').width,
-        height: react_native_1.Dimensions.get('window').height,
-    }); }), previewDimensions = _c[0], setPreviewDimensions = _c[1];
-    var animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(tabOpen));
-    var wide = (0, react_native_2.useWindowDimensions)().width >= BREAKPOINT;
-    var insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    var handleToggleTab = react_1.default.useCallback(function (newTabOpen) {
-        if (newTabOpen === tabOpen) {
-            return;
-        }
-        lastTabOpen.current = tabOpen;
-        react_native_1.Animated.timing(animatedValue.current, {
-            toValue: newTabOpen,
-            duration: constants_1.ANIMATION_DURATION_TRANSITION,
-            easing: react_native_1.Easing.inOut(react_native_1.Easing.cubic),
-            useNativeDriver: true,
-        }).start();
-        setTabOpen(newTabOpen);
-        // close the keyboard opened from a TextInput from story list or knobs
-        if (newTabOpen === constants_2.CANVAS) {
-            react_native_1.Keyboard.dismiss();
-        }
-    }, [tabOpen]);
-    var noSafeArea = (0, hooks_1.useStoryContextParam)('noSafeArea', false);
-    var previewWrapperStyles = [
-        flex,
-        (0, animation_1.getPreviewStyle)({
-            animatedValue: animatedValue.current,
-            previewDimensions: previewDimensions,
-            wide: wide,
-            insets: insets,
-            tabOpen: tabOpen,
-            lastTabOpen: lastTabOpen.current,
-        }),
-    ];
-    var isUIVisible = (0, hooks_1.useIsUIVisible)()[0];
-    // The initial value is just a guess until the layout calculation has been done.
-    var _d = react_1.default.useState(insets.bottom + 40), navBarHeight = _d[0], setNavBarHeight = _d[1];
-    var measureNavigation = react_1.default.useCallback(function (_a) {
-        var nativeEvent = _a.nativeEvent;
-        var 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.
-    var 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.
-    var 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.
-    var keyboardVerticalOffset = -panelSafeAreaMargins.paddingBottom + (keyboardAvoidingViewVerticalOffset !== null && keyboardAvoidingViewVerticalOffset !== void 0 ? keyboardAvoidingViewVerticalOffset : 0);
-    var isSplitPanelVisible = (0, hooks_1.useIsSplitPanelVisible)()[0];
-    var isPreviewInactive = tabOpen !== constants_2.CANVAS;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Container, { children: [(0, jsx_runtime_1.jsx)(react_native_1.KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || isPreviewInactive, behavior: IS_IOS ? 'padding' : null, keyboardVerticalOffset: keyboardVerticalOffset, style: flex, children: (0, jsx_runtime_1.jsxs)(absolute_positioned_keyboard_aware_view_1.default, { onLayout: setPreviewDimensions, previewDimensions: previewDimensions, children: [(0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: previewWrapperStyles, children: [(0, jsx_runtime_1.jsxs)(Preview, { style: safeAreaMargins, animatedValue: animatedValue.current, children: [(0, jsx_runtime_1.jsx)(StoryView_1.default, {}), isSplitPanelVisible ? ((0, jsx_runtime_1.jsxs)(Panel_1.default, { edge: "top", style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)(Addons_1.default, { active: true }), (0, jsx_runtime_1.jsx)(AddonsSkeleton_1.AddonsSkeleton, { visible: isPreviewInactive })] })) : null] }), isPreviewInactive ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: react_native_1.StyleSheet.absoluteFillObject, onPress: function () { return handleToggleTab(constants_2.CANVAS); } })) : null] }), (0, jsx_runtime_1.jsx)(Panel_1.default, { edge: "right", style: [
-                                    (0, animation_1.getSidebarPanelPosition)(animatedValue.current, previewDimensions.width, wide),
-                                    panelSafeAreaMargins,
-                                ], children: (0, jsx_runtime_1.jsx)(StoryListView_1.default, { storyIndex: storyIndex }) }), (0, jsx_runtime_1.jsx)(Panel_1.default, { edge: "left", style: [
-                                    (0, animation_1.getAddonPanelPosition)(animatedValue.current, previewDimensions.width, wide),
-                                    panelSafeAreaMargins,
-                                ], children: (0, jsx_runtime_1.jsx)(Addons_1.default, { active: tabOpen === constants_2.ADDONS }) })] }) }), (0, jsx_runtime_1.jsx)(navigation_1.default, { onLayout: measureNavigation, tabOpen: tabOpen, onChangeTab: handleToggleTab })] }) }));
-};
-exports.default = react_1.default.memo(OnDeviceUI);

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

@@ -1,9 +0,0 @@
-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<({ edge, children, style }: PanelProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

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

@@ -1,28 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var react_native_1 = require("react-native");
-var native_1 = __importDefault(require("@emotion/native"));
-var Container = (0, native_1.default)(react_native_1.Animated.View)(function (_a) {
-    var theme = _a.theme, edge = _a.edge;
-    return ({
-        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,
-    });
-});
-var Panel = function (_a) {
-    var edge = _a.edge, children = _a.children, style = _a.style;
-    var containerStyle = react_native_1.StyleSheet.flatten([
-        edge === 'top' ? undefined : react_native_1.StyleSheet.absoluteFillObject,
-        style,
-    ]);
-    return ((0, jsx_runtime_1.jsx)(Container, { edge: edge, style: containerStyle, children: children }));
-};
-exports.default = react_1.default.memo(Panel);

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

@@ -1,12 +0,0 @@
-import React, { ReactNode } from 'react';
-export interface PreviewDimens {
-    width: number;
-    height: number;
-}
-type Props = {
-    onLayout: (dimens: PreviewDimens) => void;
-    previewDimensions: PreviewDimens;
-    children: ReactNode;
-};
-declare const _default: React.MemoExoticComponent<({ onLayout, previewDimensions: { width, height }, children, }: Props) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

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

@@ -1,31 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var react_native_1 = require("react-native");
-// Android changes screen size when keyboard opens.
-// To avoid issues we use absolute positioned element with predefined screen size
-var AbsolutePositionedKeyboardAwareView = function (_a) {
-    var onLayout = _a.onLayout, _b = _a.previewDimensions, width = _b.width, height = _b.height, children = _a.children;
-    var onLayoutHandler = function (_a) {
-        var nativeEvent = _a.nativeEvent;
-        var _b = nativeEvent.layout, layoutHeight = _b.height, layoutWidth = _b.width;
-        if (layoutHeight !== height || layoutWidth !== width) {
-            onLayout({
-                height: layoutHeight,
-                width: layoutWidth,
-            });
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.container, onLayout: onLayoutHandler, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: width === 0
-                ? styles.container
-                : [styles.absolute, { position: 'absolute', width: width, height: height }], children: children }) }));
-};
-var styles = react_native_1.StyleSheet.create({
-    absolute: { position: 'absolute' },
-    container: { flex: 1 },
-});
-exports.default = react_1.default.memo(AbsolutePositionedKeyboardAwareView);

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

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

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

@@ -1,34 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var addons_1 = require("@storybook/addons");
-var hooks_1 = require("../../../../hooks");
-var List_1 = __importDefault(require("./List"));
-var Wrapper_1 = __importDefault(require("./Wrapper"));
-var layout_1 = require("../../Shared/layout");
-var native_1 = __importDefault(require("@emotion/native"));
-var Text = native_1.default.Text(function (_a) {
-    var theme = _a.theme;
-    return ({
-        marginTop: theme.tokens.spacing4,
-    });
-});
-var Addons = function (_a) {
-    var active = _a.active;
-    var panels = addons_1.addons.getElements('panel');
-    var _b = (0, hooks_1.useSelectedAddon)(Object.keys(panels)[0]), addonSelected = _b[0], setAddonSelected = _b[1];
-    var context = (0, hooks_1.useStoryContext)();
-    var id = context === null || context === void 0 ? void 0 : context.id;
-    if (!id) {
-        return ((0, jsx_runtime_1.jsx)(layout_1.Box, { alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Text, { children: "No Story Selected" }) }));
-    }
-    if (Object.keys(panels).length === 0) {
-        return ((0, jsx_runtime_1.jsx)(layout_1.Box, { alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Text, { children: "No addons loaded." }) }));
-    }
-    return ((0, jsx_runtime_1.jsxs)(layout_1.Box, { flex: true, children: [(0, jsx_runtime_1.jsx)(List_1.default, { onPressAddon: setAddonSelected, panels: panels, addonSelected: active ? addonSelected : null }), (0, jsx_runtime_1.jsx)(Wrapper_1.default, { addonSelected: active ? addonSelected : null, panels: panels })] }));
-};
-exports.default = react_1.default.memo(Addons);

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

@@ -1,14 +0,0 @@
-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

@@ -1,78 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AddonsSkeleton = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var native_1 = __importDefault(require("@emotion/native"));
-var react_native_1 = require("react-native");
-var constants_1 = require("../../../../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.
- */
-exports.AddonsSkeleton = react_1.default.memo(function AddonsSkeleton(_a) {
-    var visible = _a.visible;
-    var progress = react_1.default.useRef(new react_native_1.Animated.Value(visible ? 1 : 0));
-    react_1.default.useEffect(function () {
-        react_native_1.Animated.timing(progress.current, {
-            toValue: visible ? 1 : 0,
-            duration: constants_1.ANIMATION_DURATION_TRANSITION,
-            useNativeDriver: true,
-            easing: react_native_1.Easing.inOut(react_native_1.Easing.cubic),
-        }).start();
-    }, [visible]);
-    return ((0, jsx_runtime_1.jsxs)(AddonsSkeletonContainer, { pointerEvents: "none", style: { opacity: progress.current }, children: [(0, jsx_runtime_1.jsx)(TabsSkeleton, {}), (0, jsx_runtime_1.jsx)(AddonsContentSkeleton, {})] }));
-});
-var TabSkeleton = native_1.default.View(function (_a) {
-    var theme = _a.theme, active = _a.active;
-    return ({
-        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,
-    });
-});
-var BoxSkeleton = native_1.default.View(function (_a) {
-    var theme = _a.theme, width = _a.width, height = _a.height, marginBottom = _a.marginBottom;
-    return ({
-        backgroundColor: theme.tokens.color.blue200,
-        borderRadius: theme.tokens.borderRadius.large,
-        height: height,
-        marginBottom: marginBottom,
-        width: width,
-    });
-});
-function AddonsFieldSkeleton(_a) {
-    var _b = _a.long, long = _b === void 0 ? false : _b;
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { marginBottom: 32 }, children: [(0, jsx_runtime_1.jsx)(BoxSkeleton, { width: 75, height: 10, marginBottom: 12 }), (0, jsx_runtime_1.jsx)(BoxSkeleton, { width: long ? 200 : 120, height: 15 })] }));
-}
-function AddonsContentSkeleton() {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AddonsFieldSkeleton, { long: true }), (0, jsx_runtime_1.jsx)(AddonsFieldSkeleton, { long: true }), (0, jsx_runtime_1.jsx)(AddonsFieldSkeleton, {}), (0, jsx_runtime_1.jsx)(AddonsFieldSkeleton, {})] }));
-}
-function TabsSkeleton() {
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row', marginBottom: 16 }, children: [(0, jsx_runtime_1.jsx)(TabSkeleton, {}), (0, jsx_runtime_1.jsx)(TabSkeleton, { active: true }), (0, jsx_runtime_1.jsx)(TabSkeleton, {})] }));
-}
-var AddonsSkeletonContainer = (0, native_1.default)(react_native_1.Animated.View)(function (_a) {
-    var theme = _a.theme;
-    return (__assign(__assign({}, react_native_1.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.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { Collection } from '@storybook/addons';
-export interface Props {
-    panels: Collection;
-    addonSelected: string;
-    onPressAddon: (id: string) => void;
-}
-declare const _default: React.MemoExoticComponent<({ panels, addonSelected, onPressAddon }: Props) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

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

@@ -1,18 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var tabs_1 = require("../../Shared/tabs");
-var AddonList = function (_a) {
-    var panels = _a.panels, addonSelected = _a.addonSelected, onPressAddon = _a.onPressAddon;
-    var addonKeys = Object.keys(panels);
-    return ((0, jsx_runtime_1.jsx)(tabs_1.TabBar, { scrollable: true, children: addonKeys.map(function (id) {
-            var title = panels[id].title;
-            var resolvedTitle = typeof title === 'function' ? title() : title;
-            return ((0, jsx_runtime_1.jsx)(tabs_1.TabButton, { active: id === addonSelected, id: id, onPress: function () { return onPressAddon(id); }, children: resolvedTitle.toUpperCase() }, id));
-        }) }));
-};
-exports.default = react_1.default.memo(AddonList);

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

@@ -1,8 +0,0 @@
-import React from 'react';
-import { Collection } from '@storybook/addons';
-export interface Props {
-    panels: Collection;
-    addonSelected: string;
-}
-declare const _default: React.MemoExoticComponent<({ panels, addonSelected }: Props) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

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

@@ -1,31 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var react_native_1 = require("react-native");
-var native_1 = __importDefault(require("@emotion/native"));
-var hooks_1 = require("../../../../hooks");
-var Container = native_1.default.View(function (_a) {
-    var selected = _a.selected;
-    return ({
-        display: selected ? 'flex' : 'none',
-        flex: 1,
-    });
-});
-var Wrapper = function (_a) {
-    var panels = _a.panels, addonSelected = _a.addonSelected;
-    // Force a re-render when the current story changes, to ensure that the addon
-    // panels state is not desynced.
-    (0, hooks_1.useUpdateOnStoryChanged)();
-    var theme = (0, hooks_1.useTheme)();
-    var addonKeys = Object.keys(panels);
-    var content = addonKeys.map(function (id) {
-        var selected = addonSelected === id;
-        return ((0, jsx_runtime_1.jsx)(Container, { selected: selected, children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { contentContainerStyle: { padding: theme.panel.paddingHorizontal }, children: panels[id].render({ active: selected, key: id }) }) }, id));
-    });
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content });
-};
-exports.default = react_1.default.memo(Wrapper);

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

@@ -1 +0,0 @@
-export { default } from './Addons';

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

@@ -1,8 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var Addons_1 = require("./Addons");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Addons_1).default; } });

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

@@ -1,61 +0,0 @@
-import { Animated, Insets } from 'react-native';
-import { PreviewDimens } from './absolute-positioned-keyboard-aware-view';
-export declare const getSidebarPanelPosition: (animatedValue: Animated.Value, previewWidth: number, wide: boolean) => {
-    transform: {
-        translateX: Animated.AnimatedInterpolation<string | number>;
-    }[];
-    width: number;
-}[];
-export declare const getAddonPanelPosition: (animatedValue: Animated.Value, previewWidth: number, wide: boolean) => {
-    transform: {
-        translateX: Animated.AnimatedInterpolation<string | number>;
-    }[];
-    width: number;
-}[];
-type PreviewPositionArgs = {
-    animatedValue: Animated.Value;
-    previewDimensions: PreviewDimens;
-    wide: boolean;
-    insets: Insets;
-    tabOpen: number;
-    lastTabOpen: number;
-};
-/**
- * Build the animated style for the preview container view.
- *
- * When the sidebar or addons panel is focused, the preview container is
- * scaled down and translated to the left (or right) of the panel.
- */
-export declare const getPreviewStyle: ({ animatedValue, previewDimensions: { width: previewWidth, height: previewHeight }, wide, insets, tabOpen, lastTabOpen, }: PreviewPositionArgs) => {
-    transform: ({
-        translateX: Animated.AnimatedInterpolation<string | number>;
-        translateY?: undefined;
-        scale?: undefined;
-    } | {
-        translateY: Animated.AnimatedInterpolation<string | number>;
-        translateX?: undefined;
-        scale?: undefined;
-    } | {
-        scale: Animated.AnimatedInterpolation<string | number>;
-        translateX?: undefined;
-        translateY?: undefined;
-    })[];
-};
-/**
- * Build the animated shadow style for the preview.
- *
- * When the sidebar or addons panel are visible the scaled preview will have
- * a shadow, and when going to the preview tab the shadow will be invisible.
- */
-export declare const getPreviewShadowStyle: (animatedValue: Animated.Value) => {
-    elevation: number;
-    shadowColor: string;
-    shadowOpacity: Animated.AnimatedInterpolation<string | number>;
-    shadowRadius: number;
-    shadowOffset: {
-        width: number;
-        height: number;
-    };
-    overflow: "visible";
-};
-export {};

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

@@ -1,116 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPreviewShadowStyle = exports.getPreviewStyle = exports.getAddonPanelPosition = exports.getSidebarPanelPosition = void 0;
-var react_native_1 = require("react-native");
-var constants_1 = require("./navigation/constants");
-// Factor that will flip the animation orientation in RTL locales.
-var RTL_SCALE = react_native_1.I18nManager.isRTL ? -1 : 1;
-// Percentage to scale the preview area by when opening a panel.
-var PREVIEW_SCALE = 0.3;
-// Percentage to scale the preview area by when opening a panel, on wide screens.
-var PREVIEW_SCALE_WIDE = 0.7;
-// Percentage to shrink the visible preview by, without affecting the panel size.
-var PREVIEW_SCALE_SHRINK = 0.9;
-var SCALE_OFFSET = 0.025;
-var TRANSLATE_Y_OFFSET = 12;
-var panelWidth = function (width, wide) {
-    var scale = wide ? PREVIEW_SCALE_WIDE : PREVIEW_SCALE;
-    return width * (1 - scale - SCALE_OFFSET);
-};
-var getSidebarPanelPosition = function (animatedValue, previewWidth, wide) {
-    return [
-        {
-            transform: [
-                {
-                    translateX: animatedValue.interpolate({
-                        inputRange: [constants_1.SIDEBAR, constants_1.CANVAS],
-                        outputRange: [0, (-panelWidth(previewWidth, wide) - 1) * RTL_SCALE],
-                    }),
-                },
-            ],
-            width: panelWidth(previewWidth, wide),
-        },
-    ];
-};
-exports.getSidebarPanelPosition = getSidebarPanelPosition;
-var getAddonPanelPosition = function (animatedValue, previewWidth, wide) {
-    return [
-        {
-            transform: [
-                {
-                    translateX: animatedValue.interpolate({
-                        inputRange: [constants_1.CANVAS, constants_1.ADDONS],
-                        outputRange: [
-                            previewWidth * RTL_SCALE,
-                            (previewWidth - panelWidth(previewWidth, wide)) * RTL_SCALE,
-                        ],
-                    }),
-                },
-            ],
-            width: panelWidth(previewWidth, wide),
-        },
-    ];
-};
-exports.getAddonPanelPosition = getAddonPanelPosition;
-/**
- * Build the animated style for the preview container view.
- *
- * When the sidebar or addons panel is focused, the preview container is
- * scaled down and translated to the left (or right) of the panel.
- */
-var getPreviewStyle = function (_a) {
-    var animatedValue = _a.animatedValue, _b = _a.previewDimensions, previewWidth = _b.width, previewHeight = _b.height, wide = _a.wide, insets = _a.insets, tabOpen = _a.tabOpen, lastTabOpen = _a.lastTabOpen;
-    var scale = (wide ? PREVIEW_SCALE_WIDE : PREVIEW_SCALE) * PREVIEW_SCALE_SHRINK;
-    var scaledPreviewWidth = previewWidth * scale;
-    var scaledPreviewHeight = previewHeight * scale;
-    // Horizontally center the scaled preview in the available space beside the panel.
-    var nonPanelWidth = previewWidth - panelWidth(previewWidth, wide);
-    var translateXOffset = (nonPanelWidth - scaledPreviewWidth) / 2;
-    var translateX = (previewWidth / 2 - (previewWidth * scale) / 2 - translateXOffset) * RTL_SCALE;
-    // Translate the preview to the top edge of the screen, move it down by the
-    // safe area inset, then by the preview Y offset.
-    var translateY = -(previewHeight / 2 - scaledPreviewHeight / 2) + insets.top + TRANSLATE_Y_OFFSET;
-    // Is navigation moving from one panel to another, skipping preview?
-    var skipPreview = lastTabOpen !== constants_1.CANVAS && tabOpen !== constants_1.CANVAS;
-    return {
-        transform: [
-            {
-                translateX: animatedValue.interpolate({
-                    inputRange: [constants_1.SIDEBAR, constants_1.CANVAS, constants_1.ADDONS],
-                    outputRange: [translateX, 0, -translateX],
-                }),
-            },
-            {
-                translateY: animatedValue.interpolate({
-                    inputRange: [constants_1.SIDEBAR, constants_1.CANVAS, constants_1.ADDONS],
-                    outputRange: [translateY, skipPreview ? translateY : 0, translateY],
-                }),
-            },
-            {
-                scale: animatedValue.interpolate({
-                    inputRange: [constants_1.SIDEBAR, constants_1.CANVAS, constants_1.ADDONS],
-                    outputRange: [scale, skipPreview ? scale : 1, scale],
-                }),
-            },
-        ],
-    };
-};
-exports.getPreviewStyle = getPreviewStyle;
-/**
- * Build the animated shadow style for the preview.
- *
- * When the sidebar or addons panel are visible the scaled preview will have
- * a shadow, and when going to the preview tab the shadow will be invisible.
- */
-var getPreviewShadowStyle = function (animatedValue) { return ({
-    elevation: 8,
-    shadowColor: '#000',
-    shadowOpacity: animatedValue.interpolate({
-        inputRange: [constants_1.SIDEBAR, constants_1.CANVAS, constants_1.ADDONS],
-        outputRange: [0.25, 0, 0.25],
-    }),
-    shadowRadius: 8,
-    shadowOffset: { width: 0, height: 0 },
-    overflow: 'visible',
-}); };
-exports.getPreviewShadowStyle = getPreviewShadowStyle;

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

@@ -1 +0,0 @@
-export { default } from './OnDeviceUI';