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, }, }, diff --git a/addons/viewport/src/Tool.tsx b/addons/viewport/src/Tool.tsx index 761b95a5d22..98d38e5addd 100644 --- a/addons/viewport/src/Tool.tsx +++ b/addons/viewport/src/Tool.tsx @@ -124,19 +124,23 @@ 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, + selected: defaultViewport, isRotated: false, }); 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: 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';