chore: migrate src of addon-ondevice-backgrounds to Typescript

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"
   },

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>

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,

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: '',
 };

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,
   });
 });

addons/ondevice-backgrounds/tsconfig.json

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