Switch from react-tippy to @tippy.js/react for tooltips (codesandbox#1584)

* chnage to @tippy.js/react

* remove uneeded deps

* remove old api

* remove old api

* fix props

* small patreon fix

* fix ts

* fix alignment

* fix build

* Update path to common

Author: SaraVieira

package.json

@@ -75,7 +75,8 @@
     "gulp": "^3.9.1",
     "lerna": "^2.5.1",
     "lint-staged": "^5.0.0",
-    "prettier": "^1.8.2"
+    "prettier": "^1.8.2",
+        "typescript": "^3.3.1"
   },
   "dependencies": {
     "opencollective": "^1.0.3"

packages/app/src/app/components/CodeEditor/Configuration/index.tsx

@@ -100,7 +100,7 @@ export default class Configuration extends React.PureComponent<Props>
           />
           <Title>{config.title}</Title>
 
-          <Tooltip title="Show Code">
+          <Tooltip content="Show Code">
             <Icon onClick={this.props.toggleConfigUI}>
               <CodeIcon />
             </Icon>

packages/app/src/app/components/CodeEditor/FilePath/elements.js

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 import ChevronLeft from 'react-icons/lib/md/chevron-left';
 import ExitZen from 'react-icons/lib/md/fullscreen-exit';
-import { withTooltip } from '@codesandbox/common/lib/components/Tooltip';
 
 export const Container = styled.div`
   background-color: rgba(0, 0, 0, 0.3);
@@ -43,19 +42,16 @@ export const FileName = styled.div`
   flex: 1;
 `;
 
-export const StyledExitZen = withTooltip(
-  styled(ExitZen)`
-    transition: 0.3s ease opacity;
+export const StyledExitZen = styled(ExitZen)`
+  transition: 0.3s ease opacity;
 
-    cursor: pointer;
-    font-size: 1.25rem;
+  cursor: pointer;
+  font-size: 1.25rem;
 
-    z-index: 10;
-    opacity: 0.7;
+  z-index: 10;
+  opacity: 0.7;
 
-    &:hover {
-      opacity: 1;
-    }
-  `,
-  { title: 'Close Zen Mode', style: { zIndex: 10 } }
-);
+  &:hover {
+    opacity: 1;
+  }
+`;

packages/app/src/app/components/CodeEditor/FilePath/index.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
 import getType from 'app/utils/get-type';
 
@@ -60,7 +61,9 @@ export default class FilePath extends React.Component {
           </span>
         </FileName>
 
-        <StyledExitZen onClick={exitZenMode} />
+        <Tooltip content="Close Zen Mode" style={{ zIndex: 10 }}>
+          <StyledExitZen onClick={exitZenMode} />
+        </Tooltip>
       </Container>
     );
   }

packages/app/src/app/components/CodeEditor/index.tsx

@@ -195,7 +195,7 @@ export default class CodeEditor extends React.PureComponent<
         {config &&
           (getUI(config.type) && !settings.experimentVSCode ? (
             <Icons>
-              <Tooltip title="Switch to UI Configuration">
+              <Tooltip content="Switch to UI Configuration">
                 <Icon onClick={this.toggleConfigUI}>
                   <UIIcon />
                 </Icon>
@@ -210,11 +210,11 @@ export default class CodeEditor extends React.PureComponent<
             >
               {config.partialSupportDisclaimer ? (
                 <Tooltip
-                  position="bottom"
-                  title={config.partialSupportDisclaimer}
+                  placement="bottom"
+                  content={config.partialSupportDisclaimer}
                   style={{
                     display: 'flex',
-                    alignItems: 'center',
+                    'align-items': 'center',
                   }}
                 >
                   Partially Supported Config{' '}

packages/app/src/app/components/DeleteSandboxButton/elements.js

@@ -4,7 +4,7 @@ import DeleteIcon from 'react-icons/lib/md/delete';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 
 export const DeleteSandboxButton = styled(props => (
-  <Tooltip title="Delete Sandbox">
+  <Tooltip content="Delete Sandbox">
     <button {...props}>
       <DeleteIcon />
     </button>

packages/app/src/app/components/Integration/DetailInfo/index.js

@@ -15,7 +15,7 @@ function DetailInfo({ heading, info, signOut, signIn }) {
       </Margin>
 
       {signOut ? (
-        <Tooltip title="Sign out">
+        <Tooltip content="Sign out">
           <Action onClick={signOut} red>
             <CrossIcon />
           </Action>

packages/app/src/app/components/Preview/DevTools/Problems/index.tsx

@@ -106,7 +106,7 @@ class Problems extends React.PureComponent<DevToolProps, State> {
                 <Path>{splittedPath.join('/')}/</Path>
                 <FileName>{fileName}</FileName>
                 <Actions>
-                  <Tooltip title="Open File">
+                  <Tooltip content="Open File">
                     <FileIcon onClick={() => this.openFile(file)} />
                   </Tooltip>
                 </Actions>

packages/app/src/app/components/Preview/DevTools/Tabs/index.tsx

@@ -85,7 +85,7 @@ const DevToolTabs = ({
         {actions.map(({ title, onClick, Icon }) => (
           <Tooltip
             style={{ pointerEvents: hidden ? 'none' : 'initial' }}
-            title={title}
+            content={title}
             key={title}
           >
             <Icon

packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/TestBlock/index.tsx

@@ -20,7 +20,7 @@ export default ({ test, openFile }: Props) => (
       <TestName test={test} />
       <Actions>
         {openFile && (
-          <Tooltip title="Open File">
+          <Tooltip content="Open File">
             <FileIcon onClick={() => openFile(test.path)} />
           </Tooltip>
         )}