From 6d7c21d65b830dd271deea033c0953653ad2ce9d Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Thu, 6 Dec 2018 13:05:51 -0700 Subject: [PATCH 01/11] Converted EuiFlexGrid, EuiFlexGroup, and EuiFlexItem to typescript. Converted unit test helpers to typescript. --- src/components/common.ts | 3 + ...d.test.js.snap => flex_grid.test.tsx.snap} | 0 ....test.js.snap => flex_group.test.tsx.snap} | 0 ...m.test.js.snap => flex_item.test.tsx.snap} | 6 ++ src/components/flex/flex_grid.js | 65 ----------- .../{flex_grid.test.js => flex_grid.test.tsx} | 0 src/components/flex/flex_grid.tsx | 63 +++++++++++ ...flex_group.test.js => flex_group.test.tsx} | 6 +- .../flex/{flex_group.js => flex_group.tsx} | 58 +++++----- src/components/flex/flex_item.js | 58 ---------- .../{flex_item.test.js => flex_item.test.tsx} | 19 +--- src/components/flex/flex_item.tsx | 60 +++++++++++ src/components/flex/index.d.ts | 101 ------------------ src/components/index.d.ts | 1 - src/index.d.ts | 1 - ...d_test_subject.js => find_test_subject.ts} | 10 +- src/test/index.d.ts | 8 -- src/test/{index.js => index.ts} | 0 src/test/{patch_random.js => patch_random.ts} | 4 +- .../{react_warnings.js => react_warnings.ts} | 12 ++- ...d_snapshot.js => take_mounted_snapshot.ts} | 5 +- .../{time_execution.js => time_execution.ts} | 4 +- 22 files changed, 197 insertions(+), 287 deletions(-) rename src/components/flex/__snapshots__/{flex_grid.test.js.snap => flex_grid.test.tsx.snap} (100%) rename src/components/flex/__snapshots__/{flex_group.test.js.snap => flex_group.test.tsx.snap} (100%) rename src/components/flex/__snapshots__/{flex_item.test.js.snap => flex_item.test.tsx.snap} (94%) delete mode 100644 src/components/flex/flex_grid.js rename src/components/flex/{flex_grid.test.js => flex_grid.test.tsx} (100%) create mode 100644 src/components/flex/flex_grid.tsx rename src/components/flex/{flex_group.test.js => flex_group.test.tsx} (93%) rename src/components/flex/{flex_group.js => flex_group.tsx} (53%) delete mode 100644 src/components/flex/flex_item.js rename src/components/flex/{flex_item.test.js => flex_item.test.tsx} (73%) create mode 100644 src/components/flex/flex_item.tsx delete mode 100644 src/components/flex/index.d.ts rename src/test/{find_test_subject.js => find_test_subject.ts} (65%) delete mode 100644 src/test/index.d.ts rename src/test/{index.js => index.ts} (100%) rename src/test/{patch_random.js => patch_random.ts} (61%) rename src/test/{react_warnings.js => react_warnings.ts} (53%) rename src/test/{take_mounted_snapshot.js => take_mounted_snapshot.ts} (75%) rename src/test/{time_execution.js => time_execution.ts} (76%) diff --git a/src/components/common.ts b/src/components/common.ts index 2d6283530ab..15b5b6e1a54 100644 --- a/src/components/common.ts +++ b/src/components/common.ts @@ -14,6 +14,9 @@ export type RefCallback = ( export type Omit = Pick>; +/** + * Wraps Object.keys with proper typescript definition of the resulting array + */ export function keysOf(obj: T): K[] { return Object.keys(obj) as K[]; } diff --git a/src/components/flex/__snapshots__/flex_grid.test.js.snap b/src/components/flex/__snapshots__/flex_grid.test.tsx.snap similarity index 100% rename from src/components/flex/__snapshots__/flex_grid.test.js.snap rename to src/components/flex/__snapshots__/flex_grid.test.tsx.snap diff --git a/src/components/flex/__snapshots__/flex_group.test.js.snap b/src/components/flex/__snapshots__/flex_group.test.tsx.snap similarity index 100% rename from src/components/flex/__snapshots__/flex_group.test.js.snap rename to src/components/flex/__snapshots__/flex_group.test.tsx.snap diff --git a/src/components/flex/__snapshots__/flex_item.test.js.snap b/src/components/flex/__snapshots__/flex_item.test.tsx.snap similarity index 94% rename from src/components/flex/__snapshots__/flex_item.test.js.snap rename to src/components/flex/__snapshots__/flex_item.test.tsx.snap index 8c4e9cb01d7..302bd8fc395 100644 --- a/src/components/flex/__snapshots__/flex_item.test.js.snap +++ b/src/components/flex/__snapshots__/flex_item.test.tsx.snap @@ -6,6 +6,12 @@ exports[`EuiFlexItem component div is rendered 1`] = ` /> `; +exports[`EuiFlexItem component figure is rendered 1`] = ` +
+`; + exports[`EuiFlexItem component span is rendered 1`] = ` parseInt(columns, 10)); - -export const EuiFlexGrid = ({ children, className, gutterSize, responsive, columns, ...rest }) => { - const classes = classNames( - 'euiFlexGrid', - gutterSizeToClassNameMap[gutterSize], - columnsToClassNameMap[columns], - { - 'euiFlexGrid--responsive': responsive, - }, - className - ); - - return ( -
- {children} -
- ); -}; - -EuiFlexGrid.propTypes = { - children: PropTypes.node, - className: PropTypes.string, - gutterSize: PropTypes.oneOf(GUTTER_SIZES), - /** - * Number of columns to show in the grid. Up to 4. - */ - columns: PropTypes.oneOf(COLUMNS).isRequired, - /** - * Allow grid items display at block level on small screens - */ - responsive: PropTypes.bool, -}; - -EuiFlexGrid.defaultProps = { - gutterSize: 'l', - columns: 0, - responsive: true, -}; - diff --git a/src/components/flex/flex_grid.test.js b/src/components/flex/flex_grid.test.tsx similarity index 100% rename from src/components/flex/flex_grid.test.js rename to src/components/flex/flex_grid.test.tsx diff --git a/src/components/flex/flex_grid.tsx b/src/components/flex/flex_grid.tsx new file mode 100644 index 00000000000..8dbc2115424 --- /dev/null +++ b/src/components/flex/flex_grid.tsx @@ -0,0 +1,63 @@ +import React, { HTMLAttributes, ReactNode, SFC } from 'react'; +import classNames from 'classnames'; +import { CommonProps, keysOf } from '../common'; + +export type FlexGridGutterSize = keyof typeof gutterSizeToClassNameMap; +export type FlexGridColumns = 0 | 1 | 2 | 3 | 4; + +export interface EuiFlexGridProps { + children?: ReactNode; + columns?: FlexGridColumns; + gutterSize?: FlexGridGutterSize; + responsive?: boolean; +} + +const gutterSizeToClassNameMap = { + none: null, + s: 'euiFlexGrid--gutterSmall', + m: 'euiFlexGrid--gutterMedium', + l: 'euiFlexGrid--gutterLarge', + xl: 'euiFlexGrid--gutterXLarge', +}; + +export const GUTTER_SIZES: FlexGridGutterSize[] = keysOf(gutterSizeToClassNameMap); + +const columnsToClassNameMap = { + 0: 'euiFlexGrid--wrap', + 1: 'euiFlexGrid--single', + 2: 'euiFlexGrid--halves', + 3: 'euiFlexGrid--thirds', + 4: 'euiFlexGrid--fourths', +}; + +export const COLUMNS = keysOf(columnsToClassNameMap) + .map(columns => parseInt(columns, 10)) as FlexGridColumns[]; + +export const EuiFlexGrid: SFC< + CommonProps & HTMLAttributes & EuiFlexGridProps +> = ({ children, className, gutterSize, responsive, columns, ...rest }) => { + const classes = classNames( + 'euiFlexGrid', + gutterSize ? gutterSizeToClassNameMap[gutterSize] : undefined, + columns != null ? columnsToClassNameMap[columns] : undefined, + { + 'euiFlexGrid--responsive': responsive, + }, + className + ); + + return ( +
+ {children} +
+ ); +}; + +EuiFlexGrid.defaultProps = { + gutterSize: 'l', + columns: 0, + responsive: true, +}; diff --git a/src/components/flex/flex_group.test.js b/src/components/flex/flex_group.test.tsx similarity index 93% rename from src/components/flex/flex_group.test.js rename to src/components/flex/flex_group.test.tsx index b0151a0980a..5aaa7546a1b 100644 --- a/src/components/flex/flex_group.test.js +++ b/src/components/flex/flex_group.test.tsx @@ -96,10 +96,10 @@ describe('EuiFlexGroup', () => { }); describe('component', () => { - ['div', 'span'].forEach(value => { + ['div', 'span'].forEach((value) => { test(`${value} is rendered`, () => { const component = render( - + ); expect(component) @@ -110,6 +110,8 @@ describe('EuiFlexGroup', () => { ['h2'].forEach(value => { test(`${value} is not rendered`, () => { expect(() => render( + // intentionally passing an invalid value + // @ts-ignore )).toThrow(); }); diff --git a/src/components/flex/flex_group.js b/src/components/flex/flex_group.tsx similarity index 53% rename from src/components/flex/flex_group.js rename to src/components/flex/flex_group.tsx index caecd7b1789..943aa7c6438 100644 --- a/src/components/flex/flex_group.js +++ b/src/components/flex/flex_group.tsx @@ -1,6 +1,24 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { HTMLAttributes, SFC } from 'react'; import classNames from 'classnames'; +import { CommonProps, keysOf } from '../common'; + +export type FlexGroupAlignItems = keyof typeof alignItemsToClassNameMap; +export type FlexGroupComponentType = 'div' | 'span'; +export type FlexGroupDirection = keyof typeof directionToClassNameMap; +export type FlexGroupGutterSize = keyof typeof gutterSizeToClassNameMap; +export type FlexGroupJustifyContent = keyof typeof justifyContentToClassNameMap; + +export interface EuiFlexGroupProps { + alignItems?: FlexGroupAlignItems; + children?: React.ReactNode; + className?: string; + component?: FlexGroupComponentType; + direction?: FlexGroupDirection; + gutterSize?: FlexGroupGutterSize; + justifyContent?: FlexGroupJustifyContent; + responsive?: boolean; + wrap?: boolean; +} const gutterSizeToClassNameMap = { none: null, @@ -11,7 +29,7 @@ const gutterSizeToClassNameMap = { xl: 'euiFlexGroup--gutterExtraLarge', }; -export const GUTTER_SIZES = Object.keys(gutterSizeToClassNameMap); +export const GUTTER_SIZES = keysOf(gutterSizeToClassNameMap); const alignItemsToClassNameMap = { stretch: null, @@ -21,7 +39,7 @@ const alignItemsToClassNameMap = { baseline: 'euiFlexGroup--alignItemsBaseline', }; -export const ALIGN_ITEMS = Object.keys(alignItemsToClassNameMap); +export const ALIGN_ITEMS = keysOf(alignItemsToClassNameMap); const justifyContentToClassNameMap = { flexStart: null, @@ -32,7 +50,7 @@ const justifyContentToClassNameMap = { spaceEvenly: 'euiFlexGroup--justifyContentSpaceEvenly', }; -export const JUSTIFY_CONTENTS = Object.keys(justifyContentToClassNameMap); +export const JUSTIFY_CONTENTS = keysOf(justifyContentToClassNameMap); const directionToClassNameMap = { row: 'euiFlexGroup--directionRow', @@ -41,9 +59,11 @@ const directionToClassNameMap = { columnReverse: 'euiFlexGroup--directionColumnReverse', }; -export const DIRECTIONS = Object.keys(directionToClassNameMap); +export const DIRECTIONS = keysOf(directionToClassNameMap); -export const EuiFlexGroup = ({ +export const EuiFlexGroup: SFC< + CommonProps & HTMLAttributes & EuiFlexGroupProps +> = ({ children, className, gutterSize, @@ -52,15 +72,15 @@ export const EuiFlexGroup = ({ justifyContent, direction, wrap, - component: Component, - ...rest, + component: Component = 'div', + ...rest }) => { const classes = classNames( 'euiFlexGroup', - gutterSizeToClassNameMap[gutterSize], - alignItemsToClassNameMap[alignItems], - justifyContentToClassNameMap[justifyContent], - directionToClassNameMap[direction], + gutterSize ? gutterSizeToClassNameMap[gutterSize] : undefined, + alignItems ? alignItemsToClassNameMap[alignItems] : undefined, + justifyContent ? justifyContentToClassNameMap[justifyContent] : undefined, + direction ? directionToClassNameMap[direction] : undefined, { 'euiFlexGroup--responsive': responsive, 'euiFlexGroup--wrap': wrap, @@ -78,18 +98,6 @@ export const EuiFlexGroup = ({ ); }; -EuiFlexGroup.propTypes = { - alignItems: PropTypes.oneOf(ALIGN_ITEMS), - children: PropTypes.node, - className: PropTypes.string, - component: PropTypes.oneOf(['div', 'span']), - direction: PropTypes.oneOf(DIRECTIONS), - gutterSize: PropTypes.oneOf(GUTTER_SIZES), - justifyContent: PropTypes.oneOf(JUSTIFY_CONTENTS), - responsive: PropTypes.bool, - wrap: PropTypes.bool, -}; - EuiFlexGroup.defaultProps = { gutterSize: 'l', alignItems: 'stretch', diff --git a/src/components/flex/flex_item.js b/src/components/flex/flex_item.js deleted file mode 100644 index e6544137973..00000000000 --- a/src/components/flex/flex_item.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -export const GROW_SIZES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; - -export const EuiFlexItem = ({ - children, - className, - grow, - component: Component, - ...rest, -}) => { - const classes = classNames( - 'euiFlexItem', - { - 'euiFlexItem--flexGrowZero': !grow, - [`euiFlexItem--flexGrow${grow}`]: GROW_SIZES.indexOf(grow) >= 0 - }, - className - ); - - return ( - - {children} - - ); -}; - -EuiFlexItem.propTypes = { - children: PropTypes.node, - grow: growPropType, - component: PropTypes.oneOf(['div', 'span', 'figure']), -}; - -function growPropType(props, propName, componentName) { - const value = props[propName]; - - const validValues = [ - null, undefined, - true, false, - ...GROW_SIZES - ]; - - if (validValues.indexOf(value) === -1) { - return new Error( - `Prop \`${propName}\` supplied to \`${componentName}\` must be a boolean or an integer between 1 and 10.` - ); - } -} - -EuiFlexItem.defaultProps = { - grow: true, - component: 'div', -}; diff --git a/src/components/flex/flex_item.test.js b/src/components/flex/flex_item.test.tsx similarity index 73% rename from src/components/flex/flex_item.test.js rename to src/components/flex/flex_item.test.tsx index 2a95aa02f4a..ba43cf2e832 100644 --- a/src/components/flex/flex_item.test.js +++ b/src/components/flex/flex_item.test.tsx @@ -8,6 +8,7 @@ import { import { EuiFlexItem, + FlexItemComponentType, GROW_SIZES, } from './flex_item'; @@ -24,20 +25,6 @@ describe('EuiFlexItem', () => { .toMatchSnapshot(); }); - test('tests the grow prop correctly', () => { - const propType = EuiFlexItem.propTypes.grow; - - const validValues = GROW_SIZES; - const invalidValues = ['true', 'false', '1', 0]; - - validValues.forEach(value => - expect(propType({ grow: value }, `grow`)).toBe(undefined) - ); - invalidValues.forEach(value => - expect(propType({ grow: value }, `grow`) instanceof Error).toBe(true) - ); - }); - describe('grow', () => { GROW_SIZES.concat([true, false]).forEach(value => { test(`${value} is rendered`, () => { @@ -52,7 +39,7 @@ describe('EuiFlexItem', () => { }); describe('component', () => { - ['div', 'span'].forEach(value => { + (['div', 'span', 'figure'] as FlexItemComponentType[]).forEach(value => { test(`${value} is rendered`, () => { const component = render( @@ -66,6 +53,8 @@ describe('EuiFlexItem', () => { ['h2'].forEach(value => { test(`${value} is not rendered`, () => { expect(() => render( + // intentionally passing an invalid value + // @ts-ignore )).toThrow(); }); diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx new file mode 100644 index 00000000000..cf997123076 --- /dev/null +++ b/src/components/flex/flex_item.tsx @@ -0,0 +1,60 @@ +import React, { HTMLAttributes, ReactNode, SFC } from 'react'; +import classNames from 'classnames'; +import { CommonProps } from '../common'; + +export type FlexItemGrowSize = + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | true + | false + | null; +export type FlexItemComponentType = 'div' | 'span' | 'figure'; + +export interface EuiFlexItemProps { + children?: ReactNode; + grow?: FlexItemGrowSize; + component?: FlexItemComponentType; +} + +export const GROW_SIZES: FlexItemGrowSize[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; + +export const EuiFlexItem: SFC< + CommonProps & HTMLAttributes & EuiFlexItemProps +> = ({ + children, + className, + grow, + component: Component = 'div', + ...rest +}) => { + const classes = classNames( + 'euiFlexItem', + { + 'euiFlexItem--flexGrowZero': !grow, + [`euiFlexItem--flexGrow${grow}`]: typeof grow === 'number' ? GROW_SIZES.indexOf(grow) >= 0 : undefined, + }, + className + ); + + return ( + + {children} + + ); +}; + +EuiFlexItem.defaultProps = { + grow: true, + component: 'div', +}; diff --git a/src/components/flex/index.d.ts b/src/components/flex/index.d.ts deleted file mode 100644 index 38f89dac7c4..00000000000 --- a/src/components/flex/index.d.ts +++ /dev/null @@ -1,101 +0,0 @@ -import { CommonProps } from '../common'; - -import { SFC, HTMLAttributes } from 'react'; - -declare module '@elastic/eui' { - /** - * flex grid type defs - * - * @see './flex_grid.js' - */ - - export type FlexGridGutterSize = 'none' | 's' | 'm' | 'l' | 'xl'; - export type FlexGridColumns = 0 | 1 | 2 | 3 | 4; - - export interface EuiFlexGridProps { - columns?: FlexGridColumns; - gutterSize?: FlexGridGutterSize; - } - - export const EuiFlexGrid: SFC< - CommonProps & HTMLAttributes & EuiFlexGridProps - >; - - /** - * flex group type defs - * - * @see './flex_group.js' - */ - - export type FlexGroupAlignItems = - | 'stretch' - | 'flexStart' - | 'flexEnd' - | 'center' - | 'baseline'; - export type FlexGroupComponentType = 'div' | 'span'; - export type FlexGroupDirection = - | 'column' - | 'columnReverse' - | 'row' - | 'rowReverse'; - export type FlexGroupGutterSize = 'none' | 'xs' | 's' | 'm' | 'l' | 'xl'; - export type FlexGroupJustifyContent = - | 'flexStart' - | 'flexEnd' - | 'center' - | 'spaceBetween' - | 'spaceAround' - | 'spaceEvenly'; - - export interface EuiFlexGroupProps { - alignItems?: FlexGroupAlignItems; - children?: React.ReactNode; - className?: string; - component?: FlexGroupComponentType; - direction?: FlexGroupDirection; - gutterSize?: FlexGroupGutterSize; - justifyContent?: FlexGroupJustifyContent; - responsive?: boolean; - wrap?: boolean; - } - - export const EuiFlexGroup: SFC< - CommonProps & - HTMLAttributes & - EuiFlexGroupProps - >; - - /** - * flex item type defs - * - * @see './flex_item.js' - */ - - export type FlexItemGrowSize = - | 1 - | 2 - | 3 - | 4 - | 5 - | 6 - | 7 - | 8 - | 9 - | 10 - | true - | false - | null; - export type FlexItemComponentType = 'div' | 'span'; - - export interface EuiFlexItemProps { - grow?: FlexItemGrowSize; - component?: FlexItemComponentType; - } - - export const EuiFlexItem: SFC< - CommonProps & - HTMLAttributes & - EuiFlexItemProps - >; -} diff --git a/src/components/index.d.ts b/src/components/index.d.ts index 7a5d0e37230..a46d3f0b873 100644 --- a/src/components/index.d.ts +++ b/src/components/index.d.ts @@ -10,7 +10,6 @@ /// /// /// -/// /// /// /// diff --git a/src/index.d.ts b/src/index.d.ts index f5225f47aaa..4355a412ee7 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1,4 +1,3 @@ /// /// /// -/// diff --git a/src/test/find_test_subject.js b/src/test/find_test_subject.ts similarity index 65% rename from src/test/find_test_subject.js rename to src/test/find_test_subject.ts index 3f533338545..77f87bbb46e 100644 --- a/src/test/find_test_subject.js +++ b/src/test/find_test_subject.ts @@ -1,9 +1,17 @@ +import { ReactWrapper, ShallowWrapper } from 'enzyme'; + +type FindTestSubject = ( + mountedComponent: T, + testSubjectSelector: string +) => ReturnType; + /** * Find node which matches a specific test subject selector. Returns ReactWrappers around DOM element, * https://github.com/airbnb/enzyme/tree/master/docs/api/ReactWrapper. * Common use cases include calling simulate or getDOMNode on the returned ReactWrapper. */ -export const findTestSubject = (mountedComponent, testSubjectSelector) => { +export const findTestSubject: FindTestSubject = + (mountedComponent, testSubjectSelector) => { const testSubject = mountedComponent.find(`[data-test-subj="${testSubjectSelector}"]`); // Restores Enzyme 2's find behavior, which was to only return ReactWrappers around DOM elements. diff --git a/src/test/index.d.ts b/src/test/index.d.ts deleted file mode 100644 index e75d40657aa..00000000000 --- a/src/test/index.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ShallowWrapper, ReactWrapper } from 'enzyme'; - -declare module '@elastic/eui' { - export function findTestSubject ( - mountedComponent: T, - testSubjectSelector: string - ): ReturnType; -} diff --git a/src/test/index.js b/src/test/index.ts similarity index 100% rename from src/test/index.js rename to src/test/index.ts diff --git a/src/test/patch_random.js b/src/test/patch_random.ts similarity index 61% rename from src/test/patch_random.js rename to src/test/patch_random.ts index de18b8023de..35012830c5a 100644 --- a/src/test/patch_random.js +++ b/src/test/patch_random.ts @@ -1,4 +1,4 @@ -const _mathRandom = Math.random; +const originalMathRandom = Math.random; export function patchRandom() { let x = 0; @@ -6,5 +6,5 @@ export function patchRandom() { } export function unpatchRandom() { - Math.random = _mathRandom; + Math.random = originalMathRandom; } diff --git a/src/test/react_warnings.js b/src/test/react_warnings.ts similarity index 53% rename from src/test/react_warnings.js rename to src/test/react_warnings.ts index 9917990b4db..af20001fdf6 100644 --- a/src/test/react_warnings.js +++ b/src/test/react_warnings.ts @@ -1,3 +1,5 @@ +/* tslint:disable:no-console */ + /* Use this utility to throw errors whenever React complains via the console about things like invalid propTypes. This lets us assert that a propType @@ -9,14 +11,14 @@ afterAll(stopThrowingReactWarnings); */ -const consoleWarn = console.warn; // eslint-disable-line no-console -const consoleError = console.error; // eslint-disable-line no-console +const consoleWarn = console.warn; +const consoleError = console.error; export const startThrowingReactWarnings = () => { - console.warn = console.error = (msg) => { throw msg; }; // eslint-disable-line no-console + console.warn = console.error = (msg: any) => { throw msg; }; }; export const stopThrowingReactWarnings = () => { - console.warn = consoleWarn; // eslint-disable-line no-console - console.error = consoleError; // eslint-disable-line no-console + console.warn = consoleWarn; + console.error = consoleError; }; diff --git a/src/test/take_mounted_snapshot.js b/src/test/take_mounted_snapshot.ts similarity index 75% rename from src/test/take_mounted_snapshot.js rename to src/test/take_mounted_snapshot.ts index cce0fbc8740..59d00d02342 100644 --- a/src/test/take_mounted_snapshot.js +++ b/src/test/take_mounted_snapshot.ts @@ -1,10 +1,13 @@ +import { ReactWrapper } from 'enzyme'; +import { Component } from 'react'; + /** * Use this function to generate a Jest snapshot of components that have been fully rendered * using Enzyme's `mount` method. Typically, a mounted component will result in a snapshot * containing both React components and HTML elements. This function removes the React components, * leaving only HTML elements in the snapshot. */ -export const takeMountedSnapshot = mountedComponent => { +export const takeMountedSnapshot = (mountedComponent: ReactWrapper<{}, {}, Component>) => { const html = mountedComponent.html(); const template = document.createElement('template'); template.innerHTML = html; diff --git a/src/test/time_execution.js b/src/test/time_execution.ts similarity index 76% rename from src/test/time_execution.js rename to src/test/time_execution.ts index 582e03d3997..22d63ca0c18 100644 --- a/src/test/time_execution.js +++ b/src/test/time_execution.ts @@ -1,4 +1,4 @@ -export function timeExecution(fn) { +export function timeExecution(fn: () => void) { const start = process.hrtime(); fn(); const [seconds, nanoseconds] = process.hrtime(start); @@ -6,7 +6,7 @@ export function timeExecution(fn) { return milliseconds; } -export function benchmarkFunction(fn, warmupRuns = 3, benchmarkRuns = 3) { +export function benchmarkFunction(fn: () => void, warmupRuns = 3, benchmarkRuns = 3) { // warmup v8 optimizations, cache, etc for (let i = 0; i < warmupRuns; i++) { fn(); From 3b4846cfcfb73e14bded2231996b43e999388140 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Mon, 10 Dec 2018 14:42:40 -0700 Subject: [PATCH 02/11] Converted flex/index.js to TS --- src/components/flex/{index.js => index.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/flex/{index.js => index.ts} (100%) diff --git a/src/components/flex/index.js b/src/components/flex/index.ts similarity index 100% rename from src/components/flex/index.js rename to src/components/flex/index.ts From 4914d77de6d6089b9a3c14c50aefd732c8c03ffd Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Mon, 10 Dec 2018 14:57:35 -0700 Subject: [PATCH 03/11] Converted EuiDescriptionList* to typescript --- .../description_list.test.js.snap | 88 ------------------- .../description_list_description.test.js.snap | 11 --- .../description_list_title.test.js.snap | 11 --- ...list.test.js => description_list.test.tsx} | 0 ...scription_list.js => description_list.tsx} | 75 ++++++++-------- ... => description_list_description.test.tsx} | 0 ...on.js => description_list_description.tsx} | 11 +-- ...est.js => description_list_title.test.tsx} | 0 ...st_title.js => description_list_title.tsx} | 11 +-- src/components/description_list/index.d.ts | 32 ------- .../description_list/{index.js => index.ts} | 0 src/components/index.d.ts | 1 - 12 files changed, 41 insertions(+), 199 deletions(-) delete mode 100644 src/components/description_list/__snapshots__/description_list.test.js.snap delete mode 100644 src/components/description_list/__snapshots__/description_list_description.test.js.snap delete mode 100644 src/components/description_list/__snapshots__/description_list_title.test.js.snap rename src/components/description_list/{description_list.test.js => description_list.test.tsx} (100%) rename src/components/description_list/{description_list.js => description_list.tsx} (61%) rename src/components/description_list/{description_list_description.test.js => description_list_description.test.tsx} (100%) rename src/components/description_list/{description_list_description.js => description_list_description.tsx} (54%) rename src/components/description_list/{description_list_title.test.js => description_list_title.test.tsx} (100%) rename src/components/description_list/{description_list_title.js => description_list_title.tsx} (55%) delete mode 100644 src/components/description_list/index.d.ts rename src/components/description_list/{index.js => index.ts} (100%) diff --git a/src/components/description_list/__snapshots__/description_list.test.js.snap b/src/components/description_list/__snapshots__/description_list.test.js.snap deleted file mode 100644 index 69bf3502b75..00000000000 --- a/src/components/description_list/__snapshots__/description_list.test.js.snap +++ /dev/null @@ -1,88 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiDescriptionList is rendered 1`] = ` -
- Content -
-`; - -exports[`EuiDescriptionList props align center is rendered 1`] = ` -
-`; - -exports[`EuiDescriptionList props align left is rendered 1`] = ` -
-`; - -exports[`EuiDescriptionList props compressed is rendered 1`] = ` -
-`; - -exports[`EuiDescriptionList props listItems is rendered as strings and elements 1`] = ` -
-
- Title 1 -
-
- Description 1 -
-
- - Title 2 - -
-
- - Description 2 - -
-
- Title 3 -
-
- Description 3 -
-
-`; - -exports[`EuiDescriptionList props type column is rendered 1`] = ` -
-`; - -exports[`EuiDescriptionList props type inline is rendered 1`] = ` -
-`; - -exports[`EuiDescriptionList props type row is rendered 1`] = ` -
-`; diff --git a/src/components/description_list/__snapshots__/description_list_description.test.js.snap b/src/components/description_list/__snapshots__/description_list_description.test.js.snap deleted file mode 100644 index 73afd8b550d..00000000000 --- a/src/components/description_list/__snapshots__/description_list_description.test.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiDescriptionListDescription is rendered 1`] = ` -
- Content -
-`; diff --git a/src/components/description_list/__snapshots__/description_list_title.test.js.snap b/src/components/description_list/__snapshots__/description_list_title.test.js.snap deleted file mode 100644 index 0b93e495fdf..00000000000 --- a/src/components/description_list/__snapshots__/description_list_title.test.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiDescriptionListTitle is rendered 1`] = ` -
- Content -
-`; diff --git a/src/components/description_list/description_list.test.js b/src/components/description_list/description_list.test.tsx similarity index 100% rename from src/components/description_list/description_list.test.js rename to src/components/description_list/description_list.test.tsx diff --git a/src/components/description_list/description_list.js b/src/components/description_list/description_list.tsx similarity index 61% rename from src/components/description_list/description_list.js rename to src/components/description_list/description_list.tsx index aeb31bf709d..09dbf02d4ac 100644 --- a/src/components/description_list/description_list.js +++ b/src/components/description_list/description_list.tsx @@ -1,5 +1,4 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { HTMLAttributes, ReactNode, SFC } from 'react'; import classNames from 'classnames'; import { @@ -9,6 +8,7 @@ import { import { EuiDescriptionListDescription, } from './description_list_description'; +import { CommonProps, keysOf } from '../common'; const typesToClassNameMap = { row: 'euiDescriptionList--row', @@ -16,23 +16,48 @@ const typesToClassNameMap = { inline: 'euiDescriptionList--inline', }; -export const TYPES = Object.keys(typesToClassNameMap); +export type EuiDescriptionListType = 'row' | 'column' | 'inline'; +export type EuiDescriptionListAlignment = 'center' | 'left'; +export type EuiDescriptionListTextStyle = 'normal' | 'reverse'; + +export interface EuiDescriptionListProps { + listItems?: Array<{ title: ReactNode, description: ReactNode }>; + /** + * Text alignment + */ + align?: EuiDescriptionListAlignment; + /** + * Smaller text and condensed spacing + */ + compressed?: boolean; + /** + * How should the content be styled, by default + * this will emphasize the title + */ + textStyle?: EuiDescriptionListTextStyle; + /** + * How each item should be layed out + */ + type?: EuiDescriptionListType; +} + +export const TYPES = keysOf(typesToClassNameMap); const alignmentsToClassNameMap = { center: 'euiDescriptionList--center', left: '', }; -export const ALIGNMENTS = Object.keys(alignmentsToClassNameMap); +export const ALIGNMENTS = keysOf(alignmentsToClassNameMap); const textStylesToClassNameMap = { normal: '', reverse: 'euiDescriptionList--reverse', }; -export const TEXT_STYLES = Object.keys(textStylesToClassNameMap); +export const TEXT_STYLES = keysOf(textStylesToClassNameMap); -export const EuiDescriptionList = ({ +export const EuiDescriptionList: SFC & EuiDescriptionListProps> = ({ children, className, listItems, @@ -44,9 +69,9 @@ export const EuiDescriptionList = ({ }) => { const classes = classNames( 'euiDescriptionList', - typesToClassNameMap[type], - alignmentsToClassNameMap[align], - textStylesToClassNameMap[textStyle], + type ? typesToClassNameMap[type] : undefined, + align ? alignmentsToClassNameMap[align] : undefined, + textStyle ? textStylesToClassNameMap[textStyle] : undefined, { 'euiDescriptionList--compressed': compressed, }, @@ -64,7 +89,7 @@ export const EuiDescriptionList = ({ {item.description} - + , ]; }) ); @@ -82,36 +107,6 @@ export const EuiDescriptionList = ({ ); }; -EuiDescriptionList.propTypes = { - listItems: PropTypes.arrayOf(PropTypes.shape({ - title: PropTypes.node, - description: PropTypes.node, - })), - children: PropTypes.node, - className: PropTypes.string, - - /** - * Text alignment - */ - align: PropTypes.oneOf(ALIGNMENTS), - - /** - * Smaller text and condensed spacing - */ - compressed: PropTypes.bool, - - /** - * How should the content be styled, by default - * this will emphasize the title - */ - textStyle: PropTypes.oneOf(TEXT_STYLES), - - /** - * How each item should be layed out - */ - type: PropTypes.oneOf(TYPES), -}; - EuiDescriptionList.defaultProps = { align: 'left', compressed: false, diff --git a/src/components/description_list/description_list_description.test.js b/src/components/description_list/description_list_description.test.tsx similarity index 100% rename from src/components/description_list/description_list_description.test.js rename to src/components/description_list/description_list_description.test.tsx diff --git a/src/components/description_list/description_list_description.js b/src/components/description_list/description_list_description.tsx similarity index 54% rename from src/components/description_list/description_list_description.js rename to src/components/description_list/description_list_description.tsx index db59511b026..4e6f14fc0f3 100644 --- a/src/components/description_list/description_list_description.js +++ b/src/components/description_list/description_list_description.tsx @@ -1,8 +1,8 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { HTMLAttributes, SFC } from 'react'; import classNames from 'classnames'; +import { CommonProps } from '../common'; -export const EuiDescriptionListDescription = ({ +export const EuiDescriptionListDescription: SFC> = ({ children, className, ...rest @@ -18,8 +18,3 @@ export const EuiDescriptionListDescription = ({ ); }; - -EuiDescriptionListDescription.propTypes = { - children: PropTypes.node, - className: PropTypes.string, -}; diff --git a/src/components/description_list/description_list_title.test.js b/src/components/description_list/description_list_title.test.tsx similarity index 100% rename from src/components/description_list/description_list_title.test.js rename to src/components/description_list/description_list_title.test.tsx diff --git a/src/components/description_list/description_list_title.js b/src/components/description_list/description_list_title.tsx similarity index 55% rename from src/components/description_list/description_list_title.js rename to src/components/description_list/description_list_title.tsx index 0889a21c496..a8022c2001c 100644 --- a/src/components/description_list/description_list_title.js +++ b/src/components/description_list/description_list_title.tsx @@ -1,8 +1,8 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { HTMLAttributes, SFC } from 'react'; import classNames from 'classnames'; +import { CommonProps } from '../common'; -export const EuiDescriptionListTitle = ({ +export const EuiDescriptionListTitle: SFC> = ({ children, className, ...rest @@ -18,8 +18,3 @@ export const EuiDescriptionListTitle = ({ ); }; - -EuiDescriptionListTitle.propTypes = { - children: PropTypes.node, - className: PropTypes.string, -}; diff --git a/src/components/description_list/index.d.ts b/src/components/description_list/index.d.ts deleted file mode 100644 index c4290953721..00000000000 --- a/src/components/description_list/index.d.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { HTMLAttributes, Component, ReactNode } from 'react'; -import { CommonProps } from '../common'; - -declare module '@elastic/eui' { - export type EuiDescriptionListType = 'row' | 'column' | 'inline'; - export type EuiDescriptionListAlignment = 'center' | 'left'; - export type EuiDescriptionListTextStyle = 'normal' | 'reverse'; - - export interface EuiDescriptionListProps { - listItems?: Array<{ title: ReactNode, description: ReactNode }>; - align?: EuiDescriptionListAlignment; - compressed?: boolean; - textStyle?: EuiDescriptionListTextStyle; - type?: EuiDescriptionListType; - } - - export class EuiDescriptionList extends Component< - CommonProps & HTMLAttributes & EuiDescriptionListProps - > {} - - export interface EuiDescriptionListTitleProps {} - - export class EuiDescriptionListTitle extends Component< - CommonProps & HTMLAttributes & EuiDescriptionListTitleProps - > {} - - export interface EuiDescriptionListDescriptionProps {} - - export class EuiDescriptionListDescription extends Component< - CommonProps & HTMLAttributes & EuiDescriptionListDescriptionProps - > {} -} diff --git a/src/components/description_list/index.js b/src/components/description_list/index.ts similarity index 100% rename from src/components/description_list/index.js rename to src/components/description_list/index.ts diff --git a/src/components/index.d.ts b/src/components/index.d.ts index a46d3f0b873..f19957a91b8 100644 --- a/src/components/index.d.ts +++ b/src/components/index.d.ts @@ -7,7 +7,6 @@ /// /// /// -/// /// /// /// From f690a0065709cec29a865a76ed5f448f90aeda2d Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Tue, 11 Dec 2018 11:29:15 -0700 Subject: [PATCH 04/11] Converted EuiFlex* docs to typescript --- .../{component_span.js => component_span.tsx} | 5 +- .../flex/{direction.js => direction.tsx} | 5 +- .../flex/{flex_grid.js => flex_grid.tsx} | 5 +- ..._grid_columns.js => flex_grid_columns.tsx} | 5 +- .../flex/{flex_group.js => flex_group.tsx} | 7 +- ...flex_group_wrap.js => flex_group_wrap.tsx} | 5 +- ..._grow_numeric.js => flex_grow_numeric.tsx} | 7 +- .../{flex_grow_zero.js => flex_grow_zero.tsx} | 5 +- .../flex/{flex_gutter.js => flex_gutter.tsx} | 7 +- .../flex/{flex_items.js => flex_items.tsx} | 5 +- .../flex/{flex_nest.js => flex_nest.tsx} | 8 +- ...flex_responsive.js => flex_responsive.tsx} | 10 +-- .../description_list.test.tsx.snap | 88 +++++++++++++++++++ ...description_list_description.test.tsx.snap | 11 +++ .../description_list_title.test.tsx.snap | 11 +++ src/components/flex/flex_item.tsx | 16 ++++ 16 files changed, 144 insertions(+), 56 deletions(-) rename src-docs/src/views/flex/{component_span.js => component_span.tsx} (83%) rename src-docs/src/views/flex/{direction.js => direction.tsx} (80%) rename src-docs/src/views/flex/{flex_grid.js => flex_grid.tsx} (89%) rename src-docs/src/views/flex/{flex_grid_columns.js => flex_grid_columns.tsx} (85%) rename src-docs/src/views/flex/{flex_group.js => flex_group.tsx} (70%) rename src-docs/src/views/flex/{flex_group_wrap.js => flex_group_wrap.tsx} (82%) rename src-docs/src/views/flex/{flex_grow_numeric.js => flex_grow_numeric.tsx} (82%) rename src-docs/src/views/flex/{flex_grow_zero.js => flex_grow_zero.tsx} (74%) rename src-docs/src/views/flex/{flex_gutter.js => flex_gutter.tsx} (91%) rename src-docs/src/views/flex/{flex_items.js => flex_items.tsx} (77%) rename src-docs/src/views/flex/{flex_nest.js => flex_nest.tsx} (83%) rename src-docs/src/views/flex/{flex_responsive.js => flex_responsive.tsx} (74%) create mode 100644 src/components/description_list/__snapshots__/description_list.test.tsx.snap create mode 100644 src/components/description_list/__snapshots__/description_list_description.test.tsx.snap create mode 100644 src/components/description_list/__snapshots__/description_list_title.test.tsx.snap diff --git a/src-docs/src/views/flex/component_span.js b/src-docs/src/views/flex/component_span.tsx similarity index 83% rename from src-docs/src/views/flex/component_span.js rename to src-docs/src/views/flex/component_span.tsx index cc7fb8b160d..64aaa3079d5 100644 --- a/src-docs/src/views/flex/component_span.js +++ b/src-docs/src/views/flex/component_span.tsx @@ -1,9 +1,6 @@ import React from 'react'; -import { - EuiFlexGroup, - EuiFlexItem, -} from '../../../../src/components'; +import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex'; export default () => (