pr05 Typescript Migration #5: Migrate client/common folder

.eslintrc

@@ -29,6 +29,7 @@
         "tsx": "never"
       }
     ],
+    "import/prefer-default-export": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }],
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
     "default-param-last": 0,
@@ -131,7 +132,12 @@
       "rules": {
         "no-use-before-define": "off",
         "import/no-extraneous-dependencies": "off",
-        "no-unused-vars": "off"
+        "no-unused-vars": "off",
+        "import/no-default-export": "warn",
+        "no-underscore-dangle": "warn",
+        "react/require-default-props": "off",
+        "no-shadow": "off",
+        "@typescript-eslint/no-shadow": "error"
       }
     },
     {

.prettierrc

@@ -5,7 +5,6 @@
   "insertPragma": false,
   "jsxBracketSameLine": false,
   "jsxSingleQuote": false,
-  "parser": "babel",
   "printWidth": 80,
   "proseWrap": "never",
   "requirePragma": false,

client/common/Button.stories.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 
-import Button from './Button';
+import { Button } from './Button';
 import { GithubIcon, DropdownArrowIcon, PlusIcon } from './icons';
 
 export default {

client/common/Button.test.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { render, screen, fireEvent } from '../test-utils';
+import { Button } from './Button';
+
+const MockIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg data-testid="mock-icon" {...props} />
+);
+
+describe('Button', () => {
+  // Tag
+  it('renders as an anchor when href is provided', () => {
+    render(<Button href="https://example.com">Link</Button>);
+    const anchor = screen.getByRole('link');
+    expect(anchor.tagName.toLowerCase()).toBe('a');
+    expect(anchor).toHaveAttribute('href', 'https://example.com');
+  });
+
+  it('renders as a React Router <Link> when `to` is provided', () => {
+    render(<Button to="/dashboard">Go</Button>);
+    const link = screen.getByRole('link');
+    expect(link.tagName.toLowerCase()).toBe('a'); // Link renders as <a>
+    expect(link).toHaveAttribute('href', '/dashboard');
+  });
+
+  it('renders as a <button> with a type of "button" by default', () => {
+    render(<Button>Click Me</Button>);
+    const el = screen.getByRole('button');
+    expect(el.tagName.toLowerCase()).toBe('button');
+    expect(el).toHaveAttribute('type', 'button');
+  });
+
+  // Children & Icons
+  it('renders children', () => {
+    render(<Button>Click Me</Button>);
+    expect(screen.getByText('Click Me')).toBeInTheDocument();
+  });
+
+  it('renders an iconBefore and button text', () => {
+    render(
+      <Button iconBefore={<MockIcon aria-label="iconbefore" />}>
+        This has a before icon
+      </Button>
+    );
+    expect(screen.getByLabelText('iconbefore')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveTextContent(
+      'This has a before icon'
+    );
+  });
+
+  it('renders with iconAfter', () => {
+    render(
+      <Button iconAfter={<MockIcon aria-label="iconafter" />}>
+        This has an after icon
+      </Button>
+    );
+    expect(screen.getByLabelText('iconafter')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveTextContent(
+      'This has an after icon'
+    );
+  });
+
+  it('renders only the icon if iconOnly', () => {
+    render(
+      <Button iconAfter={<MockIcon aria-label="iconafter" />} iconOnly>
+        This has an after icon
+      </Button>
+    );
+    expect(screen.getByLabelText('iconafter')).toBeInTheDocument();
+    expect(screen.getByRole('button')).not.toHaveTextContent(
+      'This has an after icon'
+    );
+  });
+
+  // HTML attributes
+  it('calls onClick handler when clicked', () => {
+    const handleClick = jest.fn();
+    render(<Button onClick={handleClick}>Click</Button>);
+    fireEvent.click(screen.getByText('Click'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders disabled state', () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('uses aria-label when provided', () => {
+    render(<Button aria-label="Upload" iconOnly />);
+    expect(screen.getByLabelText('Upload')).toBeInTheDocument();
+  });
+});

client/common/Button.jsx → client/common/Button.tsx

@@ -1,28 +1,93 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
-
 import { remSize, prop } from '../theme';
 
-const kinds = {
-  primary: 'primary',
-  secondary: 'secondary'
-};
+enum Kinds {
+  primary = 'primary',
+  secondary = 'secondary'
+}
 
-const displays = {
-  block: 'block',
-  inline: 'inline'
-};
+enum Displays {
+  block = 'block',
+  inline = 'inline'
+}
+
+enum ButtonTypes {
+  button = 'button',
+  submit = 'submit'
+}
+
+export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * The visible part of the button, telling the user what
+   * the action is
+   */
+  children?: React.ReactNode;
+  /**
+      If the button can be activated or not
+    */
+  disabled?: boolean;
+  /**
+   * The display type of the button—inline or block
+   */
+  display?: Displays;
+  /**
+   * SVG icon to place after child content
+   */
+  iconAfter?: React.ReactNode;
+  /**
+   * SVG icon to place before child content
+   */
+  iconBefore?: React.ReactNode;
+  /**
+   * If the button content is only an SVG icon
+   */
+  iconOnly?: boolean;
+  /**
+   * The kind of button - determines how it appears visually
+   */
+  kind?: Kinds;
+  /**
+   * Specifying an href will use an <a> to link to the URL
+   */
+  href?: string;
+  /**
+   * An ARIA Label used for accessibility
+   */
+  'aria-label'?: string;
+  /**
+   * Specifying a to URL will use a react-router Link
+   */
+  to?: string;
+  /**
+   * If using a native button, specifies on an onClick action
+   */
+  onClick?: () => void;
+  /**
+   * If using a button, then type is defines the type of button
+   */
+  type?: ButtonTypes;
+  /**
+   * Allows for IconButton to pass `focusable="false"` as a prop for SVGs.
+   * See @types/react > interface SVGAttributes<T> extends AriaAttributes, DOMAttributes<T>
+   */
+  focusable?: boolean | 'true' | 'false';
+}
+
+interface StyledButtonProps extends ButtonProps {
+  kind: Kinds;
+  display: Displays;
+}
 
 // The '&&&' will increase the specificity of the
 // component's CSS so that it overrides the more
 // general global styles
-const StyledButton = styled.button`
+const StyledButton = styled.button<StyledButtonProps>`
   &&& {
     font-weight: bold;
     display: ${({ display }) =>
-      display === displays.inline ? 'inline-flex' : 'flex'};
+      display === Displays.inline ? 'inline-flex' : 'flex'};
     justify-content: center;
     align-items: center;
 
@@ -109,35 +174,37 @@ const StyledInlineButton = styled.button`
 `;
 
 /**
- * A Button performs an primary action
+ * Renders a component with a button appearance, but which is:
+ *  - External anchor link if passed a `href`
+ *  - Internal React Router link if passed a `to`
+ *  - Default: Native Button
  */
-const Button = ({
-  children,
-  display,
+export const Button = ({
+  children = null,
+  display = Displays.block,
   href,
-  kind,
-  iconBefore,
-  iconAfter,
-  iconOnly,
+  kind = Kinds.primary,
+  iconBefore = null,
+  iconAfter = null,
+  iconOnly = false,
   'aria-label': ariaLabel,
   to,
-  type,
+  type = ButtonTypes.button,
   ...props
-}) => {
+}: ButtonProps) => {
   const hasChildren = React.Children.count(children) > 0;
   const content = (
     <>
       {iconBefore}
-      {hasChildren && <span>{children}</span>}
+      {hasChildren && !iconOnly && <span>{children}</span>}
       {iconAfter}
     </>
   );
-  let StyledComponent = StyledButton;
-
-  if (iconOnly) {
-    StyledComponent = StyledInlineButton;
-  }
+  const StyledComponent: React.ElementType = iconOnly
+    ? StyledInlineButton
+    : StyledButton;
 
+  // Anchor Link
   if (href) {
     return (
       <StyledComponent
@@ -153,6 +220,7 @@ const Button = ({
     );
   }
 
+  // Internal React Router Link
   if (to) {
     return (
       <StyledComponent
@@ -168,6 +236,7 @@ const Button = ({
     );
   }
 
+  // Native Button
   return (
     <StyledComponent
       kind={kind}
@@ -181,69 +250,5 @@ const Button = ({
   );
 };
 
-Button.defaultProps = {
-  children: null,
-  disabled: false,
-  display: displays.block,
-  iconAfter: null,
-  iconBefore: null,
-  iconOnly: false,
-  kind: kinds.primary,
-  href: null,
-  'aria-label': null,
-  to: null,
-  type: 'button'
-};
-
-Button.kinds = kinds;
-Button.displays = displays;
-
-Button.propTypes = {
-  /**
-   * The visible part of the button, telling the user what
-   * the action is
-   */
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-  /**
-    If the button can be activated or not
-  */
-  disabled: PropTypes.bool,
-  /**
-   * The display type of the button—inline or block
-   */
-  display: PropTypes.oneOf(Object.values(displays)),
-  /**
-   * SVG icon to place after child content
-   */
-  iconAfter: PropTypes.element,
-  /**
-   * SVG icon to place before child content
-   */
-  iconBefore: PropTypes.element,
-  /**
-   * If the button content is only an SVG icon
-   */
-  iconOnly: PropTypes.bool,
-  /**
-   * The kind of button - determines how it appears visually
-   */
-  kind: PropTypes.oneOf(Object.values(kinds)),
-  /**
-   * Specifying an href will use an <a> to link to the URL
-   */
-  href: PropTypes.string,
-  /**
-   * An ARIA Label used for accessibility
-   */
-  'aria-label': PropTypes.string,
-  /**
-   * Specifying a to URL will use a react-router Link
-   */
-  to: PropTypes.string,
-  /**
-   * If using a button, then type is defines the type of button
-   */
-  type: PropTypes.oneOf(['button', 'submit'])
-};
-
-export default Button;
+Button.kinds = Kinds;
+Button.displays = Displays;

client/common/ButtonOrLink.test.jsx → client/common/ButtonOrLink.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor, history } from '../test-utils';
-import ButtonOrLink from './ButtonOrLink';
+import { ButtonOrLink } from './ButtonOrLink';
 
 describe('ButtonOrLink', () => {
   const clickHandler = jest.fn();