fix: get rid of build warnings

React doesn't support ES modules yet, it works just because Babel is smart enough. Better use it the "right" way until they decide to support it, otherwise something may break in the future. Also, react-ellipsis was exporting some internal utilities just for testing purposes, now they are kept private.

packages/react-ellipsis/src/index.js

@@ -12,15 +12,9 @@
  *   we may create an hidden `span` with a single letter inside to compute a line height
  */
 
-import React, { Component, createRef, type Node } from 'react';
-
-export function nlToBr(text: string): Array<string | Node> {
-  return text.split(/\n()/g).map((str, i) => (str ? str : <br key={i} />));
-}
-
-export function isWidthDifferentFn(element: ?HTMLElement, width: number) {
-  return !!element && width !== element.clientWidth;
-}
+import * as React from 'react';
+import nlToBr from './nlToBr';
+import isWidthDifferentFn from './isWidthDifferentFn';
 
 type Children = string | null | boolean | void;
 
@@ -43,7 +37,7 @@ type State = {
   bad: ?number,
 };
 
-export default class Ellipsis extends Component<Props, State> {
+export default class Ellipsis extends React.Component<Props, State> {
   props: Props;
 
   static defaultProps = {
@@ -64,7 +58,7 @@ export default class Ellipsis extends Component<Props, State> {
     bad: null,
   };
 
-  element = createRef/*:: <HTMLElement> */();
+  element = React.createRef /*:: <HTMLElement> */();
   width: number = 0;
 
   componentDidMount() {

packages/react-ellipsis/src/index.test.js

@@ -1,7 +1,9 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { mount } from 'enzyme';
-import Ellipsis, { nlToBr, isWidthDifferentFn } from './';
+import Ellipsis from './';
+import nlToBr from './nlToBr';
+import isWidthDifferentFn from './isWidthDifferentFn';
 import ReactDOM from 'react-dom';
 
 it('converts \\n to <br />', () => {

packages/react-ellipsis/src/isWidthDifferentFn.js

@@ -0,0 +1,7 @@
+// @flow
+export default function isWidthDifferentFn(
+  element: ?HTMLElement,
+  width: number
+) {
+  return !!element && width !== element.clientWidth;
+}

packages/react-ellipsis/src/nlToBr.js

@@ -0,0 +1,6 @@
+// @flow
+import * as React from 'react';
+
+export default function nlToBr(text: string): Array<string | React.Node> {
+  return text.split(/\n()/g).map((str, i) => (str ? str : <br key={i} />));
+}

packages/theme/src/index.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { type Node } from 'react';
+import * as React from 'react';
 import { ThemeProvider } from 'emotion-theming';
 
 import themeData from './theme';
@@ -12,7 +12,7 @@ export { default as withFallback } from './withFallback';
 
 type Props = {
   theme?: 'dark' | 'light',
-  children: Node,
+  children: React.Node,
 };
 
 const QuidThemeProvider = ({ theme = 'light', children, ...props }: Props) => (

packages/theme/src/index.test.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { shallow } from 'enzyme';
 import { ThemeProvider } from 'emotion-theming';
 import * as exps from './index';

packages/theme/src/textStyles.test.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { mount } from 'enzyme';