Skip to content

Commit

Permalink
[PLAY-1083] Linter implementation: Kits F - J (#3021)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
thestephenmarshall authored Jan 22, 2024
1 parent 6a8f9ff commit f53e0c0
Show file tree
Hide file tree
Showing 11 changed files with 87 additions and 63 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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,
Expand All @@ -41,7 +42,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
horizontal,
htmlOptions = {},
multiLine = false,
onClose = () => { },
onClose = () => undefined,
open = true,
status = "neutral",
text,
Expand All @@ -65,7 +66,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
onClose();
}, autoClose);
}
}
};

useEffect(() => {
toggleToast(open);
Expand All @@ -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>
)}
Expand Down
8 changes: 4 additions & 4 deletions playbook/app/pb_kits/playbook/pb_flex/_flex.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)},
Expand All @@ -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,
Expand All @@ -45,7 +45,7 @@ const Flex = (props: FlexProps) => {
wrap = false,
alignSelf = 'none',
} = props

const orientationClass =
orientation !== undefined ? `orientation_${orientation}` : ''
const justifyClass =
Expand Down
5 changes: 3 additions & 2 deletions playbook/app/pb_kits/playbook/pb_form_group/_form_group.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
11 changes: 7 additions & 4 deletions playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '',
Expand All @@ -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
Expand Down
20 changes: 10 additions & 10 deletions playbook/app/pb_kits/playbook/pb_gauge/_gauge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 = {},
Expand All @@ -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);
Expand All @@ -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;
Expand Down Expand Up @@ -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}
/>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand All @@ -28,7 +29,7 @@ type HomeAddressStreetProps = {
territory: string,
}

const HomeAddressStreet = (props: HomeAddressStreetProps) => {
const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement => {
const {
address,
addressCont,
Expand Down Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)},
Expand All @@ -34,7 +35,7 @@ type IconStatValueProps = {
| "green",
}

const IconStatValue = (props: IconStatValueProps) => {
const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
const {
aria = {},
className,
Expand Down
5 changes: 3 additions & 2 deletions playbook/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {},
Expand Down
1 change: 1 addition & 0 deletions playbook/app/pb_kits/playbook/types/base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
1 change: 1 addition & 0 deletions playbook/app/pb_kits/playbook/types/data.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export type GenericObject = Record<string, unknown>
1 change: 1 addition & 0 deletions playbook/app/pb_kits/playbook/types/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export * from './base'
export * from './colors'
export * from './data'
export * from './display'
export * from './sizes'
export * from './spacing'

0 comments on commit f53e0c0

Please sign in to comment.