feat(search): adding initial masthead search components (wip)

Author: jeffchew

.yarn/offline-mirror/object-assign-3.0.0.tgz

@@ -109,6 +109,7 @@
     "promise": "^8.0.1",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
+    "react-autosuggest": "^9.4.3",
     "react-dom": "^16.8.6",
     "react-test-renderer": "^16.8.6",
     "requestanimationframe": "^0.0.23",

.yarn/offline-mirror/react-autosuggest-9.4.3.tgz

@@ -0,0 +1,232 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useReducer } from 'react';
+import PropTypes from 'prop-types';
+import { SearchTypeaheadAPI } from '@ibmdotcom/services';
+import { escapeRegExp } from '@ibmdotcom/utilities';
+import { MastheadSearchInput, MastheadSearchSuggestion } from './';
+
+
+/**
+ * Converts the string to lower case and trims extra white space
+ *
+ * @param {string} valueString The text field
+ * @returns {string} lower cased and trimmed text
+ */
+const _trimAndLower = valueString => valueString.toLowerCase().trim();
+
+/**
+ * When a suggestion item is clicked, we populate the input with its name field
+ *
+ * @param {object} suggestion The individual object from the data
+ * @returns {*} The name val
+ */
+const _getSuggestionValue = suggestion => suggestion.name;
+
+/**
+ * Initial state of the autocomplete component
+ *
+ * @type {{val: string, prevSuggestions: Array, suggestions: Array, suggestionContainerVisible: boolean}}
+ * @private
+ */
+const _initialState = {
+  val: '',
+  suggestions: [],
+  prevSuggestions: [],
+  suggestionContainerVisible: false,
+};
+
+/**
+ * Reducer for the useReducer hook
+ *
+ * @param {object} state The state
+ * @param {object} action contains the type and payload
+ * @returns {*} the new state value
+ * @private
+ */
+function _reducer(state, action) {
+  switch (action.type) {
+    case 'setVal':
+      return Object.assign({}, state, {val: action.payload.val});
+    case 'emptySuggestions':
+      return Object.assign({}, state, {suggestions: []});
+    case 'setPrevSuggestions':
+      return Object.assign({}, state, {prevSuggestions: action.payload.prevSuggestions});
+    case 'setSuggestionsToPrevious':
+      return Object.assign({}, state, {suggestions: state.prevSuggestions});
+    case 'showSuggestionsContainer':
+      return Object.assign({}, state, {suggestionContainerVisible: true});
+    case 'hideSuggestionsContainer':
+      return Object.assign({}, state, {suggestionContainerVisible: false});
+    default:
+      return state;
+  }
+}
+
+/**
+ * MastheadSearch component which includes autosuggestion results from the
+ * SearchTypeaheadAPI
+ *
+ * The search field utilizes "react-autosuggest". Documentation available here:
+ * http://react-autosuggest.js.org/
+ * https://github.com/moroshko/react-autosuggest
+ *
+ * @param {string} placeHolderText Placeholder text for the search field
+ * @param {number} renderValue Number of characters to begin showing suggestions
+ * @param {Function} getSuggestionValue Function for getting the suggestion value
+ * @class
+ */
+const MastheadSearch = ({
+    placeHolderText,
+    renderValue,
+}) => {
+  const [state, dispatch] = useReducer(_reducer, _initialState);
+
+  /**
+   * When the input field changes, we set the new val to our state
+   *
+   * @param {event} event The callback event
+   * @param {string} newValue The new val of the input
+   */
+  function onChange(event, { newValue }) {
+    dispatch({type: 'setVal', payload: {val: newValue}});
+  }
+
+  /**
+   * Autosuggest will pass through all these props to the input.
+   *
+   * @type {{onBlur: onBlur, onChange: onChange, placeholder: *, value: *, onFocus: onFocus}}
+   */
+  const inputProps = {
+    placeholder: placeHolderText,
+    value: state.val,
+    onChange,
+    onFocus: (e) => { e.target.placeholder = ''; },
+    onBlur: (e) => { e.target.placeholder = placeHolderText; },
+  };
+
+  /**
+   * Renders the input bar with the search icon
+   *
+   * @param {object} componentInputProps contains the input props
+   * @returns {*} The rendered component
+   */
+  function renderInputComponent(componentInputProps) {
+    return (
+      <MastheadSearchInput
+        componentInputProps={componentInputProps}
+        dispatch={dispatch}
+      />
+    );
+  }
+
+  /**
+   * Renders the Suggestion Value with the function for the adding the suggestion
+   *
+   * @param {object} suggestion The suggestion
+   * @param {string} query The query being searched for
+   * @param {boolean} isHighlighted Whether the suggestion is currently highlighted by the user
+   * @returns {*} The suggestion value
+   */
+  function renderSuggestionValue(suggestion, {query, isHighlighted}) {
+    return (
+      <MastheadSearchSuggestion
+        suggestion={suggestion}
+        query={query}
+        isHighlighted={isHighlighted}
+        getSuggestionValue={_getSuggestionValue}
+      />
+    );
+  }
+
+  /**
+   * This function is called everytime we need new suggestions. If input has
+   * changed, we fetch for new suggestions else we return the previous
+   * suggestions
+   *
+   * Available reason values:
+   * https://github.com/moroshko/react-autosuggest#onsuggestionsfetchrequested-required
+   *
+   * @param {object} request Object response from when onSuggestionsFetchRequested is called
+   * @param {string} request.value the current value of the input
+   * @param {string} request.reason string describing why onSuggestionsFetchRequested was called
+   */
+  function onSuggestionsFetchRequest(request) {
+    const searchValue = _trimAndLower(escapeRegExp(request.value));
+
+    if (request.reason === 'input-changed') { // if the search input has changed
+      SearchTypeaheadAPI.getResults(searchValue).then((response) => {
+        dispatch({type: 'setPrevSuggestions', payload: {prevSuggestions: response}});
+        dispatch({type: 'setSuggestionsToPrevious'});
+        dispatch({type: 'showSuggestionsContainer'});
+      });
+    } else {
+      dispatch({type: 'setSuggestionsToPrevious'});
+      dispatch({type: 'showSuggestionsContainer'});
+    }
+  }
+
+  /**
+   * Called every time we clear suggestions
+   */
+  function onSuggestionsClearedRequested() {
+    dispatch({type: 'emptySuggestions'});
+    dispatch({type: 'hideSuggestionsContainer'});
+  }
+
+  /**
+   * Only render suggestions if we have more than the renderValue
+   *
+   * @param {string} value Name of the suggestion
+   * @returns {boolean} Whether or not to display the value
+   */
+  function shouldRenderSuggestions(value) {
+    return value.trim().length >= renderValue;
+  }
+
+  return (
+    <div
+      data-autoid="masthead__search"
+    >
+      <Autosuggest
+        suggestions={state.suggestions} // The state value of suggestion
+        onSuggestionsFetchRequested={onSuggestionsFetchRequest} // Method to fetch data (should be async call)
+        onSuggestionsClearRequested={onSuggestionsClearedRequested} // When input bar loses focus
+        getSuggestionValue={_getSuggestionValue} // Name of suggestion
+        renderSuggestion={renderSuggestionValue} // How to display a suggestion
+        onSuggestionSelected={null} // When a suggestion is selected
+        highlightFirstSuggestion // First suggestion is highlighted by default
+        inputProps={inputProps}
+        renderInputComponent={renderInputComponent}
+        shouldRenderSuggestions={shouldRenderSuggestions}
+      />
+    </div>
+  );
+};
+
+/**
+ * @property propTypes
+ * @description Defined property types for component
+ * @type {{items: *}}
+ */
+MastheadSearch.propTypes = {
+  placeHolderText: PropTypes.string,
+  renderValue: PropTypes.number,
+};
+
+/**
+ *
+ * @type {{setSuggestionValue: (function(*=): {name: *}), placeHolderText: string, renderValue: number}}
+ */
+MastheadSearch.defaultProps = {
+  placeHolderText: '',
+  renderValue: 3,
+};
+
+// Export the react component
+export default MastheadSearch;

