Add dependencies using modal (#254)

* Open a stub search box on "Add Dependency" click

* Connect to yarn's npm index

* Add click handler to hits

* Control InstantSearch

* Populate version dropdown on select

* Add dependency on confirm

* Add search box autofocus

* Styled left side of dependency search results

* Move pr/108 files to new locations

* Format download count

* Limit hits per page

* Add GitHub link

* Add homepage link (and tooltips)

* Add version select

* Style dependency search box

* Make lines between dependencies softer

* Include version in DependencyHit onClick

* Support "Enter" click on DependencyHit

* Restore add dependency functionality

* Use codesandbox API key for Algolia search

* Use Downshift for hit list

* Refactor to remove unnecesary array

* Style search box

* Focus search box

* Add pagination controls

* Move pagination under search bar

Makes controls always in the same place even when list grows/shrinks

* Add to contributors

* Fix lint errors

* Clean code

* Extract formatDownloads into own file.
* Reorder SearchDependencies so that the main content comes first.

* Re-add to contributors

Author: tansongyang

.all-contributorsrc

@@ -198,7 +198,8 @@
         "bug",
         "code"
       ]
-    }, {
+    },
+    {
       "login": "duivvv",
       "name": "Geoffrey Dhuyvetters",
       "avatar_url": "https://avatars3.githubusercontent.com/u/89046?v=4",
@@ -217,6 +218,15 @@
         "code",
         "infra"
       ]
