Migrate @storybook/addon-ondevice-backgrounds to Typescript

addons/ondevice-backgrounds/package.json

@@ -19,12 +19,14 @@
   },
   "license": "MIT",
   "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
     "@storybook/addons": "5.2.0-beta.28",
+    "@storybook/client-api": "5.2.0-beta.28",
+    "@storybook/api": "5.2.0-beta.28",
     "core-js": "^3.0.1",
     "prop-types": "^15.7.2"
   },

addons/ondevice-backgrounds/src/BackgroundPanel.js → addons/ondevice-backgrounds/src/BackgroundPanel.tsx

@@ -1,9 +1,14 @@
-/* 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 { 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 { Background } from './index';
 
 const codeSample = `
 import { storiesOf } from '@storybook/react-native';
@@ -36,7 +41,19 @@ const Instructions = () => (
   </View>
 );
 
-export default class BackgroundPanel extends Component {
+export type Channel = ReturnType<AddonStore['getChannel']>;
+type Selection = ReturnType<StoryStore['fromId']>;
+interface BackgroundPanelProps {
+  channel: Channel;
+  api: API;
+  active: boolean;
+}
+
+interface BackgroundPanelState {
+  selection: Selection;
+}
+
+export default class BackgroundPanel extends Component<BackgroundPanelProps, BackgroundPanelState> {
   componentDidMount() {
     this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
   }
@@ -45,11 +62,11 @@ export default class BackgroundPanel extends Component {
     this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected);
   }
 
-  setBackgroundFromSwatch = background => {
+  setBackgroundFromSwatch = (background: string) => {
     this.props.channel.emit(BackgroundEvents.UPDATE_BACKGROUND, background);
   };
 
-  onStorySelected = selection => {
+  onStorySelected = (selection: Selection) => {
     this.setState({ selection });
   };
 
@@ -63,7 +80,7 @@ export default class BackgroundPanel extends Component {
     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>

addons/ondevice-backgrounds/src/Swatch.js → 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 }) => (
+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 }) => (
     </View>
   </TouchableOpacity>
 );
+
 Swatch.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,

addons/ondevice-backgrounds/src/container.js → 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 Constants from './constants';
+import { Channel } from './BackgroundPanel';
 
-export default class Container extends React.Component {
-  constructor(props) {
+interface ContainerProps {
+  initialBackground: string;
+  channel: Channel;
+}
+
+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 {
     channel.removeListener(Constants.UPDATE_BACKGROUND, this.onBackgroundChange);
   }
 
-  onBackgroundChange = background => {
+  onBackgroundChange = (background: string) => {
     this.setState({ background });
   };
 
@@ -32,18 +41,3 @@ export default class Container extends React.Component {
     );
   }
 }
-
-Container.propTypes = {
-  channel: PropTypes.shape({
-    emit: PropTypes.func,
-    on: PropTypes.func,
-    removeListener: PropTypes.func,
-  }),
-  initialBackground: PropTypes.string,
-  children: PropTypes.node.isRequired,
-};
-
-Container.defaultProps = {
-  channel: undefined,
-  initialBackground: '',
-};

addons/ondevice-backgrounds/src/index.js → addons/ondevice-backgrounds/src/index.tsx

@@ -5,14 +5,20 @@ 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',
   skipIfNoParametersOrOptions: true,
   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) {

addons/ondevice-backgrounds/src/register.js → addons/ondevice-backgrounds/src/register.tsx

@@ -8,7 +8,6 @@ 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} />,
     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__/**/*"
+  ]
+}

app/react/src/server/framework-preset-cra.ts

@@ -35,7 +35,7 @@ export function webpackFinal(config: Configuration, { configDir }: { configDir:
   return applyCRAWebpackConfig(config, configDir);
 }
 
-export function managerWebpack(config: Configuration,  { configDir }: { configDir: string }) {
+export function managerWebpack(config: Configuration, { configDir }: { configDir: string }) {
   if (!isReactScriptsInstalled() || checkForNewPreset(configDir)) {
     return config;
   }
@@ -48,7 +48,7 @@ export function managerWebpack(config: Configuration,  { configDir }: { configDi
   };
 }
 
-export function babelDefault(config: Configuration,  { configDir }: { configDir: string }) {
+export function babelDefault(config: Configuration, { configDir }: { configDir: string }) {
   if (!isReactScriptsInstalled() || checkForNewPreset(configDir)) {
     return config;
   }