diff --git a/README.md b/README.md index 08d405ccf9..1947f5d0a1 100644 --- a/README.md +++ b/README.md @@ -58,11 +58,7 @@ export default function Hello () { } ``` -Both Base Web and Styletron come with [flow types](https://flow.org/) and [TypeScript](https://www.typescriptlang.org/index.html). All our components are typed and examples have Vanilla, Flow and TypeScript versions. For Styletron + TS, you need to add some additional packages: - -```bash -yarn add @types/styletron-standard @types/styletron-react @types/styletron-engine-atomic -``` +Both Base Web and Styletron come with [flow types](https://flow.org/) and [TypeScript](https://www.typescriptlang.org/index.html). All our components are typed and examples have Vanilla, Flow and TypeScript versions. ## Docs diff --git a/documentation-site/components/yard/action-buttons.tsx b/documentation-site/components/yard/action-buttons.tsx index f16ef1e5e3..7ee698c292 100644 --- a/documentation-site/components/yard/action-buttons.tsx +++ b/documentation-site/components/yard/action-buttons.tsx @@ -64,6 +64,7 @@ const ActionButtons: React.FC<{ }, }, }} + // @ts-ignore href={`/cheat-sheet#${Object.keys(importsConfig)[0].split('/')[1].toLowerCase()}`} kind={KIND.tertiary} > diff --git a/documentation-site/components/yard/ast.ts b/documentation-site/components/yard/ast.ts index 847ffa3652..0aad38f514 100644 --- a/documentation-site/components/yard/ast.ts +++ b/documentation-site/components/yard/ast.ts @@ -38,6 +38,7 @@ export function toggleOverrideSharedProps(code: string, sharedProps: string[]) { path.node.params = [ //@ts-ignore t.objectPattern([ + //@ts-ignore t.objectProperty(t.identifier('$theme'), t.identifier('$theme'), false, true), ]), ]; diff --git a/documentation-site/components/yard/provider.ts b/documentation-site/components/yard/provider.ts index 39de4b1bf0..88853f0cc6 100644 --- a/documentation-site/components/yard/provider.ts +++ b/documentation-site/components/yard/provider.ts @@ -1,6 +1,6 @@ import * as t from '@babel/types'; import traverse from '@babel/traverse'; -import { Theme } from 'baseui/theme'; +import { Theme } from 'baseui'; import { TProvider, getAstJsxElement } from 'react-view'; diff --git a/documentation-site/examples/app-nav-bar/basic.tsx b/documentation-site/examples/app-nav-bar/basic.tsx index d09f095ba8..1e64e425f1 100644 --- a/documentation-site/examples/app-nav-bar/basic.tsx +++ b/documentation-site/examples/app-nav-bar/basic.tsx @@ -6,13 +6,13 @@ import {ChevronDown, Delete, Overflow, Upload} from 'baseui/icon'; import { AppNavBar, setItemActive, - NavItemT, + NavItem, } from 'baseui/app-nav-bar'; export default function Example() { const [css] = useStyletron(); - const [mainItems, setMainItems] = React.useState([ + const [mainItems, setMainItems] = React.useState([ {icon: Upload, label: 'Primary A'}, {icon: Upload, label: 'Primary B'}, { @@ -52,13 +52,13 @@ export default function Example() { const [isNavVisible, setIsNavVisible] = React.useState(false); - function handleMainItemSelect(item: NavItemT) { - setMainItems(prev => setItemActive(prev, item)); + function handleMainItemSelect(item: NavItem) { + setMainItems((prev) => setItemActive(prev, item)); } return ( - {isNavVisible && ( @@ -77,7 +77,7 @@ export default function Example() { mainItems={mainItems} userItems={userItems} onMainItemSelect={handleMainItemSelect} - onUserItemSelect={item => console.log('user', item)} + onUserItemSelect={(item) => console.log('user', item)} username="Umka Marshmallow" usernameSubtitle="5.0" userImgUrl="" diff --git a/documentation-site/examples/app-nav-bar/map-item-to-node.tsx b/documentation-site/examples/app-nav-bar/map-item-to-node.tsx index f482a48571..806dcc51f8 100644 --- a/documentation-site/examples/app-nav-bar/map-item-to-node.tsx +++ b/documentation-site/examples/app-nav-bar/map-item-to-node.tsx @@ -4,13 +4,13 @@ import {useStyletron} from 'baseui'; import { AppNavBar, setItemActive, - NavItemT, + NavItem, } from 'baseui/app-nav-bar'; export default function Example() { const [css] = useStyletron(); - const [mainItems, setMainItems] = React.useState([ + const [mainItems, setMainItems] = React.useState([ {label: 'main one', info: {color: 'blue'}}, {label: 'main two', info: {color: 'red'}}, ]); @@ -20,8 +20,8 @@ export default function Example() { {label: 'user two', info: {color: 'yellow'}}, ]; - function handleMainItemSelect(item: NavItemT) { - setMainItems(prev => setItemActive(prev, item)); + function handleMainItemSelect(item: NavItem) { + setMainItems((prev) => setItemActive(prev, item)); } return ( @@ -29,7 +29,7 @@ export default function Example() { title="Title" mainItems={mainItems} userItems={userItems} - mapItemToNode={item => ( + mapItemToNode={(item) => (
([ + const [mainItems, setMainItems] = React.useState([ {label: 'label', info: {id: 1}}, {label: 'label', info: {id: 2}}, {label: 'label', info: {id: 3}}, {label: 'label', info: {id: 4}}, ]); - function getUniqueIdentifier(item: NavItemT) { + function getUniqueIdentifier(item: NavItem) { if (item.info) { return item.info.id; } return item.label; } - function handleMainItemSelect(item: NavItemT) { - setMainItems(prev => + function handleMainItemSelect(item: NavItem) { + setMainItems((prev) => setItemActive(prev, item, getUniqueIdentifier), ); } diff --git a/documentation-site/examples/aspect-ratio-box/image.tsx b/documentation-site/examples/aspect-ratio-box/image.tsx index 9d96043201..e4e53353d2 100644 --- a/documentation-site/examples/aspect-ratio-box/image.tsx +++ b/documentation-site/examples/aspect-ratio-box/image.tsx @@ -9,6 +9,7 @@ export default function Example() { diff --git a/documentation-site/examples/button/as-an-anchor.tsx b/documentation-site/examples/button/as-an-anchor.tsx index 48e6fd7800..e2d648183b 100644 --- a/documentation-site/examples/button/as-an-anchor.tsx +++ b/documentation-site/examples/button/as-an-anchor.tsx @@ -5,6 +5,8 @@ import {Button} from 'baseui/button'; export default function Example() { return ( + {/* + // @ts-ignore */} diff --git a/documentation-site/examples/data-table/batch-action.tsx b/documentation-site/examples/data-table/batch-action.tsx index 507c03f512..31659998e3 100644 --- a/documentation-site/examples/data-table/batch-action.tsx +++ b/documentation-site/examples/data-table/batch-action.tsx @@ -8,8 +8,8 @@ import { NumericalColumn, StringColumn, NUMERICAL_FORMATS, - BatchActionT, - RowActionT, + BatchAction, + RowAction, } from 'baseui/data-table'; type RowDataT = [ @@ -131,13 +131,13 @@ const initialRows = [ ['X-Men: The Last Stand', false, 'Action', 210, 459, 2.2, 6.8], [`You've Got Mail`, false, 'Drama', 65, 251, 3.9, 6.3], ['Zookeeper', false, 'Romantic Comedy', 80, 170, 2.1, 5.0], -].map(r => ({id: String(r[0]), data: r})); +].map((r) => ({id: String(r[0]), data: r})); export default function Example() { const [rows, setRows] = React.useState(initialRows); function flagRows(ids: Array) { - const nextRows = rows.map(row => { + const nextRows = rows.map((row) => { if (ids.includes(row.id)) { const nextData = [...row.data]; nextData[1] = !nextData[1]; @@ -153,18 +153,18 @@ export default function Example() { } function removeRows(ids: Array) { - const nextRows = rows.filter(row => !ids.includes(row.id)); + const nextRows = rows.filter((row) => !ids.includes(row.id)); setRows(nextRows); } function removeRow(id: string | number) { removeRows([id]); } - const batchActions: BatchActionT[] = [ + const batchActions: BatchAction[] = [ { label: 'Check', onClick: ({selection, clearSelection}) => { - flagRows(selection.map(r => r.id)); + flagRows(selection.map((r) => r.id)); clearSelection(); }, renderIcon: Check, @@ -172,7 +172,7 @@ export default function Example() { { label: 'Remove', onClick: ({selection, clearSelection}) => { - removeRows(selection.map(r => r.id)); + removeRows(selection.map((r) => r.id)); clearSelection(); }, renderIcon: Alert, @@ -183,7 +183,7 @@ export default function Example() { }, ]; - const rowActions: RowActionT[] = [ + const rowActions: RowAction[] = [ { label: 'Check', onClick: ({row}) => flagRow(row.id), diff --git a/documentation-site/examples/file-uploader/_overrides_component.tsx b/documentation-site/examples/file-uploader/_overrides_component.tsx index 19accc5dc5..10d4e457bf 100644 --- a/documentation-site/examples/file-uploader/_overrides_component.tsx +++ b/documentation-site/examples/file-uploader/_overrides_component.tsx @@ -1,12 +1,9 @@ import * as React from 'react'; import {FileUploader} from 'baseui/file-uploader'; -import { - FileUploaderOverrides, - StyleProps, -} from 'baseui/file-uploader'; +import {FileUploaderOverrides} from 'baseui/file-uploader'; export default class Uploader extends React.Component< - {overrides: FileUploaderOverrides}, + {overrides: FileUploaderOverrides}, {progressAmount: number} > { state = {progressAmount: 0}; diff --git a/documentation-site/examples/fixed-marker/badge-enhancer-text.tsx b/documentation-site/examples/fixed-marker/badge-enhancer-text.tsx index 2592050b91..661961aa30 100644 --- a/documentation-site/examples/fixed-marker/badge-enhancer-text.tsx +++ b/documentation-site/examples/fixed-marker/badge-enhancer-text.tsx @@ -8,7 +8,7 @@ export default function Example() { } badgeEnhancerSize={BADGE_ENHANCER_SIZES.mediumText} - badgeEnhancerContent={() => 'New'} + badgeEnhancerContent={() => <>New} overrides={{ BadgeEnhancer: { style: { diff --git a/documentation-site/examples/form-control/validation.tsx b/documentation-site/examples/form-control/validation.tsx index 3d38da7020..2847217e21 100644 --- a/documentation-site/examples/form-control/validation.tsx +++ b/documentation-site/examples/form-control/validation.tsx @@ -26,7 +26,7 @@ export default function Example() { const [isValid, setIsValid] = React.useState(false); const [isVisited, setIsVisited] = React.useState(false); const shouldShowError = !isValid && isVisited; - const onChange = (event: React.FormEvent) => { + const onChange = (event: React.ChangeEvent) => { const {value} = event.currentTarget; setIsValid(validateEmail(value)); setValue(value); diff --git a/documentation-site/examples/icon/list.tsx b/documentation-site/examples/icon/list.tsx index 639f8fdaa7..2d74f0e426 100644 --- a/documentation-site/examples/icon/list.tsx +++ b/documentation-site/examples/icon/list.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import {useStyletron} from 'baseui'; -//@ts-ignore import * as Icons from 'baseui/icon/icon-exports'; function makeImportStatement(key: string) { diff --git a/documentation-site/examples/menu/child-render-all.tsx b/documentation-site/examples/menu/child-render-all.tsx index c61d1813e2..77c9534d39 100644 --- a/documentation-site/examples/menu/child-render-all.tsx +++ b/documentation-site/examples/menu/child-render-all.tsx @@ -45,6 +45,7 @@ export default function Example() { if (item.label === SSR) { return ( { if (item.label === OPEN_RECENT) { return ( + // todo: removed size="compact" console.log(event)} + onChange={(event) => console.log(event)} /> Previous setCurrent(1)}> diff --git a/documentation-site/examples/radio/overrides.tsx b/documentation-site/examples/radio/overrides.tsx index 290ed15df8..09ba81592b 100644 --- a/documentation-site/examples/radio/overrides.tsx +++ b/documentation-site/examples/radio/overrides.tsx @@ -20,7 +20,7 @@ export default function Example() { return ( setValue(e.target.value)} + onChange={(e) => setValue(e.target.value)} value={value} > diff --git a/documentation-site/examples/select/label.tsx b/documentation-site/examples/select/label.tsx index af481ea876..1aa41494f9 100644 --- a/documentation-site/examples/select/label.tsx +++ b/documentation-site/examples/select/label.tsx @@ -3,17 +3,20 @@ import {styled} from 'baseui'; import {Select, Value} from 'baseui/select'; import {expandBorderStyles} from 'baseui/styles'; -const ColorSwatch = styled('div', (props: any) => { - return { - width: props.$theme.sizing.scale300, - height: props.$theme.sizing.scale300, - marginRight: props.$theme.sizing.scale200, - display: 'inline-block', - backgroundColor: props.$color, - verticalAlign: 'baseline', - ...expandBorderStyles(props.$theme.borders.border400), - }; -}); +const ColorSwatch = styled<'div', {$color: string}>( + 'div', + (props) => { + return { + width: props.$theme.sizing.scale300, + height: props.$theme.sizing.scale300, + marginRight: props.$theme.sizing.scale200, + display: 'inline-block', + backgroundColor: props.$color, + verticalAlign: 'baseline', + ...expandBorderStyles(props.$theme.borders.border400), + }; + }, +); const getLabel = ({option}: any) => { return ( @@ -38,7 +41,7 @@ function CustomLabel() { ]} labelKey="id" valueKey="color" - onChange={options => setValue(options.value)} + onChange={(options) => setValue(options.value)} value={value} getOptionLabel={getLabel} getValueLabel={getLabel} diff --git a/documentation-site/examples/select/with-many-options.tsx b/documentation-site/examples/select/with-many-options.tsx index 106c30beb3..2ecf3c1221 100644 --- a/documentation-site/examples/select/with-many-options.tsx +++ b/documentation-site/examples/select/with-many-options.tsx @@ -1,6 +1,11 @@ import * as React from 'react'; import {withStyle} from 'baseui'; -import {Select, StyledDropdownListItem, Value} from 'baseui/select'; +import { + Option, + Select, + StyledDropdownListItem, + Value, +} from 'baseui/select'; import { StyledList, StyledEmptyState, @@ -33,6 +38,7 @@ const FixedSizeListItem = ({ return ( { - const children = React.Children.toArray(props.children); +const VirtualDropdown = React.forwardRef( + (props: any, ref) => { + const children = React.Children.toArray(props.children); + + if (!children[0] || !children[0].props.item) { + return ( + + + + ); + } + + const height = Math.min( + MAX_LIST_HEIGHT, + children.length * LIST_ITEM_HEIGHT, + ); - if (!children[0] || !children[0].props.item) { return ( - - + + data[index].props.item.id} + itemSize={LIST_ITEM_HEIGHT} + > + {FixedSizeListItem} + ); - } - - const height = Math.min( - MAX_LIST_HEIGHT, - children.length * LIST_ITEM_HEIGHT, - ); - - return ( - - data[index].props.item.id} - itemSize={LIST_ITEM_HEIGHT} - > - {FixedSizeListItem} - - - ); -}); + }, +); -const options: {id: number; label: number}[] = []; +const options: Option[] = []; for (let i = 0; i < 10000; i += 1) { options.push({ id: i, - label: i, + label: '' + i, }); } diff --git a/documentation-site/examples/snackbar/placement.tsx b/documentation-site/examples/snackbar/placement.tsx index 6bdd217312..0fdf5b66c9 100644 --- a/documentation-site/examples/snackbar/placement.tsx +++ b/documentation-site/examples/snackbar/placement.tsx @@ -9,11 +9,11 @@ import { SnackbarProvider, useSnackbar, PLACEMENT, - PlacementT, + Placement, } from 'baseui/snackbar'; -const options = (Object.keys(PLACEMENT) as Array).map( - key => { +const options = (Object.keys(PLACEMENT) as Array).map( + (key) => { return {label: PLACEMENT[key], id: PLACEMENT[key]}; }, ); @@ -31,7 +31,7 @@ function Child({placement}: {placement: string}) { export default function Parent() { const [css] = useStyletron(); - const [placement, setPlacement] = React.useState( + const [placement, setPlacement] = React.useState( PLACEMENT.top, ); @@ -42,7 +42,7 @@ export default function Parent() { } + {(childrenProps: InputProps) => } ); } diff --git a/src/input/styled-components.ts b/src/input/styled-components.ts index f5ef334632..d00a0c7f71 100644 --- a/src/input/styled-components.ts +++ b/src/input/styled-components.ts @@ -5,19 +5,19 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import { styled } from '../styles'; -import type { ThemeT, Font } from '../styles/types'; +import type { Theme, Font } from '../styles/types'; import type { StyleObject } from 'styletron-standard'; import { ADJOINED, SIZE } from './constants'; -import type { SharedPropsT, SizeT } from './types'; -import type { SharedStylePropsT } from '../textarea/types'; +import type { SharedProps, Size } from './types'; +import type { SharedStyleProps } from '../textarea/types'; import DeleteAlt from '../icon/delete-alt'; export const StyledMaskToggleButton = styled< 'button', { - $size: SizeT; + $size: Size; $isFocusVisible: boolean; - $theme: ThemeT; + $theme: Theme; } >('button', ({ $theme, $size, $isFocusVisible }) => { const pad = { @@ -45,9 +45,9 @@ export const StyledMaskToggleButton = styled< export const StyledClearIconContainer = styled< 'div', { - $size: SizeT; + $size: Size; $alignTop: boolean; - $theme: ThemeT; + $theme: Theme; } >('div', ({ $alignTop = false, $size, $theme }) => { const pad = { @@ -231,8 +231,8 @@ export const getRootStyles = (props: { $error?: boolean; $disabled?: boolean; $positive?: boolean; - $size: SizeT; - $theme: ThemeT; + $size: Size; + $theme: Theme; $hasIconTrailing?: boolean; }): StyleObject => { const { @@ -269,7 +269,7 @@ export const getRootStyles = (props: { }; }; -export const Root = styled<'div', SharedPropsT>('div', getRootStyles); +export const Root = styled<'div', SharedProps>('div', getRootStyles); // InputEnhancer @@ -334,7 +334,7 @@ function getInputEnhancerColors($disabled, $isFocused, $error, $positive, colors }; } -export const InputEnhancer = styled<'div', SharedPropsT>('div', (props) => { +export const InputEnhancer = styled<'div', SharedProps>('div', (props) => { const { $size, $disabled, @@ -398,8 +398,8 @@ export const getInputContainerStyles = (props: { $error?: boolean; $disabled?: boolean; $positive?: boolean; - $size: SizeT; - $theme: ThemeT; + $size: Size; + $theme: Theme; }): StyleObject => { const { $isFocused, @@ -420,7 +420,7 @@ export const getInputContainerStyles = (props: { }; }; -export const InputContainer = styled<'div', SharedPropsT>('div', getInputContainerStyles); +export const InputContainer = styled<'div', SharedProps>('div', getInputContainerStyles); function getInputColors($disabled, $isFocused, $error, colors): StyleObject { if ($disabled) { @@ -445,11 +445,11 @@ function getInputColors($disabled, $isFocused, $error, colors): StyleObject { export const getInputStyles = ( props: - | (SharedPropsT & { - $theme: ThemeT; + | (SharedProps & { + $theme: Theme; }) - | (SharedStylePropsT & { - $theme: ThemeT; + | (SharedStyleProps & { + $theme: Theme; }) ): StyleObject => { const { @@ -487,4 +487,4 @@ export const getInputStyles = ( }; }; -export const Input = styled<'input', SharedPropsT>('input', getInputStyles); +export const Input = styled<'input', SharedProps>('input', getInputStyles); diff --git a/src/input/types.ts b/src/input/types.ts index d9cb5c12ad..68928b6bd7 100644 --- a/src/input/types.ts +++ b/src/input/types.ts @@ -5,16 +5,16 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import * as React from 'react'; -import type { OverrideT } from '../helpers/overrides'; +import type { Override } from '../helpers/overrides'; import { STATE_CHANGE_TYPE, ADJOINED, SIZE, ENHANCER_POSITION } from './constants'; import type { SyntheticEvent, ChangeEvent, FocusEvent, KeyboardEvent } from 'react'; -export type AdjoinedT = keyof typeof ADJOINED; -export type SizeT = keyof typeof SIZE; -export type StateTypeT = keyof typeof STATE_CHANGE_TYPE; +export type Adjoined = keyof typeof ADJOINED; +export type Size = keyof typeof SIZE; +export type StateType = keyof typeof STATE_CHANGE_TYPE; -export type InternalStateT = { +export type InternalState = { /** Renders UI in 'focus' state */ isFocused?: boolean; /** Renders input in 'masked' state if type equals "password" */ @@ -25,17 +25,13 @@ export type InternalStateT = { isFocusVisibleForMaskToggle?: boolean; }; -export type StateT = { +export type State = { value?: string | number; }; -export type StateReducerT = ( - stateType: StateTypeT, - nextState: StateT, - currentState: StateT -) => StateT; +export type StateReducer = (stateType: StateType, nextState: State, currentState: State) => State; -export type SharedPropsT = { +export type SharedProps = { /** Renders UI in 'focus' state */ $isFocused?: boolean; /** Renders UI in 'readOnly' state */ @@ -47,9 +43,9 @@ export type SharedPropsT = { /** Renders UI in 'positive' state */ $positive?: boolean; /** Defines styles for inputs that are grouped with other controls. */ - $adjoined: AdjoinedT; + $adjoined: Adjoined; /** Renders UI in provided size. */ - $size: SizeT; + $size: Size; /** Renders UI in 'required' state */ $required?: boolean; $position?: keyof typeof ENHANCER_POSITION; @@ -57,25 +53,25 @@ export type SharedPropsT = { $hasIconTrailing?: boolean; }; -export type BaseInputComponentsT = { - InputContainer?: OverrideT; - Input?: OverrideT; - Before?: OverrideT; - After?: OverrideT; - ClearIcon?: OverrideT; - ClearIconContainer?: OverrideT; - MaskToggleButton?: OverrideT; - MaskToggleShowIcon?: OverrideT; - MaskToggleHideIcon?: OverrideT; +export type BaseInputComponents = { + InputContainer?: Override; + Input?: Override; + Before?: Override; + After?: Override; + ClearIcon?: Override; + ClearIconContainer?: Override; + MaskToggleButton?: Override; + MaskToggleShowIcon?: Override; + MaskToggleHideIcon?: Override; }; -export type InputComponentsT = { - Root?: OverrideT; - StartEnhancer?: OverrideT; - EndEnhancer?: OverrideT; -} & BaseInputComponentsT; +export type InputComponents = { + Root?: Override; + StartEnhancer?: Override; + EndEnhancer?: Override; +} & BaseInputComponents; -export type BaseInputPropsT = { +export type BaseInputProps = { 'aria-activedescendant'?: string; 'aria-autocomplete'?: string; 'aria-controls'?: string; @@ -90,7 +86,7 @@ export type BaseInputPropsT = { /** Sets aria-describedby attribute. */ 'aria-describedby'?: string; /** Defines styles for inputs that are grouped with other controls. */ - adjoined?: AdjoinedT; + adjoined?: Adjoined; /** Determines if browser should provide value suggestions. */ autoComplete?: string; /** If true the input will be focused on the first mount. */ @@ -123,14 +119,14 @@ export type BaseInputPropsT = { clearOnEscape?: boolean; maxLength?: number; onClear?: (e: SyntheticEvent) => void; - overrides?: BaseInputComponentsT; + overrides?: BaseInputComponents; placeholder?: string; /** Renders component in 'required' state. */ required?: boolean; /** Input role attribute. */ role?: string; /** Renders component in provided size. */ - size?: SizeT; + size?: Size; /** Input type attribute. */ type?: string; /** Input value attribute. */ @@ -146,58 +142,58 @@ export type BaseInputPropsT = { readOnly?: boolean; }; -export type InputPropsT = { - overrides?: InputComponentsT; +export type InputProps = { + overrides?: InputComponents; /** An input helper rendered before and attached to the input field. */ - startEnhancer?: React.ReactNode | ((props: SharedPropsT) => React.ReactNode); + startEnhancer?: React.ReactNode | ((props: SharedProps) => React.ReactNode); /** An input helper rendered after and attached to the input field. */ - endEnhancer?: React.ReactNode | ((props: SharedPropsT) => React.ReactNode); + endEnhancer?: React.ReactNode | ((props: SharedProps) => React.ReactNode); /** Handler for the `focus` event. */ onFocus?: (e: FocusEvent) => void; /** Handler for the `blur` event. */ onBlur?: (e: FocusEvent) => void; -} & BaseInputPropsT; +} & BaseInputProps; -export type MaskedInputPropsT = Partial< +export type MaskedInputProps = Partial< { /** See mask examples here: https://github.com/sanniassin/react-input-mask */ mask?: string; /** Character to render for unfilled mask element. */ maskChar?: string; - } & InputPropsT + } & InputProps >; -export type StatefulContainerChildrenPropsT = { +export type StatefulContainerChildrenProps = { onChange: (e: ChangeEvent) => void; /** If true, adds a clear value icon button to the end of the input container. */ clearable?: boolean; -} & StatefulInputPropsT; +} & StatefulInputProps; -export type StatefulContainerPropsT = { - children: (props: StatefulContainerChildrenPropsT) => React.ReactNode; +export type StatefulContainerProps = { + children: (props: StatefulContainerChildrenProps) => React.ReactNode; /** Initial state of an uncontrolled input component. */ - initialState?: StateT; + initialState?: State; /** A state change handler. Used to override default state transitions. */ - stateReducer?: StateReducerT; + stateReducer?: StateReducer; onChange?: (e: ChangeEvent) => void; /** If true, adds a clear value icon button to the end of the input container. */ clearable?: boolean; } & { - overrides?: InputComponentsT; -} & Omit; + overrides?: InputComponents; +} & Omit; -type OmitPropsT = { - overrides: InputComponentsT; +type OmitProps = { + overrides: InputComponents; children: - | ((props: StatefulContainerChildrenPropsT) => React.ReactNode) + | ((props: StatefulContainerChildrenProps) => React.ReactNode) | undefined | null; }; -type FullStPropsT = InputPropsT & StatefulContainerPropsT; +type FullStProps = InputProps & StatefulContainerProps; -export type StInputPropsDiffT = Omit; +export type StInputPropsDiff = Omit; -export type StatefulInputPropsT = { - overrides?: InputComponentsT; -} & StInputPropsDiffT; +export type StatefulInputProps = { + overrides?: InputComponents; +} & StInputPropsDiff; diff --git a/src/input/utils.ts b/src/input/utils.ts index d724fcc6f4..e434e42760 100644 --- a/src/input/utils.ts +++ b/src/input/utils.ts @@ -4,12 +4,12 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import type { InputPropsT, BaseInputPropsT, InternalStateT, SharedPropsT } from './types'; +import type { InputProps, BaseInputProps, InternalState, SharedProps } from './types'; export function getSharedProps( - props: BaseInputPropsT | InputPropsT, - state: InternalStateT -): SharedPropsT { + props: BaseInputProps | InputProps, + state: InternalState +): SharedProps { const { disabled, error, positive, adjoined, size, required, readOnly } = props; const { isFocused } = state; return { diff --git a/src/layer/__mocks__/popper.js.ts b/src/layer/__mocks__/popper.js.ts index 4ee95e845e..9fc99625ae 100644 --- a/src/layer/__mocks__/popper.js.ts +++ b/src/layer/__mocks__/popper.js.ts @@ -4,12 +4,12 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import type { PopperOptionsT } from '../types'; +import type { PopperOptions } from '../types'; const destroy = jest.fn(); const mock = jest .fn() - .mockImplementation((anchor: HTMLElement, popover: HTMLElement, options: PopperOptionsT) => { + .mockImplementation((anchor: HTMLElement, popover: HTMLElement, options: PopperOptions) => { const onPopperUpdate = options.modifiers.applyReactStyle.fn; return { options, diff --git a/src/layer/__tests__/layer-z-index.scenario.tsx b/src/layer/__tests__/layer-z-index.scenario.tsx index 89d59de526..96a4e3e552 100644 --- a/src/layer/__tests__/layer-z-index.scenario.tsx +++ b/src/layer/__tests__/layer-z-index.scenario.tsx @@ -8,7 +8,7 @@ import * as React from 'react'; import { Layer, LayersManager, TetherBehavior, TETHER_PLACEMENT } from '..'; import { Block } from '../../block'; import { Button } from '../../button'; -import type { NormalizedOffsetsT } from '../../layer/types'; +import type { NormalizedOffsets } from '../../layer/types'; function BlockComponent(props) { const { children, forwardedRef, offset, color, ...restProps } = props; @@ -69,7 +69,7 @@ export class Scenario extends React.Component< offset2: { top: 0, left: 0 }, }; - onPopperUpdate = (order: 1 | 2, normalizedOffsets: NormalizedOffsetsT, _) => { + onPopperUpdate = (order: 1 | 2, normalizedOffsets: NormalizedOffsets, _) => { // @ts-expect-error partial state update this.setState({ [`offset${order}`]: normalizedOffsets.popper, diff --git a/src/layer/layer.tsx b/src/layer/layer.tsx index fb6dc7c585..b954561b26 100644 --- a/src/layer/layer.tsx +++ b/src/layer/layer.tsx @@ -9,7 +9,7 @@ import * as React from 'react'; import ReactDOM from 'react-dom'; import { styled } from '../styles'; import { LayersContext, Consumer } from './layers-manager'; -import type { LayerPropsT, LayerComponentPropsT, LayerStateT } from './types'; +import type { LayerProps, LayerComponentProps, LayerState } from './types'; const Container = styled< 'div', @@ -24,7 +24,7 @@ const Container = styled< zIndex: $zIndex || null, })); -class LayerComponent extends React.Component { +class LayerComponent extends React.Component { static contextType: typeof LayersContext = LayersContext; state = { container: null }; @@ -139,7 +139,7 @@ class LayerComponent extends React.Component } } -export default function Layer(props: LayerPropsT) { +export default function Layer(props: LayerProps) { return ( {({ host, zIndex }) => } diff --git a/src/layer/layers-manager.tsx b/src/layer/layers-manager.tsx index 368c706556..82ed745e18 100644 --- a/src/layer/layers-manager.tsx +++ b/src/layer/layers-manager.tsx @@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import { styled } from '../styles'; import { getOverrides } from '../helpers/overrides'; -import type { LayersManagerPropsT, LayersManagerStateT, LayersContextT } from './types'; +import type { LayersManagerProps, LayersManagerState, LayersContextProps } from './types'; import { initFocusVisible } from '../utils/focusVisible'; const StyledAppContainer = styled('div', {}); @@ -21,7 +21,7 @@ function defaultEventHandlerFn() { } } -export const LayersContext = React.createContext({ +export const LayersContext = React.createContext({ addEscapeHandler: defaultEventHandlerFn, removeEscapeHandler: defaultEventHandlerFn, addDocClickHandler: defaultEventHandlerFn, @@ -32,15 +32,12 @@ export const LayersContext = React.createContext({ export const Provider = LayersContext.Provider; export const Consumer = LayersContext.Consumer; -export default class LayersManager extends React.Component< - LayersManagerPropsT, - LayersManagerStateT -> { +export default class LayersManager extends React.Component { host = React.createRef(); containerRef = React.createRef(); - constructor(props: LayersManagerPropsT) { + constructor(props: LayersManagerProps) { super(props); this.state = { escapeKeyHandlers: [], docClickHandlers: [] }; } diff --git a/src/layer/tether.ts b/src/layer/tether.ts index 2dddbfec10..59f10a6879 100644 --- a/src/layer/tether.ts +++ b/src/layer/tether.ts @@ -9,9 +9,9 @@ import Popper from 'popper.js'; import { toPopperPlacement, parsePopperOffset } from './utils'; import { TETHER_PLACEMENT } from './constants'; -import type { TetherPropsT, TetherStateT, PopperDataObjectT } from './types'; +import type { TetherProps, TetherState, PopperDataObject } from './types'; -class Tether extends React.Component { +class Tether extends React.Component { static defaultProps = { anchorRef: null, onPopperUpdate: () => null, @@ -34,7 +34,7 @@ class Tether extends React.Component { this.setState({ isMounted: true }); } - componentDidUpdate(prevProps: TetherPropsT, prevState: TetherStateT) { + componentDidUpdate(prevProps: TetherProps, prevState: TetherState) { // Handles the case where popover content changes size and creates a gap between the anchor and // the popover. Popper.js only schedules updates on resize and scroll events. In the case of // the Select component, when options were filtered in the dropdown menu it creates a gap @@ -116,7 +116,7 @@ class Tether extends React.Component { }); } - onPopperUpdate = (data: PopperDataObjectT) => { + onPopperUpdate = (data: PopperDataObject) => { const normalizedOffsets = { popper: parsePopperOffset(data.offsets.popper), arrow: data.offsets.arrow ? parsePopperOffset(data.offsets.arrow) : { top: 0, left: 0 }, diff --git a/src/layer/types.ts b/src/layer/types.ts index d5bd4472b3..dcf7aada83 100644 --- a/src/layer/types.ts +++ b/src/layer/types.ts @@ -6,25 +6,25 @@ LICENSE file in the root directory of this source tree. */ import * as React from 'react'; import { TETHER_PLACEMENT } from './constants'; -import type { OverrideT } from '../helpers/overrides'; +import type { Override } from '../helpers/overrides'; /** LayersManager */ -export type LayersManagerPropsT = { +export type LayersManagerProps = { children: React.ReactNode; overrides?: { - AppContainer?: OverrideT; - LayersContainer?: OverrideT; + AppContainer?: Override; + LayersContainer?: Override; }; // z-index to be set for all the layers. zIndex?: number; }; -export type LayersManagerStateT = { +export type LayersManagerState = { escapeKeyHandlers: Array<() => unknown>; docClickHandlers: Array<(event: MouseEvent) => unknown>; }; -export type LayersContextT = { +export type LayersContextProps = { host?: HTMLElement | null; zIndex?: number; addEscapeHandler: (a: () => unknown) => void; @@ -34,7 +34,7 @@ export type LayersContextT = { }; /** Layer */ -export type LayerPropsT = { +export type LayerProps = { /** Content to be rendered in the Layer. */ children: React.ReactNode; /** A DOM element where the Layer will be inserted into as a child. @@ -66,7 +66,7 @@ export type LayerPropsT = { zIndex?: number; }; -export type LayerComponentPropsT = { +export type LayerComponentProps = { children: React.ReactNode; host: HTMLElement | undefined | null; index?: number; @@ -79,49 +79,49 @@ export type LayerComponentPropsT = { zIndex?: number; }; -export type LayerStateT = { +export type LayerState = { container: HTMLElement | undefined | null; }; /** TetherBehavior */ -export type TetherPlacementT = keyof typeof TETHER_PLACEMENT; +export type TetherPlacement = keyof typeof TETHER_PLACEMENT; -export type NormalizedOffsetT = { +export type NormalizedOffset = { top: number; left: number; }; -export type NormalizedOffsetsT = { - arrow?: NormalizedOffsetT; - popper: NormalizedOffsetT; +export type NormalizedOffsets = { + arrow?: NormalizedOffset; + popper: NormalizedOffset; }; -export type PopperOffsetT = { +export type PopperOffset = { top?: number | null; left?: number | null; }; -export type PopperDataObjectT = { +export type PopperDataObject = { offsets: { - arrow?: PopperOffsetT; - popper: PopperOffsetT; + arrow?: PopperOffset; + popper: PopperOffset; }; placement: string; }; -export type PopperOptionsT = { +export type PopperOptions = { placement: string; modifiers: { arrow: {}; computeStyle: {}; applyStyle: {}; applyReactStyle: { - fn: (data: PopperDataObjectT) => void; + fn: (data: PopperDataObject) => void; }; }; }; -export type TetherPropsT = { +export type TetherProps = { /** The reference element used to position the popper. */ anchorRef: HTMLElement | undefined | null; /** The arrow element that is passed as an arrow modifier to alter @@ -132,15 +132,15 @@ export type TetherPropsT = { /** Content to be rendered in the Popper. */ children: React.ReactNode; /** A handler that is called when popper positioning changes. */ - onPopperUpdate: (b: NormalizedOffsetsT, a: PopperDataObjectT) => unknown; + onPopperUpdate: (b: NormalizedOffsets, a: PopperDataObject) => unknown; /** Recommended placement of the popper. */ - placement: TetherPlacementT; + placement: TetherPlacement; /** Options to be passes to the Popper on its initialization. Refer to the [Popper documentation](https://github.com/popperjs/popper.js/blob/v1.x/docs/_includes/popper-documentation.md) for the full list of available options. */ popperOptions: any; }; -export type TetherStateT = { +export type TetherState = { isMounted: boolean; }; diff --git a/src/layer/utils.ts b/src/layer/utils.ts index 39701066e2..32deac24bc 100644 --- a/src/layer/utils.ts +++ b/src/layer/utils.ts @@ -4,16 +4,16 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import type { TetherPlacementT, PopperOffsetT, NormalizedOffsetT } from './types'; +import type { TetherPlacement, PopperOffset, NormalizedOffset } from './types'; -export function toPopperPlacement(placement: TetherPlacementT): string { +export function toPopperPlacement(placement: TetherPlacement): string { return placement.replace(/(Top|Left)$/, '-start').replace(/(Right|Bottom)$/, '-end'); } /** * Takes the offset passed from popper.js and normalizes it */ -export function parsePopperOffset(offset: PopperOffsetT): NormalizedOffsetT { +export function parsePopperOffset(offset: PopperOffset): NormalizedOffset { return { top: Math.floor(offset.top || 0), left: Math.floor(offset.left || 0), diff --git a/src/layout-grid/cell.tsx b/src/layout-grid/cell.tsx index f4eaf37262..86bd6ef380 100644 --- a/src/layout-grid/cell.tsx +++ b/src/layout-grid/cell.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { getOverrides } from '../helpers/overrides'; import { StyledCell as DefaultStyledCell } from './styled-components'; import { GridContext } from './grid'; -import type { CellPropsT } from './types'; +import type { CellProps } from './types'; export default function Cell({ align, @@ -21,7 +21,7 @@ export default function Cell({ skip, span, overrides = {}, -}: CellPropsT) { +}: CellProps) { const [StyledCell, overrideProps] = getOverrides(overrides.Cell, DefaultStyledCell); const gridContext = React.useContext(GridContext); return ( diff --git a/src/layout-grid/grid.tsx b/src/layout-grid/grid.tsx index db2e532bf9..307d03b3a2 100644 --- a/src/layout-grid/grid.tsx +++ b/src/layout-grid/grid.tsx @@ -12,9 +12,9 @@ import { StyledGridWrapper as DefaultStyledGridWrapper, } from './styled-components'; -import type { GridPropsT, SharedGridPropsT } from './types'; +import type { GridProps, SharedGridProps } from './types'; -export const GridContext: React.Context = React.createContext({}); +export const GridContext: React.Context = React.createContext({}); export default function Grid({ align, @@ -28,7 +28,7 @@ export default function Grid({ gridStyle = STYLE.default, gridUnit, overrides = {}, -}: GridPropsT) { +}: GridProps) { const [StyledGrid, overrideProps] = getOverrides(overrides.Grid, DefaultStyledGrid); const [StyledGridWrapper, wrapperProps] = getOverrides( overrides.GridWrapper, diff --git a/src/layout-grid/styled-components.ts b/src/layout-grid/styled-components.ts index 1fa1e6db80..5839bfd95f 100644 --- a/src/layout-grid/styled-components.ts +++ b/src/layout-grid/styled-components.ts @@ -7,14 +7,9 @@ LICENSE file in the root directory of this source tree. import { styled } from '../styles'; import { getMediaQueries } from '../helpers/responsive-helpers'; import { BEHAVIOR } from './constants'; -import type { - ResponsiveT, - StyledGridPropsT, - StyledGridWrapperPropsT, - StyledCellPropsT, -} from './types'; +import type { Responsive, StyledGridProps, StyledGridWrapperProps, StyledCellProps } from './types'; -export const StyledGridWrapper = styled<'div', StyledGridWrapperPropsT>( +export const StyledGridWrapper = styled<'div', StyledGridWrapperProps>( 'div', ({ $theme, @@ -31,7 +26,7 @@ export const StyledGridWrapper = styled<'div', StyledGridWrapperPropsT>( }) ); -export const StyledGrid = styled<'div', StyledGridPropsT>( +export const StyledGrid = styled<'div', StyledGridProps>( 'div', ({ $theme, @@ -77,7 +72,7 @@ export const StyledGrid = styled<'div', StyledGridPropsT>( } ); -export const StyledCell = styled<'div', StyledCellPropsT>( +export const StyledCell = styled<'div', StyledCellProps>( 'div', ({ $theme, @@ -141,12 +136,12 @@ export const StyledCell = styled<'div', StyledCellPropsT>( } ); -function getResponsiveNumber(responsive: ResponsiveT, i: number): number { +function getResponsiveNumber(responsive: Responsive, i: number): number { const res = getResponsiveValue(responsive, i); return typeof res === 'number' ? res : 0; } -function getResponsiveValue(responsive: ResponsiveT, i: number): T | undefined | null { +function getResponsiveValue(responsive: Responsive, i: number): T | undefined | null { if (!responsive) { return null; } diff --git a/src/layout-grid/types.ts b/src/layout-grid/types.ts index 3e33b833df..39c6d35526 100644 --- a/src/layout-grid/types.ts +++ b/src/layout-grid/types.ts @@ -7,14 +7,14 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import { ALIGNMENT, BEHAVIOR, STYLE } from './constants'; -import type { OverrideT } from '../helpers/overrides'; +import type { Override } from '../helpers/overrides'; -export type ResponsiveT = T | Array; +export type Responsive = T | Array; -export type AlignmentT = typeof ALIGNMENT.start | typeof ALIGNMENT.center | typeof ALIGNMENT.end; +export type Alignment = typeof ALIGNMENT.start | typeof ALIGNMENT.center | typeof ALIGNMENT.end; -export type BehaviorT = typeof BEHAVIOR.fixed | typeof BEHAVIOR.fluid; -export type CSSLengthUnitT = +export type Behavior = typeof BEHAVIOR.fixed | typeof BEHAVIOR.fluid; +export type CSSLengthUnit = | 'cm' | 'mm' | 'Q' @@ -35,96 +35,96 @@ export type CSSLengthUnitT = export type GridStyle = typeof STYLE[keyof typeof STYLE]; -export type SharedGridPropsT = { +export type SharedGridProps = { /** Number of columns at each breakpoint. */ - gridColumns?: ResponsiveT; + gridColumns?: Responsive; /** Gap between rows at each breakpoint. */ - gridGaps?: ResponsiveT; + gridGaps?: Responsive; /** Gap between columns at each breakpoint. */ - gridGutters?: ResponsiveT; + gridGutters?: Responsive; /** Modify the CSS length unit used to measure columns and rows. Defaults to theme value. */ - gridUnit?: CSSLengthUnitT; + gridUnit?: CSSLengthUnit; }; -export type GridPropsT = { +export type GridProps = { /** Control vertical alignment of cells at each breakpoint. */ - align?: ResponsiveT; + align?: Responsive; /** Grid container behavior beyond max width. Fluid will continue to expand. Fixed will limit grid container to max width and center the container horizontally within parent element. */ - behavior?: BehaviorT; + behavior?: Behavior; /** Children should be Cells. */ children: React.ReactElement | React.ReactElement[]; /** Gap on either side of grid container at each breakpoint. */ - gridMargins?: ResponsiveT; + gridMargins?: Responsive; /** Maximum width of the grid container. Does not include Margins. Only applies when `behavior` is `fluid`. */ gridMaxWidth?: number; /** Style for your grid. The `default` style will pull values from the theme, while other styles have preset values that are unaffected by the theme. **/ gridStyle?: GridStyle; /** Overrides for your grid. */ overrides?: { - Grid?: OverrideT; - GridWrapper?: OverrideT; + Grid?: Override; + GridWrapper?: Override; }; -} & SharedGridPropsT; +} & SharedGridProps; -export type StyledGridWrapperPropsT = { +export type StyledGridWrapperProps = { /** Grid container behavior beyond max width. Fluid will continue to expand. Fixed will limit grid container to max width and center the container horizontally within parent element. */ - $behavior?: BehaviorT; + $behavior?: Behavior; /** Gap on either side of grid container at each breakpoint. */ - $gridMargins?: ResponsiveT; + $gridMargins?: Responsive; /** Maximum width of the grid container. Does not include Margins. Only applies when `behavior` is `fluid`. */ $gridMaxWidth?: number; /** Modify the CSS length unit used to measure columns and rows. Defaults to theme value. */ - $gridUnit?: CSSLengthUnitT; + $gridUnit?: CSSLengthUnit; }; -export type StyledGridPropsT = { +export type StyledGridProps = { /** Control vertical alignment of cells at each breakpoint. */ - $align?: ResponsiveT; + $align?: Responsive; /** Grid container behavior beyond max width. Fluid will continue to expand. Fixed will limit grid container to max width and center the container horizontally within parent element. */ - $behavior?: BehaviorT; + $behavior?: Behavior; /** Gap between columns at each breakpoint. */ - $gridGutters?: ResponsiveT; + $gridGutters?: Responsive; /** Gap on either side of grid container at each breakpoint. */ - $gridMargins?: ResponsiveT; + $gridMargins?: Responsive; /** Maximum width of the grid container. Does not include Margins. Only applies when `behavior` is `fluid`. */ $gridMaxWidth?: number; /** Modify the CSS length unit used to measure columns and rows. Defaults to theme value. */ - $gridUnit?: CSSLengthUnitT; + $gridUnit?: CSSLengthUnit; /** Style for your grid. The `default` style will pull values from the theme, while other styles have preset values that are unaffected by the theme. **/ $gridStyle?: GridStyle; }; -export type CellPropsT = { +export type CellProps = { /** Control vertical alignment of individual cell at each breakpoint. Limited proxy for `align-self` CSS property. */ - align?: ResponsiveT; + align?: Responsive; /** Content to be placed in Cell. */ children?: React.ReactNode; /** Control placement order of cell in flex row at each breakpoint. Proxy for `order` CSS property. */ - order?: ResponsiveT; + order?: Responsive; /** Control number of columns to offset cell at each breakpoint. */ - skip?: ResponsiveT; + skip?: Responsive; /** Control number of columns the cell should span. */ - span?: ResponsiveT; + span?: Responsive; /** Overrides for a single cell. */ overrides?: { - Cell?: OverrideT; + Cell?: Override; }; -} & SharedGridPropsT; +} & SharedGridProps; -export type StyledCellPropsT = { +export type StyledCellProps = { /** Control vertical alignment of individual cell at each breakpoint. Limited proxy for `align-self` CSS property. */ - $align?: ResponsiveT; + $align?: Responsive; /** Number of columns at each breakpoint. */ - $gridColumns?: ResponsiveT; + $gridColumns?: Responsive; /** Gap between rows at each breakpoint. */ - $gridGaps?: ResponsiveT; + $gridGaps?: Responsive; /** Gap between columns at each breakpoint. */ - $gridGutters?: ResponsiveT; + $gridGutters?: Responsive; /** Modify the CSS length unit used to measure columns and rows. Defaults to theme value. */ - $gridUnit?: CSSLengthUnitT; + $gridUnit?: CSSLengthUnit; /** Control placement order of cell in flex row at each breakpoint. Proxy for `order` CSS property. */ - $order?: ResponsiveT; + $order?: Responsive; /** Control number of columns to offset cell at each breakpoint. */ - $skip?: ResponsiveT; + $skip?: Responsive; /** Control number of columns the cell should span. */ - $span?: ResponsiveT; + $span?: Responsive; }; diff --git a/src/list/list-heading.tsx b/src/list/list-heading.tsx index 8026482b72..f67cc0db93 100644 --- a/src/list/list-heading.tsx +++ b/src/list/list-heading.tsx @@ -18,7 +18,7 @@ import { StyledHeadingMainHeading, StyledHeadingSubHeading, } from './styled-components'; -import type { HeadingPropsT } from './types'; +import type { HeadingProps } from './types'; function RenderNode(props) { const { component, ...restProps } = props; @@ -39,7 +39,7 @@ function isMaxLinesValid(maxLines) { return maxLines === 1 || maxLines === 2; } -const ListHeading = React.forwardRef((props: HeadingPropsT, ref) => { +const ListHeading = React.forwardRef((props: HeadingProps, ref) => { const { overrides = {}, maxLines } = props; const EndEnhancer = props.endEnhancer; const EndEnhancerDescription = props.endEnhancerDescription; diff --git a/src/list/list-item-label.tsx b/src/list/list-item-label.tsx index 5a34ea4ec8..82c8ab1d79 100644 --- a/src/list/list-item-label.tsx +++ b/src/list/list-item-label.tsx @@ -13,9 +13,9 @@ import { StyledLabelDescription, StyledLabelSublistContent, } from './styled-components'; -import type { LabelPropsT } from './types'; +import type { LabelProps } from './types'; -function ListItemLabel(props: LabelPropsT) { +function ListItemLabel(props: LabelProps) { const { overrides = {} } = props; const [LabelSublistContent, labelSublistContentProps] = getOverrides( diff --git a/src/list/list-item.tsx b/src/list/list-item.tsx index ba9fec7442..aceb573acb 100644 --- a/src/list/list-item.tsx +++ b/src/list/list-item.tsx @@ -15,10 +15,10 @@ import { StyledEndEnhancerContainer, StyledArtworkContainer, } from './styled-components'; -import type { PropsT } from './types'; +import type { ListProps } from './types'; import { artworkSizeToValue } from './utils'; -const ListItem = React.forwardRef((props: PropsT, ref) => { +const ListItem = React.forwardRef((props: ListProps, ref) => { const { overrides = {} } = props; const Artwork = props.artwork; const EndEnhancer = props.endEnhancer; diff --git a/src/list/menu-adapter.tsx b/src/list/menu-adapter.tsx index ab01279952..463d239d3d 100644 --- a/src/list/menu-adapter.tsx +++ b/src/list/menu-adapter.tsx @@ -7,10 +7,10 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import ListItem from './list-item'; -import type { MenuAdapterPropsT } from './types'; +import type { MenuAdapterProps } from './types'; import { mergeOverrides } from '../helpers/overrides'; -const MenuAdapter = React.forwardRef((props, ref) => { +const MenuAdapter = React.forwardRef((props, ref) => { return ( ('li', ({ $theme, $shape }) => { +export const StyledRoot = styled<'li', StyledRootProps>('li', ({ $theme, $shape }) => { return { alignItems: 'center', backgroundColor: $theme.colors.backgroundPrimary, @@ -30,7 +30,7 @@ export const StyledRoot = styled<'li', StyledRootPropsT>('li', ({ $theme, $shape }; }); -export const StyledContent = styled<'div', StyledContentPropsT>( +export const StyledContent = styled<'div', StyledContentProps>( 'div', ({ $mLeft, $sublist, $theme }) => { return { @@ -61,7 +61,7 @@ export const StyledEndEnhancerContainer = styled('div', { display: 'flex', }); -export const StyledArtworkContainer = styled<'div', StyledArtworkContainerPropsT>( +export const StyledArtworkContainer = styled<'div', StyledArtworkContainerProps>( 'div', ({ $artworkSize, $sublist, $theme }) => { let sizeValue: number = @@ -114,7 +114,7 @@ export const StyledLabelSublistContent = styled('p', ({ $theme }) => { }; }); -export const StyledHeadingRoot = styled<'div', StyledRootPropsT>('div', ({ $theme }) => { +export const StyledHeadingRoot = styled<'div', StyledRootProps>('div', ({ $theme }) => { return { display: 'flex', alignItems: 'center', @@ -150,7 +150,7 @@ export const StyledHeadingContentRow = styled('div', { width: '100%', }); -export const StyledHeadingMainHeading = styled<'p', StyledHeadingHeadingPropsT>( +export const StyledHeadingMainHeading = styled<'p', StyledHeadingHeadingProps>( 'p', ({ $maxLines = 1, $theme }) => { return { @@ -167,7 +167,7 @@ export const StyledHeadingMainHeading = styled<'p', StyledHeadingHeadingPropsT>( } ); -export const StyledHeadingSubHeading = styled<'p', StyledHeadingHeadingPropsT>( +export const StyledHeadingSubHeading = styled<'p', StyledHeadingHeadingProps>( 'p', ({ $maxLines = 1, $theme }) => { return { diff --git a/src/list/types.ts b/src/list/types.ts index 62ec6a8b06..a6c5343cb5 100644 --- a/src/list/types.ts +++ b/src/list/types.ts @@ -6,94 +6,94 @@ LICENSE file in the root directory of this source tree. */ import * as React from 'react'; -import type { OverrideT } from '../helpers/overrides'; -import type { IconPropsT } from '../icon'; +import type { Override } from '../helpers/overrides'; +import type { IconProps } from '../icon'; import { ARTWORK_SIZES, SHAPE } from './constants'; -export type ArtworkSizesT = +export type ArtworkSizes = | typeof ARTWORK_SIZES.SMALL | typeof ARTWORK_SIZES.MEDIUM | typeof ARTWORK_SIZES.LARGE; -export type ShapeT = typeof SHAPE.DEFAULT | typeof SHAPE.ROUND; +export type Shape = typeof SHAPE.DEFAULT | typeof SHAPE.ROUND; -export type StyledRootPropsT = { - $shape: ShapeT; +export type StyledRootProps = { + $shape: Shape; }; -export type StyledArtworkContainerPropsT = { - $artworkSize: ArtworkSizesT | number; +export type StyledArtworkContainerProps = { + $artworkSize: ArtworkSizes | number; $sublist?: boolean; }; -export type StyledContentPropsT = { +export type StyledContentProps = { $mLeft: boolean; $sublist: boolean; }; -export type OverridesT = { - Root?: OverrideT; - ArtworkContainer?: OverrideT; - Content?: OverrideT; - EndEnhancerContainer?: OverrideT; +export type ListOverrides = { + Root?: Override; + ArtworkContainer?: Override; + Content?: Override; + EndEnhancerContainer?: Override; }; -export type PropsT = { +export type ListProps = { artwork?: React.ComponentType< { - size: IconPropsT['size']; - } & IconPropsT + size: IconProps['size']; + } & IconProps >; - artworkSize?: ArtworkSizesT | number; - shape?: ShapeT; + artworkSize?: ArtworkSizes | number; + shape?: Shape; children: React.ReactNode; endEnhancer?: React.ComponentType<{}>; 'aria-label'?: string; 'aria-selected'?: boolean; id?: String; - overrides?: OverridesT; + overrides?: ListOverrides; role?: string; sublist?: boolean; }; export type LabelOverrides = { - LabelContent?: OverrideT; - LabelDescription?: OverrideT; - LabelSublistContent?: OverrideT; + LabelContent?: Override; + LabelDescription?: Override; + LabelSublistContent?: Override; }; -export type LabelPropsT = { +export type LabelProps = { children: React.ReactNode; description?: React.ReactNode; sublist?: boolean; overrides?: LabelOverrides; }; -export type HeadingOverridesT = { - Root?: OverrideT; - Content?: OverrideT; - HeadingContainer?: OverrideT; - SubHeadingContainer?: OverrideT; - EndEnhancerContainer?: OverrideT; - EndEnhancerDescriptionContainer?: OverrideT; +export type HeadingOverrides = { + Root?: Override; + Content?: Override; + HeadingContainer?: Override; + SubHeadingContainer?: Override; + EndEnhancerContainer?: Override; + EndEnhancerDescriptionContainer?: Override; }; -export type HeadingPropsT = { +export type HeadingProps = { heading: React.ReactNode | React.ComponentType<{}>; subHeading?: React.ReactNode | React.ComponentType<{}>; endEnhancer?: React.ReactNode | React.ComponentType<{}>; endEnhancerDescription?: React.ReactNode | React.ComponentType<{}>; - overrides?: HeadingOverridesT; + overrides?: HeadingOverrides; maxLines?: 1 | 2; }; -export type StyledHeadingHeadingPropsT = { +export type StyledHeadingHeadingProps = { $maxLines: number; }; -export type MenuAdapterPropsT = { +export type MenuAdapterProps = { item?: any; onMouseEnter?: (a: MouseEvent) => unknown; onClick?: (a: MouseEvent) => unknown; $size?: string; $isHighlighted?: boolean; $disabled?: boolean; -} & PropsT; +} & ListProps; diff --git a/src/list/utils.ts b/src/list/utils.ts index 36ba8dd132..e475bd84ec 100644 --- a/src/list/utils.ts +++ b/src/list/utils.ts @@ -5,9 +5,9 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import { ARTWORK_SIZES } from './constants'; -import type { ArtworkSizesT } from './types'; +import type { ArtworkSizes } from './types'; -export function artworkSizeToValue(artworkSize: ArtworkSizesT, isSublist: boolean) { +export function artworkSizeToValue(artworkSize: ArtworkSizes, isSublist: boolean) { if (isSublist) { switch (artworkSize) { case ARTWORK_SIZES.LARGE: diff --git a/src/locale/en_US.ts b/src/locale/en_US.ts index fc7d43b0c8..6be25651b5 100644 --- a/src/locale/en_US.ts +++ b/src/locale/en_US.ts @@ -16,9 +16,9 @@ import drawer from '../drawer/locale'; import pagination from '../pagination/locale'; import select from '../select/locale'; import toast from '../toast/locale'; -import { LocaleT } from './types'; +import { Locale } from './types'; -const en_US: LocaleT = { +const en_US: Locale = { accordion, breadcrumbs, datepicker, diff --git a/src/locale/es_AR.ts b/src/locale/es_AR.ts index 74324efdfc..4a00467b16 100644 --- a/src/locale/es_AR.ts +++ b/src/locale/es_AR.ts @@ -4,9 +4,9 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import { LocaleT } from './types'; +import { Locale } from './types'; -const es_AR: LocaleT = { +const es_AR: Locale = { accordion: { collapse: 'Colapsar', expand: 'Expandir', diff --git a/src/locale/index.tsx b/src/locale/index.tsx index bca5e835d2..cca2d579ab 100644 --- a/src/locale/index.tsx +++ b/src/locale/index.tsx @@ -7,13 +7,13 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import extend from 'just-extend'; -import type { LocaleT } from './types'; +import type { Locale } from './types'; import en_US from './en_US'; -export const LocaleContext: React.Context = React.createContext(en_US); +export const LocaleContext: React.Context = React.createContext(en_US); const LocaleProvider = (props: { - locale: Partial; + locale: Partial; children: React.ReactNode | undefined | null; }) => { const { locale, children } = props; @@ -24,4 +24,4 @@ const LocaleProvider = (props: { export default LocaleProvider; -export type { LocaleT }; +export type { Locale }; diff --git a/src/locale/tr_TR.ts b/src/locale/tr_TR.ts index 349bf488a2..1ad6144bcd 100644 --- a/src/locale/tr_TR.ts +++ b/src/locale/tr_TR.ts @@ -4,9 +4,9 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import { LocaleT } from './types'; +import { Locale } from './types'; -const tr_TR: LocaleT = { +const tr_TR: Locale = { accordion: { collapse: 'Daralt', expand: 'Genişlet', diff --git a/src/locale/types.ts b/src/locale/types.ts index b4fa729d9b..d72fed5c96 100644 --- a/src/locale/types.ts +++ b/src/locale/types.ts @@ -4,30 +4,30 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import type { AccordionLocaleT } from '../accordion'; -import type { BreadcrumbLocaleT } from '../breadcrumbs'; -import type { DatepickerLocaleT } from '../datepicker'; -import type { DataTableLocaleT } from '../data-table'; -import type { ButtonGroupLocaleT } from '../button-group'; -import type { FileUploaderLocaleT } from '../file-uploader'; -import type { MenuLocaleT } from '../menu'; -import type { ModalLocaleT } from '../modal'; -import type { DrawerLocaleT } from '../drawer'; -import type { PaginationLocaleT } from '../pagination'; -import type { SelectLocaleT } from '../select'; -import type { ToastLocaleT } from '../toast'; +import type { AccordionLocale } from '../accordion'; +import type { BreadcrumbLocale } from '../breadcrumbs'; +import type { DatepickerLocale } from '../datepicker'; +import type { DataTableLocale } from '../data-table'; +import type { ButtonGroupLocale } from '../button-group'; +import type { FileUploaderLocale } from '../file-uploader'; +import type { MenuLocale } from '../menu'; +import type { ModalLocale } from '../modal'; +import type { DrawerLocale } from '../drawer'; +import type { PaginationLocale } from '../pagination'; +import type { SelectLocale } from '../select'; +import type { ToastLocale } from '../toast'; -export type LocaleT = { - accordion: AccordionLocaleT; - breadcrumbs: BreadcrumbLocaleT; - datepicker: DatepickerLocaleT; - datatable: DataTableLocaleT; - buttongroup: ButtonGroupLocaleT; - fileuploader: FileUploaderLocaleT; - menu: MenuLocaleT; - modal: ModalLocaleT; - drawer: DrawerLocaleT; - pagination: PaginationLocaleT; - select: SelectLocaleT; - toast: ToastLocaleT; +export type Locale = { + accordion: AccordionLocale; + breadcrumbs: BreadcrumbLocale; + datepicker: DatepickerLocale; + datatable: DataTableLocale; + buttongroup: ButtonGroupLocale; + fileuploader: FileUploaderLocale; + menu: MenuLocale; + modal: ModalLocale; + drawer: DrawerLocale; + pagination: PaginationLocale; + select: SelectLocale; + toast: ToastLocale; }; diff --git a/src/map-marker/__tests__/fixed-marker.scenario.tsx b/src/map-marker/__tests__/fixed-marker.scenario.tsx index d0b5bf1721..ab6fea9476 100644 --- a/src/map-marker/__tests__/fixed-marker.scenario.tsx +++ b/src/map-marker/__tests__/fixed-marker.scenario.tsx @@ -19,7 +19,7 @@ import Upload from '../../icon/upload'; import Search from '../../icon/search'; import { Select } from '../../select'; -import type { PinHeadSizeT, NeedleSizeT } from '../types'; +import type { PinHeadSize, NeedleSize } from '../types'; const labelEnhancerPositions = Object.keys(LABEL_ENHANCER_POSITIONS) .map((key) => LABEL_ENHANCER_POSITIONS[key]) @@ -60,10 +60,10 @@ export function Scenario() { Object.keys(PINHEAD_SIZES_SHAPES) .map((key) => PINHEAD_SIZES_SHAPES[key]) - .forEach((pinheadSize: PinHeadSizeT, i: number) => { + .forEach((pinheadSize: PinHeadSize, i: number) => { Object.keys(NEEDLE_SIZES) .map((key) => NEEDLE_SIZES[key]) - .forEach((needleSize: NeedleSizeT, z: number) => { + .forEach((needleSize: NeedleSize, z: number) => { markers.push({ id: `fixed / ${pinheadSize} / ${needleSize}`, content: ( diff --git a/src/map-marker/__tests__/floating-marker.scenario.tsx b/src/map-marker/__tests__/floating-marker.scenario.tsx index f64c20d9ae..982fcd956f 100644 --- a/src/map-marker/__tests__/floating-marker.scenario.tsx +++ b/src/map-marker/__tests__/floating-marker.scenario.tsx @@ -18,7 +18,7 @@ import Upload from '../../icon/upload'; import Search from '../../icon/search'; import { Select } from '../../select'; -import type { FloatingMarkerSizeT, AnchorPositionsT } from '../types'; +import type { FloatingMarkerSize, AnchorPositions } from '../types'; const floatingMarkerAnchorTypes = Object.keys(FLOATING_MARKER_ANCHOR_TYPES) .map((key) => FLOATING_MARKER_ANCHOR_TYPES[key]) @@ -38,10 +38,10 @@ export function Scenario() { const markers = []; Object.keys(FLOATING_MARKER_SIZES) .map((key) => FLOATING_MARKER_SIZES[key]) - .forEach((size: FloatingMarkerSizeT, i: number) => { + .forEach((size: FloatingMarkerSize, i: number) => { Object.keys(FLOATING_MARKER_ANCHOR_POSITIONS) .map((key) => FLOATING_MARKER_ANCHOR_POSITIONS[key]) - .forEach((position: AnchorPositionsT, x: number) => { + .forEach((position: AnchorPositions, x: number) => { markers.push({ id: `floating / ${size} / ${position}`, content: ( diff --git a/src/map-marker/__tests__/tile-grid.tsx b/src/map-marker/__tests__/tile-grid.tsx index 66d8ec12bb..a51e6ab891 100644 --- a/src/map-marker/__tests__/tile-grid.tsx +++ b/src/map-marker/__tests__/tile-grid.tsx @@ -9,13 +9,13 @@ import { useStyletron } from '../../styles'; import { LabelSmall } from '../../typography'; import { Block } from '../../block'; -type TileGridPropsT = { +type TileGridProps = { children?: Array; customizerOptions: Array; cols: number; }; -const TileGrid = ({ children, customizerOptions, cols }: TileGridPropsT) => { +const TileGrid = ({ children, customizerOptions, cols }: TileGridProps) => { const [, theme] = useStyletron(); const { colors: { contentSecondary }, diff --git a/src/map-marker/badge-enhancer.tsx b/src/map-marker/badge-enhancer.tsx index 973e575170..e42977d00d 100644 --- a/src/map-marker/badge-enhancer.tsx +++ b/src/map-marker/badge-enhancer.tsx @@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree. */ import * as React from 'react'; -import type { BadgeEnhancerComponentT } from './types'; +import type { BadgeEnhancerComponent } from './types'; import { getOverrides } from '../helpers/overrides'; import { StyledBadgeEnhancerRoot } from './styled-components'; import { @@ -22,7 +22,7 @@ const BadgeEnhancer = ({ badgeEnhancerSize = BADGE_ENHANCER_SIZES.none, badgeEnhancerContent: BadgeEnhancerContent, overrides = {}, -}: BadgeEnhancerComponentT) => { +}: BadgeEnhancerComponent) => { if (badgeEnhancerSize === null || badgeEnhancerSize == BADGE_ENHANCER_SIZES.none) { return null; } diff --git a/src/map-marker/drag-shadow.tsx b/src/map-marker/drag-shadow.tsx index 97391abee7..4cce0f7ebd 100644 --- a/src/map-marker/drag-shadow.tsx +++ b/src/map-marker/drag-shadow.tsx @@ -8,9 +8,9 @@ import * as React from 'react'; import { getOverrides } from '../helpers/overrides'; import { dragShadowWidth } from './constants'; import { StyledDragShadow, StyledDragShadowContainer } from './styled-components'; -import type { DragShadowPropsT } from './types'; +import type { DragShadowProps } from './types'; -const DragShadow = ({ background, dragging, height, overrides = {} }: DragShadowPropsT) => { +const DragShadow = ({ background, dragging, height, overrides = {} }: DragShadowProps) => { const [DragShadowContainer, dragShadowContainerProps] = getOverrides( overrides.DragShadowContainer, StyledDragShadowContainer diff --git a/src/map-marker/fixed-marker.tsx b/src/map-marker/fixed-marker.tsx index 6370e507db..24705d54bf 100644 --- a/src/map-marker/fixed-marker.tsx +++ b/src/map-marker/fixed-marker.tsx @@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import * as React from 'react'; -import { useStyletron, type ThemeT } from '../styles'; +import { useStyletron, type Theme } from '../styles'; import { getOverrides } from '../helpers/overrides'; import { PINHEAD_TYPES, @@ -20,14 +20,14 @@ import PinHead from './pin-head'; import Needle from './needle'; import DragShadow from './drag-shadow'; import { StyledFixedMarkerDragContainer, StyledFixedMarkerRoot } from './styled-components'; -import type { FixedMarkerPropsT, KindT, PinHeadSizeT } from './types'; +import type { FixedMarkerProps, Kind, PinHeadSize } from './types'; type Colors = { color: string; backgroundColor: string; }; -function getColors(kind: KindT, theme: ThemeT): Colors { +function getColors(kind: Kind, theme: Theme): Colors { if (kind === KIND.accent) { return { color: theme.colors.contentInversePrimary, @@ -60,7 +60,7 @@ const FixedMarker = ({ badgeEnhancerSize = null, badgeEnhancerContent = null, ...restProps -}: FixedMarkerPropsT) => { +}: FixedMarkerProps) => { const [, theme] = useStyletron(); const { color, backgroundColor } = getColors(kind, theme); @@ -78,14 +78,14 @@ const FixedMarker = ({ const renderNeedle = needle !== NEEDLE_SIZES.none && !( - [PINHEAD_SIZES_SHAPES.xxSmallCircle, PINHEAD_SIZES_SHAPES.xxSmallSquare] as PinHeadSizeT[] + [PINHEAD_SIZES_SHAPES.xxSmallCircle, PINHEAD_SIZES_SHAPES.xxSmallSquare] as PinHeadSize[] ).includes(size); if (__DEV__) { if ( needle !== NEEDLE_SIZES.none && ( - [PINHEAD_SIZES_SHAPES.xxSmallCircle, PINHEAD_SIZES_SHAPES.xxSmallSquare] as PinHeadSizeT[] + [PINHEAD_SIZES_SHAPES.xxSmallCircle, PINHEAD_SIZES_SHAPES.xxSmallSquare] as PinHeadSize[] ).includes(size) ) { console.warn( @@ -93,7 +93,7 @@ const FixedMarker = ({ ); } } - const enhancers: Pick = {}; + const enhancers: Pick = {}; if (startEnhancer) { enhancers.startEnhancer = startEnhancer; } diff --git a/src/map-marker/floating-marker.tsx b/src/map-marker/floating-marker.tsx index a373e29281..71f07ec48c 100644 --- a/src/map-marker/floating-marker.tsx +++ b/src/map-marker/floating-marker.tsx @@ -13,7 +13,7 @@ import { StyledFloatingMarkerAnchorContainer, StyledFloatingMarkerPinHeadContainer, } from './styled-components'; -import type { FloatingMarkerPropsT } from './types'; +import type { FloatingMarkerProps } from './types'; import { FLOATING_MARKER_ANCHOR_POSITIONS, PINHEAD_SIZES_SHAPES, @@ -42,7 +42,7 @@ const FloatingMarker = ({ startEnhancer, anchorType = FLOATING_MARKER_ANCHOR_TYPES.circle, overrides = {}, -}: FloatingMarkerPropsT) => { +}: FloatingMarkerProps) => { const [, theme] = useStyletron(); const { colors: { backgroundPrimary, backgroundInversePrimary, primaryA, primaryB }, diff --git a/src/map-marker/label-enhancer.tsx b/src/map-marker/label-enhancer.tsx index 43e5f5dbbf..9f22f55ab3 100644 --- a/src/map-marker/label-enhancer.tsx +++ b/src/map-marker/label-enhancer.tsx @@ -12,7 +12,7 @@ import { StyledStrokedLabelContainer, } from './styled-components'; import { LABEL_ENHANCER_POSITIONS } from './constants'; -import type { LabelEhancerComponentT } from './types'; +import type { LabelEhancerComponent } from './types'; const LabelEnhancer = ({ labelEnhancerContent, @@ -20,7 +20,7 @@ const LabelEnhancer = ({ needleHeight, size, overrides = {}, -}: LabelEhancerComponentT) => { +}: LabelEhancerComponent) => { if (!labelEnhancerPosition || labelEnhancerPosition === LABEL_ENHANCER_POSITIONS.none) { return null; } diff --git a/src/map-marker/needle.tsx b/src/map-marker/needle.tsx index 44cc67bfbe..3802295291 100644 --- a/src/map-marker/needle.tsx +++ b/src/map-marker/needle.tsx @@ -8,9 +8,9 @@ import * as React from 'react'; import { getOverrides } from '../helpers/overrides'; import { NEEDLE_HEIGHTS } from './constants'; import { StyledNeedle } from './styled-components'; -import type { NeedlePropsT } from './types'; +import type { NeedleProps } from './types'; -const Needle = ({ size, background, overrides = {} }: NeedlePropsT) => { +const Needle = ({ size, background, overrides = {} }: NeedleProps) => { const [Needle, needleProps] = getOverrides(overrides.Needle, StyledNeedle); return ; }; diff --git a/src/map-marker/pin-head.tsx b/src/map-marker/pin-head.tsx index cf6c735706..a335d50e77 100644 --- a/src/map-marker/pin-head.tsx +++ b/src/map-marker/pin-head.tsx @@ -24,7 +24,7 @@ import { } from './constants'; import BadgeEnhancer from './badge-enhancer'; import LabelEnhancer from './label-enhancer'; -import type { PinHeadPropsT } from './types'; +import type { PinHeadProps } from './types'; const PinHead = ({ size = PINHEAD_SIZES_SHAPES.medium, @@ -41,7 +41,7 @@ const PinHead = ({ badgeEnhancerSize, badgeEnhancerContent, overrides = {}, -}: PinHeadPropsT) => { +}: PinHeadProps) => { const activeElements = [label, StartEnhancer, EndEnhancer].filter((x) => x); const gridTemplateColumns = activeElements.map(() => 'auto').join(' '); const forceCircle = activeElements.length === 1 && !label; diff --git a/src/map-marker/styled-components.ts b/src/map-marker/styled-components.ts index a62a205e0f..81ac9adc56 100644 --- a/src/map-marker/styled-components.ts +++ b/src/map-marker/styled-components.ts @@ -8,15 +8,15 @@ import { styled } from '../styles'; import { BADGE_ENHANCER_STYLES, FLOATING_MARKER_ANCHOR_POSITIONS, LABEL_SIZES } from './constants'; import type { - AnchorPositionsT, - LabelEnhancerPositionT, - BadgeEnhancerSizeT, - BadgePositionT, - PinHeadSizeT, + AnchorPositions, + LabelEnhancerPosition, + BadgeEnhancerSize, + BadgePosition, + PinHeadSize, } from './types'; import type { StyleObject } from 'styletron-react'; -export const getAnchorTransform = (anchor: AnchorPositionsT, anchorSize: number) => +export const getAnchorTransform = (anchor: AnchorPositions, anchorSize: number) => ({ [FLOATING_MARKER_ANCHOR_POSITIONS.none]: ``, [FLOATING_MARKER_ANCHOR_POSITIONS.topLeft]: `translate(${anchorSize}px, ${anchorSize}px)`, @@ -84,7 +84,7 @@ export const StyledFloatingMarkerRoot = styled< export const StyledFloatingMarkerPinHeadContainer = styled< 'div', { - $anchor: AnchorPositionsT; + $anchor: AnchorPositions; $anchorSize: number; } >('div', ({ $theme, $anchor, $anchorSize }) => ({ @@ -224,7 +224,7 @@ export const StyledPinHead = styled< export const StyledStrokedLabelContainer = styled< 'div', { - $position: LabelEnhancerPositionT; + $position: LabelEnhancerPosition; $labelOffset: number; } >('div', ({ $position, $theme, $labelOffset }) => { @@ -273,8 +273,8 @@ export const StyledStrokedLabel = styled< 'div', { $stroked: boolean; - $position: LabelEnhancerPositionT; - $size: PinHeadSizeT; + $position: LabelEnhancerPosition; + $size: PinHeadSize; } >('div', ({ $theme, $size }) => { const strokeWidth = 1.5; @@ -304,8 +304,8 @@ export const StyledStrokedLabel = styled< export const StyledBadgeEnhancerRoot = styled< 'div', { - $size: BadgeEnhancerSizeT; - $position: BadgePositionT; + $size: BadgeEnhancerSize; + $position: BadgePosition; } >('div', ({ $theme, $size, $position }) => { const { x, y } = $position; @@ -334,7 +334,7 @@ export const StyledContentItem = styled< { $color: string; $height: number; - $size: PinHeadSizeT; + $size: PinHeadSize; } >('div', ({ $theme, $color, $height, $size }) => { return { diff --git a/src/map-marker/types.ts b/src/map-marker/types.ts index 0113d7b3c8..48f40be324 100644 --- a/src/map-marker/types.ts +++ b/src/map-marker/types.ts @@ -16,89 +16,89 @@ import { LABEL_ENHANCER_POSITIONS, KIND, } from './constants'; -import type { OverrideT } from '../helpers/overrides'; +import type { Override } from '../helpers/overrides'; -export type AnchorPositionsT = +export type AnchorPositions = typeof FLOATING_MARKER_ANCHOR_POSITIONS[keyof typeof FLOATING_MARKER_ANCHOR_POSITIONS]; -export type NeedleSizeT = typeof NEEDLE_SIZES[keyof typeof NEEDLE_SIZES]; +export type NeedleSize = typeof NEEDLE_SIZES[keyof typeof NEEDLE_SIZES]; -export type PinHeadT = typeof PINHEAD_TYPES[keyof typeof PINHEAD_TYPES]; +export type PinHead = typeof PINHEAD_TYPES[keyof typeof PINHEAD_TYPES]; -export type PinHeadSizeT = typeof PINHEAD_SIZES_SHAPES[keyof typeof PINHEAD_SIZES_SHAPES]; +export type PinHeadSize = typeof PINHEAD_SIZES_SHAPES[keyof typeof PINHEAD_SIZES_SHAPES]; -export type FloatingMarkerSizeT = typeof FLOATING_MARKER_SIZES[keyof typeof FLOATING_MARKER_SIZES]; +export type FloatingMarkerSize = typeof FLOATING_MARKER_SIZES[keyof typeof FLOATING_MARKER_SIZES]; /* eslint-disable flowtype/generic-spacing*/ -export type FloatingMarkerAnchorTypeT = +export type FloatingMarkerAnchorType = typeof FLOATING_MARKER_ANCHOR_TYPES[keyof typeof FLOATING_MARKER_ANCHOR_TYPES]; -export type BadgeEnhancerSizeT = typeof BADGE_ENHANCER_SIZES[keyof typeof BADGE_ENHANCER_SIZES]; +export type BadgeEnhancerSize = typeof BADGE_ENHANCER_SIZES[keyof typeof BADGE_ENHANCER_SIZES]; -export type LabelEnhancerPositionT = +export type LabelEnhancerPosition = typeof LABEL_ENHANCER_POSITIONS[keyof typeof LABEL_ENHANCER_POSITIONS]; -export type KindT = typeof KIND[keyof typeof KIND]; - -export type FixedMarkerOverridesT = { - Root?: OverrideT; - InnerAnchor?: OverrideT; - OuterAnchor?: OverrideT; - PinHead?: OverrideT; - PinHeadContent?: OverrideT; - PinHeadContainer?: OverrideT; - Needle?: OverrideT; - DragShadow?: OverrideT; - DragShadowContainer?: OverrideT; - DragContainer?: OverrideT; - BadgeEnhancer?: OverrideT; - LabelEnhancer?: OverrideT; - LabelEnhancerContainer?: OverrideT; +export type Kind = typeof KIND[keyof typeof KIND]; + +export type FixedMarkerOverrides = { + Root?: Override; + InnerAnchor?: Override; + OuterAnchor?: Override; + PinHead?: Override; + PinHeadContent?: Override; + PinHeadContainer?: Override; + Needle?: Override; + DragShadow?: Override; + DragShadowContainer?: Override; + DragContainer?: Override; + BadgeEnhancer?: Override; + LabelEnhancer?: Override; + LabelEnhancerContainer?: Override; }; -export type NeedlePropsT = { - size: NeedleSizeT; +export type NeedleProps = { + size: NeedleSize; background?: string; - overrides: FixedMarkerOverridesT; + overrides: FixedMarkerOverrides; }; -export type ItemPropsT = { +export type ItemProps = { children?: React.ReactNode; color?: string; size?: number; }; -export type LabelEnhancerT = { +export type LabelEnhancer = { labelEnhancerContent?: string; - labelEnhancerPosition?: LabelEnhancerPositionT; + labelEnhancerPosition?: LabelEnhancerPosition; }; -export type LabelEhancerComponentT = { +export type LabelEhancerComponent = { needleHeight: number; - size: PinHeadSizeT; - overrides?: FixedMarkerOverridesT; -} & LabelEnhancerT; + size: PinHeadSize; + overrides?: FixedMarkerOverrides; +} & LabelEnhancer; -export type BadgeEnhancerT = { - badgeEnhancerSize?: BadgeEnhancerSizeT | null; +export type BadgeEnhancer = { + badgeEnhancerSize?: BadgeEnhancerSize | null; badgeEnhancerContent?: React.ComponentType<{ size: number; }>; }; -export type BadgeEnhancerComponentT = { - pinHeadSize: PinHeadSizeT; - markerType: PinHeadT; - overrides: FixedMarkerOverridesT; -} & BadgeEnhancerT; -export type BadgePositionT = { +export type BadgeEnhancerComponent = { + pinHeadSize: PinHeadSize; + markerType: PinHead; + overrides: FixedMarkerOverrides; +} & BadgeEnhancer; +export type BadgePosition = { x: number; y: number; }; -export type FixedMarkerPropsT = { - size?: PinHeadSizeT; - needle?: NeedleSizeT; +export type FixedMarkerProps = { + size?: PinHeadSize; + needle?: NeedleSize; label?: string; startEnhancer?: React.ComponentType<{ size: number; @@ -106,45 +106,45 @@ export type FixedMarkerPropsT = { endEnhancer?: React.ComponentType<{ size: number; }>; - kind?: KindT; + kind?: Kind; dragging?: boolean; - overrides?: FixedMarkerOverridesT; -} & BadgeEnhancerT & - LabelEnhancerT; - -export type FloatingMarkerOverridesT = { - Root?: OverrideT; - InnerAnchor?: OverrideT; - OuterAnchor?: OverrideT; - PinHead?: OverrideT; - PinHeadContent?: OverrideT; - PinHeadContainer?: OverrideT; - AnchorContainer?: OverrideT; - Needle?: OverrideT; - DragShadow?: OverrideT; - DragShadowContainer?: OverrideT; - DragContainer?: OverrideT; - BadgeEnhancer?: OverrideT; - LabelEnhancer?: OverrideT; - LabelEnhancerContainer?: OverrideT; + overrides?: FixedMarkerOverrides; +} & BadgeEnhancer & + LabelEnhancer; + +export type FloatingMarkerOverrides = { + Root?: Override; + InnerAnchor?: Override; + OuterAnchor?: Override; + PinHead?: Override; + PinHeadContent?: Override; + PinHeadContainer?: Override; + AnchorContainer?: Override; + Needle?: Override; + DragShadow?: Override; + DragShadowContainer?: Override; + DragContainer?: Override; + BadgeEnhancer?: Override; + LabelEnhancer?: Override; + LabelEnhancerContainer?: Override; }; -export type FloatingMarkerPropsT = { +export type FloatingMarkerProps = { label?: string; - anchor?: AnchorPositionsT; + anchor?: AnchorPositions; endEnhancer?: React.ComponentType<{ size: number; }>; startEnhancer?: React.ComponentType<{ size: number; }>; - anchorType?: FloatingMarkerAnchorTypeT; - size?: FloatingMarkerSizeT; - overrides?: FloatingMarkerOverridesT; + anchorType?: FloatingMarkerAnchorType; + size?: FloatingMarkerSize; + overrides?: FloatingMarkerOverrides; }; -export type PinHeadPropsT = { - size?: PinHeadSizeT; +export type PinHeadProps = { + size?: PinHeadSize; label?: string; endEnhancer?: React.ComponentType<{ size: number; @@ -154,16 +154,16 @@ export type PinHeadPropsT = { }>; color: string; background: string; - type?: PinHeadT; - anchorType?: FloatingMarkerAnchorTypeT; - needle?: NeedleSizeT; - overrides?: FloatingMarkerOverridesT | FixedMarkerOverridesT; -} & BadgeEnhancerT & - LabelEnhancerT; - -export type DragShadowPropsT = { + type?: PinHead; + anchorType?: FloatingMarkerAnchorType; + needle?: NeedleSize; + overrides?: FloatingMarkerOverrides | FixedMarkerOverrides; +} & BadgeEnhancer & + LabelEnhancer; + +export type DragShadowProps = { background: string; dragging: boolean; height: number; - overrides: FixedMarkerOverridesT; + overrides: FixedMarkerOverrides; }; diff --git a/src/menu/index.ts b/src/menu/index.ts index a1765118b8..635b14edb2 100644 --- a/src/menu/index.ts +++ b/src/menu/index.ts @@ -27,4 +27,4 @@ export { } from './styled-components'; // Flow export * from './types'; -export type { MenuLocaleT } from './locale'; +export type { MenuLocale } from './locale'; diff --git a/src/menu/locale.ts b/src/menu/locale.ts index 61cf7e745d..f6949cd00e 100644 --- a/src/menu/locale.ts +++ b/src/menu/locale.ts @@ -4,12 +4,12 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -export type MenuLocaleT = { +export type MenuLocale = { noResultsMsg: string; parentMenuItemAriaLabel: string; }; -const locale: MenuLocaleT = { +const locale: MenuLocale = { noResultsMsg: 'No results', parentMenuItemAriaLabel: `You are currently at an item that opens a nested listbox. Press right arrow to enter that element and left arrow to return.`, }; diff --git a/src/menu/maybe-child-menu.tsx b/src/menu/maybe-child-menu.tsx index 2e41b914a9..314168a1a0 100644 --- a/src/menu/maybe-child-menu.tsx +++ b/src/menu/maybe-child-menu.tsx @@ -9,23 +9,23 @@ import * as React from 'react'; import { NestedMenuContext } from './nested-menus'; import { Popover } from '../popover'; -import type { OverrideT } from '../helpers/overrides'; +import type { Override } from '../helpers/overrides'; import { getOverrides, mergeOverrides } from '../helpers/overrides'; -import type { ItemT } from './types'; +import type { Item } from './types'; -type PropsT = { - getChildMenu: ((item: ItemT) => React.ReactNode) | undefined | null; +type Props = { + getChildMenu: ((item: Item) => React.ReactNode) | undefined | null; isOpen: boolean; - item: ItemT; + item: Item; resetParentMenu: () => void; renderAll?: boolean; onClick?: (event: React.MouseEvent) => unknown; overrides?: { - ChildMenuPopover?: OverrideT; + ChildMenuPopover?: Override; }; }; -const MaybeChildMenu: React.FC = (props): React.ReactElement => { +const MaybeChildMenu: React.FC = (props): React.ReactElement => { if (!props.getChildMenu) { // @ts-expect-error todo(flow->ts): children should be of type ReactElement or null return props.children; diff --git a/src/menu/menu.tsx b/src/menu/menu.tsx index 0bb63a4c40..0cd8526ba4 100644 --- a/src/menu/menu.tsx +++ b/src/menu/menu.tsx @@ -11,14 +11,14 @@ import { StyledList, StyledEmptyState, StyledOptgroupHeader } from './styled-com import OptionList from './option-list'; import { getOverrides } from '../helpers/overrides'; // Types -import type { RenderItemPropsT, StatelessMenuPropsT } from './types'; -import type { LocaleT } from '../locale'; +import type { RenderItemProps, StatelessMenuProps } from './types'; +import type { Locale } from '../locale'; import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible'; import type { SyntheticEvent } from 'react'; -export default function Menu(props: StatelessMenuPropsT) { +export default function Menu(props: StatelessMenuProps) { const { overrides = {}, 'aria-label': ariaLabel = 'Menu', @@ -64,7 +64,7 @@ export default function Menu(props: StatelessMenuPropsT) { } const groupItems = groupedItems[optgroup].map((item, index) => { itemIndex = itemIndex + 1; - const { getRequiredItemProps = (item, index) => ({} as RenderItemPropsT) } = props; + const { getRequiredItemProps = (item, index) => ({} as RenderItemProps) } = props; const { disabled, @@ -101,7 +101,7 @@ export default function Menu(props: StatelessMenuPropsT) { return ( - {(locale: LocaleT) => ( + {(locale: Locale) => ( ({ +export const NestedMenuContext = React.createContext({ addMenuToNesting: () => {}, removeMenuFromNesting: () => {}, // @ts-expect-error todo(flow->ts): incorrect default value @@ -38,7 +38,7 @@ function isSame(a?: HTMLElement | null, b?: HTMLElement | null) { return a.isSameNode(b); } -export default class NestedMenus extends React.Component { +export default class NestedMenus extends React.Component { state = { menus: [], nestedMenuHoverIndex: -1 }; mountRef = React.createRef() as { current: HTMLElement | null; @@ -66,7 +66,7 @@ export default class NestedMenus extends React.Component { } }; - addMenuToNesting = (ref: NestedMenuRefT) => { + addMenuToNesting = (ref: NestedMenuRef) => { // check offsetHeight to determine if component is visible in the dom (0 means hidden) // we need to do this so that when we renderAll, the hidden seo-only child-menus don't // register themselves which would break the nesting logic @@ -81,7 +81,7 @@ export default class NestedMenus extends React.Component { } }; - removeMenuFromNesting = (ref: NestedMenuRefT) => { + removeMenuFromNesting = (ref: NestedMenuRef) => { this.setState((state) => { for (const r of this.state.menus) { if (r.current && isSame(r.current, ref.current)) { @@ -99,21 +99,21 @@ export default class NestedMenus extends React.Component { }); }; - findMenuIndexByRef = (ref: NestedMenuRefT) => { + findMenuIndexByRef = (ref: NestedMenuRef) => { return this.state.menus.findIndex((r) => isSame(r.current, ref.current)); }; - getParentMenu = (ref: NestedMenuRefT): NestedMenuRefT | undefined | null => { + getParentMenu = (ref: NestedMenuRef): NestedMenuRef | undefined | null => { const index = this.findMenuIndexByRef(ref) - 1; return this.state.menus[index]; }; - getChildMenu = (ref: NestedMenuRefT): NestedMenuRefT | undefined | null => { + getChildMenu = (ref: NestedMenuRef): NestedMenuRef | undefined | null => { const index = this.findMenuIndexByRef(ref) + 1; return this.state.menus[index]; }; - isNestedMenuVisible = (ref: NestedMenuRefT): boolean => { + isNestedMenuVisible = (ref: NestedMenuRef): boolean => { const index = this.findMenuIndexByRef(ref); return index <= this.state.nestedMenuHoverIndex; }; diff --git a/src/menu/option-list.tsx b/src/menu/option-list.tsx index 127f5a4ea7..de8b3db205 100644 --- a/src/menu/option-list.tsx +++ b/src/menu/option-list.tsx @@ -12,10 +12,10 @@ import { getOverrides } from '../helpers/overrides'; import { OPTION_LIST_SIZE } from './constants'; import MaybeChildMenu from './maybe-child-menu'; import { StyledListItem, StyledListItemAnchor } from './styled-components'; -import type { OptionListPropsT } from './types'; +import type { OptionListProps } from './types'; function OptionList( - props: OptionListPropsT, + props: OptionListProps, ref?: | { current: null | HTMLElement; @@ -112,7 +112,7 @@ function compare(prevProps, nextProps) { ); } -const forwarded = React.forwardRef(OptionList); +const forwarded = React.forwardRef(OptionList); forwarded.displayName = 'OptionList'; -export default React.memo(forwarded, compare); +export default React.memo(forwarded, compare); diff --git a/src/menu/option-profile.tsx b/src/menu/option-profile.tsx index 5518f553d2..7297195aef 100644 --- a/src/menu/option-profile.tsx +++ b/src/menu/option-profile.tsx @@ -19,9 +19,9 @@ import { } from './styled-components'; import { getOverrides } from '../helpers/overrides'; // Types -import type { OptionProfilePropsT } from './types'; +import type { OptionProfileProps } from './types'; -function OptionProfile(props: OptionProfilePropsT, ref: React.RefObject) { +function OptionProfile(props: OptionProfileProps, ref: React.RefObject) { const { item, getChildMenu, @@ -93,7 +93,7 @@ function OptionProfile(props: OptionProfilePropsT, ref: React.RefObject) { ); } -const forwarded = React.forwardRef(OptionProfile); +const forwarded = React.forwardRef(OptionProfile); forwarded.displayName = 'OptionProfile'; export default forwarded; diff --git a/src/menu/stateful-container.tsx b/src/menu/stateful-container.tsx index a39bb96632..b636b777c9 100644 --- a/src/menu/stateful-container.tsx +++ b/src/menu/stateful-container.tsx @@ -10,17 +10,17 @@ import { STATE_CHANGE_TYPES, KEY_STRINGS } from './constants'; import { scrollItemIntoView } from './utils'; // Types import type { - StatefulContainerPropsT, - StatefulContainerStateT, - GetRequiredItemPropsFnT, - RenderPropsT, - StateReducerFnT, - ItemT, + StatefulContainerProps, + StatefulContainerState, + GetRequiredItemPropsFn, + RenderProps, + StateReducerFn, + Item, } from './types'; import { useUIDSeed } from 'react-uid'; import type { MouseEvent } from 'react'; -import { RenderItemPropsT } from './types'; +import { RenderItemProps } from './types'; const DEFAULT_PROPS = { // keeping it in defaultProps to satisfy Flow @@ -33,7 +33,7 @@ const DEFAULT_PROPS = { keyboardControlNode: { current: null } as { current: null | HTMLElement; }, - stateReducer: ((changeType, changes) => changes) as StateReducerFnT, + stateReducer: ((changeType, changes) => changes) as StateReducerFn, onItemSelect: () => {}, getRequiredItemProps: () => ({}), children: () => null, @@ -48,16 +48,16 @@ const DEFAULT_PROPS = { }; class MenuStatefulContainerInner extends React.Component< - StatefulContainerPropsT & { + StatefulContainerProps & { uidSeed: (item: number) => string; } & { - getRequiredItemProps: GetRequiredItemPropsFnT; + getRequiredItemProps: GetRequiredItemPropsFn; }, - StatefulContainerStateT + StatefulContainerState > { static defaultProps = DEFAULT_PROPS; - state: StatefulContainerStateT = { + state: StatefulContainerState = { // @ts-expect-error todo(flow->ts): probably MenuStatefulContainer should be used instead of this.constructor ...this.constructor.defaultProps.initialState, ...this.props.initialState, @@ -118,7 +118,7 @@ class MenuStatefulContainerInner extends React.Component< } } - componentDidUpdate(prevProps: StatefulContainerPropsT, prevState: StatefulContainerStateT) { + componentDidUpdate(prevProps: StatefulContainerProps, prevState: StatefulContainerState) { if (__BROWSER__) { if (!prevState.isFocused && this.state.isFocused) { if (this.keyboardControlNode) @@ -169,7 +169,7 @@ class MenuStatefulContainerInner extends React.Component< internalSetState( changeType: keyof typeof STATE_CHANGE_TYPES, - changes: Partial + changes: Partial ) { const { stateReducer } = this.props; @@ -331,7 +331,7 @@ class MenuStatefulContainerInner extends React.Component< } }; - handleItemClick = (index: number, item: ItemT, event: React.MouseEvent) => { + handleItemClick = (index: number, item: Item, event: React.MouseEvent) => { if (this.props.onItemSelect && !item.disabled) { this.props.onItemSelect({ item, event }); this.internalSetState(STATE_CHANGE_TYPES.click, { @@ -350,7 +350,7 @@ class MenuStatefulContainerInner extends React.Component< handleMouseLeave = (event: MouseEvent) => {}; - getRequiredItemProps: GetRequiredItemPropsFnT = (item, index) => { + getRequiredItemProps: GetRequiredItemPropsFn = (item, index) => { let itemRef = this.refList[index]; if (!itemRef) { itemRef = React.createRef(); @@ -378,7 +378,7 @@ class MenuStatefulContainerInner extends React.Component< onMouseEnter: this.handleMouseEnter.bind(this, index), }), ...requiredItemProps, - } as RenderItemPropsT; + } as RenderItemProps; }; focusMenu = (event: FocusEvent | MouseEvent | KeyboardEvent) => { @@ -443,12 +443,12 @@ class MenuStatefulContainerInner extends React.Component< handleKeyDown: this.props.keyboardControlNode.current ? (event) => {} : this.onKeyDown, focusMenu: this.focusMenu, unfocusMenu: this.unfocusMenu, - } as RenderPropsT); + } as RenderProps); } } // Remove when MenuStatefulContainer is converted to a functional component. -const MenuStatefulContainer = (props: StatefulContainerPropsT) => { +const MenuStatefulContainer = (props: StatefulContainerProps) => { //$FlowExpectedError[cannot-spread-inexact] return ; }; diff --git a/src/menu/stateful-menu.tsx b/src/menu/stateful-menu.tsx index 025b3cdc9a..0ebac05346 100644 --- a/src/menu/stateful-menu.tsx +++ b/src/menu/stateful-menu.tsx @@ -11,9 +11,9 @@ import Menu from './menu'; import { NestedMenuContext } from './nested-menus'; import StatefulContainer from './stateful-container'; -import type { StatefulMenuPropsT } from './types'; +import type { StatefulMenuProps } from './types'; -export default class StatefulMenu extends React.PureComponent { +export default class StatefulMenu extends React.PureComponent { render() { const { overrides, ...props } = this.props; return ( diff --git a/src/menu/styled-components.tsx b/src/menu/styled-components.tsx index 66c14acd47..0f9e413a5c 100644 --- a/src/menu/styled-components.tsx +++ b/src/menu/styled-components.tsx @@ -8,7 +8,7 @@ import * as React from 'react'; import { styled, withWrapper } from '../styles'; import { OPTION_LIST_SIZE } from './constants'; -type StyledPropsT = { +type StyledProps = { $disabled?: boolean; $isFocused?: boolean; $isFocusVisible?: boolean; @@ -16,7 +16,7 @@ type StyledPropsT = { $size?: keyof typeof OPTION_LIST_SIZE; }; -export const StyledList = styled<'ul', StyledPropsT>('ul', ({ $theme, $isFocusVisible }) => { +export const StyledList = styled<'ul', StyledProps>('ul', ({ $theme, $isFocusVisible }) => { return { backgroundColor: $theme.colors.menuFill, position: 'relative', @@ -68,7 +68,7 @@ function getBackgroundColor(props) { return 'transparent'; } -export const StyledEmptyState = styled<'li', StyledPropsT>('li', (props) => { +export const StyledEmptyState = styled<'li', StyledProps>('li', (props) => { const { $theme, $size } = props; return { ...($size === OPTION_LIST_SIZE.compact ? $theme.typography.font100 : $theme.typography.font200), @@ -98,13 +98,13 @@ export const StyledOptgroupHeader = styled('li', (props) => { paddingLeft: paddingX, }; }); -export const StyledListItemAnchor = styled<'a', StyledPropsT>('a', (props) => { +export const StyledListItemAnchor = styled<'a', StyledProps>('a', (props) => { return { display: 'block', color: getFontColor(props), }; }); -export const StyledListItemElement = styled<'li', StyledPropsT>('li', (props) => { +export const StyledListItemElement = styled<'li', StyledProps>('li', (props) => { const { $disabled, $theme, $size } = props; return { ...($size === OPTION_LIST_SIZE.compact ? $theme.typography.font100 : $theme.typography.font200), @@ -139,7 +139,7 @@ export const StyledListItem = withWrapper('li', ({ $theme }) => ({ +export const StyledListItemProfile = styled<'li', StyledProps>('li', ({ $theme }) => ({ position: 'relative', display: 'flex', alignItems: 'center', @@ -173,7 +173,7 @@ export const StyledProfileImg = styled('img', { borderBottomLeftRadius: '50%', }); -export const StyledProfileLabelsContainer = styled<'div', StyledPropsT>( +export const StyledProfileLabelsContainer = styled<'div', StyledProps>( 'div', ({ $theme: { direction, sizing } }) => ({ alignSelf: direction === 'rtl' ? 'flex-end' : 'flex-start', @@ -183,7 +183,7 @@ export const StyledProfileLabelsContainer = styled<'div', StyledPropsT>( }) ); -export const StyledProfileTitle = styled<'h6', StyledPropsT>('h6', ({ $theme }) => ({ +export const StyledProfileTitle = styled<'h6', StyledProps>('h6', ({ $theme }) => ({ ...$theme.typography.font350, color: $theme.colors.contentPrimary, marginTop: 0, @@ -192,7 +192,7 @@ export const StyledProfileTitle = styled<'h6', StyledPropsT>('h6', ({ $theme }) marginRight: 0, })); -export const StyledProfileSubtitle = styled<'p', StyledPropsT>('p', ({ $theme }) => ({ +export const StyledProfileSubtitle = styled<'p', StyledProps>('p', ({ $theme }) => ({ ...$theme.typography.font200, color: $theme.colors.contentPrimary, marginTop: 0, @@ -201,7 +201,7 @@ export const StyledProfileSubtitle = styled<'p', StyledPropsT>('p', ({ $theme }) marginRight: 0, })); -export const StyledProfileBody = styled<'p', StyledPropsT>('p', ({ $theme }) => ({ +export const StyledProfileBody = styled<'p', StyledProps>('p', ({ $theme }) => ({ ...$theme.typography.font100, color: $theme.colors.contentPrimary, marginTop: 0, diff --git a/src/menu/types.ts b/src/menu/types.ts index c37885ef84..5a5ff54a81 100644 --- a/src/menu/types.ts +++ b/src/menu/types.ts @@ -5,54 +5,54 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import * as React from 'react'; -import type { OverrideT } from '../helpers/overrides'; +import type { Override } from '../helpers/overrides'; import { STATE_CHANGE_TYPES, OPTION_LIST_SIZE } from './constants'; import type { SyntheticEvent, FocusEvent, MouseEvent } from 'react'; -export type ItemT = any; -export type ArrayItemsT = ReadonlyArray; -export type GroupedItemsT = { - __ungrouped: ArrayItemsT; - [x: string]: ArrayItemsT; +export type Item = any; +export type ArrayItems = ReadonlyArray; +export type GroupedItems = { + __ungrouped: ArrayItems; + [x: string]: ArrayItems; }; -export type ItemsT = ArrayItemsT | GroupedItemsT; +export type Items = ArrayItems | GroupedItems; -export type GetItemLabelFnT = (item: ItemT) => React.ReactNode; +export type GetItemLabelFn = (item: Item) => React.ReactNode; -export type GetProfileItemLabelsFnT = (item: ItemT) => { +export type GetProfileItemLabelsFn = (item: Item) => { title?: string; subtitle?: string; body?: string; }; -export type GetProfileItemImgFnT = (item: ItemT) => string | React.ComponentType; +export type GetProfileItemImgFn = (item: Item) => string | React.ComponentType; -export type GetProfileItemImgTextFnT = (item: ItemT) => string; +export type GetProfileItemImgTextFn = (item: Item) => string; -export type SetRootRefFnT = (ref: React.RefObject) => void; +export type SetRootRefFn = (ref: React.RefObject) => void; -export type RootRefT = { +export type RootRef = { current: null | HTMLElement; }; -export type OnItemSelectFnT = (a: { - item: ItemT; +export type OnItemSelectFn = (a: { + item: Item; event?: SyntheticEvent | KeyboardEvent; }) => unknown; -export type ProfileOverridesT = { - List?: OverrideT; - ListItemProfile?: OverrideT; - ProfileImgContainer?: OverrideT; - ProfileImg?: OverrideT; - ProfileLabelsContainer?: OverrideT; - ProfileTitle?: OverrideT; - ProfileSubtitle?: OverrideT; - ProfileBody?: OverrideT; +export type ProfileOverrides = { + List?: Override; + ListItemProfile?: Override; + ProfileImgContainer?: Override; + ProfileImg?: Override; + ProfileLabelsContainer?: Override; + ProfileTitle?: Override; + ProfileSubtitle?: Override; + ProfileBody?: Override; }; -export type RenderItemPropsT = { +export type RenderItemProps = { disabled?: boolean; ref?: React.RefObject; id?: string | null; @@ -64,15 +64,15 @@ export type RenderItemPropsT = { resetMenu?: () => void; }; -export type GetRequiredItemPropsFnT = (item: ItemT, index: number) => RenderItemPropsT; +export type GetRequiredItemPropsFn = (item: Item, index: number) => RenderItemProps; -export type StateReducerFnT = ( +export type StateReducerFn = ( changeType: keyof typeof STATE_CHANGE_TYPES | undefined | null, - changes: Partial, - currentState: StatefulContainerStateT -) => StatefulContainerStateT; + changes: Partial, + currentState: StatefulContainerState +) => StatefulContainerState; -export type StatefulContainerStateT = { +export type StatefulContainerState = { // id of the currently highlighted item (from keyboard control) activedescendantId?: string | null; // index of currently highlighted item (from keyboard control) @@ -82,7 +82,7 @@ export type StatefulContainerStateT = { isFocused: boolean; }; -export type InitialStateT = { +export type InitialState = { // id of the currently highlighted item (from keyboard control) activedescendantId?: string | null; // index of currently highlighted item (from keyboard control) @@ -92,9 +92,9 @@ export type InitialStateT = { isFocused?: boolean; }; -export type RenderPropsT = StatefulContainerStateT & { - items: ItemsT; - getRequiredItemProps: GetRequiredItemPropsFnT; +export type RenderProps = StatefulContainerState & { + items: Items; + getRequiredItemProps: GetRequiredItemPropsFn; }; /** @@ -104,22 +104,22 @@ export type RenderPropsT = StatefulContainerStateT & { * marked as required because otherwise defaultProps will not work properly */ -export type StatefulContainerPropsT = { +export type StatefulContainerProps = { /** List of menu items. */ - items: ItemsT; + items: Items; /** Initial state of the stateful menu. */ - initialState: InitialStateT; + initialState: InitialState; /** State reducer to intercept state changes and return new internal state */ - stateReducer: StateReducerFnT; + stateReducer: StateReducerFn; /** Function to get props for each rendered item. This will have some defaults needed for keyboard * bindings to work properly. Every rendered item should call this. */ - getRequiredItemProps: GetRequiredItemPropsFnT; + getRequiredItemProps: GetRequiredItemPropsFn; onActiveDescendantChange?: (id?: string) => unknown; /** Callback executed on menu item clicks. */ - onItemSelect: OnItemSelectFnT; + onItemSelect: OnItemSelectFn; /** Ref for the menu container element. Used to capture key events for navigation */ - rootRef?: RootRefT; + rootRef?: RootRef; /** Node for menu's keyboard listener. Default is null and keyboard handlers will listen on menu root. */ keyboardControlNode: { current: HTMLElement | null; @@ -127,7 +127,7 @@ export type StatefulContainerPropsT = { /** whether has keyboard type-ahead function */ typeAhead: boolean; /** Child as function pattern. */ - children: (a: RenderPropsT) => React.ReactNode; + children: (a: RenderProps) => React.ReactNode; addMenuToNesting?: (ref: { current: HTMLElement | null }) => void; removeMenuFromNesting?: (ref: { current: HTMLElement | null }) => void; getParentMenu?: (ref: { current: HTMLElement | null }) => @@ -147,29 +147,29 @@ export type StatefulContainerPropsT = { forceHighlight: boolean; }; -export type MenuPropsT = { +export type MenuProps = { overrides?: { - EmptyState?: OverrideT; - List?: OverrideT; - Option?: OverrideT; - OptgroupHeader?: OverrideT; - ListItem?: OverrideT; + EmptyState?: Override; + List?: Override; + Option?: Override; + OptgroupHeader?: Override; + ListItem?: Override; }; /** Renders all menu content for SEO purposes regardless of menu state */ renderAll?: boolean; }; -export type MenuProfilePropsT = { +export type MenuProfileProps = { /** Returns an object consisting of title, subtitle, and body to render menu item */ - getProfileItemLabels: GetProfileItemLabelsFnT; + getProfileItemLabels: GetProfileItemLabelsFn; /** Returns either an image source url, or a full React component to render as the image. */ - getProfileItemImg: GetProfileItemImgFnT; + getProfileItemImg: GetProfileItemImgFn; /** Returns the alt text for the image */ - getProfileItemImgText: GetProfileItemImgTextFnT; - overrides?: ProfileOverridesT; + getProfileItemImgText: GetProfileItemImgTextFn; + overrides?: ProfileOverrides; }; -export type SharedStatelessPropsT = { +export type SharedStatelessProps = { /** Id of the highlighted menu item. */ activedescendantId?: string | null; /** Function to get props for each rendered item. This will have some defaults needed for keyboard @@ -177,42 +177,42 @@ export type SharedStatelessPropsT = { */ /** Passed to the top level menu element. */ 'aria-label'?: string; - getRequiredItemProps?: GetRequiredItemPropsFnT; + getRequiredItemProps?: GetRequiredItemPropsFn; isFocused?: boolean; handleMouseLeave?: (event: MouseEvent) => unknown; /** Index of highlighted menu item. */ highlightedIndex?: number; /** List of menu items. */ - items: ItemsT; + items: Items; /** Message to be displayed if no menu items are passed in. */ noResultsMsg?: React.ReactNode; onBlur?: (event: FocusEvent) => unknown; onFocus?: (event: FocusEvent) => unknown; /** Ref for the menu container element. Used to capture key events for navigation */ - rootRef?: RootRefT; + rootRef?: RootRef; focusMenu?: (event: FocusEvent | MouseEvent | KeyboardEvent) => unknown; unfocusMenu?: () => unknown; handleKeyDown?: (event: KeyboardEvent) => unknown; }; -export type StatefulMenuPropsT = { +export type StatefulMenuProps = { /** List of menu items. */ - items: ItemsT; + items: Items; /** Initial state of the stateful menu. */ - initialState?: InitialStateT; + initialState?: InitialState; /** State reducer to intercept state changes and return new internal state */ - stateReducer?: StateReducerFnT; + stateReducer?: StateReducerFn; /** Function to get props for each rendered item. This will have some defaults needed for keyboard * bindings to work properly. Every rendered item should call this. */ - getRequiredItemProps?: GetRequiredItemPropsFnT; + getRequiredItemProps?: GetRequiredItemPropsFn; onActiveDescendantChange?: (id?: string) => unknown; /** Callback executed on menu item clicks. */ - onItemSelect?: OnItemSelectFnT; + onItemSelect?: OnItemSelectFn; /** Ref for the menu container element. Used to capture key events for navigation */ - rootRef?: RootRefT; + rootRef?: RootRef; /** Child as function pattern. */ - children?: (a: RenderPropsT) => React.ReactNode; + children?: (a: RenderProps) => React.ReactNode; /** whether has keyboard type-ahead function */ typeAhead?: boolean; addMenuToNesting?: (ref: { current: HTMLElement | null }) => void; @@ -231,21 +231,21 @@ export type StatefulMenuPropsT = { | null; nestedMenuHoverIndex?: number; isNestedMenuVisible?: (ref: { current: HTMLElement | null }) => boolean; -} & MenuPropsT; +} & MenuProps; -export type StatefulMenuProfilePropsT = StatefulContainerPropsT & MenuProfilePropsT; +export type StatefulMenuProfileProps = StatefulContainerProps & MenuProfileProps; -export type StatelessMenuPropsT = SharedStatelessPropsT & MenuPropsT; +export type StatelessMenuProps = SharedStatelessProps & MenuProps; -export type StatelessMenuProfilePropsT = SharedStatelessPropsT & MenuProfilePropsT; +export type StatelessMenuProfileProps = SharedStatelessProps & MenuProfileProps; -export type OptionListPropsT = { +export type OptionListProps = { /** Item to parse and render. */ - item: ItemT; + item: Item; /** Function used to get the string label for each item. */ - getItemLabel: GetItemLabelFnT; + getItemLabel: GetItemLabelFn; /** Used to render a sub menu at this menu item. You'll often render another menu from this function. */ - getChildMenu?: (item: ItemT) => React.ReactNode; + getChildMenu?: (item: Item) => React.ReactNode; onClick?: (event: MouseEvent) => unknown; /** Callback used to change highlighted index in stateful menu. */ onMouseDown?: (event: MouseEvent) => unknown; @@ -254,9 +254,9 @@ export type OptionListPropsT = { /** Renders UI in defined scale. */ size?: keyof typeof OPTION_LIST_SIZE; overrides?: { - ListItem?: OverrideT; - ListItemAnchor?: OverrideT; - ChildMenuPopover?: OverrideT; + ListItem?: Override; + ListItemAnchor?: Override; + ChildMenuPopover?: Override; }; renderHrefAsAnchor?: boolean; /** Utility to reset menu to default state. Useful for rendering child menus. */ @@ -279,26 +279,26 @@ export type OptionListPropsT = { role?: string; }; -export type OptionProfilePropsT = { +export type OptionProfileProps = { /** Item to parse and render. */ - item: ItemT; + item: Item; /** Used to render a sub menu at this menu item. You'll often render another menu from this function. */ - getChildMenu?: (item: ItemT) => React.ReactNode; + getChildMenu?: (item: Item) => React.ReactNode; /** Returns an object consisting of title, subtitle, and body to render menu item */ - getProfileItemLabels: GetProfileItemLabelsFnT; + getProfileItemLabels: GetProfileItemLabelsFn; /** Returns either an image source url, or a full React component to render as the image. */ - getProfileItemImg: GetProfileItemImgFnT; + getProfileItemImg: GetProfileItemImgFn; /** Returns the alt text for the image */ - getProfileItemImgText: GetProfileItemImgTextFnT; + getProfileItemImgText: GetProfileItemImgTextFn; overrides?: { - ListItemProfile?: OverrideT; - ProfileImgContainer?: OverrideT; - ProfileImg?: OverrideT; - ProfileLabelsContainer?: OverrideT; - ProfileTitle?: OverrideT; - ProfileSubtitle?: OverrideT; - ProfileBody?: OverrideT; - ChildMenuPopover?: OverrideT; + ListItemProfile?: Override; + ProfileImgContainer?: Override; + ProfileImg?: Override; + ProfileLabelsContainer?: Override; + ProfileTitle?: Override; + ProfileSubtitle?: Override; + ProfileBody?: Override; + ChildMenuPopover?: Override; }; /** Utility to reset menu to default state. Useful for rendering child menus. */ resetMenu?: () => void; @@ -308,15 +308,15 @@ export type OptionProfilePropsT = { renderAll?: boolean; }; -export type NestedMenuRefT = { +export type NestedMenuRef = { current: HTMLElement | null; }; -export type NestedMenuContextT = { - addMenuToNesting: (ref: NestedMenuRefT) => void; - removeMenuFromNesting: (ref: NestedMenuRefT) => void; - getParentMenu: (ref: NestedMenuRefT) => NestedMenuRefT | undefined | null; - getChildMenu: (ref: NestedMenuRefT) => NestedMenuRefT | undefined | null; +export type NestedMenuContextProps = { + addMenuToNesting: (ref: NestedMenuRef) => void; + removeMenuFromNesting: (ref: NestedMenuRef) => void; + getParentMenu: (ref: NestedMenuRef) => NestedMenuRef | undefined | null; + getChildMenu: (ref: NestedMenuRef) => NestedMenuRef | undefined | null; nestedMenuHoverIndex: number; - isNestedMenuVisible: (ref: NestedMenuRefT) => boolean; - mountRef: NestedMenuRefT; + isNestedMenuVisible: (ref: NestedMenuRef) => boolean; + mountRef: NestedMenuRef; }; diff --git a/src/modal/index.ts b/src/modal/index.ts index 20ad389f57..7055f3448c 100644 --- a/src/modal/index.ts +++ b/src/modal/index.ts @@ -18,4 +18,4 @@ export { ModalFooter, } from './styled-components'; export * from './types'; -export type { ModalLocaleT } from './locale'; +export type { ModalLocale } from './locale'; diff --git a/src/modal/locale.ts b/src/modal/locale.ts index 59fb6aed56..7debeb6197 100644 --- a/src/modal/locale.ts +++ b/src/modal/locale.ts @@ -4,7 +4,7 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -export type ModalLocaleT = { +export type ModalLocale = { close: string; }; diff --git a/src/modal/modal.tsx b/src/modal/modal.tsx index 0adfc2f493..252246a1d2 100644 --- a/src/modal/modal.tsx +++ b/src/modal/modal.tsx @@ -21,13 +21,13 @@ import { } from './styled-components'; import { CloseIcon } from './close-icon'; -import type { ModalPropsT, ModalStateT, SharedStylePropsArgT, CloseSourceT } from './types'; +import type { ModalProps, ModalState, SharedStylePropsArg, CloseSource } from './types'; import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible'; import type { SyntheticEvent } from 'react'; -class Modal extends React.Component { - static defaultProps: Partial = { +class Modal extends React.Component { + static defaultProps: Partial = { animate: true, autoFocus: true, focusLock: true, @@ -70,7 +70,7 @@ class Modal extends React.Component { this.clearTimers(); } - componentDidUpdate(prevProps: ModalPropsT, prevState: ModalStateT) { + componentDidUpdate(prevProps: ModalProps, prevState: ModalState) { const { isOpen } = this.props; if ( // If isOpen is changing *or* we just mounted and modal should be open @@ -178,7 +178,7 @@ class Modal extends React.Component { this.animateOutTimer = setTimeout(this.animateOutComplete, 500); } - triggerClose(source?: CloseSourceT) { + triggerClose(source?: CloseSource) { // If there's no source, it just means the isOpen prop changed. No need to call onClose. if (this.props.onClose && source) { this.props.onClose({ @@ -193,7 +193,7 @@ class Modal extends React.Component { }); }; - getSharedProps(): Omit { + getSharedProps(): Omit { const { animate, isOpen, size, role, closeable } = this.props; return { $animate: animate, diff --git a/src/modal/styled-components.ts b/src/modal/styled-components.ts index 5dbb0426d7..ff6043438a 100644 --- a/src/modal/styled-components.ts +++ b/src/modal/styled-components.ts @@ -6,13 +6,13 @@ LICENSE file in the root directory of this source tree. */ import { styled } from '../styles'; import { SIZE, SIZE_WIDTHS } from './constants'; -import type { SharedStylePropsArgT, SizePropT } from './types'; +import type { SharedStylePropsArg, SizeProp } from './types'; import type { StyleObject } from 'styletron-react'; -type SizeStyleT = Pick; +type SizeStyle = Pick; -function getSizeStyles($size: SizePropT): SizeStyleT { - const styles: SizeStyleT = { +function getSizeStyles($size: SizeProp): SizeStyle { + const styles: SizeStyle = { maxWidth: '100%', width: null, }; @@ -31,7 +31,7 @@ function getSizeStyles($size: SizePropT): SizeStyleT { return styles; } -export const Root = styled<'div', SharedStylePropsArgT>('div', (props) => { +export const Root = styled<'div', SharedStylePropsArg>('div', (props) => { const { $isOpen } = props; return { position: 'fixed', @@ -44,7 +44,7 @@ export const Root = styled<'div', SharedStylePropsArgT>('div', (props) => { }; }); -export const DialogContainer = styled<'div', SharedStylePropsArgT>('div', (props) => { +export const DialogContainer = styled<'div', SharedStylePropsArg>('div', (props) => { const { $animate, $isOpen, $isVisible, $theme } = props; const animationRules = { transitionProperty: 'opacity', @@ -68,7 +68,7 @@ export const DialogContainer = styled<'div', SharedStylePropsArgT>('div', (props }; }); -export const Dialog = styled<'div', SharedStylePropsArgT>('div', (props): StyleObject => { +export const Dialog = styled<'div', SharedStylePropsArg>('div', (props): StyleObject => { const { $animate, $isOpen, $isVisible, $size, $theme } = props; return { position: 'relative', @@ -104,7 +104,7 @@ export const Dialog = styled<'div', SharedStylePropsArgT>('div', (props): StyleO }; }); -export const Close = styled<'button', SharedStylePropsArgT>('button', (props) => { +export const Close = styled<'button', SharedStylePropsArg>('button', (props) => { const { $theme, $isFocusVisible } = props; const dir: string = $theme.direction === 'rtl' ? 'left' : 'right'; return { diff --git a/src/modal/types.ts b/src/modal/types.ts index 3b6fefdb6a..bb9f8a0a8a 100644 --- a/src/modal/types.ts +++ b/src/modal/types.ts @@ -6,26 +6,26 @@ LICENSE file in the root directory of this source tree. */ /* eslint-disable flowtype/generic-spacing */ import * as React from 'react'; -import type { OverrideT } from '../helpers/overrides'; +import type { Override } from '../helpers/overrides'; import { SIZE, ROLE, CLOSE_SOURCE } from './constants'; -export type SizeT = keyof typeof SIZE; -export type SizePropT = SizeT | number | string; +export type Size = keyof typeof SIZE; +export type SizeProp = Size | number | string; -export type RoleT = keyof typeof ROLE; -export type RolePropT = RoleT | string; +export type Role = keyof typeof ROLE; +export type RoleProp = Role | string; -export type CloseSourceT = keyof typeof CLOSE_SOURCE; +export type CloseSource = keyof typeof CLOSE_SOURCE; -export type OverridesT = { - Root?: OverrideT; - Dialog?: OverrideT; - DialogContainer?: OverrideT; - Close?: OverrideT; +export type ModalOverrides = { + Root?: Override; + Dialog?: Override; + DialogContainer?: Override; + Close?: Override; }; // Props shared by all flavors of modal -export type ModalPropsT = { +export type ModalProps = { /** Sets whether the Modal should be displayed by easing in and out */ animate: boolean; /** If true, focus will shift to the first interactive element within the modal. @@ -55,29 +55,29 @@ export type ModalPropsT = { mountNode?: HTMLElement; /** A callback that is invoked when the modal will close. * Callback is passed a constant identifying what triggered the close. */ - onClose?: (a: { closeSource?: CloseSourceT }) => unknown; - overrides: OverridesT; + onClose?: (a: { closeSource?: CloseSource }) => unknown; + overrides: ModalOverrides; /** Which accessibility role this modal should have. */ - role: RolePropT; + role: RoleProp; /** Controls the size of the modal (primarily width). * Can be a SIZE constant or css width property value. */ - size: SizePropT; + size: SizeProp; }; -export type ModalPropsWithoutChildrenT = Omit; +export type ModalPropsWithoutChildren = Omit; -export type ModalStateT = { +export type ModalState = { isVisible: boolean; mounted: boolean; isFocusVisible: boolean; }; -export type SharedStylePropsArgT = { +export type SharedStylePropsArg = { $animate: boolean; $isVisible: boolean; $isOpen: boolean; - $size: SizePropT; - $role: RolePropT; + $size: SizeProp; + $role: RoleProp; $closeable: boolean; $isFocusVisible: boolean; }; diff --git a/src/notification/notification.tsx b/src/notification/notification.tsx index 23272e7e1a..9882cc9fae 100644 --- a/src/notification/notification.tsx +++ b/src/notification/notification.tsx @@ -7,11 +7,11 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import { Toast, TYPE } from '../toast'; -import type { ToastPropsT, ToastPropsShapeT } from '../toast'; +import type { ToastProps, ToastPropsShape } from '../toast'; import { mergeOverrides } from '../helpers/overrides'; -export default class Notification extends React.Component { - static defaultProps: ToastPropsShapeT = { +export default class Notification extends React.Component { + static defaultProps: ToastPropsShape = { notificationType: TYPE.inline, closeable: false, }; diff --git a/src/pagination/index.ts b/src/pagination/index.ts index 5ddbc3ad3c..101096cdae 100644 --- a/src/pagination/index.ts +++ b/src/pagination/index.ts @@ -15,4 +15,4 @@ export { StyledRoot, StyledMaxLabel, StyledDropdownContainer } from './styled-co export { STATE_CHANGE_TYPE } from './constants'; // Flow export * from './types'; -export type { PaginationLocaleT } from './locale'; +export type { PaginationLocale } from './locale'; diff --git a/src/pagination/locale.ts b/src/pagination/locale.ts index 0df1deed8f..3a6e845740 100644 --- a/src/pagination/locale.ts +++ b/src/pagination/locale.ts @@ -4,7 +4,7 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -export type PaginationLocaleT = { +export type PaginationLocale = { prev: string; next: string; preposition: string; diff --git a/src/pagination/pagination.tsx b/src/pagination/pagination.tsx index 1b804f460a..9ab0d32b7a 100644 --- a/src/pagination/pagination.tsx +++ b/src/pagination/pagination.tsx @@ -15,18 +15,18 @@ import { StyledRoot, StyledMaxLabel, StyledDropdownContainer } from './styled-co import ChevronLeft from '../icon/chevron-left'; import ChevronRight from '../icon/chevron-right'; import { getOverrides } from '../helpers/overrides'; -import type { PaginationPropsT } from './types'; -import type { LocaleT } from '../locale'; +import type { PaginationProps } from './types'; +import type { Locale } from '../locale'; import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible'; import type { SyntheticEvent } from 'react'; -type PageOptionT = { +type PageOption = { label: number; }; export default class Pagination extends React.PureComponent< - PaginationPropsT, + PaginationProps, { isFocusVisible: boolean; } @@ -57,7 +57,7 @@ export default class Pagination extends React.PureComponent< return menuOptions; }); - onMenuItemSelect = (data: { value: ReadonlyArray }) => { + onMenuItemSelect = (data: { value: ReadonlyArray }) => { const item = data.value[0]; const { onPageChange, currentPage } = this.props; const page = item.label; @@ -82,7 +82,7 @@ export default class Pagination extends React.PureComponent< } }; - constructAriaWayfinderLabel = (locale: LocaleT, prefix: string) => { + constructAriaWayfinderLabel = (locale: Locale, prefix: string) => { const { currentPage, numPages, labels } = this.props; return ( prefix + diff --git a/src/pagination/stateful-container.ts b/src/pagination/stateful-container.ts index 97ecbbf6bd..a41237f392 100644 --- a/src/pagination/stateful-container.ts +++ b/src/pagination/stateful-container.ts @@ -9,15 +9,15 @@ import * as React from 'react'; import { STATE_CHANGE_TYPE } from './constants'; import { clamp } from './utils'; // Types -import type { StatefulContainerPropsT, StatefulContainerStateT } from './types'; +import type { StatefulContainerProps, StatefulContainerState } from './types'; const initialState = { currentPage: 1, }; export default class PaginationStatefulContainer extends React.Component< - StatefulContainerPropsT, - StatefulContainerStateT + StatefulContainerProps, + StatefulContainerState > { static defaultProps = { initialState, @@ -27,7 +27,7 @@ export default class PaginationStatefulContainer extends React.Component< state = this.props.initialState || initialState; // Internal set state function that will also invoke stateReducer - internalSetState(changeType: keyof typeof STATE_CHANGE_TYPE, changes: StatefulContainerStateT) { + internalSetState(changeType: keyof typeof STATE_CHANGE_TYPE, changes: StatefulContainerState) { const { stateReducer } = this.props; if (stateReducer) { this.setState(stateReducer(changeType, changes, this.state)); @@ -36,7 +36,7 @@ export default class PaginationStatefulContainer extends React.Component< } } - onPageChange: StatefulContainerPropsT['onPageChange'] = ({ nextPage }) => { + onPageChange: StatefulContainerProps['onPageChange'] = ({ nextPage }) => { const { numPages, onPageChange } = this.props; const { currentPage } = this.state; const clamped = clamp(nextPage, 1, numPages); diff --git a/src/pagination/stateful-pagination.tsx b/src/pagination/stateful-pagination.tsx index 386b077613..e7eeb5abc6 100644 --- a/src/pagination/stateful-pagination.tsx +++ b/src/pagination/stateful-pagination.tsx @@ -8,7 +8,7 @@ import * as React from 'react'; import Pagination from './pagination'; import StatefulContainer from './stateful-container'; -import type { StatefulPaginationPropsT } from './types'; +import type { StatefulPaginationProps } from './types'; export default function StatefulPagination({ numPages, @@ -16,7 +16,7 @@ export default function StatefulPagination({ stateReducer, onPageChange, ...props -}: StatefulPaginationPropsT) { +}: StatefulPaginationProps) { return ( any; /** Callback for next button click. */ @@ -25,56 +25,56 @@ export type CallbacksT = { onPageChange?: (a: { nextPage: number; prevPage: number }) => any; }; -export type StateReducerFnT = ( +export type StateReducerFn = ( changeType: keyof typeof STATE_CHANGE_TYPE, - changes: StatefulContainerStateT, - currentState: StatefulContainerStateT -) => StatefulContainerStateT; + changes: StatefulContainerState, + currentState: StatefulContainerState +) => StatefulContainerState; -export type OverridesT = { - Root?: OverrideT; - PrevButton?: OverrideT; - NextButton?: OverrideT; - MaxLabel?: OverrideT; - DropdownContainer?: OverrideT; - Select?: OverrideT; +export type PaginationOverrides = { + Root?: Override; + PrevButton?: Override; + NextButton?: Override; + MaxLabel?: Override; + DropdownContainer?: Override; + Select?: Override; }; -export type PaginationPropsT = CallbacksT & { +export type PaginationProps = Callbacks & { /** Max number of pages. */ numPages: number; /** The current page. */ currentPage: number; /** Set of labels to use for the buttons and preposition. */ - labels?: LabelsT; - overrides?: OverridesT; - size?: SizeT; + labels?: Labels; + overrides?: PaginationOverrides; + size?: Size; }; -export type StatefulPaginationPropsT = CallbacksT & { +export type StatefulPaginationProps = Callbacks & { /** Max number of pages. */ numPages: number; /** Set of labels to use for the buttons and preposition. */ - labels?: LabelsT; + labels?: Labels; /** Reducer function to manipulate internal state updates. */ - stateReducer?: StateReducerFnT; + stateReducer?: StateReducerFn; /** Initial state populated into the component */ - initialState?: StatefulContainerStateT; - overrides?: OverridesT; - size?: SizeT; + initialState?: StatefulContainerState; + overrides?: PaginationOverrides; + size?: Size; }; -export type StatefulContainerPropsT = { +export type StatefulContainerProps = { children: any; numPages: number; /** Reducer function to manipulate internal state updates. */ - stateReducer?: StateReducerFnT; + stateReducer?: StateReducerFn; /** Initial state populated into the component */ - initialState?: StatefulContainerStateT; + initialState?: StatefulContainerState; /** Callback for when page changes. */ - onPageChange?: CallbacksT['onPageChange']; + onPageChange?: Callbacks['onPageChange']; }; -export type StatefulContainerStateT = { +export type StatefulContainerState = { currentPage: number; }; diff --git a/src/payment-card/payment-card.tsx b/src/payment-card/payment-card.tsx index d497a02ff2..498fb7c515 100644 --- a/src/payment-card/payment-card.tsx +++ b/src/payment-card/payment-card.tsx @@ -27,7 +27,7 @@ import UatpIcon from './icons/uatp'; import { IconWrapper as StyledIconWrapper } from './styled-components'; -import type { PaymentCardPropsT } from './types'; +import type { PaymentCardProps } from './types'; import { CUSTOM_CARDS_CONFIGURATION } from './custom-cards.config'; @@ -45,7 +45,7 @@ const CardTypeToComponent = { uatp: UatpIcon, }; -class PaymentCard extends React.Component { +class PaymentCard extends React.Component { caretPosition = 0; inRef: HTMLInputElement | HTMLTextAreaElement | null = null; @@ -64,7 +64,7 @@ class PaymentCard extends React.Component { endEnhancer: null, }; - constructor(props: PaymentCardPropsT) { + constructor(props: PaymentCardProps) { super(props); // For adding new custom card type, add card config to custom-cards.config.js CUSTOM_CARDS_CONFIGURATION.forEach((cardTypeConfig) => @@ -73,7 +73,7 @@ class PaymentCard extends React.Component { ); } - componentDidUpdate(prevProps: PaymentCardPropsT) { + componentDidUpdate(prevProps: PaymentCardProps) { if (this.inRef && prevProps.value !== this.props.value) { this.inRef.setSelectionRange(this.caretPosition, this.caretPosition); } diff --git a/src/payment-card/stateful-payment-card.tsx b/src/payment-card/stateful-payment-card.tsx index 8ef219d816..8678976291 100644 --- a/src/payment-card/stateful-payment-card.tsx +++ b/src/payment-card/stateful-payment-card.tsx @@ -7,9 +7,9 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import StatefulContainer from '../input/stateful-container'; import PaymentCard from './payment-card'; -import type { StatefulPaymentCardPropsT } from './types'; +import type { StatefulPaymentCardProps } from './types'; -export default function StatefulPaymentCard(props: StatefulPaymentCardPropsT) { +export default function StatefulPaymentCard(props: StatefulPaymentCardProps) { return ( {(childrenProps: any) => } diff --git a/src/payment-card/styled-components.ts b/src/payment-card/styled-components.ts index 4f60522169..ffb33d0b65 100644 --- a/src/payment-card/styled-components.ts +++ b/src/payment-card/styled-components.ts @@ -5,12 +5,12 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import { styled } from '../styles'; -import { SIZE, type SizeT } from '../input'; +import { SIZE, type Size } from '../input'; export const IconWrapper = styled< 'div', { - $size: SizeT; + $size: Size; } >('div', (props) => { const { $size, $theme } = props; diff --git a/src/payment-card/types.ts b/src/payment-card/types.ts index 793c062d63..b21db3ac83 100644 --- a/src/payment-card/types.ts +++ b/src/payment-card/types.ts @@ -4,17 +4,17 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import type { InputComponentsT, InputPropsT, StInputPropsDiffT } from '../input'; -import type { OverrideT } from '../helpers/overrides'; +import type { InputComponents, InputProps, StInputPropsDiff } from '../input'; +import type { Override } from '../helpers/overrides'; -export type PaymentCardComponentsT = { - IconWrapper?: OverrideT; -} & InputComponentsT; +export type PaymentCardComponents = { + IconWrapper?: Override; +} & InputComponents; -export type PaymentCardPropsT = { - overrides: PaymentCardComponentsT; -} & InputPropsT; +export type PaymentCardProps = { + overrides: PaymentCardComponents; +} & InputProps; -export type StatefulPaymentCardPropsT = { - overrides?: PaymentCardComponentsT; -} & StInputPropsDiffT; +export type StatefulPaymentCardProps = { + overrides?: PaymentCardComponents; +} & StInputPropsDiff; diff --git a/src/phone-input/__tests__/phone-input-custom-flags.scenario.tsx b/src/phone-input/__tests__/phone-input-custom-flags.scenario.tsx index 5e08a5a3de..61940dc96d 100644 --- a/src/phone-input/__tests__/phone-input-custom-flags.scenario.tsx +++ b/src/phone-input/__tests__/phone-input-custom-flags.scenario.tsx @@ -7,9 +7,9 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import { PhoneInput, COUNTRIES, StyledFlag } from '../../phone-input'; -import type { CountryIsoT } from '../../phone-input'; +import type { CountryIso } from '../../phone-input'; -function CustomFlag(props: { children: React.ReactNode; $iso: CountryIsoT }) { +function CustomFlag(props: { children: React.ReactNode; $iso: CountryIso }) { const { children, ...rest } = props; //$FlowExpectedError[cannot-spread-inexact] return ; diff --git a/src/phone-input/base-country-picker.tsx b/src/phone-input/base-country-picker.tsx index cc02625b18..382aae62fe 100644 --- a/src/phone-input/base-country-picker.tsx +++ b/src/phone-input/base-country-picker.tsx @@ -20,7 +20,7 @@ import { getOverrides, mergeOverrides } from '../helpers/overrides'; import defaultProps from './default-props'; import { iso2FlagEmoji } from './utils'; -import type { CountryT, CountrySelectPropsT } from './types'; +import type { Country, CountrySelectProps } from './types'; CountryPicker.defaultProps = { disabled: defaultProps.disabled, @@ -50,7 +50,7 @@ function DropdownOptionContent(props) { return <>{props.children}; } -export default function CountryPicker(props: CountrySelectPropsT) { +export default function CountryPicker(props: CountrySelectProps) { const { country, disabled, @@ -195,7 +195,7 @@ export default function CountryPicker(props: CountrySelectPropsT) { ); }} - getValueLabel={(value: { option: CountryT }) => { + getValueLabel={(value: { option: Country }) => { const iso = value.option.id; return ( diff --git a/src/phone-input/country-picker.tsx b/src/phone-input/country-picker.tsx index 4af475cc1d..8867b88864 100644 --- a/src/phone-input/country-picker.tsx +++ b/src/phone-input/country-picker.tsx @@ -10,7 +10,7 @@ import { SIZE } from './constants'; import { SingleSelect as DefaultSelect } from '../select'; import { getOverrides, mergeOverrides } from '../helpers/overrides'; import defaultProps from './default-props'; -import type { CountrySelectPropsT } from './types'; +import type { CountrySelectProps } from './types'; CountryPicker.defaultProps = { disabled: defaultProps.disabled, @@ -24,7 +24,7 @@ CountryPicker.defaultProps = { required: defaultProps.required, }; -export default function CountryPicker(props: CountrySelectPropsT) { +export default function CountryPicker(props: CountrySelectProps) { const { overrides } = props; const baseSelectOverrides = { Root: { diff --git a/src/phone-input/country-select-dropdown.tsx b/src/phone-input/country-select-dropdown.tsx index a7345bff5a..979f598594 100644 --- a/src/phone-input/country-select-dropdown.tsx +++ b/src/phone-input/country-select-dropdown.tsx @@ -20,8 +20,8 @@ import { StyledEmptyState } from '../menu/styled-components'; import { getOverrides } from '../helpers/overrides'; import { iso2FlagEmoji } from './utils'; -import type { CountrySelectDropdownPropsT } from './types'; -import type { LocaleT } from '../locale'; +import type { CountrySelectDropdownProps } from './types'; +import type { Locale } from '../locale'; import type { ComponentProps } from 'react'; CountrySelectDropdown.defaultProps = { @@ -30,7 +30,7 @@ CountrySelectDropdown.defaultProps = { }; function CountrySelectDropdown( - props: CountrySelectDropdownPropsT & { + props: CountrySelectDropdownProps & { // todo(flow->ts) $forwardedRef: React.Ref; $forwardedRef: React.Ref | ((a: null | HTMLElement) => unknown); } @@ -74,7 +74,7 @@ function CountrySelectDropdown( if (!props.children.length) { return ( - {(locale: LocaleT) => ( + {(locale: Locale) => ( {noResultsMsg || locale.menu.noResultsMsg} )} diff --git a/src/phone-input/country-select.tsx b/src/phone-input/country-select.tsx index e9cceb42f3..c25e9c5b8e 100644 --- a/src/phone-input/country-select.tsx +++ b/src/phone-input/country-select.tsx @@ -16,7 +16,7 @@ import { SingleSelect as DefaultSelect } from '../select'; import { getOverrides, mergeOverrides } from '../helpers/overrides'; import defaultProps from './default-props'; -import type { CountrySelectPropsT } from './types'; +import type { CountrySelectProps } from './types'; CountrySelect.defaultProps = { disabled: defaultProps.disabled, @@ -30,7 +30,7 @@ CountrySelect.defaultProps = { required: defaultProps.required, }; -export default function CountrySelect(props: CountrySelectPropsT) { +export default function CountrySelect(props: CountrySelectProps) { const { country, disabled, error, overrides, positive, required, size } = props; const sharedProps = { $disabled: disabled, diff --git a/src/phone-input/flag.tsx b/src/phone-input/flag.tsx index 4802dfb0ec..c7e5eb01e5 100644 --- a/src/phone-input/flag.tsx +++ b/src/phone-input/flag.tsx @@ -9,20 +9,20 @@ import React from 'react'; import * as flags from './flags'; import { styled } from '../styles'; import { SIZE } from './constants'; -import type { CountryIsoT, SizeT } from './types'; +import type { CountryIso, Size } from './types'; type SizeStyleProps = { - $size?: SizeT; + $size?: Size; }; export default function Flag(props: { - $iso: CountryIsoT; + $iso: CountryIso; // remove `iso` prop in the next major version - iso?: CountryIsoT; + iso?: CountryIso; width?: string; }) { const { $iso, iso: oldIsoProp, width = '16px', ...restProps } = props; - const iso: CountryIsoT = oldIsoProp || $iso; + const iso: CountryIso = oldIsoProp || $iso; const FlagComponent = flags[`Flag${iso.toUpperCase()}`]; //$FlowExpectedError[cannot-spread-inexact] return ; diff --git a/src/phone-input/phone-input-lite.tsx b/src/phone-input/phone-input-lite.tsx index f29fd8add6..6bbd0dcce8 100644 --- a/src/phone-input/phone-input-lite.tsx +++ b/src/phone-input/phone-input-lite.tsx @@ -10,11 +10,11 @@ import defaultProps from './default-props'; import { StyledPhoneInputRoot, StyledDialCode } from './styled-components'; import { Input as DefaultInput } from '../input'; import { getOverrides, mergeOverrides } from '../helpers/overrides'; -import type { LitePropsT } from './types'; +import type { PhoneInputLiteProps } from './types'; PhoneInputLite.defaultProps = defaultProps; -export default function PhoneInputLite(props: LitePropsT) { +export default function PhoneInputLite(props: PhoneInputLiteProps) { const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, diff --git a/src/phone-input/phone-input-next.tsx b/src/phone-input/phone-input-next.tsx index 68c484eaa6..72bbd82b29 100644 --- a/src/phone-input/phone-input-next.tsx +++ b/src/phone-input/phone-input-next.tsx @@ -11,7 +11,7 @@ import defaultProps from './default-props'; import { StyledPhoneInputRoot, StyledDialCode } from './styled-components'; import { Input as DefaultInput } from '../input'; import { getOverrides, mergeOverrides } from '../helpers/overrides'; -import type { LitePropsT } from './types'; +import type { PhoneInputLiteProps } from './types'; PhoneInputNext.defaultProps = { ...defaultProps, @@ -19,7 +19,7 @@ PhoneInputNext.defaultProps = { clearable: true, }; -export default function PhoneInputNext(props: LitePropsT) { +export default function PhoneInputNext(props: PhoneInputLiteProps) { const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, diff --git a/src/phone-input/phone-input.tsx b/src/phone-input/phone-input.tsx index 398609adb1..f621209ed2 100644 --- a/src/phone-input/phone-input.tsx +++ b/src/phone-input/phone-input.tsx @@ -8,10 +8,10 @@ import React from 'react'; import { COUNTRIES } from './constants'; import PhoneInputLite from './phone-input-lite'; import defaultProps from './default-props'; -import type { PropsT } from './types'; +import type { PhoneInputProps } from './types'; PhoneInput.defaultProps = defaultProps; -export default function PhoneInput(props: PropsT) { +export default function PhoneInput(props: PhoneInputProps) { return ; } diff --git a/src/phone-input/stateful-phone-input-container.ts b/src/phone-input/stateful-phone-input-container.ts index 737c7e38ab..e9f6d9e7f4 100644 --- a/src/phone-input/stateful-phone-input-container.ts +++ b/src/phone-input/stateful-phone-input-container.ts @@ -7,23 +7,18 @@ LICENSE file in the root directory of this source tree. import React from 'react'; // needs to be removed from here import { COUNTRIES, STATE_CHANGE_TYPE } from './constants'; -import type { - StatefulPhoneInputContainerPropsT, - StateT, - StateReducerT, - StateChangeT, -} from './types'; +import type { StatefulPhoneInputContainerProps, State, StateReducer, StateChange } from './types'; import defaultProps from './default-props'; -import type { OnChangeParamsT } from '../select'; +import type { OnChangeParams } from '../select'; import type { ChangeEvent } from 'react'; // @ts-expect-error todo(flow->ts): possible bug -const defaultStateReducer: StateReducerT = (type, nextState) => nextState; +const defaultStateReducer: StateReducer = (type, nextState) => nextState; export default class StatefulPhoneInputContainer extends React.Component< - StatefulPhoneInputContainerPropsT, - StateT + StatefulPhoneInputContainerProps, + State > { static defaultProps = { initialState: { @@ -36,9 +31,9 @@ export default class StatefulPhoneInputContainer extends React.Component< overrides: {}, }; - state: StateT = { text: '', country: COUNTRIES.US, ...this.props.initialState }; + state: State = { text: '', country: COUNTRIES.US, ...this.props.initialState }; - internalSetState = (type: StateChangeT, nextState: Partial) => { + internalSetState = (type: StateChange, nextState: Partial) => { this.setState(this.props.stateReducer(type, nextState, this.state)); }; @@ -49,7 +44,7 @@ export default class StatefulPhoneInputContainer extends React.Component< }); }; - onCountryChange = (event: OnChangeParamsT) => { + onCountryChange = (event: OnChangeParams) => { this.props.onCountryChange(event); if (event.option && event.option.id) { this.internalSetState(STATE_CHANGE_TYPE.countryChange, { diff --git a/src/phone-input/stateful-phone-input-next.tsx b/src/phone-input/stateful-phone-input-next.tsx index 8426c1521f..419046428c 100644 --- a/src/phone-input/stateful-phone-input-next.tsx +++ b/src/phone-input/stateful-phone-input-next.tsx @@ -8,14 +8,14 @@ import React from 'react'; import StatefulPhoneInputContainer from './stateful-phone-input-container'; import PhoneInputNext from './phone-input-next'; import defaultProps from './default-props'; -import type { PropsT, StatefulPhoneInputPropsT } from './types'; +import type { PhoneInputProps, StatefulPhoneInputProps } from './types'; StatefulPhoneInputNext.defaultProps = { ...defaultProps, clearable: true }; -export default function StatefulPhoneInputNext(props: StatefulPhoneInputPropsT) { +export default function StatefulPhoneInputNext(props: StatefulPhoneInputProps) { return ( - {(childrenProps: PropsT) => } + {(childrenProps: PhoneInputProps) => } ); } diff --git a/src/phone-input/stateful-phone-input.tsx b/src/phone-input/stateful-phone-input.tsx index 87f659c581..d96573e8cf 100644 --- a/src/phone-input/stateful-phone-input.tsx +++ b/src/phone-input/stateful-phone-input.tsx @@ -8,14 +8,14 @@ import React from 'react'; import StatefulPhoneInputContainer from './stateful-phone-input-container'; import PhoneInput from './phone-input'; import defaultProps from './default-props'; -import type { PropsT, StatefulPhoneInputPropsT } from './types'; +import type { PhoneInputProps, StatefulPhoneInputProps } from './types'; StatefulPhoneInput.defaultProps = defaultProps; -export default function StatefulPhoneInput(props: StatefulPhoneInputPropsT) { +export default function StatefulPhoneInput(props: StatefulPhoneInputProps) { return ( - {(childrenProps: PropsT) => } + {(childrenProps: PhoneInputProps) => } ); } diff --git a/src/phone-input/styled-components.tsx b/src/phone-input/styled-components.tsx index 0559a28323..ebfa485406 100644 --- a/src/phone-input/styled-components.tsx +++ b/src/phone-input/styled-components.tsx @@ -10,10 +10,10 @@ import { styled, withStyle, withWrapper } from '../styles'; import { StyledList } from '../menu'; import { StyledDropdownListItem, StyledRoot as SelectStyledRoot } from '../select'; import defaultProps from '../select/default-props'; -import type { SizeT } from './types'; +import type { Size } from './types'; type SizeStyleProps = { - $size?: SizeT; + $size?: Size; }; type HeightStyleProps = { diff --git a/src/phone-input/types.ts b/src/phone-input/types.ts index 46253fa3e4..bf5c97dec2 100644 --- a/src/phone-input/types.ts +++ b/src/phone-input/types.ts @@ -6,85 +6,85 @@ LICENSE file in the root directory of this source tree. */ import * as React from 'react'; import { STATE_CHANGE_TYPE, SIZE, COUNTRIES } from './constants'; -import type { OverrideT } from '../helpers/overrides'; -import type { OnChangeParamsT } from '../select'; +import type { Override } from '../helpers/overrides'; +import type { OnChangeParams } from '../select'; import type { ChangeEvent } from 'react'; -export type SizeT = keyof typeof SIZE; -export type CountryIsoT = keyof typeof COUNTRIES; -export type CountriesT = Readonly; +export type Size = keyof typeof SIZE; +export type CountryIso = keyof typeof COUNTRIES; +export type Countries = Readonly; -export type CountryT = Readonly<{ +export type Country = Readonly<{ dialCode: string; - id: CountryIsoT; + id: CountryIso; label: string; }>; -export type StateT = { - country: CountryT; +export type State = { + country: Country; text: string; }; -export type StateChangeT = keyof typeof STATE_CHANGE_TYPE; +export type StateChange = keyof typeof STATE_CHANGE_TYPE; -export type StateReducerT = ( - type: StateChangeT, - nextState: Partial, - currentState: StateT -) => StateT; +export type StateReducer = ( + type: StateChange, + nextState: Partial, + currentState: State +) => State; -export type mapIsoToLabelT = (iso: string) => string; +export type mapIsoToLabel = (iso: string) => string; // Props -export type CountrySelectDropdownPropsT = { +export type CountrySelectDropdownProps = { children: Array>; - $country: CountryT; - $mapIsoToLabel?: mapIsoToLabelT; + $country: Country; + $mapIsoToLabel?: mapIsoToLabel; $maxDropdownHeight: string; $noResultsMsg: string; $overrides: { - CountrySelectContainer?: OverrideT; - CountrySelectDropdown?: OverrideT; - CountrySelectDropdownListItem?: OverrideT; - CountrySelectDropdownFlagColumn?: OverrideT; - CountrySelectDropdownNameColumn?: OverrideT; - CountrySelectDropdownDialcodeColumn?: OverrideT; - FlagContainer?: OverrideT; - EmptyState?: OverrideT; + CountrySelectContainer?: Override; + CountrySelectDropdown?: Override; + CountrySelectDropdownListItem?: Override; + CountrySelectDropdownFlagColumn?: Override; + CountrySelectDropdownNameColumn?: Override; + CountrySelectDropdownDialcodeColumn?: Override; + FlagContainer?: Override; + EmptyState?: Override; }; }; -export type CountrySelectPropsT = { +export type CountrySelectProps = { countries: { - [x: string]: CountryT; + [x: string]: Country; }; - country: CountryT; + country: Country; disabled: boolean; error: boolean; inputRef: React.RefObject; - onCountryChange: (event: OnChangeParamsT) => unknown; - mapIsoToLabel?: mapIsoToLabelT; + onCountryChange: (event: OnChangeParams) => unknown; + mapIsoToLabel?: mapIsoToLabel; maxDropdownHeight: string; maxDropdownWidth: string; overrides: { - CountrySelectContainer?: OverrideT; - CountrySelectDropdown?: OverrideT; - CountrySelectDropdownListItem?: OverrideT; - CountrySelectDropdownFlagColumn?: OverrideT; - CountrySelectDropdownNameColumn?: OverrideT; - CountrySelectDropdownDialcodeColumn?: OverrideT; - DialCode?: OverrideT; - CountrySelect?: OverrideT; - FlagContainer?: OverrideT; + CountrySelectContainer?: Override; + CountrySelectDropdown?: Override; + CountrySelectDropdownListItem?: Override; + CountrySelectDropdownFlagColumn?: Override; + CountrySelectDropdownNameColumn?: Override; + CountrySelectDropdownDialcodeColumn?: Override; + DialCode?: Override; + CountrySelect?: Override; + FlagContainer?: Override; }; positive: boolean; required: boolean; - size: SizeT; + size: Size; }; -export type PropsT = { +export type PhoneInputProps = { /** Sets aria-label attribute of the input element. */ 'aria-label': string | undefined | null; /** Sets aria-labelledby attribute of the input element. */ @@ -92,7 +92,7 @@ export type PropsT = { /** Sets aria-describedby attribute of the input element. */ 'aria-describedby': string | undefined | null; /** Defines the value of the country select. */ - country: CountryT; + country: Country; /** Defines if the component is disabled. */ disabled: boolean; /** Renders component in 'error' state. */ @@ -104,25 +104,25 @@ export type PropsT = { /** Sets the max width of the country select dropdown. */ maxDropdownWidth: string; /** Function for mapping ISO codes to country names. Useful for localization of the country select dropdown. */ - mapIsoToLabel?: mapIsoToLabelT; + mapIsoToLabel?: mapIsoToLabel; /** Sets the name attribute of the input element. */ name: string | undefined | null; /** A handler for the country select's change events. */ - onCountryChange: (event: OnChangeParamsT) => unknown; + onCountryChange: (event: OnChangeParams) => unknown; /** A handler for the input element's change events. */ onTextChange: (event: ChangeEvent) => unknown; overrides: { - Root?: OverrideT; - Input?: OverrideT; - CountrySelectContainer?: OverrideT; - CountrySelectDropdown?: OverrideT; - CountrySelectDropdownListItem?: OverrideT; - CountrySelectDropdownFlagColumn?: OverrideT; - CountrySelectDropdownNameColumn?: OverrideT; - CountrySelectDropdownDialcodeColumn?: OverrideT; - DialCode?: OverrideT; - CountrySelect?: OverrideT; - FlagContainer?: OverrideT; + Root?: Override; + Input?: Override; + CountrySelectContainer?: Override; + CountrySelectDropdown?: Override; + CountrySelectDropdownListItem?: Override; + CountrySelectDropdownFlagColumn?: Override; + CountrySelectDropdownNameColumn?: Override; + CountrySelectDropdownDialcodeColumn?: Override; + DialCode?: Override; + CountrySelect?: Override; + FlagContainer?: Override; }; /** Sets the placeholder text for the input element. */ placeholder?: string; @@ -131,30 +131,30 @@ export type PropsT = { /** Sets the 'required' attribute of the input element. The country select will always have a value so does has no need for 'require'. */ required: boolean; /** Sets the size of the component. */ - size: SizeT; + size: Size; /** Defines the value of the input element. */ text: string; /** Defines if the input value is clearable. */ clearable?: boolean; }; -export type LitePropsT = { +export type PhoneInputLiteProps = { countries: { - [x: string]: CountryT; + [x: string]: Country; }; -} & PropsT; +} & PhoneInputProps; -export type StatefulPhoneInputContainerPropsT = { - children: (a: PropsT) => React.ReactNode; - initialState: StateT; - stateReducer: StateReducerT; +export type StatefulPhoneInputContainerProps = { + children: (a: PhoneInputProps) => React.ReactNode; + initialState: State; + stateReducer: StateReducer; onTextChange: (event: ChangeEvent) => unknown; - onCountryChange: (event: OnChangeParamsT) => unknown; -} & PropsT; + onCountryChange: (event: OnChangeParams) => unknown; +} & PhoneInputProps; -export type StatefulPhoneInputPropsT = PropsT & { - initialState?: StateT; - stateReducer?: StateReducerT; +export type StatefulPhoneInputProps = PhoneInputProps & { + initialState?: State; + stateReducer?: StateReducer; onTextChange?: (event: ChangeEvent) => unknown; - onCountryChange?: (event: OnChangeParamsT) => unknown; + onCountryChange?: (event: OnChangeParams) => unknown; }; diff --git a/src/pin-code/pin-code.tsx b/src/pin-code/pin-code.tsx index 9805d8e151..23ef14de40 100644 --- a/src/pin-code/pin-code.tsx +++ b/src/pin-code/pin-code.tsx @@ -8,11 +8,11 @@ import React from 'react'; import MultiRef from 'react-multi-ref'; import defaultProps from './default-props'; import { StyledRoot, StyledInputOverrideRoot, StyledInputOverrideInput } from './styled-components'; -import type { PropsT, StateT } from './types'; +import type { Props, State } from './types'; import { getOverrides, mergeOverrides } from '../helpers/overrides'; import { Input as DefaultInput } from '../input'; -export default class PinCode extends React.Component { +export default class PinCode extends React.Component { static defaultProps = defaultProps; _inputRefs = new MultiRef(); diff --git a/src/pin-code/stateful-pin-code-container.ts b/src/pin-code/stateful-pin-code-container.ts index 1d6f9cdd91..7184562281 100644 --- a/src/pin-code/stateful-pin-code-container.ts +++ b/src/pin-code/stateful-pin-code-container.ts @@ -7,19 +7,19 @@ LICENSE file in the root directory of this source tree. import React from 'react'; import type { - ChangeEventT, - StatefulPinCodeContainerPropsT, - StatefulPinCodeContainerStateT, - StateReducerT, + ChangeEvent, + StatefulPinCodeContainerProps, + StatefulPinCodeContainerState, + StateReducer, } from './types'; import defaultProps from './default-props'; import { STATE_CHANGE_TYPE } from '../input'; -const stateReducer: StateReducerT = (type, nextState) => nextState; +const stateReducer: StateReducer = (type, nextState) => nextState; export default class StatefulPinCodeContainer extends React.Component< - StatefulPinCodeContainerPropsT, - StatefulPinCodeContainerStateT + StatefulPinCodeContainerProps, + StatefulPinCodeContainerState > { static defaultProps = { initialState: { values: defaultProps.values }, @@ -29,7 +29,7 @@ export default class StatefulPinCodeContainer extends React.Component< state = this.props.initialState; - handleChange = ({ values, event }: ChangeEventT) => { + handleChange = ({ values, event }: ChangeEvent) => { this.props.onChange({ values, event }); const nextState = this.props.stateReducer(STATE_CHANGE_TYPE.change, { values }, this.state); this.setState(nextState); diff --git a/src/pin-code/stateful-pin-code.tsx b/src/pin-code/stateful-pin-code.tsx index e06b717ecc..f80ba91ba3 100644 --- a/src/pin-code/stateful-pin-code.tsx +++ b/src/pin-code/stateful-pin-code.tsx @@ -8,14 +8,14 @@ import React from 'react'; import defaultProps from './default-props'; import PinCode from './pin-code'; import StatefulPinCodeContainer from './stateful-pin-code-container'; -import type { PropsT, StatefulPinCodePropsT } from './types'; +import type { Props, StatefulPinCodeProps } from './types'; StatefulPinCode.defaultProps = defaultProps; -export default function StatefulPinCode(props: StatefulPinCodePropsT) { +export default function StatefulPinCode(props: StatefulPinCodeProps) { return ( - {(childrenProps: PropsT) => } + {(childrenProps: Props) => } ); } diff --git a/src/pin-code/styled-components.ts b/src/pin-code/styled-components.ts index 0b4fe7686e..21f9850f70 100644 --- a/src/pin-code/styled-components.ts +++ b/src/pin-code/styled-components.ts @@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree. */ import { styled, withStyle } from '../styles'; import { StyledRoot as StyledInputRoot, StyledInput as StyledInputInput, SIZE } from '../input'; -import type { SizeT } from '../input'; +import type { Size } from '../input'; export const StyledRoot = styled('div', { display: 'flex', @@ -16,7 +16,7 @@ export const StyledRoot = styled('div', { export const StyledInputOverrideRoot = withStyle< typeof StyledInputRoot, { - $size: SizeT; + $size: Size; } >(StyledInputRoot, ({ $size = SIZE.default }) => { const width = { diff --git a/src/pin-code/types.ts b/src/pin-code/types.ts index c54c1c7e89..1959030366 100644 --- a/src/pin-code/types.ts +++ b/src/pin-code/types.ts @@ -5,15 +5,15 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import * as React from 'react'; -import type { OverrideT } from '../helpers/overrides'; +import type { Override } from '../helpers/overrides'; import { SIZE, STATE_CHANGE_TYPE } from '../input'; -export type ChangeEventT = { +export type ChangeEvent = { values: string[]; event: any; }; -export type PropsT = { +export type Props = { /** Sets aria-label attribute for each input element. */ 'aria-label': string | undefined | null; /** Sets aria-labelledby attribute for each input element. */ @@ -33,10 +33,10 @@ export type PropsT = { /** Sets the name attribute of each input element. */ name: string | undefined | null; /** A handler for when any pin code input changes value. */ - onChange: (a: ChangeEventT) => unknown; + onChange: (a: ChangeEvent) => unknown; overrides: { - Root?: OverrideT; - Input?: OverrideT; + Root?: Override; + Input?: Override; }; /** Sets the placeholder text for each pin code input element. */ placeholder: string; @@ -56,31 +56,31 @@ export type PropsT = { // Stateful stuff below -export type StateT = { +export type State = { hasFocus: boolean; }; -export type StatefulPinCodeContainerStateT = { +export type StatefulPinCodeContainerState = { values: string[]; }; -export type StateChangeT = keyof typeof STATE_CHANGE_TYPE; +export type StateChange = keyof typeof STATE_CHANGE_TYPE; -export type StateReducerT = ( - type: StateChangeT, - nextState: StatefulPinCodeContainerStateT, - currentState: StatefulPinCodeContainerStateT -) => StatefulPinCodeContainerStateT; +export type StateReducer = ( + type: StateChange, + nextState: StatefulPinCodeContainerState, + currentState: StatefulPinCodeContainerState +) => StatefulPinCodeContainerState; -export type StatefulPinCodePropsT = PropsT & { - initialState?: StatefulPinCodeContainerStateT; - onChange?: (event: ChangeEventT) => unknown; - stateReducer?: StateReducerT; +export type StatefulPinCodeProps = Props & { + initialState?: StatefulPinCodeContainerState; + onChange?: (event: ChangeEvent) => unknown; + stateReducer?: StateReducer; }; -export type StatefulPinCodeContainerPropsT = PropsT & { - children: (a: PropsT) => React.ReactNode; - initialState: StatefulPinCodeContainerStateT; - onChange: (event: ChangeEventT) => unknown; - stateReducer: StateReducerT; +export type StatefulPinCodeContainerProps = Props & { + children: (a: Props) => React.ReactNode; + initialState: StatefulPinCodeContainerState; + onChange: (event: ChangeEvent) => unknown; + stateReducer: StateReducer; }; diff --git a/src/popover/default-props.ts b/src/popover/default-props.ts index 79ade8a43b..3d1b030497 100644 --- a/src/popover/default-props.ts +++ b/src/popover/default-props.ts @@ -5,9 +5,9 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE } from './constants'; -import type { BasePopoverPropsT } from './types'; +import type { BasePopoverProps } from './types'; -const baseDefaultProps: Partial = { +const baseDefaultProps: Partial = { accessibilityType: ACCESSIBILITY_TYPE.menu, focusLock: false, autoFocus: true, diff --git a/src/popover/popover.tsx b/src/popover/popover.tsx index 47590f6101..8bdd13dacd 100644 --- a/src/popover/popover.tsx +++ b/src/popover/popover.tsx @@ -27,16 +27,11 @@ import { fromPopperPlacement } from './utils'; import defaultProps from './default-props'; import { useUID } from 'react-uid'; -import type { - AnchorPropsT, - PopoverPropsT, - PopoverPrivateStateT, - SharedStylePropsArgT, -} from './types'; -import type { PopperDataObjectT, NormalizedOffsetsT } from '../layer/types'; +import type { AnchorProps, PopoverProps, PopoverPrivateState, SharedStylePropsArg } from './types'; +import type { PopperDataObject, NormalizedOffsets } from '../layer/types'; -class PopoverInner extends React.Component { - static defaultProps: Partial = defaultProps; +class PopoverInner extends React.Component { + static defaultProps: Partial = defaultProps; /* eslint-disable react/sort-comp */ animateInTimer?: TimeoutID | undefined | null; @@ -60,7 +55,7 @@ class PopoverInner extends React.Component this.setState({ isMounted: true }); } - componentDidUpdate(prevProps: PopoverPropsT, prevState: PopoverPrivateStateT) { + componentDidUpdate(prevProps: PopoverProps, prevState: PopoverPrivateState) { this.init(prevProps, prevState); if ( this.props.autoFocus && @@ -83,7 +78,7 @@ class PopoverInner extends React.Component } } - init(prevProps: PopoverPropsT, prevState: PopoverPrivateStateT) { + init(prevProps: PopoverProps, prevState: PopoverPrivateState) { if ( this.props.isOpen !== prevProps.isOpen || this.state.isMounted !== prevState.isMounted || @@ -108,7 +103,7 @@ class PopoverInner extends React.Component this.clearTimers(); } - getDefaultState(props: PopoverPropsT) { + getDefaultState(props: PopoverProps) { return { isAnimating: false, arrowOffset: { left: 0, top: 0 }, @@ -188,7 +183,7 @@ class PopoverInner extends React.Component this.triggerOnMouseLeaveWithDelay(e); }; - onPopperUpdate = (normalizedOffsets: NormalizedOffsetsT, data: PopperDataObjectT) => { + onPopperUpdate = (normalizedOffsets: NormalizedOffsets, data: PopperDataObject) => { const placement = fromPopperPlacement(data.placement) || PLACEMENT.top; this.setState({ arrowOffset: normalizedOffsets.arrow, @@ -286,7 +281,7 @@ class PopoverInner extends React.Component getAnchorProps() { const { isOpen } = this.props; - const anchorProps: AnchorPropsT = { + const anchorProps: AnchorProps = { 'aria-haspopup': true, 'aria-expanded': isOpen ? true : false, // @ts-expect-error todo(flow->ts): should it be here? @@ -334,7 +329,7 @@ class PopoverInner extends React.Component return bodyProps; } - getSharedProps(): Omit { + getSharedProps(): Omit { const { isOpen, showArrow, popoverMargin = POPOVER_MARGIN } = this.props; const { isAnimating, arrowOffset, popoverOffset, placement } = this.state; return { @@ -487,7 +482,7 @@ class PopoverInner extends React.Component // Remove when Popover is converted to a functional component. const Popover = ( - props: PopoverPropsT & { + props: PopoverProps & { innerRef?: React.Ref; } ) => { diff --git a/src/popover/stateful-container.ts b/src/popover/stateful-container.ts index 95d8e7a513..102dfbab56 100644 --- a/src/popover/stateful-container.ts +++ b/src/popover/stateful-container.ts @@ -13,17 +13,17 @@ import { POPOVER_MARGIN, } from './constants'; import type { - PopoverPropsWithoutChildrenT, - StateT, - StatefulPopoverContainerPropsT, - StateChangeTypeT, - StateReducerT, + PopoverPropsWithoutChildren, + State, + StatefulPopoverContainerProps, + StateChangeType, + StateReducer, } from './types'; -const defaultStateReducer: StateReducerT = (type, nextState) => nextState; +const defaultStateReducer: StateReducer = (type, nextState) => nextState; -class StatefulContainer extends React.Component { - static defaultProps: Partial = { +class StatefulContainer extends React.Component { + static defaultProps: Partial = { accessibilityType: ACCESSIBILITY_TYPE.menu, ignoreBoundary: false, overrides: {}, @@ -116,7 +116,7 @@ class StatefulContainer extends React.Component diff --git a/src/popover/styled-components.ts b/src/popover/styled-components.ts index 75b142f21f..4df6b0a6de 100644 --- a/src/popover/styled-components.ts +++ b/src/popover/styled-components.ts @@ -12,16 +12,16 @@ import { getStartPosition, getEndPosition, } from './utils'; -import type { ArrowStylePropsArgT, BodyStylePropsArgT, InnerStylePropsArgT } from './types'; -import type { ThemeT } from '../styles/types'; +import type { ArrowStylePropsArg, BodyStylePropsArg, InnerStylePropsArg } from './types'; +import type { Theme } from '../styles/types'; import type { StyleObject } from 'styletron-standard'; /** * Main popover container element that gets positioned next to the anchor */ export function getBodyStyles( - props: BodyStylePropsArgT & { - $theme: ThemeT; + props: BodyStylePropsArg & { + $theme: Theme; } ): StyleObject { const { @@ -70,14 +70,14 @@ export function getBodyStyles( }; } -export const Body = styled<'div', BodyStylePropsArgT>('div', getBodyStyles); +export const Body = styled<'div', BodyStylePropsArg>('div', getBodyStyles); /** * Arrow shown between the popover and the anchor element */ export function getArrowStyles( - props: ArrowStylePropsArgT & { - $theme: ThemeT; + props: ArrowStylePropsArg & { + $theme: Theme; } ): StyleObject { const { $arrowOffset, $placement, $theme } = props; @@ -92,7 +92,7 @@ export function getArrowStyles( }; } -export const Arrow = styled<'div', ArrowStylePropsArgT>('div', getArrowStyles); +export const Arrow = styled<'div', ArrowStylePropsArg>('div', getArrowStyles); /** * Extra div that holds the popover content. This extra element @@ -100,7 +100,7 @@ export const Arrow = styled<'div', ArrowStylePropsArgT>('div', getArrowStyles); * and rendering this extra element on top with a solid background * clips the part of the arrow that extends into the popover. */ -export function getInnerStyles({ $theme }: { $theme: ThemeT }): StyleObject { +export function getInnerStyles({ $theme }: { $theme: Theme }): StyleObject { return { backgroundColor: $theme.colors.backgroundTertiary, borderTopLeftRadius: $theme.borders.popoverBorderRadius, @@ -112,7 +112,7 @@ export function getInnerStyles({ $theme }: { $theme: ThemeT }): StyleObject { }; } -export const Inner = styled<'div', InnerStylePropsArgT>('div', getInnerStyles); +export const Inner = styled<'div', InnerStylePropsArg>('div', getInnerStyles); /** * A drop-in component that provides the recommended padding diff --git a/src/popover/types.ts b/src/popover/types.ts index cd650b9303..844fdf3364 100644 --- a/src/popover/types.ts +++ b/src/popover/types.ts @@ -6,48 +6,48 @@ LICENSE file in the root directory of this source tree. */ /* eslint-disable flowtype/generic-spacing */ import * as React from 'react'; -import type { OverrideT } from '../helpers/overrides'; -import type { TetherPlacementT } from '../layer'; +import type { Override } from '../helpers/overrides'; +import type { TetherPlacement } from '../layer'; import { ACCESSIBILITY_TYPE, STATE_CHANGE_TYPE, TRIGGER_TYPE } from './constants'; -export type { PopperDataObjectT, PopperOffsetT, PopperOptionsT } from '../layer'; +export type { PopperDataObject, PopperOffset, PopperOptions } from '../layer'; -export type PopoverPlacementT = TetherPlacementT; -export type TriggerTypeT = keyof typeof TRIGGER_TYPE; -export type AccessibilityTypeT = keyof typeof ACCESSIBILITY_TYPE; +export type PopoverPlacement = TetherPlacement; +export type TriggerType = keyof typeof TRIGGER_TYPE; +export type AccessibilityType = keyof typeof ACCESSIBILITY_TYPE; -export type StateT = { +export type State = { isOpen: boolean; }; -export type StateChangeTypeT = keyof typeof STATE_CHANGE_TYPE; +export type StateChangeType = keyof typeof STATE_CHANGE_TYPE; -export type StateReducerT = ( - stateChangeType: StateChangeTypeT, - nextState: StateT, - currentState: StateT -) => StateT; +export type StateReducer = ( + stateChangeType: StateChangeType, + nextState: State, + currentState: State +) => State; -export type ContentRenderPropT = () => React.ReactNode; +export type ContentRenderProp = () => React.ReactNode; -export type StatefulContentRenderPropT = (a: { close: () => void }) => React.ReactNode; +export type StatefulContentRenderProp = (a: { close: () => void }) => React.ReactNode; -export type OverridesT = { - Body?: OverrideT; - Arrow?: OverrideT; - Inner?: OverrideT; +export type PopoverOverrides = { + Body?: Override; + Arrow?: Override; + Inner?: Override; }; // re-exports to maintain same public interface -export type ChildT = React.ReactNode; -export type ChildrenT = Array | ChildT; +export type Child = React.ReactNode; +export type Children = Array | Child; // Props shared by all flavors of popover -export type BasePopoverPropsT = { +export type BasePopoverProps = { /** Controls how this popover behaves for screen readers and other assistive devices. * See the A11Y section at the bottom of this document for more details. */ - accessibilityType?: AccessibilityTypeT; + accessibilityType?: AccessibilityType; /** How long should be fade out animation in ms, default 0ms */ animateOutTime?: number; /** If true, focus will shift to the first interactive element within the popover. @@ -80,9 +80,9 @@ export type BasePopoverPropsT = { onMouseLeave?: (e: React.MouseEvent) => unknown; /** Number of milliseconds to wait before showing the popover after mouse leaves the trigger element (for triggerType `hover`). */ onMouseLeaveDelay?: number; - overrides?: OverridesT; + overrides?: PopoverOverrides; /** How to position the popover relative to the target. */ - placement: TetherPlacementT; + placement: TetherPlacement; /** Popper options override * https://github.com/popperjs/popper.js/blob/v1.x/docs/_includes/popper-documentation.md */ @@ -96,19 +96,19 @@ export type BasePopoverPropsT = { /** Whether or not to show the arrow pointing from the popover to the trigger. */ showArrow?: boolean; /** Whether to toggle the popover when trigger is clicked or hovered. */ - triggerType: TriggerTypeT; + triggerType: TriggerType; /** Margin of the popover */ popoverMargin?: number; }; // Props for stateless render logic -export type PopoverPropsT = BasePopoverPropsT & { +export type PopoverProps = BasePopoverProps & { /** Content that should trigger the popover to be shown (also acts as the anchor against * which the popover will be positioned). */ children: React.ReactNode; /** Content to render within the popover when it's shown. */ - content: React.ReactNode | ContentRenderPropT; + content: React.ReactNode | ContentRenderProp; /** Whether or not to show the popover. */ isOpen: boolean; /** Handler for clicks outside the anchor/popover elements. */ @@ -118,73 +118,73 @@ export type PopoverPropsT = BasePopoverPropsT & { }; // Props for stateful wrapper -export type StatefulPopoverPropsT = BasePopoverPropsT & { +export type StatefulPopoverProps = BasePopoverProps & { /** Content that should trigger the popover to be shown (also acts as the anchor against * which the popover will be positioned). */ children: React.ReactNode; /** Content to render within the popover when it's shown. */ - content: React.ReactNode | StatefulContentRenderPropT; + content: React.ReactNode | StatefulContentRenderProp; /** Whether to hide the popover when the user clicks anywhere outside the trigger/popover. */ dismissOnClickOutside: boolean; /** Whether to hide the popover when the user presses the escape key. */ dismissOnEsc: boolean; /** Initial state populated into the component */ - initialState?: StateT; + initialState?: State; /** Event handler when popover is hidden. */ onClose?: () => unknown; /** Event handler when popover is shown. */ onOpen?: () => unknown; /** Reducer function to manipulate internal state updates. */ - stateReducer?: StateReducerT; + stateReducer?: StateReducer; }; // Props for state container -export type StatefulPopoverContainerPropsT = Omit & { - children: (props: Omit) => React.ReactNode; +export type StatefulPopoverContainerProps = Omit & { + children: (props: Omit) => React.ReactNode; }; -export type PopoverPropsWithoutChildrenT = Omit; +export type PopoverPropsWithoutChildren = Omit; -export type OffsetT = { +export type Offset = { top: number; left: number; }; -export type PopoverPrivateStateT = { +export type PopoverPrivateState = { isAnimating: boolean; - arrowOffset: OffsetT; - popoverOffset: OffsetT; - placement: TetherPlacementT; + arrowOffset: Offset; + popoverOffset: Offset; + placement: TetherPlacement; isLayerMounted: boolean; isMounted: boolean; autoFocusAfterPositioning: boolean; }; -export type ArrowStylePropsArgT = { - $arrowOffset: OffsetT; - $placement: TetherPlacementT; +export type ArrowStylePropsArg = { + $arrowOffset: Offset; + $placement: TetherPlacement; }; -export type BodyStylePropsArgT = { +export type BodyStylePropsArg = { $animationDuration: number; $isAnimating: boolean; $isHoverTrigger: boolean; $isOpen: boolean; - $popoverOffset: OffsetT; - $placement: TetherPlacementT; + $popoverOffset: Offset; + $placement: TetherPlacement; $showArrow: boolean; $popoverMargin: number; }; -export type InnerStylePropsArgT = {}; +export type InnerStylePropsArg = {}; /* * Can't use Intersection types because of https://github.com/facebook/flow/issues/7946 * export type SharedStylePropsArgT = ArrowStylePropsArgT & BodyStylePropsArgT & InnerStylePropsArgT; */ -export type SharedStylePropsArgT = {} & ArrowStylePropsArgT & BodyStylePropsArgT; +export type SharedStylePropsArg = {} & ArrowStylePropsArg & BodyStylePropsArg; -export type AnchorPropsT = { +export type AnchorProps = { 'aria-controls'?: string | null; 'aria-describedby'?: string | null; 'aria-expanded'?: boolean; diff --git a/src/popover/utils.ts b/src/popover/utils.ts index 4ccab9f0d3..dc04551d1d 100644 --- a/src/popover/utils.ts +++ b/src/popover/utils.ts @@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree. */ /* eslint-disable import/prefer-default-export */ import { ARROW_SIZE, PLACEMENT } from './constants'; -import type { OffsetT, PopoverPlacementT } from './types'; +import type { Offset, PopoverPlacement } from './types'; const OPPOSITE_POSITIONS = { top: 'bottom', @@ -44,7 +44,7 @@ export function capitalize(str: string): string { * Opposite of function above, converts from Popper.js placement * to our placement prop */ -export function fromPopperPlacement(placement: string): PopoverPlacementT | null { +export function fromPopperPlacement(placement: string): PopoverPlacement | null { const popoverPlacement: string = placement .replace(/(top|bottom)-start$/, '$1Left') .replace(/(top|bottom)-end$/, '$1Right') @@ -56,7 +56,7 @@ export function fromPopperPlacement(placement: string): PopoverPlacementT | null /** * Splits something like 'topLeft' to ['top', 'left'] for easier usage */ -export function splitPlacement(placement: PopoverPlacementT): string[] { +export function splitPlacement(placement: PopoverPlacement): string[] { const matches = placement.match(/^([a-z]+)([A-Z][a-z]+)?/) || []; return (matches as string[]) .slice(1, 3) @@ -70,7 +70,7 @@ export function splitPlacement(placement: PopoverPlacementT): string[] { */ export function getPopoverMarginStyles( arrowSize: number, - placement: PopoverPlacementT, + placement: PopoverPlacement, popoverMargin: number ) { const [position] = splitPlacement(placement); @@ -88,8 +88,8 @@ export function getPopoverMarginStyles( * Returns CSS rules for the popover animation start keyframe */ export function getStartPosition( - offset: OffsetT, - placement: PopoverPlacementT, + offset: Offset, + placement: PopoverPlacement, arrowSize: number, popoverMargin: number ) { @@ -107,14 +107,14 @@ export function getStartPosition( /** * Returns CSS rules for the popover animation end keyframe */ -export function getEndPosition(offset: OffsetT) { +export function getEndPosition(offset: Offset) { return `translate3d(${offset.left}px, ${offset.top}px, 0)`; } /** * Returns top/left styles to position the popover arrow */ -export function getArrowPositionStyles(offsets: OffsetT, placement: PopoverPlacementT) { +export function getArrowPositionStyles(offsets: Offset, placement: PopoverPlacement) { const [position] = splitPlacement(placement); const oppositePosition = getOppositePosition(position); if (!oppositePosition) { diff --git a/src/progress-bar/progressbar-rounded.tsx b/src/progress-bar/progressbar-rounded.tsx index 042cd038d7..72f5c36104 100644 --- a/src/progress-bar/progressbar-rounded.tsx +++ b/src/progress-bar/progressbar-rounded.tsx @@ -15,7 +15,7 @@ import { StyledProgressBarRoundedText, } from './styled-components'; import { useOverrides } from '../helpers/overrides'; -import type { ProgressBarRoundedPropsT } from './types'; +import type { ProgressBarRoundedProps } from './types'; const defaults = { Root: StyledProgressBarRoundedRoot, @@ -42,7 +42,7 @@ function ProgressBarRounded({ inline = false, overrides = {}, ...restProps -}: ProgressBarRoundedPropsT) { +}: ProgressBarRoundedProps) { const { Root: [Root, rootProps], Svg: [Svg, svgProps], diff --git a/src/progress-bar/progressbar.tsx b/src/progress-bar/progressbar.tsx index de063459ca..7374237bb4 100644 --- a/src/progress-bar/progressbar.tsx +++ b/src/progress-bar/progressbar.tsx @@ -16,10 +16,10 @@ import { StyledInfiniteBar, } from './styled-components'; -import type { ProgressBarPropsT } from './types'; +import type { ProgressBarProps } from './types'; class ProgressBar extends React.Component< - ProgressBarPropsT & { + ProgressBarProps & { forwardedRef: any; } > { @@ -130,8 +130,8 @@ class ProgressBar extends React.Component< } } -const ForwardedProgressBar = React.forwardRef>( - (props: ProgressBarPropsT, ref) => ( +const ForwardedProgressBar = React.forwardRef>( + (props: ProgressBarProps, ref) => ( //$FlowExpectedError[cannot-spread-inexact] ) diff --git a/src/progress-bar/styled-components.tsx b/src/progress-bar/styled-components.tsx index 2555bd8f81..b5eac49148 100644 --- a/src/progress-bar/styled-components.tsx +++ b/src/progress-bar/styled-components.tsx @@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree. import { styled, hexToRgb, withWrapper } from '../styles'; import { SIZE } from './constants'; -import type { StylePropsT, SizeT } from './types'; +import type { StyleProps, Size } from './types'; import React from 'react'; import type { StyleObject } from 'styletron-standard'; @@ -19,13 +19,13 @@ function getBarHeight(size) { }[size]; } -export const StyledRoot = styled<'div', StylePropsT>('div', (props) => { +export const StyledRoot = styled<'div', StyleProps>('div', (props) => { return { width: '100%', }; }); -export const StyledBarContainer = styled<'div', StylePropsT>('div', (props) => { +export const StyledBarContainer = styled<'div', StyleProps>('div', (props) => { const { $theme } = props; const { sizing } = $theme; return { @@ -37,7 +37,7 @@ export const StyledBarContainer = styled<'div', StylePropsT>('div', (props) => { }; }); -export const StyledBar = styled<'div', StylePropsT>('div', (props) => { +export const StyledBar = styled<'div', StyleProps>('div', (props) => { const { $theme, $size, $steps } = props; const { colors, sizing, borders } = $theme; const borderRadius = borders.useRoundedCorners ? sizing.scale0 : 0; @@ -61,7 +61,7 @@ export const StyledBar = styled<'div', StylePropsT>('div', (props) => { }; }); -export const StyledBarProgress = styled<'div', StylePropsT>('div', (props) => { +export const StyledBarProgress = styled<'div', StyleProps>('div', (props) => { const { $theme, $value, $successValue, $steps, $index, $maxValue, $minValue = 0 } = props; // making sure this doesn't break existing use that use StyledBarProgress directly const maxValue = $maxValue ? $maxValue : $successValue; @@ -138,7 +138,7 @@ export const StyledInfiniteBar = styled< 'div', { $isLeft?: boolean; - $size: SizeT; + $size: Size; } >('div', (props) => { const { $theme, $isLeft = false, $size = SIZE.medium } = props; @@ -205,7 +205,7 @@ export const StyledInfiniteBar = styled< }; }); -export const StyledLabel = styled<'div', StylePropsT>('div', (props) => { +export const StyledLabel = styled<'div', StyleProps>('div', (props) => { return { textAlign: 'center', ...props.$theme.typography.font150, @@ -240,7 +240,7 @@ const PROGRESS_BAR_ROUNDED_SIZES = { export const StyledProgressBarRoundedRoot = styled< 'div', { - $size: SizeT; + $size: Size; $inline: boolean; } >('div', ({ $size, $inline }) => { @@ -257,7 +257,7 @@ export const StyledProgressBarRoundedRoot = styled< const _StyledProgressBarRoundedSvg = styled< 'svg', { - $size: SizeT; + $size: Size; } >('svg', ({ $size }) => { return { @@ -287,7 +287,7 @@ export const StyledProgressBarRoundedSvg = withWrapper( const _StyledProgressBarRoundedTrackBackground = styled< 'path', { - $size: SizeT; + $size: Size; } >('path', ({ $theme, $size }) => { return { @@ -307,7 +307,7 @@ export const StyledProgressBarRoundedTrackBackground = withWrapper( const _StyledProgressBarRoundedTrackForeground = styled< 'path', { - $size: SizeT; + $size: Size; $visible: boolean; $pathLength: number; $pathProgress: number; @@ -333,7 +333,7 @@ export const StyledProgressBarRoundedTrackForeground = withWrapper( export const StyledProgressBarRoundedText = styled< 'div', { - $size: SizeT; + $size: Size; } >('div', ({ $theme, $size }) => { return { diff --git a/src/progress-bar/types.ts b/src/progress-bar/types.ts index 86929bfc9e..85ca3defe9 100644 --- a/src/progress-bar/types.ts +++ b/src/progress-bar/types.ts @@ -5,21 +5,21 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import * as React from 'react'; -import type { OverrideT } from '../helpers/overrides'; +import type { Override } from '../helpers/overrides'; import { SIZE } from './constants'; -export type SizeT = keyof typeof SIZE; +export type Size = keyof typeof SIZE; -export type OverridesT = { - Root?: OverrideT; - BarContainer?: OverrideT; - Bar?: OverrideT; - BarProgress?: OverrideT; - InfiniteBar?: OverrideT; - Label?: OverrideT; +export type ProgressBarOverrides = { + Root?: Override; + BarContainer?: Override; + Bar?: Override; + BarProgress?: Override; + InfiniteBar?: Override; + Label?: Override; }; -export type ProgressBarPropsT = { +export type ProgressBarProps = { /** The accessible label for the progress bar (getProgressLabel will be used if not provided) */ ariaLabel?: string; 'aria-label'?: string; @@ -30,11 +30,11 @@ export type ProgressBarPropsT = { getProgressLabel: (value: number, maxValue: number, minValue: number) => React.ReactNode; /** If set to true, there’s and infinite loading animation. */ infinite: boolean; - overrides?: OverridesT; + overrides?: ProgressBarOverrides; /** If set to false, label is hidden and `getProgressLabel` is ignored. */ showLabel: boolean; /** Defines the size (thickness) of the progress bar. */ - size: SizeT; + size: Size; /** Renders a sectional progress bar. Value should be set to a positive number larger than one. */ steps: number; /** A custom completion value. Should be replaced by maxValue prop. */ @@ -47,10 +47,10 @@ export type ProgressBarPropsT = { value: number; }; -export type StylePropsT = { +export type StyleProps = { $infinite: boolean; $index: number; - $size: SizeT; + $size: Size; $steps: number; $successValue: number; $minValue: number; @@ -58,21 +58,21 @@ export type StylePropsT = { $value: number; }; -export type ProgressBarRoundedPropsT = { +export type ProgressBarRoundedProps = { /** A number between 0 and 1 inclusive. Example: 0.75. */ progress?: number; /** The size of the progress bar. */ - size?: SizeT; + size?: Size; /** Toggle animating progress. */ animate?: boolean; /** Toggle container rendering as a block or inline. */ inline?: boolean; /** Overrides for sub-nodes in the rendering tree. */ overrides?: { - Root?: OverrideT; - Svg?: OverrideT; - TrackBackground?: OverrideT; - TrackForeground?: OverrideT; - Text?: OverrideT; + Root?: Override; + Svg?: Override; + TrackBackground?: Override; + TrackForeground?: Override; + Text?: Override; }; }; diff --git a/src/progress-steps/__tests__/numbered-steps-icon-overrides.scenario.tsx b/src/progress-steps/__tests__/numbered-steps-icon-overrides.scenario.tsx index 0a5edb2fe6..8b10974afb 100644 --- a/src/progress-steps/__tests__/numbered-steps-icon-overrides.scenario.tsx +++ b/src/progress-steps/__tests__/numbered-steps-icon-overrides.scenario.tsx @@ -7,9 +7,9 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import { ThemeProvider, LightTheme } from '../../index'; import { Scenario as NumberedSteps } from './numbered-steps.scenario'; -import { IconPropsT } from '../../icon'; +import { IconProps } from '../../icon'; -const XSmallFilled = ({ title, size, color, ...props }: IconPropsT) => { +const XSmallFilled = ({ title, size, color, ...props }: IconProps) => { return ( {title} diff --git a/src/progress-steps/numbered-step.tsx b/src/progress-steps/numbered-step.tsx index 23d19e64d1..a83e925e2b 100644 --- a/src/progress-steps/numbered-step.tsx +++ b/src/progress-steps/numbered-step.tsx @@ -17,7 +17,7 @@ import { } from './styled-components'; import Check from '../icon/check'; -import type { NumberedStepPropsT } from './types'; +import type { NumberedStepProps } from './types'; function NumberedStep({ overrides = {}, @@ -27,7 +27,7 @@ function NumberedStep({ title, step, children, -}: NumberedStepPropsT) { +}: NumberedStepProps) { const [Root, rootProps] = getOverrides(overrides.Root, StyledNumberStep); const [Icon, iconProps] = getOverrides(overrides.Icon, StyledNumberIcon); const [Tail, tailProps] = getOverrides(overrides.Tail, StyledNumberContentTail); diff --git a/src/progress-steps/progress-steps.tsx b/src/progress-steps/progress-steps.tsx index 7e37f22068..7a0ea9bada 100644 --- a/src/progress-steps/progress-steps.tsx +++ b/src/progress-steps/progress-steps.tsx @@ -8,9 +8,9 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import { getOverrides } from '../helpers/overrides'; import { StyledProgressSteps } from './styled-components'; -import type { ProgressStepsPropsT, StepPropsT } from './types'; +import type { ProgressStepsProps, StepProps } from './types'; -function ProgressSteps({ overrides = {}, current, children }: ProgressStepsPropsT) { +function ProgressSteps({ overrides = {}, current, children }: ProgressStepsProps) { const [Root, rootProps] = getOverrides(overrides.Root, StyledProgressSteps); const numChildren = React.Children.count(children); const modifiedChildren = React.Children.map(children, (child: any, index) => { @@ -30,7 +30,7 @@ function ProgressSteps({ overrides = {}, current, children }: ProgressStepsProps Root: overrides.StepRoot, ...childOverrides, }, - } as StepPropsT); + } as StepProps); }); return ( diff --git a/src/progress-steps/step.tsx b/src/progress-steps/step.tsx index ac5e2549c5..b5057ec17e 100644 --- a/src/progress-steps/step.tsx +++ b/src/progress-steps/step.tsx @@ -18,9 +18,9 @@ import { StyledContentDescription, } from './styled-components'; -import type { StepPropsT } from './types'; +import type { StepProps } from './types'; -function Step({ overrides = {}, isCompleted, isActive, isLast, title, children }: StepPropsT) { +function Step({ overrides = {}, isCompleted, isActive, isLast, title, children }: StepProps) { const [Root, rootProps] = getOverrides(overrides.Root, StyledStep); const [IconContainer, iconContainerProps] = getOverrides( overrides.IconContainer, diff --git a/src/progress-steps/styled-components.ts b/src/progress-steps/styled-components.ts index 8d673da12a..25db480f61 100644 --- a/src/progress-steps/styled-components.ts +++ b/src/progress-steps/styled-components.ts @@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree. */ import { styled } from '../styles'; -import type { StylePropsT } from './types'; +import type { StyleProps } from './types'; export const StyledProgressSteps = styled('ol', ({ $theme }) => { return { @@ -20,7 +20,7 @@ export const StyledProgressSteps = styled('ol', ({ $theme }) => { }; }); -export const StyledStep = styled<'li', StylePropsT>('li', ({ $theme }) => { +export const StyledStep = styled<'li', StyleProps>('li', ({ $theme }) => { return { listStyleType: 'none', position: 'relative', @@ -28,7 +28,7 @@ export const StyledStep = styled<'li', StylePropsT>('li', ({ $theme }) => { }; }); -export const StyledIconContainer = styled<'div', StylePropsT>( +export const StyledIconContainer = styled<'div', StyleProps>( 'div', ({ $theme, $isActive, $isCompleted, $disabled }) => { let currentColor = $theme.colors.backgroundPrimary; @@ -66,7 +66,7 @@ export const StyledIconContainer = styled<'div', StylePropsT>( } ); -export const StyledIcon = styled<'div', StylePropsT>( +export const StyledIcon = styled<'div', StyleProps>( 'div', ({ $theme, $isActive, $isCompleted, $disabled }) => { let currentColor = $theme.colors.mono400; @@ -100,7 +100,7 @@ export const StyledIcon = styled<'div', StylePropsT>( } ); -export const StyledInnerIcon = styled<'div', StylePropsT>('div', ({ $theme }) => { +export const StyledInnerIcon = styled<'div', StyleProps>('div', ({ $theme }) => { return { width: $theme.sizing.scale300, height: $theme.sizing.scale300, @@ -114,14 +114,14 @@ export const StyledInnerIcon = styled<'div', StylePropsT>('div', ({ $theme }) => }; }); -export const StyledContent = styled<'div', StylePropsT>('div', ({ $theme }) => { +export const StyledContent = styled<'div', StyleProps>('div', ({ $theme }) => { const marginDir: string = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft'; return { [marginDir]: $theme.sizing.scale1600, }; }); -export const StyledContentTitle = styled<'div', StylePropsT>( +export const StyledContentTitle = styled<'div', StyleProps>( 'div', ({ $theme, $isActive, $isCompleted }) => { let color = $theme.colors.primary400; @@ -141,7 +141,7 @@ export const StyledContentTitle = styled<'div', StylePropsT>( } ); -export const StyledContentTail = styled<'div', StylePropsT>( +export const StyledContentTail = styled<'div', StyleProps>( 'div', ({ $theme, $isCompleted, $isActive }) => { let currentColor = $theme.colors.mono400; @@ -173,13 +173,13 @@ export const StyledContentTail = styled<'div', StylePropsT>( } ); -export const StyledContentDescription = styled<'div', StylePropsT>('div', ({ $theme }) => { +export const StyledContentDescription = styled<'div', StyleProps>('div', ({ $theme }) => { return { marginBottom: $theme.sizing.scale700, }; }); -export const StyledNumberStep = styled<'li', StylePropsT>('li', ({ $theme }) => { +export const StyledNumberStep = styled<'li', StyleProps>('li', ({ $theme }) => { return { listStyleType: 'none', position: 'relative', @@ -187,7 +187,7 @@ export const StyledNumberStep = styled<'li', StylePropsT>('li', ({ $theme }) => }; }); -export const StyledNumberIcon = styled<'div', StylePropsT>( +export const StyledNumberIcon = styled<'div', StyleProps>( 'div', ({ $theme, $isActive, $isCompleted, $disabled }) => { let backgroundColor = $theme.colors.mono400; @@ -231,7 +231,7 @@ export const StyledNumberIcon = styled<'div', StylePropsT>( } ); -export const StyledNumberContentTail = styled<'div', StylePropsT>( +export const StyledNumberContentTail = styled<'div', StyleProps>( 'div', ({ $theme, $isActive, $isCompleted, $disabled }) => { let currentColor = $theme.colors.mono300; diff --git a/src/progress-steps/types.ts b/src/progress-steps/types.ts index da65ea6de1..2aa8cbf13d 100644 --- a/src/progress-steps/types.ts +++ b/src/progress-steps/types.ts @@ -6,39 +6,39 @@ LICENSE file in the root directory of this source tree. */ import type { ReactNode } from 'react'; -import type { OverrideT } from '../helpers/overrides'; +import type { Override } from '../helpers/overrides'; -export type ProgressStepsOverridesT = { - Root?: OverrideT; - StepRoot?: OverrideT; - IconContainer?: OverrideT; - Icon?: OverrideT; - InnerIcon?: OverrideT; - Tail?: OverrideT; - Content?: OverrideT; - Title?: OverrideT; - Description?: OverrideT; +export type ProgressStepsOverrides = { + Root?: Override; + StepRoot?: Override; + IconContainer?: Override; + Icon?: Override; + InnerIcon?: Override; + Tail?: Override; + Content?: Override; + Title?: Override; + Description?: Override; }; -export type ProgressStepsPropsT = { - overrides?: ProgressStepsOverridesT; +export type ProgressStepsProps = { + overrides?: ProgressStepsOverrides; children?: ReactNode; /** Defines the current active step index. */ current: number; }; -export type StepOverridesT = { - Root?: OverrideT; - IconContainer?: OverrideT; - Icon?: OverrideT; - InnerIcon?: OverrideT; - Tail?: OverrideT; - Content?: OverrideT; - Title?: OverrideT; - Description?: OverrideT; +export type StepOverrides = { + Root?: Override; + IconContainer?: Override; + Icon?: Override; + InnerIcon?: Override; + Tail?: Override; + Content?: Override; + Title?: Override; + Description?: Override; }; -export type StepPropsT = { +export type StepProps = { /** The title of the Step. */ title?: ReactNode; /** Defines if the step is completed. Overriden by ProgressSteps, if used. */ @@ -47,22 +47,22 @@ export type StepPropsT = { isActive?: boolean; /** Defines if the step is the last item displayed. Overriden by ProgressSteps, if used. */ isLast: boolean; - overrides?: StepOverridesT; + overrides?: StepOverrides; children?: ReactNode; }; -export type NumberedStepOverridesT = { - Root?: OverrideT; - IconContainer?: OverrideT; - Icon?: OverrideT; - InnerIcon?: OverrideT; - Tail?: OverrideT; - Content?: OverrideT; - Title?: OverrideT; - Description?: OverrideT; +export type NumberedStepOverrides = { + Root?: Override; + IconContainer?: Override; + Icon?: Override; + InnerIcon?: Override; + Tail?: Override; + Content?: Override; + Title?: Override; + Description?: Override; }; -export type NumberedStepPropsT = { +export type NumberedStepProps = { /** The title of the Step. */ title?: string; /** Defines if the step is completed. */ @@ -71,13 +71,13 @@ export type NumberedStepPropsT = { isActive?: boolean; /** Defines if the step is the last item displayed. */ isLast: boolean; - overrides?: NumberedStepOverridesT; + overrides?: NumberedStepOverrides; children?: ReactNode; /** The number displayed as the step number */ step?: ReactNode; }; -export type StylePropsT = { +export type StyleProps = { $isActive: boolean; $isCompleted: boolean; $disabled: boolean; diff --git a/src/radio/radio.tsx b/src/radio/radio.tsx index aba2f7528a..ee6598d582 100644 --- a/src/radio/radio.tsx +++ b/src/radio/radio.tsx @@ -16,7 +16,7 @@ import { RadioMarkOuter as StyledRadioMarkOuter, Description as StyledDescription, } from './styled-components'; -import type { RadioPropsT, RadioStateT } from './types'; +import type { RadioProps, RadioState } from './types'; import type { ChangeEvent } from 'react'; @@ -30,7 +30,7 @@ function isLabelBottomRight(labelPlacement) { const stopPropagation = (e) => e.stopPropagation(); -class Radio extends React.Component { +class Radio extends React.Component { static defaultProps = { overrides: {}, containsInteractiveElement: false, diff --git a/src/radio/radiogroup.tsx b/src/radio/radiogroup.tsx index 09f0bb3997..28f9bcb51c 100644 --- a/src/radio/radiogroup.tsx +++ b/src/radio/radiogroup.tsx @@ -9,13 +9,13 @@ import * as React from 'react'; import { getOverrides } from '../helpers/overrides'; import { RadioGroupRoot as StyledRadioGroupRoot } from './styled-components'; -import type { PropsT, DefaultPropsT, StatelessStateT } from './types'; +import type { Props, DefaultProps, StatelessState } from './types'; import { isFocusVisible } from '../utils/focusVisible'; import type { ChangeEvent } from 'react'; -class StatelessRadioGroup extends React.Component { - static defaultProps: DefaultPropsT = { +class StatelessRadioGroup extends React.Component { + static defaultProps: DefaultProps = { name: '', value: '', disabled: false, diff --git a/src/radio/stateful-radiogroup-container.ts b/src/radio/stateful-radiogroup-container.ts index f8beeb421a..65ce55d8ae 100644 --- a/src/radio/stateful-radiogroup-container.ts +++ b/src/radio/stateful-radiogroup-container.ts @@ -6,19 +6,14 @@ LICENSE file in the root directory of this source tree. */ import * as React from 'react'; import { STATE_TYPE } from './constants'; -import type { - StatefulContainerPropsT, - StateReducerT, - DefaultStatefulPropsT, - StateT, -} from './types'; +import type { StatefulContainerProps, StateReducer, DefaultStatefulProps, State } from './types'; import type { ChangeEvent } from 'react'; -const defaultStateReducer: StateReducerT = (type, nextState) => nextState; +const defaultStateReducer: StateReducer = (type, nextState) => nextState; -class StatefulRadioGroupContainer extends React.Component { - static defaultProps: DefaultStatefulPropsT = { +class StatefulRadioGroupContainer extends React.Component { + static defaultProps: DefaultStatefulProps = { initialState: { value: '', }, @@ -26,7 +21,7 @@ class StatefulRadioGroupContainer extends React.Component {}, }; - constructor(props: StatefulContainerPropsT) { + constructor(props: StatefulContainerProps) { super(props); const { initialState } = this.props; this.state = { diff --git a/src/radio/stateful-radiogroup.tsx b/src/radio/stateful-radiogroup.tsx index 8156c95293..5eeea765c5 100644 --- a/src/radio/stateful-radiogroup.tsx +++ b/src/radio/stateful-radiogroup.tsx @@ -9,16 +9,16 @@ import * as React from 'react'; import StatefulContainer from './stateful-radiogroup-container'; // eslint-disable-next-line import/no-named-default import RadioGroup from './radiogroup'; -import type { PropsT, StatefulRadioGroupPropsT } from './types'; +import type { Props, StatefulRadioGroupProps } from './types'; // Styled elements const StatefulRadioGroup = function ( - props: StatefulRadioGroupPropsT & Omit + props: StatefulRadioGroupProps & Omit ) { const { children, ...restProps } = props; return ( - {(childrenProps: PropsT) => {children}} + {(childrenProps: Props) => {children}} ); }; diff --git a/src/radio/styled-components.ts b/src/radio/styled-components.ts index 25a156a213..c99750ad98 100644 --- a/src/radio/styled-components.ts +++ b/src/radio/styled-components.ts @@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import { styled } from '../styles'; -import type { StylePropsT } from './types'; +import type { StyleProps } from './types'; const DEFAULT = 0; const HOVERED = 1; @@ -119,7 +119,7 @@ function getLabelColor(props) { return $disabled ? colors.contentSecondary : colors.contentPrimary; } -export const RadioGroupRoot = styled<'div', StylePropsT>('div', (props) => { +export const RadioGroupRoot = styled<'div', StyleProps>('div', (props) => { const { $disabled, $align } = props; return { display: 'flex', @@ -131,7 +131,7 @@ export const RadioGroupRoot = styled<'div', StylePropsT>('div', (props) => { }; }); -export const Root = styled<'label', StylePropsT>('label', (props) => { +export const Root = styled<'label', StyleProps>('label', (props) => { const { $disabled, $hasDescription, $labelPlacement, $theme, $align } = props; const { sizing } = $theme; const isHorizontal = $align === 'horizontal'; @@ -148,7 +148,7 @@ export const Root = styled<'label', StylePropsT>('label', (props) => { }; }); -export const RadioMarkInner = styled<'div', StylePropsT>('div', (props) => { +export const RadioMarkInner = styled<'div', StyleProps>('div', (props) => { const { animation, sizing } = props.$theme; return { @@ -164,7 +164,7 @@ export const RadioMarkInner = styled<'div', StylePropsT>('div', (props) => { }; }); -export const RadioMarkOuter = styled<'div', StylePropsT>('div', (props) => { +export const RadioMarkOuter = styled<'div', StyleProps>('div', (props) => { const { animation, sizing } = props.$theme; return { @@ -192,7 +192,7 @@ export const RadioMarkOuter = styled<'div', StylePropsT>('div', (props) => { }; }); -export const Label = styled<'div', StylePropsT>('div', (props) => { +export const Label = styled<'div', StyleProps>('div', (props) => { const { $theme: { typography }, } = props; @@ -220,7 +220,7 @@ export const Input = styled('input', { position: 'absolute', }); -export const Description = styled<'div', StylePropsT>('div', (props) => { +export const Description = styled<'div', StyleProps>('div', (props) => { const { $theme, $align } = props; const isHorizontal = $align === 'horizontal'; const marginBefore = $theme.direction === 'rtl' ? 'Right' : 'Left'; diff --git a/src/radio/types.ts b/src/radio/types.ts index a5584e04df..422592b3d2 100644 --- a/src/radio/types.ts +++ b/src/radio/types.ts @@ -6,30 +6,30 @@ LICENSE file in the root directory of this source tree. */ import * as React from 'react'; -import type { OverrideT } from '../helpers/overrides'; +import type { Override } from '../helpers/overrides'; import { ALIGN } from './constants'; import type { ReactNode, ChangeEvent } from 'react'; -export type LabelPlacementT = 'top' | 'right' | 'bottom' | 'left'; -export type AlignT = keyof typeof ALIGN; +export type LabelPlacement = 'top' | 'right' | 'bottom' | 'left'; +export type Align = keyof typeof ALIGN; -export type RadioOverridesT = { - RadioMarkInner?: OverrideT; - RadioMarkOuter?: OverrideT; - Label?: OverrideT; - Root?: OverrideT; - Input?: OverrideT; - Description?: OverrideT; +export type RadioOverrides = { + RadioMarkInner?: Override; + RadioMarkOuter?: Override; + Label?: Override; + Root?: Override; + Input?: Override; + Description?: Override; }; -export type RadioGroupOverridesT = { - RadioGroupRoot?: OverrideT; +export type RadioGroupOverrides = { + RadioGroupRoot?: Override; }; -export type DefaultPropsT = Partial; +export type DefaultProps = Partial; -export type PropsT = { +export type Props = { /** Id of element which contains a related caption */ 'aria-describedby'?: string; /** Id of element which contains a related error message */ @@ -45,7 +45,7 @@ export type PropsT = { */ 'aria-labelledby'?: string; // This prop will be deprecated in the next major update. Pass overrides to the 'Radio' component instead. - overrides?: RadioGroupOverridesT; + overrides?: RadioGroupOverrides; /** As `children` in React native approach represents radio buttons inside of Radio Group. Can use `Radio` from this package. */ children?: Array; /** The value of radio button, which is preselected. */ @@ -59,11 +59,11 @@ export type PropsT = { /** Set to be focused (active) on selected\checked radio. */ autoFocus?: boolean; /** How to position radio buttons in the group. */ - align?: AlignT; + align?: Align; /** String value for the name of RadioGroup, it is used to group buttons. If missed default is random ID string. */ name?: string; /** How to position the label relative to the radio itself. */ - labelPlacement?: LabelPlacementT; + labelPlacement?: LabelPlacement; /** Unique id for RadioGroup, help ARIA to identify element */ id?: string; /** Handler for change events on trigger element. */ @@ -78,15 +78,15 @@ export type PropsT = { onBlur?: (e: ChangeEvent) => unknown; }; -export type StateT = { +export type State = { value?: string; }; -export type RadioPropsT = { +export type RadioProps = { /** Focus the radio on initial render. */ autoFocus?: boolean; /** How the radio will be displayed along with its description. Controls spacing */ - align?: AlignT; + align?: Align; /** Check or uncheck the control. */ checked?: boolean; /** Label of radio. */ @@ -123,7 +123,7 @@ export type RadioPropsT = { onMouseDown?: (e: ChangeEvent) => unknown; /** Handler for mouseup events on trigger element. */ onMouseUp?: (e: ChangeEvent) => unknown; - overrides?: RadioOverridesT; + overrides?: RadioOverrides; /** Marks the checkbox as required. */ required?: boolean; /** Passed to the input element value attribute */ @@ -132,57 +132,57 @@ export type RadioPropsT = { tabIndex?: string; }; -export type RadioStateT = { +export type RadioState = { isActive: boolean; isHovered: boolean; }; -export type StateReducerT = ( +export type StateReducer = ( stateType: string, - nextState: StateT, - currentState: StateT, + nextState: State, + currentState: State, event: ChangeEvent -) => StateT; +) => State; -export type StatelessStateT = { +export type StatelessState = { isFocusVisible: boolean; focusedRadioIndex: number; }; -export type DefaultStatefulPropsT = { - initialState: StateT; - children?: (props: PropsT) => React.ReactNode; - stateReducer: StateReducerT; +export type DefaultStatefulProps = { + initialState: State; + children?: (props: Props) => React.ReactNode; + stateReducer: StateReducer; onChange: (e: ChangeEvent) => unknown; }; -export type StatefulContainerPropsT = { - overrides?: RadioGroupOverridesT; +export type StatefulContainerProps = { + overrides?: RadioGroupOverrides; /** Should return `RadioGroup` instance with standard or customized inner elements. */ - children?: (props: PropsT) => React.ReactNode; + children?: (props: Props) => React.ReactNode; /** Initial state populated into the component */ - initialState?: StateT; + initialState?: State; /** Reducer function to manipulate internal state updates. */ - stateReducer: StateReducerT; + stateReducer: StateReducer; /** Handler for change events on trigger element. */ onChange?: (e: ChangeEvent) => unknown; /** Set to be focused (active) on selected\checked radio. */ autoFocus?: boolean; }; -export type StatefulRadioGroupPropsT = { - overrides?: RadioGroupOverridesT; +export type StatefulRadioGroupProps = { + overrides?: RadioGroupOverrides; /** A list of `Radio` components. */ children?: Array; /** Initial state populated into the component */ - initialState?: StateT; + initialState?: State; /** Set to be focused (active) on selected\checked radio. */ autoFocus?: boolean; /** Handler for change events on trigger element. */ onChange?: (e: ChangeEvent) => unknown; }; -export type StylePropsT = { +export type StyleProps = { $align?: string; // todo(flow->ts): can be improved - 'horizontal'|'vertical' is expected (the values are coming from ALIGN constants) $checked: boolean; $disabled: boolean; @@ -192,7 +192,7 @@ export type StylePropsT = { $isFocused: boolean; $isFocusVisible: boolean; $isHovered: boolean; - $labelPlacement: LabelPlacementT; + $labelPlacement: LabelPlacement; $required: boolean; $value: string; }; diff --git a/src/rating/emoticon-rating.tsx b/src/rating/emoticon-rating.tsx index c94c88fafc..80cfbc987f 100644 --- a/src/rating/emoticon-rating.tsx +++ b/src/rating/emoticon-rating.tsx @@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree. */ import * as React from 'react'; -import type { EmoticonRatingPropsT, RatingStateT } from './types'; +import type { EmoticonRatingProps, RatingState } from './types'; import { StyledRoot, StyledEmoticon } from './styled-components'; import { getOverrides } from '../helpers/overrides'; import { ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT } from './utils'; @@ -14,13 +14,13 @@ import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible'; import type { SyntheticEvent } from 'react'; -class EmoticonRating extends React.Component { +class EmoticonRating extends React.Component { static defaultProps = { overrides: {}, readOnly: false, }; - state = { isFocusVisible: false, previewIndex: undefined } as RatingStateT; + state = { isFocusVisible: false, previewIndex: undefined } as RatingState; selectItem = (value: number) => { const { onChange } = this.props; diff --git a/src/rating/star-rating.tsx b/src/rating/star-rating.tsx index 5783f99793..b37e592783 100644 --- a/src/rating/star-rating.tsx +++ b/src/rating/star-rating.tsx @@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree. */ import * as React from 'react'; -import type { StarRatingPropsT, RatingStateT } from './types'; +import type { StarRatingProps, RatingState } from './types'; import { StyledRoot, StyledStar } from './styled-components'; import { getOverrides } from '../helpers/overrides'; import { ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT } from './utils'; @@ -14,14 +14,14 @@ import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible'; import type { SyntheticEvent } from 'react'; -class StarRating extends React.Component { +class StarRating extends React.Component { static defaultProps = { overrides: {}, numItems: 5, readOnly: false, }; - state = { isFocusVisible: false, previewIndex: undefined } as RatingStateT; + state = { isFocusVisible: false, previewIndex: undefined } as RatingState; selectItem = (value: number) => { const { onChange } = this.props; diff --git a/src/rating/styled-components.ts b/src/rating/styled-components.ts index 72db3d4ed1..dd256cb388 100644 --- a/src/rating/styled-components.ts +++ b/src/rating/styled-components.ts @@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree. */ import { styled } from '../styles'; -import type { StyledRootPropsT, StyledRatingItemPropsT } from './types'; +import type { StyledRootProps, StyledRatingItemProps } from './types'; import { starSVG, angryRatingSVG, @@ -17,7 +17,7 @@ import { } from './svg-icons'; import type { StyleObject } from 'styletron-standard'; -export const StyledRoot = styled<'ul', StyledRootPropsT>('ul', ({ $theme }) => { +export const StyledRoot = styled<'ul', StyledRootProps>('ul', ({ $theme }) => { return { marginLeft: 0, marginRight: 0, @@ -34,7 +34,7 @@ export const StyledRoot = styled<'ul', StyledRootPropsT>('ul', ({ $theme }) => { }; }); -export const StyledStar = styled<'li', StyledRatingItemPropsT>( +export const StyledStar = styled<'li', StyledRatingItemProps>( 'li', ({ $theme, $isActive, $isPartialActive, $isSelected, $isFocusVisible, $isReadOnly, $size }) => { let starStroke = $theme.colors.ratingStroke; @@ -99,7 +99,7 @@ export const StyledStar = styled<'li', StyledRatingItemPropsT>( } ); -export const StyledEmoticon = styled<'li', StyledRatingItemPropsT>( +export const StyledEmoticon = styled<'li', StyledRatingItemProps>( 'li', ({ $theme, $isActive, $isSelected, $index = 1, $isFocusVisible, $isReadOnly, $size }) => { let emoticonFill = $theme.colors.ratingInactiveFill; diff --git a/src/rating/types.ts b/src/rating/types.ts index 1ce90e6a05..2b29f54e52 100644 --- a/src/rating/types.ts +++ b/src/rating/types.ts @@ -4,16 +4,16 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import type { ThemeT } from '../styles/types'; -import type { OverrideT } from '../helpers/overrides'; +import type { Theme } from '../styles/types'; +import type { Override } from '../helpers/overrides'; -export type RatingOverridesT = { - Root?: OverrideT; - Item?: OverrideT; +export type RatingOverrides = { + Root?: Override; + Item?: Override; }; -export type StarRatingPropsT = { - overrides?: RatingOverridesT; +export type StarRatingProps = { + overrides?: RatingOverrides; /** The current rating value. */ value?: number; /** The total number of items to display. */ @@ -24,8 +24,8 @@ export type StarRatingPropsT = { size?: number; }; -export type EmoticonRatingPropsT = { - overrides?: RatingOverridesT; +export type EmoticonRatingProps = { + overrides?: RatingOverrides; /** The current rating value. */ value?: number; readOnly?: boolean; @@ -34,17 +34,17 @@ export type EmoticonRatingPropsT = { size?: number; }; -export type RatingStateT = { +export type RatingState = { previewIndex?: number; isFocusVisible?: boolean; }; -export type StyledRootPropsT = { - $theme: ThemeT; +export type StyledRootProps = { + $theme: Theme; }; -export type StyledRatingItemPropsT = { - $theme: ThemeT; +export type StyledRatingItemProps = { + $theme: Theme; $isActive: boolean; $isPartialActive: boolean; $isSelected: boolean; diff --git a/src/select/__tests__/select-async-options.scenario.tsx b/src/select/__tests__/select-async-options.scenario.tsx index 63cae53cd7..ec2a6b777a 100644 --- a/src/select/__tests__/select-async-options.scenario.tsx +++ b/src/select/__tests__/select-async-options.scenario.tsx @@ -5,9 +5,9 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import * as React from 'react'; -import { OptionT, Select } from '..'; +import { Option, Select } from '..'; -const COLORS: OptionT[] = [ +const COLORS: Option[] = [ { label: 'AliceBlue', id: '#F0F8FF' }, { label: 'AntiqueWhite', id: '#FAEBD7' }, { label: 'Aqua', id: '#00FFFF' }, diff --git a/src/select/__tests__/select-controlref.test.tsx b/src/select/__tests__/select-controlref.test.tsx index 06cea9d544..26079dbd25 100644 --- a/src/select/__tests__/select-controlref.test.tsx +++ b/src/select/__tests__/select-controlref.test.tsx @@ -11,7 +11,7 @@ import BaseProvider from '../../helpers/base-provider'; import { LightTheme } from '../../themes/index'; import { StatefulSelect, Select } from '../index'; -import type { ControlRefT } from '../types'; +import type { ControlRef } from '../types'; describe('setDropdownOpen', function () { it('opens and closes dropdown with StatefulSelect', () => { @@ -20,7 +20,7 @@ describe('setDropdownOpen', function () { { id: 'b', label: 'b' }, { id: 'c', label: 'c' }, ]; - const controlRef: ControlRefT = React.createRef(); + const controlRef: ControlRef = React.createRef(); const { container } = render( @@ -60,7 +60,7 @@ describe('setDropdownOpen', function () { { id: 'b', label: 'b' }, { id: 'c', label: 'c' }, ]; - const controlRef = React.createRef() as ControlRefT; + const controlRef = React.createRef() as ControlRef; const TestCase = () => { const [value, setValue] = React.useState([]); @@ -113,7 +113,7 @@ describe('setInputValue', function () { { id: 'b', label: 'unicorns' }, { id: 'c', label: 'elves' }, ]; - const controlRef = React.createRef() as ControlRefT; + const controlRef = React.createRef() as ControlRef; const TestCase = () => { const [value, setValue] = React.useState([]); diff --git a/src/select/__tests__/select-icon-overrides.scenario.tsx b/src/select/__tests__/select-icon-overrides.scenario.tsx index 07ec273c35..e3e2e869e0 100644 --- a/src/select/__tests__/select-icon-overrides.scenario.tsx +++ b/src/select/__tests__/select-icon-overrides.scenario.tsx @@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import { ThemeProvider, LightTheme } from '../../index'; import { StatefulSelect, TYPE } from '../index'; -import { IconPropsT } from '../../icon'; +import { IconProps } from '../../icon'; const options = [ { id: 'AliceBlue', color: '#F0F8FF' }, @@ -18,7 +18,7 @@ const options = [ { id: 'Beige', color: '#F5F5DC' }, ]; -const XSmallFilled = ({ title, size, color, ...props }: IconPropsT) => { +const XSmallFilled = ({ title, size, color, ...props }: IconProps) => { return ( {title} diff --git a/src/select/__tests__/select.test.tsx b/src/select/__tests__/select.test.tsx index d76ac65145..e1eb95b7c5 100644 --- a/src/select/__tests__/select.test.tsx +++ b/src/select/__tests__/select.test.tsx @@ -12,7 +12,7 @@ import { TestBaseProvider } from '../../test/test-utils'; import Select from '../select'; import { STATE_CHANGE_TYPE } from '../constants'; -import { type ControlRefT } from '..'; +import { type ControlRef } from '..'; describe('Select component', function () { let props: any = {}; @@ -85,7 +85,7 @@ describe('Select component', function () { it('sets controlRef from props', () => { function TestCase() { - const ref = React.useRef() as ControlRefT; + const ref = React.useRef() as ControlRef; React.useEffect(() => { if (ref.current) { ref.current.focus(); diff --git a/src/select/autosize-input.tsx b/src/select/autosize-input.tsx index c4df7a8d17..8fb826f16d 100644 --- a/src/select/autosize-input.tsx +++ b/src/select/autosize-input.tsx @@ -8,12 +8,12 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import { StyledInput, StyledInputSizer } from './styled-components'; import { getOverrides } from '../helpers/overrides'; -import type { AutosizeInputPropsT, AutosizeInputStateT } from './types'; +import type { AutosizeInputProps, AutosizeInputState } from './types'; import type { ComponentProps } from 'react'; export default class AutosizeInput extends React.Component< - AutosizeInputPropsT & Omit, keyof AutosizeInputPropsT>, - AutosizeInputStateT + AutosizeInputProps & Omit, keyof AutosizeInputProps>, + AutosizeInputState > { mounted: boolean; sizer: HTMLElement | undefined | null; @@ -32,7 +32,7 @@ export default class AutosizeInput extends React.Component< this.mounted = true; this.updateInputWidth(); } - componentDidUpdate(prevProps: AutosizeInputPropsT, prevState: AutosizeInputStateT) { + componentDidUpdate(prevProps: AutosizeInputProps, prevState: AutosizeInputState) { this.updateInputWidth(); } componentWillUnmount() { diff --git a/src/select/dropdown.tsx b/src/select/dropdown.tsx index ec5aba9c7f..1220830484 100644 --- a/src/select/dropdown.tsx +++ b/src/select/dropdown.tsx @@ -12,12 +12,12 @@ import { StyledOptionContent, } from './styled-components'; import { StatefulMenu } from '../menu'; -import type { DropdownPropsT, OptionT, ValueT } from './types'; +import type { DropdownProps, Option, Value } from './types'; import { getOverrides, mergeOverrides } from '../helpers/overrides'; import type { SyntheticEvent } from 'react'; -function groupOptions(options: ValueT) { +function groupOptions(options: Value) { return options.reduce( (groups, option) => { if (option.__optgroup) { @@ -35,7 +35,7 @@ function groupOptions(options: ValueT) { ); } -export default class SelectDropdown extends React.Component { +export default class SelectDropdown extends React.Component { getSharedProps() { const { error, isLoading, multi, required, size, searchable, type, width } = this.props; return { @@ -90,7 +90,7 @@ export default class SelectDropdown extends React.Component { getHighlightedIndex = () => { const { value, options, valueKey } = this.props; // Highlight only first value as menu supports only a single highlight index - let firstValue: OptionT = {}; + let firstValue: Option = {}; if (Array.isArray(value) && value.length > 0) { firstValue = value[0]; diff --git a/src/select/index.ts b/src/select/index.ts index b564aa67be..9e1f506541 100644 --- a/src/select/index.ts +++ b/src/select/index.ts @@ -35,4 +35,4 @@ export { export { default as filterOptions } from './utils/default-filter-options'; export { SIZE, TYPE, STATE_CHANGE_TYPE } from './constants'; export * from './types'; -export type { SelectLocaleT } from './locale'; +export type { SelectLocale } from './locale'; diff --git a/src/select/locale.ts b/src/select/locale.ts index f9646f9693..16dedc4a13 100644 --- a/src/select/locale.ts +++ b/src/select/locale.ts @@ -4,7 +4,7 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -export type SelectLocaleT = { +export type SelectLocale = { // Remove noResultsMsg prop in the next major version noResultsMsg: string; placeholder: string; diff --git a/src/select/multi-select.tsx b/src/select/multi-select.tsx index 766e8b2141..c07cd95f43 100644 --- a/src/select/multi-select.tsx +++ b/src/select/multi-select.tsx @@ -7,9 +7,9 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import SelectComponent from './select-component'; import MultiValue from './multi-value'; -import type { PropsT } from './types'; +import type { SelectProps } from './types'; -function MultiSelect(props: Partial) { +function MultiSelect(props: Partial) { return ; } diff --git a/src/select/select-component.tsx b/src/select/select-component.tsx index ac751ac5be..9880321e1b 100644 --- a/src/select/select-component.tsx +++ b/src/select/select-component.tsx @@ -12,7 +12,7 @@ import DeleteAlt from '../icon/delete-alt'; import TriangleDownIcon from '../icon/triangle-down'; import SearchIconComponent from '../icon/search'; import { LocaleContext } from '../locale'; -import type { LocaleT } from '../locale'; +import type { Locale } from '../locale'; import { Popover, PLACEMENT } from '../popover'; import { UIDConsumer } from 'react-uid'; @@ -30,7 +30,7 @@ import { StyledSearchIconContainer, StyledLoadingIndicator, } from './styled-components'; -import type { PropsT, SelectStateT, ValueT, OptionT, ChangeActionT } from './types'; +import type { SelectProps, SelectState, Value, Option, ChangeAction } from './types'; import { expandValue, normalizeOptions } from './utils'; import type { SyntheticEvent, ChangeEvent } from 'react'; @@ -63,7 +63,7 @@ export function isInteractive(rootTarget: EventTarget, rootElement: Element) { return false; } -class Select extends React.Component { +class Select extends React.Component { static defaultProps = defaultProps; // anchor is a ref that refers to the outermost element rendered when the dropdown menu is not @@ -92,9 +92,9 @@ class Select extends React.Component { // the select components can accept an array of options or an object where properties are optgroups // and values are arrays of options. this class property is constructed and updated in a normalized // shape where optgroup titles are stored on the option in the __optgroup field. - options: ValueT = []; + options: Value = []; - constructor(props: PropsT) { + constructor(props: SelectProps) { super(props); this.options = normalizeOptions(props.options); } @@ -129,7 +129,7 @@ class Select extends React.Component { } } - componentDidUpdate(prevProps: PropsT, prevState: SelectStateT) { + componentDidUpdate(prevProps: SelectProps, prevState: SelectState) { if (__BROWSER__) { if (prevState.isOpen !== this.state.isOpen) { if (this.state.isOpen) { @@ -446,11 +446,11 @@ class Select extends React.Component { }; getOptionLabel = ( - locale: LocaleT, + locale: Locale, { option, }: { - option: OptionT; + option: Option; optionState: { $selected: boolean; $disabled: boolean; @@ -462,14 +462,14 @@ class Select extends React.Component { ? `${locale.select.create} “${option[this.props.labelKey]}”` : option[this.props.labelKey]; - getValueLabel = ({ option }: { option: OptionT }): React.ReactNode => { + getValueLabel = ({ option }: { option: Option }): React.ReactNode => { return option[this.props.labelKey]; }; /** * Extends the value into an array from the given options */ - getValueArray(value: ValueT): Array { + getValueArray(value: Value): Array
{}; striped: boolean; - row: RowT; + row: Row; }; -function Row(props: RowPropsT) { +function Row(props: RowProps) { const [expanded, setExpanded] = React.useState(false); return ( <> diff --git a/src/table-grid/__tests__/table-grid-records.scenario.tsx b/src/table-grid/__tests__/table-grid-records.scenario.tsx index 61465eefb8..93dea15631 100644 --- a/src/table-grid/__tests__/table-grid-records.scenario.tsx +++ b/src/table-grid/__tests__/table-grid-records.scenario.tsx @@ -14,12 +14,12 @@ import { StyledTable, StyledHeadCell, StyledBodyCell } from '..'; import { useCellNavigation } from './shared'; // [date, event description] -type EventT = [Date, string]; +type Event = [Date, string]; // [pr title, pr link, description, release kind, author] -type RowT = [string, string, string, string, string, EventT[]]; +type Row = [string, string, string, string, string, Event[]]; -const row: RowT = [ +const row: Row = [ 'feat(docs-site): theme editor POC', 'https://github.com/uber/baseweb/pull/1296', `integrates an inline theme editor for the base web documentation site user can edit a theme @@ -38,7 +38,7 @@ const row: RowT = [ ], ]; -const data: RowT[] = [row, row, row, row, row, row, row]; +const data: Row[] = [row, row, row, row, row, row, row]; export function Scenario() { const [css] = useStyletron(); diff --git a/src/table-semantic/__tests__/table-semantic-builder-icon-overrides.scenario.tsx b/src/table-semantic/__tests__/table-semantic-builder-icon-overrides.scenario.tsx index c128b4f69a..d1a0532069 100644 --- a/src/table-semantic/__tests__/table-semantic-builder-icon-overrides.scenario.tsx +++ b/src/table-semantic/__tests__/table-semantic-builder-icon-overrides.scenario.tsx @@ -7,9 +7,9 @@ LICENSE file in the root directory of this source tree. import React from 'react'; import { ThemeProvider, LightTheme } from '../../index'; import { Scenario as TableSemanticBuilder } from './table-semantic-builder.scenario'; -import { IconPropsT } from '../../icon'; +import { IconProps } from '../../icon'; -const XSmallFilled = ({ title, size, color, ...props }: IconPropsT) => { +const XSmallFilled = ({ title, size, color, ...props }: IconProps) => { return ( {title} diff --git a/src/table-semantic/styled-components.ts b/src/table-semantic/styled-components.ts index ec99964659..d3f468ed7c 100644 --- a/src/table-semantic/styled-components.ts +++ b/src/table-semantic/styled-components.ts @@ -9,7 +9,7 @@ import ChevronDown from '../icon/chevron-down'; import ChevronUp from '../icon/chevron-up'; import { styled, withStyle, expandBorderStyles } from '../styles'; import { SIZE, DIVIDER } from './constants'; -import type { SizeT, DividerT } from './types'; +import type { Size, Divider } from './types'; function sizeToCellPadding($theme, $size) { if ($size === SIZE.compact) { @@ -20,11 +20,11 @@ function sizeToCellPadding($theme, $size) { return $theme.sizing.scale600; } -type StyledRootPropsT = { - $divider?: DividerT; +type StyledRootProps = { + $divider?: Divider; }; -export const StyledRoot = styled<'div', StyledRootPropsT>('div', ({ $theme, $divider }) => { +export const StyledRoot = styled<'div', StyledRootProps>('div', ({ $theme, $divider }) => { const borderStyles: {} = $divider === DIVIDER.grid || $divider === DIVIDER.vertical ? expandBorderStyles($theme.borders.border300) @@ -49,11 +49,11 @@ export const StyledRoot = styled<'div', StyledRootPropsT>('div', ({ $theme, $div }; }); -type StyledTablePropsT = { +type StyledTableProps = { $width?: string | null; }; -export const StyledTable = styled<'table', StyledTablePropsT>('table', ({ $theme, $width }) => { +export const StyledTable = styled<'table', StyledTableProps>('table', ({ $theme, $width }) => { return { borderSpacing: '0', boxSizing: 'border-box', @@ -70,15 +70,15 @@ export const StyledTableHeadRow = styled('tr', ({ $theme }) => { return {}; }); -type StyledTableHeadCellPropsT = { +type StyledTableHeadCellProps = { $col?: {}; $colIndex?: number | null; - $divider?: DividerT; + $divider?: Divider; $isNumeric?: boolean | null; - $size?: SizeT; + $size?: Size; }; -export const StyledTableHeadCell = styled<'th', StyledTableHeadCellPropsT>( +export const StyledTableHeadCell = styled<'th', StyledTableHeadCellProps>( 'th', ({ $theme, $size, $divider, $isNumeric }) => { const borderDir: string = $theme.direction === 'rtl' ? 'Left' : 'Right'; @@ -116,13 +116,13 @@ export const StyledTableHeadCell = styled<'th', StyledTableHeadCellPropsT>( } ); -type StyledTableHeadCellSortablePropsT = { +type StyledTableHeadCellSortableProps = { $isFocusVisible: boolean; -} & StyledTableHeadCellPropsT; +} & StyledTableHeadCellProps; export const StyledTableHeadCellSortable = withStyle< typeof StyledTableHeadCell, - StyledTableHeadCellSortablePropsT + StyledTableHeadCellSortableProps >(StyledTableHeadCell, ({ $theme, $isFocusVisible }) => { return { cursor: 'pointer', @@ -181,13 +181,13 @@ export const StyledTableBody = styled('tbody', ({ $theme }) => { return {}; }); -type StyledTableBodyRowPropsT = { +type StyledTableBodyRowProps = { $col?: {}; $colIndex?: number | null; - $divider?: DividerT; + $divider?: Divider; }; -export const StyledTableBodyRow = styled<'tr', StyledTableBodyRowPropsT>('tr', ({ $theme }) => { +export const StyledTableBodyRow = styled<'tr', StyledTableBodyRowProps>('tr', ({ $theme }) => { return { ':hover': { backgroundColor: $theme.colors.tableStripedBackground, @@ -195,19 +195,19 @@ export const StyledTableBodyRow = styled<'tr', StyledTableBodyRowPropsT>('tr', ( }; }); -type StyledTableBodyCellPropsT = { +type StyledTableBodyCellProps = { $col?: {}; $colIndex?: number | null; - $divider?: DividerT; + $divider?: Divider; $row?: {}; $rowIndex?: number | null; - $size?: SizeT; + $size?: Size; $isNumeric?: boolean | null; $isLastRow?: boolean | null; $isSortable?: boolean | null; }; -export const StyledTableBodyCell = styled<'td', StyledTableBodyCellPropsT>( +export const StyledTableBodyCell = styled<'td', StyledTableBodyCellProps>( 'td', ({ $theme, $size, $divider, $isNumeric, $isLastRow, $isSortable }) => { const borderDir: string = $theme.direction === 'rtl' ? 'Left' : 'Right'; diff --git a/src/table-semantic/table-builder-column.ts b/src/table-semantic/table-builder-column.ts index 677d186397..eb2fcceaf9 100644 --- a/src/table-semantic/table-builder-column.ts +++ b/src/table-semantic/table-builder-column.ts @@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree. */ import * as React from 'react'; -import type { TableBuilderColumnPropsT } from './types'; +import type { TableBuilderColumnProps } from './types'; -export default class TableBuilderColumn extends React.Component> { +export default class TableBuilderColumn extends React.Component> { // Renderless component. See TableBuilder. } diff --git a/src/table-semantic/table-builder.tsx b/src/table-semantic/table-builder.tsx index ddbc7abac4..249f8255c3 100644 --- a/src/table-semantic/table-builder.tsx +++ b/src/table-semantic/table-builder.tsx @@ -25,12 +25,12 @@ import Blank from '../icon/blank'; import ChevronDown from '../icon/chevron-down'; import ChevronUp from '../icon/chevron-up'; import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible'; -import type { TableBuilderPropsT } from './types'; +import type { TableBuilderProps } from './types'; import type { SyntheticEvent } from 'react'; export default class TableBuilder extends React.Component< - TableBuilderPropsT, + TableBuilderProps, { isFocusVisible: boolean; } diff --git a/src/table-semantic/table.tsx b/src/table-semantic/table.tsx index 9feb21e2fa..212038c3dd 100644 --- a/src/table-semantic/table.tsx +++ b/src/table-semantic/table.tsx @@ -20,9 +20,9 @@ import { } from './styled-components'; import { getOverrides } from '../helpers/overrides'; -import type { TablePropsT } from './types'; +import type { TableProps } from './types'; -export default class Table extends React.Component { +export default class Table extends React.Component { static defaultProps = { columns: [], data: [[]], diff --git a/src/table-semantic/types.ts b/src/table-semantic/types.ts index 549bf2fa8f..0a01f768de 100644 --- a/src/table-semantic/types.ts +++ b/src/table-semantic/types.ts @@ -6,50 +6,50 @@ LICENSE file in the root directory of this source tree. */ import * as React from 'react'; -import type { OverrideT } from '../helpers/overrides'; +import type { Override } from '../helpers/overrides'; import { SIZE, DIVIDER } from './constants'; -export type SizeT = keyof typeof SIZE; -export type DividerT = keyof typeof DIVIDER; +export type Size = keyof typeof SIZE; +export type Divider = keyof typeof DIVIDER; -export type OverridesT = { - Root?: OverrideT; - Table?: OverrideT; - TableHead?: OverrideT; - TableHeadRow?: OverrideT; - TableHeadCell?: OverrideT; - TableBody?: OverrideT; - TableBodyRow?: OverrideT; - TableBodyCell?: OverrideT; - TableLoadingMessage?: OverrideT; - TableEmptyMessage?: OverrideT; +export type TableOverrides = { + Root?: Override; + Table?: Override; + TableHead?: Override; + TableHeadRow?: Override; + TableHeadCell?: Override; + TableBody?: Override; + TableBodyRow?: Override; + TableBodyCell?: Override; + TableLoadingMessage?: Override; + TableEmptyMessage?: Override; }; -export type TablePropsT = { - overrides?: OverridesT; +export type TableProps = { + overrides?: TableOverrides; columns: Array; data: Array>; - divider?: DividerT; + divider?: Divider; horizontalScrollWidth?: string; isLoading?: boolean; loadingMessage?: React.ReactNode | (() => React.ReactNode); emptyMessage?: React.ReactNode | (() => React.ReactNode); - size?: SizeT; + size?: Size; }; -export type BuilderOverridesT = { - TableHeadCellSortable?: OverrideT; - SortIconContainer?: OverrideT; - SortAscIcon?: OverrideT; - SortDescIcon?: OverrideT; - SortNoneIcon?: OverrideT; -} & OverridesT; +export type BuilderOverrides = { + TableHeadCellSortable?: Override; + SortIconContainer?: Override; + SortAscIcon?: Override; + SortDescIcon?: Override; + SortNoneIcon?: Override; +} & TableOverrides; -export type TableBuilderPropsT = { - overrides?: BuilderOverridesT; +export type TableBuilderProps = { + overrides?: BuilderOverrides; children?: React.ReactNode; data: Array; - divider?: DividerT; + divider?: Divider; horizontalScrollWidth?: string; sortColumn?: string | null; sortOrder?: 'ASC' | 'DESC' | null; @@ -57,20 +57,20 @@ export type TableBuilderPropsT = { isLoading?: boolean; loadingMessage?: React.ReactNode | (() => React.ReactNode); emptyMessage?: React.ReactNode | (() => React.ReactNode); - size?: SizeT; + size?: Size; }; -export type ColumnOverridesT = { - TableHeadCell?: OverrideT; - TableHeadCellSortable?: OverrideT; - TableBodyCell?: OverrideT; - SortAscIcon?: OverrideT; - SortDescIcon?: OverrideT; - SortNoneIcon?: OverrideT; +export type ColumnOverrides = { + TableHeadCell?: Override; + TableHeadCellSortable?: Override; + TableBodyCell?: Override; + SortAscIcon?: Override; + SortDescIcon?: Override; + SortNoneIcon?: Override; }; -export type TableBuilderColumnPropsT = { - overrides?: ColumnOverridesT; +export type TableBuilderColumnProps = { + overrides?: ColumnOverrides; children: (row: RowT, rowIndex?: number) => React.ReactNode; id?: string; header?: React.ReactNode; diff --git a/src/table/sortable-head-cell.tsx b/src/table/sortable-head-cell.tsx index 2d6034a034..028a39937e 100644 --- a/src/table/sortable-head-cell.tsx +++ b/src/table/sortable-head-cell.tsx @@ -12,9 +12,9 @@ import TriangleDown from '../icon/triangle-down'; import { SORT_DIRECTION } from './constants'; import { StyledHeadCell, StyledSortableLabel } from './styled-components'; -import type { SortDirectionT, HeadCellPropsT } from './types'; +import type { SortDirection, HeadCellProps } from './types'; -function SortDirectionIcon({ direction }: { direction: SortDirectionT }) { +function SortDirectionIcon({ direction }: { direction: SortDirection }) { switch (direction) { case SORT_DIRECTION.ASC: return ; @@ -26,9 +26,9 @@ function SortDirectionIcon({ direction }: { direction: SortDirectionT }) { } export const SortableHeadCellFactory = ( // @ts-expect-error todo(flow->ts) this assignment is not correct title property is declared as ReactNode but then it is used on div element… which is not correct - CustomHeadCell: React.ComponentType = StyledHeadCell + CustomHeadCell: React.ComponentType = StyledHeadCell ) => { - return function SortableHeadCell(props: HeadCellPropsT) { + return function SortableHeadCell(props: HeadCellProps) { const { overrides = {}, fillClickTarget, disabled } = props; const [HeadCell, headCellProps] = getOverrides(overrides.HeadCell, CustomHeadCell); diff --git a/src/table/table.tsx b/src/table/table.tsx index bc7874688e..3d381b9f0e 100644 --- a/src/table/table.tsx +++ b/src/table/table.tsx @@ -17,9 +17,9 @@ import { import { ProgressBar } from '../progress-bar'; -import type { TablePropsT } from './types'; +import type { TableProps } from './types'; -export default class Table extends React.Component { +export default class Table extends React.Component { static defaultProps = { columns: [], data: [[]], diff --git a/src/table/types.ts b/src/table/types.ts index a9023399ba..164eb0038f 100644 --- a/src/table/types.ts +++ b/src/table/types.ts @@ -7,25 +7,25 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import { SORT_DIRECTION } from './constants'; -import type { OverrideT } from '../helpers/overrides'; +import type { Override } from '../helpers/overrides'; -export type SortDirectionT = keyof typeof SORT_DIRECTION | undefined | null; +export type SortDirection = keyof typeof SORT_DIRECTION | undefined | null; -export type HeadCellPropsT = { +export type HeadCellProps = { /** Aria label applied to the sort button. */ ariaLabel?: string; 'aria-label'?: string; /** Additional content to fill head cell. Most likely used for a filter button. */ children?: React.ReactNode; /** Visually indicates sort direction. Displays a chevron next to column title. */ - direction: SortDirectionT; + direction: SortDirection; /** Disabled click-to-sort. Renders column title in muted color. */ disabled?: boolean; /** Callback for when column title is clicked to trigger sort. */ onSort?: () => unknown; overrides?: { - HeadCell?: OverrideT; - SortableLabel?: OverrideT; + HeadCell?: Override; + SortableLabel?: Override; }; /** Column title. */ title: React.ReactNode; @@ -33,7 +33,7 @@ export type HeadCellPropsT = { fillClickTarget?: boolean; }; -export type TablePropsT = { +export type TableProps = { /** Table columns. Data passed to each header cell. */ columns: Array; /** Table rows. Data passed to each row and cell */ @@ -64,10 +64,10 @@ export type FilterProps = { /** Callback for when the 'select all' button is clicked. */ onSelectAll?: () => unknown; overrides?: { - MenuButton?: OverrideT; - Content?: OverrideT; - Heading?: OverrideT; - Footer?: OverrideT; + MenuButton?: Override; + Content?: Override; + Heading?: Override; + Footer?: Override; }; /** Determines whether focus is returned to Filter menu button. */ returnFocus?: boolean; diff --git a/src/tabs-motion/stateful-tabs.tsx b/src/tabs-motion/stateful-tabs.tsx index 8d4bfe8853..e561b363d6 100644 --- a/src/tabs-motion/stateful-tabs.tsx +++ b/src/tabs-motion/stateful-tabs.tsx @@ -9,9 +9,9 @@ import * as React from 'react'; import { Tabs } from './tabs'; import { STATE_CHANGE_TYPE } from './constants'; -import type { StatefulTabsPropsT, StatefulTabsStateT, StatefulTabsReducerT } from './types'; +import type { StatefulTabsProps, StatefulTabsState, StatefulTabsReducer } from './types'; -const getInitialState = (children: React.ReactNode, initialState?: StatefulTabsStateT) => { +const getInitialState = (children: React.ReactNode, initialState?: StatefulTabsState) => { if (initialState && initialState.activeKey) { return initialState; } else { @@ -24,14 +24,14 @@ const getInitialState = (children: React.ReactNode, initialState?: StatefulTabsS } }; -const defaultStateReducer: StatefulTabsReducerT = (state, action) => { +const defaultStateReducer: StatefulTabsReducer = (state, action) => { if (action.type === STATE_CHANGE_TYPE.change) { return { activeKey: action.payload }; } return state; }; -export function StatefulTabs(props: StatefulTabsPropsT) { +export function StatefulTabs(props: StatefulTabsProps) { const { children, initialState, diff --git a/src/tabs-motion/styled-components.ts b/src/tabs-motion/styled-components.ts index c5b1f8d3c8..75a8f416aa 100644 --- a/src/tabs-motion/styled-components.ts +++ b/src/tabs-motion/styled-components.ts @@ -10,12 +10,12 @@ import { ORIENTATION, FILL } from './constants'; import { isHorizontal, isVertical, isRTL, isIntrinsic, isFixed } from './utils'; import type { StyleObject } from 'styletron-standard'; -import type { OrientationT, FillT } from './types'; +import type { Orientation, Fill } from './types'; export const StyledRoot = styled< 'div', { - $orientation?: OrientationT; + $orientation?: Orientation; } >('div', ({ $theme, $orientation = ORIENTATION.horizontal }) => { const style: StyleObject = { @@ -32,8 +32,8 @@ export const StyledRoot = styled< export const StyledTabList = styled< 'div', { - $orientation?: OrientationT; - $fill?: FillT; + $orientation?: Orientation; + $fill?: Fill; } >('div', ({ $theme, $fill = FILL.intrinsic, $orientation = ORIENTATION.horizontal }) => { const style: StyleObject = { @@ -71,8 +71,8 @@ export const StyledTabList = styled< export const StyledTab = styled< 'button', { - $orientation?: OrientationT; - $fill?: FillT; + $orientation?: Orientation; + $fill?: Fill; $focusVisible?: boolean; $isActive?: boolean; } @@ -145,7 +145,7 @@ export const StyledTab = styled< export const StyledArtworkContainer = styled< 'div', { - $orientation?: OrientationT; + $orientation?: Orientation; } >('div', ({ $theme, $orientation = ORIENTATION.horizontal }) => { const style: StyleObject = { @@ -162,7 +162,7 @@ export const StyledArtworkContainer = styled< export const StyledTabBorder = styled< 'div', { - $orientation?: OrientationT; + $orientation?: Orientation; } >('div', ({ $theme, $orientation = ORIENTATION.horizontal }) => { const style: StyleObject = { @@ -180,7 +180,7 @@ export const StyledTabBorder = styled< export const StyledTabHighlight = styled< 'div', { - $orientation?: OrientationT; + $orientation?: Orientation; $length?: number; $distance?: number; $animate?: boolean; diff --git a/src/tabs-motion/tab.ts b/src/tabs-motion/tab.ts index d75552c910..816560767f 100644 --- a/src/tabs-motion/tab.ts +++ b/src/tabs-motion/tab.ts @@ -5,8 +5,8 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import type { TabPropsT } from './types'; +import type { TabProps } from './types'; -export function Tab(props: TabPropsT) { +export function Tab(props: TabProps) { return null; } diff --git a/src/tabs-motion/tabs.tsx b/src/tabs-motion/tabs.tsx index 32a0a76240..3b66eb7ef2 100644 --- a/src/tabs-motion/tabs.tsx +++ b/src/tabs-motion/tabs.tsx @@ -24,7 +24,7 @@ import { } from './styled-components'; import { getTabId, getTabPanelId, isVertical, isHorizontal, isRTL } from './utils'; -import type { TabsPropsT } from './types'; +import type { TabsProps } from './types'; import type { SyntheticEvent } from 'react'; @@ -99,7 +99,7 @@ export function Tabs({ overrides = {}, renderAll = false, uid: customUid = null, -}: TabsPropsT) { +}: TabsProps) { // Create unique id prefix for this tabs component const generatedUid = useUID(); const uid = customUid || generatedUid; diff --git a/src/tabs-motion/types.ts b/src/tabs-motion/types.ts index 67479d2d32..df311093c8 100644 --- a/src/tabs-motion/types.ts +++ b/src/tabs-motion/types.ts @@ -8,71 +8,71 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import { ORIENTATION, FILL, STATE_CHANGE_TYPE } from './constants'; -import type { OverrideT } from '../helpers/overrides'; -import type { IconPropsT } from '../icon'; +import type { Override } from '../helpers/overrides'; +import type { IconProps } from '../icon'; -export type OrientationT = typeof ORIENTATION[keyof typeof ORIENTATION]; -export type FillT = typeof FILL[keyof typeof FILL]; -export type StateChangeT = typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE]; +export type Orientation = typeof ORIENTATION[keyof typeof ORIENTATION]; +export type Fill = typeof FILL[keyof typeof FILL]; +export type StateChange = typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE]; -export type TabsOverridesT = { - Root?: OverrideT; - TabList?: OverrideT; - TabHighlight?: OverrideT; - TabBorder?: OverrideT; +export type TabsOverrides = { + Root?: Override; + TabList?: Override; + TabHighlight?: Override; + TabBorder?: Override; }; -export type TabOverridesT = { - Tab?: OverrideT; - ArtworkContainer?: OverrideT; - TabPanel?: OverrideT; +export type TabOverrides = { + Tab?: Override; + ArtworkContainer?: Override; + TabPanel?: Override; }; -export type StatefulTabsStateT = { +export type StatefulTabsState = { activeKey: React.Key; }; -export type StatefulTabsActionT = { - type: StateChangeT; +export type StatefulTabsAction = { + type: StateChange; payload: React.Key; }; -export type StatefulTabsReducerT = ( - state: StatefulTabsStateT, - action: StatefulTabsActionT -) => StatefulTabsStateT; +export type StatefulTabsReducer = ( + state: StatefulTabsState, + action: StatefulTabsAction +) => StatefulTabsState; -export type onChangeT = (params: { activeKey: React.Key }) => void; +export type onChange = (params: { activeKey: React.Key }) => void; -export type TabsPropsT = { +export type TabsProps = { children: React.ReactNode; activeKey?: React.Key; disabled?: boolean; - fill?: FillT; - orientation?: OrientationT; + fill?: Fill; + orientation?: Orientation; activateOnFocus?: boolean; - onChange?: onChangeT; - overrides?: TabsOverridesT; + onChange?: onChange; + overrides?: TabsOverrides; renderAll?: boolean; uid?: string; }; -export type StatefulTabsPropsT = { - initialState?: StatefulTabsStateT; - stateReducer?: StatefulTabsReducerT; -} & TabsPropsT; +export type StatefulTabsProps = { + initialState?: StatefulTabsState; + stateReducer?: StatefulTabsReducer; +} & TabsProps; -export type TabPropsT = { +export type TabProps = { title?: React.ReactNode; key?: React.Key; tabRef?: React.Ref; - overrides?: TabOverridesT; + overrides?: TabOverrides; children?: React.ReactNode; artwork?: React.ComponentType< { - size: IconPropsT['size']; - color: IconPropsT['color']; - } & IconPropsT + size: IconProps['size']; + color: IconProps['color']; + } & IconProps >; disabled?: boolean; }; diff --git a/src/tabs-motion/utils.ts b/src/tabs-motion/utils.ts index b767d6351b..b56456933b 100644 --- a/src/tabs-motion/utils.ts +++ b/src/tabs-motion/utils.ts @@ -8,12 +8,12 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import { ORIENTATION, FILL } from './constants'; -import type { FillT, OrientationT } from './types'; +import type { Fill, Orientation } from './types'; export const getTabId = (uid: string, key: React.Key) => `tabs-${uid}-tab-${key}`; export const getTabPanelId = (uid: string, key: React.Key) => `tabs-${uid}-tabpanel-${key}`; -export const isHorizontal = (orientation: OrientationT) => orientation === ORIENTATION.horizontal; -export const isVertical = (orientation: OrientationT) => orientation === ORIENTATION.vertical; +export const isHorizontal = (orientation: Orientation) => orientation === ORIENTATION.horizontal; +export const isVertical = (orientation: Orientation) => orientation === ORIENTATION.vertical; export const isRTL = (direction: string) => direction === 'rtl'; -export const isIntrinsic = (fill: FillT) => fill === FILL.intrinsic; -export const isFixed = (fill: FillT) => fill === FILL.fixed; +export const isIntrinsic = (fill: Fill) => fill === FILL.intrinsic; +export const isFixed = (fill: Fill) => fill === FILL.fixed; diff --git a/src/tabs/__tests__/tabs-controlled.scenario.tsx b/src/tabs/__tests__/tabs-controlled.scenario.tsx index 5537729f56..02ac44b72d 100644 --- a/src/tabs/__tests__/tabs-controlled.scenario.tsx +++ b/src/tabs/__tests__/tabs-controlled.scenario.tsx @@ -8,11 +8,11 @@ import * as React from 'react'; import { Tabs, Tab } from '..'; -type StateT = { +type State = { activeKey: string; }; -export class Scenario extends React.Component<{}, StateT> { +export class Scenario extends React.Component<{}, State> { state = { activeKey: '0', }; diff --git a/src/tabs/stateful-tabs.tsx b/src/tabs/stateful-tabs.tsx index 2b9d24016f..db60644c95 100644 --- a/src/tabs/stateful-tabs.tsx +++ b/src/tabs/stateful-tabs.tsx @@ -7,10 +7,10 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import Tabs from './tabs'; import { STATE_CHANGE_TYPE } from './constants'; -import type { StatefulTabsPropsT, StatefulTabsStateT, StateChangeTypeT } from './types'; +import type { StatefulTabsProps, StatefulTabsState, StateChangeType } from './types'; -export default class StatefulTabs extends React.Component { - static defaultProps: Partial = { +export default class StatefulTabs extends React.Component { + static defaultProps: Partial = { disabled: false, onChange: () => {}, overrides: {}, @@ -21,11 +21,11 @@ export default class StatefulTabs extends React.Component { + onTabChange = (newState: StatefulTabsState) => { this.internalSetState(STATE_CHANGE_TYPE.change, newState); }; - internalSetState(type: StateChangeTypeT, changes: StatefulTabsStateT) { + internalSetState(type: StateChangeType, changes: StatefulTabsState) { const { stateReducer, onChange } = this.props; const newState = stateReducer(type, changes, this.state); this.setState(newState); diff --git a/src/tabs/styled-components.ts b/src/tabs/styled-components.ts index 7fad5e8d1c..07ecfd7d91 100644 --- a/src/tabs/styled-components.ts +++ b/src/tabs/styled-components.ts @@ -6,10 +6,10 @@ LICENSE file in the root directory of this source tree. */ import { styled } from '../styles'; import { ORIENTATION } from './constants'; -import type { SharedStylePropsArgT } from './types'; +import type { SharedStylePropsArg } from './types'; import type { StyleObject } from 'styletron-standard'; -export const Root = styled<'div', SharedStylePropsArgT>('div', (props) => { +export const Root = styled<'div', SharedStylePropsArg>('div', (props) => { const { $orientation } = props; return { display: 'flex', @@ -17,7 +17,7 @@ export const Root = styled<'div', SharedStylePropsArgT>('div', (props) => { }; }); -export const Tab = styled<'div', SharedStylePropsArgT>('div', (props) => { +export const Tab = styled<'div', SharedStylePropsArg>('div', (props) => { const { $disabled, $active, @@ -58,7 +58,7 @@ export const Tab = styled<'div', SharedStylePropsArgT>('div', (props) => { return style; }); -export const TabBar = styled<'div', SharedStylePropsArgT>('div', (props) => { +export const TabBar = styled<'div', SharedStylePropsArg>('div', (props) => { const { $orientation, $theme: { colors, sizing }, @@ -72,7 +72,7 @@ export const TabBar = styled<'div', SharedStylePropsArgT>('div', (props) => { }; }); -export const TabContent = styled<'div', SharedStylePropsArgT>('div', (props) => { +export const TabContent = styled<'div', SharedStylePropsArg>('div', (props) => { const { $active, $theme: { sizing, typography }, diff --git a/src/tabs/tab.tsx b/src/tabs/tab.tsx index 161fd68e3b..380469ed21 100644 --- a/src/tabs/tab.tsx +++ b/src/tabs/tab.tsx @@ -9,12 +9,12 @@ import { getOverrides } from '../helpers/overrides'; import { Tab as StyledTab } from './styled-components'; import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible'; -import type { TabPropsT, SharedStylePropsArgT } from './types'; +import type { TabProps, SharedStylePropsArg } from './types'; import type { SyntheticEvent } from 'react'; class TabComponent extends React.Component< - TabPropsT, + TabProps, { isFocusVisible: boolean; } @@ -66,7 +66,7 @@ class TabComponent extends React.Component< return; }; - getSharedProps(): SharedStylePropsArgT { + getSharedProps(): SharedStylePropsArg { const { disabled, active, $orientation } = this.props; return { $disabled: disabled, diff --git a/src/tabs/tabs.tsx b/src/tabs/tabs.tsx index e07a6c9b8f..5b2d1bc9ad 100644 --- a/src/tabs/tabs.tsx +++ b/src/tabs/tabs.tsx @@ -11,11 +11,11 @@ import { TabBar as StyledTabBar, TabContent as StyledTabContent, } from './styled-components'; -import type { TabsPropsT, SharedStylePropsArgT } from './types'; +import type { TabsProps, SharedStylePropsArg } from './types'; import { ORIENTATION } from './constants'; -export default class Tabs extends React.Component { - static defaultProps: Partial = { +export default class Tabs extends React.Component { + static defaultProps: Partial = { disabled: false, onChange: () => {}, overrides: {}, @@ -77,7 +77,7 @@ export default class Tabs extends React.Component { return tabs; } - getSharedProps(): SharedStylePropsArgT { + getSharedProps(): SharedStylePropsArg { const { disabled, orientation } = this.props; return { $disabled: disabled, diff --git a/src/tabs/types.ts b/src/tabs/types.ts index fbf1593248..1cd54160ef 100644 --- a/src/tabs/types.ts +++ b/src/tabs/types.ts @@ -6,42 +6,42 @@ LICENSE file in the root directory of this source tree. */ /* eslint-disable flowtype/generic-spacing */ import * as React from 'react'; -import type { OverrideT } from '../helpers/overrides'; +import type { Override } from '../helpers/overrides'; import { ORIENTATION, STATE_CHANGE_TYPE } from './constants'; -export type SharedStylePropsArgT = { +export type SharedStylePropsArg = { $disabled?: boolean; $active?: boolean; $orientation?: typeof ORIENTATION[keyof typeof ORIENTATION]; $isFocusVisible?: boolean; }; -export type StatefulTabsStateT = { +export type StatefulTabsState = { activeKey: React.Key; }; -export type StateChangeTypeT = keyof typeof STATE_CHANGE_TYPE; +export type StateChangeType = keyof typeof STATE_CHANGE_TYPE; -export type StateReducerT = ( - stateChangeType: StateChangeTypeT, - nextState: StatefulTabsStateT, - currentState: StatefulTabsStateT -) => StatefulTabsStateT; +export type StateReducer = ( + stateChangeType: StateChangeType, + nextState: StatefulTabsState, + currentState: StatefulTabsState +) => StatefulTabsState; -export type TabsOverridesT = { - Root?: OverrideT; - TabBar?: OverrideT; - TabContent?: OverrideT; - Tab?: OverrideT; +export type TabsOverrides = { + Root?: Override; + TabBar?: Override; + TabContent?: Override; + Tab?: Override; }; -export type TabOverridesT = { - Tab?: OverrideT; +export type TabOverrides = { + Tab?: Override; }; -export type OnChangeHandlerT = (a: { activeKey: React.Key }) => unknown; +export type OnChangeHandler = (a: { activeKey: React.Key }) => unknown; -export type TabsPropsT = { +export type TabsProps = { /** An array of Tab components. */ children: Array> | React.ReactElement; /** Key of the the tab to be selected. */ @@ -49,22 +49,22 @@ export type TabsPropsT = { /** If set to true all its tabs will be disabled */ disabled?: boolean; /** Change handler that is called every time a new tab is selected */ - onChange?: OnChangeHandlerT; + onChange?: OnChangeHandler; /** Sets the orientation of the Tab component */ orientation?: typeof ORIENTATION[keyof typeof ORIENTATION]; /** Renders all tab content for SEO purposes regardless of tab active state */ renderAll?: boolean; - overrides?: TabsOverridesT; + overrides?: TabsOverrides; }; -export type StatefulTabsPropsT = Omit & { +export type StatefulTabsProps = Omit & { /** Initial state of the component */ - initialState?: StatefulTabsStateT; + initialState?: StatefulTabsState; /** A state change handler. */ - stateReducer: StateReducerT; + stateReducer: StateReducer; }; -export type TabPanelPropsT = { +export type TabPanelProps = { children?: React.ReactNode; /** Sets the tab to disabled */ disabled?: boolean; @@ -77,12 +77,12 @@ export type TabPanelPropsT = { onKeyDown?: (e: KeyboardEvent) => unknown; /** onSelect handler for the Tab element */ onSelect?: () => unknown; - overrides?: TabOverridesT; + overrides?: TabOverrides; /** Title of the Tab to be shown in the Tab bar */ title?: React.ReactNode; }; -export type TabPropsT = TabPanelPropsT & { +export type TabProps = TabPanelProps & { id?: string; $orientation?: typeof ORIENTATION[keyof typeof ORIENTATION]; }; diff --git a/src/tag/__tests__/tag.test.tsx b/src/tag/__tests__/tag.test.tsx index 24b283076c..4d62f67532 100644 --- a/src/tag/__tests__/tag.test.tsx +++ b/src/tag/__tests__/tag.test.tsx @@ -8,7 +8,7 @@ import * as React from 'react'; import { render, fireEvent, getByTestId } from '@testing-library/react'; import { Tag } from '..'; -import type { TagKindT } from '..'; +import type { TagKind } from '..'; describe('Tag', () => { it('renders provided children', () => { @@ -58,7 +58,7 @@ describe('Tag', () => { it('passes flow check with tag enum', function () { // https://github.com/uber/baseweb/issues/1910 // eslint-disable-next-line no-unused-vars - function TagWrapper(props: { kind: TagKindT }) { + function TagWrapper(props: { kind: TagKind }) { return ; } }); diff --git a/src/tag/styled-components.ts b/src/tag/styled-components.ts index 9098c64600..367db9aa6f 100644 --- a/src/tag/styled-components.ts +++ b/src/tag/styled-components.ts @@ -7,9 +7,9 @@ LICENSE file in the root directory of this source tree. import tint from 'polished/lib/color/tint.js'; import shade from 'polished/lib/color/shade.js'; -import { styled, type ThemeT } from '../styles'; +import { styled, type Theme } from '../styles'; import { KIND, VARIANT, SIZE } from './constants'; -import type { SharedPropsArgT } from './types'; +import type { SharedPropsArg } from './types'; import { colors as colorTokens } from '../tokens'; export function customOnRamp(color?: string, unit?: string) { @@ -254,11 +254,11 @@ const getColorStateFromProps = (props) => { return COLOR_STATE.outline; }; -export const Action = styled<'span', SharedPropsArgT>( +export const Action = styled<'span', SharedPropsArg>( 'span', ( - props: SharedPropsArgT & { - $theme: ThemeT; + props: SharedPropsArg & { + $theme: Theme; } ) => { const { $theme, $disabled, $size = SIZE.small } = props; @@ -286,13 +286,13 @@ export const Action = styled<'span', SharedPropsArgT>( } ); -export const StartEnhancerContainer = styled<'div', SharedPropsArgT>( +export const StartEnhancerContainer = styled<'div', SharedPropsArg>( 'div', ({ $theme, $size = SIZE.small, - }: SharedPropsArgT & { - $theme: ThemeT; + }: SharedPropsArg & { + $theme: Theme; }) => { let paddingMagnitude = $theme.sizing.scale300; if ($size === SIZE.medium) { @@ -311,11 +311,11 @@ export const StartEnhancerContainer = styled<'div', SharedPropsArgT>( } ); -export const Text = styled<'span', SharedPropsArgT>( +export const Text = styled<'span', SharedPropsArg>( 'span', ( - props: SharedPropsArgT & { - $theme: ThemeT; + props: SharedPropsArg & { + $theme: Theme; } ) => { const { $theme } = props; @@ -330,11 +330,11 @@ export const Text = styled<'span', SharedPropsArgT>( } ); -export const Root = styled<'span', SharedPropsArgT>( +export const Root = styled<'span', SharedPropsArg>( 'span', ( - props: SharedPropsArgT & { - $theme: ThemeT; + props: SharedPropsArg & { + $theme: Theme; } ) => { const { diff --git a/src/tag/tag.tsx b/src/tag/tag.tsx index 2f5a8e13b9..8bb799827f 100644 --- a/src/tag/tag.tsx +++ b/src/tag/tag.tsx @@ -14,7 +14,7 @@ import { } from './styled-components'; import { KIND, VARIANT, SIZE } from './constants'; import { getTextFromChildren } from './utils'; -import type { PropsT, SharedPropsArgT } from './types'; +import type { TagProps, SharedPropsArg } from './types'; import DeleteIcon from '../icon/delete'; import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible'; @@ -24,7 +24,7 @@ import type { SyntheticEvent } from 'react'; // Delete requires modifying Delete's viewbox to prevent visual regressions. const ModifiedViewBoxDeleteIcon = (props) => ; -const Tag = React.forwardRef((props, ref) => { +const Tag = React.forwardRef((props, ref) => { const { children, closeable = true, @@ -101,7 +101,7 @@ const Tag = React.forwardRef((props, ref) => { onActionClick(event); }, }; - const sharedProps: SharedPropsArgT = { + const sharedProps: SharedPropsArg = { $clickable: clickable, $closeable: closeable, $color: color, diff --git a/src/tag/types.ts b/src/tag/types.ts index e9648afa00..5d8d5b396a 100644 --- a/src/tag/types.ts +++ b/src/tag/types.ts @@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree. */ import * as React from 'react'; -import type { OverrideT } from '../helpers/overrides'; +import type { Override } from '../helpers/overrides'; import { KIND, VARIANT, SIZE } from './constants'; import type { ReactNode } from 'react'; @@ -15,20 +15,20 @@ export const TagKind = Object.freeze(KIND); export const TagVariant = Object.freeze(VARIANT); export const TagSize = Object.freeze(SIZE); -export type TagKindT = keyof typeof TagKind; -export type TagVariantT = typeof TagVariant[keyof typeof TagVariant]; -export type TagSizeT = keyof typeof TagSize; +export type TagKind = keyof typeof TagKind; +export type TagVariant = typeof TagVariant[keyof typeof TagVariant]; +export type TagSize = keyof typeof TagSize; -export type OverridesT = { - Root?: OverrideT; - Action?: OverrideT; - ActionIcon?: OverrideT; - StartEnhancerContainer?: OverrideT; - Text?: OverrideT; +export type TagOverrides = { + Root?: Override; + Action?: Override; + ActionIcon?: Override; + StartEnhancerContainer?: Override; + Text?: Override; }; -export type PropsT = { - overrides?: OverridesT; +export type TagProps = { + overrides?: TagOverrides; /** Include or exclude the "x" button and click action. */ closeable?: boolean; /** Disable control from being changed. */ @@ -38,9 +38,9 @@ export type PropsT = { /** Deprecated. Will be removed in the next major version. */ isHovered?: boolean; /** Defines tags look by purpose. Set it to one of KIND[key] values. Defaults to KIND.primary */ - kind?: TagKindT; + kind?: TagKind; /** Defines tags look. Set it to one of VARIANT[key] values. Defaults to VARIANT.light */ - variant?: TagVariantT; + variant?: TagVariant; /** Component or String value for label of tag. Default is empty string. */ children?: ReactNode; /** The color theme to be applied to a Tag. Default is `KIND.primary`. */ @@ -56,11 +56,11 @@ export type PropsT = { /** onkeydown handler for the tag. */ onKeyDown?: null | ((event: Event) => unknown); /** Determines the size of the Tag. */ - size?: TagSizeT; + size?: TagSize; startEnhancer?: React.ComponentType<{}>; }; -export type SharedPropsArgT = { +export type SharedPropsArg = { $clickable?: boolean; $closeable?: boolean; $color?: string; diff --git a/src/template-component/component.tsx b/src/template-component/component.tsx index 0177dca954..8d7ae51604 100644 --- a/src/template-component/component.tsx +++ b/src/template-component/component.tsx @@ -9,15 +9,15 @@ import * as React from 'react'; import { getOverride, getOverrideProps } from '../helpers/overrides'; import { Root as StyledRoot } from './styled-components'; -import type { ComponentPropsT, SharedStylePropsT } from './types'; +import type { ComponentProps, SharedStyleProps } from './types'; -class Component extends React.Component { - static defaultProps: Partial = { +class Component extends React.Component { + static defaultProps: Partial = { prop: true, onClick: () => {}, }; - getSharedProps(): Omit { + getSharedProps(): Omit { const { prop } = this.props; return { $prop: Boolean(prop), diff --git a/src/template-component/stateful-component.tsx b/src/template-component/stateful-component.tsx index 9baf55c8ab..330c881b08 100644 --- a/src/template-component/stateful-component.tsx +++ b/src/template-component/stateful-component.tsx @@ -7,9 +7,9 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import StatefulContainer from './stateful-container'; import Component from './component'; -import type { StatefulComponentPropsT } from './types'; +import type { StatefulComponentProps } from './types'; -function StatefulComponent(props: StatefulComponentPropsT) { +function StatefulComponent(props: StatefulComponentProps) { const { children, ...restProps } = props; return ( diff --git a/src/template-component/stateful-container.ts b/src/template-component/stateful-container.ts index aa6c596327..6e6b28b012 100644 --- a/src/template-component/stateful-container.ts +++ b/src/template-component/stateful-container.ts @@ -6,16 +6,16 @@ LICENSE file in the root directory of this source tree. */ import * as React from 'react'; import type { - StateT, - StatefulComponentContainerPropsT, - StateChangeTypeT, - StateReducerT, + State, + StatefulComponentContainerProps, + StateChangeType, + StateReducer, } from './types'; -const defaultStateReducer: StateReducerT = (type, nextState) => nextState; +const defaultStateReducer: StateReducer = (type, nextState) => nextState; -class StatefulContainer extends React.Component { - static defaultProps: Partial = { +class StatefulContainer extends React.Component { + static defaultProps: Partial = { initialState: { prop: true }, stateReducer: defaultStateReducer, }; @@ -32,7 +32,7 @@ class StatefulContainer extends React.Component('button', (props) => { +export const Root = styled<'button', SharedStyleProps>('button', (props) => { const { $prop, $theme } = props; return { color: $prop ? $theme.colors.accent : $theme.colors.positive400, diff --git a/src/template-component/types.ts b/src/template-component/types.ts index db96cbbc24..8f04baf14e 100644 --- a/src/template-component/types.ts +++ b/src/template-component/types.ts @@ -6,52 +6,52 @@ LICENSE file in the root directory of this source tree. */ /* eslint-disable flowtype/generic-spacing */ import * as React from 'react'; -import type { OverrideT } from '../helpers/overrides'; +import type { Override } from '../helpers/overrides'; import { STATE_CHANGE_TYPE } from './constants'; -export type StateT = { +export type State = { prop: boolean; }; -export type StateChangeTypeT = keyof typeof STATE_CHANGE_TYPE; +export type StateChangeType = keyof typeof STATE_CHANGE_TYPE; -export type StateReducerT = ( - stateChangeType: StateChangeTypeT, - nextState: StateT, - currentState: StateT -) => StateT; +export type StateReducer = ( + stateChangeType: StateChangeType, + nextState: State, + currentState: State +) => State; -export type ComponentRenderPropT = (props: {}) => React.ReactNode; +export type ComponentRenderProp = (props: {}) => React.ReactNode; -export type OverridesT = { - Root?: OverrideT; +export type Overrides = { + Root?: Override; }; -export type ChildT = React.ReactNode; +export type Child = React.ReactNode; -export type ChildrenT = Array | ChildT; +export type Children = Array | Child; // Props shared by all flavors of component -export type ComponentPropsT = { - children: ChildrenT; +export type ComponentProps = { + children: Children; prop?: boolean; onClick?: () => void; - overrides?: OverridesT; + overrides?: Overrides; }; // Props for stateful component -export type StatefulComponentPropsT = ComponentPropsT & { - children: ChildrenT; - initialState?: StateT; - stateReducer?: StateReducerT; +export type StatefulComponentProps = ComponentProps & { + children: Children; + initialState?: State; + stateReducer?: StateReducer; }; // Props for stateful container -export type StatefulComponentContainerPropsT = Omit & { - initialState?: StateT; - children: (props: Omit) => React.ReactNode; +export type StatefulComponentContainerProps = Omit & { + initialState?: State; + children: (props: Omit) => React.ReactNode; }; -export type SharedStylePropsT = { +export type SharedStyleProps = { $prop: boolean; }; diff --git a/src/textarea/stateful-textarea.tsx b/src/textarea/stateful-textarea.tsx index 7b1c0753e6..ad70dbac71 100644 --- a/src/textarea/stateful-textarea.tsx +++ b/src/textarea/stateful-textarea.tsx @@ -7,12 +7,12 @@ LICENSE file in the root directory of this source tree. import * as React from 'react'; import StatefulContainer from './stateful-container'; import Textarea from './textarea'; -import type { StatefulTextareaPropsT, TextareaPropsT } from './types'; +import type { StatefulTextareaProps, TextareaProps } from './types'; -export default function StatefulTextarea(props: StatefulTextareaPropsT) { +export default function StatefulTextarea(props: StatefulTextareaProps) { return ( - {(childrenProps) => } + {(childrenProps) => } ); } diff --git a/src/textarea/styled-components.ts b/src/textarea/styled-components.ts index dccb3c776f..61bd265f24 100644 --- a/src/textarea/styled-components.ts +++ b/src/textarea/styled-components.ts @@ -4,37 +4,37 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import { styled, type ThemeT } from '../styles'; +import { styled, type Theme } from '../styles'; import { getInputStyles, getInputContainerStyles, getRootStyles } from '../input/styled-components'; -import type { SharedStylePropsT } from './types'; +import type { SharedStyleProps } from './types'; -export const StyledTextAreaRoot = styled<'div', SharedStylePropsT>( +export const StyledTextAreaRoot = styled<'div', SharedStyleProps>( 'div', ( - props: SharedStylePropsT & { - $theme: ThemeT; + props: SharedStyleProps & { + $theme: Theme; } ) => { return getRootStyles({ $positive: false, ...props, $hasIconTrailing: false }); } ); -export const StyledTextareaContainer = styled<'div', SharedStylePropsT>( +export const StyledTextareaContainer = styled<'div', SharedStyleProps>( 'div', ( - props: SharedStylePropsT & { - $theme: ThemeT; + props: SharedStyleProps & { + $theme: Theme; } ) => ({ ...getInputContainerStyles({ $positive: false, ...props }), }) ); -export const StyledTextarea = styled<'textarea', SharedStylePropsT>( +export const StyledTextarea = styled<'textarea', SharedStyleProps>( 'textarea', ( - props: SharedStylePropsT & { - $theme: ThemeT; + props: SharedStyleProps & { + $theme: Theme; } ) => ({ ...getInputStyles(props), diff --git a/src/textarea/textarea.tsx b/src/textarea/textarea.tsx index 096a09a143..7122f0082f 100644 --- a/src/textarea/textarea.tsx +++ b/src/textarea/textarea.tsx @@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import * as React from 'react'; -import type { TextareaPropsT } from './types'; +import type { TextareaProps } from './types'; import { mergeOverrides, getOverrides } from '../helpers/overrides'; import { BaseInput, SIZE, CUSTOM_INPUT_TYPE } from '../input'; import { StyledTextAreaRoot, StyledTextarea, StyledTextareaContainer } from './styled-components'; @@ -13,7 +13,7 @@ import { StyledTextAreaRoot, StyledTextarea, StyledTextareaContainer } from './s import type { FocusEvent } from 'react'; class Textarea extends React.Component< - TextareaPropsT, + TextareaProps, { isFocused: boolean; } diff --git a/src/textarea/types.ts b/src/textarea/types.ts index 7f9d773b87..13fbe78ffc 100644 --- a/src/textarea/types.ts +++ b/src/textarea/types.ts @@ -6,17 +6,17 @@ LICENSE file in the root directory of this source tree. */ import * as React from 'react'; -import type { OverrideT } from '../helpers/overrides'; -import type { BaseInputPropsT, StateReducerT, StateT } from '../input'; +import type { Override } from '../helpers/overrides'; +import type { BaseInputProps, StateReducer, State } from '../input'; import { ADJOINED, SIZE } from '../input'; import type { SyntheticEvent } from 'react'; type SyntheticTextareaEvent = SyntheticEvent; -export type SizeT = keyof typeof SIZE; +export type Size = keyof typeof SIZE; -export type SharedStylePropsT = { +export type SharedStyleProps = { $adjoined: keyof typeof ADJOINED; $disabled?: boolean; $error?: boolean; @@ -24,37 +24,37 @@ export type SharedStylePropsT = { $isReadOnly?: boolean; $positive?: boolean; $required?: boolean; - $size: SizeT; + $size: Size; }; -type BaseTextAreaPropsT = BaseInputPropsT; +type BaseTextAreaProps = BaseInputProps; -export type TextareaOverridesT = { - Root?: OverrideT; -} & BaseTextAreaPropsT['overrides']; +export type TextareaOverrides = { + Root?: Override; +} & BaseTextAreaProps['overrides']; -export type TextareaPropsT = { - overrides?: TextareaOverridesT; +export type TextareaProps = { + overrides?: TextareaOverrides; /** Sets the size and number of visible text lines of the textarea element. */ rows?: number; maxLength?: number; -} & BaseTextAreaPropsT; +} & BaseTextAreaProps; -export type StatefulContainerPropsT = { +export type StatefulContainerProps = { children: (props: any) => React.ReactNode; - initialState?: StateT; - stateReducer?: StateReducerT; + initialState?: State; + stateReducer?: StateReducer; onChange?: (e: SyntheticTextareaEvent) => unknown; onKeyDown?: (e: SyntheticTextareaEvent) => unknown; onKeyPress?: (e: SyntheticTextareaEvent) => unknown; onKeyUp?: (e: SyntheticTextareaEvent) => unknown; }; -type OmitPropsT = { +type OmitProps = { children: (props: any) => React.ReactNode; }; -type FullStPropsT = TextareaPropsT & StatefulContainerPropsT; +type FullStProps = TextareaProps & StatefulContainerProps; -export type StatefulTextareaPropsT = Partial>; +export type StatefulTextareaProps = Partial>; diff --git a/src/themes/dark-theme/borders.ts b/src/themes/dark-theme/borders.ts index 424aff8b65..04ab879766 100644 --- a/src/themes/dark-theme/borders.ts +++ b/src/themes/dark-theme/borders.ts @@ -6,10 +6,10 @@ LICENSE file in the root directory of this source tree. */ import sharedBorders from '../shared/borders'; import deepMerge from '../../utils/deep-merge'; -import type { BordersT } from '../types'; +import type { Borders } from '../types'; // Override border colors for the dark theme -const borders: BordersT = deepMerge({}, sharedBorders, { +const borders: Borders = deepMerge({}, sharedBorders, { border100: { borderColor: 'hsla(0, 0%, 100%, 0.04)', }, diff --git a/src/themes/dark-theme/color-component-tokens.ts b/src/themes/dark-theme/color-component-tokens.ts index 2b1bfa8b90..d546ce53ca 100644 --- a/src/themes/dark-theme/color-component-tokens.ts +++ b/src/themes/dark-theme/color-component-tokens.ts @@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import colorTokens from './color-tokens'; -import type { ColorTokensT, ComponentColorTokensT } from '../types'; +import type { ColorTokens, ComponentColorTokens } from '../types'; const tagHoverBackground = `rgba(255, 255, 255, 0.2)`; @@ -14,7 +14,7 @@ const tagHoverBackground = `rgba(255, 255, 255, 0.2)`; // with values taken from `colorTokens`. // Due to the legacy `createTheme` type the values // need to be overrideable through primitives -export default (themePrimitives: ColorTokensT = colorTokens): ComponentColorTokensT => ({ +export default (themePrimitives: ColorTokens = colorTokens): ComponentColorTokens => ({ bannerActionLowInfo: themePrimitives.accent600, bannerActionLowNegative: themePrimitives.negative600, bannerActionLowPositive: themePrimitives.positive600, diff --git a/src/themes/dark-theme/color-semantic-tokens.ts b/src/themes/dark-theme/color-semantic-tokens.ts index b1744beeb9..6ad66cfebf 100644 --- a/src/themes/dark-theme/color-semantic-tokens.ts +++ b/src/themes/dark-theme/color-semantic-tokens.ts @@ -5,10 +5,10 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import type { - ColorTokensT, - CoreSemanticColorTokensT, - CoreExtensionSemanticColorTokensT, - SemanticColorTokensT, + ColorTokens, + CoreSemanticColorTokens, + CoreExtensionSemanticColorTokens, + SemanticColorTokens, } from '../types'; import colorTokens from './color-tokens'; import { hexToRgb as hexToRgba } from '../../styles/util'; @@ -16,9 +16,9 @@ import colors from '../../tokens/colors'; export default ( // themePrimitives or foundation colors - foundation: ColorTokensT = colorTokens -): SemanticColorTokensT => { - const core: CoreSemanticColorTokensT = { + foundation: ColorTokens = colorTokens +): SemanticColorTokens => { + const core: CoreSemanticColorTokens = { // Background backgroundPrimary: foundation.primaryB, backgroundSecondary: colors.gray800, @@ -43,7 +43,7 @@ export default ( borderInverseSelected: foundation.primaryB, }; - const coreExtensions: CoreExtensionSemanticColorTokensT = { + const coreExtensions: CoreExtensionSemanticColorTokens = { // Backgrounds backgroundStateDisabled: colors.gray800, backgroundOverlayDark: hexToRgba(colors.black, '0.3'), diff --git a/src/themes/dark-theme/color-tokens.ts b/src/themes/dark-theme/color-tokens.ts index a981661d44..7fb6f0f439 100644 --- a/src/themes/dark-theme/color-tokens.ts +++ b/src/themes/dark-theme/color-tokens.ts @@ -5,10 +5,10 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import { colors } from '../../tokens'; -import type { ColorTokensT } from '../types'; +import type { ColorTokens } from '../types'; // color constants -export const darkColorTokens: ColorTokensT = { +export const darkColorTokens: ColorTokens = { // Primary Palette primaryA: colors.gray200, primaryB: colors.gray900, diff --git a/src/themes/dark-theme/create-dark-theme.ts b/src/themes/dark-theme/create-dark-theme.ts index cb8be8ec9a..a644d945aa 100644 --- a/src/themes/dark-theme/create-dark-theme.ts +++ b/src/themes/dark-theme/create-dark-theme.ts @@ -17,19 +17,19 @@ import lighting from '../shared/lighting'; import mediaQuery from '../shared/media-query'; import sizing from '../shared/sizing'; -import type { PrimitivesT, ColorTokensT } from '../types'; -import type { ThemeT } from '../../styles/types'; +import type { Primitives, ColorTokens } from '../types'; +import type { Theme } from '../../styles/types'; export default function createDarkTheme( // Used to derive typography and color theme properties - primitives: Partial = {}, + primitives: Partial = {}, // Used to override default theme property values derived from primitives overrides?: {} -): ThemeT { +): Theme { // Extract font tokens and color tokens from primitives const { primaryFontFamily, ...customColorTokens } = primitives; // Assemble color tokens by overriding defaults with custom color tokens - const colorTokens: ColorTokensT = { + const colorTokens: ColorTokens = { ...defaultColorTokens, ...customColorTokens, }; diff --git a/src/themes/dark-theme/dark-theme.ts b/src/themes/dark-theme/dark-theme.ts index 32090666a6..c45e86e634 100644 --- a/src/themes/dark-theme/dark-theme.ts +++ b/src/themes/dark-theme/dark-theme.ts @@ -16,9 +16,9 @@ import grid from '../shared/grid'; import mediaQuery from '../shared/media-query'; import sizing from '../shared/sizing'; -import type { ThemeT } from '../../styles/types'; +import type { Theme } from '../../styles/types'; -export const DarkTheme: ThemeT = { +export const DarkTheme: Theme = { name: 'dark-theme', colors: { ...colorTokens, diff --git a/src/themes/dark-theme/primitives.ts b/src/themes/dark-theme/primitives.ts index 683e3632c3..27bcec5deb 100644 --- a/src/themes/dark-theme/primitives.ts +++ b/src/themes/dark-theme/primitives.ts @@ -6,11 +6,11 @@ LICENSE file in the root directory of this source tree. */ import colorTokens from './color-tokens'; import { defaultFontTokens } from '../shared/typography'; -import type { PrimitivesT } from '../types'; +import type { Primitives } from '../types'; // We don't use this ourselves. We provide it for backward compatibility. // People may have used it to create their own custom theme. -const primitives: PrimitivesT = { +const primitives: Primitives = { ...colorTokens, ...defaultFontTokens, }; diff --git a/src/themes/light-theme/color-component-tokens.ts b/src/themes/light-theme/color-component-tokens.ts index 7b88b1a195..897941a8ce 100644 --- a/src/themes/light-theme/color-component-tokens.ts +++ b/src/themes/light-theme/color-component-tokens.ts @@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import colorTokens from './color-tokens'; -import type { ColorTokensT, ComponentColorTokensT } from '../types'; +import type { ColorTokens, ComponentColorTokens } from '../types'; const tagHoverBackground = `rgba(0, 0, 0, 0.08)`; @@ -14,7 +14,7 @@ const tagHoverBackground = `rgba(0, 0, 0, 0.08)`; // with values taken from `colorTokens`. // Due to the legacy `createTheme` type the value need to be // overrideable through primitives (`foundation` ) -export default (themePrimitives: ColorTokensT = colorTokens): ComponentColorTokensT => ({ +export default (themePrimitives: ColorTokens = colorTokens): ComponentColorTokens => ({ bannerActionLowInfo: themePrimitives.accent100, bannerActionLowNegative: themePrimitives.negative100, bannerActionLowPositive: themePrimitives.positive100, diff --git a/src/themes/light-theme/color-semantic-tokens.ts b/src/themes/light-theme/color-semantic-tokens.ts index 5958ccb7b5..de9ada53cb 100644 --- a/src/themes/light-theme/color-semantic-tokens.ts +++ b/src/themes/light-theme/color-semantic-tokens.ts @@ -5,10 +5,10 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import type { - ColorTokensT, - CoreSemanticColorTokensT, - CoreExtensionSemanticColorTokensT, - SemanticColorTokensT, + ColorTokens, + CoreSemanticColorTokens, + CoreExtensionSemanticColorTokens, + SemanticColorTokens, } from '../types'; import colorTokens from './color-tokens'; import { hexToRgb as hexToRgba } from '../../styles/util'; @@ -16,9 +16,9 @@ import colors from '../../tokens/colors'; export default ( // themePrimitives or foundation colors - foundation: ColorTokensT = colorTokens -): SemanticColorTokensT => { - const core: CoreSemanticColorTokensT = { + foundation: ColorTokens = colorTokens +): SemanticColorTokens => { + const core: CoreSemanticColorTokens = { // Background backgroundPrimary: foundation.primaryB, backgroundSecondary: colors.gray50, @@ -43,7 +43,7 @@ export default ( borderInverseSelected: foundation.primaryB, }; - const coreExtensions: CoreExtensionSemanticColorTokensT = { + const coreExtensions: CoreExtensionSemanticColorTokens = { // Backgrounds backgroundStateDisabled: colors.gray50, backgroundOverlayDark: hexToRgba(colors.black, '0.3'), diff --git a/src/themes/light-theme/color-tokens.ts b/src/themes/light-theme/color-tokens.ts index 52004495fe..9245f1738b 100644 --- a/src/themes/light-theme/color-tokens.ts +++ b/src/themes/light-theme/color-tokens.ts @@ -5,10 +5,10 @@ This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import { colors } from '../../tokens'; -import type { ColorTokensT } from '../types'; +import type { ColorTokens } from '../types'; // color constants -const lightColorTokens: ColorTokensT = { +const lightColorTokens: ColorTokens = { // Primary Palette primaryA: colors.black, primaryB: colors.white, diff --git a/src/themes/light-theme/create-light-theme.ts b/src/themes/light-theme/create-light-theme.ts index 3bffa0e340..89e51f9ec4 100644 --- a/src/themes/light-theme/create-light-theme.ts +++ b/src/themes/light-theme/create-light-theme.ts @@ -17,19 +17,19 @@ import lighting from '../shared/lighting'; import mediaQuery from '../shared/media-query'; import sizing from '../shared/sizing'; -import type { PrimitivesT, ColorTokensT } from '../types'; -import type { ThemeT } from '../../styles/types'; +import type { Primitives, ColorTokens } from '../types'; +import type { Theme } from '../../styles/types'; export default function createLightTheme( // Used to derive typography and color theme properties - primitives: Partial = {}, + primitives: Partial = {}, // Used to override default theme property values derived from primitives overrides?: {} -): ThemeT { +): Theme { // Extract font tokens and color tokens from primitives const { primaryFontFamily, ...customColorTokens } = primitives; // Assemble color tokens by overriding defaults with custom color tokens - const colorTokens: ColorTokensT = { + const colorTokens: ColorTokens = { ...defaultColorTokens, ...customColorTokens, }; diff --git a/src/themes/light-theme/light-theme.ts b/src/themes/light-theme/light-theme.ts index cffe1773f8..04f6094bae 100644 --- a/src/themes/light-theme/light-theme.ts +++ b/src/themes/light-theme/light-theme.ts @@ -16,9 +16,9 @@ import grid from '../shared/grid'; import mediaQuery from '../shared/media-query'; import sizing from '../shared/sizing'; -import type { ThemeT } from '../../styles/types'; +import type { Theme } from '../../styles/types'; -export const LightTheme: ThemeT = { +export const LightTheme: Theme = { name: 'light-theme', colors: { ...colorTokens, diff --git a/src/themes/light-theme/primitives.ts b/src/themes/light-theme/primitives.ts index 683e3632c3..27bcec5deb 100644 --- a/src/themes/light-theme/primitives.ts +++ b/src/themes/light-theme/primitives.ts @@ -6,11 +6,11 @@ LICENSE file in the root directory of this source tree. */ import colorTokens from './color-tokens'; import { defaultFontTokens } from '../shared/typography'; -import type { PrimitivesT } from '../types'; +import type { Primitives } from '../types'; // We don't use this ourselves. We provide it for backward compatibility. // People may have used it to create their own custom theme. -const primitives: PrimitivesT = { +const primitives: Primitives = { ...colorTokens, ...defaultFontTokens, }; diff --git a/src/themes/move-theme/dark-theme-with-move.ts b/src/themes/move-theme/dark-theme-with-move.ts index a44e1340a8..a530063e5b 100644 --- a/src/themes/move-theme/dark-theme-with-move.ts +++ b/src/themes/move-theme/dark-theme-with-move.ts @@ -9,9 +9,9 @@ import { DarkTheme } from '../dark-theme/dark-theme'; import { typography as moveTypography, fontTokens as moveFontTokens } from './typography'; import getTypography from '../shared/typography'; -import type { ThemeT } from '../../styles/types'; +import type { Theme } from '../../styles/types'; -export const DarkThemeMove: ThemeT = deepMerge({}, DarkTheme, { +export const DarkThemeMove: Theme = deepMerge({}, DarkTheme, { name: 'dark-theme-with-move', // For the move theme we need to override typography values // in the default darkTheme with a font values that reference diff --git a/src/themes/move-theme/light-theme-with-move.ts b/src/themes/move-theme/light-theme-with-move.ts index 28a5e1ea7c..35625a6a15 100644 --- a/src/themes/move-theme/light-theme-with-move.ts +++ b/src/themes/move-theme/light-theme-with-move.ts @@ -9,9 +9,9 @@ import { LightTheme } from '../light-theme/light-theme'; import { typography as moveTypography, fontTokens as moveFontTokens } from './typography'; import getTypography from '../shared/typography'; -import type { ThemeT } from '../../styles/types'; +import type { Theme } from '../../styles/types'; -export const LightThemeMove: ThemeT = deepMerge({}, LightTheme, { +export const LightThemeMove: Theme = deepMerge({}, LightTheme, { name: 'light-theme-with-move', // For the move theme we need to override typography values // in the default lightTheme with a font values that reference diff --git a/src/themes/move-theme/typography.ts b/src/themes/move-theme/typography.ts index 5ca4f43f21..5380b26e7b 100644 --- a/src/themes/move-theme/typography.ts +++ b/src/themes/move-theme/typography.ts @@ -4,9 +4,9 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import type { FontTokensT } from '../types'; +import type { FontTokens } from '../types'; -export const fontTokens: FontTokensT = { +export const fontTokens: FontTokens = { primaryFontFamily: 'UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif', }; diff --git a/src/themes/shared/animation.ts b/src/themes/shared/animation.ts index 0ee4af23fe..1baa8502b2 100644 --- a/src/themes/shared/animation.ts +++ b/src/themes/shared/animation.ts @@ -4,9 +4,9 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import type { AnimationT } from '../types'; +import type { Animation } from '../types'; -const animation: AnimationT = { +const animation: Animation = { timing100: '100ms', timing200: '200ms', timing300: '300ms', diff --git a/src/themes/shared/borders.ts b/src/themes/shared/borders.ts index 1a97008249..726c8278fa 100644 --- a/src/themes/shared/borders.ts +++ b/src/themes/shared/borders.ts @@ -4,11 +4,11 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import type { BordersT } from '../types'; +import type { Borders } from '../types'; // borderColor is defaulted to the light theme values. // Dark theme overrides the border colors. -const borders: BordersT = { +const borders: Borders = { border100: { borderColor: 'hsla(0, 0%, 0%, 0.04)', borderStyle: 'solid', diff --git a/src/themes/shared/breakpoints.ts b/src/themes/shared/breakpoints.ts index 0d82ee6130..a144a221c4 100644 --- a/src/themes/shared/breakpoints.ts +++ b/src/themes/shared/breakpoints.ts @@ -4,9 +4,9 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import type { BreakpointsT } from '../types'; +import type { Breakpoints } from '../types'; -const breakpoints: BreakpointsT = { +const breakpoints: Breakpoints = { small: 320, medium: 600, large: 1136, diff --git a/src/themes/shared/grid.ts b/src/themes/shared/grid.ts index 1bc4380939..97d4d5d119 100644 --- a/src/themes/shared/grid.ts +++ b/src/themes/shared/grid.ts @@ -4,9 +4,9 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import type { GridT } from '../types'; +import type { Grid } from '../types'; -const grid: GridT = { +const grid: Grid = { columns: [4, 8, 12], gutters: [16, 36, 36], margins: [16, 36, 64], diff --git a/src/themes/shared/lighting.ts b/src/themes/shared/lighting.ts index c247174c59..a4c05cf86a 100644 --- a/src/themes/shared/lighting.ts +++ b/src/themes/shared/lighting.ts @@ -4,9 +4,9 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import type { LightingT } from '../types'; +import type { Lighting } from '../types'; -const lighting: LightingT = { +const lighting: Lighting = { shadow400: '0 1px 4px hsla(0, 0%, 0%, 0.16)', shadow500: '0 2px 8px hsla(0, 0%, 0%, 0.16)', shadow600: '0 4px 16px hsla(0, 0%, 0%, 0.16)', diff --git a/src/themes/shared/media-query.ts b/src/themes/shared/media-query.ts index 896c67510e..c03691a32f 100644 --- a/src/themes/shared/media-query.ts +++ b/src/themes/shared/media-query.ts @@ -6,9 +6,9 @@ LICENSE file in the root directory of this source tree. */ import { getMediaQuery } from '../../helpers/responsive-helpers'; import breakpoints from './breakpoints'; -import type { MediaQueryT } from '../types'; +import type { MediaQuery } from '../types'; -const mediaQuery: MediaQueryT = { +const mediaQuery: MediaQuery = { small: getMediaQuery(breakpoints.small), medium: getMediaQuery(breakpoints.medium), large: getMediaQuery(breakpoints.large), diff --git a/src/themes/shared/sizing.ts b/src/themes/shared/sizing.ts index 10bdfe97b4..cfa1aca82e 100644 --- a/src/themes/shared/sizing.ts +++ b/src/themes/shared/sizing.ts @@ -4,9 +4,9 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import type { SizingT } from '../types'; +import type { Sizing } from '../types'; -const sizing: SizingT = { +const sizing: Sizing = { scale0: '2px', scale100: '4px', scale200: '6px', diff --git a/src/themes/shared/typography.ts b/src/themes/shared/typography.ts index e01f3f2351..a2176c5ded 100644 --- a/src/themes/shared/typography.ts +++ b/src/themes/shared/typography.ts @@ -4,118 +4,118 @@ Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -import type { TypographyT, FontTokensT, FontT } from '../types'; +import type { Typography, FontTokens, Font } from '../types'; -export const defaultFontTokens: FontTokensT = { +export const defaultFontTokens: FontTokens = { primaryFontFamily: 'system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif', }; const monoFontFamily = '"Lucida Console", Monaco, monospace'; -export default (fontTokens: FontTokensT = defaultFontTokens): TypographyT => { - const font100: FontT = { +export default (fontTokens: FontTokens = defaultFontTokens): Typography => { + const font100: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '12px', fontWeight: 'normal', lineHeight: '20px', }; - const font150: FontT = { + const font150: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '12px', fontWeight: 500, lineHeight: '16px', }; - const font200: FontT = { + const font200: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '14px', fontWeight: 'normal', lineHeight: '20px', }; - const font250: FontT = { + const font250: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '14px', fontWeight: 500, lineHeight: '16px', }; - const font300: FontT = { + const font300: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '16px', fontWeight: 'normal', lineHeight: '24px', }; - const font350: FontT = { + const font350: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '16px', fontWeight: 500, lineHeight: '20px', }; - const font400: FontT = { + const font400: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '18px', fontWeight: 'normal', lineHeight: '28px', }; - const font450: FontT = { + const font450: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '18px', fontWeight: 500, lineHeight: '24px', }; - const font550: FontT = { + const font550: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '20px', fontWeight: 500, lineHeight: '28px', }; - const font650: FontT = { + const font650: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '24px', fontWeight: 500, lineHeight: '32px', }; - const font750: FontT = { + const font750: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '28px', fontWeight: 500, lineHeight: '36px', }; - const font850: FontT = { + const font850: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '32px', fontWeight: 500, lineHeight: '40px', }; - const font950: FontT = { + const font950: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '36px', fontWeight: 500, lineHeight: '44px', }; - const font1050: FontT = { + const font1050: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '40px', fontWeight: 500, lineHeight: '52px', }; - const font1150: FontT = { + const font1150: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '36px', fontWeight: 500, lineHeight: '44px', }; - const font1250: FontT = { + const font1250: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '44px', fontWeight: 500, lineHeight: '52px', }; - const font1350: FontT = { + const font1350: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '52px', fontWeight: 500, lineHeight: '64px', }; - const font1450: FontT = { + const font1450: Font = { fontFamily: fontTokens.primaryFontFamily, fontSize: '96px', fontWeight: 500, diff --git a/src/themes/types.ts b/src/themes/types.ts index 13ee089c6f..3d465bc8df 100644 --- a/src/themes/types.ts +++ b/src/themes/types.ts @@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree. */ import type { Properties } from 'csstype'; -import type { ResponsiveT, CSSLengthUnitT } from '../layout-grid'; +import type { Responsive, CSSLengthUnit } from '../layout-grid'; export type Globals = '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset'; export type LineStyle = @@ -21,7 +21,7 @@ export type LineStyle = | 'ridge' | 'solid'; -export type ColorTokensT = { +export type ColorTokens = { // Primary Palette primaryA: string; primaryB: string; @@ -92,7 +92,7 @@ export type ColorTokensT = { ratingStroke: string; }; -export type CoreSemanticColorTokensT = { +export type CoreSemanticColorTokens = { // Background backgroundPrimary: string; backgroundSecondary: string; @@ -114,7 +114,7 @@ export type CoreSemanticColorTokensT = { borderInverseTransparent: string | undefined | null; borderInverseSelected: string; }; -export type CoreExtensionSemanticColorTokensT = { +export type CoreExtensionSemanticColorTokens = { // Backgrounds backgroundStateDisabled: string; backgroundOverlayDark: string | undefined | null; @@ -157,10 +157,9 @@ export type CoreExtensionSemanticColorTokensT = { membership: string; }; -export type SemanticColorTokensT = {} & CoreSemanticColorTokensT & - CoreExtensionSemanticColorTokensT; +export type SemanticColorTokens = {} & CoreSemanticColorTokens & CoreExtensionSemanticColorTokens; -export type ComponentColorTokensT = { +export type ComponentColorTokens = { bannerActionLowInfo: string; bannerActionLowNegative: string; bannerActionLowPositive: string; @@ -476,77 +475,77 @@ export type ComponentColorTokensT = { tooltipText: string; }; -export type FontTokensT = { +export type FontTokens = { primaryFontFamily: string; }; // TODO(#2318) Deprecate in the next major version -export type PrimitivesT = {} & ColorTokensT & FontTokensT; +export type Primitives = {} & ColorTokens & FontTokens; -export type FontT = { +export type Font = { fontFamily: string; fontWeight: Globals | 'bold' | 'normal' | 'bolder' | 'lighter' | number; fontSize: string; lineHeight: string | number; }; -export type TypographyT = { - font100: FontT; - font150: FontT; - font200: FontT; - font250: FontT; - font300: FontT; - font350: FontT; - font400: FontT; - font450: FontT; - font550: FontT; - font650: FontT; - font750: FontT; - font850: FontT; - font950: FontT; - font1050: FontT; - font1150: FontT; - font1250: FontT; - font1350: FontT; - font1450: FontT; - ParagraphXSmall: FontT; - ParagraphSmall: FontT; - ParagraphMedium: FontT; - ParagraphLarge: FontT; - LabelXSmall: FontT; - LabelSmall: FontT; - LabelMedium: FontT; - LabelLarge: FontT; - HeadingXSmall: FontT; - HeadingSmall: FontT; - HeadingMedium: FontT; - HeadingLarge: FontT; - HeadingXLarge: FontT; - HeadingXXLarge: FontT; - DisplayXSmall: FontT; - DisplaySmall: FontT; - DisplayMedium: FontT; - DisplayLarge: FontT; - MonoParagraphXSmall: FontT; - MonoParagraphSmall: FontT; - MonoParagraphMedium: FontT; - MonoParagraphLarge: FontT; - MonoLabelXSmall: FontT; - MonoLabelSmall: FontT; - MonoLabelMedium: FontT; - MonoLabelLarge: FontT; - MonoHeadingXSmall: FontT; - MonoHeadingSmall: FontT; - MonoHeadingMedium: FontT; - MonoHeadingLarge: FontT; - MonoHeadingXLarge: FontT; - MonoHeadingXXLarge: FontT; - MonoDisplayXSmall: FontT; - MonoDisplaySmall: FontT; - MonoDisplayMedium: FontT; - MonoDisplayLarge: FontT; +export type Typography = { + font100: Font; + font150: Font; + font200: Font; + font250: Font; + font300: Font; + font350: Font; + font400: Font; + font450: Font; + font550: Font; + font650: Font; + font750: Font; + font850: Font; + font950: Font; + font1050: Font; + font1150: Font; + font1250: Font; + font1350: Font; + font1450: Font; + ParagraphXSmall: Font; + ParagraphSmall: Font; + ParagraphMedium: Font; + ParagraphLarge: Font; + LabelXSmall: Font; + LabelSmall: Font; + LabelMedium: Font; + LabelLarge: Font; + HeadingXSmall: Font; + HeadingSmall: Font; + HeadingMedium: Font; + HeadingLarge: Font; + HeadingXLarge: Font; + HeadingXXLarge: Font; + DisplayXSmall: Font; + DisplaySmall: Font; + DisplayMedium: Font; + DisplayLarge: Font; + MonoParagraphXSmall: Font; + MonoParagraphSmall: Font; + MonoParagraphMedium: Font; + MonoParagraphLarge: Font; + MonoLabelXSmall: Font; + MonoLabelSmall: Font; + MonoLabelMedium: Font; + MonoLabelLarge: Font; + MonoHeadingXSmall: Font; + MonoHeadingSmall: Font; + MonoHeadingMedium: Font; + MonoHeadingLarge: Font; + MonoHeadingXLarge: Font; + MonoHeadingXXLarge: Font; + MonoDisplayXSmall: Font; + MonoDisplaySmall: Font; + MonoDisplayMedium: Font; + MonoDisplayLarge: Font; }; -export type SizingT = { +export type Sizing = { scale0: string; scale100: string; scale200: string; @@ -571,19 +570,19 @@ export type SizingT = { scale4800: string; }; -export type BreakpointsT = { +export type Breakpoints = { small: number; medium: number; large: number; }; -export type MediaQueryT = { +export type MediaQuery = { small: string; medium: string; large: string; }; -export type LightingT = { +export type Lighting = { shadow400: string; shadow500: string; shadow600: string; @@ -601,7 +600,7 @@ export type LightingT = { deepBelow: string; }; -export type AnimationT = { +export type Animation = { timing100: string; timing200: string; timing300: string; @@ -621,20 +620,20 @@ export type AnimationT = { linearCurve: string; }; -export type BorderT = { +export type Border = { borderColor: Properties['borderColor']; // longhand border-style properties do not accept string values borderStyle: Properties['borderLeftStyle']; borderWidth: Properties['borderWidth']; }; -export type BordersT = { - border100: BorderT; - border200: BorderT; - border300: BorderT; - border400: BorderT; - border500: BorderT; - border600: BorderT; +export type Borders = { + border100: Border; + border200: Border; + border300: Border; + border400: Border; + border500: Border; + border600: Border; radius100: string; radius200: string; radius300: string; @@ -648,16 +647,16 @@ export type BordersT = { tagBorderRadius: string; }; -export type GridT = { - columns: ResponsiveT; - gutters: ResponsiveT; - margins: ResponsiveT; - gaps: ResponsiveT; +export type Grid = { + columns: Responsive; + gutters: Responsive; + margins: Responsive; + gaps: Responsive; maxWidth: number; - unit: CSSLengthUnitT; + unit: CSSLengthUnit; }; // TODO(#2318) Deprecate in the next major -export type ZIndexT = { +export type ZIndex = { modal: number; }; diff --git a/src/timepicker/__tests__/time-picker.scenario.tsx b/src/timepicker/__tests__/time-picker.scenario.tsx index 2701eefeb1..edab327059 100644 --- a/src/timepicker/__tests__/time-picker.scenario.tsx +++ b/src/timepicker/__tests__/time-picker.scenario.tsx @@ -9,7 +9,7 @@ import React, { useState } from 'react'; import { startOfDay } from 'date-fns'; import { TimePicker } from '..'; -import { SizeT, SIZE } from '../../input'; +import { Size, SIZE } from '../../input'; import MomentUtils from '@date-io/moment'; const momentAdapter = new MomentUtils({}); @@ -24,7 +24,7 @@ const overrides = { }; const Controlled = ({ - size = 'default' as SizeT, + size = 'default' as Size, initialDate, creatable = false, onChange = () => {}, @@ -52,7 +52,7 @@ const Controlled = ({ }; const MomentControlled = ({ - size = 'default' as SizeT, + size = 'default' as Size, initialDate, creatable = false, onChange = () => {}, diff --git a/src/timepicker/timepicker.tsx b/src/timepicker/timepicker.tsx index 6017dcfbc0..353eb3c700 100644 --- a/src/timepicker/timepicker.tsx +++ b/src/timepicker/timepicker.tsx @@ -8,19 +8,19 @@ import * as React from 'react'; import { getOverrides, mergeOverrides } from '../helpers/overrides'; import { LocaleContext } from '../locale'; -import type { OnChangeParamsT, OptionT } from '../select'; +import type { OnChangeParams, Option } from '../select'; import { filterOptions, Select } from '../select'; import DateHelpers from '../datepicker/utils/date-helpers'; import dateFnsAdapter from '../datepicker/utils/date-fns-adapter'; -import type { TimePickerDefaultPropsT, TimePickerPropsT, TimePickerStateT } from './types'; +import type { TimePickerDefaultProps, TimePickerProps, TimePickerState } from './types'; const MINUTE = 60; const HOUR = MINUTE * 60; const DAY = HOUR * 24; const NOON = DAY / 2; -class TimePicker extends React.Component, TimePickerStateT> { - static defaultProps: TimePickerDefaultPropsT = { +class TimePicker extends React.Component, TimePickerState> { + static defaultProps: TimePickerDefaultProps = { format: '12', step: 900, creatable: false, @@ -31,7 +31,7 @@ class TimePicker extends React.Component, TimePick state = { steps: [], value: null }; - constructor(props: TimePickerPropsT) { + constructor(props: TimePickerProps) { super(props); this.dateHelpers = new DateHelpers(props.adapter); } @@ -67,7 +67,7 @@ class TimePicker extends React.Component, TimePick } } - componentDidUpdate(prevProps: TimePickerPropsT) { + componentDidUpdate(prevProps: TimePickerProps) { const formatChanged = prevProps.format !== this.props.format; const stepChanged = prevProps.step !== this.props.step; const adapterChanged = prevProps.adapter !== this.props.adapter; @@ -85,7 +85,7 @@ class TimePicker extends React.Component, TimePick } } - onChange = (params: OnChangeParamsT) => { + onChange = (params: OnChangeParams) => { this.setState({ value: params.value[0] }); if (params.value.length === 0) { if (this.props.nullable) { @@ -124,7 +124,7 @@ class TimePicker extends React.Component, TimePick * Converts a time string, e.g. 10:00, to one or more possible TimePicker * options representing that time. */ - stringToOptions: (a: string, format?: '12' | '24') => Array = (str, format = '12') => { + stringToOptions: (a: string, format?: '12' | '24') => Array