From c01ef00dcf7a88d85a0d8dbb1a2cea8f26279d00 Mon Sep 17 00:00:00 2001
From: lonyele <skyrabbits1@gmail.com>
Date: Sat, 10 Aug 2019 20:41:25 +0900
Subject: [PATCH 1/7] chore: migrate src of addon-ondevice-backgrounds to
 Typescript

---
 addons/ondevice-backgrounds/package.json            |  2 +-
 .../src/{BackgroundPanel.js => BackgroundPanel.tsx} | 12 +++++++-----
 .../src/{Swatch.js => Swatch.tsx}                   |  2 +-
 .../src/{constants.js => constants.ts}              |  0
 .../src/{container.js => container.tsx}             | 10 +++++-----
 .../src/{index.js => index.tsx}                     |  0
 .../src/{register.js => register.tsx}               |  3 +--
 addons/ondevice-backgrounds/tsconfig.json           | 13 +++++++++++++
 8 files changed, 28 insertions(+), 14 deletions(-)
 rename addons/ondevice-backgrounds/src/{BackgroundPanel.js => BackgroundPanel.tsx} (86%)
 rename addons/ondevice-backgrounds/src/{Swatch.js => Swatch.tsx} (93%)
 rename addons/ondevice-backgrounds/src/{constants.js => constants.ts} (100%)
 rename addons/ondevice-backgrounds/src/{container.js => container.tsx} (82%)
 rename addons/ondevice-backgrounds/src/{index.js => index.tsx} (100%)
 rename addons/ondevice-backgrounds/src/{register.js => register.tsx} (70%)
 create mode 100644 addons/ondevice-backgrounds/tsconfig.json

diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json
index a916311a1d2b..f931bf579ced 100644
--- a/addons/ondevice-backgrounds/package.json
+++ b/addons/ondevice-backgrounds/package.json
@@ -19,7 +19,7 @@
   },
   "license": "MIT",
   "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
diff --git a/addons/ondevice-backgrounds/src/BackgroundPanel.js b/addons/ondevice-backgrounds/src/BackgroundPanel.tsx
similarity index 86%
rename from addons/ondevice-backgrounds/src/BackgroundPanel.js
rename to addons/ondevice-backgrounds/src/BackgroundPanel.tsx
index 379f8947028a..5b98a8c2a0db 100644
--- a/addons/ondevice-backgrounds/src/BackgroundPanel.js
+++ b/addons/ondevice-backgrounds/src/BackgroundPanel.tsx
@@ -1,10 +1,12 @@
-/* eslint-disable react/prop-types, react/destructuring-assignment, import/no-extraneous-dependencies */
+/* eslint-disable react/destructuring-assignment, import/no-extraneous-dependencies */
 import React, { Component } from 'react';
 import { View, Text } from 'react-native';
 import Events from '@storybook/core-events';
 import Swatch from './Swatch';
 import BackgroundEvents, { PARAM_KEY } from './constants';
 
