From e93627e7eda768f09f440feb04a21987c4dc59fc Mon Sep 17 00:00:00 2001 From: Rory Hunter Date: Fri, 27 Sep 2019 15:24:03 +0100 Subject: [PATCH] Migrate `EuiFacetGroup`, `EuiKeyPadMenu` and `EuiCallOut` to TS (#2382) Migrate EuiFacetGroup, EuiKeyPadMenu and EuiCallOut to TypeScript. --- CHANGELOG.md | 1 + ...ut.test.js.snap => call_out.test.tsx.snap} | 0 .../{call_out.test.js => call_out.test.tsx} | 0 .../call_out/{call_out.js => call_out.tsx} | 45 +++++------- src/components/call_out/index.d.ts | 28 ------- src/components/call_out/index.js | 1 - src/components/call_out/index.ts | 1 + ...test.js.snap => facet_group.test.tsx.snap} | 0 ...cet_group.test.js => facet_group.test.tsx} | 0 .../facet/{facet_group.js => facet_group.tsx} | 31 ++++---- src/components/facet/index.d.ts | 34 --------- src/components/facet/index.js | 3 - src/components/facet/index.ts | 3 + src/components/index.d.ts | 3 - ...est.js.snap => key_pad_menu.test.tsx.snap} | 0 ...s.snap => key_pad_menu_item.test.tsx.snap} | 0 src/components/key_pad_menu/index.d.ts | 35 --------- .../key_pad_menu/{index.js => index.ts} | 0 src/components/key_pad_menu/key_pad_menu.js | 18 ----- ...pad_menu.test.js => key_pad_menu.test.tsx} | 0 src/components/key_pad_menu/key_pad_menu.tsx | 20 +++++ ...tem.test.js => key_pad_menu_item.test.tsx} | 11 ++- ...pad_menu_item.js => key_pad_menu_item.tsx} | 73 ++++++++++--------- 23 files changed, 106 insertions(+), 201 deletions(-) rename src/components/call_out/__snapshots__/{call_out.test.js.snap => call_out.test.tsx.snap} (100%) rename src/components/call_out/{call_out.test.js => call_out.test.tsx} (100%) rename src/components/call_out/{call_out.js => call_out.tsx} (60%) delete mode 100644 src/components/call_out/index.d.ts delete mode 100644 src/components/call_out/index.js create mode 100644 src/components/call_out/index.ts rename src/components/facet/__snapshots__/{facet_group.test.js.snap => facet_group.test.tsx.snap} (100%) rename src/components/facet/{facet_group.test.js => facet_group.test.tsx} (100%) rename src/components/facet/{facet_group.js => facet_group.tsx} (54%) delete mode 100644 src/components/facet/index.d.ts delete mode 100644 src/components/facet/index.js create mode 100644 src/components/facet/index.ts rename src/components/key_pad_menu/__snapshots__/{key_pad_menu.test.js.snap => key_pad_menu.test.tsx.snap} (100%) rename src/components/key_pad_menu/__snapshots__/{key_pad_menu_item.test.js.snap => key_pad_menu_item.test.tsx.snap} (100%) delete mode 100644 src/components/key_pad_menu/index.d.ts rename src/components/key_pad_menu/{index.js => index.ts} (100%) delete mode 100644 src/components/key_pad_menu/key_pad_menu.js rename src/components/key_pad_menu/{key_pad_menu.test.js => key_pad_menu.test.tsx} (100%) create mode 100644 src/components/key_pad_menu/key_pad_menu.tsx rename src/components/key_pad_menu/{key_pad_menu_item.test.js => key_pad_menu_item.test.tsx} (84%) rename src/components/key_pad_menu/{key_pad_menu_item.js => key_pad_menu_item.tsx} (63%) diff --git a/CHANGELOG.md b/CHANGELOG.md index bbb0e4145c9..e8e63b9e23b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - Set `textOnly={true}` for expanded rows in `EuiBasicTable` ([#2376](https://github.com/elastic/eui/pull/2376)) - Added `visAreaStacked`, `visBarVerticalStacked`, and `visBarHorizontalStacked` icons to glyph set ([#2379](https://github.com/elastic/eui/pull/2379)) - Adjusted style of beta badge on `EuiKeyPadMenuItem` ([#2375](https://github.com/elastic/eui/pull/2375)) +- Migrate `EuiFacetGroup`, `EuiKeyPadMenu` and `EuiCallOut` to TS ([#2382](https://github.com/elastic/eui/pull/2382)) **Bug fixes** diff --git a/src/components/call_out/__snapshots__/call_out.test.js.snap b/src/components/call_out/__snapshots__/call_out.test.tsx.snap similarity index 100% rename from src/components/call_out/__snapshots__/call_out.test.js.snap rename to src/components/call_out/__snapshots__/call_out.test.tsx.snap diff --git a/src/components/call_out/call_out.test.js b/src/components/call_out/call_out.test.tsx similarity index 100% rename from src/components/call_out/call_out.test.js rename to src/components/call_out/call_out.test.tsx diff --git a/src/components/call_out/call_out.js b/src/components/call_out/call_out.tsx similarity index 60% rename from src/components/call_out/call_out.js rename to src/components/call_out/call_out.tsx index 2b45a0441b8..5dce716fd7d 100644 --- a/src/components/call_out/call_out.js +++ b/src/components/call_out/call_out.tsx @@ -1,32 +1,41 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react'; import classNames from 'classnames'; -import { IconPropType, EuiIcon } from '../icon'; +import { CommonProps, Omit, keysOf } from '../common'; +import { IconType, EuiIcon } from '../icon'; import { EuiText } from '../text'; -const colorToClassNameMap = { +type Color = 'primary' | 'success' | 'warning' | 'danger'; +type Size = 's' | 'm'; + +export type EuiCallOutProps = CommonProps & + Omit, 'title'> & { + title?: ReactNode; + iconType?: IconType; + color?: Color; + size?: Size; + }; + +const colorToClassNameMap: { [color in Color]: string } = { primary: 'euiCallOut--primary', success: 'euiCallOut--success', warning: 'euiCallOut--warning', danger: 'euiCallOut--danger', }; -export const COLORS = Object.keys(colorToClassNameMap); +export const COLORS = keysOf(colorToClassNameMap); -const sizeToClassNameMap = { +const sizeToClassNameMap: { [size in Size]: string } = { s: 'euiCallOut--small', m: '', }; -export const SIZES = Object.keys(sizeToClassNameMap); - -export const EuiCallOut = ({ +export const EuiCallOut: FunctionComponent = ({ title, - color, - size, + color = 'primary', + size = 'm', iconType, children, className, @@ -71,17 +80,3 @@ export const EuiCallOut = ({ ); }; - -EuiCallOut.propTypes = { - children: PropTypes.node, - className: PropTypes.string, - title: PropTypes.node, - iconType: IconPropType, - color: PropTypes.oneOf(COLORS), - size: PropTypes.oneOf(SIZES), -}; - -EuiCallOut.defaultProps = { - color: 'primary', - size: 'm', -}; diff --git a/src/components/call_out/index.d.ts b/src/components/call_out/index.d.ts deleted file mode 100644 index fe4ea3fe77d..00000000000 --- a/src/components/call_out/index.d.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { CommonProps, Omit } from '../common'; -import { IconType } from '../icon'; - -import { FunctionComponent, ReactNode, HTMLAttributes } from 'react'; - -declare module '@elastic/eui' { - /** - * EuiCallOut type defs - * - * @see './code.js' - */ - - type Color = 'primary' | 'success' | 'warning' | 'danger'; - type Size = 's' | 'm'; - - export interface EuiCallOutProps { - title?: ReactNode; - iconType?: IconType; - color?: Color; - size?: Size; - } - - export const EuiCallOut: FunctionComponent< - CommonProps & - EuiCallOutProps & - Omit, 'title'> - >; -} diff --git a/src/components/call_out/index.js b/src/components/call_out/index.js deleted file mode 100644 index 02e7b80d960..00000000000 --- a/src/components/call_out/index.js +++ /dev/null @@ -1 +0,0 @@ -export { EuiCallOut } from './call_out'; diff --git a/src/components/call_out/index.ts b/src/components/call_out/index.ts new file mode 100644 index 00000000000..ed031412bd7 --- /dev/null +++ b/src/components/call_out/index.ts @@ -0,0 +1 @@ +export { EuiCallOut, EuiCallOutProps } from './call_out'; diff --git a/src/components/facet/__snapshots__/facet_group.test.js.snap b/src/components/facet/__snapshots__/facet_group.test.tsx.snap similarity index 100% rename from src/components/facet/__snapshots__/facet_group.test.js.snap rename to src/components/facet/__snapshots__/facet_group.test.tsx.snap diff --git a/src/components/facet/facet_group.test.js b/src/components/facet/facet_group.test.tsx similarity index 100% rename from src/components/facet/facet_group.test.js rename to src/components/facet/facet_group.test.tsx diff --git a/src/components/facet/facet_group.js b/src/components/facet/facet_group.tsx similarity index 54% rename from src/components/facet/facet_group.js rename to src/components/facet/facet_group.tsx index 11fa795c783..93e0e762ff2 100644 --- a/src/components/facet/facet_group.js +++ b/src/components/facet/facet_group.tsx @@ -1,16 +1,27 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { FunctionComponent, HTMLAttributes } from 'react'; import classNames from 'classnames'; + +import { CommonProps } from '../common'; import { EuiFlexGroup } from '../flex'; -const layoutToClassNameMap = { +type FacetGroupLayout = 'vertical' | 'horizontal'; + +const layoutToClassNameMap: { [layout in FacetGroupLayout]: string } = { vertical: 'euiFacetGroup--vertical', horizontal: 'euiFacetGroup--horizontal', }; -export const LAYOUTS = Object.keys(layoutToClassNameMap); +export type EuiFacetGroupProps = CommonProps & + HTMLAttributes & { + layout?: FacetGroupLayout; + }; -export const EuiFacetGroup = ({ children, className, layout, ...rest }) => { +export const EuiFacetGroup: FunctionComponent = ({ + children, + className, + layout = 'vertical', + ...rest +}) => { const classes = classNames( 'euiFacetGroup', layoutToClassNameMap[layout], @@ -30,13 +41,3 @@ export const EuiFacetGroup = ({ children, className, layout, ...rest }) => { ); }; - -EuiFacetGroup.propTypes = { - children: PropTypes.node, - className: PropTypes.string, - layout: PropTypes.oneOf(LAYOUTS), -}; - -EuiFacetGroup.defaultProps = { - layout: 'vertical', -}; diff --git a/src/components/facet/index.d.ts b/src/components/facet/index.d.ts deleted file mode 100644 index 721f430bd8b..00000000000 --- a/src/components/facet/index.d.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { ButtonHTMLAttributes, HTMLAttributes, FunctionComponent } from 'react'; -import { CommonProps } from '../common'; -/// - -import { EuiFacetButtonProps as ButtonProps } from './facet_button'; - -declare module '@elastic/eui' { - /** - * Facet button type defs - * - * @see './facet_button.js' - */ - - export type EuiFacetButtonProps = ButtonProps; - - export const EuiFacetButton: FunctionComponent< - CommonProps & ButtonHTMLAttributes & EuiFacetButtonProps - >; - - /** - * Facet group type defs - * - * @see './facet_group.js' - */ - - export type FacetGroupLayouts = 'vertical' | 'horizontal'; - export interface EuiFacetGroupProps { - layout?: FacetGroupLayouts; - } - - export const EuiFacetGroup: FunctionComponent< - CommonProps & HTMLAttributes & EuiFacetGroupProps - >; -} diff --git a/src/components/facet/index.js b/src/components/facet/index.js deleted file mode 100644 index 5167e39f55c..00000000000 --- a/src/components/facet/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export { EuiFacetButton } from './facet_button'; - -export { EuiFacetGroup } from './facet_group'; diff --git a/src/components/facet/index.ts b/src/components/facet/index.ts new file mode 100644 index 00000000000..93cf75edce9 --- /dev/null +++ b/src/components/facet/index.ts @@ -0,0 +1,3 @@ +export { EuiFacetButton, EuiFacetButtonProps } from './facet_button'; + +export { EuiFacetGroup, EuiFacetGroupProps } from './facet_group'; diff --git a/src/components/index.d.ts b/src/components/index.d.ts index f24fde2edc1..3d2aee04b16 100644 --- a/src/components/index.d.ts +++ b/src/components/index.d.ts @@ -1,16 +1,13 @@ -/// /// /// /// /// /// /// -/// /// /// /// /// -/// /// /// /// diff --git a/src/components/key_pad_menu/__snapshots__/key_pad_menu.test.js.snap b/src/components/key_pad_menu/__snapshots__/key_pad_menu.test.tsx.snap similarity index 100% rename from src/components/key_pad_menu/__snapshots__/key_pad_menu.test.js.snap rename to src/components/key_pad_menu/__snapshots__/key_pad_menu.test.tsx.snap diff --git a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.js.snap b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap similarity index 100% rename from src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.js.snap rename to src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap diff --git a/src/components/key_pad_menu/index.d.ts b/src/components/key_pad_menu/index.d.ts deleted file mode 100644 index 151b430b16f..00000000000 --- a/src/components/key_pad_menu/index.d.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { CommonProps } from '../common'; -import { IconType } from '../icon'; - -import { - AnchorHTMLAttributes, - ButtonHTMLAttributes, - HTMLAttributes, - ReactNode, - FunctionComponent, -} from 'react'; - -declare module '@elastic/eui' { - export const EuiKeyPadMenu: FunctionComponent< - CommonProps & HTMLAttributes - >; - - interface EuiKeyPadMenuItemCommonProps { - label: ReactNode; - betaBadgeLabel?: string; - betaBadgeIconType?: IconType; - betaBadgeTooltipContent?: ReactNode; - } - - export const EuiKeyPadMenuItemButton: FunctionComponent< - CommonProps & - ButtonHTMLAttributes & - EuiKeyPadMenuItemCommonProps - >; - - export const EuiKeyPadMenuItem: FunctionComponent< - CommonProps & - AnchorHTMLAttributes & - EuiKeyPadMenuItemCommonProps - >; -} diff --git a/src/components/key_pad_menu/index.js b/src/components/key_pad_menu/index.ts similarity index 100% rename from src/components/key_pad_menu/index.js rename to src/components/key_pad_menu/index.ts diff --git a/src/components/key_pad_menu/key_pad_menu.js b/src/components/key_pad_menu/key_pad_menu.js deleted file mode 100644 index 925ea6eb5f8..00000000000 --- a/src/components/key_pad_menu/key_pad_menu.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -export const EuiKeyPadMenu = ({ children, className, ...rest }) => { - const classes = classNames('euiKeyPadMenu', className); - - return ( -
- {children} -
- ); -}; - -EuiKeyPadMenu.propTypes = { - children: PropTypes.node, - className: PropTypes.string, -}; diff --git a/src/components/key_pad_menu/key_pad_menu.test.js b/src/components/key_pad_menu/key_pad_menu.test.tsx similarity index 100% rename from src/components/key_pad_menu/key_pad_menu.test.js rename to src/components/key_pad_menu/key_pad_menu.test.tsx diff --git a/src/components/key_pad_menu/key_pad_menu.tsx b/src/components/key_pad_menu/key_pad_menu.tsx new file mode 100644 index 00000000000..c2f2594f212 --- /dev/null +++ b/src/components/key_pad_menu/key_pad_menu.tsx @@ -0,0 +1,20 @@ +import React, { FunctionComponent, HTMLAttributes } from 'react'; +import classNames from 'classnames'; + +import { CommonProps } from '../common'; + +export type EuiKeyPadMenuProps = CommonProps & HTMLAttributes; + +export const EuiKeyPadMenu: FunctionComponent = ({ + children, + className, + ...rest +}) => { + const classes = classNames('euiKeyPadMenu', className); + + return ( +
+ {children} +
+ ); +}; diff --git a/src/components/key_pad_menu/key_pad_menu_item.test.js b/src/components/key_pad_menu/key_pad_menu_item.test.tsx similarity index 84% rename from src/components/key_pad_menu/key_pad_menu_item.test.js rename to src/components/key_pad_menu/key_pad_menu_item.test.tsx index ae9ecf11701..e9e1dfb3eb3 100644 --- a/src/components/key_pad_menu/key_pad_menu_item.test.js +++ b/src/components/key_pad_menu/key_pad_menu_item.test.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { render, shallow } from 'enzyme'; -import sinon from 'sinon'; -import { requiredProps } from '../../test/required_props'; +import { requiredProps } from '../../test'; import { EuiKeyPadMenuItem, @@ -43,7 +42,7 @@ describe('EuiKeyPadMenuItemButton', () => { describe('onClick', () => { test("isn't called upon instantiation", () => { - const onClickHandler = sinon.stub(); + const onClickHandler = jest.fn(); shallow( @@ -51,11 +50,11 @@ describe('EuiKeyPadMenuItemButton', () => { ); - sinon.assert.notCalled(onClickHandler); + expect(onClickHandler).not.toBeCalled(); }); test('is called when the button is clicked', () => { - const onClickHandler = sinon.stub(); + const onClickHandler = jest.fn(); const $button = shallow( @@ -65,7 +64,7 @@ describe('EuiKeyPadMenuItemButton', () => { $button.simulate('click'); - sinon.assert.calledOnce(onClickHandler); + expect(onClickHandler).toBeCalledTimes(1); }); }); }); diff --git a/src/components/key_pad_menu/key_pad_menu_item.js b/src/components/key_pad_menu/key_pad_menu_item.tsx similarity index 63% rename from src/components/key_pad_menu/key_pad_menu_item.js rename to src/components/key_pad_menu/key_pad_menu_item.tsx index c1bb3ab1616..4f6a9fb8a04 100644 --- a/src/components/key_pad_menu/key_pad_menu_item.js +++ b/src/components/key_pad_menu/key_pad_menu_item.tsx @@ -1,17 +1,23 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { + AnchorHTMLAttributes, + ButtonHTMLAttributes, + FunctionComponent, + ReactNode, +} from 'react'; import classNames from 'classnames'; -import { EuiBetaBadge } from '../../components/badge/beta_badge'; +import { CommonProps } from '../common'; -import { IconPropType } from '../icon'; +import { EuiBetaBadge } from '../badge/beta_badge'; + +import { IconType } from '../icon'; const renderContent = ( - children, - label, - betaBadgeLabel, - betaBadgeTooltipContent, - betaBadgeIconType + children: ReactNode, + label: ReactNode, + betaBadgeLabel?: ReactNode, + betaBadgeTooltipContent?: ReactNode, + betaBadgeIconType?: IconType ) => (
{betaBadgeLabel && ( @@ -31,28 +37,32 @@ const renderContent = (
); -const commonPropTypes = { - children: PropTypes.node.isRequired, - label: PropTypes.node.isRequired, +interface EuiKeyPadMenuItemCommonProps { + children: ReactNode; + isDisabled?: boolean; + label: ReactNode; /** * Add a badge to the card to label it as "Beta" or other non-GA state */ - betaBadgeLabel: PropTypes.string, + betaBadgeLabel?: string; /** * Supply an icon type if the badge should just be an icon */ - betaBadgeIconType: IconPropType, + betaBadgeIconType?: IconType; /** * Add a description to the beta badge (will appear in a tooltip) */ - betaBadgeTooltipContent: PropTypes.node, - isDisabled: PropTypes.bool, -}; + betaBadgeTooltipContent?: ReactNode; +} + +export type EuiKeyPadMenuItemProps = CommonProps & + AnchorHTMLAttributes & + EuiKeyPadMenuItemCommonProps; -export const EuiKeyPadMenuItem = ({ +export const EuiKeyPadMenuItem: FunctionComponent = ({ href, isDisabled, label, @@ -86,7 +96,12 @@ export const EuiKeyPadMenuItem = ({ } return ( - ); }; - -EuiKeyPadMenuItemButton.propTypes = { - ...{ - onClick: PropTypes.func, - }, - ...commonPropTypes, -};