Rewrite in Typescript: MediaObject

package.json

@@ -23,7 +23,7 @@
     "storybook": "start-storybook -s ./node_modules/@salesforce-ux/design-system -p 9001 -c .storybook",
     "test": "npm-run-all type-check test:jest test:storyshots",
     "test:storyshots": "NODE_ENV=test jest test/storyshots/*.test.js",
-    "test:jest": "jest test/*-spec.js",
+    "test:jest": "jest test/*-spec.js test/*-spec.tsx",
     "prepublish": "npm run build",
     "type-check": "tsc --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
@@ -107,7 +107,7 @@
     "@types/react": "^16.8.12"
   },
   "jest": {
-    "testRegex": "(/test/.*|\\.(test|spec))\\.js$",
+    "testRegex": "(/test/.*|\\.(test|spec))\\.(js|tsx)$",
     "setupFilesAfterEnv": [
       "<rootDir>/test/setupTests.js"
     ],

src/scripts/ButtonGroup.js → src/scripts/ButtonGroup.tsx

@@ -1,15 +1,18 @@
 import React, { Component, Children } from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import DropdownButton from './DropdownButton';
 
-export default class ButtonGroup extends Component {
-  constructor() {
-    super();
+export type ButtonGroupProps = {
+  className?: string;
+};
+
+export class ButtonGroup extends Component<ButtonGroupProps, {}> {
+  constructor(props: Readonly<ButtonGroupProps>) {
+    super(props);
     this.renderButton = this.renderButton.bind(this);
   }
 
-  renderButton(button, index) {
+  renderButton(button: any, index: number) {
     const cnt = React.Children.count(this.props.children);
     if (
       button.type &&
@@ -29,18 +32,10 @@ export default class ButtonGroup extends Component {
   render() {
     const { className, children, ...props } = this.props;
     const btnGrpClassNames = classnames(className, 'slds-button-group');
-    const pprops = Object.assign({}, props);
-    delete pprops.component;
-    delete pprops.items;
     return (
       <div className={btnGrpClassNames} role='group' {...props}>
         {Children.map(children, this.renderButton)}
       </div>
     );
   }
 }
-
-ButtonGroup.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
-};

src/scripts/ComponentSettings.js → src/scripts/ComponentSettings.tsx

@@ -1,24 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+export type ComponentSettingsProps = {
+  assetRoot?: string;
+  portalClassName?: string;
+  portalStyle?: object;
+};
+
+export type ComponentSettingsContext = {
+  assetRoot?: string;
+  portalClassName?: string;
+  portalStyle?: object;
+};
+
 /**
  *
  */
-export default class ComponentSettings extends React.Component {
-  static propTypes = {
-    assetRoot: PropTypes.string,
-    portalClassName: PropTypes.string,
-    portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-    children: PropTypes.node,
-  };
-
+export class ComponentSettings extends React.Component<
+  ComponentSettingsProps,
+  {}
+> {
   static childContextTypes = {
     assetRoot: PropTypes.string,
     portalClassName: PropTypes.string,
     portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   };
 
-  getChildContext() {
+  getChildContext(): ComponentSettingsContext {
     const { assetRoot, portalClassName, portalStyle } = this.props;
     return { assetRoot, portalClassName, portalStyle };
   }

src/scripts/MediaObject.js → src/scripts/MediaObject.tsx

@@ -1,9 +1,14 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, ReactNode } from 'react';
 import classNames from 'classnames';
 
-export default class MediaObject extends Component {
-  renderFigure(figure, className) {
+export type MediaObjectProps = {
+  figureLeft?: ReactNode;
+  figureRight?: ReactNode;
+  figureCenter?: ReactNode;
+};
+
+export class MediaObject extends Component<MediaObjectProps, {}> {
+  renderFigure(figure: ReactNode, className?: string) {
     if (!figure) return null;
     return (
       <div className={classNames('slds-media__figure', className)}>
@@ -25,10 +30,3 @@ export default class MediaObject extends Component {
     );
   }
 }
-
-MediaObject.propTypes = {
-  figureLeft: PropTypes.node,
-  figureRight: PropTypes.node,
-  figureCenter: PropTypes.node,
-  children: PropTypes.node,
-};

src/scripts/PageHeader.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import MediaObject from './MediaObject';
+import { MediaObject } from './MediaObject';
 import Text from './Text';
 import Grid, { Row, Col } from './Grid';
 import { BreadCrumbs, Crumb } from './BreadCrumbs';

src/scripts/index.js

@@ -2,7 +2,6 @@
 // changed
 // because of https://github.com/gaearon/react-hot-loader/issues/158
 import Icon from './Icon';
-import ButtonGroup from './ButtonGroup';
 import DropdownButton from './DropdownButton';
 import DropdownMenu, {
   DropdownMenuItem,
@@ -33,7 +32,6 @@ import Spinner from './Spinner';
 import Container from './Container';
 import Grid, { Row, Col } from './Grid';
 import Notification, { Alert, Toast } from './Notification';
-import MediaObject from './MediaObject';
 import Text from './Text';
 import PageHeader, {
   PageHeaderHeading,
@@ -54,14 +52,12 @@ import Table, {
 import Popover, { PopoverHeader, PopoverBody } from './Popover';
 import Toggle from './Toggle';
 import Pill from './Pill';
-import ComponentSettings from './ComponentSettings';
 
 export {
   Notification,
   Alert,
   Toast,
   Icon,
-  ButtonGroup,
   DropdownButton,
   DropdownMenu,
   DropdownMenuItem,
@@ -99,7 +95,6 @@ export {
   Row,
   Col,
   Text,
-  MediaObject,
   PageHeader,
   PageHeaderHeading,
   PageHeaderHeadingTitle,
@@ -119,11 +114,14 @@ export {
   TableRowColumnActions,
   Toggle,
   Pill,
-  ComponentSettings,
 };
 
 export { default as util } from './util';
 
 export * from './Badge';
 export * from './BreadCrumbs';
 export * from './Button';
+export * from './ButtonGroup';
+export * from './MediaObject';
+
+export * from './ComponentSettings';