Unfinished things

.eslintignore

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

addons/notes/package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@emotion/styled": "^0.10.6",
     "@storybook/addons": "4.2.0-alpha.2",
+    "@storybook/channels": "4.2.0-alpha.2",
     "core-js": "^2.5.7",
     "marked": "^0.5.2",
     "prop-types": "^15.6.2"

addons/notes/src/index.ts

@@ -1,34 +1,35 @@
-import addons, { makeDecorator } from '@storybook/addons';
+import addons, { makeDecorator, StoryContext, StoryGetter, StoryWrapper } from '@storybook/addons';
 import { parse as renderMarkdown } from 'marked';
 
+// function wrapper(getStory: StoryGetter, context: StoryContext, {options, parameters}) {
+//   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);
-  },
 });
 
 export const withMarkdownNotes = (text: string, options: any) =>

addons/notes/src/register.tsx

@@ -1,16 +1,11 @@
 import * as React from 'react';
 import addons from '@storybook/addons';
+import Channel from '@storybook/channels';
+
 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;
-}
-
 interface NotesApi {
   setQueryParams: any; // todo check correct definition
   getQueryParam(queryParamName: string): any;
@@ -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,2 @@
-// 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';

lib/addons/src/index.ts

@@ -1,12 +1,10 @@
-// Resolves to window in browser and to global in node
 import global from 'global';
-// import { TabWrapper } from '@storybook/components';
 import mockChannel from './storybook-channel-mock';
 import Channel from '@storybook/channels';
 import { ReactElement } from 'react';
 
 export { mockChannel };
-export { makeDecorator } from './make-decorator';
+export * from './make-decorator';
 
 export interface PanelOptions {
   active: boolean;

lib/addons/src/make-decorator.ts

@@ -1,24 +1,34 @@
 import deprecate from 'util-deprecate';
 
-// Create a decorator that can be used both in the (deprecated) old "hoc" style:
-//   .add('story', decorator(options)(() => <Story />));
-//
-// And in the new, "parameterized" style:
-//   .addDecorator(decorator)
-//   .add('story', () => <Story />, { name: { parameters } });
-//
-// *And* in the older, but not deprecated, "pass options to decorator" style:
-//  .addDecorator(decorator(options))
+export interface StoryContext {
+  story: string;
+  kind: string;
+}
+
+export interface WrapperSettings {
+  options: any;
+  parameters: any;
+}
+
+export type StoryGetter = (context: StoryContext) => any;
+
+export type StoryWrapper = (
+  getStory: StoryGetter,
+  context: StoryContext,
+  settings: WrapperSettings
+) => any;
+
+type MakeDecoratorResult = (...args: any) => any;
 
 interface MakeDecoratorOptions {
-  name: any;
-  parameterName: any;
-  wrapper: any;
-  skipIfNoParametersOrOptions: boolean;
+  name: string;
+  parameterName: string;
   allowDeprecatedUsage: boolean;
+  skipIfNoParametersOrOptions: boolean;
+  wrapper: StoryWrapper;
 }
 
-export const makeDecorator: any = ({
+export const makeDecorator: MakeDecoratorResult = ({
   name,
   parameterName,
   wrapper,
@@ -35,6 +45,7 @@ export const makeDecorator: any = ({
     if (skipIfNoParametersOrOptions && !options && !parameters) {
       return getStory(context);
     }
+
     return wrapper(getStory, context, {
       options,
       parameters,