Rewrite in Typescript: index and data

.storybook/config.js

@@ -24,5 +24,5 @@ addDecorator(withKnobs);
 addDecorator(wrapContent({ assetRoot }));
 
 configure(() => {
-  require('../stories/index.js');
+  require('../stories/index.ts');
 }, module);

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",
@@ -72,10 +72,14 @@
     "@types/classnames": "^2.2.7",
     "@types/enzyme": "^3.9.1",
     "@types/jest": "^24.0.11",
+    "@types/power-assert": "^1.5.0",
     "@types/react": "^16.8.12",
+    "@types/react-dom": "^16.9.0",
     "@types/storybook__addon-actions": "^3.4.2",
     "@types/storybook__addon-knobs": "^5.0.0",
     "@types/storybook__react": "^4.0.1",
+    "@types/svg4everybody": "^2.1.1",
+    "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^1.5.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
@@ -107,7 +111,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/AutoAlign.js → src/scripts/AutoAlign.tsx

@@ -1,28 +1,36 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import RelativePortal from 'react-relative-portal';
+import { ComponentSettingsContext } from './ComponentSettings';
 
-function delay(ms) {
+function delay(ms: number) {
   return new Promise((resolve) => {
     setTimeout(resolve, ms);
   });
 }
 
-function getViewportRect() {
+function getViewportRect(): Rect {
   const { innerHeight: height = Infinity, innerWidth: width = Infinity } =
     window || {};
   return { top: 0, left: 0, width, height };
 }
 
-function getCenterPoint(rect) {
+type Rect = {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+};
+
+function getCenterPoint(rect: Rect) {
   return {
     x: rect.left + 0.5 * rect.width,
     y: rect.top + 0.5 * rect.height,
   };
 }
 
-function getPreferAlignment(rect) {
+function getPreferAlignment(rect: Rect) {
   const { x: rx, y: ry } = getCenterPoint(rect);
   const { x: vx, y: vy } = getCenterPoint(getViewportRect());
   return {
@@ -31,7 +39,12 @@ function getPreferAlignment(rect) {
   };
 }
 
-function calcAlignmentRect(target, rect, vertAlign, horizAlign) {
+function calcAlignmentRect(
+  target: Rect,
+  rect: { width: number; height: number },
+  vertAlign: string,
+  horizAlign: string
+) {
   return {
     ...rect,
     top:
@@ -53,7 +66,7 @@ function calcAlignmentRect(target, rect, vertAlign, horizAlign) {
   };
 }
 
-function hasViewportIntersection({ top, left, width, height }) {
+function hasViewportIntersection({ top, left, width, height }: Rect) {
   const { width: viewportWidth, height: viewportHeight } = getViewportRect();
   return (
     top < 0 ||
@@ -63,7 +76,7 @@ function hasViewportIntersection({ top, left, width, height }) {
   );
 }
 
-function isEqualRect(aRect, bRect) {
+function isEqualRect(aRect: Rect, bRect: Rect) {
   return (
     aRect.top === bRect.top &&
     aRect.left === bRect.left &&
@@ -72,9 +85,9 @@ function isEqualRect(aRect, bRect) {
   );
 }
 
-function throttle(func, ms) {
+function throttle(func: Function, ms: number) {
   let last = 0;
-  return (...args) => {
+  return (...args: any) => {
     const now = Date.now();
     if (last + ms < now) {
       func(...args);
@@ -83,40 +96,69 @@ function throttle(func, ms) {
   };
 }
 
-function ignoreFirstCall(func) {
+function ignoreFirstCall(func: Function) {
   let called = false;
-  return (...args) => {
+  return (...args: any) => {
     if (called) {
       func(...args);
     }
     called = true;
   };
 }
 
+export type AutoAlignOptions = {
+  triggerSelector: string;
+};
+
+export type AutoAlignProps = {
+  portalClassName?: string;
+  portalStyle?: object;
+  size?: 'small' | 'medium' | 'large';
+  preventPortalize?: boolean;
+} & Partial<InjectedProps>;
+
+export type InjectedProps = {
+  align: 'left' | 'right';
+  vertAlign: 'top' | 'bottom';
+};
+
+export type AutoAlignState = {
+  triggerRect: Rect;
+  horizAlign: string;
+  vertAlign: string;
+};
+
 /**
  *
  */
-export default function autoAlign(options) {
+export function autoAlign(options: AutoAlignOptions) {
   const { triggerSelector } = options;
 
-  return (Cmp) =>
-    class extends React.Component {
-      static propTypes = {
-        portalClassName: PropTypes.string,
-        portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-        size: PropTypes.oneOf(['small', 'medium', 'large']),
-        align: PropTypes.oneOf(['left', 'right']),
-        vertAlign: PropTypes.oneOf(['top', 'bottom']),
-        preventPortalize: PropTypes.bool,
-        children: PropTypes.node,
-      };
+  return <TOriginalProps extends {}>(
+    Cmp: ComponentType<TOriginalProps & InjectedProps>
+  ) => {
+    type ResultProps = TOriginalProps & AutoAlignProps;
+
+    return class extends React.Component<ResultProps, AutoAlignState> {
+      private pid: number | null = null;
+
+      /* eslint-disable react/sort-comp */
+      node: any;
+
+      content: any;
+      /* eslint-enable react/sort-comp */
+
+      context!: Pick<
+        ComponentSettingsContext,
+        'portalClassName' | 'portalStyle'
+      >;
 
       static contextTypes = {
         portalClassName: PropTypes.string,
         portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
       };
 
-      state = {
+      state: AutoAlignState = {
         triggerRect: { top: 0, left: 0, width: 0, height: 0 },
         horizAlign: 'left',
         vertAlign: 'top',
@@ -182,7 +224,7 @@ export default function autoAlign(options) {
         }
       };
 
-      updateAlignment(triggerRect) {
+      updateAlignment(triggerRect: Rect) {
         if (this.content && this.content.node) {
           const {
             horizAlign: oldHorizAlign,
@@ -273,10 +315,10 @@ export default function autoAlign(options) {
             : 0;
         const content = (
           <Cmp
-            align={align.split('-')[0]}
-            vertAlign={vertAlign.split('-')[0]}
-            ref={(cmp) => (this.content = cmp)}
-            {...pprops}
+            align={align.split('-')[0] as InjectedProps['align']}
+            vertAlign={vertAlign.split('-')[0] as InjectedProps['vertAlign']}
+            ref={(cmp: any) => (this.content = cmp)}
+            {...pprops as TOriginalProps}
           >
             {children}
           </Cmp>
@@ -301,4 +343,5 @@ export default function autoAlign(options) {
         );
       }
     };
+  };
 }

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 { Icon } from './Icon';
+import { Spinner } from './Spinner';
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
@@ -16,7 +16,8 @@ export type ButtonType =
   | 'icon-inverse'
   | 'icon-more'
   | 'icon-border'
-  | 'icon-border-filled';
+  | 'icon-border-filled'
+  | 'icon-border-inverse';
 
 const ICON_SIZES = ['x-small', 'small', 'medium', 'large'] as const;
 const ICON_ALIGNS = ['left', 'right'] as const;
@@ -42,21 +43,15 @@ export type ButtonProps = {
   iconMore?: string;
   iconMoreSize?: ButtonIconMoreSize;
   onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  buttonRef?: (node?: HTMLButtonElement) => void;
-};
+  buttonRef?: (node: HTMLButtonElement) => void;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'>;
 
-export class Button extends Component<
-  ButtonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'>,
-  {}
-> {
-  // eslint-disable-next-line react/sort-comp
-  private node: HTMLButtonElement | null;
+export class Button extends Component<ButtonProps, {}> {
+  node: HTMLButtonElement | null = null;
 
   constructor(props: Readonly<ButtonProps>) {
     super(props);
 
-    this.node = null;
-
     this.onClick = this.onClick.bind(this);
   }
 
@@ -74,7 +69,7 @@ export class Button extends Component<
     const inverse = inv || /-?inverse$/.test(type || '');
     return (
       <ButtonIcon
-        icon={icon}
+        icon={icon!}
         align={iconAlign}
         size={iconSize}
         inverse={inverse}
@@ -87,7 +82,7 @@ export class Button extends Component<
     const adjoining = icon && (iconAlign === 'right' || !(label || children));
     const iconMoreSize =
       this.props.iconMoreSize || adjoining ? 'x-small' : 'small';
-    return <ButtonIcon icon={iconMore} align='right' size={iconMoreSize} />;
+    return <ButtonIcon icon={iconMore!} align='right' size={iconMoreSize} />;
   }
 
   render() {
@@ -146,7 +141,7 @@ export class Button extends Component<
 
 export type ButtonIconProps = {
   className?: string;
-  icon?: string;
+  icon: string;
   align?: ButtonIconAlign;
   size?: ButtonIconSize;
   inverse?: boolean;
@@ -176,13 +171,13 @@ export const ButtonIcon: React.FC<ButtonIconProps> = ({
     inverseClassName,
     className
   );
-  const iconStyle = { ...style, pointerEvents: 'none' };
   return (
     <Icon
       className={iconClassNames}
       icon={icon}
       textColor={null}
-      style={iconStyle}
+      pointerEvents='none'
+      style={style}
       {...props}
     />
   );