added prop-types

Author: jaredpetersen

package.json

@@ -6,6 +6,7 @@
     "bootstrap": "^4.1.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-router-dom": "^4.3.1",

src/common/dropdown-toggle-select/index.js

@@ -1,18 +1,28 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { DropdownToggle } from 'reactstrap';
 import './index.css';
 
 const DropdownToggleSelect = (props) => {
-  const massagedProps = Object.assign({}, props);
-  if (massagedProps.caret) delete massagedProps.caret;
-  if (massagedProps.color) delete massagedProps.color;
-  if (massagedProps.outline) delete massagedProps.outline;
-
-  const style = Object.assign({}, { textAlign: 'left' }, massagedProps.style);
+  const style = Object.assign({}, { textAlign: 'left' }, props.style);
 
   return (
-    <DropdownToggle outline color='dropdown-toggle-select' block {...massagedProps} className='dropdown-toggle-select' style={style}/>
+    <DropdownToggle outline color='dropdown-toggle-select' block {...props} className='dropdown-toggle-select' style={style}/>
   );
 };
 
+// Rely on the propTypes provided by reacstrap
+DropdownToggleSelect.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  'data-toggle': PropTypes.string,
+  'aria-haspopup': PropTypes.bool,
+  // For DropdownToggle usage inside a Nav
+  nav: PropTypes.bool,
+  // Defaults to Button component
+  tag: PropTypes.any
+};
+
 export default DropdownToggleSelect;

src/editor/document/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Row, Col, Input } from 'reactstrap';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { defaultStyle, arduinoLight, ascetic, docco, githubGist, grayscale, idea, tomorrow, vs, xcode } from 'react-syntax-highlighter/styles/hljs';
@@ -67,5 +68,12 @@ class Document extends Component {
   }
 }
 
+Document.propTypes = {
+  font: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  theme: PropTypes.oneOf([ 'None', ...Object.keys(themeMap) ]).isRequired,
+  numbers: PropTypes.bool.isRequired
+};
+
 export default Document;
 export { Document, themeMap };

src/editor/index.js

@@ -72,4 +72,6 @@ class Editor extends Component {
   }
 }
 
+Editor.propTypes = { };
+
 export default Editor;

src/editor/toolbar/font-dropdown/index.js

@@ -1,21 +1,28 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { UncontrolledDropdown, DropdownMenu, DropdownItem } from 'reactstrap';
 import DropdownToggleSelect from '../../../common/dropdown-toggle-select';
 
