Migrate src of addons/backgrounds to Typescript

addons/backgrounds/package.json

@@ -19,7 +19,7 @@
   "license": "MIT",
   "author": "jbaxleyiii",
   "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
@@ -37,6 +37,9 @@
     "react": "^16.8.1",
     "util-deprecate": "^1.0.2"
   },
+  "devDependencies": {
+    "@types/util-deprecate": "^1.0.0"
+  },
   "publishConfig": {
     "access": "public"
   }

addons/backgrounds/src/Tool.tsx

@@ -10,7 +10,7 @@ import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/comp
 
 import { PARAM_KEY } from './constants';
 
-export const ColorIcon = styled.span(({ background }) => ({
+export const ColorIcon = styled.span(({ background }: any) => ({
   borderRadius: '1rem',
   display: 'block',
   height: '1rem',
@@ -41,7 +41,7 @@ const createItem = memoize(1000)((id, name, value, hasSwatch, change) =>
       }
 );
 
-const getSelected = (list, state) => {
+const getSelected = (list: any[], state: any) => {
   if (!list.length) {
     return 'transparent';
   }
@@ -73,7 +73,9 @@ const getState = memoize(10)((props, state, change) => {
       : [];
 
   const items = list.length
-    ? initial.concat(list.map(({ id, name, value }) => createItem(id, name, value, true, change)))
+    ? initial.concat(
+        list.map(({ id, name, value }: any) => createItem(id, name, value, true, change))
+      )
     : list;
 
   return {
@@ -82,7 +84,7 @@ const getState = memoize(10)((props, state, change) => {
   };
 });
 
-export default class BackgroundTool extends Component {
+export default class BackgroundTool extends Component<any, any> {
   static propTypes = {
     api: PropTypes.shape({
       getQueryParam: PropTypes.func,
@@ -90,7 +92,9 @@ export default class BackgroundTool extends Component {
     }).isRequired,
   };
 
-  constructor(props) {
+  listener: () => void;
+
+  constructor(props: any) {
     super(props);
 
     this.state = {
@@ -114,7 +118,8 @@ export default class BackgroundTool extends Component {
     api.off(SET_STORIES, this.listener);
   }
 
-  change = (...args) => this.setState(...args);
+  // @ts-ignore
+  change = (...args: any[]) => this.setState(...args);
 
   render() {
     const { expanded } = this.state;
@@ -135,7 +140,7 @@ export default class BackgroundTool extends Component {
           placement="top"
           trigger="click"
           tooltipShown={expanded}
-          onVisibilityChange={s => this.setState({ expanded: s })}
+          onVisibilityChange={(s: boolean) => this.setState({ expanded: s })}
           tooltip={<TooltipLinkList links={items} />}
           closeOnClick
         >

addons/backgrounds/src/components.ts

@@ -1,5 +1,5 @@
 import { styled } from '@storybook/theming';
 
-export const ColorIcon = styled.span(({ background }) => ({
+export const ColorIcon = styled.span(({ background }: any) => ({
   background,
 }));

addons/backgrounds/src/index.ts

@@ -4,7 +4,7 @@ import deprecate from 'util-deprecate';
 
 import Events from './constants';
 
-let prevBackgrounds;
+let prevBackgrounds: any[];
 
 const subscription = () => () => {
   prevBackgrounds = null;
@@ -16,7 +16,7 @@ export const withBackgrounds = makeDecorator({
   parameterName: 'backgrounds',
   skipIfNoParametersOrOptions: true,
   allowDeprecatedUsage: true,
-  wrapper: (getStory, context, { options, parameters }) => {
+  wrapper: (getStory: any, context: any, { options, parameters }: any) => {
     const data = parameters || options || [];
     const backgrounds = Array.isArray(data) ? data : Object.values(data);
 

addons/backgrounds/src/register.tsx

@@ -6,6 +6,7 @@ import Tool from './Tool';
 
 addons.register(ADDON_ID, api => {
   addons.add(ADDON_ID, {
+    title: 'Backgrounds',
     type: types.TOOL,
     match: ({ viewMode }) => viewMode === 'story',
     render: () => <Tool api={api} />,

addons/backgrounds/src/typings.d.ts

@@ -0,0 +1,3 @@
+// TODO: following packages need definition files or a TS migration
+declare module '@storybook/theming';
+declare module '@storybook/components';