From a2ead8c73a54aa9331963bd5fc26f5a2e6f6188f Mon Sep 17 00:00:00 2001 From: Tomas Nygren Date: Wed, 12 May 2021 10:02:47 +1000 Subject: [PATCH 1/5] make it possible to hide toolbar tools with configuration --- examples/official-storybook/manager.js | 3 +++ lib/addons/src/index.ts | 7 ++++++- lib/ui/src/components/preview/toolbar.tsx | 12 ++++++++++-- lib/ui/src/components/preview/tools/copy.tsx | 1 + lib/ui/src/components/preview/tools/eject.tsx | 1 + lib/ui/src/components/preview/tools/zoom.tsx | 1 + 6 files changed, 22 insertions(+), 3 deletions(-) diff --git a/examples/official-storybook/manager.js b/examples/official-storybook/manager.js index b46efbc338c..7ce6166c7fe 100644 --- a/examples/official-storybook/manager.js +++ b/examples/official-storybook/manager.js @@ -26,6 +26,9 @@ addons.setConfig({ hidden: true, }, }, + toolbar: { + fullscreen: { hidden: true }, + }, sidebar: { collapsedRoots: ['other'], renderLabel: ({ id, name }) => { diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts index c3729163fed..8c5b2b69879 100644 --- a/lib/addons/src/index.ts +++ b/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; } diff --git a/lib/ui/src/components/preview/toolbar.tsx b/lib/ui/src/components/preview/toolbar.tsx index 66f5c748970..aae312fc1ff 100644 --- a/lib/ui/src/components/preview/toolbar.tsx +++ b/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: () => ( @@ -74,6 +75,7 @@ const tabsMapper = ({ state }: Combo) => ({ export const createTabsTool = (tabs: Addon[]): Addon => ({ title: 'title', + id: 'title', render: () => ( {(rp) => ( @@ -165,6 +167,11 @@ export const Tools = React.memo<{ list: Addon[] }>(({ list }) => ( )); +function hasBeenExcludedByConfiguration(item: Partial) { + 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); diff --git a/lib/ui/src/components/preview/tools/copy.tsx b/lib/ui/src/components/preview/tools/copy.tsx index 97dbf6f7e48..4ae7a8727c5 100644 --- a/lib/ui/src/components/preview/tools/copy.tsx +++ b/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: () => ( diff --git a/lib/ui/src/components/preview/tools/eject.tsx b/lib/ui/src/components/preview/tools/eject.tsx index f0d36219c36..1bb94d55266 100644 --- a/lib/ui/src/components/preview/tools/eject.tsx +++ b/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: () => ( diff --git a/lib/ui/src/components/preview/tools/zoom.tsx b/lib/ui/src/components/preview/tools/zoom.tsx index f03a6a4f451..d897f89eb55 100644 --- a/lib/ui/src/components/preview/tools/zoom.tsx +++ b/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(() => ( <> From 9bf9d240a9a216c10509f2c861020ac814bf4661 Mon Sep 17 00:00:00 2001 From: Tomas Nygren Date: Wed, 12 May 2021 11:02:19 +1000 Subject: [PATCH 2/5] create story scenarios to exclude toolbar items. Can exclude toolbar item with story parameter --- examples/official-storybook/manager.js | 3 -- .../components/preview/preview.stories.tsx | 38 +++++++++++++++++++ lib/ui/src/components/preview/toolbar.tsx | 13 +++++-- 3 files changed, 47 insertions(+), 7 deletions(-) diff --git a/examples/official-storybook/manager.js b/examples/official-storybook/manager.js index 7ce6166c7fe..b46efbc338c 100644 --- a/examples/official-storybook/manager.js +++ b/examples/official-storybook/manager.js @@ -26,9 +26,6 @@ addons.setConfig({ hidden: true, }, }, - toolbar: { - fullscreen: { hidden: true }, - }, sidebar: { collapsedRoots: ['other'], renderLabel: ({ id, name }) => { diff --git a/lib/ui/src/components/preview/preview.stories.tsx b/lib/ui/src/components/preview/preview.stories.tsx index d94f51f5fc0..5a856c02721 100644 --- a/lib/ui/src/components/preview/preview.stories.tsx +++ b/lib/ui/src/components/preview/preview.stories.tsx @@ -50,6 +50,44 @@ export const noTabs = () => ( ); +export const hideFullscreen = () => ( + + {({ api }: Combo) => { + return ( + ({}) }} + story={{ parameters: { toolbar: { fullscreen: { hidden: true } } } }} + /> + ); + }} + +); + +export const hideAllDefaultTools = () => ( + + {({ api }: Combo) => { + return ( + ({}) }} + story={{ + parameters: { + toolbar: { + title: { hidden: true }, + zoom: { hidden: true }, + eject: { hidden: true }, + copy: { hidden: true }, + fullscreen: { hidden: true }, + }, + }, + }} + /> + ); + }} + +); + export const withCanvasTab = () => ( {({ api }: Combo) => { diff --git a/lib/ui/src/components/preview/toolbar.tsx b/lib/ui/src/components/preview/toolbar.tsx index c7ef2451e27..94031deb7f2 100644 --- a/lib/ui/src/components/preview/toolbar.tsx +++ b/lib/ui/src/components/preview/toolbar.tsx @@ -3,7 +3,7 @@ import React, { Fragment, useMemo, FunctionComponent } from 'react'; 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 { Consumer, Combo, API, Story, Group, State, merge } from '@storybook/api'; import { shortcutToHumanString } from '@storybook/api/shortcut'; import addons, { Addon, types } from '@storybook/addons'; @@ -167,8 +167,13 @@ export const Tools = React.memo<{ list: Addon[] }>(({ list }) => ( )); -function hasBeenExcludedByConfiguration(item: Partial) { - const { toolbar } = addons.getConfig(); +function toolbarItemHasBeenExcluded(item: Partial, story: PreviewProps['story']) { + const storyParameterToolbar = + 'toolbar' in story.parameters ? story.parameters.toolbar : undefined; + const { toolbar: configToolbar } = addons.getConfig(); + + const toolbar = merge(configToolbar, storyParameterToolbar); + return toolbar ? !!toolbar[item.id]?.hidden : false; } @@ -201,7 +206,7 @@ export function filterTools( location, path, })) && - !hasBeenExcludedByConfiguration(item); + !toolbarItemHasBeenExcluded(item, story); const left = toolsLeft.filter(filter); const right = toolsRight.filter(filter); From 9f18b71bdcb5f8ed48627f2cdaea4bf898e30379 Mon Sep 17 00:00:00 2001 From: Tomas Nygren Date: Thu, 13 May 2021 12:52:18 +1000 Subject: [PATCH 3/5] improve variable names in toolbarItemHasBeenExcluded --- lib/ui/src/components/preview/toolbar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/ui/src/components/preview/toolbar.tsx b/lib/ui/src/components/preview/toolbar.tsx index 94031deb7f2..09ac6824ec2 100644 --- a/lib/ui/src/components/preview/toolbar.tsx +++ b/lib/ui/src/components/preview/toolbar.tsx @@ -168,13 +168,13 @@ export const Tools = React.memo<{ list: Addon[] }>(({ list }) => ( )); function toolbarItemHasBeenExcluded(item: Partial, story: PreviewProps['story']) { - const storyParameterToolbar = + const toolbarItemsFromStoryParameters = 'toolbar' in story.parameters ? story.parameters.toolbar : undefined; - const { toolbar: configToolbar } = addons.getConfig(); + const { toolbar: toolbarItemsFromAddonsConfig } = addons.getConfig(); - const toolbar = merge(configToolbar, storyParameterToolbar); + const toolbarItems = merge(toolbarItemsFromAddonsConfig, toolbarItemsFromStoryParameters); - return toolbar ? !!toolbar[item.id]?.hidden : false; + return toolbarItems ? !!toolbarItems[item.id]?.hidden : false; } export function filterTools( From c268a733dec39e1442d0ba2212f4a33536d3733f Mon Sep 17 00:00:00 2001 From: Tomas Nygren Date: Fri, 14 May 2021 13:22:47 +1000 Subject: [PATCH 4/5] add documentation and examples for toolbar configuration --- docs/configure/features-and-behavior.md | 7 +++++++ docs/snippets/common/storybook-config-layout.js.mdx | 9 ++++++++- examples/official-storybook/manager.js | 7 +++++++ 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/docs/configure/features-and-behavior.md b/docs/configure/features-and-behavior.md index b6b0596f7c5..7b01329ffe9 100644 --- a/docs/configure/features-and-behavior.md +++ b/docs/configure/features-and-behavior.md @@ -28,6 +28,7 @@ The following table details how to use the API values: | **selectedPanel** | String |Id to select an addon panel |`my-panel` | | **initialActive** | String |Select the default active tab on Mobile |`sidebar` or `canvas` or `addons` | | **sidebar** | Object |Sidebar options, see below |`{ showRoots: false }` | +| **toolbar** | Object |Modify the tools in the toolbar using the addon id |`{ fullscreen: { hidden: false } } }` | The following options are configurable under the `sidebar` namespace: @@ -36,3 +37,9 @@ The following options are configurable under the `sidebar` namespace: | **showRoots** | Boolean |Display the top-level nodes as a "root" in the sidebar |`false` | | **collapsedRoots** | Array |Set of root node IDs to visually collapse by default |`['misc', 'other']` | | **renderLabel** | Function |Create a custom label for tree nodes; must return a ReactNode |`(item) => {item.name}`| + +The following options are configurable under the `toolbar` namespace: + +| Name | Type | Description | Example Value | +| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:| +| **id** | String |Toggle visibility for toolbar item |` { hidden: false }` | \ No newline at end of file diff --git a/docs/snippets/common/storybook-config-layout.js.mdx b/docs/snippets/common/storybook-config-layout.js.mdx index 30d412a0314..6445b4f12fe 100644 --- a/docs/snippets/common/storybook-config-layout.js.mdx +++ b/docs/snippets/common/storybook-config-layout.js.mdx @@ -17,5 +17,12 @@ addons.setConfig({ showRoots: false, collapsedRoots: ['other'], }, + toolbar: { + title: { hidden: false, }, + zoom: { hidden: false, }, + eject: { hidden: false, }, + copy: { hidden: false, }, + fullscreen: { hidden: false, }, + }, }); -``` \ No newline at end of file +``` diff --git a/examples/official-storybook/manager.js b/examples/official-storybook/manager.js index b46efbc338c..642d6e7bfb2 100644 --- a/examples/official-storybook/manager.js +++ b/examples/official-storybook/manager.js @@ -25,6 +25,13 @@ addons.setConfig({ graphiql: { hidden: true, }, + toolbar: { + title: { hidden: false }, + zoom: { hidden: false }, + eject: { hidden: false }, + copy: { hidden: false }, + fullscreen: { hidden: false }, + }, }, sidebar: { collapsedRoots: ['other'], From 8c655005a961421e2153ed3a58f1d43df97b74c6 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 14 May 2021 14:29:13 +0800 Subject: [PATCH 5/5] Update docs/configure/features-and-behavior.md --- docs/configure/features-and-behavior.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/configure/features-and-behavior.md b/docs/configure/features-and-behavior.md index 7b01329ffe9..65e9c8677d0 100644 --- a/docs/configure/features-and-behavior.md +++ b/docs/configure/features-and-behavior.md @@ -42,4 +42,4 @@ The following options are configurable under the `toolbar` namespace: | Name | Type | Description | Example Value | | ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:| -| **id** | String |Toggle visibility for toolbar item |` { hidden: false }` | \ No newline at end of file +| **id** | String |Toggle visibility for toolbar item |`{ hidden: false }` |