chore: improve typings of addons/viewport

storybookjs · Jun 24, 2019 · 2c5b08f · 2c5b08f
1 parent 1925520
commit 2c5b08f
Show file tree

Hide file tree

Showing 10 changed files with 146 additions and 85 deletions.
diff --git a/addons/viewport/package.json b/addons/viewport/package.json
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@storybook/addons": "5.2.0-alpha.23",
+    "@storybook/api": "5.2.0-alpha.23",
     "@storybook/client-logger": "5.2.0-alpha.23",
     "@storybook/components": "5.2.0-alpha.23",
     "@storybook/core-events": "5.2.0-alpha.23",

diff --git a/addons/viewport/src/Tool.tsx b/addons/viewport/src/Tool.tsx
@@ -1,5 +1,4 @@
 import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
 import memoize from 'memoizerific';
 import deprecate from 'util-deprecate';
 
@@ -10,23 +9,37 @@ import { SET_STORIES } from '@storybook/core-events';
 
 import { PARAM_KEY } from './constants';
 import { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from './defaults';
+import { ViewportAddonParameter, ViewportMap, ViewportStyles } from './models';
 
-const toList = memoize(50)(items =>
+const toList = memoize(50)((items: ViewportMap) =>
   items ? Object.entries(items).map(([id, value]) => ({ ...value, id })) : []
 );
 const iframeId = 'storybook-preview-iframe';
 
-const createItem = memoize(1000)((id, name, value, change) => ({
-  id: id || name,
-  title: name,
-  onClick: () => {
-    change({ selected: id, expanded: false });
-  },
-  right: `${value.width.replace('px', '')}x${value.height.replace('px', '')}`,
-  value,
-}));
+interface ViewportVM {
+  id: string;
+  title: string;
+  onClick: () => void;
+  right: string;
+  value: ViewportStyles;
+}
+
+const createItem = memoize(1000)(
+  (id: string, name: string, value: ViewportStyles, change: (...args: unknown[]) => void) => {
+    const result: ViewportVM = {
+      id: id || name,
+      title: name,
+      onClick: () => {
+        change({ selected: id, expanded: false });
+      },
+      right: `${value.width.replace('px', '')}x${value.height.replace('px', '')}`,
+      value,
+    };
+    return result;
+  }
+);
 
-const flip = ({ width, height }: { width: any; height: any }) => ({ height: width, width: height });
+const flip = ({ width, height }: ViewportStyles) => ({ height: width, width: height });
 
 const deprecatedViewportString = deprecate(
   () => 0,
@@ -37,58 +50,69 @@ const deprecateOnViewportChange = deprecate(
   'The viewport parameter `onViewportChange` is no longer supported'
 );
 
-const getState = memoize(10)((props, state, change) => {
-  const data = props.api.getCurrentStoryData();
-  const parameters = data && data.parameters && data.parameters[PARAM_KEY];
-
-  if (parameters && typeof parameters !== 'object') {
-    deprecatedViewportString();
-  }
+const getState = memoize(10)(
+  (
+    props: ViewportToolProps,
+    state: ViewportToolState,
+    change: (statePatch: Partial<ViewportToolState>) => void
+  ) => {
+    const data = props.api.getCurrentStoryData();
+    const parameters: ViewportAddonParameter =
+      data && (data as any).parameters && (data as any).parameters[PARAM_KEY];
+
+    if (parameters && typeof parameters !== 'object') {
+      deprecatedViewportString();
+    }
 
-  const { disable, viewports, defaultViewport, onViewportChange } = parameters || ({} as any);
+    const { disable, viewports, defaultViewport, onViewportChange } = parameters || ({} as any);
 
-  if (onViewportChange) {
-    deprecateOnViewportChange();
-  }
+    if (onViewportChange) {
+      deprecateOnViewportChange();
+    }
 
-  const list = disable ? [] : toList(viewports || INITIAL_VIEWPORTS);
-
-  const selected =
-    state.selected === 'responsive' || list.find(i => i.id === state.selected)
-      ? state.selected
-      : list.find(i => (i as any).default) || defaultViewport || DEFAULT_VIEWPORT;
-
-  const resets =
-    selected !== 'responsive'
-      ? [
-          {
-            id: 'reset',
-            title: 'Reset viewport',
-            onClick: () => {
-              change({ selected: undefined, expanded: false });
+    const list = disable ? [] : toList(viewports || INITIAL_VIEWPORTS);
+    const viewportVMList = list.map(({ id, name, styles: value }) =>
+      createItem(id, name, value, change)
+    );
+
+    const selected =
+      state.selected === 'responsive' || list.find(i => i.id === state.selected)
+        ? state.selected
+        : list.find(i => i.default) || defaultViewport || DEFAULT_VIEWPORT;
+
+    const resets: ViewportVM[] =
+      selected !== 'responsive'
+        ? [
+            {
+              id: 'reset',
+              title: 'Reset viewport',
+              onClick: () => {
+                change({ selected: undefined, expanded: false });
+              },
+              right: undefined,
+              value: undefined,
             },
-          },
-          {
-            id: 'rotate',
-            title: 'Rotate viewport',
-            onClick: () => {
-              change({ isRotated: !state.isRotated, expanded: false });
+            {
+              id: 'rotate',
+              title: 'Rotate viewport',
+              onClick: () => {
+                change({ isRotated: !state.isRotated, expanded: false });
+              },
+              right: undefined,
+              value: undefined,
             },
-          },
-        ]
-      : [];
-  const items = list.length
-    ? resets.concat(
-        list.map(({ id, name, styles: value }: any) => createItem(id, name, value, change))
-      )
-    : list;
-
-  return {
-    isRotated: state.isRotated,
-    items,
-    selected,
-  };
-});
+          ]
+        : [];
+
+    const items = viewportVMList.length !== 0 ? resets.concat(viewportVMList) : [];
+
+    return {
+      isRotated: state.isRotated,
+      items,
+      selected,
+    };
+  }
+);
 
 const ActiveViewportSize = styled.div(() => ({
   display: 'inline-flex',
@@ -118,10 +142,20 @@ const IconButtonLabel = styled.div(({ theme }) => ({
   marginLeft: '10px',
 }));
 
-export default class ViewportTool extends Component<any, any> {
-  listener: any;
+interface ViewportToolState {
+  isRotated: boolean;
+  items: any[];
+  selected: string;
+  expanded: boolean;
+}
+interface ViewportToolProps {
+  api: any;
+}
 
-  constructor(props: any) {
+export class ViewportTool extends Component<ViewportToolProps, ViewportToolState> {
+  listener: () => void;
+
+  constructor(props: ViewportToolProps) {
     super(props);
 
     this.state = {
@@ -157,7 +191,7 @@ export default class ViewportTool extends Component<any, any> {
       expanded: false,
     }));
 
-  resetViewport = (e: any) => {
+  resetViewport = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
 
@@ -167,10 +201,10 @@ export default class ViewportTool extends Component<any, any> {
   render() {
     const { expanded } = this.state;
     const { items, selected, isRotated } = getState(this.props, this.state, this.change);
-    const item: any = items.find(i => i.id === selected);
+    const item = items.find(i => i.id === selected);
 
-    let viewportX = 0;
-    let viewportY = 0;
+    let viewportX = '0';
+    let viewportY = '0';
     let viewportTitle = '';
     if (item) {
       const height = item.value.height.replace('px', '');
@@ -196,7 +230,7 @@ export default class ViewportTool extends Component<any, any> {
                 boxShadow: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);',
                 boxSizing: 'content-box',
 
-                ...(isRotated ? flip(item.value || {}) : item.value || {}),
+                ...(isRotated ? flip(item.value) : item.value),
               },
             }}
           />
@@ -232,9 +266,3 @@ export default class ViewportTool extends Component<any, any> {
     ) : null;
   }
 }
-
-(ViewportTool as any).propTypes = {
-  api: PropTypes.shape({
-    on: PropTypes.func,
-  }).isRequired,
-};
diff --git a/addons/viewport/src/constants.ts b/addons/viewport/src/constants.ts
@@ -1,9 +1,7 @@
 export const ADDON_ID = 'storybook/viewport';
 export const PARAM_KEY = 'viewport';
 
-export default {
-  UPDATE: `${ADDON_ID}/update`,
-  CONFIGURE: `${ADDON_ID}/configure`,
-  SET: `${ADDON_ID}/setStoryDefaultViewport`,
-  CHANGED: `${ADDON_ID}/viewportChanged`,
-};
+export const UPDATE = `${ADDON_ID}/update`;
+export const CONFIGURE = `${ADDON_ID}/configure`;
+export const SET = `${ADDON_ID}/setStoryDefaultViewport`;
+export const CHANGED = `${ADDON_ID}/viewportChanged`;
diff --git a/addons/viewport/src/defaults.ts b/addons/viewport/src/defaults.ts
@@ -1,4 +1,6 @@
-export const INITIAL_VIEWPORTS = {
+import { ViewportMap } from './models';
+
+export const INITIAL_VIEWPORTS: ViewportMap = {
   iphone5: {
     name: 'iPhone 5',
     styles: {

diff --git a/addons/viewport/src/legacy_preview/index.ts b/addons/viewport/src/legacy_preview/index.ts
@@ -1,7 +1,6 @@
 import deprecate from 'util-deprecate';
 
 export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../defaults';
-export { default as withViewport } from './withViewport';
 
 export const configureViewport = deprecate(() => {},
 'configureViewport is no longer supported, use .addParameters({ viewport }) instead');
diff --git a/addons/viewport/src/legacy_preview/withViewport.ts b/addons/viewport/src/legacy_preview/withViewport.ts
@@ -1,11 +1,11 @@
-import { makeDecorator } from '@storybook/addons';
+import { makeDecorator, StoryGetter, StoryContext } from '@storybook/addons';
 import deprecate from 'util-deprecate';
 
 const withViewport = makeDecorator({
   name: 'withViewport',
   parameterName: 'viewport',
   wrapper: deprecate(
-    (getStory: any, context: any) => getStory(context),
+    (getStory: StoryGetter, context: StoryContext) => getStory(context),
     'withViewport is no longer supported, use .addParameters({ viewport }) instead'
   ),
 });

diff --git a/addons/viewport/src/models/Viewport.ts b/addons/viewport/src/models/Viewport.ts
@@ -0,0 +1,19 @@
+export interface Viewport {
+  name: string;
+  styles: ViewportStyles;
+  type: 'desktop' | 'mobile' | 'tablet';
+  /*
+   * @deprecated
+   * Deprecated option?
+   */
+  default?: boolean;
+}
+
+export interface ViewportStyles {
+  height: string;
+  width: string;
+}
+
+export interface ViewportMap {
+  [key: string]: Viewport;
+}
diff --git a/addons/viewport/src/models/ViewportAddonParameter.ts b/addons/viewport/src/models/ViewportAddonParameter.ts
@@ -0,0 +1,12 @@
+import { ViewportMap } from './Viewport';
+
+export interface ViewportAddonParameter {
+  disable: boolean;
+  defaultViewport: string;
+  viewports: ViewportMap;
+  /*
+   * @deprecated
+   * The viewport parameter `onViewportChange` is no longer supported
+   */
+  onViewportChange?: never;
+}
diff --git a/addons/viewport/src/models/index.ts b/addons/viewport/src/models/index.ts
@@ -0,0 +1,2 @@
+export * from './Viewport';
+export * from './ViewportAddonParameter';
diff --git a/addons/viewport/src/register.tsx b/addons/viewport/src/register.tsx
@@ -3,13 +3,13 @@ import addons, { types } from '@storybook/addons';
 
 import { ADDON_ID } from './constants';
 
-import Tool from './Tool';
+import { ViewportTool } from './Tool';
 
 addons.register(ADDON_ID, api => {
   addons.add(ADDON_ID, {
     title: 'viewport / media-queries',
     type: types.TOOL,
     match: ({ viewMode }) => viewMode === 'story',
-    render: () => <Tool api={api} />,
+    render: () => <ViewportTool api={api} />,
   });
 });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './Viewport';
		export * from './ViewportAddonParameter';