Merge pull request #17891 from JonathanKolnik/jono/ch-1774-add-url-pa…

…rameters-to-sb-to-tweak UI: Add URL parameters to SB to tweak visible UI
storybookjs · Apr 11, 2022 · 4d4b2ed · 4d4b2ed
2 parents 7e548dc + 2317c2a
commit 4d4b2ed
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 6 deletions.
diff --git a/lib/ui/src/components/preview/preview.stories.tsx b/lib/ui/src/components/preview/preview.stories.tsx
@@ -131,9 +131,37 @@ export const HideAllDefaultTools = () => (
 export const WithCanvasTab = () => (
   <Consumer>
     {({ api }: Combo) => {
-      return <Preview {...previewProps} api={{ ...api, getElements: () => ({}) }} />;
+      return (
+        <Preview
+          {...previewProps}
+          api={{
+            ...api,
+            getElements: () => ({}),
+          }}
+        />
+      );
     }}
   </Consumer>
 );
 
 export const WithTabs = () => <Preview {...previewProps} />;
+
+export const WithToolbarExclusions = () => (
+  <Consumer>
+    {({ api }: Combo) => {
+      return (
+        <Preview
+          {...previewProps}
+          api={{
+            ...api,
+            getElements: () => ({}),
+            getQueryParam: (key) => {
+              const params = { toolbarExclude: 'canvas,fullscreen' };
+              return params[key];
+            },
+          }}
+        />
+      );
+    }}
+  </Consumer>
+);
diff --git a/lib/ui/src/components/preview/toolbar.tsx b/lib/ui/src/components/preview/toolbar.tsx
@@ -18,6 +18,8 @@ import { ejectTool } from './tools/eject';
 import { menuTool } from './tools/menu';
 import { addonsTool } from './tools/addons';
 
+const TOOLBAR_EXCLUSION_PARAM = 'toolbarExclude';
+
 export const getTools = (getFn: API['getElements']) => Object.values(getFn<Addon>(types.TOOL));
 
 export const getToolsExtra = (getFn: API['getElements']) =>
@@ -115,7 +117,8 @@ const useTools = (
   viewMode: PreviewProps['viewMode'],
   story: PreviewProps['story'],
   location: PreviewProps['location'],
-  path: PreviewProps['path']
+  path: PreviewProps['path'],
+  getQueryParam: API['getQueryParam']
 ) => {
   const toolsFromConfig = useMemo(() => getTools(getElements), [getElements]);
   const toolsExtraFromConfig = useMemo(() => getToolsExtra(getElements), [getElements]);
@@ -129,9 +132,20 @@ const useTools = (
     [defaultToolsExtra, toolsExtraFromConfig]
   );
 
+  const toolbarExclusions: string[] =
+    getQueryParam && getQueryParam(TOOLBAR_EXCLUSION_PARAM)
+      ? getQueryParam(TOOLBAR_EXCLUSION_PARAM).split(',')
+      : [];
+
   return useMemo(() => {
     return story && story.parameters
-      ? filterTools(tools, toolsExtra, tabs, { viewMode, story, location, path })
+      ? filterTools(tools, toolsExtra, tabs, {
+          viewMode,
+          story,
+          location,
+          path,
+          toolbarExclusions,
+        })
       : { left: tools, right: toolsExtra };
   }, [viewMode, story, location, path, tools, toolsExtra, tabs]);
 };
@@ -145,7 +159,15 @@ export interface ToolData {
 
 export const ToolRes: FunctionComponent<ToolData & RenderData> = React.memo<ToolData & RenderData>(
   ({ api, story, tabs, isShown, location, path, viewMode }) => {
-    const { left, right } = useTools(api.getElements, tabs, viewMode, story, location, path);
+    const { left, right } = useTools(
+      api.getElements,
+      tabs,
+      viewMode,
+      story,
+      location,
+      path,
+      api.getQueryParam
+    );
 
     return left || right ? (
       <Toolbar key="toolbar" shown={isShown} border>
@@ -190,16 +212,24 @@ export function filterTools(
     story,
     location,
     path,
+    toolbarExclusions,
   }: {
     viewMode: State['viewMode'];
     story: PreviewProps['story'];
     location: State['location'];
     path: State['path'];
+    toolbarExclusions: string[];
   }
 ) {
+  const isToolIncluded = (id: string) =>
+    toolbarExclusions.filter((exclusionKey) => id.match(new RegExp(`^${exclusionKey}.*`)))
+      .length === 0;
+
+  const filteredTabs = tabs.filter((tab) => isToolIncluded(tab.id));
+
   const toolsLeft = [
     menuTool,
-    tabs.filter((p) => !p.hidden).length >= 1 && createTabsTool(tabs),
+    filteredTabs.filter((p) => !p.hidden).length >= 1 && createTabsTool(filteredTabs),
     ...tools,
   ];
   const toolsRight = [...toolsExtra];
@@ -214,7 +244,8 @@ export function filterTools(
         location,
         path,
       })) &&
-    !toolbarItemHasBeenExcluded(item, story);
+    !toolbarItemHasBeenExcluded(item, story) &&
+    isToolIncluded(item.id);
 
   const left = toolsLeft.filter(filter);
   const right = toolsRight.filter(filter);