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 index 4d6d7e4dfa..db449c2414 100644 --- 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 && ( -
- {icon && } +
+ {icon && ( + + )} - { - children && children || - text && ( + {(children && children) || + (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 index 03b1ab9e77..c5cf508b1d 100644 --- 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 index b84da1d86f..2bc2944875 100644 --- 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 index 4016dc130f..107a122abe 100644 --- 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 index 19e226a883..52a953e40e 100644 --- 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 index 27c404a9cf..121e4fe9fc 100644 --- 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 index 276b72272f..af50dba3d4 100644 --- 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 index 29a1c2da73..0a24f873e2 100644 --- 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 index c832f64a87..cf81043972 100644 --- 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 \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/types/data.ts b/playbook/app/pb_kits/playbook/types/data.ts new file mode 100644 index 0000000000..5d4ecf7bf6 --- /dev/null +++ b/playbook/app/pb_kits/playbook/types/data.ts @@ -0,0 +1 @@ +export type GenericObject = Record<string, unknown> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/types/index.ts b/playbook/app/pb_kits/playbook/types/index.ts index 75f7c8e0be..0992e23727 100644 --- 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' \ No newline at end of file