feat: rename tabs to sidebar, canvas, addons

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)

app/react-native/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)

app/react-native/src/constants.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 const ANIMATION_DURATION_TRANSITION = 400;

app/react-native/src/preview/components/OnDeviceUI/OnDeviceUI.tsx

@@ -32,12 +32,12 @@ import Addons from './addons/Addons';
 import { AddonsSkeleton } from './addons/AddonsSkeleton';
 import {
   getAddonPanelPosition,
-  getNavigatorPanelPosition,
+  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';
@@ -99,7 +99,7 @@ const OnDeviceUI = ({
   keyboardAvoidingViewVerticalOffset,
   tabOpen: initialTabOpen,
 }: OnDeviceUIProps) => {
-  const [tabOpen, setTabOpen] = useState(initialTabOpen || PREVIEW);
+  const [tabOpen, setTabOpen] = useState(initialTabOpen || CANVAS);
   const lastTabOpen = React.useRef(tabOpen);
   const [previewDimensions, setPreviewDimensions] = useState<PreviewDimens>(() => ({
     width: Dimensions.get('window').width,
@@ -124,7 +124,7 @@ const OnDeviceUI = ({
       setTabOpen(newTabOpen);
 
       // close the keyboard opened from a TextInput from story list or knobs
-      if (newTabOpen === PREVIEW) {
+      if (newTabOpen === CANVAS) {
         Keyboard.dismiss();
       }
     },
@@ -182,7 +182,7 @@ const OnDeviceUI = ({
     -panelSafeAreaMargins.paddingBottom + (keyboardAvoidingViewVerticalOffset ?? 0);
 
   const [isSplitPanelVisible] = useIsSplitPanelVisible();
-  const isPreviewInactive = tabOpen !== PREVIEW;
+  const isPreviewInactive = tabOpen !== CANVAS;
 
   return (
     <>
@@ -210,14 +210,14 @@ const OnDeviceUI = ({
               {isPreviewInactive ? (
                 <TouchableOpacity
                   style={StyleSheet.absoluteFillObject}
-                  onPress={() => handleToggleTab(PREVIEW)}
+                  onPress={() => handleToggleTab(CANVAS)}
                 />
               ) : null}
             </Animated.View>
             <Panel
               edge="right"
               style={[
-                getNavigatorPanelPosition(animatedValue.current, previewDimensions.width, wide),
+                getSidebarPanelPosition(animatedValue.current, previewDimensions.width, wide),
                 panelSafeAreaMargins,
               ]}
             >

app/react-native/src/preview/components/OnDeviceUI/animation.ts

@@ -1,6 +1,6 @@
 import { Animated, I18nManager, Insets } from 'react-native';
 import { PreviewDimens } from './absolute-positioned-keyboard-aware-view';
-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;
@@ -18,7 +18,7 @@ const panelWidth = (width: number, wide: boolean) => {
   return width * (1 - scale - SCALE_OFFSET);
 };
 
-export const getNavigatorPanelPosition = (
+export const getSidebarPanelPosition = (
   animatedValue: Animated.Value,
   previewWidth: number,
   wide: boolean
@@ -28,7 +28,7 @@ export const getNavigatorPanelPosition = (
       transform: [
         {
           translateX: animatedValue.interpolate({
-            inputRange: [NAVIGATOR, PREVIEW],
+            inputRange: [SIDEBAR, CANVAS],
             outputRange: [0, (-panelWidth(previewWidth, wide) - 1) * RTL_SCALE],
           }),
         },
@@ -48,7 +48,7 @@ export const getAddonPanelPosition = (
       transform: [
         {
           translateX: animatedValue.interpolate({
-            inputRange: [PREVIEW, ADDONS],
+            inputRange: [CANVAS, ADDONS],
             outputRange: [
               previewWidth * RTL_SCALE,
               (previewWidth - panelWidth(previewWidth, wide)) * RTL_SCALE,
@@ -73,7 +73,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 const getPreviewStyle = ({
@@ -96,25 +96,25 @@ export const getPreviewStyle = ({
   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],
         }),
       },
@@ -125,14 +125,14 @@ export const getPreviewStyle = ({
 /**
  * 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: Animated.Value) => ({
   elevation: 8,
   shadowColor: '#000',
   shadowOpacity: animatedValue.interpolate({
-    inputRange: [NAVIGATOR, PREVIEW, ADDONS],
+    inputRange: [SIDEBAR, CANVAS, ADDONS],
     outputRange: [0.25, 0, 0.25],
   }),
   shadowRadius: 8,

app/react-native/src/preview/components/OnDeviceUI/navigation/NavigationBar.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import styled from '@emotion/native';
 
-import { NAVIGATOR, PREVIEW, ADDONS } from './constants';
+import { SIDEBAR, CANVAS, ADDONS } from './constants';
 
 import { TabBar, TabButton } from '../../Shared/tabs';
 
@@ -23,19 +23,14 @@ export const NavigationBar = React.memo(({ index, onPress, style }: NavigationBa
   <NavigationTabBar style={style}>
     <TabButton
       onPress={onPress}
-      testID="BottomMenu.Navigator"
-      id={NAVIGATOR}
-      active={index === NAVIGATOR}
+      testID="BottomMenu.Sidebar"
+      id={SIDEBAR}
+      active={index === SIDEBAR}
     >
-      NAVIGATOR
+      SIDEBAR
     </TabButton>
-    <TabButton
-      onPress={onPress}
-      testID="BottomMenu.Preview"
-      id={PREVIEW}
-      active={index === PREVIEW}
-    >
-      PREVIEW
+    <TabButton onPress={onPress} testID="BottomMenu.Canvas" id={CANVAS} active={index === CANVAS}>
+      CANVAS
     </TabButton>
     <TabButton onPress={onPress} testID="BottomMenu.Addons" id={ADDONS} active={index === ADDONS}>
       ADDONS

app/react-native/src/preview/components/OnDeviceUI/navigation/constants.ts

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

app/react-native/src/preview/components/StoryView/StoryView.tsx

@@ -36,7 +36,7 @@ const StoryView = () => {
 
   return (
     <Box flex padding={16} alignItems="center" justifyContent="center">
-      <Text>Please open navigator and select a story to preview.</Text>
+      <Text>Please open the sidebar and select a story to preview.</Text>
     </Box>
   );
 };