[PLAY-1083] Linter implementation: Kits F - J (#3021)

https://nitro.powerhrg.com/runway/backlog_items/PLAY-1083

**What does this PR do?** A clear and concise description with your
runway ticket url.

**Task**
Run our new linter on kits that start with F - J.

**Because**
We've implemented a linter config, but most/all of our library files are
still failing its ruleset. We need to update all kits in groups to
eventually clean up the entire library to confirm with the new linter
configs.

**Note**

I also fixed as many warning as I could.

N/A

💻 `yarn run eslint --quiet
"./playbook/app/pb_kits/playbook/{pb_f,pb_g,pb_h,pb_i}*/**/*.{js,ts,tsx,jsx}"`

```
yarn run v1.22.15
$ /Users/stephen.marshall/code/playbook/node_modules/.bin/eslint --quiet './playbook/app/pb_kits/playbook/{pb_f,pb_g,pb_h,pb_i}*/**/*.{js,ts,tsx,jsx}'

/Users/stephen.marshall/code/playbook/playbook/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx
  44:21  error  Unexpected empty arrow function                           @typescript-eslint/no-empty-function
  83:30  error  Prop `onClick` must be placed on a new line               react/jsx-max-props-per-line
  84:46  error  Prop `fixedWidth` must be placed on a new line            react/jsx-max-props-per-line
  90:17  error  Expected indentation of 18 space characters but found 16  react/jsx-indent-props
  91:17  error  Expected indentation of 18 space characters but found 16  react/jsx-indent-props
  92:17  error  Expected indentation of 18 space characters but found 16  react/jsx-indent-props
  98:39  error  Prop `cursor` must be placed on a new line                react/jsx-max-props-per-line

/Users/stephen.marshall/code/playbook/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx
  10:10  error  Don't use `object` as a type. The `object` type is currently hard to use ([see this issue](microsoft/TypeScript#21732)).
Consider using `Record<string, unknown>` instead, as it allows you to more easily inspect and use the keys  @typescript-eslint/ban-types

/Users/stephen.marshall/code/playbook/playbook/app/pb_kits/playbook/pb_form_group/_form_group.tsx
  10:10  error  Don't use `object` as a type. The `object` type is currently hard to use ([see this issue](microsoft/TypeScript#21732)).
Consider using `Record<string, unknown>` instead, as it allows you to more easily inspect and use the keys  @typescript-eslint/ban-types

/Users/stephen.marshall/code/playbook/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx
  34:21  error  Unexpected empty arrow function         @typescript-eslint/no-empty-function
  51:26  error  Prop `id` must be placed on a new line  react/jsx-max-props-per-line

/Users/stephen.marshall/code/playbook/playbook/app/pb_kits/playbook/pb_gauge/_gauge.tsx
   20:10  error  Don't use `Boolean` as a type. Use boolean instead      @typescript-eslint/ban-types
  193:7   error  Expected indentation of 8 space characters but found 6  react/jsx-indent-props
  200:7   error  Expected indentation of 8 space characters but found 6  react/jsx-indent-props
  201:7   error  Expected indentation of 8 space characters but found 6  react/jsx-indent-props

/Users/stephen.marshall/code/playbook/playbook/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx
  66:7  error  Expected indentation of 8 space characters but found 6  react/jsx-indent-props
  67:7  error  Expected indentation of 8 space characters but found 6  react/jsx-indent-props
  68:7  error  Expected indentation of 8 space characters but found 6  react/jsx-indent-props
  69:7  error  Expected indentation of 8 space characters but found 6  react/jsx-indent-props

/Users/stephen.marshall/code/playbook/playbook/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx
  16:10  error  Don't use `object` as a type. The `object` type is currently hard to use ([see this issue](microsoft/TypeScript#21732)).
Consider using `Record<string, unknown>` instead, as it allows you to more easily inspect and use the keys  @typescript-eslint/ban-types

/Users/stephen.marshall/code/playbook/playbook/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx
  15:10  error  Don't use `object` as a type. The `object` type is currently hard to use ([see this issue](microsoft/TypeScript#21732)).
Consider using `Record<string, unknown>` instead, as it allows you to more easily inspect and use the keys  @typescript-eslint/ban-types

✖ 21 problems (21 errors, 0 warnings)
  15 errors and 0 warnings potentially fixable with the `--fix` option.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [x] **TESTS** I have added test coverage to my code.

Author: thestephenmarshall

playbook/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -2,7 +2,8 @@ import React, { useEffect, useState } from "react";
 import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
-import { buildHtmlProps } from '../utilities/props'
+import { buildHtmlProps } from "../utilities/props";
+import { VoidCallback } from "../types";
 
 import Icon from "../pb_icon/_icon";
 import Title from "../pb_title/_title";
@@ -15,23 +16,23 @@ const iconMap = {
 };
 
 type FixedConfirmationToastProps = {
-  autoClose?: number,
-  children?: React.ReactChild[] | React.ReactChild,
-  className?: string,
-  closeable?: boolean,
-  data?: string,
-  horizontal?: "right" | "left" | "center",
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string,
-  multiLine?: boolean,
-  onClose?: () => void,
-  open?: boolean,
-  status?: "success" | "error" | "neutral" | "tip",
-  text?: string,
-  vertical?: "top" | "bottom",
-}
+  autoClose?: number;
+  children?: React.ReactChild[] | React.ReactChild;
+  className?: string;
+  closeable?: boolean;
+  data?: string;
+  horizontal?: "right" | "left" | "center";
+  htmlOptions?: { [key: string]: string | number | boolean | (VoidCallback) };
+  id?: string;
+  multiLine?: boolean;
+  onClose?: VoidCallback;
+  open?: boolean;
+  status?: "success" | "error" | "neutral" | "tip";
+  text?: string;
+  vertical?: "top" | "bottom";
+};
 
-const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
+const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
   const [showToast, toggleToast] = useState(true);
   const {
     autoClose = 0,
@@ -41,7 +42,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
     horizontal,
     htmlOptions = {},
     multiLine = false,
-    onClose = () => { },
+    onClose = () => undefined,
     open = true,
     status = "neutral",
     text,
@@ -65,7 +66,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
         onClose();
       }, autoClose);
     }
-  }
+  };
 
   useEffect(() => {
     toggleToast(open);
@@ -80,22 +81,35 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   return (
     <>
       {showToast && (
-        <div className={css} onClick={handleClick} {...htmlProps}>
-          {icon && <Icon className="pb_icon" fixedWidth icon={icon} />}
+        <div
+            className={css}
+            onClick={handleClick}
+            {...htmlProps}
+        >
+          {icon && (
+            <Icon
+                className="pb_icon"
+                fixedWidth
+                icon={icon}
+            />
+          )}
 
-          {
-            children && children ||
-            text && (
+          {(children && children) ||
+            (text && (
               <Title
-                className="pb_fixed_confirmation_toast_text"
-                size={4}
-                text={text}
+                  className="pb_fixed_confirmation_toast_text"
+                  size={4}
+                  text={text}
               />
-            )
-          }
+            ))}
 
           {closeable && (
-            <Icon className="pb_icon" cursor="pointer" fixedWidth={false} icon="times" />
+            <Icon
+                className="pb_icon"
+                cursor="pointer"
+                fixedWidth={false}
+                icon="times"
+            />
           )}
         </div>
       )}

playbook/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -2,12 +2,12 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
-import { Sizes } from '../types'
+import { GenericObject, Sizes } from '../types'
 
 type FlexProps = {
   children: React.ReactChild[] | React.ReactNode,
   className?: string,
-  data?: object,
+  data?: GenericObject,
   horizontal?: "left" | "center" | "right" | "stretch" | "none",
   justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -25,7 +25,7 @@ type FlexProps = {
   alignSelf?: "start" | "end" | "center" | "stretch" | "none"
 } & GlobalProps
 
-const Flex = (props: FlexProps) => {
+const Flex = (props: FlexProps): React.ReactElement => {
   const {
     align = 'none',
     children,
@@ -45,7 +45,7 @@ const Flex = (props: FlexProps) => {
     wrap = false,
     alignSelf = 'none',
   } = props
-  
+
   const orientationClass =
     orientation !== undefined ? `orientation_${orientation}` : ''
   const justifyClass =

playbook/app/pb_kits/playbook/pb_form_group/_form_group.tsx

@@ -2,18 +2,19 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GenericObject } from '../types'
 
 type FormGroupProps = {
   aria?: {[key: string]: string},
   children?: Node,
   className?: string,
-  data?: object,
+  data?: GenericObject,
   fullWidth?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
 }
 
-const FormGroup = (props: FormGroupProps) => {
+const FormGroup = (props: FormGroupProps): React.ReactElement => {
   const {
     aria = {},
     className,

playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -22,16 +22,16 @@ type FormPillProps = {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
     onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
-  }, 
+  },
 } & GlobalProps
-const FormPill = (props: FormPillProps) => {
+const FormPill = (props: FormPillProps): React.ReactElement => {
   const {
     className,
     htmlOptions = {},
     id,
     text,
     name,
-    onClick = () => {},
+    onClick = () => undefined,
     avatarUrl,
     closeProps = {},
     size = '',
@@ -48,7 +48,10 @@ const FormPill = (props: FormPillProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
-    <div className={css} id={id} {...htmlProps}>
+    <div className={css}
+        id={id}
+        {...htmlProps}
+    >
         {name &&
         <>
         <Avatar

playbook/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -12,12 +12,13 @@ import typography from "../tokens/exports/_typography.scss";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import { GenericObject } from "../types";
 
 type GaugeProps = {
   aria: { [key: string]: string };
   className?: string;
   chartData?: { name: string; value: number[] | number }[];
-  dark?: Boolean;
+  dark?: boolean;
   data?: { [key: string]: string };
   disableAnimation?: boolean;
   fullCircle?: boolean;
@@ -33,13 +34,12 @@ type GaugeProps = {
   title?: string;
   tooltipHtml?: string;
   colors: string[];
-  minorTickInterval: any;
+  minorTickInterval?: number;
   circumference: number[];
 };
 
 const Gauge = ({
   aria = {},
-  className,
   chartData,
   dark = false,
   data = {},
@@ -61,9 +61,9 @@ const Gauge = ({
   minorTickInterval = null,
   circumference = fullCircle ? [0, 360] : [-100, 100],
   ...props
-}: GaugeProps) => {
+}: GaugeProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
- const dataProps = buildDataProps(data)
+  const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);
   highchartsMore(Highcharts);
   solidGauge(Highcharts);
@@ -89,7 +89,7 @@ const Gauge = ({
   const [options, setOptions] = useState({});
 
   useEffect(() => {
-    const formattedChartData = chartData.map((obj: any) => {
+    const formattedChartData = chartData.map((obj: GenericObject) => {
       obj.y = obj.value;
       delete obj.value;
       return obj;
@@ -185,20 +185,20 @@ const Gauge = ({
         .querySelectorAll(".fix")
         .forEach((fix) => fix.setAttribute("y", "38"));
     }
-
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chartData]);
 
   return (
     <HighchartsReact
-      containerProps={{
+        containerProps={{
         className: classnames(css, globalProps(props)),
         id: id,
         ...ariaProps,
         ...dataProps,
         ...htmlProps,
       }}
-      highcharts={Highcharts}
-      options={options}
+        highcharts={Highcharts}
+        options={options}
     />
   );
 };

playbook/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -8,6 +8,7 @@ import Body from '../pb_body/_body'
 import Hashtag from '../pb_hashtag/_hashtag'
 import Title from '../pb_title/_title'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { GenericObject } from '../types'
 
 type HomeAddressStreetProps = {
   aria?: { [key: string]: string },
@@ -28,7 +29,7 @@ type HomeAddressStreetProps = {
   territory: string,
 }
 
-const HomeAddressStreet = (props: HomeAddressStreetProps) => {
+const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement => {
   const {
     address,
     addressCont,
@@ -58,17 +59,17 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
       className
     )
 
-  const dataProps: { [key: string]: any } = buildDataProps(data)
-  const ariaProps: { [key: string]: any } = buildAriaProps(aria)
+  const dataProps: GenericObject = buildDataProps(data)
+  const ariaProps: GenericObject = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions)
   return (
-    <div 
-      className={classes(className, dark)} 
-      {...ariaProps} 
-      {...dataProps}
-      {...htmlProps}
+    <div
+        className={classes(className, dark)}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
     >
-      {emphasis == 'street' && 
+      {emphasis == 'street' &&
         <div>
           <Title
               className="pb_home_address_street_address"

playbook/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -9,11 +9,12 @@ import Caption from '../pb_caption/_caption'
 import Flex from '../pb_flex/_flex'
 import IconCircle from '../pb_icon_circle/_icon_circle'
 import Title from '../pb_title/_title'
+import { GenericObject } from '../types'
 
 type IconStatValueProps = {
   aria?: { [key: string]: string },
   className?: string,
-  data?: object,
+  data?: GenericObject,
   dark?: boolean,
   icon: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -34,7 +35,7 @@ type IconStatValueProps = {
     | "green",
 }
 
-const IconStatValue = (props: IconStatValueProps) => {
+const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
   const {
     aria = {},
     className,

playbook/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx

@@ -6,20 +6,21 @@ import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
+import { GenericObject } from '../types'
 
 type IconValueProps = {
   align?: "left" | "center" | "right",
   aria?: { [key: string]: string; },
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: GenericObject,
   icon: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text: string,
 }
 
-const IconValue = (props: IconValueProps) => {
+const IconValue = (props: IconValueProps): React.ReactElement => {
   const {
     align = 'left',
     aria = {},

playbook/app/pb_kits/playbook/types/base.ts

@@ -4,6 +4,7 @@ import { SyntheticEvent } from "react"
 export const BitValues = [0, 1] as const
 export type Binary = typeof BitValues[number]
 export type Callback<T, K> = (arg: T) => K
+export type VoidCallback = () => void
 export type EmptyObject = Record<string, unknown>
 export type InputCallback<T> = Callback<SyntheticEvent<T>, void>
 export type Noop = () => void

playbook/app/pb_kits/playbook/types/data.ts

@@ -0,0 +1 @@
+export type GenericObject = Record<string, unknown>

playbook/app/pb_kits/playbook/types/index.ts

@@ -1,5 +1,6 @@
 export * from './base'
 export * from './colors'
+export * from './data'
 export * from './display'
 export * from './sizes'
 export * from './spacing'