FIX types

storybookjs · Jul 2, 2019 · bcf18cc · bcf18cc
1 parent 0052018
commit bcf18cc
Show file tree

Hide file tree

Showing 9 changed files with 486 additions and 572 deletions.
diff --git a/lib/addons/src/make-decorator.ts b/lib/addons/src/make-decorator.ts
@@ -1,23 +1,39 @@
 import deprecate from 'util-deprecate';
 
+export interface Parameters {
+  fileName?: string;
+  options?: OptionsParameter;
+  [key: string]: any;
+}
+
 export interface StoryContext {
+  id: string;
   name: string;
   kind: string;
-  parameters: {
-    [key: string]: any;
-  };
+  [key: string]: any;
+  parameters: Parameters;
 }
 
 export interface WrapperSettings {
-  options: {
-    [key: string]: any;
-  };
+  options: OptionsParameter;
   parameters: {
     [key: string]: any;
   };
 }
 
+export interface OptionsParameter extends Object {
+  storySort?: any;
+  hierarchyRootSeparator?: string;
+  hierarchySeparator?: RegExp;
+  theme?: {
+    base: string;
+    brandTitle?: string;
+  };
+  [key: string]: any;
+}
+
 export type StoryGetter = (context: StoryContext) => any;
+export type StoryFn = (p?: StoryContext) => any;
 
 export type StoryWrapper = (
   getStory: StoryGetter,

diff --git a/lib/client-api/src/client_api.test.ts b/lib/client-api/src/client_api.test.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 import { logger } from '@storybook/client-logger';
 import { mockChannel } from '@storybook/addons';
 import ClientApi from './client_api';
@@ -103,6 +104,7 @@ describe('preview.client_api', () => {
 
       clientApi.setAddon({
         aa() {
+          console.log(this);
           data = this.kind;
         },
       });
@@ -118,7 +120,7 @@ describe('preview.client_api', () => {
 
       clientApi.addParameters({ a: '1' });
 
-      // eslint-disable-next-line no-underscore-dangle
+      // @ts-ignore
       expect(clientApi._globalParameters).toEqual({ a: '1', options: {} });
     });
 
@@ -128,7 +130,7 @@ describe('preview.client_api', () => {
       clientApi.addParameters({ options: { a: '1' } });
       clientApi.addParameters({ options: { b: '2' } });
 
-      // eslint-disable-next-line no-underscore-dangle
+      // @ts-ignore
       expect(clientApi._globalParameters).toEqual({ options: { a: '1', b: '2' } });
     });
 
@@ -138,7 +140,7 @@ describe('preview.client_api', () => {
       clientApi.addParameters({ backgrounds: ['value'], options: { a: '1', b: '3' } });
       clientApi.addParameters({ options: { a: '2' } });
 
-      // eslint-disable-next-line no-underscore-dangle
+      // @ts-ignore
       expect(clientApi._globalParameters).toEqual({
         backgrounds: ['value'],
         options: { a: '2', b: '3' },
@@ -151,7 +153,7 @@ describe('preview.client_api', () => {
       clientApi.addParameters({ backgrounds: ['value'], options: { a: '1', b: '3' } });
       clientApi.addParameters({ backgrounds: [], options: { a: '2' } });
 
-      // eslint-disable-next-line no-underscore-dangle
+      // @ts-ignore
       expect(clientApi._globalParameters).toEqual({
         backgrounds: [],
         options: { a: '2', b: '3' },
@@ -164,7 +166,7 @@ describe('preview.client_api', () => {
       clientApi.addParameters({ options: { a: '1', b: '2', theming: { c: '3' } } });
       clientApi.addParameters({ options: { theming: { c: '4', d: '5' } } });
 
-      // eslint-disable-next-line no-underscore-dangle
+      // @ts-ignore
       expect(clientApi._globalParameters).toEqual({
         options: { a: '1', b: '2', theming: { c: '4', d: '5' } },
       });
@@ -194,6 +196,7 @@ describe('preview.client_api', () => {
       addDecorator(fn => `bb-${fn()}`);
 
       storiesOf('kind', module).add('name', () => 'Hello');
+      const f = storyStore.fromId('x');
 
       expect(storyStore.fromId('kind--name').storyFn()).toBe('bb-Hello');
     });
@@ -245,10 +248,12 @@ describe('preview.client_api', () => {
   describe('clearDecorators', () => {
     it('should remove all global decorators', () => {
       const { clientApi } = getContext(undefined);
-      // eslint-disable-next-line no-underscore-dangle
+
+      // @ts-ignore
       clientApi._globalDecorators = 1234;
       clientApi.clearDecorators();
-      // eslint-disable-next-line no-underscore-dangle
+
+      // @ts-ignore
       expect(clientApi._globalDecorators).toEqual([]);
     });
   });
@@ -537,6 +542,7 @@ describe('preview.client_api', () => {
         }
 
         storiesOf('kind', module).add('story', stories[1]);
+        // @ts-ignore
         expect(logger.warn.mock.calls[0][0]).toMatch(
           /Story with id kind--story already exists in the store/
         );

diff --git a/lib/client-api/src/client_api.ts b/lib/client-api/src/client_api.ts
@@ -1,7 +1,7 @@
 /* eslint no-underscore-dangle: 0 */
 import isPlainObject from 'is-plain-object';
 import { logger } from '@storybook/client-logger';
-import addons, { Addon } from '@storybook/addons';
+import addons, { StoryContext, StoryFn, Parameters } from '@storybook/addons';
 import Events from '@storybook/core-events';
 import { toId } from '@storybook/router/utils';
 
@@ -10,14 +10,13 @@ import isEqual from 'lodash/isEqual';
 import get from 'lodash/get';
 import {
   ClientApiParams,
-  IApi,
-  IDecoratorParams,
-  IHierarchyObj,
-  StoryStore,
-  StoryFn,
+  StoryApi,
+  ClientApiAddon,
+  DecoratorFunction,
+  ClientApiAddons,
 } from './types';
 import subscriptionsStore from './subscriptions_store';
-import { IAddon } from '../dist/types';
+import StoryStore from './story_store';
 
 // merge with concatenating arrays, but no duplicates
 const merge = (a: any, b: any) =>
@@ -39,25 +38,24 @@ const merge = (a: any, b: any) =>
     return undefined;
   });
 
-export const defaultDecorateStory = (storyFn: StoryFn, decorators: any[]) =>
+interface DecoratorPropData {
+  [key: string]: any;
+}
+
+export const defaultDecorateStory = (storyFn: StoryFn, decorators: DecoratorFunction[]) =>
   decorators.reduce(
-    (decorated, decorator) => (context: { parameters: any; options: any }) =>
-      decorator((p: { parameters: any; options: any }) => {
-        console.log('p: ', p);
-
-        return (
-          decorated(
-            // MUTATION !
-            Object.assign(
-              context,
-              p,
-              { parameters: Object.assign(context.parameters || {}, p.parameters) },
-              { options: Object.assign(context.options || {}, p.options) }
-            )
-          ),
-          context
+    (decorated, decorator) => (context: StoryContext) =>
+      decorator((p: DecoratorPropData = {}) => {
+        return decorated(
+          // MUTATION !
+          Object.assign(
+            context,
+            p,
+            { parameters: Object.assign(context.parameters || {}, p.parameters) },
+            { options: Object.assign(context.options || {}, p.options) }
+          )
         );
-      }),
+      }, context),
     storyFn
   );
 
@@ -78,20 +76,16 @@ const withSubscriptionTracking = (storyFn: StoryFn) => {
   return result;
 };
 
-interface Addons {
-  [key: string]: Addon;
-}
-
 export default class ClientApi {
   private _storyStore: StoryStore;
 
-  private _addons: Addons;
+  private _addons: ClientApiAddons;
 
-  private _globalDecorators: any[];
+  private _globalDecorators: DecoratorFunction[];
 
-  private _globalParameters: { [key: string]: any };
+  private _globalParameters: Parameters;
 
-  private _decorateStory: (storyFn: StoryFn, decorators: any) => any;
+  private _decorateStory: (storyFn: StoryFn, decorators: DecoratorFunction[]) => any;
 
   constructor({ storyStore, decorateStory = defaultDecorateStory }: ClientApiParams) {
     this._storyStore = storyStore;
@@ -123,9 +117,11 @@ export default class ClientApi {
       this._globalParameters.options
     );
 
-  addDecorator = (decorator: () => any) => this._globalDecorators.push(decorator);
+  addDecorator = (decorator: DecoratorFunction) => {
+    this._globalDecorators.push(decorator);
+  };
 
-  addParameters = (parameters: IDecoratorParams[] | { globalParameter: 'string' }) => {
+  addParameters = (parameters: Parameters | { globalParameter: 'string' }) => {
     this._globalParameters = {
       ...this._globalParameters,
       ...parameters,
@@ -154,32 +150,31 @@ export default class ClientApi {
     if (m && m.hot && m.hot.dispose) {
       m.hot.dispose(() => {
         const { _storyStore } = this;
-        _storyStore.remove(undefined);
-
-        // TODO: refactor this
-        // Maybe not needed at all if stories can just be overwriten ?
-        this._storyStore.removeStoryKind(kind);
-        this._storyStore.incrementRevision();
+        _storyStore.removeStoryKind(kind);
+        _storyStore.incrementRevision();
       });
     }
 
-    const localDecorators: any[] | (() => void)[] = [];
-    let localParameters = {};
+    const localDecorators: DecoratorFunction[] = [];
+    let localParameters: Parameters = {};
     let hasAdded = false;
-    const api = {
+    const api: StoryApi = {
       kind,
-    } as IApi;
+      add: () => api,
+      addDecorator: () => api,
+      addParameters: () => api,
+    };
 
     // apply addons
     Object.keys(this._addons).forEach(name => {
-      const addon = this._addons[name] as IAddon;
+      const addon = this._addons[name] as ClientApiAddon;
       api[name] = (...args: any[]) => {
         addon.apply(api, args);
         return api;
       };
     });
 
-    api.add = (storyName: string, storyFn: StoryFn, parameters: any) => {
+    api.add = (storyName: string, storyFn: StoryFn, parameters: Parameters) => {
       hasAdded = true;
       const { _globalParameters, _globalDecorators } = this;
 
@@ -198,7 +193,7 @@ export default class ClientApi {
       const fileName = m && m.id ? `${m.id}` : undefined;
 
       const { hierarchyRootSeparator, hierarchySeparator } = this.getSeparators();
-      const baseOptions = {
+      const baseOptions: Parameters['options'] = {
         hierarchyRootSeparator,
         hierarchySeparator,
       };
@@ -208,7 +203,7 @@ export default class ClientApi {
         localParameters,
         parameters,
       ].reduce(
-        (acc, p) => {
+        (acc: Parameters, p) => {
           if (p) {
             Object.entries(p).forEach(([key, value]) => {
               const existingValue = acc[key];
@@ -273,7 +268,7 @@ This is probably not what you intended. Read more here: https://github.com/story
       const fileName = this._storyStore.getStoryFileName(kind);
 
       const stories = this._storyStore.getStories(kind).map(name => {
-        const render = this._storyStore.getStoryWithContext();
+        const render = this._storyStore.getStoryWithContext(kind, name);
         return { name, render };
       });
 

diff --git a/lib/client-api/src/config_api.ts b/lib/client-api/src/config_api.ts
@@ -1,22 +1,11 @@
+// /<reference types="webpack-env" />
 /* eslint no-underscore-dangle: 0 */
 
 import Events from '@storybook/core-events';
-import { logger } from '@storybook/client-logger';
-import { PostmsgTransport } from '@storybook/channel-postmessage';
 import Channel from '@storybook/channels';
-import { ClientApi, StoryStore, IModule } from './types';
-
-interface IChannel {
-  events: {
-    forceReRender: [];
-    registerSubscription: [];
-    setCurrentStory: [];
-    'storybook/a11y/request': [];
-  };
-  isAsync: boolean;
-  sender: string;
-  transport: PostmsgTransport;
-}
+import { ErrorLike } from './types';
+import StoryStore from './story_store';
+import ClientApi from './client_api';
 
 export default class ConfigApi {
   _channel: Channel;
@@ -30,13 +19,13 @@ export default class ConfigApi {
   constructor({
     channel,
     storyStore,
-    clearDecorators,
     clientApi,
+    clearDecorators,
   }: {
     channel: Channel | null;
     storyStore: StoryStore;
-    clearDecorators: any;
     clientApi: ClientApi;
+    clearDecorators: () => void;
   }) {
     // channel can be null when running in node
     // always check whether channel is available
@@ -53,11 +42,11 @@ export default class ConfigApi {
 
   _renderError(err: Error) {
     const { stack, message } = err;
-    const error = { stack, message };
-    this._storyStore.setSelection({ error }, undefined);
+    const error: ErrorLike = { stack, message };
+    this._storyStore.setSelection(undefined, error);
   }
 
-  configure = (loaders: () => void, module: IModule) => {
+  configure = (loaders: () => void, module: NodeModule) => {
     const render = () => {
       const errors = [];
 
@@ -82,7 +71,7 @@ export default class ConfigApi {
 
         throw errors[0];
       } else {
-        this._storyStore.setSelection(undefined, null);
+        this._storyStore.setSelection(undefined, undefined);
       }
     };