TS Migration: addon-notes

.eslintignore

@@ -9,6 +9,7 @@ built-storybooks
 lib/cli/test
 *.bundle.js
 *.js.map
+*.ts
 
 !.remarkrc.js
 !.babelrc.js

.eslintrc.js

@@ -77,7 +77,7 @@ module.exports = {
     'react/jsx-filename-extension': [
       warn,
       {
-        extensions: ['.js', '.jsx'],
+        extensions: ['.js', '.jsx', '.tsx'],
       },
     ],
     'react/jsx-no-bind': [

addons/notes/package.json

@@ -16,17 +16,22 @@
     "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",
+  "jsnext:main": "src/public_api.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
     "@emotion/styled": "^0.10.6",
     "@storybook/addons": "4.1.0-alpha.11",
-    "marked": "^0.5.1",
+    "marked": "^0.5.2",
     "prop-types": "^15.6.2"
   },
+  "devDependencies": {
+    "@types/marked": "^0.5.0",
+    "@types/prop-types": "^15.5.7"
+  },
   "peerDependencies": {
     "react": "*"
   },

addons/notes/src/index.js → addons/notes/src/index.ts

@@ -1,22 +1,25 @@
 import addons, { makeDecorator } from '@storybook/addons';
-import marked from 'marked';
-
-function renderMarkdown(text, options) {
-  return marked(text, { ...marked.defaults, ...options });
-}
+import { parse as renderMarkdown } from 'marked';
 
+// 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, { options, parameters }) => {
+  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 } : storyOptions;
+      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');
@@ -28,7 +31,7 @@ export const withNotes = makeDecorator({
   },
 });
 
-export const withMarkdownNotes = (text, options) =>
+export const withMarkdownNotes = (text: string, options: any) =>
   withNotes({
     markdown: text,
     markdownOptions: options,

addons/notes/src/public_api.ts

@@ -0,0 +1 @@
+export * from '.';

addons/notes/src/register.tsx

@@ -0,0 +1,114 @@
+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;
+}
+
+interface NotesApi {
+  setQueryParams: any; // todo check correct definition
+  getQueryParam(queryParamName: string): any;
+
+  onStory(callback: () => void): () => void;
+}
+
+interface NotesProps {
+  active: boolean;
+  channel: NotesChannel;
+  api: NotesApi;
+}
+
+interface NotesState {
+  text: string;
+}
+
+const Panel = styled.div({
+  padding: 10,
+  boxSizing: 'border-box',
+  width: '100%',
+});
+
+export class Notes extends React.Component<NotesProps, NotesState> {
+
+  static propTypes = {
+    active: PropTypes.bool.isRequired,
+    channel: PropTypes.shape({
+      on: PropTypes.func,
+      emit: PropTypes.func,
+      removeListener: PropTypes.func,
+    }).isRequired,
+    api: PropTypes.shape({
+      onStory: PropTypes.func,
+      getQueryParam: PropTypes.func,
+      setQueryParams: PropTypes.func,
+    }).isRequired,
+  };
+
+  stopListeningOnStory: () => void;
+  isUnmounted = false;
+
+  readonly state: NotesState = { text: '' };
+
+  constructor(props: NotesProps) {
+    super(props);
+    this.onAddNotes = this.onAddNotes.bind(this);
+  }
+
+  componentDidMount() {
+    const { channel, api } = this.props;
+    // Listen to the notes and render it.
+    channel.on('storybook/notes/add_notes', this.onAddNotes);
+
+    // Clear the current notes on every story change.
+    this.stopListeningOnStory = api.onStory(() => {
+      this.onAddNotes('');
+    });
+  }
+
+  // This is some cleanup tasks when the Notes panel is unmounting.
+  componentWillUnmount() {
+    if (this.stopListeningOnStory) {
+      this.stopListeningOnStory();
+    }
+
+    this.isUnmounted = true;
+    const { channel } = this.props;
+    channel.removeListener('storybook/notes/add_notes', this.onAddNotes);
+  }
+
+  onAddNotes(text: string) {
+    this.setState({ text });
+  }
+
+  render() {
+    const { active } = this.props;
+    const { text } = this.state;
+    const textAfterFormatted = text
+      ? text
+        .trim()
+        .replace(/(<\S+.*>)\n/g, '$1')
+        .replace(/\n/g, '<br />')
+      : '';
+
+    return active ? (
+      <Panel
+        className="addon-notes-container"
+        dangerouslySetInnerHTML={{ __html: textAfterFormatted }}
+      />
+    ) : null;
+  }
+}
+
+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}/>,
+  });
+});

addons/notes/src/typings.d.ts

@@ -0,0 +1,5 @@
+// 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';

addons/notes/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "src/__tests__/**/*"
+  ]
+}

package.json

@@ -59,6 +59,9 @@
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@emotion/snapshot-serializer": "^0.8.2",
+    "@types/jest": "^23.3.9",
+    "@types/node": "^10.12.5",
+    "@types/react": "^16.7.3",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",

tsconfig.json

@@ -1,11 +1,19 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "skipLibCheck": true,
     "noImplicitAny": true,
+    "jsx": "react",
+    "module": "commonjs",
     "target": "es5",
+    "types": [
+      "node",
+      "jest"
+    ],
     "lib": [
       "es2016",
       "dom"

tslint.json

@@ -97,7 +97,8 @@
     "prefer-const": true,
     "quotemark": [
       true,
-      "single"
+      "single",
+      "jsx-double"
     ],
     "radix": true,
     "semicolon": [