Convert EuiFlex* and EuiDescriptionList* to typescript

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `5.7.0`.
+- Converted `EuiFlexGrid`, `EuiFlexGroup`, `EuiFlexItem`, `EuiDescriptionList`, `EuiDescriptionListTitle`, and `EuiDescriptionListDescription` to TypeScript ([#1365](https://github.com/elastic/eui/pull/1365))
 
 ## [`5.7.0`](https://github.com/elastic/eui/tree/v5.7.0)
 

scripts/babel/proptypes-from-ts-props/index.js

@@ -355,7 +355,7 @@ function getPropTypesForNode(node, optional, state) {
 
       const reducedUnionTypes = tsUnionTypes.reduce(
         (foundTypes, tsUnionType) => {
-          if (types.isLiteral(tsUnionType)) {
+          if (types.isLiteral(tsUnionType) || (types.isIdentifier(tsUnionType) && tsUnionType.name === 'undefined')) {
             if (foundTypes.oneOfPropType == null) {
               foundTypes.oneOfPropType = types.arrayExpression([]);
               foundTypes.unionTypes.push(
@@ -511,6 +511,16 @@ function getPropTypesForNode(node, optional, state) {
       optional = true; // cannot call `.isRequired` on a boolean literal
       break;
 
+    case 'TSNullKeyword':
+      propType =  types.nullLiteral();
+      optional = true; // cannot call `.isRequired` on a boolean literal
+      break;
+
+    case 'TSUndefinedKeyword':
+      propType =  types.identifier('undefined');
+      optional = true; // cannot call `.isRequired` on a boolean literal
+      break;
+
     // very helpful debugging code
     // default:
     //   debugger;

scripts/babel/proptypes-from-ts-props/index.test.js

@@ -977,6 +977,29 @@ FooComponent.propTypes = {
 };`);
       });
 
+      it('treats null and undefined as literals', () => {
+        const result = transform(
+          `
+import React from 'react';
+interface IFooProps {bar: 'five' | null | undefined}
+const FooComponent: React.SFC<IFooProps> = () => {
+  return (<div>Hello World</div>);
+}`,
+          babelOptions
+        );
+
+        expect(result.code).toBe(`import React from 'react';
+import PropTypes from "prop-types";
+
+const FooComponent = () => {
+  return <div>Hello World</div>;
+};
+
+FooComponent.propTypes = {
+  bar: PropTypes.oneOf(["five", null, undefined]).isRequired
+};`);
+      });
+
     });
 
     describe('array / arrayOf propTypes', () => {

src-docs/src/views/flex/component_span.js → 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 () => (
   <button onClick={() => { window.alert('click'); }}>

src-docs/src/views/flex/direction.js → src-docs/src/views/flex/direction.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
 
 export default () => (
   <EuiFlexGroup direction="column">

src-docs/src/views/flex/flex_grid.js → src-docs/src/views/flex/flex_grid.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  EuiFlexGrid,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGrid, EuiFlexItem } from '../../../../src/components/flex';
 
 const ITEM_STYLE = { width: '300px' };
 

src-docs/src/views/flex/flex_grid_columns.js → src-docs/src/views/flex/flex_grid_columns.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  EuiFlexGrid,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGrid, EuiFlexItem } from '../../../../src/components/flex';
 
 export default () => (
   <div>

src-docs/src/views/flex/flex_group.js → src-docs/src/views/flex/flex_group.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+import { EuiSpacer } from '../../../../src/components/spacer';
 
 export default () => (
   <EuiFlexGroup>

src-docs/src/views/flex/flex_group_wrap.js → src-docs/src/views/flex/flex_group_wrap.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
 
 export default () => (
   <EuiFlexGroup wrap>

src-docs/src/views/flex/flex_grow_numeric.js → src-docs/src/views/flex/flex_grow_numeric.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+import { EuiSpacer } from '../../../../src/components/spacer';
 
 export default () => (
   <div>

src-docs/src/views/flex/flex_grow_zero.js → src-docs/src/views/flex/flex_grow_zero.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
 
 export default () => (
   <div>

src-docs/src/views/flex/flex_gutter.js → src-docs/src/views/flex/flex_gutter.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+import { EuiSpacer } from '../../../../src/components/spacer';
 
 export default () => (
   <div>

src-docs/src/views/flex/flex_items.js → src-docs/src/views/flex/flex_items.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
 
 export default () => (
   <EuiFlexGroup>

src-docs/src/views/flex/flex_nest.js → src-docs/src/views/flex/flex_nest.tsx

@@ -1,11 +1,7 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFlexGrid,
-  EuiSpacer,
-} from '../../../../src/components';
+import { EuiFlexGrid, EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+import { EuiSpacer } from '../../../../src/components/spacer';
 
 export default () => (
   <div>

src-docs/src/views/flex/flex_responsive.js → src-docs/src/views/flex/flex_responsive.tsx

@@ -1,11 +1,7 @@
 import React from 'react';
-
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiSpacer,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+import { EuiSpacer } from '../../../../src/components/spacer';
+import { EuiIcon } from '../../../../src/components/icon';
 
 export default () => (
   <div>

src/components/common.ts

@@ -14,6 +14,9 @@ export type RefCallback<Element extends HTMLElement> = (
 
 export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 
+/**
+ * Wraps Object.keys with proper typescript definition of the resulting array
+ */
 export function keysOf<T, K extends keyof T>(obj: T): K[] {
   return Object.keys(obj) as K[];
 }

src/components/description_list/description_list.js → 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,30 +8,56 @@ import {
 import {
   EuiDescriptionListDescription,
 } from './description_list_description';
+import { CommonProps, keysOf } from '../common';
+
+export type EuiDescriptionListType = keyof typeof typesToClassNameMap;
+export type EuiDescriptionListAlignment = keyof typeof alignmentsToClassNameMap;
+export type EuiDescriptionListTextStyle = keyof typeof textStylesToClassNameMap;
+
+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;
+}
 
 const typesToClassNameMap = {
   row: 'euiDescriptionList--row',
   column: 'euiDescriptionList--column',
   inline: 'euiDescriptionList--inline',
 };
 
-export const TYPES = Object.keys(typesToClassNameMap);
+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<CommonProps & HTMLAttributes<HTMLDListElement> & 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 = ({
 
           <EuiDescriptionListDescription key={`description-${index}`}>
             {item.description}
-          </EuiDescriptionListDescription>
+          </EuiDescriptionListDescription>,
         ];
       })
     );
@@ -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,

src/components/description_list/description_list_description.js → 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<CommonProps & HTMLAttributes<HTMLElement>> = ({
   children,
   className,
   ...rest
@@ -18,8 +18,3 @@ export const EuiDescriptionListDescription = ({
     </dd>
   );
 };
-
-EuiDescriptionListDescription.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-};

src/components/description_list/description_list_title.js → 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<CommonProps & HTMLAttributes<HTMLElement>> = ({
   children,
   className,
   ...rest
@@ -18,8 +18,3 @@ export const EuiDescriptionListTitle = ({
     </dt>
   );
 };
-
-EuiDescriptionListTitle.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-};