Add types for @storybook/addon-viewport

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;

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})`,
+}));

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"
+    ]
+}

types/storybook__addon-viewport/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }