[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.
powerhome · Jan 22, 2024 · f53e0c0 · f53e0c0
1 parent 6a8f9ff
commit f53e0c0
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 63 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx b/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>
       )}

diff --git a/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx b/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 =

diff --git a/playbook/app/pb_kits/playbook/pb_form_group/_form_group.tsx b/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,

diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx b/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

diff --git a/playbook/app/pb_kits/playbook/pb_gauge/_gauge.tsx b/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}
     />
   );
 };

diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx b/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"

diff --git a/playbook/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx b/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,

diff --git a/playbook/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx b/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 = {},

diff --git a/playbook/app/pb_kits/playbook/types/base.ts b/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
diff --git a/playbook/app/pb_kits/playbook/types/data.ts b/playbook/app/pb_kits/playbook/types/data.ts
@@ -0,0 +1 @@
+export type GenericObject = Record<string, unknown>
diff --git a/playbook/app/pb_kits/playbook/types/index.ts b/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'