Convert EuiScreenReaderOnly and EuiBadgeNotification to TS

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `5.3.0`.
+**Bug fixes**
+
+- Fixed bug in exporting `CommonProps` in TypeScript definitions ([#1341](https://github.com/elastic/eui/pull/1341))
 
 ## [`5.3.0`](https://github.com/elastic/eui/tree/v5.3.0)
 

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

@@ -412,6 +412,34 @@ function getPropTypesForNode(node, optional, state) {
       );
       break;
 
+    // translate an interface to PropTypes
+    case 'TSInterfaceDeclaration':
+      const { body, extends: extensions } = node;
+
+      // if the interface doesn't extend anything use just the interface body
+      if (extensions == null) {
+        propType = getPropTypesForNode(body, true, state);
+      } else {
+        // fake a TSIntersectionType to merge everything together
+        propType = getPropTypesForNode(
+          {
+            type: 'TSIntersectionType',
+            types: [
+              body,
+              ...extensions
+            ]
+          },
+          true,
+          state
+        );
+      }
+      break;
+
+    // simple pass-through wrapper
+    case 'TSExpressionWithTypeArguments':
+      propType = resolveIdentifierToPropTypes(node.expression, state);
+      break;
+
     // an enum member is a simple wrapper around a type definition
     case 'TSEnumMember':
       propType = getPropTypesForNode(node.initializer, optional, state);
@@ -611,13 +639,13 @@ const typeDefinitionExtractors = {
    * @returns Array
    */
   TSInterfaceDeclaration: node => {
-    const { id, body } = node;
+    const { id } = node;
 
     if (id.type !== 'Identifier') {
       throw new Error(`TSInterfaceDeclaration typeDefinitionExtract could not understand id type ${id.type}`);
     }
 
-    return [{ name: id.name, definition: body }];
+    return [{ name: id.name, definition: node }];
   },
 
   /**
@@ -761,12 +789,17 @@ function processComponentDeclaration(typeDefinition, path, state) {
   // import PropTypes library if it isn't already
   const proptypesBinding = getVariableBinding(path, 'PropTypes');
   if (proptypesBinding == null) {
-    const reactBinding = getVariableBinding(path, 'React');
-    if (reactBinding == null) {
-      throw new Error('Cannot import PropTypes module, no React namespace import found');
+    let targetNode;
+    // find the first statement in the program and import PropTypes there
+    targetNode = path;
+    while (targetNode.parentPath.parentPath != null) {
+      targetNode = targetNode.parentPath;
+    }
+    while (targetNode.getPrevSibling().node != null) {
+      targetNode = targetNode.getPrevSibling();
     }
-    const reactImportDeclaration = reactBinding.path.getAncestry()[1];
-    reactImportDeclaration.insertAfter(
+
+    targetNode.insertAfter(
       types.importDeclaration(
         [types.importDefaultSpecifier(types.identifier('PropTypes'))],
         types.stringLiteral('prop-types')

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

@@ -642,11 +642,11 @@ FooComponent.propTypes = {
 };`);
         });
 
-        it('understands React.ReactElement', () => {
+        it('understands React.ReactElement<P>', () => {
           const result = transform(
             `
 import React from 'react';
-interface IFooProps {foo: React.ReactElement}
+interface IFooProps {foo: React.ReactElement<any>}
 const FooComponent: React.SFC<IFooProps> = () => {
   return (<div>Hello World</div>);
 }`,
@@ -665,11 +665,11 @@ FooComponent.propTypes = {
 };`);
         });
 
-        it('understands ReactElement', () => {
+        it('understands ReactElement<P>', () => {
           const result = transform(
             `
 import React from 'react';
-interface IFooProps {foo: ReactElement}
+interface IFooProps {foo: ReactElement<any>}
 const FooComponent: React.SFC<IFooProps> = () => {
   return (<div>Hello World</div>);
 }`,
@@ -892,6 +892,33 @@ FooComponent.propTypes = {
 };`);
       });
 
+      it('intersects extended interfaces', () => {
+        const result = transform(
+          `
+import React from 'react';
+interface iFoo {foo: string}
+interface iBar {bar?: number}
+interface iBuzz extends iFoo, iBar {buzz: boolean} 
+const FooComponent: React.SFC<iBuzz> = () => {
+  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 = {
+  buzz: PropTypes.bool.isRequired,
+  foo: PropTypes.string.isRequired,
+  bar: PropTypes.number
+};`);
+      });
+
     });
 
     describe('union types', () => {

src-docs/src/views/accessibility/screen_reader.js → src-docs/src/views/accessibility/screen_reader.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 
 import {
   EuiScreenReaderOnly,
-} from '../../../../src/components';
-
+} from '../../../../src/components/accessibility/screen_reader';
 
 export default () => (
   <div>
@@ -20,4 +19,3 @@ export default () => (
     </p>
   </div>
 );
-

src-docs/src/views/badge/badge_example.js

@@ -138,3 +138,5 @@ export const BadgeExample = {
     demo: <NotificationBadge />,
   }],
 };
+
+window.EuiNotificationBadge = EuiNotificationBadge;

src-docs/src/views/badge/notification_badge.js → src-docs/src/views/badge/notification_badge.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {
   EuiNotificationBadge,
-} from '../../../../src/components';
+} from '../../../../src/components/badge/notification_badge';
 
 export default () => (
   <EuiNotificationBadge>

src/components/accessibility/screen_reader.tsx

@@ -0,0 +1,16 @@
+import { cloneElement, SFC } from 'react';
+import classNames from 'classnames';
+
+export interface EuiScreenReaderOnlyProps {
+  children: React.ReactElement<any>;
+}
+
+export const EuiScreenReaderOnly: SFC<EuiScreenReaderOnlyProps> = ({ children }) => {
+  const classes = classNames('euiScreenReaderOnly', children.props.className);
+
+  const props = ({ ...children.props, ...{
+      className: classes,
+    } });
+
+  return cloneElement(children, props);
+};

src/components/badge/notification_badge/badge_notification.test.js → src/components/badge/notification_badge/badge_notification.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../../test';
+import { requiredProps } from '../../../test/required_props';
 
 import { EuiNotificationBadge } from './badge_notification';
 

src/components/badge/notification_badge/badge_notification.tsx

@@ -0,0 +1,24 @@
+import React, { HTMLAttributes, SFC } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from '../../common';
+
+export interface EuiNotificationBadgeProps extends CommonProps, HTMLAttributes<HTMLSpanElement> {
+  children?: React.ReactNode;
+}
+
+export const EuiNotificationBadge: SFC<EuiNotificationBadgeProps> = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const classes = classNames('euiNotificationBadge', className);
+
+  return (
+    <span
+      className={classes}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+};

src/components/index.d.ts

@@ -36,5 +36,5 @@
 
 declare module '@elastic/eui' {
   // @ts-ignore
-  export * from '@elastic/eui/components/common';
+  export * from '@elastic/eui/src/components/common';
 }