Merge pull request #5018 from storybooks/ts-migration/addons

Typescript-Migration: @storybook/addons

.eslintignore

@@ -10,6 +10,7 @@ lib/cli/test
 *.bundle.js
 *.js.map
 *.ts
+*.tsx
 
 !.remarkrc.js
 !.babelrc.js

addons/notes/package.json

@@ -18,13 +18,13 @@
   "license": "MIT",
   "main": "dist/public_api.js",
   "types": "dist/public_api.d.ts",
-  "jsnext:main": "src/public_api.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
     "@emotion/styled": "^0.10.6",
     "@storybook/addons": "4.2.0-alpha.7",
+    "@storybook/channels": "4.2.0-alpha.7",
     "core-js": "^2.5.7",
     "marked": "^0.5.2",
     "prop-types": "^15.6.2"

addons/notes/src/index.ts

@@ -1,34 +1,46 @@
-import addons, { makeDecorator } from '@storybook/addons';
 import { parse as renderMarkdown } from 'marked';
+import {
+  addons,
+  makeDecorator,
+  StoryContext,
+  StoryGetter,
+  WrapperSettings,
+} from '@storybook/addons';
+
+function wrapper(
+  getStory: StoryGetter,
+  context: StoryContext,
+  { options, parameters }: WrapperSettings
+) {
+  const channel = addons.getChannel();
+
+  const storyOptions = parameters || options;
+
+  const { text, markdown, markdownOptions } =
+    typeof storyOptions === 'string'
+      ? {
+          text: storyOptions,
+          markdown: undefined,
+          markdownOptions: undefined,
+        }
+      : storyOptions;
+
+  if (!text && !markdown) {
+    throw new Error('You must set of one of `text` or `markdown` on the `notes` parameter');
+  }
+
+  channel.emit('storybook/notes/add_notes', text || renderMarkdown(markdown, markdownOptions));
+
+  return getStory(context);
+}
 
 // todo resolve any after @storybook/addons and @storybook/channels are migrated to TypeScript
 export const withNotes = makeDecorator({
   name: 'withNotes',
   parameterName: 'notes',
   skipIfNoParametersOrOptions: true,
   allowDeprecatedUsage: true,
-  wrapper: (getStory: (context: any) => any, context: any, { options, parameters }: any) => {
-    const channel = addons.getChannel();
-
-    const storyOptions = parameters || options;
-
-    const { text, markdown, markdownOptions } =
-      typeof storyOptions === 'string'
-        ? {
-            text: storyOptions,
-            markdown: undefined,
-            markdownOptions: undefined,
-          }
-        : storyOptions;
-
-    if (!text && !markdown) {
-      throw new Error('You must set of one of `text` or `markdown` on the `notes` parameter');
-    }
-
-    channel.emit('storybook/notes/add_notes', text || renderMarkdown(markdown, markdownOptions));
-
-    return getStory(context);
-  },
+  wrapper,
 });
 
 export const withMarkdownNotes = (text: string, options: any) =>

addons/notes/src/register.tsx

@@ -1,15 +1,10 @@
 import * as React from 'react';
-import addons from '@storybook/addons';
+
 import * as PropTypes from 'prop-types';
 
 import styled from '@emotion/styled';
