Rewrite in Typescript: Spinner

src/scripts/Badge.tsx

@@ -4,13 +4,9 @@ import classnames from 'classnames';
 export type BadgeProps = {
   type?: 'default' | 'shade' | 'inverse';
   label?: string;
-};
+} & HTMLAttributes<HTMLSpanElement>;
 
-export const Badge: React.FC<BadgeProps & HTMLAttributes<HTMLSpanElement>> = ({
-  type,
-  label,
-  ...props
-}) => {
+export const Badge: React.FC<BadgeProps> = ({ type, label, ...props }) => {
   const typeClassName = type ? `slds-theme--${type}` : null;
   const badgeClassNames = classnames('slds-badge', typeClassName);
   return (

src/scripts/BreadCrumbs.tsx

@@ -4,9 +4,9 @@ import classnames from 'classnames';
 export type CrumbProps = {
   className?: string;
   href?: string;
-};
+} & HTMLAttributes<HTMLLIElement>;
 
-export const Crumb: React.FC<CrumbProps & HTMLAttributes<HTMLLIElement>> = ({
+export const Crumb: React.FC<CrumbProps> = ({
   className,
   href,
   children,
@@ -28,11 +28,14 @@ export const Crumb: React.FC<CrumbProps & HTMLAttributes<HTMLLIElement>> = ({
 export type BreadCrumbsProps = {
   label?: string;
   className?: string;
-};
+} & HTMLAttributes<HTMLElement>;
 
-export const BreadCrumbs: React.FC<
-  BreadCrumbsProps & HTMLAttributes<HTMLElement>
-> = ({ label, className, children, ...props }) => {
+export const BreadCrumbs: React.FC<BreadCrumbsProps> = ({
+  label,
+  className,
+  children,
+  ...props
+}) => {
   const oClassName = classnames(
     'slds-breadcrumb slds-list--horizontal',
     className

src/scripts/Button.tsx

@@ -1,7 +1,7 @@
 import React, { Component, ReactNode, ButtonHTMLAttributes } from 'react';
 import classnames from 'classnames';
 import Icon from './Icon';
-import Spinner from './Spinner';
+import { Spinner } from './Spinner';
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
@@ -43,12 +43,9 @@ export type ButtonProps = {
   iconMoreSize?: ButtonIconMoreSize;
   onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   buttonRef?: (node?: HTMLButtonElement) => void;
-};
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'>;
 
-export class Button extends Component<
-  ButtonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'>,
-  {}
-> {
+export class Button extends Component<ButtonProps, {}> {
   // eslint-disable-next-line react/sort-comp
   private node: HTMLButtonElement | null;
 

src/scripts/Container.tsx

@@ -5,11 +5,15 @@ export type ContainerProps = {
   className: string;
   size: 'small' | 'medium' | 'large';
   align: 'left' | 'center' | 'right';
-};
+} & HTMLAttributes<HTMLDivElement>;
 
-export const Container: React.FC<
-  ContainerProps & HTMLAttributes<HTMLDivElement>
-> = ({ className, size, align, children, ...props }) => {
+export const Container: React.FC<ContainerProps> = ({
+  className,
+  size,
+  align,
+  children,
+  ...props
+}) => {
   const ctClassNames = classnames(
     className,
     `slds-container--${size || 'fluid'}`,

src/scripts/Form.tsx

@@ -6,12 +6,9 @@ import { uuid } from './util';
 export type FormProps = {
   className?: string;
   type?: 'stacked' | 'horizontal' | 'inline' | 'compound';
-};
+} & FormHTMLAttributes<HTMLFormElement>;
 
-export class Form extends Component<
-  FormProps & FormHTMLAttributes<HTMLFormElement>,
-  {}
-> {
+export class Form extends Component<FormProps, {}> {
   static defaultProps: Pick<FormProps, 'type'> = {
     type: 'stacked',
   };

src/scripts/Lookup.js

@@ -5,7 +5,7 @@ import autoAlign from './AutoAlign';
 import { FormElement } from './FormElement';
 import Input from './Input';
 import Icon from './Icon';
-import Spinner from './Spinner';
+import { Spinner } from './Spinner';
 import Pill from './Pill';
 import DropdownButton from './DropdownButton';
 import { DropdownMenuItem } from './DropdownMenu';

src/scripts/Radio.tsx

@@ -8,11 +8,17 @@ export type RadioProps = {
   value?: string | number;
   checked?: boolean;
   defaultChecked?: boolean;
-};
+} & InputHTMLAttributes<HTMLInputElement>;
 
-export const Radio: React.FC<
-  RadioProps & InputHTMLAttributes<HTMLInputElement>
-> = ({ className, label, name, value, checked, defaultChecked, ...props }) => {
+export const Radio: React.FC<RadioProps> = ({
+  className,
+  label,
+  name,
+  value,
+  checked,
+  defaultChecked,
+  ...props
+}) => {
   const radioClassNames = classnames(className, 'slds-radio');
   return (
     <label className={radioClassNames}>

src/scripts/Spinner.js → src/scripts/Spinner.tsx

@@ -1,17 +1,25 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { HTMLAttributes } from 'react';
 import classnames from 'classnames';
 import { registerStyle } from './util';
 
-export default class Spinner extends React.Component {
-  constructor() {
-    super();
+export type SpinnerSize = 'small' | 'medium' | 'large';
+export type SpinnerType = 'brand' | 'inverse';
+export type SpinnerProps = {
+  container?: boolean;
+  className?: string;
+  size?: SpinnerSize;
+  type?: SpinnerType;
+} & HTMLAttributes<HTMLDivElement>;
+
+export class Spinner extends React.Component<SpinnerProps, {}> {
+  constructor(props: Readonly<SpinnerProps>) {
+    super(props);
     registerStyle('spinner-overlay', [
       ['body .slds .slds-spinner_container', '{ z-index: 9002 }'],
     ]);
   }
 
-  renderSpinner(props) {
+  renderSpinner(props: any) {
     const { className, size, type, ...pprops } = props;
     const spinnerClassNames = classnames(
       className,
@@ -34,27 +42,18 @@ export default class Spinner extends React.Component {
   }
 
   render() {
-    const { container, ...props } = this.props;
+    const {
+      container = true,
+      size = 'small',
+      ...props
+    }: SpinnerProps = this.props;
 
     return container ? (
-      <div className='slds-spinner_container'>{this.renderSpinner(props)}</div>
+      <div className='slds-spinner_container'>
+        {this.renderSpinner({ size, ...props })}
+      </div>
     ) : (
-      this.renderSpinner(props)
+      this.renderSpinner({ size, ...props })
     );
   }
 }
-
-const SPINNER_SIZES = ['small', 'medium', 'large'];
-const SPINNER_TYPES = ['brand', 'inverse'];
-
-Spinner.propTypes = {
-  container: PropTypes.bool,
-  className: PropTypes.string,
-  type: PropTypes.oneOf(SPINNER_TYPES),
-  size: PropTypes.oneOf(SPINNER_SIZES),
-};
-
-Spinner.defaultProps = {
-  container: true,
-  size: 'small',
-};

src/scripts/Textarea.tsx

@@ -13,23 +13,16 @@ export type TextareaProps = {
   cols?: number;
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
   textareaRef?: (...args: any[]) => any;
-};
+} & TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 type TextareaState = {
   id: string;
 };
 
-export class Textarea extends Component<
-  TextareaProps & TextareaHTMLAttributes<HTMLTextAreaElement>,
-  TextareaState
-> {
+export class Textarea extends Component<TextareaProps, TextareaState> {
   static isFormElement = true;
 
-  constructor(
-    props: Readonly<
-      TextareaProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>
-    >
-  ) {
+  constructor(props: Readonly<TextareaProps>) {
     super(props);
     this.state = { id: `form-element-${uuid()}` };
     this.onChange = this.onChange.bind(this);

src/scripts/Tree.tsx

@@ -13,15 +13,10 @@ export type TreeProps = {
   onNodeClick?: (...args: any[]) => any;
   onNodeToggle?: (...args: any[]) => any;
   onNodeLabelClick?: (...args: any[]) => any;
-};
+} & HTMLAttributes<HTMLDivElement>;
 
-export class Tree extends Component<
-  TreeProps & HTMLAttributes<HTMLDivElement>,
-  {}
-> {
-  constructor(
-    props: Readonly<TreeProps & React.HTMLAttributes<HTMLDivElement>>
-  ) {
+export class Tree extends Component<TreeProps, {}> {
+  constructor(props: Readonly<TreeProps>) {
     super(props);
     this.renderTreeNode = this.renderTreeNode.bind(this);
   }

src/scripts/TreeNode.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Button } from './Button';
-import Spinner from './Spinner';
+import { Spinner } from './Spinner';
 
 export type TreeNodeProps = {
   className?: string;

src/scripts/index.js

@@ -21,7 +21,6 @@ import Picklist, { PicklistItem } from './Picklist';
 import DateInput from './DateInput';
 import Lookup from './Lookup';
 import FieldSet from './FieldSet';
-import Spinner from './Spinner';
 import Grid, { Row, Col } from './Grid';
 import Notification, { Alert, Toast } from './Notification';
 import PageHeader, {
@@ -73,7 +72,6 @@ export {
   DateInput,
   Lookup,
   FieldSet,
-  Spinner,
   Grid,
   Row,
   Col,
@@ -110,6 +108,7 @@ export * from './Radio';
 export * from './RadioGroup';
 export * from './Form';
 export * from './FormElement';
+export * from './Spinner';
 export * from './Text';
 export * from './Textarea';
 export * from './Tree';

stories/SpinnerStories.js → stories/SpinnerStories.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { select } from '@storybook/addon-knobs';
-import { Spinner } from '../src/scripts';
+
+import { Spinner, SpinnerType, SpinnerSize } from '../src/scripts/Spinner';
 
 const containerStyle = {
-  position: 'relative',
+  position: 'relative' as const,
   width: 100,
   height: 100,
   display: 'inline-block',
@@ -17,19 +18,24 @@ storiesOf('Spinner', module)
   .add(
     'Controlled with knobs',
     () => {
+      // NOTE: Converting empty string to undefined
+      // because we can't assign undefined to options directly
+      // ref. https://github.com/storybookjs/storybook/issues/4487
       const sizeOptions = {
-        '': '(none)',
+        '(none)': '',
         small: 'small',
         medium: 'medium',
         large: 'large',
       };
-      const size = select('size', sizeOptions);
+      const size = (select('size', sizeOptions, '') ||
+        undefined) as SpinnerSize;
       const typeOptions = {
-        '': '(none)',
+        '(none)': '',
         brand: 'brand',
         inverse: 'inverse',
       };
-      const type = select('type', typeOptions);
+      const type = (select('type', typeOptions, '') ||
+        undefined) as SpinnerType;
       return (
         <div
           style={type === 'inverse' ? inverseContainerStyle : containerStyle}