Merge pull request #5459 from gaetanmaisse/ts-migration/addon-actions

Migrate addon actions to TS

addons/actions/package.json

@@ -15,7 +15,7 @@
   },
   "license": "MIT",
   "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
@@ -29,12 +29,15 @@
     "global": "^4.3.2",
     "lodash": "^4.17.11",
     "make-error": "^1.3.5",
-    "prop-types": "^15.6.2",
     "react": "^16.8.1",
     "react-inspector": "^2.3.0",
     "uuid": "^3.3.2"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.120",
+    "@types/uuid": "^3.4.4"
   }
 }

addons/actions/src/components/ActionLogger/index.js → addons/actions/src/components/ActionLogger/index.tsx

@@ -1,16 +1,22 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import Inspector from 'react-inspector';
 
 import { withTheme } from '@storybook/theming';
 import { ActionBar } from '@storybook/components';
 
 import { Actions, Action, Wrapper, InspectorContainer, Counter } from './style';
+import { ActionDisplay } from '../../models';
 
-const ActionLogger = withTheme(({ actions, onClear, theme }) => (
+interface ActionLoggerProps {
+  actions: ActionDisplay[];
+  onClear: () => void;
+  theme: any;
+}
+
+export const ActionLogger = withTheme(({ actions, onClear, theme }: ActionLoggerProps) => (
   <Wrapper>
     <Actions>
-      {actions.map(action => (
+      {actions.map((action: ActionDisplay) => (
         <Action key={action.id}>
           {action.count > 1 && <Counter>{action.count}</Counter>}
           <InspectorContainer>
@@ -29,18 +35,3 @@ const ActionLogger = withTheme(({ actions, onClear, theme }) => (
     <ActionBar actionItems={[{ title: 'Clear', onClick: onClear }]} />
   </Wrapper>
 ));
-
-ActionLogger.propTypes = {
-  onClear: PropTypes.func.isRequired,
-  actions: PropTypes.arrayOf(
-    PropTypes.shape({
-      count: PropTypes.node,
-      data: PropTypes.shape({
-        name: PropTypes.node.isRequired,
-        args: PropTypes.any,
-      }),
-    })
-  ).isRequired,
-};
-
-export default ActionLogger;

addons/actions/src/containers/ActionLogger/index.js → addons/actions/src/containers/ActionLogger/index.tsx

@@ -1,14 +1,32 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import deepEqual from 'fast-deep-equal';
 
 import { STORY_RENDERED } from '@storybook/core-events';
 
-import ActionLoggerComponent from '../../components/ActionLogger';
+import { ActionLogger as ActionLoggerComponent } from '../../components/ActionLogger';
 import { EVENT_ID } from '../..';
+import { ActionDisplay } from '../../models';
 
-export default class ActionLogger extends React.Component {
-  state = { actions: [] };
+interface ActionLoggerProps {
+  active: boolean;
+  api: {
+    on(event: string, callback: (data: any) => void): void;
+    off(event: string, callback: (data: any) => void): void;
+  };
+}
+
+interface ActionLoggerState {
+  actions: ActionDisplay[];
+}
+
+export default class ActionLogger extends Component<ActionLoggerProps, ActionLoggerState> {
+  private mounted: boolean;
+
+  constructor(props: ActionLoggerProps) {
+    super(props);
+
+    this.state = { actions: [] };
+  }
 
   componentDidMount() {
     this.mounted = true;
@@ -33,13 +51,13 @@ export default class ActionLogger extends React.Component {
     }
   };
 
-  addAction = action => {
+  addAction = (action: ActionDisplay) => {
     let { actions = [] } = this.state;
     actions = [...actions];
 
     const previous = actions.length && actions[0];
 
-    if (previous && deepEqual(previous.data, action.data, { strict: true })) {
+    if (previous && deepEqual(previous.data, action.data)) {
       previous.count++; // eslint-disable-line
     } else {
       action.count = 1; // eslint-disable-line
@@ -62,17 +80,3 @@ export default class ActionLogger extends React.Component {
     return active ? <ActionLoggerComponent {...props} /> : null;
   }
 }
-
-ActionLogger.propTypes = {
-  active: PropTypes.bool.isRequired,
-  channel: PropTypes.shape({
-    emit: PropTypes.func,
-    on: PropTypes.func,
-    removeListener: PropTypes.func,
-  }).isRequired,
-  api: PropTypes.shape({
-    on: PropTypes.func,
-    getQueryParam: PropTypes.func,
-    setQueryParams: PropTypes.func,
-  }).isRequired,
-};

addons/actions/src/index.ts

@@ -0,0 +1,6 @@
+export * from './constants';
+export * from './preview';
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}

addons/actions/src/manager.js → addons/actions/src/manager.tsx

@@ -5,13 +5,9 @@ import { ADDON_ID, PANEL_ID } from '.';
 
 export function register() {
   addons.register(ADDON_ID, api => {
-    const channel = addons.getChannel();
     addons.addPanel(PANEL_ID, {
       title: 'Actions',
-      // eslint-disable-next-line react/prop-types
-      render: ({ active, key }) => (
-        <ActionLogger key={key} channel={channel} api={api} active={active} />
-      ),
+      render: ({ active }) => <ActionLogger api={api} active={active} />,
     });
   });
 }

addons/actions/src/models/ActionDisplay.ts

@@ -0,0 +1,11 @@
+import { ActionOptions } from './ActionOptions';
+
+export interface ActionDisplay {
+  id: string;
+  data: {
+    name: string;
+    args: any[];
+  };
+  count: number;
+  options: ActionOptions;
+}

addons/actions/src/models/ActionOptions.ts

@@ -0,0 +1,5 @@
+export interface ActionOptions {
+  depth?: number;
+  clearOnStoryChange?: boolean;
+  limit?: number;
+}

addons/actions/src/models/ActionsMap.ts

@@ -0,0 +1,5 @@
+import { HandlerFunction } from './HandlerFunction';
+
+export interface ActionsMap {
+  [key: string]: HandlerFunction;
+}

addons/actions/src/models/DecoratorFunction.ts

@@ -0,0 +1 @@
+export type DecoratorFunction = (args: any[]) => any[];

addons/actions/src/models/HandlerFunction.ts

@@ -0,0 +1 @@
+export type HandlerFunction = (...args: any[]) => void;

addons/actions/src/models/index.ts

@@ -0,0 +1,5 @@
+export * from './ActionDisplay';
+export * from './ActionOptions';
+export * from './ActionsMap';
+export * from './DecoratorFunction';
+export * from './HandlerFunction';

addons/actions/src/preview/action.ts

@@ -0,0 +1,25 @@
+import uuid from 'uuid/v1';
+import { addons } from '@storybook/addons';
+import { EVENT_ID } from '../constants';
+import { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
+
+export function action(name: string, options: ActionOptions = {}): HandlerFunction {
+  const actionOptions = {
+    ...options,
+  };
+
+  // tslint:disable-next-line:no-shadowed-variable
+  const handler = function action(...args: any[]) {
+    const channel = addons.getChannel();
+    const id = uuid();
+    const actionDisplayToEmit: ActionDisplay = {
+      id,
+      count: 0,
+      data: { name, args },
+      options: actionOptions,
+    };
+    channel.emit(EVENT_ID, actionDisplayToEmit);
+  };
+
+  return handler;
+}

addons/actions/src/preview/actions.js → addons/actions/src/preview/actions.ts

@@ -1,7 +1,8 @@
-import action from './action';
+import { action } from './action';
+import { ActionOptions, ActionsMap } from '../models';
 
-export default function actions(...args) {
-  let options = {};
+export function actions(...args: any[]): ActionsMap {
+  let options: ActionOptions = {};
   const names = args;
   // last argument can be options
   if (names.length !== 1 && typeof args[args.length - 1] !== 'string') {
@@ -16,7 +17,7 @@ export default function actions(...args) {
     });
   }
 
-  const actionsObject = {};
+  const actionsObject: ActionsMap = {};
   Object.keys(namesObject).forEach(name => {
     actionsObject[name] = action(namesObject[name], options);
   });

addons/actions/src/preview/configureActions.ts

@@ -0,0 +1,11 @@
+import { ActionOptions } from '../models';
+
+export const config: ActionOptions = {
+  depth: 10,
+  clearOnStoryChange: true,
+  limit: 50,
+};
+
+export const configureActions = (options: ActionOptions = {}): void => {
+  Object.assign(config, options);
+};

addons/actions/src/preview/decorateAction.js → addons/actions/src/preview/decorateAction.ts

@@ -1,26 +1,27 @@
-import action from './action';
-import actions from './actions';
+import { action } from './action';
+import { actions } from './actions';
 import { createDecorator } from './withActions';
+import { ActionOptions, DecoratorFunction, HandlerFunction } from '../models';
 
-function applyDecorators(decorators, actionCallback) {
-  return (..._args) => {
+const applyDecorators = (decorators: DecoratorFunction[], actionCallback: HandlerFunction) => {
+  return (..._args: any[]) => {
     const decorated = decorators.reduce((args, fn) => fn(args), _args);
     actionCallback(...decorated);
   };
-}
+};
 
-export function decorateAction(decorators) {
-  return (name, options) => {
+export const decorateAction = (decorators: DecoratorFunction[]): ((name: string, options?: ActionOptions) => HandlerFunction) => {
+  return (name: string, options?: ActionOptions) => {
     const callAction = action(name, options);
     return applyDecorators(decorators, callAction);
   };
-}
+};
 
-export function decorate(decorators) {
+export const decorate = (decorators: DecoratorFunction[]) => {
   const decorated = decorateAction(decorators);
-  const decoratedActions = (...args) => {
+  const decoratedActions = (...args: any[]) => {
     const rawActions = actions(...args);
-    const actionsObject = {};
+    const actionsObject = {} as any;
     Object.keys(rawActions).forEach(name => {
       actionsObject[name] = applyDecorators(decorators, rawActions[name]);
     });
@@ -31,4 +32,4 @@ export function decorate(decorators) {
     actions: decoratedActions,
     withActions: createDecorator(decoratedActions),
   };
-}
+};

addons/actions/src/preview/index.ts

@@ -0,0 +1,5 @@
+export * from './action';
+export * from './actions';
+export * from './configureActions';
+export * from './decorateAction';
+export * from './withActions';