.yarn/offline-mirror/react-autowhatever-10.2.0.tgz

@@ -0,0 +1,28 @@
+import React from 'react';
+import classNames from 'classnames';
+
+/**
+ * Renders the input bar with the search icon
+ *
+ * @param {object} componentInputProps contains the input props
+ * @param {Function} dispatch for component reducer
+ * @returns {*} The rendered component
+ */
+export const MastheadSearchInput = (
+  componentInputProps,
+  dispatch
+) => (
+  <div>
+    <input
+      {...componentInputProps}
+      /*className={styles.input}*/
+    />
+    <button
+      type="button"
+      className={styles.closeButton}
+      onClick={() => dispatch({type: 'setVal', payload: {val: ''}})}
+    >
+      <CloseButtonIcon className={styles.closeIcon}/>
+    </button>
+  </div>
+);

.yarn/offline-mirror/react-themeable-1.1.0.tgz

@@ -0,0 +1,67 @@
+import React from 'react';
+import classNames from 'classnames';
+import parse from 'autosuggest-highlight/parse';
+
+/**
+ * Matches a suggestion name with the query
+ *
+ * @param {*}regexp The regex expression containg the query and the global match flag
+ * @param {string} haystack The suggestion
+ * @returns {Array} Array of matches
+ * @private
+ */
+function _matchAll(regexp, haystack) {
+  const matches = [];
+  let match = regexp.exec(haystack);
+  while (match) {
+    matches.push([
+      match.index,
+      match.index + match[0].length,
+    ]);
+    match = regexp.exec(haystack);
+  }
+  return matches;
+}
+
+/**
+ * The rendered suggestion in the suggestion list
+ *
+ * @param {object} suggestion The individual object from the data
+ * @param {string} query The query being searched for
+ * @param {boolean} isHighlighted Whether the suggestion is currently highlighted by the user
+ * @param {Function} getSuggestionValue Gets the suggestion value
+ * @returns {*} The individual suggested item with styles
+ * @class
+ */
+export const MastheadSearchSuggestion = (
+  suggestion,
+  query,
+  isHighlighted,
+  getSuggestionValue,
+) => {
+  const suggestionValue = getSuggestionValue(suggestion);
+  const matches = _matchAll(new RegExp(query, 'gi'), suggestionValue);
+  const parts = parse(suggestionValue, matches);
+
+  return (
+    <div
+      className={classNames(
+        styles.suggestion,
+        {[styles.highlightedContainer]: isHighlighted},
+      )}
+    >
+      <div className={styles.suggestionText}>
+        {
+          parts.map((part, index) => (
+            <span
+              className={classNames({[styles.highlightText]: part.highlight})}
+              key={index}
+            >
+                {part.text}
+            </span>
+          ))
+        }
+      </div>
+    </div>
+  );
+};

.yarn/offline-mirror/section-iterator-2.0.0.tgz

@@ -0,0 +1,14 @@
+/**
+ * @module Utilities/escaperegexp
+ */
+
+/**
+ * Utiltity function for escaping regex expressions
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping
+ *
+ * @param {string} str String to escape regex
+ * @returns {*} Final string with escaped regex
+ */
+export function escapeRegExp(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}

packages/react/package.json

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export * from './escaperegexp';

packages/react/src/components/Masthead/MastheadSearch.jsx

@@ -5,4 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+export * from './escaperegexp';
 export * from './serialize';