Merge pull request #44 from ShMcK/feature/re-enable-storybook

Feature/re enable storybook

Author: ShMcK

typings/graphql.d.ts

@@ -76,6 +76,7 @@ export type GithubUser = {
 export type Level = {
 	__typename?: 'Level',
 	id: Scalars['ID'],
+	index?: number
 	title: Scalars['String'],
 	description: Scalars['String'],
 	steps: Array<Step>,
@@ -583,3 +584,4 @@ export interface IntrospectionResultData {
 		}[];
 	};
 }
+

web-app/.storybook/addons.ts

@@ -1,4 +1,4 @@
 import '@storybook/addon-actions/register'
 import '@storybook/addon-knobs/register'
 import '@storybook/addon-links/register'
-
+import '@storybook/addon-viewport/register'

web-app/.storybook/config.ts

@@ -1,21 +1,38 @@
 import '@alifd/next/dist/next.css'
-import { configure } from '@storybook/react'
+import {configure, addParameters} from '@storybook/react'
 import '../src/styles/index.css'
 
 // setup acquireVsCodeApi mock
 // @ts-ignore
 global.acquireVsCodeApi = () => ({
-  postMessage(event: string) {
-    console.log('postMessage', event)
-  }
+	postMessage(event: string) {
+		console.log('postMessage', event)
+	}
 })
 
 
 // automatically import all files ending in *.stories.tsx
 const req = require.context('../stories', true, /\.stories\.tsx$/)
 
 function loadStories() {
-  req.keys().forEach(req)
+	req.keys().forEach(req)
 }
 
+// set viewport width
+// see https://www.npmjs.com/package/@storybook/addon-viewport
+addParameters({
+	viewport: {
+		viewports: {
+			name: 'SideMenu',
+			styles: {
+				width: 200,
+				height: window.innerHeight,
+			},
+			type: 'mobile'
+		},
+		defaultViewport: 'SideMenu',
+	},
+})
+
 configure(loadStories, module)
+