FIX types

addons/knobs/src/KnobStore.ts

@@ -48,7 +48,7 @@ export default class KnobStore {
 
   callbacks: Callback[] = [];
 
-  timer: number;
+  timer: NodeJS.Timeout;
 
   has(key: string) {
     return this.store[key] !== undefined;

addons/options/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src"
+    "rootDir": "./src",
+    "types": ["webpack-env"]
   },
   "include": [
     "src/**/*"

app/react/package.json

@@ -29,6 +29,7 @@
     "@babel/plugin-transform-react-constant-elements": "^7.2.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@storybook/addons": "5.2.0-alpha.38",
     "@storybook/core": "5.2.0-alpha.38",
     "@storybook/node-logger": "5.2.0-alpha.38",
     "@svgr/webpack": "^4.0.3",

app/react/src/client/preview/index.ts

@@ -1,22 +1,37 @@
+/* eslint-disable prefer-destructuring */
 import { start } from '@storybook/core/client';
+import { ClientStoryApi } from '@storybook/addons';
 
 import './globals';
 import render from './render';
-
+import { IStorybookSection, StoryFnReactReturnType } from './types';
-const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
-
-export const {
-  setAddon,
-  addDecorator,
-  addParameters,
-  clearDecorators,
-  getStorybook,
-  raw,
-} = clientApi;
 
 const framework = 'react';
-export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const load = (...args) => coreLoad(...args, framework);
 
-export const { configure } = configApi;
+interface ClientApi extends ClientStoryApi<StoryFnReactReturnType> {
-export { forceReRender };
+  setAddon(addon: any): void;
+  configure(loaders: () => void, module: NodeModule): void;
+  getStorybook(): IStorybookSection[];
+  clearDecorators(): void;
+  forceReRender(): void;
+  raw: () => any; // todo add type
+  load: (...args: any[]) => void;
+}
+
+const api = start(render);
+
+export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
+  return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
+    framework,
+  });
+};
+
+export const load: ClientApi['load'] = (...args) => api.load(...args, framework);
+export const addDecorator: ClientApi['addDecorator'] = api.clientApi.addDecorator;
+export const addParameters: ClientApi['addParameters'] = api.clientApi.addParameters;
+export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;
+export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;
+export const configure: ClientApi['configure'] = api.configApi.configure;
+export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
+export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;
+export const raw: ClientApi['raw'] = api.clientApi.raw;

app/react/src/client/preview/types.ts

@@ -13,3 +13,19 @@ export interface RenderMainArgs {
   showError: (args: ShowErrorArgs) => void;
   forceRender: boolean;
 }
+
+export type StoryFnReactReturnType = React.ReactElement<unknown>;
+
+export interface ICollection {
+  [p: string]: any;
+}
+
+export interface IStorybookStory {
+  name: string;
+  render: () => any;
+}
+
+export interface IStorybookSection {
+  kind: string;
+  stories: IStorybookStory[];
+}

app/react/src/server/options.ts

@@ -1,4 +1,4 @@
-import packageJson from '../../package.json';
+const packageJson = require('../../package.json');
 
 export default {
   packageJson,

lib/addons/src/index.ts

@@ -3,8 +3,8 @@ import global from 'global';
 import { ReactElement } from 'react';
 import { Channel } from '@storybook/channels';
 import { API } from '@storybook/api';
-import logger from '@storybook/client-logger';
+import { logger } from '@storybook/client-logger';
-import { types, Types, isSupportedType } from './types';
+import { types, Types } from './types';
 
 export interface RenderOptions {
   active: boolean;
@@ -29,8 +29,6 @@ export interface Addon {
 
 export type Loader = (api: API) => void;
 
-export { types, Types, isSupportedType };
-
 interface Loaders {
   [key: string]: Loader;
 }

lib/addons/src/make-decorator.test.ts

@@ -1,5 +1,6 @@
 import deprecate from 'util-deprecate';
-import { makeDecorator, StoryContext, StoryGetter } from './make-decorator';
+import { StoryContext, StoryGetter } from './types';
+import { makeDecorator } from './make-decorator';
 
 // Copy & paste from internal api: client-api/src/client_api
 type DecoratorFn = (fn: StoryGetter, context: StoryContext) => any;

lib/addons/src/make-decorator.ts

@@ -1,45 +1,5 @@
 import deprecate from 'util-deprecate';
-
+import { StoryWrapper, StoryGetter, StoryContext } from './types';
-export interface Parameters {
-  fileName?: string;
-  options?: OptionsParameter;
-  [key: string]: any;
-}
-
-export interface StoryContext {
-  id: string;
-  name: string;
-  kind: string;
-  [key: string]: any;
-  parameters: Parameters;
-}
-
-export interface WrapperSettings {
-  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,
-  context: StoryContext,
-  settings: WrapperSettings
-) => any;
 
 type MakeDecoratorResult = (...args: any) => any;
 

lib/addons/src/public_api.ts

@@ -7,5 +7,6 @@ import { addons } from './index';
 
 export * from './make-decorator';
 export * from './index';
+export * from './types';
 export * from './storybook-channel-mock';
 export default addons;

lib/addons/src/types.ts

@@ -1,3 +1,5 @@
+import { Addon } from './index';
+
 export enum types {
   TAB = 'tab',
   PANEL = 'panel',
@@ -11,3 +13,83 @@ export type Types = types | string;
 export function isSupportedType(type: Types): boolean {
   return !!Object.values(types).find(typeVal => typeVal === type);
 }
+
+export interface Parameters {
+  fileName?: string;
+  options?: OptionsParameter;
+  [key: string]: any;
+}
+
+export interface StoryContext {
+  id: string;
+  name: string;
+  kind: string;
+  [key: string]: any;
+  parameters: Parameters;
+}
+
+export interface WrapperSettings {
+  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<ReturnType = unknown> = (p?: StoryContext) => ReturnType;
+
+export type StoryWrapper = (
+  getStory: StoryGetter,
+  context: StoryContext,
+  settings: WrapperSettings
+) => any;
+
+export type MakeDecoratorResult = (...args: any) => any;
+
+export interface AddStoryArgs<ReturnType = unknown> {
+  id: string;
+  kind: string;
+  name: string;
+  storyFn: StoryFn<ReturnType>;
+  parameters: Parameters;
+}
+
+export interface ClientApiAddon<TApi = unknown> extends Addon {
+  apply: (a: StoryApi<TApi>, b: any[]) => any;
+}
+export interface ClientApiAddons<TApi> {
+  [key: string]: ClientApiAddon<TApi>;
+}
+
+export type ClientApiReturnFn<TApi> = (...args: any[]) => StoryApi<TApi>;
+
+export interface StoryApi<StoryFnReturnType> {
+  kind: string;
+  add: (
+    storyName: string,
+    storyFn: StoryFn<StoryFnReturnType>,
+    parameters?: Parameters
+  ) => StoryApi<StoryFnReturnType>;
+  addDecorator: (decorator: DecoratorFunction) => StoryApi<StoryFnReturnType>;
+  addParameters: (parameters: Parameters) => StoryApi<StoryFnReturnType>;
+  [k: string]: string | ClientApiReturnFn<StoryFnReturnType>;
+}
+
+export type DecoratorFunction = (fn: StoryFn, c: StoryContext) => ReturnType<StoryFn>;
+
+export interface ClientStoryApi<TApi> {
+  storiesOf(kind: string, module: NodeModule): StoryApi<TApi>;
+  addDecorator(decorator: DecoratorFunction): StoryApi<TApi>;
+  addParameters(parameter: Parameters): StoryApi<TApi>;
+}