TS Migration: addon-notes

addons/notes/package.json

@@ -19,8 +19,9 @@
     "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"
   },
@@ -30,6 +31,10 @@
     "marked": "^0.5.1",
     "prop-types": "^15.6.2"
   },
+  "devDependencies": {
+    "@types/jest": "^23.3.9",
+    "@types/react": "^16.7.1"
+  },
   "peerDependencies": {
     "react": "*"
   }

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

@@ -1,5 +1,5 @@
 import addons from '@storybook/addons';
-import { withNotes } from '..';
+import { withNotes } from '../addon';
 
 addons.getChannel = jest.fn();
 

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

@@ -16,7 +16,13 @@ export const withNotes = makeDecorator({
     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');

addons/notes/src/public_api.ts

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

addons/notes/src/register.js → addons/notes/src/register.tsx

@@ -1,18 +1,44 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
 import addons from '@storybook/addons';
 
 import styled from '@emotion/styled';
 
+interface NotesChannel {
+  on: (listener: string, callback: (text: string) => void) => any; // todo check correct return value definition
+  emit: any; // todo check correct definition
+  removeListener: (listener: string, callback: (text: string) => void) => void;
+}
+
+interface NotesApi {
+  onStory: (callback: () => void) => void;
+  getQueryParam: any; // todo check correct definition
+  setQueryParams: any; // todo check correct definition
+}
+
+interface NotesProps {
+  active: boolean;
+  channel: NotesChannel;
+  api: NotesApi;
+}
+
+interface NotesState {
+  text: string;
+}
+
 const Panel = styled.div({
   padding: 10,
   boxSizing: 'border-box',
-  width: '100%',
+  width: '100%'
 });
 
-export class Notes extends React.Component {
-  constructor(...args) {
-    super(...args);
+export class Notes extends React.Component<NotesProps, NotesState> {
+
+  // todo check how react typescript does this, especially unmounted
+  stopListeningOnStory: any; // todo check correct definition
+  unmounted: any; // todo check correct definition
+
+  constructor(...args: any) {
+    super(args /* todo: This was ...args before, check if this was a bug */);
     this.state = { text: '' };
     this.onAddNotes = this.onAddNotes.bind(this);
   }
@@ -48,9 +74,9 @@ export class Notes extends React.Component {
     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 ? (
@@ -62,25 +88,12 @@ export class Notes extends React.Component {
   }
 }
 
-Notes.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,
-};
 
 addons.register('storybook/notes', api => {
   const channel = addons.getChannel();
   addons.addPanel('storybook/notes/panel', {
     title: 'Notes',
     // eslint-disable-next-line react/prop-types
-    render: ({ active }) => <Notes channel={channel} api={api} active={active} />,
+    render: ({ active }) => <Notes channel={channel} api={api} active={active}/>
   });
 });

addons/notes/tsconfig.json

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

package.json

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

tsconfig.json

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

yarn.lock

@@ -2022,6 +2022,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.1.tgz#da61b64a2930a80fa708e57c45cd5441eb379d5b"
   integrity sha512-i1sl+WCX2OCHeUi9oi7PiCNUtYFrpWhpcx878vpeq/tlZTKzcFdHePlyFHVbWqeuKN0SRPl/9ZFDSTsfv9h7VQ==
 
+"@types/node@^10.12.5":
+  version "10.12.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.5.tgz#7e7ea1a9b34d2c8d704cb0b755dffbcda34741ad"
+  integrity sha512-GzdHjq3t3eGLMv92Al90Iq+EoLL+86mPfQhuglbBFO7HiLdC/rkt+zrzJJumAiBF6nsrBWhou22rPW663AAyFw==
+
 "@types/node@^6.0.0", "@types/node@^6.0.46":
   version "6.14.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-6.14.0.tgz#85c6998293fc6f2945915419296c7fbb63384f66"
@@ -2034,11 +2039,24 @@
   dependencies:
     "@types/node" "*"
 
+"@types/prop-types@*":
+  version "15.5.6"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.6.tgz#9c03d3fed70a8d517c191b7734da2879b50ca26c"
+  integrity sha512-ZBFR7TROLVzCkswA3Fmqq+IIJt62/T7aY/Dmz+QkU7CaW2QFqAitCE8Ups7IzmGhcN1YWMBT4Qcoc07jU9hOJQ==
+
 "@types/q@^0.0.32":
   version "0.0.32"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-0.0.32.tgz#bd284e57c84f1325da702babfc82a5328190c0c5"
   integrity sha1-vShOV8hPEyXacCur/IKlMoGQwMU=
 
+"@types/react@^16.7.1":
+  version "16.7.1"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.1.tgz#ae76b653d1d7d26b32186bba33c39745316bcdc4"
+  integrity sha512-kxde2oP2JvHiEXiAfb8WkL+8Aa9txDRD7L8zb3BipMNRoBbcr32xy/kfpbxmWMus71yXgJDqBgLmWil6UXdLzQ==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/selenium-webdriver@^3.0.0":
   version "3.0.12"
   resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-3.0.12.tgz#6affe5aed1ba379175075a889adbe2bc3aa62159"
@@ -7326,6 +7344,11 @@ cssstyle@^1.0.0, cssstyle@^1.1.1:
   dependencies:
     cssom "0.3.x"
 
+csstype@^2.2.0:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.7.tgz#bf9235d5872141eccfb2d16d82993c6b149179ff"
+  integrity sha512-Nt5VDyOTIIV4/nRFswoCKps1R5CD1hkiyjBE9/thNaNZILLEviVw9yWQw15+O+CpNjQKB/uvdcxFFOrSflY3Yw==
+
 csurf@~1.8.3:
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/csurf/-/csurf-1.8.3.tgz#23f2a13bf1d8fce1d0c996588394442cba86a56a"