From 63614b58f432c30e07b9cbc37c4bb354577a2784 Mon Sep 17 00:00:00 2001
From: Nicolas Biehler <biehler.nicolas@gmail.com>
Date: Mon, 27 Jul 2020 13:12:58 +0200
Subject: [PATCH] refactor: move sidetray to typescript

---
 .../{SideTray.test.js => SideTray.test.tsx}   |   2 +-
 .../SideTray/{index.js => SideTray.tsx}       | 105 ++++++++++--------
 src/components/SideTray/index.ts              |   1 +
 .../SideTray/{story.js => story.tsx}          |   2 +-
 4 files changed, 61 insertions(+), 49 deletions(-)
 rename src/components/SideTray/{SideTray.test.js => SideTray.test.tsx} (92%)
 rename src/components/SideTray/{index.js => SideTray.tsx} (78%)
 create mode 100644 src/components/SideTray/index.ts
 rename src/components/SideTray/{story.js => story.tsx} (99%)

diff --git a/src/components/SideTray/SideTray.test.js b/src/components/SideTray/SideTray.test.tsx
similarity index 92%
rename from src/components/SideTray/SideTray.test.js
rename to src/components/SideTray/SideTray.test.tsx
index 6dcb4558..489ceea0 100644
--- a/src/components/SideTray/SideTray.test.js
+++ b/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', () => {
diff --git a/src/components/SideTray/index.js b/src/components/SideTray/SideTray.tsx
similarity index 78%
rename from src/components/SideTray/index.js
rename to src/components/SideTray/SideTray.tsx
index 40823d66..551315d6 100644
--- a/src/components/SideTray/index.js
+++ b/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;
diff --git a/src/components/SideTray/index.ts b/src/components/SideTray/index.ts
new file mode 100644
index 00000000..d5a69a1f
--- /dev/null
+++ b/src/components/SideTray/index.ts
@@ -0,0 +1 @@
+export { default } from './SideTray';
diff --git a/src/components/SideTray/story.js b/src/components/SideTray/story.tsx
similarity index 99%
rename from src/components/SideTray/story.js
rename to src/components/SideTray/story.tsx
index 47a8df87..2326c91f 100644
--- a/src/components/SideTray/story.js
+++ b/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';