refactor: improve types of Event component

addons/events/src/components/Event.tsx

@@ -5,10 +5,15 @@ import isEqual from 'lodash/isEqual';
 
 import { styled } from '@storybook/theming';
 import json from 'format-json';
-
 import Textarea from 'react-textarea-autosize';
+import { OnEmitEvent } from '../index';
 
-const StyledTextarea = styled(Textarea)(
+interface StyledTextareaProps {
+  shown: boolean;
+  failed: boolean;
+}
+
+const StyledTextarea = styled(Textarea)<StyledTextareaProps>(
   {
     flex: '1 0 0',
     boxSizing: 'border-box',
@@ -24,7 +29,7 @@ const StyledTextarea = styled(Textarea)(
     minHeight: '32px',
     resize: 'vertical',
   },
-  ({ shown }: any) =>
+  ({ shown }) =>
     shown
       ? {}
       : {
@@ -77,15 +82,29 @@ const Wrapper = styled.div({
   width: '100%',
 });
 
-function getJSONFromString(str: any) {
+function getJSONFromString(str: string) {
   try {
     return JSON.parse(str);
   } catch (e) {
     return str;
   }
 }
+interface ItemProps {
+  name: string;
+  title: string;
+  onEmit: (event: OnEmitEvent) => void;
+  payload: unknown;
+}
 
-class Item extends Component<any, any> {
+interface ItemState {
+  isTextAreaShowed: boolean;
+  failed: boolean;
+  payload: unknown;
+  payloadString: string;
+  prevPayload: unknown;
+}
+
+class Item extends Component<ItemProps, ItemState> {
   static propTypes = {
     name: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
@@ -98,12 +117,17 @@ class Item extends Component<any, any> {
     payload: {},
   };
 
-  state: any = {
+  state: ItemState = {
     isTextAreaShowed: false,
+    failed: false,
+    payload: null,
+    payloadString: '',
+    // eslint-disable-next-line react/no-unused-state,
+    prevPayload: null,
   };
 
-  onChange = ({ target: { value } }: any) => {
-    const newState: any = {
+  onChange = ({ target: { value } }: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newState: Partial<ItemState> = {
       payloadString: value,
     };
 
@@ -114,7 +138,7 @@ class Item extends Component<any, any> {
       newState.failed = true;
     }
 
-    this.setState(newState);
+    this.setState(newState as ItemState);
   };
 
   onEmitClick = () => {
@@ -128,12 +152,12 @@ class Item extends Component<any, any> {
   };
 
   onToggleEditClick = () => {
-    this.setState(({ isTextAreaShowed }: any) => ({
+    this.setState(({ isTextAreaShowed }) => ({
       isTextAreaShowed: !isTextAreaShowed,
     }));
   };
 
-  static getDerivedStateFromProps = ({ payload }: any, { prevPayload }: any) => {
+  static getDerivedStateFromProps = ({ payload }: ItemProps, { prevPayload }: ItemState) => {
     if (!isEqual(payload, prevPayload)) {
       const payloadString = json.plain(payload);
       const refinedPayload = getJSONFromString(payloadString);
@@ -150,7 +174,6 @@ class Item extends Component<any, any> {
   render() {
     const { title, name } = this.props;
     const { failed, isTextAreaShowed, payloadString } = this.state;
-
     return (
       <Wrapper>
         <Label htmlFor={`addon-event-${name}`}>{title}</Label>