[next] Email (#2261)

* feat: suspending, banning, now propogation

* feat: added email rendering + localization support

* fix: fix related to lib

* refactor: moved juicer to queue task

* refactor: cleanup of job processor

* refactor: improved error messaging around failed email

* feat: initial forgot passwor impl

* fix: fixed rebase errors

* feat: send back Content-Language header with requests

* feat: added ban email

* feat: implemented forgotten password API

* fix: linting

* feat: support more emails

* fix: promise patches

* feat: initial confirm email API

* feat: added rate limiting

* feat: added URL support

* feat: added email docs

* fix: updated docs

* chore: documentation review

* fix: fixed build bug

* feat: implement forgot password in auth popup

* test: add tests + fixes

* chore: rename StatelessComponent to FunctionComponent

* fix: types and test fixes

* chore: upgrade deps

* fix: THANK YOU TESTS FOR SAVING MY A**

* chore: reorder imports

* chore: remove obsolete !

* feat: implement accounts bundle

* refactor: review suggestion

* fix: rebase upgrade error

* fix: rebase bug

* feat: reset password link support

* test: add tests for account password reset page

* fix: remove redirect uri

* fix: revert local state changes

src/core/client/ui/components/AppBar/AppBar.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Flex } from "talk-ui/components";
 import { withStyles } from "talk-ui/hocs";
@@ -14,7 +14,7 @@ interface Props {
   classes: typeof styles;
 }
 
