Merge commit '4c5345d15cadb33e0277d399963c27bcee3b7623' into tech/overhaul-ui

addons/notes/package.json

@@ -32,7 +32,8 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@types/prop-types": "^15.5.7"
+    "@types/prop-types": "^15.5.7",
+    "@types/util-deprecate": "^1.0.0"
   },
   "peerDependencies": {
     "react": "*"

addons/notes/src/Panel.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { SyntaxHighlighter as SyntaxHighlighterBase, Placeholder } from '@storybook/components';
 import Markdown from 'markdown-to-jsx';
@@ -9,17 +9,52 @@ import { PARAM_KEY } from './shared';
 const Panel = styled.div({
   padding: 10,
   boxSizing: 'border-box',
-  width: '100%',
+  width: '100%'
 });
 
-const read = params => (typeof params === 'string' ? params : params.text || params.markdown);
-
-const SyntaxHighlighter = props => <SyntaxHighlighterBase bordered copyable {...props} />;
-
-export default class NotesPanel extends React.Component {
-  state = {
-    value: '',
+interface NotesPanelProps {
+  active: boolean;
+  channel: {
+    emit: any;
+    on(listener: string, callback: (text: string) => void): any;
+    removeListener(listener: string, callback: (text: string) => void): void;
   };
+  api: {
+    setQueryParams: any; // todo check correct definition
+    getQueryParam(queryParamName: string): any;
+    onStory(callback: () => void): () => void;
+  };
+}
+
+interface NotesPanelState {
+  value: string;
+}
+
+type ReadParams = string | { text: string; markdown: string };
+const read = (params: ReadParams) => (typeof params === 'string' ? params : params.text || params.markdown);
+const SyntaxHighlighter = (props: NotesPanelProps) => <SyntaxHighlighterBase bordered copyable {...props} />;
+
+export default class NotesPanel extends React.Component<NotesPanelProps, NotesPanelState> {
+
+  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
+  };
+
+  readonly state: NotesPanelState = {
+    value: ''
+  };
+
+  mounted: boolean;
 
   // use our SyntaxHighlighter component in place of a <code> element when
   // converting markdown to react elements
@@ -68,17 +103,3 @@ export default class NotesPanel extends React.Component {
     );
   }
 }
-
-NotesPanel.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/notes/src/index.ts

@@ -1,5 +1,5 @@
-import addons, { makeDecorator } from '@storybook/addons';
-import deprecate from 'util-deprecate';
+import { makeDecorator } from '@storybook/addons';
+import { deprecate } from 'util';
 
 // todo resolve any after @storybook/addons and @storybook/channels are migrated to TypeScript
 export const withNotes = makeDecorator({

addons/notes/src/register.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import addons, { types } from '@storybook/addons';
-import Panel from './Panel';
-import { ADDON_ID, PANEL_ID } from './shared';
-
-addons.register(ADDON_ID, api => {
-  const channel = addons.getChannel();
-  // eslint-disable-next-line react/prop-types
-  const render = ({ active }) => <Panel channel={channel} api={api} active={active} />;
-  const title = 'Notes';
-
-  addons.add(PANEL_ID, {
-    type: types.TAB,
-    title,
-    route: ({ componentId }) => `/info/${componentId}`,
-    match: ({ viewMode }) => viewMode === 'info',
-    render,
-  });
-});

addons/notes/src/register.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import addons, { types } from '@storybook/addons';
+import Panel from './Panel'; // todo fix eslint in tslint (igor said he fixed it, should ask him)
+import { ADDON_ID, PANEL_ID } from './shared';
+
+// todo add api types
+addons.register(ADDON_ID, (api: any) => {
+  const channel = addons.getChannel();
+  const render = ({ active }: { active: boolean }) => <Panel channel={channel} api={api} active={active}/>;
+  const title = 'Notes';
+
+  addons.add(PANEL_ID, {
+    type: types.TAB,
+    title,
+    route: ({ componentId }: { componentId: any }) => `/info/${componentId}`, // todo add type
+    match: ({ viewMode }: { viewMode: any }) => viewMode === 'info', // todo add type
+    render
+  });
+});

addons/notes/src/typings.d.ts

@@ -1,5 +1,13 @@
-// Fixes 'noImplicitAny' lint error because @storybook/addons isn't migrated to typescript yet
+// todo the following packages need definition files or a TS migration
 declare module '@storybook/addons';
+declare module '@storybook/components';
+declare module '@storybook/core-events';
 
 // Only necessary for 0.x.x. Version 10.x.x has definition files included
 declare module '@emotion/styled';
+
+// There are no types for markdown-to-jsx
+declare module 'markdown-to-jsx' {
+  const Markdown: any;
+  export default Markdown;
+}

scripts/compile-ts.js

@@ -26,7 +26,7 @@ function handleExit(code, errorCallback) {
 }
 
 function tscfy(options = {}) {
-  const { watch = false, silent = true, errorCallback } = options;
+  const { watch = false, silent = false, errorCallback } = options;
   const tsConfigFile = 'tsconfig.json';
 
   if (!fs.existsSync(tsConfigFile)) {

yarn.lock

@@ -2267,6 +2267,11 @@
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.2.tgz#e13182e1b69871a422d7863e11a4a6f5b814a4bd"
   integrity sha512-42zEJkBpNfMEAvWR5WlwtTH22oDzcMjFsL9gDGExwF8X8WvAiw7Vwop7hPw03QT8TKfec83LwbHj6SvpqM4ELQ==
 
+"@types/util-deprecate@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/util-deprecate/-/util-deprecate-1.0.0.tgz#341d0815fe5a661b94e3ea738d182b4c359e3958"
+  integrity sha512-I2vixiQ+mrmKxfdLNvaa766nulrMVDoUQiSQoNeTjFUNAt8klnMgDh3yy/bH/r275357q30ACOEUaxFOR8YVrA==
+
 "@types/webpack-env@^1.13.6":
   version "1.13.6"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.13.6.tgz#128d1685a7c34d31ed17010fc87d6a12c1de6976"