refactor(tooltip): replace react-tooltip with custom implementation

blockchain · Jan 11, 2019 · d53457a · d53457a
1 parent 062f0fb
commit d53457a
Show file tree

Hide file tree

Showing 20 changed files with 601 additions and 411 deletions.
diff --git a/flow-typed/npm/react-transition-group_v2.x.x.js b/flow-typed/npm/react-transition-group_v2.x.x.js
@@ -0,0 +1,68 @@
+// flow-typed signature: 896bbb51b1a943fefff583786cd4d0c0
+// flow-typed version: b6c24caf38/react-transition-group_v2.x.x/flow_>=v0.60.x
+
+// @flow
+
+declare module 'react-transition-group' {
+  declare export type CSSTransitionClassNames = {
+    appear?: string,
+    appearActive?: string,
+    enter?: string,
+    enterActive?: string,
+    enterDone?: string,
+    exit?: string,
+    exitActive?: string,
+    exitDone?: string,
+  };
+
+  declare export type TransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited' | 'unmounted';
+
+  declare export type EndHandler = (node: HTMLElement, done: () => void) => void;
+  declare export type EnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
+  declare export type ExitHandler = (node: HTMLElement) => void;
+
+  declare type TransitionActions = {
+    appear?: boolean;
+    enter?: boolean;
+    exit?: boolean;
+  }
+
+  declare type TransitionProps = TransitionActions & {
+    mountOnEnter?: boolean,
+    unmountOnExit?: boolean,
+    onEnter?: EnterHandler,
+    onEntering?: EnterHandler,
+    onEntered?: EnterHandler,
+    onExit?: ExitHandler,
+    onExiting?: ExitHandler,
+    onExited?: ExitHandler,
+  } & ({
+    timeout: number | { enter?: number, exit?: number },
+    addEndListener?: null,
+  } | {
+    timeout?: number | { enter?: number, exit?: number },
+    addEndListener: EndHandler,
+  })
+
+  declare export class Transition extends React$Component<TransitionProps & {
+    in?: boolean,
+    children: ((status: TransitionStatus) => React$Node) | React$Node,
+  }> {}
+
+  declare export class TransitionGroup extends React$Component<TransitionActions & {
+    component?: React$ElementType | null,
+    children?: React$Node,
+    childFactory?: (child: React$Node) => React$Node,
+  }> {}
+
+  declare export class ReplaceTransition extends React$Component<TransitionProps & {
+    in: boolean,
+    children: React$Node,
+  }> {}
+
+  declare export class CSSTransition extends React$Component<TransitionProps & {
+    in?: boolean,
+    classNames: string | CSSTransitionClassNames,
+    children?: ((status: TransitionStatus) => React$Node) | React$Node,
+  }> {}
+}
diff --git a/package.json b/package.json
@@ -37,7 +37,8 @@
   "sideEffects": false,
   "dependencies": {
     "@babel/runtime": "7.2.0",
-    "react-tooltip": "3.9.1"
+    "react-popper": "1.3.2",
+    "react-transition-group": "2.5.2"
   },
   "devDependencies": {
     "@babel/cli": "7.2.3",

diff --git a/src/Atoms/Typography/Text.js b/src/Atoms/Typography/Text.js
@@ -1,13 +1,15 @@
 // @flow strict
 import PropTypes from 'prop-types'
 import * as React from 'react'
-import styled from 'styled-components'
+import styled, { type ReactComponentFunctional } from 'styled-components'
 
+import injectE2E from '../../Tools/injectE2E'
 import { prop, theme } from '../../Tools/interpolation'
 
 export type PropsType = {
   +capitalize?: boolean,
   +children?: React.Node,
+  +e2e?: string,
   +italic?: boolean,
   +opacity?: number,
   +size?: string,
@@ -27,7 +29,9 @@ const getTextTransform = (props: PropsType) => {
   return 'none'
 }
 
-const Wrapper = styled.span`
+const Wrapper: ReactComponentFunctional<PropsType> = styled.span.attrs({
+  'data-e2e': injectE2E,
+})`
   font-family: ${theme('fontPrimary')};
   font-weight: ${prop<PropsType>('weight')};
   font-size: ${prop<PropsType>('size')};

diff --git a/src/Atoms/Typography/TextGroup.spec.js b/src/Atoms/Typography/TextGroup.spec.js
@@ -5,7 +5,7 @@ import Text from './Text'
 import TextGroup from './TextGroup'
 
 const Texts = () => (
-  <React.Fragment>
+  <>
     <Text>
       This is my first text. This is my first text. This is my first text. This
       is my first text.
@@ -34,7 +34,7 @@ const Texts = () => (
       This is my seventh text. This is my seventh text. This is my seventh text.
       This is my seventh text.
     </Text>
-  </React.Fragment>
+  </>
 )
 
 describe('TextGroup', () => {

diff --git a/src/Atoms/Typography/TextGroup.stories.js b/src/Atoms/Typography/TextGroup.stories.js
@@ -5,7 +5,7 @@ import Text from './Text'
 import TextGroup from './TextGroup'
 
 const Texts = () => (
-  <React.Fragment>
+  <>
     <Text>
       This is my first text. This is my first text. This is my first text. This
       is my first text.
@@ -34,7 +34,7 @@ const Texts = () => (
       This is my seventh text. This is my seventh text. This is my seventh text.
       This is my seventh text.
     </Text>
-  </React.Fragment>
+  </>
 )
 
 storiesOf('Atoms/Typography/TextGroup', module)

diff --git a/src/Atoms/Typography/__snapshots__/Text.spec.js.snap b/src/Atoms/Typography/__snapshots__/Text.spec.js.snap
@@ -29,6 +29,7 @@ exports[`Text should render correctly 1`] = `
   >
     <span
       className="c0"
+      data-e2e=""
       opacity={1}
       size="1rem"
     >
@@ -67,6 +68,7 @@ exports[`Text should render correctly with capitalize 1`] = `
   >
     <span
       className="c0"
+      data-e2e=""
       opacity={1}
       size="1rem"
     >
@@ -105,6 +107,7 @@ exports[`Text should render correctly with italic 1`] = `
   >
     <span
       className="c0"
+      data-e2e=""
       opacity={1}
       size="1rem"
     >
@@ -143,6 +146,7 @@ exports[`Text should render correctly with opacity 1`] = `
   >
     <span
       className="c0"
+      data-e2e=""
       opacity={0.5}
       size="1rem"
     >
@@ -181,6 +185,7 @@ exports[`Text should render correctly with size 1`] = `
   >
     <span
       className="c0"
+      data-e2e=""
       opacity={1}
       size="32px"
     >
@@ -219,6 +224,7 @@ exports[`Text should render correctly with uppercase 1`] = `
   >
     <span
       className="c0"
+      data-e2e=""
       opacity={1}
       size="1rem"
     >
@@ -257,6 +263,7 @@ exports[`Text should render correctly with weight 1`] = `
   >
     <span
       className="c0"
+      data-e2e=""
       opacity={1}
       size="1rem"
     >

diff --git a/src/Atoms/Typography/__snapshots__/TextGroup.spec.js.snap b/src/Atoms/Typography/__snapshots__/TextGroup.spec.js.snap
@@ -50,6 +50,7 @@ exports[`TextGroup mount render correctly 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -75,6 +76,7 @@ exports[`TextGroup mount render correctly 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -100,6 +102,7 @@ exports[`TextGroup mount render correctly 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -125,6 +128,7 @@ exports[`TextGroup mount render correctly 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -150,6 +154,7 @@ exports[`TextGroup mount render correctly 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -175,6 +180,7 @@ exports[`TextGroup mount render correctly 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -200,6 +206,7 @@ exports[`TextGroup mount render correctly 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -263,6 +270,7 @@ exports[`TextGroup mount render correctly with align 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -288,6 +296,7 @@ exports[`TextGroup mount render correctly with align 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -313,6 +322,7 @@ exports[`TextGroup mount render correctly with align 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -338,6 +348,7 @@ exports[`TextGroup mount render correctly with align 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -363,6 +374,7 @@ exports[`TextGroup mount render correctly with align 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -388,6 +400,7 @@ exports[`TextGroup mount render correctly with align 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -413,6 +426,7 @@ exports[`TextGroup mount render correctly with align 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -476,6 +490,7 @@ exports[`TextGroup mount render correctly with inline 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -501,6 +516,7 @@ exports[`TextGroup mount render correctly with inline 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -526,6 +542,7 @@ exports[`TextGroup mount render correctly with inline 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -551,6 +568,7 @@ exports[`TextGroup mount render correctly with inline 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -576,6 +594,7 @@ exports[`TextGroup mount render correctly with inline 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -601,6 +620,7 @@ exports[`TextGroup mount render correctly with inline 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >
@@ -626,6 +646,7 @@ exports[`TextGroup mount render correctly with inline 1`] = `
           >
             <span
               className="c1"
+              data-e2e=""
               opacity={1}
               size="1rem"
             >

diff --git a/src/Molecules/SearchBars/SearchBar.js b/src/Molecules/SearchBars/SearchBar.js
@@ -92,7 +92,7 @@ const GoContainer = styled.div.attrs({
     cursor: pointer;
   }
 `
-const GoLabel = () => <React.Fragment>Go</React.Fragment>
+const GoLabel = () => <>Go</>
 
 const SearchBar = ({
   children,

diff --git a/src/Molecules/SearchBars/SearchBar.stories.js b/src/Molecules/SearchBars/SearchBar.stories.js
@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions'
 
 import SearchBar from './SearchBar'
 
-const CustomLabel = () => <React.Fragment>Search !</React.Fragment>
+const CustomLabel = () => <>Search !</>
 
 storiesOf('Molecules/SearchBars/SearchBar', module)
   .add('default', () => <SearchBar />)