-const AppBar: StatelessComponent<Props> = ({
+const AppBar: FunctionComponent<Props> = ({
   gutterBegin,
   gutterEnd,
   className,

src/core/client/ui/components/AppBar/Begin.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Flex } from "talk-ui/components";
 import { withStyles } from "talk-ui/hocs";
@@ -13,7 +13,7 @@ interface Props extends PropTypesOf<typeof Flex> {
   classes: typeof styles;
 }
 
-const Begin: StatelessComponent<Props> = ({
+const Begin: FunctionComponent<Props> = ({
   className,
   children,
   classes,

src/core/client/ui/components/AppBar/Divider.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -10,10 +10,8 @@ interface Props {
   classes: typeof styles;
 }
 
-const Divider: StatelessComponent<Props> = ({
-  className,
-  classes,
-  ...rest
-}) => <div {...rest} className={cn(classes.root, className)} />;
+const Divider: FunctionComponent<Props> = ({ className, classes, ...rest }) => (
+  <div {...rest} className={cn(classes.root, className)} />
+);
 
 export default withStyles(styles)(Divider);

src/core/client/ui/components/AppBar/End.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Flex } from "talk-ui/components";
 import { withStyles } from "talk-ui/hocs";
@@ -13,7 +13,7 @@ interface Props extends PropTypesOf<typeof Flex> {
   classes: typeof styles;
 }
 
-const End: StatelessComponent<Props> = ({
+const End: FunctionComponent<Props> = ({
   classes,
   className,
   children,

src/core/client/ui/components/AppBar/Navigation.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -11,7 +11,7 @@ interface Props {
   children?: React.ReactNode;
 }
 
-const Navigation: StatelessComponent<Props> = ({
+const Navigation: FunctionComponent<Props> = ({
   children,
   className,
   classes,

src/core/client/ui/components/AppBar/NavigationItem.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -14,7 +14,7 @@ interface Props {
   classes: typeof styles;
 }
 
-const NavigationItem: StatelessComponent<Props> = ({
+const NavigationItem: FunctionComponent<Props> = ({
   className,
   active,
   href,

src/core/client/ui/components/AriaInfo/AriaInfo.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { AllHTMLAttributes, Ref, StatelessComponent } from "react";
+import React, { AllHTMLAttributes, FunctionComponent, Ref } from "react";
 
 import { withForwardRef, withStyles } from "talk-ui/hocs";
 import { PropTypesOf } from "talk-ui/types";
@@ -18,7 +18,7 @@ interface Props extends AllHTMLAttributes<HTMLElement> {
   forwardRef?: Ref<HTMLElement>;
 }
 
-const AriaInfo: StatelessComponent<Props> = props => {
+const AriaInfo: FunctionComponent<Props> = props => {
   const { component, className, classes, forwardRef: ref, ...rest } = props;
   const Component: React.ComponentType<
     React.HTMLAttributes<HTMLElement> & React.ClassAttributes<HTMLElement>

src/core/client/ui/components/Backdrop/Backdrop.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { HTMLAttributes, StatelessComponent } from "react";
+import React, { FunctionComponent, HTMLAttributes } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -14,7 +14,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
   active?: boolean;
 }
 
-const Backdrop: StatelessComponent<Props> = ({
+const Backdrop: FunctionComponent<Props> = ({
   classes,
   active,
   className,

src/core/client/ui/components/BaseButton/BaseButton.tsx

@@ -3,9 +3,9 @@ import React, {
   ButtonHTMLAttributes,
   EventHandler,
   FocusEvent,
+  FunctionComponent,
   MouseEvent,
   Ref,
-  StatelessComponent,
   TouchEvent,
 } from "react";
 
@@ -53,7 +53,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  * A button whose styling is stripped off to a minimum and supports
  * keyboard focus. It is the base for our other buttons.
  */
-const BaseButton: StatelessComponent<Props> = ({
+const BaseButton: FunctionComponent<Props> = ({
   anchor,
   className,
   classes,

src/core/client/ui/components/Brand/BrandIcon.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -11,7 +11,7 @@ interface Props {
   size?: "md" | "lg";
 }
 
-const BrandIcon: StatelessComponent<Props> = ({
+const BrandIcon: FunctionComponent<Props> = ({
   className,
   classes,
   size,

src/core/client/ui/components/Brand/BrandName.tsx

@@ -1,6 +1,6 @@
 import cn from "classnames";
 import { Localized } from "fluent-react/compat";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
 import { Typography } from "talk-ui/components";
@@ -15,7 +15,7 @@ interface Props {
   size?: "md" | "lg";
 }
 
-const BrandName: StatelessComponent<Props> = ({
+const BrandName: FunctionComponent<Props> = ({
   align,
   className,
   classes,

src/core/client/ui/components/Brand/Logo.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Flex } from "talk-ui/components";
 import { withStyles } from "talk-ui/hocs";
@@ -14,7 +14,7 @@ interface Props {
   classes: typeof styles;
 }
 
-const Logo: StatelessComponent<Props> = ({ className, classes, ...rest }) => (
+const Logo: FunctionComponent<Props> = ({ className, classes, ...rest }) => (
   <Flex {...rest} alignItems="center" className={cn(classes.root, className)}>
     <BrandIcon className={classes.icon} />
     <BrandName />

src/core/client/ui/components/Button/ButtonIcon.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { HTMLAttributes, Ref, StatelessComponent } from "react";
+import React, { FunctionComponent, HTMLAttributes, Ref } from "react";
 
 import Icon, { IconProps } from "talk-ui/components/Icon";
 import { withForwardRef, withStyles } from "talk-ui/hocs";
@@ -23,7 +23,7 @@ interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "color"> {
   forwardRef?: Ref<HTMLSpanElement>;
 }
 
-export const ButtonIcon: StatelessComponent<Props> = props => {
+export const ButtonIcon: FunctionComponent<Props> = props => {
   const { classes, className, forwardRef, ...rest } = props;
   const rootClassName = cn(classes.root, className);
   return <Icon className={rootClassName} {...rest} ref={forwardRef} />;

src/core/client/ui/components/CallOut/CallOut.tsx

@@ -1,6 +1,6 @@
 import cn from "classnames";
 import React from "react";
-import { ReactNode, StatelessComponent } from "react";
+import { FunctionComponent, ReactNode } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -29,7 +29,7 @@ export interface CallOutProps {
   fullWidth?: boolean;
 }
 
-const CallOut: StatelessComponent<CallOutProps> = props => {
+const CallOut: FunctionComponent<CallOutProps> = props => {
   const { className, classes, color, fullWidth, children, ...rest } = props;
 
   const rootClassName = cn(

src/core/client/ui/components/Card/Card.tsx

@@ -1,6 +1,6 @@
 import cn from "classnames";
 import React from "react";
-import { ReactNode, StatelessComponent } from "react";
+import { FunctionComponent, ReactNode } from "react";
 import { withStyles } from "talk-ui/hocs";
 
 import styles from "./Card.css";
@@ -20,7 +20,7 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   classes: typeof styles;
 }
 
-const Card: StatelessComponent<CardProps> = props => {
+const Card: FunctionComponent<CardProps> = props => {
   const { className, classes, children, ...rest } = props;
 
   const rootClassName = cn(classes.root, className);

src/core/client/ui/components/Card/CloseButton.tsx

@@ -1,5 +1,5 @@
 import React, { Ref } from "react";
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 import { withForwardRef, withStyles } from "talk-ui/hocs";
 import { Omit, PropTypesOf } from "talk-ui/types";
 
@@ -19,7 +19,7 @@ export interface CloseButtonProps
   forwardRef?: Ref<HTMLButtonElement>;
 }
 
-const CloseButton: StatelessComponent<CloseButtonProps> = props => {
+const CloseButton: FunctionComponent<CloseButtonProps> = props => {
   const {
     classes: { icon: iconClassName, ...restClasses },
     forwardRef,

src/core/client/ui/components/ClickOutside/ClickOutside.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { findDOMNode } from "react-dom";
 
 import UIContext from "../UIContext";
@@ -65,9 +65,7 @@ export class ClickOutside extends React.Component<ClickOutsideProps> {
   }
 }
 
-const ClickOutsideWithContext: StatelessComponent<
-  ClickOutsideProps
-> = props => (
+const ClickOutsideWithContext: FunctionComponent<ClickOutsideProps> = props => (
   <UIContext.Consumer>
     {({ registerClickFarAway }) => (
       <ClickOutside {...props} registerClickFarAway={registerClickFarAway} />

src/core/client/ui/components/Counter/Counter.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -17,7 +17,7 @@ interface Props {
   color?: "inherit" | "grey" | "primary";
 }
 
-const Counter: StatelessComponent<Props> = ({
+const Counter: FunctionComponent<Props> = ({
   classes,
   color,
   className,

src/core/client/ui/components/Dropdown/Button.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { Omit } from "talk-framework/types";
 import { withStyles } from "talk-ui/hocs";
@@ -23,7 +23,7 @@ interface Props extends Omit<BaseButtonProps, "ref"> {
   blankAdornment?: boolean;
 }
 
-const Button: StatelessComponent<Props> = ({
+const Button: FunctionComponent<Props> = ({
   blankAdornment,
   className,
   href,

src/core/client/ui/components/Dropdown/Divider.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -10,10 +10,8 @@ interface Props {
   classes: typeof styles;
 }
 
-const Divider: StatelessComponent<Props> = ({
-  className,
-  classes,
-  ...rest
-}) => <hr {...rest} className={cn(classes.root, className)} />;
+const Divider: FunctionComponent<Props> = ({ className, classes, ...rest }) => (
+  <hr {...rest} className={cn(classes.root, className)} />
+);
 
 export default withStyles(styles)(Divider);

src/core/client/ui/components/Dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -10,7 +10,7 @@ interface Props {
   classes: typeof styles;
 }
 
-const Dropdown: StatelessComponent<Props> = ({
+const Dropdown: FunctionComponent<Props> = ({
   className,
   children,
   classes,

src/core/client/ui/components/FieldSet/FieldSet.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { AllHTMLAttributes, Ref, StatelessComponent } from "react";
+import React, { AllHTMLAttributes, FunctionComponent, Ref } from "react";
 
 import { withForwardRef, withStyles } from "talk-ui/hocs";
 import { PropTypesOf } from "talk-ui/types";
@@ -16,7 +16,7 @@ interface InnerProps extends AllHTMLAttributes<HTMLElement> {
   forwardRef?: Ref<HTMLFieldSetElement>;
 }
 
-const FieldSet: StatelessComponent<InnerProps> = props => {
+const FieldSet: FunctionComponent<InnerProps> = props => {
   const { className, classes, forwardRef: ref, ...rest } = props;
   const rootClassName = cn(classes.root, className);
   return <fieldset className={rootClassName} {...rest} ref={ref} />;

src/core/client/ui/components/Flex/Flex.tsx

@@ -1,6 +1,6 @@
 import cn from "classnames";
 import React, { Ref } from "react";
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 
 import { pascalCase } from "talk-common/utils";
 import { withForwardRef, withStyles } from "talk-ui/hocs";
@@ -33,7 +33,7 @@ interface Props {
   forwardRef?: Ref<HTMLDivElement>;
 }
 
-const Flex: StatelessComponent<Props> = props => {
+const Flex: FunctionComponent<Props> = props => {
   const {
     classes,
     className,

src/core/client/ui/components/FormField/FormField.tsx

@@ -1,6 +1,6 @@
 import cn from "classnames";
 import React, { ReactNode } from "react";
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 import { Omit, PropTypesOf } from "talk-ui/types";
@@ -16,7 +16,7 @@ interface Props extends Omit<PropTypesOf<typeof HorizontalGutter>, "ref"> {
   className?: string;
 }
 
-const FormField: StatelessComponent<Props> = props => {
+const FormField: FunctionComponent<Props> = props => {
   const { classes, className, children, ...rest } = props;
 
   return (

src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { HTMLAttributes, Ref, StatelessComponent } from "react";
+import React, { FunctionComponent, HTMLAttributes, Ref } from "react";
 
 import { withForwardRef, withStyles } from "talk-ui/hocs";
 import { PropTypesOf } from "talk-ui/types";
@@ -29,7 +29,7 @@ interface Props extends HTMLAttributes<HTMLSpanElement> {
   container?: React.ReactElement<any> | React.ComponentType<any> | string;
 }
 
-const HorizontalGutter: StatelessComponent<Props> = props => {
+const HorizontalGutter: FunctionComponent<Props> = props => {
   const { classes, className, size, forwardRef, container, ...rest } = props;
   const rootClassName = cn(classes.root, className, classes[size!]);
 

src/core/client/ui/components/Icon/Icon.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { HTMLAttributes, Ref, StatelessComponent } from "react";
+import React, { FunctionComponent, HTMLAttributes, Ref } from "react";
 
 import { withForwardRef, withStyles } from "talk-ui/hocs";
 import { PropTypesOf } from "talk-ui/types";
@@ -27,7 +27,7 @@ interface Props extends HTMLAttributes<HTMLSpanElement> {
   forwardRef?: Ref<HTMLSpanElement>;
 }
 
-const Icon: StatelessComponent<Props> = props => {
+const Icon: FunctionComponent<Props> = props => {
   const { classes, className, size, color, forwardRef, ...rest } = props;
 
   const rootClassName = cn(

src/core/client/ui/components/InputDescription/InputDescription.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, StatelessComponent } from "react";
+import React, { FunctionComponent, ReactNode } from "react";
 import { Typography } from "talk-ui/components";
 import { PropTypesOf } from "talk-ui/types";
 
@@ -9,7 +9,7 @@ interface InputDescriptionProps {
   container?: PropTypesOf<typeof Typography>["container"];
 }
 
-const InputDescription: StatelessComponent<InputDescriptionProps> = props => {
+const InputDescription: FunctionComponent<InputDescriptionProps> = props => {
   const { className, children, ...rest } = props;
   return (
     <Typography

src/core/client/ui/components/InputLabel/InputLabel.tsx

@@ -1,6 +1,6 @@
 import cn from "classnames";
 import React, { ReactNode } from "react";
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 import { withStyles } from "talk-ui/hocs";
 import { Omit, PropTypesOf } from "talk-ui/types";
 
@@ -25,7 +25,7 @@ export interface InputLabelProps
   classes: typeof styles;
 }
 
-const InputLabelProps: StatelessComponent<InputLabelProps> = props => {
+const InputLabelProps: FunctionComponent<InputLabelProps> = props => {
   const { className, children, classes, ...rest } = props;
 
   const rootClassName = cn(classes.root, className);

src/core/client/ui/components/Marker/Count.tsx

@@ -1,6 +1,6 @@
 import cn from "classnames";
 import React from "react";
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -15,7 +15,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-const Count: StatelessComponent<Props> = props => {
+const Count: FunctionComponent<Props> = props => {
   const { className, children, classes, ...rest } = props;
   const rootClassName = cn(classes.root, className);
 

src/core/client/ui/components/Marker/Marker.tsx

@@ -1,6 +1,6 @@
 import cn from "classnames";
 import React from "react";
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -21,7 +21,7 @@ interface Props {
   variant?: "regular" | "filled";
 }
 
-const Marker: StatelessComponent<Props> = props => {
+const Marker: FunctionComponent<Props> = props => {
   const { className, children, classes, color, variant, ...rest } = props;
 
   const rootClassName = cn(classes.root, className, {

src/core/client/ui/components/MatchMedia/MatchMedia.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactNode, StatelessComponent } from "react";
+import { FunctionComponent, ReactNode } from "react";
 import Responsive, { MediaQueryMatchers } from "react-responsive";
 
 import { PropTypesOf } from "talk-ui/types";
@@ -35,7 +35,7 @@ interface Props {
   values?: Partial<MediaQueryMatchers>;
 }
 
-export const MatchMedia: StatelessComponent<Props> = props => {
+export const MatchMedia: FunctionComponent<Props> = props => {
   const { speech, gteWidth, gtWidth, lteWidth, ltWidth, ...rest } = props;
   const mapped = {
     // TODO: Temporarily map newer speech to older aural type until
@@ -55,7 +55,7 @@ export const MatchMedia: StatelessComponent<Props> = props => {
   return <Responsive {...rest} {...mapped} />;
 };
 
-const MatchMediaWithContext: StatelessComponent<Props> = props => (
+const MatchMediaWithContext: FunctionComponent<Props> = props => (
   <UIContext.Consumer>
     {({ mediaQueryValues }) => (
       <MatchMedia {...props} values={mediaQueryValues} />

src/core/client/ui/components/Message/Message.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { ReactNode, StatelessComponent } from "react";
+import React, { FunctionComponent, ReactNode } from "react";
 import { withStyles } from "talk-ui/hocs";
 
 import styles from "./Message.css";
@@ -27,7 +27,7 @@ export interface MessageProps {
   color?: "error" | "grey" | "primary" | "dark";
 }
 
-const Message: StatelessComponent<MessageProps> = props => {
+const Message: FunctionComponent<MessageProps> = props => {
   const { className, classes, fullWidth, children, color, ...rest } = props;
 
   const rootClassName = cn(

src/core/client/ui/components/Message/MessageIcon.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { HTMLAttributes, Ref, StatelessComponent } from "react";
+import React, { FunctionComponent, HTMLAttributes, Ref } from "react";
 
 import Icon, { IconProps } from "talk-ui/components/Icon";
 import { withForwardRef, withStyles } from "talk-ui/hocs";
@@ -23,7 +23,7 @@ interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "color"> {
   forwardRef?: Ref<HTMLSpanElement>;
 }
 
-export const MessageIcon: StatelessComponent<Props> = props => {
+export const MessageIcon: FunctionComponent<Props> = props => {
   const { classes, className, forwardRef, ...rest } = props;
   const rootClassName = cn(classes.root, className);
   return <Icon className={rootClassName} {...rest} ref={forwardRef} />;

src/core/client/ui/components/Modal/Modal.tsx

@@ -1,6 +1,6 @@
 import cn from "classnames";
 import React, {
-  StatelessComponent,
+  FunctionComponent,
   useCallback,
   useEffect,
   useState,
@@ -60,7 +60,7 @@ interface Props {
   children?: PropTypesOf<typeof TrapFocus>["children"];
 }
 
-const Modal: StatelessComponent<Props> = ({
+const Modal: FunctionComponent<Props> = ({
   classes,
   open,
   onClose,

src/core/client/ui/components/NoScroll/NoScroll.tsx

@@ -1,4 +1,4 @@
-import { StatelessComponent, useEffect } from "react";
+import { FunctionComponent, useEffect } from "react";
 
 import styles from "./NoScroll.css";
 
@@ -10,7 +10,7 @@ interface Props {
 /** Counter of current <NoScroll> instances */
 let instances = 0;
 
-const NoScroll: StatelessComponent<Props> = ({ active }) => {
+const NoScroll: FunctionComponent<Props> = ({ active }) => {
   useEffect(() => {
     if (active) {
       if (instances++ === 0) {

src/core/client/ui/components/RelativeTime/RelativeTime.tsx

@@ -22,7 +22,7 @@ interface Props {
 const defaultFormatter: Formatter = (value, unit, suffix, timestamp: string) =>
   new Date(timestamp).toISOString();
 
-const RelativeTime: React.StatelessComponent<Props> = props => {
+const RelativeTime: React.FunctionComponent<Props> = props => {
   const { date, classes, live, className, formatter } = props;
   return (
     <UIContext.Consumer>

src/core/client/ui/components/SelectField/OptGroup.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 
 export interface OptGroupProps {
   label: string;
   children?: React.ReactNode;
 }
 
-const OptionGroup: StatelessComponent<OptGroupProps> = props => {
+const OptionGroup: FunctionComponent<OptGroupProps> = props => {
   return <optgroup {...props} />;
 };
 

src/core/client/ui/components/SelectField/Option.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 
 export interface OptionProps {
   value?: string;
@@ -8,7 +8,7 @@ export interface OptionProps {
   children?: React.ReactNode;
 }
 
-const Option: StatelessComponent<OptionProps> = props => {
+const Option: FunctionComponent<OptionProps> = props => {
   return <option {...props} />;
 };
 

src/core/client/ui/components/SelectField/SelectField.tsx

@@ -1,6 +1,6 @@
 import cn from "classnames";
 import React, { ChangeEvent, EventHandler, FocusEvent } from "react";
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 
 import { withKeyboardFocus, withStyles } from "talk-ui/hocs";
 import Icon from "../Icon";
@@ -42,7 +42,7 @@ export interface SelectFieldProps {
   afterWrapper?: React.ReactElement<any>;
 }
 
-const SelectField: StatelessComponent<SelectFieldProps> = props => {
+const SelectField: FunctionComponent<SelectFieldProps> = props => {
   const {
     className,
     classes,

src/core/client/ui/components/Spinner/Spinner.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import { withStyles } from "talk-ui/hocs";
 
 import styles from "./Spinner.css";
@@ -32,7 +32,7 @@ function calculateSize(size: Size): number {
   }
 }
 
-const Spinner: StatelessComponent<SpinnerProps> = props => {
+const Spinner: FunctionComponent<SpinnerProps> = props => {
   const { className, classes } = props;
 
   const rootClassName = cn(classes.spinner, className);

src/core/client/ui/components/Steps/Circle.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 import Icon from "../Icon";
 
 import styles from "./Circle.css";
@@ -9,7 +9,7 @@ interface CircleProps {
   completed?: boolean;
 }
 
-const Circle: StatelessComponent<CircleProps> = ({ active, completed }) => {
+const Circle: FunctionComponent<CircleProps> = ({ active, completed }) => {
   const rootClassName = cn(styles.root, {
     [styles.active]: active,
     [styles.completed]: completed,

src/core/client/ui/components/Steps/Line.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import styles from "./Line.css";
 
@@ -8,7 +8,7 @@ interface CircleProps {
   completed?: boolean;
 }
 
-const Line: StatelessComponent<CircleProps> = ({ active, completed }) => {
+const Line: FunctionComponent<CircleProps> = ({ active, completed }) => {
   const rootClassName = cn(styles.root, {
     [styles.completed]: completed,
   });

src/core/client/ui/components/SubBar/Navigation.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -11,7 +11,7 @@ interface Props {
   children?: React.ReactNode;
 }
 
-const Navigation: StatelessComponent<Props> = ({
+const Navigation: FunctionComponent<Props> = ({
   children,
   className,
   classes,

src/core/client/ui/components/SubBar/NavigationItem.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -14,7 +14,7 @@ interface Props {
   classes: typeof styles;
 }
 
-const NavigationItem: StatelessComponent<Props> = ({
+const NavigationItem: FunctionComponent<Props> = ({
   children,
   href,
   className,

src/core/client/ui/components/SubBar/SubBar.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { HTMLAttributes, StatelessComponent } from "react";
+import React, { FunctionComponent, HTMLAttributes } from "react";
 
 import { Flex } from "talk-ui/components";
 import { withStyles } from "talk-ui/hocs";
@@ -14,7 +14,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
   classes: typeof styles;
 }
 
-const SubBar: StatelessComponent<Props> = ({
+const SubBar: FunctionComponent<Props> = ({
   gutterBegin,
   gutterEnd,
   className,

src/core/client/ui/components/Table/Table.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -15,7 +15,7 @@ interface Props extends React.HTMLAttributes<HTMLTableElement> {
   fullWidth?: boolean;
 }
 
-const Table: StatelessComponent<Props> = ({
+const Table: FunctionComponent<Props> = ({
   classes,
   className,
   fullWidth,

src/core/client/ui/components/Table/TableBody.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -13,7 +13,7 @@ interface Props extends React.HTMLAttributes<HTMLTableSectionElement> {
   classes: typeof styles;
 }
 
-const TableBody: StatelessComponent<Props> = ({
+const TableBody: FunctionComponent<Props> = ({
   classes,
   className,
   children,

src/core/client/ui/components/Table/TableCell.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent, useContext } from "react";
+import React, { FunctionComponent, useContext } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 import { Omit } from "talk-ui/types";
@@ -19,7 +19,7 @@ interface Props
   align?: "begin" | "center" | "end";
 }
 
-const TableCell: StatelessComponent<Props> = ({
+const TableCell: FunctionComponent<Props> = ({
   align,
   classes,
   className,

src/core/client/ui/components/Table/TableHead.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -15,7 +15,7 @@ interface Props extends React.HTMLAttributes<HTMLTableSectionElement> {
   classes: typeof styles;
 }
 
-const TableHead: StatelessComponent<Props> = ({
+const TableHead: FunctionComponent<Props> = ({
   classes,
   className,
   children,

src/core/client/ui/components/Table/TableRow.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent, useContext } from "react";
+import React, { FunctionComponent, useContext } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -15,7 +15,7 @@ interface Props extends React.HTMLAttributes<HTMLTableRowElement> {
   classes: typeof styles;
 }
 
-const TableRow: StatelessComponent<Props> = ({
+const TableRow: FunctionComponent<Props> = ({
   classes,
   className,
   children,

src/core/client/ui/components/Tabs/TabBar.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -32,7 +32,7 @@ export interface TabBarProps {
   onTabClick?: (tabId: string) => void;
 }
 
-const TabBar: StatelessComponent<TabBarProps> = props => {
+const TabBar: FunctionComponent<TabBarProps> = props => {
   const {
     className,
     classes,

src/core/client/ui/components/Tabs/TabContent.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 export interface TabContentProps {
   /**
@@ -11,7 +11,7 @@ export interface TabContentProps {
   className?: string;
 }
 
-const TabContent: StatelessComponent<TabContentProps> = props => {
+const TabContent: FunctionComponent<TabContentProps> = props => {
   const { children, activeTab, className } = props;
   return (
     <>

src/core/client/ui/components/Tabs/TabPane.tsx

@@ -1,4 +1,4 @@
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 export interface TabBarProps {
   /**
@@ -11,7 +11,7 @@ export interface TabBarProps {
   tabId: string;
 }
 
-const TabPane: StatelessComponent<TabBarProps> = props => {
+const TabPane: FunctionComponent<TabBarProps> = props => {
   const { className, children, tabId, ...rest } = props;
   return (
     <section

src/core/client/ui/components/Tag/Tag.tsx

@@ -1,6 +1,6 @@
 import cn from "classnames";
 import React from "react";
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -15,7 +15,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-const Tag: StatelessComponent<Props> = props => {
+const Tag: FunctionComponent<Props> = props => {
   const { className, children, classes, ...rest } = props;
 
   const rootClassName = cn(classes.root, className);

src/core/client/ui/components/TextField/TextField.tsx

@@ -1,7 +1,7 @@
 import cn from "classnames";
 import React, { AllHTMLAttributes, ChangeEvent, EventHandler } from "react";
 
-import { StatelessComponent } from "react";
+import { FunctionComponent } from "react";
 import { withStyles } from "talk-ui/hocs";
 
 import styles from "./TextField.css";
@@ -66,7 +66,7 @@ export interface TextFieldProps {
   variant?: "regular" | "seamlessAdornment";
 }
 
-const TextField: StatelessComponent<TextFieldProps> = props => {
+const TextField: FunctionComponent<TextFieldProps> = props => {
   const {
     className,
     classes,

src/core/client/ui/components/TileSelector/TileOption.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { StatelessComponent } from "react";
+import React, { FunctionComponent } from "react";
 
 import styles from "./TileOption.css";
 import { SelectorChildProps } from "./TileSelector";
@@ -8,7 +8,7 @@ interface Props extends SelectorChildProps {
   className?: string;
 }
 
-const TileOption: StatelessComponent<Props> = ({
+const TileOption: FunctionComponent<Props> = ({
   id,
   name,
   onChange,

src/core/client/ui/components/TileSelector/TileSelector.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { ReactElement, StatelessComponent, useCallback } from "react";
+import React, { FunctionComponent, ReactElement, useCallback } from "react";
 
 import { Flex } from "talk-ui/components";
 
@@ -22,7 +22,7 @@ interface Props {
   children: Array<ReactElement<SelectorChildProps, any>>;
 }
 
-const TileSelector: StatelessComponent<Props> = props => {
+const TileSelector: FunctionComponent<Props> = props => {
   const { id, name, value, className, children, onChange } = props;
   const onItemChange = useCallback(
     (evt: React.ChangeEvent<HTMLInputElement>) =>

src/core/client/ui/components/Typography/Typography.tsx

@@ -1,6 +1,6 @@
 import cn from "classnames";
 import React, { Ref } from "react";
-import { HTMLAttributes, ReactNode, StatelessComponent } from "react";
+import { FunctionComponent, HTMLAttributes, ReactNode } from "react";
 
 import { withForwardRef, withStyles } from "talk-ui/hocs";
 import { PropTypesOf } from "talk-ui/types";
@@ -89,7 +89,7 @@ interface Props extends HTMLAttributes<any> {
   forwardRef?: Ref<HTMLElement>;
 }
 
-const Typography: StatelessComponent<Props> = props => {
+const Typography: FunctionComponent<Props> = props => {
   const {
     align,
     classes,

src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, StatelessComponent } from "react";
+import React, { FunctionComponent, ReactNode } from "react";
 import Message from "../Message";
 import MessageIcon from "../Message/MessageIcon";
 
@@ -17,7 +17,7 @@ export interface ValidationMessageProps {
   fullWidth?: boolean;
 }
 
-const ValidationMessage: StatelessComponent<ValidationMessageProps> = props => {
+const ValidationMessage: FunctionComponent<ValidationMessageProps> = props => {
   const { className, fullWidth, children, ...rest } = props;
 
   return (