Feature/356383

packages/sitecore-jss-react/package.json

@@ -23,39 +23,39 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "devDependencies": {
-    "@types/chai": "^4.1.5",
-    "@types/chai-string": "^1.4.1",
-    "@types/enzyme": "^3.1.14",
-    "@types/enzyme-adapter-react-16": "^1.0.3",
-    "@types/mocha": "^5.2.5",
-    "@types/node": "*",
-    "@types/prop-types": "^15.5.5",
-    "@types/react": "16.4.7",
-    "@types/react-dom": "^16.0.7",
-    "@types/url-parse": "^1.1.0",
-    "chai": "^4.1.2",
+    "@types/chai": "^4.2.2",
+    "@types/chai-string": "^1.4.2",
+    "@types/enzyme": "^3.10.3",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@types/mocha": "^5.2.7",
+    "@types/node": "12.7.5",
+    "@types/prop-types": "^15.7.2",
+    "@types/react": "16.9.2",
+    "@types/react-dom": "^16.9.0",
+    "@types/url-parse": "^1.4.3",
+    "chai": "^4.2.0",
     "chai-string": "^1.5.0",
-    "del-cli": "^1.1.0",
-    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.5.0",
-    "jsdom": "^12.0.0",
-    "mocha": "^5.2.0",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
-    "react-test-renderer": "^16.5.2",
-    "sinon": "^6.3.4",
-    "ts-node": "^7.0.1",
-    "tslint-react": "^3.6.0",
-    "typescript": "^3.0.3",
-    "url-parse": "^1.4.3"
+    "del-cli": "^3.0.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "jsdom": "^15.1.1",
+    "mocha": "^6.2.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-test-renderer": "^16.9.0",
+    "sinon": "^7.4.2",
+    "ts-node": "^8.3.0",
+    "tslint-react": "^4.0.0",
+    "typescript": "^3.6.3",
+    "url-parse": "^1.4.7"
   },
   "peerDependencies": {
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0"
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
   },
   "dependencies": {
     "@sitecore-jss/sitecore-jss": "^12.0.0",
-    "prop-types": "^15.6.1",
+    "prop-types": "^15.7.2",
     "style-attr": "^1.3.0"
   },
   "description": "",

