Migrate @storybook/addon-ondevice-notes to Typescript (#7737)

Migrate @storybook/addon-ondevice-notes to Typescript

Co-authored-by: Norbert de Langen <[email protected]>

addons/ondevice-notes/package.json

@@ -21,12 +21,16 @@
     "register.js"
   ],
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
     "@storybook/addons": "5.3.0-alpha.4",
+    "@storybook/api": "5.3.0-alpha.4",
+    "@storybook/client-api": "5.3.0-alpha.4",
     "@storybook/client-logger": "5.3.0-alpha.4",
+    "@storybook/core-events": "5.3.0-alpha.4",
     "core-js": "^3.0.1",
     "prop-types": "^15.7.2",
     "react-native-simple-markdown": "^1.1.0"

addons/ondevice-notes/src/register.js → addons/ondevice-notes/src/components/Notes.tsx

@@ -1,15 +1,25 @@
-/* eslint-disable react/prop-types */
 /* eslint-disable react/destructuring-assignment */
-/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { View } from 'react-native';
 import Markdown from 'react-native-simple-markdown';
-import addons from '@storybook/addons';
+import { AddonStore } from '@storybook/addons';
 import Events from '@storybook/core-events';
+import { API } from '@storybook/api';
+import { StoryStore } from '@storybook/client-api';
 
 export const PARAM_KEY = `notes`;
 
-class Notes extends React.Component {
+type Selection = ReturnType<StoryStore['fromId']>;
+interface NotesProps {
+  channel: ReturnType<AddonStore['getChannel']>;
+  api: API;
+  active: boolean;
+}
+interface NotesState {
+  selection: Selection;
+}
+
+export class Notes extends React.Component<NotesProps, NotesState> {
   componentDidMount() {
     this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
   }
@@ -18,7 +28,7 @@ class Notes extends React.Component {
     this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected);
   }
 
-  onStorySelected = selection => {
+  onStorySelected = (selection: Selection) => {
     this.setState({ selection });
   };
 
@@ -34,7 +44,7 @@ class Notes extends React.Component {
       .getStoryAndParameters(this.state.selection.kind, this.state.selection.story);
     const text = story.parameters[PARAM_KEY];
 
-    const textAfterFormatted = text ? text.trim() : '';
+    const textAfterFormatted: string = text ? text.trim() : '';
 
     return (
       <View style={{ padding: 10, flex: 1 }}>
@@ -43,12 +53,3 @@ class Notes extends React.Component {
     );
   }
 }
-
-addons.register('storybook/notes', api => {
-  const channel = addons.getChannel();
-  addons.addPanel('storybook/notes/panel', {
-    title: 'Notes',
-    render: ({ active, key }) => <Notes key={key} channel={channel} api={api} active={active} />,
-    paramKey: PARAM_KEY,
-  });
-});

addons/ondevice-notes/src/register.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import addons from '@storybook/addons';
+import { Notes } from './components/Notes';
+
+export const PARAM_KEY = `notes`;
+
+addons.register('storybook/notes', api => {
+  const channel = addons.getChannel();
+  addons.addPanel('storybook/notes/panel', {
+    title: 'Notes',
+    render: ({ active, key }) => <Notes key={key} channel={channel} api={api} active={active} />,
+    paramKey: PARAM_KEY,
+  });
+});

addons/ondevice-notes/src/typings.d.ts

@@ -0,0 +1,4 @@
+declare module 'react-native-simple-markdown' {
+  const Markdown: any;
+  export default Markdown;
+}

addons/ondevice-notes/tsconfig.json

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