Add viewport addon to cra-kitchen-sink example

examples/cra-kitchen-sink/.storybook/addons.js

@@ -7,3 +7,4 @@ import '@storybook/addon-knobs/register';
 import '@storybook/addon-backgrounds/register';
 import '@storybook/addon-a11y/register';
 import '@storybook/addon-jest/register';
+import '@storybook/addon-viewport/register';

examples/cra-kitchen-sink/.storybook/config.js

@@ -1,9 +1,12 @@
 import { configure, setAddon } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
+import { setViewports } from '@storybook/addon-viewport';
 
 // deprecated usage of infoAddon
 import infoAddon from '@storybook/addon-info';
 
+import viewports from './viewports.json';
+
 setOptions({
   name: 'CRA Kitchen Sink',
   url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink',
@@ -20,6 +23,8 @@ setOptions({
 // deprecated usage of infoAddon
 setAddon(infoAddon);
 
+setViewports(viewports);
+
 function loadStories() {
   // put welcome screen at the top of the list so it's the first one displayed
   require('../src/stories/welcome');

examples/cra-kitchen-sink/.storybook/viewports.json

@@ -0,0 +1,51 @@
+{
+	"iphone5": {
+		"name": "[Custom] iPhone 5",
+		"styles": {
+			"width": "320px",
+			"height": "568px"
+		}
+	},
+	"iphone6": {
+		"name": "[Custom] iPhone 6",
+		"styles": {
+			"width": "375px",
+			"height": "667px"
+		}
+	},
+	"iphone6p": {
+		"name": "[Custom] iPhone 6 Plus",
+		"styles": {
+			"width": "414px",
+			"height": "736px"
+		}
+	},
+	"ipad": {
+		"name": "[Custom] iPad",
+		"styles": {
+			"width": "768px",
+			"height": "1024px"
+		}
+	},
+	"galaxys5": {
+		"name": "[Custom] Galaxy S5",
+		"styles": {
+			"width": "360px",
+			"height": "640px"
+		}
+	},
+	"nexus5x": {
+		"name": "[Custom] Nexus 5X",
+		"styles": {
+			"width": "412px",
+			"height": "660px"
+		}
+	},
+	"nexus6p": {
+		"name": "[Custom] Nexus 6P",
+		"styles": {
+			"width": "412px",
+			"height": "732px"
+		}
+	}
+}

examples/cra-kitchen-sink/package.json

@@ -29,6 +29,7 @@
     "@storybook/addon-notes": "^3.4.0-alpha.9",
     "@storybook/addon-options": "^3.4.0-alpha.9",
     "@storybook/addon-storyshots": "^3.4.0-alpha.9",
+    "@storybook/addon-viewport": "^3.4.0-alpha.9",
     "@storybook/addons": "^3.4.0-alpha.9",
     "@storybook/client-logger": "^3.4.0-alpha.9",
     "@storybook/react": "^3.4.0-alpha.9",