-
-// todo this is going to be refactored after the migration of @storybook/channel to TypeScript
-interface NotesChannel {
-  emit: any;
-  on(listener: string, callback: (text: string) => void): any;
-  removeListener(listener: string, callback: (text: string) => void): void;
-}
+import { Channel } from '@storybook/channels';
+import { addons } from '@storybook/addons';
 
 interface NotesApi {
   setQueryParams: any; // todo check correct definition
@@ -20,7 +15,7 @@ interface NotesApi {
 
 interface NotesProps {
   active: boolean;
-  channel: NotesChannel;
+  channel: Channel;
   api: NotesApi;
 }
 
@@ -35,7 +30,6 @@ const Panel = styled.div({
 });
 
 export class Notes extends React.Component<NotesProps, NotesState> {
-
   static propTypes = {
     active: PropTypes.bool.isRequired,
     channel: PropTypes.shape({
@@ -91,9 +85,9 @@ export class Notes extends React.Component<NotesProps, NotesState> {
     const { text } = this.state;
     const textAfterFormatted = text
       ? text
-        .trim()
-        .replace(/(<\S+.*>)\n/g, '$1')
-        .replace(/\n/g, '<br />')
+          .trim()
+          .replace(/(<\S+.*>)\n/g, '$1')
+          .replace(/\n/g, '<br />')
       : '';
 
     return active ? (
@@ -109,6 +103,8 @@ addons.register('storybook/notes', (api: any) => {
   const channel = addons.getChannel();
   addons.addPanel('storybook/notes/panel', {
     title: 'Notes',
-    render: ({ active }: { active: boolean }) => <Notes channel={channel} api={api} active={active}/>,
+    render: ({ active }: { active: boolean }) => (
+      <Notes channel={channel} api={api} active={active} />
+    ),
   });
 });

addons/notes/src/typings.d.ts

@@ -1,5 +1,3 @@
-// Fixes 'noImplicitAny' lint error because @storybook/addons isn't migrated to typescript yet
-declare module '@storybook/addons';
-
 // Only necessary for 0.x.x. Version 10.x.x has definition files included
 declare module '@emotion/styled';
+declare module 'global';

addons/notes/tsconfig.json

@@ -4,8 +4,7 @@
     "rootDir": "./src"
   },
   "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx"
+    "src/**/*"
   ],
   "exclude": [
     "src/__tests__/**/*"

addons/storyshots/storyshots-core/package.json

@@ -35,7 +35,6 @@
   "devDependencies": {
     "@storybook/addon-actions": "4.2.0-alpha.7",
     "@storybook/addon-links": "4.2.0-alpha.7",
-    "@storybook/addons": "4.2.0-alpha.1",
     "@storybook/react": "4.2.0-alpha.7",
     "enzyme-to-json": "^3.3.4",
     "react": "^16.6.0"

lib/addons/package.json

@@ -14,8 +14,8 @@
     "url": "https://github.com/storybooks/storybook.git"
   },
   "license": "MIT",
-  "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
+  "main": "dist/public_api.js",
+  "types": "dist/public_api.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
@@ -25,6 +25,9 @@
     "global": "^4.3.2",
     "util-deprecate": "^1.0.2"
   },
+  "devDependencies": {
+    "@types/util-deprecate": "^1.0.0"
+  },
   "publishConfig": {
     "access": "public"
   }

lib/addons/src/index.ts

@@ -0,0 +1,80 @@
+import global from 'global';
+import { Channel } from '@storybook/channels';
+import { ReactElement } from 'react';
+
+export interface PanelOptions {
+  active: boolean;
+}
+
+export interface Panel {
+  title: string;
+
+  render(options: PanelOptions): ReactElement<any>;
+}
+
+export type Loader = (callback: (api: any) => void) => void;
+
+interface LoaderKeyValue {
+  [key: string]: Loader;
+}
+
+interface PanelKeyValue {
+  [key: string]: Panel;
+}
+
+export class AddonStore {
+  private loaders: LoaderKeyValue = {};
+  private panels: PanelKeyValue = {};
+  private channel: Channel | undefined;
+
+  getChannel() {
+    // this.channel should get overwritten by setChannel. If it wasn't called (e.g. in non-browser environment), throw.
+    if (!this.channel) {
+      throw new Error(
+        'Accessing nonexistent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel'
+      );
+    }
+
+    return this.channel;
+  }
+
+  hasChannel() {
+    return !!this.channel;
+  }
+
+  setChannel(channel: Channel) {
+    this.channel = channel;
+  }
+
+  getPanels() {
+    return this.panels;
+  }
+
+  addPanel(name: string, panel: Panel) {
+    this.panels[name] = panel;
+  }
+
+  register(name: string, registerCallback: (api: any) => void) {
+    this.loaders[name] = registerCallback;
+  }
+
+  loadAddons(api: any) {
+    Object.values(this.loaders).forEach(value => value(api));
+  }
+}
+
+// Enforce addons store to be a singleton
+const KEY = '__STORYBOOK_ADDONS';
+
+function getAddonsStore() {
+  if (!global[KEY]) {
+    global[KEY] = new AddonStore();
+  }
+  return global[KEY];
+}
+
+// Exporting this twice in order to to be able to import it like { addons } instead of 'addons'
+// prefer import { addons } from '@storybook/addons' over import addons from '@storybook/addons'
+//
+// See public_api.ts
+export const addons = getAddonsStore();

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

@@ -1,10 +1,17 @@
 import deprecate from 'util-deprecate';
-import { makeDecorator } from './make-decorator';
-import { defaultDecorateStory } from '../../core/src/client/preview/client_api';
+import { makeDecorator, StoryContext } from './make-decorator';
+
+// Copy & paste from internal api: core/client/preview/client_api
+export const defaultDecorateStory = (getStory: Function, decorators: Function[]) =>
+  decorators.reduce(
+    (decorated, decorator) => (context: StoryContext) =>
+      decorator(() => decorated(context), context),
+    getStory
+  );
 
 jest.mock('util-deprecate');
-let deprecatedFns = [];
-deprecate.mockImplementation((fn, warning) => {
+let deprecatedFns: any[] = [];
+(deprecate as any).mockImplementation((fn: (...args: any) => any, warning: string) => {
   const deprecatedFn = jest.fn(fn);
   deprecatedFns.push({
     deprecatedFn,