@storybook/react-native 6.5.0-rc.7 → 6.5.0-rc.9

package/dist/constants.d.ts

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

package/dist/constants.js

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

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

@@ -8,9 +8,9 @@ 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 { 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';
@@ -35,7 +35,7 @@ const styles = StyleSheet.create({
 });
 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 [tabOpen, setTabOpen] = useState(initialTabOpen || CANVAS);
     const lastTabOpen = React.useRef(tabOpen);
     const [previewDimensions, setPreviewDimensions] = useState(() => ({
         width: Dimensions.get('window').width,
@@ -57,7 +57,7 @@ const OnDeviceUI = ({ storyIndex, shouldDisableKeyboardAvoidingView, keyboardAvo
         }).start();
         setTabOpen(newTabOpen);
         // close the keyboard opened from a TextInput from story list or knobs
-        if (newTabOpen === PREVIEW) {
+        if (newTabOpen === CANVAS) {
             Keyboard.dismiss();
         }
     }, [tabOpen]);
@@ -105,7 +105,7 @@ const OnDeviceUI = ({ storyIndex, shouldDisableKeyboardAvoidingView, keyboardAvo
     // 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;
+    const isPreviewInactive = tabOpen !== CANVAS;
     return (React.createElement(React.Fragment, null,
         React.createElement(Container, null,
             React.createElement(KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || isPreviewInactive, behavior: IS_IOS ? 'padding' : null, keyboardVerticalOffset: keyboardVerticalOffset, style: flex },
@@ -116,9 +116,9 @@ const OnDeviceUI = ({ storyIndex, shouldDisableKeyboardAvoidingView, keyboardAvo
                             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),
+                        isPreviewInactive ? (React.createElement(TouchableOpacity, { style: StyleSheet.absoluteFillObject, onPress: () => handleToggleTab(CANVAS) })) : null),
                     React.createElement(Panel, { edge: "right", style: [
-                            getNavigatorPanelPosition(animatedValue.current, previewDimensions.width, wide),
+                            getSidebarPanelPosition(animatedValue.current, previewDimensions.width, wide),
                             panelSafeAreaMargins,
                         ] },
                         React.createElement(StoryListView, { storyIndex: storyIndex })),

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

@@ -1,13 +1,22 @@
 import React from 'react';
-import { Text } from 'react-native';
 import { addons } from '@storybook/addons';
-import { useSelectedAddon } from '../../../../hooks';
+import { useSelectedAddon, useStoryContext } from '../../../../hooks';
 import AddonsList from './List';
 import AddonWrapper from './Wrapper';
 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] = 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(Box, { alignItems: "center", justifyContent: "center" },
             React.createElement(Text, null, "No addons loaded.")));

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

@@ -1,6 +1,6 @@
 import { Animated, Insets } from 'react-native';
 import { PreviewDimens } from './absolute-positioned-keyboard-aware-view';
-export declare const getNavigatorPanelPosition: (animatedValue: Animated.Value, previewWidth: number, wide: boolean) => {
+export declare const getSidebarPanelPosition: (animatedValue: Animated.Value, previewWidth: number, wide: boolean) => {
     transform: {
         translateX: Animated.AnimatedInterpolation<string | number>;
     }[];
@@ -23,7 +23,7 @@ type PreviewPositionArgs = {
 /**
  * Build the animated style for the preview container view.
  *
- * When the navigator or addons panel is focused, the preview container is
+ * 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) => {
@@ -44,7 +44,7 @@ export declare const getPreviewStyle: ({ animatedValue, previewDimensions: { wid
 /**
  * Build the animated shadow style for the preview.
  *
- * When the navigator or addons panel are visible the scaled preview will have
+ * 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) => {

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

@@ -1,5 +1,5 @@
 import { I18nManager } from 'react-native';
-import { NAVIGATOR, PREVIEW, ADDONS } from './navigation/constants';
+import { SIDEBAR, CANVAS, ADDONS } from './navigation/constants';
 // Factor that will flip the animation orientation in RTL locales.
 const RTL_SCALE = I18nManager.isRTL ? -1 : 1;
 // Percentage to scale the preview area by when opening a panel.
@@ -14,13 +14,13 @@ const panelWidth = (width, wide) => {
     const scale = wide ? PREVIEW_SCALE_WIDE : PREVIEW_SCALE;
     return width * (1 - scale - SCALE_OFFSET);
 };
-export const getNavigatorPanelPosition = (animatedValue, previewWidth, wide) => {
+export const getSidebarPanelPosition = (animatedValue, previewWidth, wide) => {
     return [
         {
             transform: [
                 {
                     translateX: animatedValue.interpolate({
-                        inputRange: [NAVIGATOR, PREVIEW],
+                        inputRange: [SIDEBAR, CANVAS],
                         outputRange: [0, (-panelWidth(previewWidth, wide) - 1) * RTL_SCALE],
                     }),
                 },
@@ -35,7 +35,7 @@ export const getAddonPanelPosition = (animatedValue, previewWidth, wide) => {
             transform: [
                 {
                     translateX: animatedValue.interpolate({
-                        inputRange: [PREVIEW, ADDONS],
+                        inputRange: [CANVAS, ADDONS],
                         outputRange: [
                             previewWidth * RTL_SCALE,
                             (previewWidth - panelWidth(previewWidth, wide)) * RTL_SCALE,
@@ -50,7 +50,7 @@ export const getAddonPanelPosition = (animatedValue, previewWidth, wide) => {
 /**
  * Build the animated style for the preview container view.
  *
- * When the navigator or addons panel is focused, the preview container is
+ * 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 const getPreviewStyle = ({ animatedValue, previewDimensions: { width: previewWidth, height: previewHeight }, wide, insets, tabOpen, lastTabOpen, }) => {
@@ -65,24 +65,24 @@ export const getPreviewStyle = ({ animatedValue, previewDimensions: { width: pre
     // safe area inset, then by the preview Y offset.
     const translateY = -(previewHeight / 2 - scaledPreviewHeight / 2) + insets.top + TRANSLATE_Y_OFFSET;
     // Is navigation moving from one panel to another, skipping preview?
-    const skipPreview = lastTabOpen !== PREVIEW && tabOpen !== PREVIEW;
+    const skipPreview = lastTabOpen !== CANVAS && tabOpen !== CANVAS;
     return {
         transform: [
             {
                 translateX: animatedValue.interpolate({
-                    inputRange: [NAVIGATOR, PREVIEW, ADDONS],
+                    inputRange: [SIDEBAR, CANVAS, ADDONS],
                     outputRange: [translateX, 0, -translateX],
                 }),
             },
             {
                 translateY: animatedValue.interpolate({
-                    inputRange: [NAVIGATOR, PREVIEW, ADDONS],
+                    inputRange: [SIDEBAR, CANVAS, ADDONS],
                     outputRange: [translateY, skipPreview ? translateY : 0, translateY],
                 }),
             },
             {
                 scale: animatedValue.interpolate({
-                    inputRange: [NAVIGATOR, PREVIEW, ADDONS],
+                    inputRange: [SIDEBAR, CANVAS, ADDONS],
                     outputRange: [scale, skipPreview ? scale : 1, scale],
                 }),
             },
@@ -92,14 +92,14 @@ export const getPreviewStyle = ({ animatedValue, previewDimensions: { width: pre
 /**
  * Build the animated shadow style for the preview.
  *
- * When the navigator or addons panel are visible the scaled preview will have
+ * 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 const getPreviewShadowStyle = (animatedValue) => ({
     elevation: 8,
     shadowColor: '#000',
     shadowOpacity: animatedValue.interpolate({
-        inputRange: [NAVIGATOR, PREVIEW, ADDONS],
+        inputRange: [SIDEBAR, CANVAS, ADDONS],
         outputRange: [0.25, 0, 0.25],
     }),
     shadowRadius: 8,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/native';
-import { NAVIGATOR, PREVIEW, ADDONS } from './constants';
+import { SIDEBAR, CANVAS, ADDONS } from './constants';
 import { TabBar, TabButton } from '../../Shared/tabs';
 const NavigationTabBar = styled(TabBar)(({ theme }) => ({
     paddingHorizontal: theme.tokens.spacing2,
@@ -9,6 +9,6 @@ const NavigationTabBar = styled(TabBar)(({ theme }) => ({
     borderTopWidth: theme.navigation.borderWidth,
 }));
 export const NavigationBar = React.memo(({ index, onPress, style }) => (React.createElement(NavigationTabBar, { style: style },
-    React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Navigator", id: NAVIGATOR, active: index === NAVIGATOR }, "NAVIGATOR"),
-    React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Preview", id: PREVIEW, active: index === PREVIEW }, "PREVIEW"),
+    React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Sidebar", id: SIDEBAR, active: index === SIDEBAR }, "SIDEBAR"),
+    React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Canvas", id: CANVAS, active: index === CANVAS }, "CANVAS"),
     React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Addons", id: ADDONS, active: index === ADDONS }, "ADDONS"))));

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

@@ -1,3 +1,3 @@
-export declare const NAVIGATOR = -1;
-export declare const PREVIEW = 0;
+export declare const SIDEBAR = -1;
+export declare const CANVAS = 0;
 export declare const ADDONS = 1;

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

@@ -1,3 +1,3 @@
-export const NAVIGATOR = -1;
-export const PREVIEW = 0;
+export const SIDEBAR = -1;
+export const CANVAS = 0;
 export const ADDONS = 1;

package/dist/preview/components/StoryView/StoryView.js

@@ -25,6 +25,6 @@ const StoryView = () => {
         return (React.createElement(Box, { flex: true, key: id, testID: id, onStartShouldSetResponder: dismissOnStartResponder }, StoryComponent && React.createElement(StoryComponent, Object.assign({}, context))));
     }
     return (React.createElement(Box, { flex: true, padding: 16, alignItems: "center", justifyContent: "center" },
-        React.createElement(Text, null, "Please open navigator and select a story to preview.")));
+        React.createElement(Text, null, "Please open the sidebar and select a story to preview.")));
 };
 export default React.memo(StoryView);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.5.0-rc.7",
+  "version": "6.5.0-rc.9",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -87,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "47fb23637c7d516c8747ef05f782a010f16691f7"
+  "gitHead": "17d380c54711d3b2f2a27853aa4bc1f731b6d6ff"
 }

package/readme.md

@@ -199,7 +199,7 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
 ```
 {
     tabOpen: Number (0)
-        -- which tab should be open. -1 Navigator, 0 Preview, 1 Addons
+        -- which tab should be open. -1 SideBar, 0 Canvas, 1 Addons
     initialSelection: string | Object (undefined)
         -- initialize storybook with a specific story.  eg: `mybutton--largebutton` or `{ kind: 'MyButton', name: 'LargeButton' }`
     shouldDisableKeyboardAvoidingView: Boolean (false)