fix: remove hardcoded babel parser from prettier so prettier can determine which parse to use from eslint rules

Author: clairep94

.prettierrc

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

client/common/Button.tsx

@@ -5,88 +5,87 @@ import { remSize, prop } from '../theme';
 
 const kinds = {
   primary: 'primary',
-  secondary:'secondary'
-// eslint-disable-next-line prettier/prettier
+  secondary: 'secondary'
 } as const;
 
-type Kind = keyof typeof kinds
+type Kind = keyof typeof kinds;
 
 const displays = {
   block: 'block',
   inline: 'inline'
 } as const;
 
-type Display = keyof typeof displays
+type Display = keyof typeof displays;
 
 type StyledButtonProps = {
-  kind: Kind,
-  display: Display
-}
+  kind: Kind;
+  display: Display;
+};
 
 const buttonTypes = {
   button: 'button',
   submit: 'submit'
 } as const;
 
-type ButtonType = keyof typeof buttonTypes
+type ButtonType = keyof typeof buttonTypes;
 
 type SharedButtonProps = {
-    /**
+  /**
    * The visible part of the button, telling the user what
    * the action is
    */
-    children?: React.ReactNode,
-    /**
+  children?: React.ReactNode;
+  /**
       If the button can be activated or not
     */
-    disabled?: boolean,
-    /**
-     * The display type of the button—inline or block
-     */
-    display?: Display,
-    /**
-     * 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?: Kind,
-    /**
-     * Specifying an href will use an <a> to link to the URL
-     */
-    href?: string | null,
-    /**
-     * An ARIA Label used for accessibility
-     */
-    'aria-label'?: string | null,
-    /**
-     * Specifying a to URL will use a react-router Link
-     */
-    to?: string | null,
-    /**
-     * If using a button, then type is defines the type of button
-     */
-    type?: ButtonType,
-    /**
-     * 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'
-}
+  disabled?: boolean;
+  /**
+   * The display type of the button—inline or block
+   */
+  display?: Display;
+  /**
+   * 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?: Kind;
+  /**
+   * Specifying an href will use an <a> to link to the URL
+   */
+  href?: string | null;
+  /**
+   * An ARIA Label used for accessibility
+   */
+  'aria-label'?: string | null;
+  /**
+   * Specifying a to URL will use a react-router Link
+   */
+  to?: string | null;
+  /**
+   * If using a button, then type is defines the type of button
+   */
+  type?: ButtonType;
+  /**
+   * 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';
+};
 
 export type ButtonProps = SharedButtonProps &
-React.ButtonHTMLAttributes<HTMLButtonElement> &
-React.AnchorHTMLAttributes<HTMLAnchorElement> &
-Partial<LinkProps>;
+  React.ButtonHTMLAttributes<HTMLButtonElement> &
+  React.AnchorHTMLAttributes<HTMLAnchorElement> &
+  Partial<LinkProps>;
 
 // The '&&&' will increase the specificity of the
 // component's CSS so that it overrides the more
@@ -205,7 +204,9 @@ const Button = ({
       {iconAfter}
     </>
   );
-  const StyledComponent: React.ElementType = iconOnly ? StyledInlineButton : StyledButton;
+  const StyledComponent: React.ElementType = iconOnly
+    ? StyledInlineButton
+    : StyledButton;
 
   if (href) {
     return (

client/common/ButtonOrLink.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-
 /**
  * Accepts all the props of an HTML <a> or <button> tag.
  */
@@ -12,27 +11,37 @@ export type ButtonOrLinkProps = {
    * Internal links will use react-router.
    * External links should start with 'http' or 'https' and will open in a new window.
    */
-  href?: string,
-  isDisabled?: boolean,
+  href?: string;
+  isDisabled?: boolean;
   /**
    * Content of the button/link.
    * Can be either a string or a complex element.
    */
-  children: React.ReactNode,
-  onClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+  children: React.ReactNode;
+  onClick?: (
+    e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+  ) => void;
 };
 
-export type Ref = HTMLAnchorElement | HTMLButtonElement
+export type Ref = HTMLAnchorElement | HTMLButtonElement;
 
 /**
  * Helper for switching between <button>, <a>, and <Link>
  */
 const ButtonOrLink = React.forwardRef(
   (
-    { href, children, isDisabled = false, onClick, ...props }: ButtonOrLinkProps, 
+    {
+      href,
+      children,
+      isDisabled = false,
+      onClick,
+      ...props
+    }: ButtonOrLinkProps,
     ref: React.Ref<Ref>
   ) => {
-    const handleClick = (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {
+    const handleClick = (
+      e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+    ) => {
       if (isDisabled) {
         e.preventDefault();
         e.stopPropagation();
@@ -47,7 +56,6 @@ const ButtonOrLink = React.forwardRef(
       if (href.startsWith('http')) {
         return (
           <a
-            // eslint-disable-next-line prettier/prettier -- not able to parse 'as' for some reason
             ref={ref as React.Ref<HTMLAnchorElement>}
             href={href}
             target="_blank"

client/common/IconButton.tsx

@@ -12,14 +12,14 @@ const ButtonWrapper = styled(Button)`
 `;
 
 export type IconProps = {
-  'aria-label'?: string
+  'aria-label'?: string;
 };
 
 export type IconButtonProps = Omit<
   ButtonProps,
   'iconBefore' | 'display' | 'focusable'
 > & {
-  icon?: ComponentType<IconProps> | null
+  icon?: ComponentType<IconProps> | null;
 };
 
 const IconButton = ({ icon: Icon, ...otherProps }: IconButtonProps) => (

client/common/RouterTab.tsx

@@ -2,8 +2,8 @@ import React, { ReactNode } from 'react';
 import { NavLink } from 'react-router-dom';
 
 export type TabProps = {
-  children: ReactNode,
-  to: string
+  children: ReactNode;
+  to: string;
 };
 /**
  * Wraps the react-router `NavLink` with dashboard-header__tab styling.

client/common/usePrevious.ts

@@ -7,7 +7,6 @@ import { useEffect, useRef } from 'react';
  * @returns The previous value before the current render, or undefined if none.
  */
 export default function usePrevious(value: number): number | undefined {
-  // eslint-disable-next-line prettier/prettier
   const ref = useRef<number>();
 
   useEffect(() => {

client/components/SkipLink.tsx

@@ -3,8 +3,8 @@ import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
 type SkipLinkProps = {
-  targetId: string,
-  text: string
+  targetId: string;
+  text: string;
 };
 
 const SkipLink = ({ targetId, text }: SkipLinkProps) => {