From 0b111bbe6289d8549aa1e75f25bd9390e28770e1 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Thu, 12 Dec 2019 16:45:46 +0800 Subject: [PATCH 1/4] Allow options to be optional for addon-viewport --- addons/viewport/src/Tool.tsx | 12 +++++------- addons/viewport/src/legacy_preview/index.ts | 2 +- addons/viewport/src/models/ViewportAddonParameter.ts | 2 +- addons/viewport/src/preview.ts | 7 ++++++- 4 files changed, 13 insertions(+), 10 deletions(-) diff --git a/addons/viewport/src/Tool.tsx b/addons/viewport/src/Tool.tsx index 761b95a5d22..4fa841a5495 100644 --- a/addons/viewport/src/Tool.tsx +++ b/addons/viewport/src/Tool.tsx @@ -124,13 +124,11 @@ const getStyles = ( export const ViewportTool: FunctionComponent = memo( withTheme(({ theme }: { theme: Theme }) => { - const { viewports, defaultViewport, disable } = useParameter( - PARAM_KEY, - { - viewports: MINIMAL_VIEWPORTS, - defaultViewport: responsiveViewport.id, - } - ); + const { + viewports = MINIMAL_VIEWPORTS, + defaultViewport = responsiveViewport.id, + disable, + } = useParameter(PARAM_KEY, {}); const [state, setState] = useAddonState(ADDON_ID, { selected: defaultViewport || responsiveViewport.id, isRotated: false, diff --git a/addons/viewport/src/legacy_preview/index.ts b/addons/viewport/src/legacy_preview/index.ts index 0e4f8e090b9..de7b43e50a0 100644 --- a/addons/viewport/src/legacy_preview/index.ts +++ b/addons/viewport/src/legacy_preview/index.ts @@ -1,6 +1,6 @@ import deprecate from 'util-deprecate'; -export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../defaults'; +export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT, MINIMAL_VIEWPORTS } from '../defaults'; export const configureViewport = deprecate(() => {}, 'configureViewport is no longer supported, use .addParameters({ viewport }) instead'); diff --git a/addons/viewport/src/models/ViewportAddonParameter.ts b/addons/viewport/src/models/ViewportAddonParameter.ts index 7a6b5b27d39..e0f826f9586 100644 --- a/addons/viewport/src/models/ViewportAddonParameter.ts +++ b/addons/viewport/src/models/ViewportAddonParameter.ts @@ -3,7 +3,7 @@ import { ViewportMap } from './Viewport'; export interface ViewportAddonParameter { disable?: boolean; defaultViewport?: string; - viewports: ViewportMap; + viewports?: ViewportMap; /* * @deprecated * The viewport parameter `onViewportChange` is no longer supported diff --git a/addons/viewport/src/preview.ts b/addons/viewport/src/preview.ts index be2dc03d34c..9f198c8b135 100644 --- a/addons/viewport/src/preview.ts +++ b/addons/viewport/src/preview.ts @@ -1 +1,6 @@ -export { configureViewport, DEFAULT_VIEWPORT, INITIAL_VIEWPORTS } from './legacy_preview'; +export { + configureViewport, + DEFAULT_VIEWPORT, + INITIAL_VIEWPORTS, + MINIMAL_VIEWPORTS, +} from './legacy_preview'; From 64e57efd1f111848804ff3d0b0223d89320c3202 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Thu, 12 Dec 2019 16:48:34 +0800 Subject: [PATCH 2/4] Remove duplicate check --- addons/viewport/src/Tool.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/viewport/src/Tool.tsx b/addons/viewport/src/Tool.tsx index 4fa841a5495..79771c980ff 100644 --- a/addons/viewport/src/Tool.tsx +++ b/addons/viewport/src/Tool.tsx @@ -130,7 +130,7 @@ export const ViewportTool: FunctionComponent = memo( disable, } = useParameter(PARAM_KEY, {}); const [state, setState] = useAddonState(ADDON_ID, { - selected: defaultViewport || responsiveViewport.id, + selected: defaultViewport, isRotated: false, }); const list = toList(viewports); From 66fe1fd2c96b6450e7c24364373a0de49d2430ba Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Thu, 12 Dec 2019 16:53:28 +0800 Subject: [PATCH 3/4] Update documentation about exported MINIMAL_VIEWPORTS --- addons/viewport/README.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/addons/viewport/README.md b/addons/viewport/README.md index 91f2a6fe0c1..853c64491b5 100644 --- a/addons/viewport/README.md +++ b/addons/viewport/README.md @@ -24,8 +24,8 @@ within `.storybook/main.js`: ```js module.exports = { - addons: ['@storybook/addon-viewport/register'] -} + addons: ['@storybook/addon-viewport/register'], +}; ``` You should now be able to see the viewport addon icon in the the toolbar at the top of the screen. @@ -157,11 +157,14 @@ addParameters({ ### Add New Device -This will add both `Kindle Fire 2` and `Kindle Fire HD` to the list of devices. This is achieved by making use of the exported [`INITIAL_VIEWPORTS`](src/defaults.ts) property, by merging it with the new viewports and pass the result as `viewports` to `configureViewport` function +This will add both `Kindle Fire 2` and `Kindle Fire HD` to the list of devices. This is achieved by making use of the exported [`INITIAL_VIEWPORTS`](src/defaults.ts) or [`MINIMAL_VIEWPORTS`](src/defaults.ts) property, by merging it with the new viewports and pass the result as `viewports` to `configureViewport` function ```js import { addParameters } from '@storybook/react'; -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; +import { + INITIAL_VIEWPORTS, + // or MINIMAL_VIEWPORTS, +} from '@storybook/addon-viewport'; const customViewports = { kindleFire2: { @@ -184,6 +187,7 @@ addParameters({ viewport: { viewports: { ...INITIAL_VIEWPORTS, + // or ...MINIMAL_VIEWPORTS, ...customViewports, }, }, From 2faaa7c04444c7ca3588462453622c74ae509a81 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Thu, 12 Dec 2019 17:10:58 +0800 Subject: [PATCH 4/4] Add warning about defaultViewport not in viewports list --- addons/viewport/src/Tool.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/addons/viewport/src/Tool.tsx b/addons/viewport/src/Tool.tsx index 79771c980ff..98d38e5addd 100644 --- a/addons/viewport/src/Tool.tsx +++ b/addons/viewport/src/Tool.tsx @@ -135,6 +135,12 @@ export const ViewportTool: FunctionComponent = memo( }); const list = toList(viewports); + if (!list.find(i => i.id === defaultViewport)) { + console.warn( + `Cannot find "defaultViewport" of "${defaultViewport}" in addon-viewport configs, please check the "viewports" setting in the configuration.` + ); + } + useEffect(() => { setState({ selected: