Rithm add prop types

package.json

@@ -40,7 +40,8 @@
     "husky": "^1.3.1",
     "jest-dom": "^3.0.0",
     "prettier": "1.15.3",
-    "pretty-quick": "^1.11.1",
+    "pretty-quick": "^1.8.0",
+    "prop-types": "^15.7.2",
     "redux-mock-store": "^1.5.3"
   }
 }

src/components/App.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Header from '../components/Header';
 import SidebarContainer from '../containers/SidebarContainer';
 import PreviewContainer from '../containers/PreviewContainer';
@@ -48,4 +49,12 @@ class App extends Component {
   }
 }
 
+App.defaultProps = {
+  onEscape: () => {}
+};
+
+App.propTypes = {
+  onEscape: PropTypes.func.isRequired
+};
+
 export default App;

src/components/Burst.js

@@ -1,6 +1,9 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { getCalcState, setCalcState } from '../lib/calc-helpers';
+import { imageSettingPropTypes } from '../lib/propTypes';
+import { imageSettingDefaults } from '../lib/defaultProps';
 import { getBurstErrors } from '../lib/input-helpers';
 import './Burst.css';
 import InfoIcon from './InfoIcon';
@@ -168,4 +171,16 @@ class Burst extends Component {
   }
 }
 
+Burst.defaultProps = {
+  ...imageSettingDefaults,
+  expanded: false,
+  requestBurst: () => {}
+};
+
+Burst.propTypes = {
+  ...imageSettingPropTypes,
+  expanded: PropTypes.bool.isRequired,
+  requestBurst: PropTypes.func.isRequired
+};
+
 export default Burst;

src/components/ErrorToast.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './ErrorToast.css';
 
 const ErrorToast = ({ message }) => {
@@ -14,4 +15,8 @@ ErrorToast.defaultProps = {
   message: ''
 };
 
+ErrorToast.propTypes = {
+  message: PropTypes.string.isRequired
+};
+
 export default ErrorToast;

src/components/Frame.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import './Frame.css';
 
@@ -24,4 +25,16 @@ const Frame = ({ imageSrc, playing, togglePlaying }) => (
   </div>
 );
 
+Frame.defaultProps = {
+  imageSrc: '',
+  playing: false,
+  togglePlaying: () => {}
+};
+
+Frame.propTypes = {
+  imageSrc: PropTypes.string.isRequired,
+  playing: PropTypes.bool.isRequired,
+  togglePlaying: PropTypes.func.isRequired
+};
+
 export default Frame;

src/components/Preview.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Frame from './Frame';
 import InfoIcon from './InfoIcon';
@@ -164,10 +165,39 @@ class Preview extends Component {
 }
 
 Preview.defaultProps = {
+  expanded: false,
   previewIdx: 0,
+  playing: false,
   frames: {},
   frameIDs: [],
-  gifData: ''
+  gifData: '',
+  gifProgress: 0,
+  width: 300,
+  height: 300,
+  oversample: false,
+  interval: 100,
+  updatePreviewIdx: () => {},
+  generateGIF: () => {},
+  startAnimation: () => {},
+  stopAnimation: () => {}
+};
+
+Preview.propTypes = {
+  expanded: PropTypes.bool.isRequired,
+  previewIdx: PropTypes.number.isRequired,
+  playing: PropTypes.bool.isRequired,
+  frames: PropTypes.object.isRequired,
+  frameIDs: PropTypes.array.isRequired,
+  gifData: PropTypes.string.isRequired,
+  gifProgress: PropTypes.number.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  oversample: PropTypes.bool.isRequired,
+  interval: PropTypes.number.isRequired,
+  updatePreviewIdx: PropTypes.func.isRequired,
+  generateGIF: PropTypes.func.isRequired,
+  startAnimation: PropTypes.func.isRequired,
+  stopAnimation: PropTypes.func.isRequired
 };
 
 export default Preview;

src/components/Preview.test.js

@@ -11,7 +11,7 @@ describe('<Preview/>', () => {
 
   it('renders appropriate content', () => {
     const { getByTestId } = global.renderWithRedux(
-      <Preview expanded previewIdx={0} frames={{ 1: 'test' }} frameIDs={[1]} />
+      <Preview expanded frameIDs={[1]} />
     );
     expect(getByTestId('Preview-scrubber').firstChild.type).toBe('range');
     expect(getByTestId('Preview-scrubber-counter').textContent).toBe('1 / 1');

src/components/Settings.js

@@ -1,4 +1,7 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { imageSettingPropTypes } from '../lib/propTypes';
+import { imageSettingDefaults } from '../lib/defaultProps';
 import classNames from 'classnames';
 import { isPositiveInteger, isProperBound } from '../lib/input-helpers';
 import './Settings.css';
@@ -168,4 +171,18 @@ class Settings extends Component {
   }
 }
 
+Settings.defaultProps = {
+  expanded: false,
+  ...imageSettingDefaults,
+  interval: 100,
+  updateSetting: () => {}
+};
+
+Settings.propTypes = {
+  expanded: PropTypes.bool.isRequired,
+  ...imageSettingPropTypes,
+  interval: PropTypes.number.isRequired,
+  updateSetting: PropTypes.func.isRequired
+};
+
 export default Settings;

src/components/Sidebar.js

@@ -1,4 +1,7 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { imageSettingPropTypes } from '../lib/propTypes';
+import { imageSettingDefaults } from '../lib/defaultProps';
 import SidebarButton from './SidebarButton';
 import SidebarButtonWithBadge from './SidebarButtonWithBadge';
 import panes from '../constants/pane-types';
@@ -113,8 +116,24 @@ class Sidebar extends Component {
   }
 }
 
+Sidebar.propTypes = {
+  ...imageSettingPropTypes,
+  numFrames: PropTypes.number.isRequired,
+  expandedPane: PropTypes.string.isRequired,
+  gifData: PropTypes.string.isRequired,
+  requestFrame: PropTypes.func.isRequired,
+  togglePane: PropTypes.func.isRequired,
+  reset: PropTypes.func.isRequired
+};
+
 Sidebar.defaultProps = {
-  gifData: ''
+  numFrames: 0,
+  expandedPane: 'NONE',
+  gifData: '',
+  ...imageSettingDefaults,
+  requestFrame: () => {},
+  togglePane: () => {},
+  reset: () => {}
 };
 
 export default Sidebar;

src/components/SidebarButton.js

@@ -1,4 +1,7 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { sidebarButtonDefaults } from '../lib/defaultProps';
+import { sidebarButtonPropTypes } from '../lib/propTypes';
 import classNames from 'classnames';
 import camera from './icons/camera.svg';
 import preview from './icons/preview.svg';
@@ -47,7 +50,13 @@ const SidebarButton = ({ children, icon, onClick, expanded }) => (
 );
 
 SidebarButton.defaultProps = {
-  icon: 'icon'
+  ...sidebarButtonDefaults,
+  expanded: false
+};
+
+SidebarButton.propTypes = {
+  ...sidebarButtonPropTypes,
+  expanded: PropTypes.bool
 };
 
 export default SidebarButton;

src/components/SidebarButton.test.js

@@ -10,9 +10,7 @@ describe('<SidebarButton/>', () => {
   });
 
   it('renders appropriate content', () => {
-    const { getByTestId } = global.renderWithRedux(
-      <SidebarButton icon="icon" />
-    );
+    const { getByTestId } = global.renderWithRedux(<SidebarButton />);
     expect(getByTestId('SidebarButton-icon-button').firstChild.alt).toBe(
       'icon icon'
     );

src/components/SidebarButtonWithBadge.js

@@ -1,4 +1,7 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { sidebarButtonDefaults } from '../lib/defaultProps';
+import { sidebarButtonPropTypes } from '../lib/propTypes';
 import classNames from 'classnames';
 import SidebarButton from './SidebarButton';
 
@@ -18,4 +21,20 @@ const SidebarButtonWithBadge = ({ showBadge, value, color, ...props }) => (
   </SidebarButton>
 );
 
+SidebarButtonWithBadge.defaultProps = {
+  ...sidebarButtonDefaults,
+  expanded: false,
+  color: '',
+  showBadge: false,
+  value: 0
+};
+
+SidebarButtonWithBadge.propTypes = {
+  ...sidebarButtonPropTypes,
+  expanded: PropTypes.bool,
+  color: PropTypes.string.isRequired,
+  showBadge: PropTypes.bool.isRequired,
+  value: PropTypes.number.isRequired
+};
+
 export default SidebarButtonWithBadge;