packages/sitecore-jss-react/src/components/Date.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { InferProps } from 'prop-types';
 
 export interface DateFieldProps {
   /** The date field data. */
@@ -21,7 +21,7 @@ export interface DateFieldProps {
   [htmlAttributes: string]: any;
 }
 
-export const DateField: React.SFC<DateFieldProps> = ({ field, tag, editable, render, ...otherProps }) => {
+export const DateField: React.SFC<DateFieldProps> = ({ field, tag, editable, render, ...otherProps }: DateFieldPropTypes) => {
   if (!field || (!field.editable && !field.value)) {
     return null;
   }
@@ -49,7 +49,7 @@ export const DateField: React.SFC<DateFieldProps> = ({ field, tag, editable, ren
   }
 };
 
-DateField.propTypes = {
+const dateFieldPropTypes = {
   field: PropTypes.shape({
     value: PropTypes.any,
     editable: PropTypes.string,
@@ -59,6 +59,8 @@ DateField.propTypes = {
   render: PropTypes.func,
 };
 
+type DateFieldPropTypes = InferProps<typeof dateFieldPropTypes>;
+
 DateField.defaultProps = {
   editable: true,
 };

packages/sitecore-jss-react/src/components/File.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types';
+import PropTypes, { InferProps } from 'prop-types';
 import React from 'react';
 
 export interface FileFieldValue {
@@ -19,7 +19,7 @@ export interface FileProps {
   [attributeName: string]: any;
 }
 
-export const File: React.SFC<FileProps> = ({ field, children, ...otherProps }) => {
+export const File: React.SFC<FileProps> = ({ field, children, ...otherProps }: FilePropTypes) => {
   /*
     File fields cannot be managed via the EE. We never output "editable."
   */
@@ -43,7 +43,7 @@ export const File: React.SFC<FileProps> = ({ field, children, ...otherProps }) =
   return React.createElement('a', { ...anchorAttrs, ...otherProps }, linkText, children);
 };
 
-File.propTypes = {
+const filePropTypes = {
   field: PropTypes.oneOfType([
     PropTypes.shape({
       src: PropTypes.string,
@@ -52,6 +52,9 @@ File.propTypes = {
       value: PropTypes.object,
     }),
   ]),
+  children: PropTypes.node
 };
 
+type FilePropTypes = InferProps<typeof filePropTypes>;
+
 File.displayName = 'File';

packages/sitecore-jss-react/src/components/Image.tsx

@@ -1,5 +1,5 @@
 import { mediaApi } from '@sitecore-jss/sitecore-jss';
-import PropTypes from 'prop-types';
+import PropTypes, { InferProps } from 'prop-types';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { convertAttributesToReactProps } from '../utils';
@@ -109,7 +109,7 @@ export const Image: React.SFC<ImageProps> = ({
   imageParams,
   field,
   ...otherProps
-}) => {
+}: ImagePropTypes) => {
   // allows the mistake of using 'field' prop instead of 'media' (consistent with other helpers)
   if (field && !media) {
     media = field;
@@ -155,7 +155,7 @@ export const Image: React.SFC<ImageProps> = ({
   return null; // we can't handle the truth
 };
 
-Image.propTypes = {
+const imagePropTypes = {
   media: PropTypes.oneOfType([
     PropTypes.shape({
       src: PropTypes.string,
@@ -167,8 +167,11 @@ Image.propTypes = {
   ]),
   editable: PropTypes.bool,
   imageParams: PropTypes.object,
+  field: PropTypes.any
 };
 
+type ImagePropTypes = InferProps<typeof imagePropTypes>;
+
 Image.defaultProps = {
   editable: true,
 };

packages/sitecore-jss-react/src/components/Link.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { InferProps } from 'prop-types';
 
 export interface LinkFieldValue {
   href?: string;
@@ -32,7 +32,7 @@ export type LinkProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLA
   showLinkTextWithChildrenPresent?: boolean;
 };
 
-export const Link: React.SFC<LinkProps> = ({ field, editable, children, showLinkTextWithChildrenPresent, ...otherProps }) => {
+export const Link: React.SFC<LinkProps> = ({ field, editable, children, showLinkTextWithChildrenPresent, ...otherProps }: LinkPropTypes) => {
   const dynamicField: any = field;
 
   if (!field || (!dynamicField.editableFirstPart && !dynamicField.value && !dynamicField.href)) {
@@ -93,7 +93,7 @@ export const Link: React.SFC<LinkProps> = ({ field, editable, children, showLink
   return <React.Fragment>{resultTags}</React.Fragment>;
 };
 
-Link.propTypes = {
+const linkPropTypes = {
   field: PropTypes.oneOfType([
     PropTypes.shape({
       href: PropTypes.string,
@@ -105,8 +105,12 @@ Link.propTypes = {
     }),
   ]),
   editable: PropTypes.bool,
+  showLinkTextWithChildrenPresent: PropTypes.bool,
+  children: PropTypes.node
 };
 
+type LinkPropTypes = InferProps<typeof linkPropTypes>;
+
 Link.defaultProps = {
   editable: true,
 };

packages/sitecore-jss-react/src/components/Placeholder.test.tsx

@@ -138,7 +138,7 @@ describe('<Placeholder />', () => {
     const renderedComponent = mount(
       <Placeholder name={phKey} rendering={route} componentFactory={componentFactory} />
     );
-    expect(renderedComponent.html()).to.be.null;
+    expect(renderedComponent.html()).to.be.empty;
   });
 });
 

packages/sitecore-jss-react/src/components/Placeholder.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PlaceholderCommon, PlaceholderProps } from './PlaceholderCommon';
+import { PlaceholderCommon, PlaceholderProps, PlaceholderCommonPropTypes } from './PlaceholderCommon';
 import { withComponentFactory } from '../enhancers/withComponentFactory';
 import { ComponentRendering, HtmlElementRendering } from '@sitecore-jss/sitecore-jss';
 
@@ -22,9 +22,8 @@ function isRawRendering(rendering: HtmlElementRendering | ComponentRendering): r
 }
 
 class PlaceholderComponent extends PlaceholderCommon {
-  static propTypes = PlaceholderCommon.propTypes;
 
-  constructor(props: PlaceholderComponentProps) {
+  constructor(props: PlaceholderCommonPropTypes) {
     super(props);
   }
 
@@ -68,4 +67,4 @@ class PlaceholderComponent extends PlaceholderCommon {
   }
 }
 
-export const Placeholder = withComponentFactory(PlaceholderComponent);
+export const Placeholder = withComponentFactory<PlaceholderProps>(PlaceholderComponent);

packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { Requireable, InferProps } from 'prop-types';
 import { MissingComponent } from '../components/MissingComponent';
 import { ComponentFactory } from '../components/sharedTypes';
 import { ComponentRendering, RouteData, Field, Item, HtmlElementRendering } from '@sitecore-jss/sitecore-jss';
@@ -49,15 +49,20 @@ export interface PlaceholderProps {
   [key: string]: any;
 }
 
-export class PlaceholderCommon extends React.Component<PlaceholderProps> {
-  static propTypes = {
-    rendering: PropTypes.object,
-    fields: PropTypes.object,
-    params: PropTypes.object,
-    missingComponentComponent: PropTypes.node,
-    errorComponent: PropTypes.node,
-  };
+const placeholderCommonPropTypes = {
+  name: PropTypes.string.isRequired,
+  rendering: PropTypes.oneOfType(
+    [PropTypes.object, PropTypes.object] as [Requireable<RouteData>, Requireable<ComponentRendering>]
+  ).isRequired,
+  fields: PropTypes.object,
+  params: PropTypes.object,
+  missingComponentComponent: PropTypes.node,
+  errorComponent: PropTypes.node,
+};
 
+export type PlaceholderCommonPropTypes = InferProps<typeof placeholderCommonPropTypes>;
+
+export class PlaceholderCommon extends React.Component<PlaceholderProps> {
   nodeRefs: any[];
   state: Readonly<{ error?: Error }>;
 
@@ -81,7 +86,7 @@ export class PlaceholderCommon extends React.Component<PlaceholderProps> {
     return result;
   }
 
-  constructor(props: PlaceholderProps) {
+  constructor(props: PlaceholderCommonPropTypes) {
     super(props);
     this.nodeRefs = [];
     this.state = {};
@@ -170,7 +175,7 @@ export class PlaceholderCommon extends React.Component<PlaceholderProps> {
       );
       return null;
     }
-    const attributes = convertAttributesToReactProps(elem.attributes);
+    const attributes: any = convertAttributesToReactProps(elem.attributes);
 
     const props: any = {
       ...baseProps,

packages/sitecore-jss-react/src/components/RichText.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { InferProps } from 'prop-types';
 
 export interface RichTextProps {
   /** The rich text field data. */
@@ -21,7 +21,7 @@ export interface RichTextProps {
   [htmlAttributes: string]: any;
 }
 
-export const RichText: React.SFC<RichTextProps> = ({ field, tag, editable, ...otherProps }) => {
+export const RichText: React.SFC<RichTextProps> = ({ field, tag, editable, ...otherProps }: RichTextPropTypes) => {
   if (!field || (!field.editable && !field.value)) {
     return null;
   }
@@ -36,7 +36,7 @@ export const RichText: React.SFC<RichTextProps> = ({ field, tag, editable, ...ot
   return React.createElement(tag || 'div', htmlProps);
 };
 
-RichText.propTypes = {
+const richTextPropTypes = {
   field: PropTypes.shape({
     value: PropTypes.string,
     editable: PropTypes.string,
@@ -45,6 +45,8 @@ RichText.propTypes = {
   editable: PropTypes.bool,
 };
 
+type RichTextPropTypes = InferProps<typeof richTextPropTypes>;
+
 RichText.defaultProps = {
   tag: 'div',
   editable: true,

packages/sitecore-jss-react/src/components/Text.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { InferProps } from 'prop-types';
 
 export interface TextProps {
   /** The text field data. */
@@ -24,7 +24,7 @@ export interface TextProps {
   [htmlAttributes: string]: any;
 }
 
-export const Text: React.SFC<TextProps> = ({ field, tag, editable, encode, ...otherProps }) => {
+export const Text: React.SFC<TextProps> = ({ field, tag, editable, encode, ...otherProps }: TextPropTypes) => {
   if (!field || (!field.editable && !field.value)) {
     return null;
   }
@@ -58,7 +58,7 @@ export const Text: React.SFC<TextProps> = ({ field, tag, editable, encode, ...ot
   }
 };
 
-Text.propTypes = {
+const textPropTypes = {
   field: PropTypes.shape({
     value: PropTypes.any,
     editable: PropTypes.string,
@@ -68,6 +68,8 @@ Text.propTypes = {
   encode: PropTypes.bool,
 };
 
+type TextPropTypes = InferProps<typeof textPropTypes>;
+
 Text.defaultProps = {
   editable: true,
   encode: true,