refactor: move sidetray to typescript

src/components/SideTray/SideTray.test.js → src/components/SideTray/SideTray.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import SideTray from './';
+import SideTray from '.';
 
 describe('SideTray', () => {
   it('renders', () => {

src/components/SideTray/index.js → src/components/SideTray/SideTray.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, ReactNode, CSSProperties } from 'react';
 import PropTypes from 'prop-types';
 
 // Rover UI dependencies
@@ -7,14 +7,61 @@ import { parseCssSize } from '../../shared/css-utils';
 // This component's dependencies
 import styles from './SideTray.module.css';
 
-const SideTray = ({
+interface SideTrayProps {
+  children: ReactNode;
+  className?: string;
+  direction?: string;
+  height?: string | number;
+  onClose: (...args) => void;
+  style?: object;
+  visible?: boolean;
+  width?: string | number;
+}
+
+interface SideTrayChildProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const Header: React.FC<SideTrayChildProps> = ({ className = '', ...props }) => (
+  <div {...props} className={`${styles.header} ${className}`} />
+);
+Header.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+const Footer: React.FC<SideTrayChildProps> = ({ className = '', ...props }) => (
+  <div {...props} className={`${styles.footer} ${className}`} />
+);
+Footer.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+const Body: React.FC<SideTrayChildProps> = ({ className = '', ...props }) => (
+  <div {...props} className={`${styles.body} ${className}`} />
+);
+Body.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+interface SideTrayType extends React.FC<SideTrayProps> {
+  Header: typeof Header;
+  Footer: typeof Footer;
+  Body: typeof Body;
+}
+
+const SideTray: SideTrayType = ({
   children,
-  className,
-  direction,
-  height,
+  className = '',
+  direction = 'r',
+  height = '100vh',
   onClose,
-  visible,
-  width,
+  style = {},
+  visible = false,
+  width = '400px',
   ...passedProps
 }) => {
   // Close tray when the user hits "Escape"
@@ -52,7 +99,7 @@ const SideTray = ({
   const parsedWidth = parseCssSize({ size: width });
   let hideTransformStyle;
 
-  const sideTrayStyles = {
+  const sideTrayStyles: CSSProperties = {
     bottom: 0,
     height: `${parsedHeight.size}${parsedHeight.unit}`,
     left: 0,
@@ -82,20 +129,20 @@ const SideTray = ({
   }
 
   return (
-    <>
+    <React.Fragment>
       <div
         {...passedProps}
         style={{
           ...sideTrayStyles,
           ...(!visible ? { transform: hideTransformStyle } : {}),
-          ...passedProps.style,
+          ...style,
         }}
         className={`${styles.SideTray} ${className}`}
       >
         <div className={styles.container}>{children}</div>
       </div>
       {clickOffBackdrop}
-    </>
+    </React.Fragment>
   );
 };
 
@@ -110,42 +157,6 @@ SideTray.propTypes = {
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
-SideTray.defaultProps = {
-  className: '',
-  direction: 'r',
-  height: '100vh',
-  style: {},
-  visible: false,
-  width: '400px',
-};
-
-const Header = ({ className, ...props }) => (
-  <div {...props} className={`${styles.header} ${className}`} />
-);
-Header.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-};
-Header.defaultProps = { className: '' };
-
-const Footer = ({ className, ...props }) => (
-  <div {...props} className={`${styles.footer} ${className}`} />
-);
-Footer.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-};
-Footer.defaultProps = { className: '' };
-
-const Body = ({ className, ...props }) => (
-  <div {...props} className={`${styles.body} ${className}`} />
-);
-Body.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-};
-Body.defaultProps = { className: '' };
-
 SideTray.Header = Header;
 SideTray.Footer = Footer;
 SideTray.Body = Body;

src/components/SideTray/index.ts

@@ -0,0 +1 @@
+export { default } from './SideTray';

src/components/SideTray/story.js → src/components/SideTray/story.tsx

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { boolean, select, text } from '@storybook/addon-knobs';
 
-import SideTray from './';
+import SideTray from '.';
 import Button from '../Button';
 import Readme from './README.md';