Package Refresh Icon (codesandbox#24)

donavon · CompuIves · commit 61e3dce81300 · 2017-06-18T16:12:01.000+02:00
* Add @donavon as a contributor * Add a common Icon component * Use Icon for FIles * Use Icon for External Resources * Pass onRefresh to VersionEntry * Add Refrech Icon to VersionEntry * Inject theme in ExternalResource.test * Update ExternalResource.test snaps
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -25,6 +25,15 @@
         "test",
         "tool"
       ]
+    },
+    {
+      "login": "donavon",
+      "name": "Donavon West",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/887639?v=3",
+      "profile": "http://donavon.com",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # [CodeSandbox](https://codesandbox.io)
-[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)
 [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client)
 
 An online code editor with a focus on React.
@@ -36,8 +36,8 @@ yarn start
 Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-| [<img src="https://avatars0.githubusercontent.com/u/587016?v=3" width="100px;"/><br /><sub>Ives van Hoorne</sub>](http://ivesvh.com)<br />[💬](#question-CompuIves "Answering Questions") [📝](#blog-CompuIves "Blogposts") [🐛](https://github.com/CompuIves/CodeSandbox/issues?q=author%3ACompuIves "Bug reports") [💻](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Code") [🎨](#design-CompuIves "Design") [📖](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Documentation") [💡](#example-CompuIves "Examples") [🚇](#infra-CompuIves "Infrastructure (Hosting, Build-Tools, etc)") [👀](#review-CompuIves "Reviewed Pull Requests") [⚠️](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Tests") [🔧](#tool-CompuIves "Tools") |
-| :---: |
+| [<img src="https://avatars0.githubusercontent.com/u/587016?v=3" width="100px;"/><br /><sub>Ives van Hoorne</sub>](http://ivesvh.com)<br />[💬](#question-CompuIves "Answering Questions") [📝](#blog-CompuIves "Blogposts") [🐛](https://github.com/CompuIves/CodeSandbox/issues?q=author%3ACompuIves "Bug reports") [💻](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Code") [🎨](#design-CompuIves "Design") [📖](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Documentation") [💡](#example-CompuIves "Examples") [🚇](#infra-CompuIves "Infrastructure (Hosting, Build-Tools, etc)") [👀](#review-CompuIves "Reviewed Pull Requests") [⚠️](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Tests") [🔧](#tool-CompuIves "Tools") | [<img src="https://avatars0.githubusercontent.com/u/887639?v=3" width="100px;"/><br /><sub>Donavon West</sub>](http://donavon.com)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=donavon "Code") |
+| :---: | :---: |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
diff --git a/src/app/pages/Sandbox/Editor/Workspace/Dependencies/ExternalResource.js b/src/app/pages/Sandbox/Editor/Workspace/Dependencies/ExternalResource.js
@@ -1,21 +1,9 @@
 import React from 'react';
-import styled from 'styled-components';
-import theme from 'common/theme';
 
 import CrossIcon from 'react-icons/lib/md/clear';
 
 import EntryContainer from '../EntryContainer';
-
-const Icon = styled.div`
-  transition: 0.3s ease color;
-  position: absolute;
-  right: 1rem;
-  line-height: 1;
-  color: ${() => theme.background.lighten(2).clearer(0.5)};
-  &:hover {
-    color: ${() => theme.red};
-  }
-`;
+import { IconArea, Icon } from '../Icon';
 
 const getNormalizedUrl = (url: string) => `${url.replace(/\/$/g, '')}/`;
 
@@ -49,7 +37,9 @@ export default class ExternalResource extends React.PureComponent {
         <a href={resource} rel="noopener noreferrer" target="_blank">
           {getName(resource)}
         </a>
-        <Icon onClick={this.removeResource}><CrossIcon /></Icon>
+        <IconArea>
+          <Icon onClick={this.removeResource}><CrossIcon /></Icon>
+        </IconArea>
       </EntryContainer>
     );
   }
diff --git a/src/app/pages/Sandbox/Editor/Workspace/Dependencies/ExternalResource.test.js b/src/app/pages/Sandbox/Editor/Workspace/Dependencies/ExternalResource.test.js
@@ -1,22 +1,25 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { ThemeProvider } from 'styled-components';
+
 import ExternalResource from './ExternalResource';
+import theme from '../../../../../../common/theme';
 
 describe('ExternalResource', () => {
   it('renders file if there is an extension', () => {
     const tree = renderer
-      .create(<ExternalResource resource="https://ivesvh.com/ives.js" />)
+      .create(<ThemeProvider theme={theme}><ExternalResource resource="https://ivesvh.com/ives.js" /></ThemeProvider>)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders url if there is no extension', () => {
     const tree1 = renderer
-      .create(<ExternalResource resource="https://ivesvh.com/" />)
+      .create(<ThemeProvider theme={theme}><ExternalResource resource="https://ivesvh.com/" theme={theme} /></ThemeProvider>)
       .toJSON();
 
     const tree2 = renderer
-      .create(<ExternalResource resource="https://ivesvh.com" />)
+      .create(<ThemeProvider theme={theme}><ExternalResource resource="https://ivesvh.com" theme={theme} /></ThemeProvider>)
       .toJSON();
 
     expect(tree1).toMatchSnapshot();
diff --git a/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry.js b/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry.js
@@ -1,35 +1,23 @@
 import React from 'react';
 import styled from 'styled-components';
 import CrossIcon from 'react-icons/lib/md/clear';
-
-import fadeIn from 'app/utils/animation/fade-in';
+import RefreshIcon from 'react-icons/lib/md/refresh';
 
 import EntryContainer from '../EntryContainer';
+import { IconArea, Icon } from '../Icon';
 
 const Version = styled.div`
   transition: 0.3s ease all;
   position: absolute;
-  right: ${props => (props.hovering ? 2.5 : 1)}rem;
-  color: ${props => props.theme.background.lighten(2).clearer(0.5)};
-`;
-
-const Icon = styled.div`
-  transition: 0.3s ease color;
-  position: absolute;
-  right: 1rem;
-  opacity: 0;
-  line-height: 1;
+  right: ${props => (props.hovering ? 3.5 : 1)}rem;
   color: ${props => props.theme.background.lighten(2).clearer(0.5)};
-  ${fadeIn(0)}
-  &:hover {
-    color: ${props => props.theme.red};
-  }
 `;
 
 type Props = {
   dependencies: { [key: string]: string },
   dependency: string,
   onRemove: (dep: string) => void,
+  onRefresh: (dep: string) => void,
 };
 
 type State = {
@@ -45,6 +33,7 @@ export default class VersionEntry extends React.PureComponent {
   };
 
   handleRemove = () => this.props.onRemove(this.props.dependency);
+  handleRefresh = () => this.props.onRefresh(this.props.dependency);
   onMouseEnter = () => this.setState({ hovering: true });
   onMouseLeave = () => this.setState({ hovering: false });
 
@@ -59,7 +48,10 @@ export default class VersionEntry extends React.PureComponent {
       >
         <span>{dependency}</span>
         <Version hovering={hovering}>{dependencies[dependency]}</Version>
-        {hovering && <Icon onClick={this.handleRemove}><CrossIcon /></Icon>}
+        {hovering && <IconArea>
+          <Icon onClick={this.handleRefresh}><RefreshIcon /></Icon>
+          <Icon onClick={this.handleRemove}><CrossIcon /></Icon>
+        </IconArea>}
       </EntryContainer>
     );
   }
diff --git a/src/app/pages/Sandbox/Editor/Workspace/Dependencies/__snapshots__/ExternalResource.test.js.snap b/src/app/pages/Sandbox/Editor/Workspace/Dependencies/__snapshots__/ExternalResource.test.js.snap
@@ -12,28 +12,32 @@ exports[`ExternalResource renders file if there is an extension 1`] = `
     ives.js
   </a>
   <div
-    className="sc-bwzfXH gaVNMC"
-    onClick={[Function]}
+    className="sc-htpNat hFdhGH"
   >
-    <svg
-      fill="currentColor"
-      height="1em"
-      preserveAspectRatio="xMidYMid meet"
-      style={
-        Object {
-          "color": undefined,
-          "verticalAlign": "middle",
-        }
-      }
-      viewBox="0 0 40 40"
-      width="1em"
+    <div
+      className="sc-bwzfXH gUazxX"
+      onClick={[Function]}
     >
-      <g>
-        <path
-          d="m31.6 10.7l-9.3 9.3 9.3 9.3-2.3 2.3-9.3-9.3-9.3 9.3-2.3-2.3 9.3-9.3-9.3-9.3 2.3-2.3 9.3 9.3 9.3-9.3z"
-        />
-      </g>
-    </svg>
+      <svg
+        fill="currentColor"
+        height="1em"
+        preserveAspectRatio="xMidYMid meet"
+        style={
+          Object {
+            "color": undefined,
+            "verticalAlign": "middle",
+          }
+        }
+        viewBox="0 0 40 40"
+        width="1em"
+      >
+        <g>
+          <path
+            d="m31.6 10.7l-9.3 9.3 9.3 9.3-2.3 2.3-9.3-9.3-9.3 9.3-2.3-2.3 9.3-9.3-9.3-9.3 2.3-2.3 9.3 9.3 9.3-9.3z"
+          />
+        </g>
+      </svg>
+    </div>
   </div>
 </span>
 `;
@@ -50,28 +54,32 @@ exports[`ExternalResource renders url if there is no extension 1`] = `
     https://ivesvh.com/
   </a>
   <div
-    className="sc-bwzfXH gaVNMC"
-    onClick={[Function]}
+    className="sc-htpNat hFdhGH"
   >
-    <svg
-      fill="currentColor"
-      height="1em"
-      preserveAspectRatio="xMidYMid meet"
-      style={
-        Object {
-          "color": undefined,
-          "verticalAlign": "middle",
-        }
-      }
-      viewBox="0 0 40 40"
-      width="1em"
+    <div
+      className="sc-bwzfXH gUazxX"
+      onClick={[Function]}
     >
-      <g>
-        <path
-          d="m31.6 10.7l-9.3 9.3 9.3 9.3-2.3 2.3-9.3-9.3-9.3 9.3-2.3-2.3 9.3-9.3-9.3-9.3 2.3-2.3 9.3 9.3 9.3-9.3z"
-        />
-      </g>
-    </svg>
+      <svg
+        fill="currentColor"
+        height="1em"
+        preserveAspectRatio="xMidYMid meet"
+        style={
+          Object {
+            "color": undefined,
+            "verticalAlign": "middle",
+          }
+        }
+        viewBox="0 0 40 40"
+        width="1em"
+      >
+        <g>
+          <path
+            d="m31.6 10.7l-9.3 9.3 9.3 9.3-2.3 2.3-9.3-9.3-9.3 9.3-2.3-2.3 9.3-9.3-9.3-9.3 2.3-2.3 9.3 9.3 9.3-9.3z"
+          />
+        </g>
+      </svg>
+    </div>
   </div>
 </span>
 `;
@@ -88,28 +96,32 @@ exports[`ExternalResource renders url if there is no extension 2`] = `
     https://ivesvh.com/
   </a>
   <div
-    className="sc-bwzfXH gaVNMC"
-    onClick={[Function]}
+    className="sc-htpNat hFdhGH"
   >
-    <svg
-      fill="currentColor"
-      height="1em"
-      preserveAspectRatio="xMidYMid meet"
-      style={
-        Object {
-          "color": undefined,
-          "verticalAlign": "middle",
-        }
-      }
-      viewBox="0 0 40 40"
-      width="1em"
+    <div
+      className="sc-bwzfXH gUazxX"
+      onClick={[Function]}
     >
-      <g>
-        <path
-          d="m31.6 10.7l-9.3 9.3 9.3 9.3-2.3 2.3-9.3-9.3-9.3 9.3-2.3-2.3 9.3-9.3-9.3-9.3 2.3-2.3 9.3 9.3 9.3-9.3z"
-        />
-      </g>
-    </svg>
+      <svg
+        fill="currentColor"
+        height="1em"
+        preserveAspectRatio="xMidYMid meet"
+        style={
+          Object {
+            "color": undefined,
+            "verticalAlign": "middle",
+          }
+        }
+        viewBox="0 0 40 40"
+        width="1em"
+      >
+        <g>
+          <path
+            d="m31.6 10.7l-9.3 9.3 9.3 9.3-2.3 2.3-9.3-9.3-9.3 9.3-2.3-2.3 9.3-9.3-9.3-9.3 2.3-2.3 9.3 9.3 9.3-9.3z"
+          />
+        </g>
+      </svg>
+    </div>
   </div>
 </span>
 `;
diff --git a/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.js b/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.js
@@ -134,6 +134,7 @@ export default class Dependencies extends React.PureComponent {
                 dependencies={npmDependencies}
                 dependency={dep}
                 onRemove={this.removeDependency}
+                onRefresh={this.addDependency}
               />
             ))}
           <AddVersion
diff --git a/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EditIcons.js b/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EditIcons.js
@@ -8,6 +8,8 @@ import AddDirectoryIcon from 'react-icons/lib/go/file-symlink-directory';
 
 import fadeIn from 'app/utils/animation/fade-in';
 
+import { Icon } from '../../../Icon';
+
 type Props = {
   className: ?string,
   hovering: boolean,
@@ -25,15 +27,6 @@ const Container = styled.div`
   line-height: 1;
 `;
 
-const Icon = styled.div`
-  transition: 0.3s ease color;
-  color: ${props => props.theme.background2.lighten(3)};
-  padding-left: 0.25rem;
-  &:hover {
-    color: white;
-  }
-`;
-
 const handleClick = func => (e: Event) => {
   e.preventDefault();
   e.stopPropagation();
diff --git a/src/app/pages/Sandbox/Editor/Workspace/Icon.js b/src/app/pages/Sandbox/Editor/Workspace/Icon.js
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import fadeIn from 'app/utils/animation/fade-in';
+
+export const Icon = styled.div`
+  position: relative;
+  display: inline-block;
+  transition: 0.3s ease color;
+  color: ${props => props.theme.background2.lighten(3)};
+  padding-left: 0.25rem;
+  &:hover {
+    color: white;
+  }
+`;
+
+export const IconArea = styled.div`
+  position: absolute;
+  right: 1rem;
+  opacity: 0;
+  line-height: 1;
+  ${fadeIn(0)}
+`;

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,15 @@`
`25`	`25`	`"test",`
`26`	`26`	`"tool"`
`27`	`27`	`]`
	`28`	`+ },`
	`29`	`+ {`
	`30`	`+ "login": "donavon",`
	`31`	`+ "name": "Donavon West",`
	`32`	`+ "avatar_url": "https://avatars0.githubusercontent.com/u/887639?v=3",`
	`33`	`+ "profile": "http://donavon.com",`
	`34`	`+ "contributions": [`
	`35`	`+ "code"`
	`36`	`+ ]`
`28`	`37`	`}`
`29`	`38`	`]`
`30`	`39`	`}`