Addon-viewport: Allow viewports config to be optional (#9137)

Addon-viewport: Allow viewports config to be optional

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,
     },
   },

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<ViewportAddonParameter>(
+    const {
-      PARAM_KEY,
+      viewports = MINIMAL_VIEWPORTS,
-      {
+      defaultViewport = responsiveViewport.id,
-        viewports: MINIMAL_VIEWPORTS,
+      disable,
-        defaultViewport: responsiveViewport.id,
+    } = useParameter<ViewportAddonParameter>(PARAM_KEY, {});
-      }
-    );
     const [state, setState] = useAddonState<ViewportToolState>(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:

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');

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

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';