update customViewports. bring in initial viewports

Author: gregrickaby

.storybook/preview.js

@@ -1,35 +1,60 @@
-import {withNextRouter} from 'storybook-addon-next-router'
+import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport'
 import {addDecorator} from '@storybook/react'
-
+import {withNextRouter} from 'storybook-addon-next-router'
 import '../styles/index.css'
 
-// This is so that we don't get "Uncaught TypeError: Cannot read property 'prefetch' of null" in stories with a Next.js link component.
+/**
+ * Enable Next.js <Link /> component usage.
+ */
 addDecorator(
   withNextRouter({
     path: '/'
   })
 )
 
+/**
+ * Custom viewports based on popular Apple devices.
+ */
 const customViewports = {
-  mobile: {
-    name: 'Mobile',
+  largeMobile: {
+    name: 'iPhone X/11/12 Pro',
     styles: {
-      width: '375px',
-      height: '667px'
-    }
+      width: '428px',
+      height: '926px'
+    },
+    type: 'mobile'
   },
-  tablet: {
-    name: 'Tablet',
+  smallLaptop: {
+    name: 'MacBook Air 13"',
     styles: {
-      width: '768px',
-      height: '1024px'
+      width: '1280px',
+      height: '800px'
+    },
+    type: 'desktop'
+  },
+  largeLaptop: {
+    name: 'MacBook Pro 16"',
+    styles: {
+      width: '1536px',
+      height: '960px'
     }
+  },
+  destkop: {
+    name: 'iMac 5k',
+    styles: {
+      width: '2048px',
+      height: '1152px'
+    },
+    type: 'desktop'
   }
 }
 
 export const parameters = {
   actions: {argTypesRegex: '^on[A-Z].*'},
   viewport: {
-    viewports: customViewports
+    viewports: {
+      ...customViewports,
+      ...INITIAL_VIEWPORTS
+    }
   }
 }