+    },
+    {
+      "login": "tansongyang",
+      "name": "Frank Tan",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/9488719?v=4",
+      "profile": "https://github.com/tansongyang",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

README.md

@@ -1,4 +1,4 @@
-# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-21-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) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
+# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-22-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) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
 
 An online code editor tailored for web applications.
 
@@ -36,9 +36,9 @@ 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 -->
-<!-- prettier-ignore -->
 | [<img src="https://avatars0.githubusercontent.com/u/587016?v=3" width="100px;"/><br /><sub><b>Ives van Hoorne</b></sub>](http://ivesvh.com)<br />[💬](#question-CompuIves "Answering Questions") [📝](#blog-CompuIves "Blogposts") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3ACompuIves "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=CompuIves "Code") [🎨](#design-CompuIves "Design") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=CompuIves "Documentation") [💡](#example-CompuIves "Examples") [🚇](#infra-CompuIves "Infrastructure (Hosting, Build-Tools, etc)") [👀](#review-CompuIves "Reviewed Pull Requests") [⚠️](https://github.com/CompuIves/codesandbox-client/commits?author=CompuIves "Tests") [🔧](#tool-CompuIves "Tools") | [<img src="https://avatars0.githubusercontent.com/u/887639?v=3" width="100px;"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=donavon "Code") | [<img src="https://avatars0.githubusercontent.com/u/5266810?v=3" width="100px;"/><br /><sub><b>Jeff Allen</b></sub>](http://www.jeffallen.io/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=vueu "Code") | [<img src="https://avatars0.githubusercontent.com/u/1089897?v=3" width="100px;"/><br /><sub><b>Ben Gummer</b></sub>](https://github.com/bengummer)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bengummer "Code") | [<img src="https://avatars3.githubusercontent.com/u/154732?v=3" width="100px;"/><br /><sub><b>James Gillmore</b></sub>](http://twitter.com/faceyspacey)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=faceyspacey "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Afaceyspacey "Bug reports") | [<img src="https://avatars1.githubusercontent.com/u/9636410?v=4" width="100px;"/><br /><sub><b>Ade Viankakrisna Fadlil</b></sub>](https://github.com/viankakrisna)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=viankakrisna "Code") | [<img src="https://avatars1.githubusercontent.com/u/1854763?v=4" width="100px;"/><br /><sub><b>Tushar Sonawane</b></sub>](https://twitter.com/tushkiz)<br />[💬](#question-Tushkiz "Answering Questions") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=Tushkiz "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=Tushkiz "Documentation") [🤔](#ideas-Tushkiz "Ideas, Planning, & Feedback") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars3.githubusercontent.com/u/1239401?v=4" width="100px;"/><br /><sub><b>Johann Hubert Sonntagbauer</b></sub>](https://github.com/johann-sonntagbauer)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Ajohann-sonntagbauer "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=johann-sonntagbauer "Code") | [<img src="https://avatars2.githubusercontent.com/u/9586897?v=4" width="100px;"/><br /><sub><b>Joachim Seminck</b></sub>](https://github.com/jseminck)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jseminck "Code") | [<img src="https://avatars3.githubusercontent.com/u/5210019?v=4" width="100px;"/><br /><sub><b>Subramanya Chakravarthy</b></sub>](http://chakrihacker.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=chakrihacker "Code") | [<img src="https://avatars3.githubusercontent.com/u/23088?v=4" width="100px;"/><br /><sub><b>Robert (Robby) O'Connor</b></sub>](http://robby.oconnor.ninja)<br />[🚇](#infra-robbyoconnor "Infrastructure (Hosting, Build-Tools, etc)") | [<img src="https://avatars0.githubusercontent.com/u/2083930?v=4" width="100px;"/><br /><sub><b>Bogdan Luca</b></sub>](https://github.com/lbogdan)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Albogdan "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=lbogdan "Code") | [<img src="https://avatars3.githubusercontent.com/u/6177621?v=4" width="100px;"/><br /><sub><b>Divjot Singh</b></sub>](http://bogas04.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bogas04 "Code") | [<img src="https://avatars3.githubusercontent.com/u/5249539?v=4" width="100px;"/><br /><sub><b>Jason Nall</b></sub>](http://www.jsonnull.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jsonnull "Code") |
 | [<img src="https://avatars3.githubusercontent.com/u/784056?v=4" width="100px;"/><br /><sub><b>Lionel</b></sub>](https://elrumordelaluz.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=elrumordelaluz "Code") [🎨](#design-elrumordelaluz "Design") | [<img src="https://avatars3.githubusercontent.com/u/170500?v=4" width="100px;"/><br /><sub><b>Philipp Brumm</b></sub>](https://github.com/brumm)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=brumm "Code") | [<img src="https://avatars2.githubusercontent.com/u/2678610?v=4" width="100px;"/><br /><sub><b>Valentin Hervieu</b></sub>](http://valentin-hervieu.fr)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ValentinH "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3AValentinH "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/1499218?v=4" width="100px;"/><br /><sub><b>Anenth</b></sub>](http://anenth.js.org)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Anenth "Code") [🎨](#design-Anenth "Design") [🤔](#ideas-Anenth "Ideas, Planning, & Feedback") | [<img src="https://avatars0.githubusercontent.com/u/410792?v=4" width="100px;"/><br /><sub><b>Dony Sukardi</b></sub>](http://dsds.io)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Adonysukardi "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=donysukardi "Code") | [<img src="https://avatars3.githubusercontent.com/u/89046?v=4" width="100px;"/><br /><sub><b>Geoffrey Dhuyvetters</b></sub>](https://github.com/duivvv)<br />[🎨](#design-duivvv "Design") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=duivvv "Code") | [<img src="https://avatars3.githubusercontent.com/u/3381746?v=4" width="100px;"/><br /><sub><b>Eswar Yaganti</b></sub>](http://nyaganti.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=nagamalli9999 "Code") [🚇](#infra-nagamalli9999 "Infrastructure (Hosting, Build-Tools, etc)") |
+| [<img src="https://avatars3.githubusercontent.com/u/9488719?v=4" width="100px;"/><br /><sub><b>Frank Tan</b></sub>](https://github.com/tansongyang)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=tansongyang "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddVersion.js

@@ -1,90 +1,64 @@
 import React from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 import styled from 'styled-components';
 
 import Button from 'app/components/buttons/Button';
-import WorkspaceInputContainer from '../WorkspaceInputContainer';
+import modalActionCreators from 'app/store/modal/actions';
 
-const ButtonContainer = styled.div`margin: 0.5rem 1rem;`;
+import SearchDependencies from './SearchDependencies';
 
-type State = {
-  name: string,
-  version: string,
-};
+const ButtonContainer = styled.div`margin: 0.5rem 1rem;`;
 
 type Props = {
   addDependency: (dependency: string, version: string) => Promise<boolean>,
-  existingDependencies: Array<string>,
+  modalActions: typeof modalActionCreators,
+};
+
+type State = {
   processing: boolean,
 };
 
-const initialState = {
-  name: '',
-  version: '',
+const initialState: State = {
+  processing: false,
 };
 
-export default class AddVersion extends React.PureComponent {
-  state = initialState;
+const mapDispatchToProps = dispatch => ({
+  modalActions: bindActionCreators(modalActionCreators, dispatch),
+});
 
-  state: State;
+class AddVersion extends React.PureComponent {
   props: Props;
+  state = initialState;
 
-  setName = (e: KeyboardEvent) => {
-    const { existingDependencies } = this.props;
-    const name = e.target.value;
-    this.setState({ name, replacing: existingDependencies.includes(name) });
-  };
-
-  setVersion = (e: KeyboardEvent) => {
-    this.setState({ version: e.target.value });
-  };
-
-  addDependency = async () => {
-    if (this.state.name) {
-      await this.props.addDependency(this.state.name, this.state.version);
-      this.setState(initialState);
+  addDependency = async (name, version) => {
+    if (name) {
+      this.props.modalActions.closeModal();
+      this.setState({ processing: true });
+      await this.props.addDependency(name, version);
+      this.setState({ processing: false });
     }
   };
 
-  handleKeyUp = (e: KeyboardEvent) => {
-    if (e.keyCode === 13) {
-      // Enter
-      this.addDependency();
-    }
+  openModal = () => {
+    this.props.modalActions.openModal({
+      width: 600,
+      Body: <SearchDependencies onConfirm={this.addDependency} />,
+    });
   };
 
   render() {
-    const { name, version, replacing } = this.state;
-    const { processing } = this.props;
-    const isValid = name !== '';
+    const { processing } = this.state;
     return (
       <div style={{ position: 'relative' }}>
-        <WorkspaceInputContainer>
-          <input
-            style={{ flex: 3 }}
-            placeholder="package name"
-            value={name}
-            onChange={this.setName}
-            onKeyUp={this.handleKeyUp}
-          />
-          <input
-            style={{ flex: 1 }}
-            placeholder="version"
-            value={version}
-            onChange={this.setVersion}
-            onKeyUp={this.handleKeyUp}
-          />
-        </WorkspaceInputContainer>
         <ButtonContainer>
-          <Button
-            disabled={!isValid || processing}
-            block
-            small
-            onClick={this.addDependency}
-          >
-            {replacing ? 'Replace' : 'Add'} Package
+          <Button disabled={processing} block small onClick={this.openModal}>
+            Add Package
           </Button>
         </ButtonContainer>
       </div>
     );
   }
 }
+
+export default connect(null, mapDispatchToProps)(AddVersion);

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/Dependencies.css

@@ -0,0 +1,13 @@
+.ReactModal__Content div[class^='Modal__ModalBody'] {
+  /*
+   * app/src/app/containers/Modal.js sets ModalBody background to white.
+   * We don't want to risk messing up something else, so we fix that here.
+   */
+  background: transparent;
+}
+
+.ais-Pagination__root {
+  border-radius: 0;
+  display: flex;
+  justify-content: center;
+}

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/DependencyHit.js

@@ -0,0 +1,142 @@
+import React from 'react';
+import HomeIcon from 'react-icons/lib/io/home';
+import { Highlight } from 'react-instantsearch/dom';
+import styled from 'styled-components';
+
+import Select from 'app/components/Select';
+import Tooltip from 'common/components/Tooltip';
+
+import GitHubLogo from '../Git/modals/GitHubLogo';
+import formatDownloads from './formatDownloads';
+
+const Container = styled.div`
+  display: flex;
+  background: ${props =>
+    props.highlighted ? props.theme.background3 : props.theme.background2};
+  color: ${props => props.theme.white};
+  cursor: pointer;
+  &:not(:last-child) {
+    border-bottom: 1px solid ${props => props.theme.background3};
+  }
+`;
+
+const Left = styled.div`
+  flex: 1;
+`;
+
+const Right = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Row = styled.div`
+  margin: 10px;
+  & > * {
+    margin-right: 10px;
+  }
+`;
+
+const Downloads = styled.span`
+  color: ${props => props.theme.gray};
+  font-size: 12px;
+`;
+
+const License = styled.span`
+  border: 1px solid ${props => props.theme.gray};
+  border-radius: 3px;
+  padding: 1px 3px;
+  color: ${props => props.theme.gray};
+  font-size: 12px;
+`;
+
+const IconLink = styled.a`
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.8);
+`;
+
+type Props = {
+  highlighted: boolean,
+  hit: Object,
+  onClick: Function,
+  onVersionChange: Function,
+};
+
+type State = {
+  selectedVersion: string,
+};
+
+const initialState: State = {
+  selectedVersion: '',
+};
+
+export default class DependencyHit extends React.PureComponent {
+  props: Props;
+  state = initialState;
+
+  makeGitHubRepoUrl(repo) {
+    return `https://github.com/${repo.user}/${repo.project}`;
+  }
+
+  stopPropagation(e) {
+    e.stopPropagation();
+  }
+
+  handleVersionChange = e => {
+    const selectedVersion = e.target.value;
+    this.setState({ selectedVersion });
+    this.props.onVersionChange(selectedVersion);
+  };
+
+  render() {
+    const { highlighted, hit, onClick } = this.props;
+    const versions = Object.keys(hit.versions);
+    versions.reverse();
+    return (
+      <Container highlighted={highlighted} onClick={onClick}>
+        <Left>
+          <Row>
+            <Highlight attributeName="name" hit={hit} />
+            <Downloads>{formatDownloads(hit.downloadsLast30Days)}</Downloads>
+            {hit.license && <License>{hit.license}</License>}
+          </Row>
+          <Row>{hit.description}</Row>
+        </Left>
+        <Right>
+          <Row>
+            {hit.githubRepo && (
+              <Tooltip title={`GitHub repository of ${hit.name}`}>
+                <IconLink
+                  href={this.makeGitHubRepoUrl(hit.githubRepo)}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  onClick={this.stopPropagation}
+                >
+                  <GitHubLogo />
+                </IconLink>
+              </Tooltip>
+            )}
+            {hit.homepage && (
+              <Tooltip title={`Homepage of ${hit.name}`}>
+                <IconLink
+                  href={hit.homepage}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  onClick={this.stopPropagation}
+                >
+                  <HomeIcon />
+                </IconLink>
+              </Tooltip>
+            )}
+            <Select
+              onClick={this.stopPropagation}
+              onChange={this.handleVersionChange}
+              value={this.state.selectedVersion}
+            >
+              {versions.map(v => <option key={v}>{v}</option>)}
+            </Select>
+          </Row>
+        </Right>
+      </Container>
+    );
+  }
+}