+import console = require('console');
+
 const codeSample = `
 import { storiesOf } from '@storybook/react-native';
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
@@ -36,7 +38,7 @@ const Instructions = () => (
   </View>
 );
 
-export default class BackgroundPanel extends Component {
+export default class BackgroundPanel extends Component<any, any> {
   componentDidMount() {
     this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
   }
@@ -45,11 +47,11 @@ export default class BackgroundPanel extends Component {
     this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected);
   }
 
-  setBackgroundFromSwatch = background => {
+  setBackgroundFromSwatch = (background: any) => {
     this.props.channel.emit(BackgroundEvents.UPDATE_BACKGROUND, background);
   };
 
-  onStorySelected = selection => {
+  onStorySelected = (selection: any) => {
     this.setState({ selection });
   };
 
@@ -68,7 +70,7 @@ export default class BackgroundPanel extends Component {
     return (
       <View>
         {backgrounds ? (
-          backgrounds.map(({ value, name }) => (
+          backgrounds.map(({ value, name }: any) => (
             <View key={`${name} ${value}`}>
               <Swatch value={value} name={name} setBackground={this.setBackgroundFromSwatch} />
             </View>
diff --git a/addons/ondevice-backgrounds/src/Swatch.js b/addons/ondevice-backgrounds/src/Swatch.tsx
similarity index 93%
rename from addons/ondevice-backgrounds/src/Swatch.js
rename to addons/ondevice-backgrounds/src/Swatch.tsx
index 6511ce77053e..0033309d6674 100644
--- a/addons/ondevice-backgrounds/src/Swatch.js
+++ b/addons/ondevice-backgrounds/src/Swatch.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TouchableOpacity, View, Text } from 'react-native';
 
-const Swatch = ({ name, value, setBackground }) => (
+const Swatch = ({ name, value, setBackground }: any) => (
   <TouchableOpacity
     style={{
       borderRadius: 4,
diff --git a/addons/ondevice-backgrounds/src/constants.js b/addons/ondevice-backgrounds/src/constants.ts
similarity index 100%
rename from addons/ondevice-backgrounds/src/constants.js
rename to addons/ondevice-backgrounds/src/constants.ts
diff --git a/addons/ondevice-backgrounds/src/container.js b/addons/ondevice-backgrounds/src/container.tsx
similarity index 82%
rename from addons/ondevice-backgrounds/src/container.js
rename to addons/ondevice-backgrounds/src/container.tsx
index 523e4ae4a31e..f41c1ac3b7dc 100644
--- a/addons/ondevice-backgrounds/src/container.js
+++ b/addons/ondevice-backgrounds/src/container.tsx
@@ -3,8 +3,8 @@ import { View } from 'react-native';
 import PropTypes from 'prop-types';
 import Constants from './constants';
 
-export default class Container extends React.Component {
-  constructor(props) {
+export default class Container extends React.Component<any, any> {
+  constructor(props: any) {
     super(props);
     this.state = { background: props.initialBackground || '' };
   }
@@ -19,7 +19,7 @@ export default class Container extends React.Component {
     channel.removeListener(Constants.UPDATE_BACKGROUND, this.onBackgroundChange);
   }
 
-  onBackgroundChange = background => {
+  onBackgroundChange = (background: any) => {
     this.setState({ background });
   };
 
@@ -33,7 +33,7 @@ export default class Container extends React.Component {
   }
 }
 
-Container.propTypes = {
+(Container as any).propTypes = {
   channel: PropTypes.shape({
     emit: PropTypes.func,
     on: PropTypes.func,
@@ -43,7 +43,7 @@ Container.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-Container.defaultProps = {
+(Container as any).defaultProps = {
   channel: undefined,
   initialBackground: '',
 };
diff --git a/addons/ondevice-backgrounds/src/index.js b/addons/ondevice-backgrounds/src/index.tsx
similarity index 100%
rename from addons/ondevice-backgrounds/src/index.js
rename to addons/ondevice-backgrounds/src/index.tsx
diff --git a/addons/ondevice-backgrounds/src/register.js b/addons/ondevice-backgrounds/src/register.tsx
similarity index 70%
rename from addons/ondevice-backgrounds/src/register.js
rename to addons/ondevice-backgrounds/src/register.tsx
index 2714689abb25..85704f211f5b 100644
--- a/addons/ondevice-backgrounds/src/register.js
+++ b/addons/ondevice-backgrounds/src/register.tsx
@@ -8,8 +8,7 @@ addons.register(ADDON_ID, api => {
   const channel = addons.getChannel();
   addons.addPanel(PANEL_ID, {
     title: 'Backgrounds',
-    // eslint-disable-next-line react/prop-types
-    render: ({ active }) => <BackgroundPanel channel={channel} api={api} active={active} />,
+    render: ({ active }: any) => <BackgroundPanel channel={channel} api={api} active={active} />,
     paramKey: PARAM_KEY,
   });
 });
diff --git a/addons/ondevice-backgrounds/tsconfig.json b/addons/ondevice-backgrounds/tsconfig.json
new file mode 100644
index 000000000000..8876bb6737a1
--- /dev/null
+++ b/addons/ondevice-backgrounds/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/__tests__/**/*"
+  ]
+}

From 208e6eaa7b3b484a1cde46a833bf53bedca22182 Mon Sep 17 00:00:00 2001
From: lonyele <skyrabbits1@gmail.com>
Date: Sun, 11 Aug 2019 01:43:42 +0900
Subject: [PATCH 2/7] refactor: improve types of index.tsx

---
 addons/ondevice-backgrounds/src/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/addons/ondevice-backgrounds/src/index.tsx b/addons/ondevice-backgrounds/src/index.tsx
index 84056bfc9c47..f24ae28826a0 100644
--- a/addons/ondevice-backgrounds/src/index.tsx
+++ b/addons/ondevice-backgrounds/src/index.tsx
@@ -5,6 +5,12 @@ import addons, { makeDecorator } from '@storybook/addons';
 import Events from './constants';
 import Container from './container';
 
+export interface Background {
+  name: string;
+  value: string;
+  default?: boolean;
+}
+
 export const withBackgrounds = makeDecorator({
   name: 'withBackgrounds',
   parameterName: 'backgrounds',
@@ -12,7 +18,7 @@ export const withBackgrounds = makeDecorator({
   allowDeprecatedUsage: true,
   wrapper: (getStory, context, { options, parameters }) => {
     const data = parameters || options || [];
-    const backgrounds = Array.isArray(data) ? data : Object.values(data);
+    const backgrounds: Background[] = Array.isArray(data) ? data : Object.values(data);
 
     let background = 'transparent';
     if (backgrounds.length !== 0) {

From 00ec0f09ec4219ad25549af912ea5a87a22f5cdf Mon Sep 17 00:00:00 2001
From: lonyele <skyrabbits1@gmail.com>
Date: Sun, 11 Aug 2019 01:44:52 +0900
Subject: [PATCH 3/7] refactor: improve types of Container component

---
 addons/ondevice-backgrounds/src/container.tsx | 32 ++++++++-----------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/addons/ondevice-backgrounds/src/container.tsx b/addons/ondevice-backgrounds/src/container.tsx
index f41c1ac3b7dc..3eb1a8a8f0f7 100644
--- a/addons/ondevice-backgrounds/src/container.tsx
+++ b/addons/ondevice-backgrounds/src/container.tsx
@@ -1,10 +1,19 @@
 import React from 'react';
 import { View } from 'react-native';
-import PropTypes from 'prop-types';
+import { AddonStore } from '@storybook/addons';
 import Constants from './constants';
 
-export default class Container extends React.Component<any, any> {
-  constructor(props: any) {
+interface ContainerProps {
+  initialBackground: string;
+  channel: ReturnType<AddonStore['getChannel']>;
+}
+
+interface ContainerState {
+  background: string;
+}
+
+export default class Container extends React.Component<ContainerProps, ContainerState> {
+  constructor(props: ContainerProps) {
     super(props);
     this.state = { background: props.initialBackground || '' };
   }
@@ -19,7 +28,7 @@ export default class Container extends React.Component<any, any> {
     channel.removeListener(Constants.UPDATE_BACKGROUND, this.onBackgroundChange);
   }
 
-  onBackgroundChange = (background: any) => {
+  onBackgroundChange = (background: string) => {
     this.setState({ background });
   };
 
@@ -32,18 +41,3 @@ export default class Container extends React.Component<any, any> {
     );
   }
 }
-
-(Container as any).propTypes = {
-  channel: PropTypes.shape({
-    emit: PropTypes.func,
-    on: PropTypes.func,
-    removeListener: PropTypes.func,
-  }),
-  initialBackground: PropTypes.string,
-  children: PropTypes.node.isRequired,
-};
-
-(Container as any).defaultProps = {
-  channel: undefined,
-  initialBackground: '',
-};

From 6b449994f68f73a2e54d03575ef7e13371c58138 Mon Sep 17 00:00:00 2001
From: lonyele <skyrabbits1@gmail.com>
Date: Sun, 11 Aug 2019 01:45:10 +0900
Subject: [PATCH 4/7] refactor: improve types of Swatch component

---
 addons/ondevice-backgrounds/src/Swatch.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/addons/ondevice-backgrounds/src/Swatch.tsx b/addons/ondevice-backgrounds/src/Swatch.tsx
index 0033309d6674..cd55fe629b18 100644
--- a/addons/ondevice-backgrounds/src/Swatch.tsx
+++ b/addons/ondevice-backgrounds/src/Swatch.tsx
@@ -1,8 +1,14 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import { TouchableOpacity, View, Text } from 'react-native';
 
-const Swatch = ({ name, value, setBackground }: any) => (
+interface SwatchProps {
+  name: string;
+  value: string;
+  setBackground: (background: string) => void;
+}
+
+const Swatch: FunctionComponent<SwatchProps> = ({ name, value, setBackground }) => (
   <TouchableOpacity
     style={{
       borderRadius: 4,
@@ -21,6 +27,7 @@ const Swatch = ({ name, value, setBackground }: any) => (
     </View>
   </TouchableOpacity>
 );
+
 Swatch.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,

From 83e82538b20de4efa680b5ddf6240999cee0c075 Mon Sep 17 00:00:00 2001
From: lonyele <skyrabbits1@gmail.com>
Date: Sun, 11 Aug 2019 01:45:37 +0900
Subject: [PATCH 5/7] refactor: improve types of BackgroundPanel component

---
 .../src/BackgroundPanel.tsx                   | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/addons/ondevice-backgrounds/src/BackgroundPanel.tsx b/addons/ondevice-backgrounds/src/BackgroundPanel.tsx
index 5b98a8c2a0db..10f58a0ce878 100644
--- a/addons/ondevice-backgrounds/src/BackgroundPanel.tsx
+++ b/addons/ondevice-backgrounds/src/BackgroundPanel.tsx
@@ -2,10 +2,13 @@
 import React, { Component } from 'react';
 import { View, Text } from 'react-native';
 import Events from '@storybook/core-events';
+import { AddonStore } from '@storybook/addons';
+import { API } from '@storybook/api';
+import { StoryStore } from '@storybook/client-api';
+
 import Swatch from './Swatch';
 import BackgroundEvents, { PARAM_KEY } from './constants';
-
-import console = require('console');
+import { Background } from './index';
 
 const codeSample = `
 import { storiesOf } from '@storybook/react-native';
@@ -38,7 +41,17 @@ const Instructions = () => (
   </View>
 );
 
-export default class BackgroundPanel extends Component<any, any> {
+interface BackgroundPanelProps {
+  channel: ReturnType<AddonStore['getChannel']>;
+  api: API;
+  active: boolean;
+}
+
+interface BackgroundPanelState {
+  selection: ReturnType<StoryStore['fromId']>;
+}
+
+export default class BackgroundPanel extends Component<BackgroundPanelProps, BackgroundPanelState> {
   componentDidMount() {
     this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
   }
@@ -47,11 +60,11 @@ export default class BackgroundPanel extends Component<any, any> {
     this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected);
   }
 
-  setBackgroundFromSwatch = (background: any) => {
+  setBackgroundFromSwatch = (background: string) => {
     this.props.channel.emit(BackgroundEvents.UPDATE_BACKGROUND, background);
   };
 
-  onStorySelected = (selection: any) => {
+  onStorySelected = (selection: ReturnType<StoryStore['fromId']>) => {
     this.setState({ selection });
   };
 
@@ -65,12 +78,12 @@ export default class BackgroundPanel extends Component<any, any> {
     const story = api
       .store()
       .getStoryAndParameters(this.state.selection.kind, this.state.selection.story);
-    const backgrounds = story.parameters[PARAM_KEY];
+    const backgrounds: Background[] = story.parameters[PARAM_KEY];
 
     return (
       <View>
         {backgrounds ? (
-          backgrounds.map(({ value, name }: any) => (
+          backgrounds.map(({ value, name }) => (
             <View key={`${name} ${value}`}>
               <Swatch value={value} name={name} setBackground={this.setBackgroundFromSwatch} />
             </View>

From 4c18fa280af609b674969cb1b9e0ebb52964552b Mon Sep 17 00:00:00 2001
From: lonyele <skyrabbits1@gmail.com>
Date: Sun, 11 Aug 2019 01:46:07 +0900
Subject: [PATCH 6/7] chore: remove unnecessary type

---
 addons/ondevice-backgrounds/src/register.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/ondevice-backgrounds/src/register.tsx b/addons/ondevice-backgrounds/src/register.tsx
index 85704f211f5b..f07741c2ffe5 100644
--- a/addons/ondevice-backgrounds/src/register.tsx
+++ b/addons/ondevice-backgrounds/src/register.tsx
@@ -8,7 +8,7 @@ addons.register(ADDON_ID, api => {
   const channel = addons.getChannel();
   addons.addPanel(PANEL_ID, {
     title: 'Backgrounds',
-    render: ({ active }: any) => <BackgroundPanel channel={channel} api={api} active={active} />,
+    render: ({ active }) => <BackgroundPanel channel={channel} api={api} active={active} />,
     paramKey: PARAM_KEY,
   });
 });

From 4ceb06e985fc26cc0f2559cde56c1193aa0aaabf Mon Sep 17 00:00:00 2001
From: lonyele <skyrabbits1@gmail.com>
Date: Sun, 11 Aug 2019 01:52:34 +0900
Subject: [PATCH 7/7] chore: extract common types and add dependencies

---
 addons/ondevice-backgrounds/package.json            | 2 ++
 addons/ondevice-backgrounds/src/BackgroundPanel.tsx | 8 +++++---
 addons/ondevice-backgrounds/src/container.tsx       | 4 ++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json
index f931bf579ced..f9cc04c3697d 100644
--- a/addons/ondevice-backgrounds/package.json
+++ b/addons/ondevice-backgrounds/package.json
@@ -25,6 +25,8 @@
   },
   "dependencies": {
     "@storybook/addons": "5.2.0-beta.26",
+    "@storybook/client-api": "5.2.0-beta.26",
+    "@storybook/api": "5.2.0-beta.26",
     "core-js": "^3.0.1",
     "prop-types": "^15.7.2"
   },
diff --git a/addons/ondevice-backgrounds/src/BackgroundPanel.tsx b/addons/ondevice-backgrounds/src/BackgroundPanel.tsx
index 10f58a0ce878..8d36e6491f94 100644
--- a/addons/ondevice-backgrounds/src/BackgroundPanel.tsx
+++ b/addons/ondevice-backgrounds/src/BackgroundPanel.tsx
@@ -41,14 +41,16 @@ const Instructions = () => (
   </View>
 );
 
+export type Channel = ReturnType<AddonStore['getChannel']>;
+type Selection = ReturnType<StoryStore['fromId']>;
 interface BackgroundPanelProps {
-  channel: ReturnType<AddonStore['getChannel']>;
+  channel: Channel;
   api: API;
   active: boolean;
 }
 
 interface BackgroundPanelState {
-  selection: ReturnType<StoryStore['fromId']>;
+  selection: Selection;
 }
 
 export default class BackgroundPanel extends Component<BackgroundPanelProps, BackgroundPanelState> {
@@ -64,7 +66,7 @@ export default class BackgroundPanel extends Component<BackgroundPanelProps, Bac
     this.props.channel.emit(BackgroundEvents.UPDATE_BACKGROUND, background);
   };
 
-  onStorySelected = (selection: ReturnType<StoryStore['fromId']>) => {
+  onStorySelected = (selection: Selection) => {
     this.setState({ selection });
   };
 
diff --git a/addons/ondevice-backgrounds/src/container.tsx b/addons/ondevice-backgrounds/src/container.tsx
index 3eb1a8a8f0f7..6bea7b30fc0c 100644
--- a/addons/ondevice-backgrounds/src/container.tsx
+++ b/addons/ondevice-backgrounds/src/container.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { View } from 'react-native';
-import { AddonStore } from '@storybook/addons';
 import Constants from './constants';
+import { Channel } from './BackgroundPanel';
 
 interface ContainerProps {
   initialBackground: string;
-  channel: ReturnType<AddonStore['getChannel']>;
+  channel: Channel;
 }
 
 interface ContainerState {