Migrate addon a11y to TS

addons/a11y/package.json

@@ -21,7 +21,7 @@
   },
   "license": "MIT",
   "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
@@ -36,10 +36,12 @@
     "core-js": "^2.6.5",
     "global": "^4.3.2",
     "memoizerific": "^1.11.3",
-    "prop-types": "^15.7.2",
     "react": "^16.8.3",
     "util-deprecate": "^1.0.2"
   },
+  "devDependencies": {
+    "@types/common-tags": "^1.8.0"
+  },
   "publishConfig": {
     "access": "public"
   }

addons/a11y/src/components/Panel.js → addons/a11y/src/components/A11YPanel.tsx

@@ -1,24 +1,22 @@
 import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
 
 import { styled } from '@storybook/theming';
 
 import { STORY_RENDERED } from '@storybook/core-events';
-import { ActionBar, Icons } from '@storybook/components';
+import { ActionBar, Icons, ScrollArea } from '@storybook/components';
 
-import { ScrollArea } from '@storybook/components/dist/ScrollArea/ScrollArea';
-import EVENTS from '../constants';
-
-import Tabs from './Tabs';
-import Report from './Report';
+import { AxeResults, Result } from 'axe-core';
+import { Report } from './Report';
+import { Tabs } from './Tabs';
+import { EVENTS } from '../constants';
 
 const Icon = styled(Icons)(
   {
     height: '12px',
     width: '12px',
     marginRight: '4px',
   },
-  ({ status, theme }) =>
+  ({ status, theme }: any) =>
     status === 'running'
       ? {
           animation: `${theme.animation.rotate360} 1s linear infinite;`,
@@ -34,17 +32,23 @@ const Violations = styled.span(({ theme }) => ({
   color: theme.color.negative,
 }));
 
-class A11YPanel extends Component {
-  static propTypes = {
-    active: PropTypes.bool.isRequired,
-    api: PropTypes.shape({
-      on: PropTypes.func,
-      emit: PropTypes.func,
-      off: PropTypes.func,
-    }).isRequired,
+interface A11YPanelState {
+  status: string;
+  passes: Result[];
+  violations: Result[];
+}
+
+interface A11YPanelProps {
+  active: boolean;
+  api: {
+    on(event: string, callback: (data: any) => void): void;
+    off(event: string, callback: (data: any) => void): void;
+    emit(event: string): void;
   };
+}
 
-  state = {
+export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
+  state: A11YPanelState = {
     status: 'ready',
     passes: [],
     violations: [],
@@ -57,7 +61,7 @@ class A11YPanel extends Component {
     api.on(EVENTS.RESULT, this.onUpdate);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: A11YPanelProps) {
     // TODO: might be able to remove this
     const { active } = this.props;
 
@@ -73,7 +77,7 @@ class A11YPanel extends Component {
     api.off(EVENTS.RESULT, this.onUpdate);
   }
 
-  onUpdate = ({ passes, violations }) => {
+  onUpdate = ({ passes, violations }: AxeResults) => {
     this.setState(
       {
         status: 'ran',
@@ -153,5 +157,3 @@ class A11YPanel extends Component {
     ) : null;
   }
 }
-
-export default A11YPanel;

addons/a11y/src/components/ColorBlindness.js → addons/a11y/src/components/ColorBlindness.tsx

@@ -16,21 +16,29 @@ const ColorIcon = styled.span(
     height: '1rem',
     width: '1rem',
   },
-  ({ filter }) => ({
+  ({ filter }: { filter: string | null }) => ({
     filter: filter === 'mono' ? 'grayscale(100%)' : `url('#${filter}')`,
   }),
   ({ theme }) => ({
     boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
   })
 );
 
-class ColorBlindness extends Component {
-  state = {
+// tslint:disable-next-line:no-empty-interface
+interface ColorBlindnessProps {}
+
+interface ColorBlindnessState {
+  expanded: boolean;
+  filter: string | null;
+}
+
+export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnessState> {
+  state: ColorBlindnessState = {
     expanded: false,
     filter: null,
   };
 
-  setFilter = filter => {
+  setFilter = (filter: string | null) => {
     const iframe = getIframe();
 
     if (iframe) {
@@ -44,6 +52,8 @@ class ColorBlindness extends Component {
     }
   };
 
+  onVisibilityChange = (s: boolean) => this.setState({ expanded: s });
+
   render() {
     const { filter, expanded } = this.state;
 
@@ -69,10 +79,12 @@ class ColorBlindness extends Component {
     if (filter !== null) {
       colorList = [
         {
+          id: 'reset',
           title: 'Reset color filter',
           onClick: () => {
             this.setFilter(null);
           },
+          right: undefined,
         },
         ...colorList,
       ];
@@ -83,7 +95,7 @@ class ColorBlindness extends Component {
         placement="top"
         trigger="click"
         tooltipShown={expanded}
-        onVisibilityChange={s => this.setState({ expanded: s })}
+        onVisibilityChange={this.onVisibilityChange}
         tooltip={<TooltipLinkList links={colorList} />}
         closeOnClick
       >
@@ -94,5 +106,3 @@ class ColorBlindness extends Component {
     );
   }
 }
-
-export default ColorBlindness;

addons/a11y/src/components/Report/Elements.tsx

@@ -0,0 +1,48 @@
+import React, { FunctionComponent } from 'react';
+
+import { styled } from '@storybook/theming';
+
+import { NodeResult } from 'axe-core';
+import { Rules } from './Rules';
+
+const Item = styled.li({
+  fontWeight: 600,
+});
+const ItemTitle = styled.span({
+  borderBottom: '1px solid rgb(130, 130, 130)',
+  width: '100%',
+  display: 'inline-block',
+  paddingBottom: '4px',
+  marginBottom: '4px',
+});
+
+interface ElementProps {
+  element: NodeResult;
+  passes: boolean;
+}
+
+const Element: FunctionComponent<ElementProps> = ({ element, passes }) => {
+  const { any, all, none } = element;
+
+  const rules = [...any, ...all, ...none];
+
+  return (
+    <Item>
+      <ItemTitle>{element.target[0]}</ItemTitle>
+      <Rules rules={rules} passes={passes} />
+    </Item>
+  );
+};
+
+interface ElementsProps {
+  elements: NodeResult[];
+  passes: boolean;
+}
+
+export const Elements: FunctionComponent<ElementsProps> = ({ elements, passes }) => (
+  <ol>
+    {elements.map((element, index) => (
+      <Element passes={passes} element={element} key={index} />
+    ))}
+  </ol>
+);

addons/a11y/src/components/Report/Info.js → addons/a11y/src/components/Report/Info.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
 
 import { styled } from '@storybook/theming';
+import { Result } from 'axe-core';
 
 const Wrapper = styled.div(({ theme }) => ({
   backgroundColor: theme.background.bar,
@@ -18,7 +18,11 @@ const Link = styled.a({
   display: 'block',
 });
 
-function Info({ item }) {
+interface InfoProps {
+  item: Result;
+}
+
+export const Info: FunctionComponent<InfoProps> = ({ item }) => {
   return (
     <Wrapper>
       <Help>{item.help}</Help>
@@ -27,13 +31,4 @@ function Info({ item }) {
       </Link>
     </Wrapper>
   );
-}
-
-Info.propTypes = {
-  item: PropTypes.shape({
-    help: PropTypes.node,
-    helpUrl: PropTypes.string,
-  }).isRequired,
 };
-
-export default Info;

addons/a11y/src/components/Report/Item.js → addons/a11y/src/components/Report/Item.tsx

@@ -1,16 +1,16 @@
 import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
 
 import { styled } from '@storybook/theming';
 import { Icons } from '@storybook/components';
 
-import Info from './Info';
-import Tags from './Tags';
-import Elements from './Elements';
+import { Result } from 'axe-core';
+import { Info } from './Info';
+import { Elements } from './Elements';
+import { Tags } from './Tags';
 
 const Wrapper = styled.div();
 
-const Icon = styled(Icons)(({ theme }) => ({
+const Icon = styled<any, any>(Icons)(({ theme }) => ({
   height: 10,
   width: 10,
   color: theme.color.mediumdark,
@@ -37,16 +37,16 @@ const HeaderBar = styled.button(({ theme }) => ({
   },
 }));
 
-class Item extends Component {
-  static propTypes = {
-    item: PropTypes.shape({
-      description: PropTypes.string,
-      nodes: PropTypes.array,
-      tags: PropTypes.array,
-    }).isRequired,
-    passes: PropTypes.bool.isRequired,
-  };
+interface ItemProps {
+  item: Result;
+  passes: boolean;
+}
 
+interface ItemState {
+  open: boolean;
+}
+
+export class Item extends Component<ItemProps, ItemState> {
   state = {
     open: false,
   };
@@ -84,5 +84,3 @@ class Item extends Component {
     );
   }
 }
-
-export default Item;