From c25af097a1fd23eac9873a78c628a8a809a618ff Mon Sep 17 00:00:00 2001
From: Vincent <projects@vinnl.nl>
Date: Thu, 13 Dec 2018 15:25:30 +0100
Subject: [PATCH] Add types for @storybook/addon-viewport

---
 types/storybook__addon-viewport/index.d.ts    | 42 +++++++++++++++++++
 .../storybook__addon-viewport-tests.ts        | 33 +++++++++++++++
 types/storybook__addon-viewport/tsconfig.json | 31 ++++++++++++++
 types/storybook__addon-viewport/tslint.json   |  1 +
 4 files changed, 107 insertions(+)
 create mode 100644 types/storybook__addon-viewport/index.d.ts
 create mode 100644 types/storybook__addon-viewport/storybook__addon-viewport-tests.ts
 create mode 100644 types/storybook__addon-viewport/tsconfig.json
 create mode 100644 types/storybook__addon-viewport/tslint.json

diff --git a/types/storybook__addon-viewport/index.d.ts b/types/storybook__addon-viewport/index.d.ts
new file mode 100644
index 0000000000..2576ab85cc
--- /dev/null
+++ b/types/storybook__addon-viewport/index.d.ts
@@ -0,0 +1,42 @@
+// Type definitions for @storybook/addon-viewport 4.1
+// Project: https://github.com/storybooks/storybook/tree/master/addons/viewport
+// Definitions by: Vincent Tunru <https://github.com/Vinnl>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import { StoryDecorator } from '@storybook/react';
+
+export type ViewportName = string;
+
+export interface ViewportProperties {
+    name: ViewportName;
+    styles: {
+        width?: string,
+        height?: string,
+        [styleName: string]: any,
+    };
+    type?: 'desktop' | 'tablet' | 'mobile' | string;
+}
+export interface ViewportDecoratorOptions {
+    /**
+     * Default viewport
+     */
+    name?: ViewportName;
+    /**
+     * Called whenever different viewport is selected from the dropdown
+     */
+    onViewportChange: (change: { viewport: ViewportProperties }) => void;
+}
+export interface ViewportDefinitions {
+    [viewportKey: string]: ViewportProperties;
+}
+export type Viewport = ViewportName | ViewportDecoratorOptions;
+
+export interface ViewportConfiguration {
+    viewports?: ViewportDefinitions;
+    defaultViewport?: ViewportName;
+}
+
+export const INITIAL_VIEWPORTS: ViewportDefinitions;
+export function configureViewport(configuration: ViewportConfiguration): void;
+export function withViewport(viewport?: Viewport): StoryDecorator;
diff --git a/types/storybook__addon-viewport/storybook__addon-viewport-tests.ts b/types/storybook__addon-viewport/storybook__addon-viewport-tests.ts
new file mode 100644
index 0000000000..dce6671b2d
--- /dev/null
+++ b/types/storybook__addon-viewport/storybook__addon-viewport-tests.ts
@@ -0,0 +1,33 @@
+import { configureViewport, INITIAL_VIEWPORTS, withViewport } from '@storybook/addon-viewport';
+
+import { storiesOf } from '@storybook/react';
+
+const minimalViewport = {
+    name: 'Viewport with minimal amount of configuration',
+    styles: {
+        width: '450px',
+        height: '150px',
+    },
+};
+const maximalViewport = {
+    name: 'Viewport that also sets its type',
+    styles: {
+        width: '230px',
+        height: '300px',
+    },
+    type: 'desktop',
+};
+configureViewport({
+    viewports: { ...INITIAL_VIEWPORTS,    minimalViewport, maximalViewport },
+});
+configureViewport({
+    defaultViewport: 'minimalViewport',
+});
+
+const stories = storiesOf('Example of Knobs', module);
+
+stories.addDecorator(withViewport());
+stories.addDecorator(withViewport('viewportName'));
+stories.addDecorator(withViewport({
+    onViewportChange: ({ viewport }) => `Viewport changed: ${viewport.name} (${viewport.type})`,
+}));
diff --git a/types/storybook__addon-viewport/tsconfig.json b/types/storybook__addon-viewport/tsconfig.json
new file mode 100644
index 0000000000..30f31fb5d3
--- /dev/null
+++ b/types/storybook__addon-viewport/tsconfig.json
@@ -0,0 +1,31 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "paths": {
+            "@storybook/addon-viewport": [
+                "storybook__addon-viewport"
+            ],
+            "@storybook/react": [
+                "storybook__react"
+            ]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "storybook__addon-viewport-tests.ts"
+    ]
+}
diff --git a/types/storybook__addon-viewport/tslint.json b/types/storybook__addon-viewport/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/storybook__addon-viewport/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }