add showTabs config

docs/configure/features-and-behavior.md

@@ -55,4 +55,4 @@ You can use URL parameters to configure some of the available features:
 | **showNav**         |    `nav`     |          `false`           |
 | **showPanel**       |   `panel`    | `false`, `right`, `bottom` |
 | **selectedPanel**   | `addonPanel` |        Any panel ID        |
-|                     | `toolbarExclusion` |        Any addon ID  |
+| **showTabs**        |    `tabs`    |           `true`           |

lib/api/src/modules/layout.ts

@@ -24,6 +24,7 @@ export interface Layout {
   panelPosition: PanelPositions;
   showNav: boolean;
   isToolshown: boolean;
+  showTabs: boolean;
 }
 
 export interface UI {
@@ -74,6 +75,7 @@ const defaultState: SubState = {
     showPanel: true,
     showNav: true,
     panelPosition: 'bottom',
+    showTabs: true,
   },
   selectedPanel: undefined,
   theme: themes.light,

lib/api/src/modules/url.ts

@@ -48,6 +48,7 @@ const initialUrlSupport = ({
     nav,
     shortcuts,
     addonPanel,
+    tabs,
     addons, // deprecated
     panelRight, // deprecated
     stories, // deprecated
@@ -62,6 +63,7 @@ const initialUrlSupport = ({
     showNav: !singleStory && parseBoolean(nav),
     showPanel: parseBoolean(panel),
     panelPosition: ['right', 'bottom'].includes(panel) ? panel : undefined,
+    showTabs: parseBoolean(tabs),
   };
   const ui: Partial<UI> = {
     enableShortcuts: parseBoolean(shortcuts),

lib/ui/src/app.stories.tsx

@@ -76,3 +76,31 @@ export const LoadingState = () => (
     />
   </ManagerProvider>
 );
+
+export const TabsHidden = () => (
+  <ManagerProvider
+    key="manager"
+    provider={new FakeProvider()}
+    path="/story/ui-app--loading-state"
+    storyId="ui-app--loading-state"
+    location={{ search: '' }}
+    navigate={() => {}}
+    docsMode={false}
+  >
+    <App
+      key="app"
+      viewMode="story"
+      layout={{
+        initialActive: 'addons',
+        isFullscreen: false,
+        isToolshown: true,
+        panelPosition: 'right',
+        showNav: true,
+        showPanel: true,
+        showTabs: false,
+      }}
+      panelCount={0}
+      docsOnly={false}
+    />
+  </ManagerProvider>
+);

lib/ui/src/components/preview/preview.tsx

@@ -145,6 +145,7 @@ const Preview = React.memo<PreviewProps>((props) => {
   const { getElements } = api;
 
   const tabs = useTabs(previewId, baseUrl, withLoader, getElements, story);
+  const visibleTabsInToolbar = options.showTabs ? tabs : [];
 
   const shouldScale = viewMode === 'story';
   const { isToolshown } = options;
@@ -181,7 +182,13 @@ const Preview = React.memo<PreviewProps>((props) => {
         </Helmet>
       )}
       <ZoomProvider shouldScale={shouldScale}>
-        <ToolbarComp key="tools" story={story} api={api} isShown={isToolshown} tabs={tabs} />
+        <ToolbarComp
+          key="tools"
+          story={story}
+          api={api}
+          isShown={isToolshown}
+          tabs={visibleTabsInToolbar}
+        />
         <S.FrameWrap key="frame" offset={isToolshown ? 40 : 0}>
           {tabs.map(({ render: Render, match, ...t }, i) => {
             // @ts-ignore

lib/ui/src/components/preview/utils/types.tsx

@@ -13,6 +13,7 @@ export interface PreviewProps {
   options: {
     isFullscreen: boolean;
     isToolshown: boolean;
+    showTabs: boolean;
   };
   id: string;
   path: string;