-const FontDropdown = (props) => {
-  const dropdownItems = props.fonts.map(font => {
+const FontDropdown = ({ fonts, active, onSelect }) => {
+  const dropdownItems = fonts.map(font => {
     return (
-      <DropdownItem key={font} active={font === props.active} onClick={props.onSelect.bind(null, font)} style={{ fontFamily: `"${font}", monospace`}}>{font}</DropdownItem>);
+      <DropdownItem key={font} active={font === active} onClick={onSelect.bind(null, font)} style={{ fontFamily: `"${font}", monospace`}}>{font}</DropdownItem>);
   });
 
   return (
     <UncontrolledDropdown inNavbar>
-      <DropdownToggleSelect style={{ fontFamily: `"${props.active}", monospace` }}>{props.active}</DropdownToggleSelect>
+      <DropdownToggleSelect style={{ fontFamily: `"${active}", monospace` }}>{active}</DropdownToggleSelect>
       <DropdownMenu>
         {dropdownItems}
       </DropdownMenu>
     </UncontrolledDropdown>
   );
 };
 
+FontDropdown.propTypes = {
+  fonts: PropTypes.arrayOf(PropTypes.string).isRequired,
+  active: PropTypes.string.isRequired,
+  onSelect: PropTypes.func
+};
+
 export default FontDropdown;

src/editor/toolbar/index.js

@@ -1,31 +1,44 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Col, Navbar, Button } from 'reactstrap';
 import FontDropdown from './font-dropdown';
 import SizeDropdown from './size-dropdown';
 import ThemeDropdown from './theme-dropdown';
 
-const Toolbar = (props) => {
+const Toolbar = ({ fonts, activeFont, sizes, activeSize, themes, activeTheme, activeNumbers, onChange, onPrint }) => {
   return (
     <Navbar color='#FFFFFF' light expand='sm' style={{ marginBottom: 5 }}>
       <div className='form-row' style={{ width: '100%' }}>
         <Col xs='9' md='4' className='my-2 my-md-0'>
-          <FontDropdown fonts={props.fonts} active={props.activeFont} onSelect={props.onChange.bind(null, 'font')} />
+          <FontDropdown fonts={fonts} active={activeFont} onSelect={onChange.bind(null, 'font')} />
         </Col>
         <Col xs='3' md='2' className='my-2 my-md-0'>
-          <SizeDropdown sizes={props.sizes} active={props.activeSize} onSelect={props.onChange.bind(null, 'size')}/>
+          <SizeDropdown sizes={sizes} active={activeSize} onSelect={onChange.bind(null, 'size')}/>
         </Col>
         <Col xs='9' md='3' className='my-2 my-md-0'>
-          <ThemeDropdown themes={props.themes} active={props.activeTheme} onSelect={props.onChange.bind(null, 'theme')}/>
+          <ThemeDropdown themes={themes} active={activeTheme} onSelect={onChange.bind(null, 'theme')}/>
         </Col>
         <Col xs='3' md='auto' className='my-2 my-md-0'>
-          <Button active={props.activeNumbers} outline color='secondary' style={{ width: '100%' }} onClick={props.onChange.bind(null, 'numbers', !props.activeNumbers)}>#</Button>
+          <Button active={activeNumbers} outline color='secondary' style={{ width: '100%' }} onClick={onChange.bind(null, 'numbers', !activeNumbers)}>#</Button>
         </Col>
         <Col xs='12' md='auto' className='my-2 my-md-0'>
-          <Button outline color='success' onClick={props.onPrint} style={{ width: '100%' }}>Print</Button>
+          <Button outline color='success' onClick={onPrint} style={{ width: '100%' }}>Print</Button>
         </Col>
       </div>
     </Navbar>
   );
 };
 
+Toolbar.propTypes = {
+  fonts: PropTypes.arrayOf(PropTypes.string).isRequired,
+  activeFont: PropTypes.string.isRequired,
+  sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+  activeSize: PropTypes.number.isRequired,
+  themes: PropTypes.arrayOf(PropTypes.string).isRequired,
+  activeTheme: PropTypes.string.isRequired,
+  activeNumbers: PropTypes.bool.isRequired,
+  onChange: PropTypes.func,
+  onPrint: PropTypes.func
+};
+
 export default Toolbar;

src/editor/toolbar/size-dropdown/index.js

@@ -1,18 +1,25 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { UncontrolledDropdown, DropdownMenu, DropdownItem } from 'reactstrap';
 import DropdownToggleSelect from '../../../common/dropdown-toggle-select';
 
-const SizeDropdown = (props) => {
-  const dropdownItems = props.sizes.map(size => (<DropdownItem key={size} active={size === props.active} onClick={props.onSelect.bind(null, size)}>{size}</DropdownItem>));
+const SizeDropdown = ({ sizes, active, onSelect }) => {
+  const dropdownItems = sizes.map(size => (<DropdownItem key={size} active={size === active} onClick={onSelect.bind(null, size)}>{size}</DropdownItem>));
 
   return (
     <UncontrolledDropdown inNavbar>
-      <DropdownToggleSelect>{props.active}</DropdownToggleSelect>
+      <DropdownToggleSelect>{active}</DropdownToggleSelect>
       <DropdownMenu>
         {dropdownItems}
       </DropdownMenu>
     </UncontrolledDropdown>
   );
 };
 
+SizeDropdown.propTypes = {
+  sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+  active: PropTypes.number.isRequired,
+  onSelect: PropTypes.func
+};
+
 export default SizeDropdown;

src/editor/toolbar/theme-dropdown/index.js

@@ -1,18 +1,25 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { UncontrolledDropdown, DropdownMenu, DropdownItem } from 'reactstrap';
 import DropdownToggleSelect from '../../../common/dropdown-toggle-select';
 
-const ThemeDropdown = (props) => {
-  const dropdownItems = props.themes.map(theme => (<DropdownItem key={theme} active={theme === props.active} onClick={props.onSelect.bind(null, theme)}>{theme}</DropdownItem>));
+const ThemeDropdown = ({ themes, active, onSelect }) => {
+  const dropdownItems = themes.map(theme => (<DropdownItem key={theme} active={theme === active} onClick={onSelect.bind(null, theme)}>{theme}</DropdownItem>));
 
   return (
     <UncontrolledDropdown inNavbar>
-      <DropdownToggleSelect>{props.active}</DropdownToggleSelect>
+      <DropdownToggleSelect>{active}</DropdownToggleSelect>
       <DropdownMenu>
         {dropdownItems}
       </DropdownMenu>
     </UncontrolledDropdown>
   );
 };
 
+ThemeDropdown.propTypes = {
+  themes: PropTypes.arrayOf(PropTypes.string).isRequired,
+  active: PropTypes.string.isRequired,
+  onSelect: PropTypes.func
+};
+
 export default ThemeDropdown;

src/heart/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Container, Row, Col } from 'reactstrap';
 
-const Heart = (props) => {
+const Heart = () => {
   return (
     <Container fluid={true} className='responsive-container' style={{ marginTop: 10 }}>
       <Row>
@@ -21,4 +21,6 @@ const Heart = (props) => {
   );
 };
 
+Heart.propTypes = { };
+
 export default Heart;

src/navbar/index.js

@@ -11,7 +11,7 @@ import {
  } from 'reactstrap';
 import { Link } from 'react-router-dom';
 
-export default class NavBar extends React.Component {
+class CustomNavbar extends React.Component {
   constructor(props) {
     super(props);
 
@@ -46,3 +46,7 @@ export default class NavBar extends React.Component {
     );
   }
 }
+
+CustomNavbar.propTypes = { };
+
+export default CustomNavbar;