Improve dependency search experience

Author: CompuIves

packages/app/src/app/pages/Sandbox/SearchDependencies/RawAutoComplete/elements.js

@@ -9,4 +9,15 @@ export const AutoCompleteInput = styled.input`
   font-weight: 600;
   color: ${props => props.theme.white};
   padding: 0.75em 1em;
+  z-index: 2;
+`;
+
+export const SuggestionInput = styled(AutoCompleteInput)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: rgba(255, 255, 255, 0.3);
+  background-color: transparent;
+  z-index: 1;
+  pointer-events: none;
 `;

packages/app/src/app/pages/Sandbox/SearchDependencies/RawAutoComplete/index.js

@@ -6,69 +6,160 @@ import { Pagination } from 'react-instantsearch/dom';
 import { ENTER } from 'common/utils/keycodes';
 
 import DependencyHit from '../DependencyHit';
-import { AutoCompleteInput } from './elements';
-
-function RawAutoComplete({
-  onSelect,
-  onManualSelect,
-  onHitVersionChange,
-  hits,
-  refine,
-  currentRefinement,
-}) {
-  return (
-    <Downshift itemToString={hit => (hit ? hit.name : hit)} onSelect={onSelect}>
-      {({ getInputProps, getItemProps, highlightedIndex }) => (
-        <div>
-          <AutoCompleteInput
-            autoFocus
-            {...getInputProps({
-              innerRef(ref) {
-                if (ref) {
-                  if (
-                    document.activeElement &&
-                    document.activeElement.tagName !== 'SELECT'
-                  ) {
-                    ref.focus();
-                  }
-                }
-              },
-              value: currentRefinement,
-              placeholder: 'Search or enter npm dependency',
-              onChange(e) {
-                refine(e.target.value);
-              },
-              onKeyUp(e) {
-                // If enter with no selection
-                if (e.keyCode === ENTER) {
-                  onManualSelect(e.target.value);
-                }
-              },
-            })}
-          />
-          <Pagination />
+import { AutoCompleteInput, SuggestionInput } from './elements';
+
+/* eslint-disable no-param-reassign */
+
+function getName(value: string) {
+  const scope = value[0] === '@' ? '@' : '';
+  value = scope ? value.substr(1) : value;
+
+  return scope + value.split('@')[0];
+}
+
+function isExplicitVersion(value: string) {
+  const scope = value[0] === '@' ? '@' : '';
+  value = scope ? value.substr(1) : value;
+
+  return value.includes('@');
+}
+
+function getVersion(value: string, hit) {
+  return value.indexOf('@') > 0
+    ? value.split('@')[1]
+    : hit
+      ? hit.version
+      : null;
+}
+
+function getIsValid(value: string, hit, version: string) {
+  return Boolean(
+    hit &&
+      hit.name.startsWith(getName(value)) &&
+      (version in hit.tags || version in hit.versions)
+  );
+}
+
+function getHit(value: string, hits) {
+  return value && hits.find(hit => hit.name.startsWith(value));
+}
+
+class RawAutoComplete extends React.Component {
+  state = {
+    value: '',
+  };
+
+  render() {
+    const {
+      onSelect,
+      onManualSelect,
+      onHitVersionChange,
+      hits,
+      refine,
+      currentRefinement,
+    } = this.props;
+
+    const hit = getHit(currentRefinement, hits);
+    const version = getVersion(this.state.value, hit);
+    const isValid = getIsValid(this.state.value, hit, version);
 
+    return (
+      <Downshift itemToString={h => (h ? h.name : h)} onSelect={onSelect}>
+        {({ getInputProps, getItemProps, highlightedIndex }) => (
           <div>
-            {hits.map((hit, index) => (
-              <DependencyHit
-                key={hit.name}
-                {...getItemProps({
-                  item: hit,
-                  index,
-                  highlighted: highlightedIndex === index,
-                  hit,
-                  // Downshift supplies onClick
-                  onVersionChange(version) {
-                    onHitVersionChange(hit, version);
-                  },
-                })}
-              />
-            ))}
+            {highlightedIndex == null && (
+              <SuggestionInput as="div">
+                {isExplicitVersion(this.state.value)
+                  ? this.state.value
+                  : hit
+                    ? hit.name
+                    : currentRefinement}
+                <span
+                  css={{
+                    color: 'var(--color-white-3)',
+                  }}
+                >
+                  {isExplicitVersion(this.state.value)
+                    ? null
+                    : hit && isValid
+                      ? '@' + hit.version
+                      : null}
+                </span>
+              </SuggestionInput>
+            )}
+            <AutoCompleteInput
+              autoFocus
+              {...getInputProps({
+                innerRef(ref) {
+                  if (ref) {
+                    if (
+                      document.activeElement &&
+                      document.activeElement.tagName !== 'SELECT'
+                    ) {
+                      ref.focus();
+                    }
+                  }
+                },
+                value: this.state.value,
+                placeholder: 'Search or enter npm dependency',
+
+                onChange: e => {
+                  const name = e.target.value;
+
+                  this.setState({ value: name }, () => {
+                    if (name.indexOf('@') === 0) {
+                      const parts = name.split('@');
+
+                      refine(`@${parts[1]}`);
+                      return;
+                    }
+
+                    const parts = name.split('@');
+
+                    requestAnimationFrame(() => {
+                      refine(`${parts[0]}`);
+                    });
+                  });
+                },
+
+                onKeyUp: e => {
+                  // If enter with no selection
+                  if (e.keyCode === ENTER) {
+                    onManualSelect(
+                      isExplicitVersion(this.state.value)
+                        ? e.target.value
+                        : hit && isValid
+                          ? hit.name + '@' + hit.version
+                          : e.target.value
+                    );
+                  }
+                },
+              })}
+            />
+            <Pagination />
+
+            <div>
+              {hits.map((h, index) => (
+                <DependencyHit
+                  key={h.name}
+                  {...getItemProps({
+                    item: h,
+                    index,
+                    highlighted: highlightedIndex === index,
+                    hit: h,
+                    // Downshift supplies onClick
+                    onVersionChange(v) {
+                      onHitVersionChange(h, v);
+                    },
+                  })}
+                />
+              ))}
+            </div>
           </div>
-        </div>
-      )}
-    </Downshift>
-  );
+        )}
+      </Downshift>
+    );
+  }
 }
 
 export default RawAutoComplete;

packages/app/src/app/pages/Sandbox/SearchDependencies/dependencies.css

@@ -10,4 +10,5 @@
   border-radius: 0;
   display: flex;
   justify-content: center;
+  padding: 0;
 }