make it possible to hide toolbar tools with configuration

examples/official-storybook/manager.js

@@ -26,6 +26,9 @@ addons.setConfig({
       hidden: true,
     },
   },
+  toolbar: {
+    fullscreen: { hidden: true },
+  },
   sidebar: {
     collapsedRoots: ['other'],
     renderLabel: ({ id, name }) => {

lib/addons/src/index.ts

@@ -37,9 +37,14 @@ export interface Collection {
 interface Elements {
   [key: string]: Collection;
 }
-
+interface ToolbarConfig {
+  hidden?: boolean;
+}
 export interface Config {
   theme?: ThemeVars;
+  toolbar?: {
+    [id: string]: ToolbarConfig;
+  };
   [key: string]: any;
 }
 

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

@@ -5,7 +5,7 @@ import { styled } from '@storybook/theming';
 import { FlexBar, IconButton, Icons, Separator, TabButton, TabBar } from '@storybook/components';
 import { Consumer, Combo, API, Story, Group, State } from '@storybook/api';
 import { shortcutToHumanString } from '@storybook/api/shortcut';
-import { Addon, types } from '@storybook/addons';
+import addons, { Addon, types } from '@storybook/addons';
 
 import { Location, RenderData } from '@storybook/router';
 import { zoomTool } from './tools/zoom';
@@ -46,6 +46,7 @@ const fullScreenMapper = ({ api, state }: Combo) => ({
 
 export const fullScreenTool: Addon = {
   title: 'fullscreen',
+  id: 'fullscreen',
   match: (p) => ['story', 'docs'].includes(p.viewMode),
   render: () => (
     <Consumer filter={fullScreenMapper}>
@@ -74,6 +75,7 @@ const tabsMapper = ({ state }: Combo) => ({
 
 export const createTabsTool = (tabs: Addon[]): Addon => ({
   title: 'title',
+  id: 'title',
   render: () => (
     <Consumer filter={tabsMapper}>
       {(rp) => (
@@ -165,6 +167,11 @@ export const Tools = React.memo<{ list: Addon[] }>(({ list }) => (
   </>
 ));
 
+function hasBeenExcludedByConfiguration(item: Partial<Addon>) {
+  const { toolbar } = addons.getConfig();
+  return toolbar ? !!toolbar[item.id]?.hidden : false;
+}
+
 export function filterTools(
   tools: Addon[],
   toolsExtra: Addon[],
@@ -194,7 +201,8 @@ export function filterTools(
         viewMode,
         location,
         path,
-      }));
+      })) &&
+    !hasBeenExcludedByConfiguration(item);
 
   const left = toolsLeft.filter(filter);
   const right = toolsRight.filter(filter);

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

@@ -20,6 +20,7 @@ const copyMapper = ({ state }: Combo) => {
 
 export const copyTool: Addon = {
   title: 'copy',
+  id: 'copy',
   match: ({ viewMode }) => viewMode === 'story',
   render: () => (
     <Consumer filter={copyMapper}>

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

@@ -19,6 +19,7 @@ const ejectMapper = ({ state }: Combo) => {
 
 export const ejectTool: Addon = {
   title: 'eject',
+  id: 'eject',
   match: ({ viewMode }) => viewMode === 'story',
   render: () => (
     <Consumer filter={ejectMapper}>

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

@@ -75,6 +75,7 @@ const ZoomWrapper = React.memo<{ set: Function; value: number }>(({ set, value }
 
 export const zoomTool: Addon = {
   title: 'zoom',
+  id: 'zoom',
   match: ({ viewMode }) => viewMode === 'story',
   render: React.memo(() => (
     <>