@blaze-cms/plugin-search-ui 0.110.0-alpha.1

package/lib-es/components/useSearchResults/useSearchResults.js

@@ -0,0 +1,57 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import { useState, useEffect } from 'react';
+import useSearch from '../useSearch';
+
+function useSearchResults({
+  queryKey,
+  resultKeys,
+  entities,
+  fields
+}) {
+  const [{
+    searchedValue,
+    loading,
+    data: {
+      results,
+      total
+    }
+  }, setParams] = useSearch({
+    queryKey,
+    resultKeys,
+    entities,
+    fields
+  });
+  const [currentResults, setCurrentResults] = useState([]);
+  const [allResults, setAllResults] = useState([]);
+  useEffect(() => {
+    if (currentResults.length !== results.length) {
+      setAllResults([...allResults, ...results]);
+      setCurrentResults(results);
+    }
+  }, [allResults, currentResults, currentResults.length, results]);
+
+  const clearList = params => {
+    setAllResults([]);
+    setParams(_objectSpread(_objectSpread({}, params), {}, {
+      offset: 0
+    }));
+  };
+
+  const setQueryParams = params => {
+    params.value !== searchedValue ? clearList(params) : setParams(params);
+  };
+
+  return [{
+    loading,
+    results: allResults,
+    total
+  }, setQueryParams];
+}
+
+export default useSearchResults;
+//# sourceMappingURL=useSearchResults.js.map

package/lib-es/components/useSearchResults/useSearchResults.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/useSearchResults/useSearchResults.js"],"names":["useState","useEffect","useSearch","useSearchResults","queryKey","resultKeys","entities","fields","searchedValue","loading","data","results","total","setParams","currentResults","setCurrentResults","allResults","setAllResults","length","clearList","params","offset","setQueryParams","value"],"mappings":";;;;;;AAAA,SAASA,QAAT,EAAmBC,SAAnB,QAAoC,OAApC;AACA,OAAOC,SAAP,MAAsB,cAAtB;;AAEA,SAASC,gBAAT,CAA0B;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,UAAZ;AAAwBC,EAAAA,QAAxB;AAAkCC,EAAAA;AAAlC,CAA1B,EAAsE;AACpE,QAAM,CACJ;AACEC,IAAAA,aADF;AAEEC,IAAAA,OAFF;AAGEC,IAAAA,IAAI,EAAE;AAAEC,MAAAA,OAAF;AAAWC,MAAAA;AAAX;AAHR,GADI,EAMJC,SANI,IAOFX,SAAS,CAAC;AAAEE,IAAAA,QAAF;AAAYC,IAAAA,UAAZ;AAAwBC,IAAAA,QAAxB;AAAkCC,IAAAA;AAAlC,GAAD,CAPb;AAQA,QAAM,CAACO,cAAD,EAAiBC,iBAAjB,IAAsCf,QAAQ,CAAC,EAAD,CAApD;AACA,QAAM,CAACgB,UAAD,EAAaC,aAAb,IAA8BjB,QAAQ,CAAC,EAAD,CAA5C;AAEAC,EAAAA,SAAS,CACP,MAAM;AACJ,QAAIa,cAAc,CAACI,MAAf,KAA0BP,OAAO,CAACO,MAAtC,EAA8C;AAC5CD,MAAAA,aAAa,CAAC,CAAC,GAAGD,UAAJ,EAAgB,GAAGL,OAAnB,CAAD,CAAb;AACAI,MAAAA,iBAAiB,CAACJ,OAAD,CAAjB;AACD;AACF,GANM,EAOP,CAACK,UAAD,EAAaF,cAAb,EAA6BA,cAAc,CAACI,MAA5C,EAAoDP,OAApD,CAPO,CAAT;;AAUA,QAAMQ,SAAS,GAAGC,MAAM,IAAI;AAC1BH,IAAAA,aAAa,CAAC,EAAD,CAAb;AACAJ,IAAAA,SAAS,iCAAMO,MAAN;AAAcC,MAAAA,MAAM,EAAE;AAAtB,OAAT;AACD,GAHD;;AAKA,QAAMC,cAAc,GAAGF,MAAM,IAAI;AAC/BA,IAAAA,MAAM,CAACG,KAAP,KAAiBf,aAAjB,GAAiCW,SAAS,CAACC,MAAD,CAA1C,GAAqDP,SAAS,CAACO,MAAD,CAA9D;AACD,GAFD;;AAIA,SAAO,CAAC;AAAEX,IAAAA,OAAF;AAAWE,IAAAA,OAAO,EAAEK,UAApB;AAAgCJ,IAAAA;AAAhC,GAAD,EAA0CU,cAA1C,CAAP;AACD;;AAED,eAAenB,gBAAf","sourcesContent":["import { useState, useEffect } from 'react';\nimport useSearch from '../useSearch';\n\nfunction useSearchResults({ queryKey, resultKeys, entities, fields }) {\n  const [\n    {\n      searchedValue,\n      loading,\n      data: { results, total }\n    },\n    setParams\n  ] = useSearch({ queryKey, resultKeys, entities, fields });\n  const [currentResults, setCurrentResults] = useState([]);\n  const [allResults, setAllResults] = useState([]);\n\n  useEffect(\n    () => {\n      if (currentResults.length !== results.length) {\n        setAllResults([...allResults, ...results]);\n        setCurrentResults(results);\n      }\n    },\n    [allResults, currentResults, currentResults.length, results]\n  );\n\n  const clearList = params => {\n    setAllResults([]);\n    setParams({ ...params, offset: 0 });\n  };\n\n  const setQueryParams = params => {\n    params.value !== searchedValue ? clearList(params) : setParams(params);\n  };\n\n  return [{ loading, results: allResults, total }, setQueryParams];\n}\n\nexport default useSearchResults;\n"],"file":"useSearchResults.js"}

package/lib-es/constants.js

@@ -0,0 +1,10 @@
+const SEARCH_ADMIN = 'SEARCH_ADMIN';
+const SEARCH_PUBLISHED = 'SEARCH_PUBLISHED';
+const SEARCH_RESULTS_OVER_SCAN_BUFFER = 0;
+const SEARCH_RESULTS_ELEMETS_HEIGHT_ABOVE_LIST = 186;
+const SEARCH_RESULTS_ITEM_SIZE = 105;
+const DEFAULT_RESULTS_KEYS = 'name, url';
+const SEARCH_BUTTON = 'search-button';
+const FILE = 'file';
+export { SEARCH_ADMIN, SEARCH_PUBLISHED, SEARCH_RESULTS_OVER_SCAN_BUFFER, SEARCH_RESULTS_ELEMETS_HEIGHT_ABOVE_LIST, SEARCH_RESULTS_ITEM_SIZE, DEFAULT_RESULTS_KEYS, SEARCH_BUTTON, FILE };
+//# sourceMappingURL=constants.js.map

package/lib-es/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.js"],"names":["SEARCH_ADMIN","SEARCH_PUBLISHED","SEARCH_RESULTS_OVER_SCAN_BUFFER","SEARCH_RESULTS_ELEMETS_HEIGHT_ABOVE_LIST","SEARCH_RESULTS_ITEM_SIZE","DEFAULT_RESULTS_KEYS","SEARCH_BUTTON","FILE"],"mappings":"AAAA,MAAMA,YAAY,GAAG,cAArB;AACA,MAAMC,gBAAgB,GAAG,kBAAzB;AACA,MAAMC,+BAA+B,GAAG,CAAxC;AACA,MAAMC,wCAAwC,GAAG,GAAjD;AACA,MAAMC,wBAAwB,GAAG,GAAjC;AACA,MAAMC,oBAAoB,GAAG,WAA7B;AACA,MAAMC,aAAa,GAAG,eAAtB;AACA,MAAMC,IAAI,GAAG,MAAb;AAEA,SACEP,YADF,EAEEC,gBAFF,EAGEC,+BAHF,EAIEC,wCAJF,EAKEC,wBALF,EAMEC,oBANF,EAOEC,aAPF,EAQEC,IARF","sourcesContent":["const SEARCH_ADMIN = 'SEARCH_ADMIN';\nconst SEARCH_PUBLISHED = 'SEARCH_PUBLISHED';\nconst SEARCH_RESULTS_OVER_SCAN_BUFFER = 0;\nconst SEARCH_RESULTS_ELEMETS_HEIGHT_ABOVE_LIST = 186;\nconst SEARCH_RESULTS_ITEM_SIZE = 105;\nconst DEFAULT_RESULTS_KEYS = 'name, url';\nconst SEARCH_BUTTON = 'search-button';\nconst FILE = 'file';\n\nexport {\n  SEARCH_ADMIN,\n  SEARCH_PUBLISHED,\n  SEARCH_RESULTS_OVER_SCAN_BUFFER,\n  SEARCH_RESULTS_ELEMETS_HEIGHT_ABOVE_LIST,\n  SEARCH_RESULTS_ITEM_SIZE,\n  DEFAULT_RESULTS_KEYS,\n  SEARCH_BUTTON,\n  FILE\n};\n"],"file":"constants.js"}

package/lib-es/index.js

@@ -0,0 +1,5 @@
+import SearchAdmin from './components/SearchAdmin';
+import SearchPublishedContent from './components/SearchPublishedContent';
+import SearchBar from './components/SearchAdmin/SearchBar';
+export { SearchAdmin, SearchPublishedContent, SearchBar };
+//# sourceMappingURL=index.js.map

package/lib-es/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.js"],"names":["SearchAdmin","SearchPublishedContent","SearchBar"],"mappings":"AAAA,OAAOA,WAAP,MAAwB,0BAAxB;AACA,OAAOC,sBAAP,MAAmC,qCAAnC;AACA,OAAOC,SAAP,MAAsB,oCAAtB;AAEA,SAASF,WAAT,EAAsBC,sBAAtB,EAA8CC,SAA9C","sourcesContent":["import SearchAdmin from './components/SearchAdmin';\nimport SearchPublishedContent from './components/SearchPublishedContent';\nimport SearchBar from './components/SearchAdmin/SearchBar';\n\nexport { SearchAdmin, SearchPublishedContent, SearchBar };\n"],"file":"index.js"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@blaze-cms/plugin-search-ui",
+  "version": "0.110.0-alpha.1",
+  "description": "Blaze plugin search ui",
+  "main": "lib/index.js",
+  "module": "lib-es/index.js",
+  "sideEffects": false,
+  "directories": {
+    "src": "src/"
+  },
+  "scripts": {
+    "test": "jest",
+    "lint": "yarn run lint:js",
+    "lint:js": "eslint .",
+    "clean": "rm -Rf ./lib/ && rm -Rf ./lib-es/",
+    "build:cjs": "BABEL_ENV=cjs ../../node_modules/.bin/babel ./src --out-dir ./lib --source-maps --root-mode upward",
+    "build:esm": "BABEL_ENV=esm ../../node_modules/.bin/babel ./src --out-dir ./lib-es --source-maps --root-mode upward",
+    "build": "yarn run build:cjs && yarn run build:esm",
+    "build:clean": "yarn run clean && yarn run build",
+    "prepublishOnly": "yarn run build:clean",
+    "postpublish": "yarn run clean"
+  },
+  "author": {
+    "email": "hello@thebyte9.com",
+    "name": "Byte9",
+    "url": "https://thebyte9.com"
+  },
+  "license": "GPL-3.0",
+  "dependencies": {
+    "@blaze-cms/admin-ui-utils": "^0.102.0",
+    "@blaze-cms/core-errors": "^0.102.0",
+    "@blaze-cms/setup-ui": "^0.92.0",
+    "@blaze-react/button": "0.5.19",
+    "@blaze-react/input": "0.5.30",
+    "@blaze-react/utils": "0.5.15",
+    "classnames": "^2.2.6",
+    "core-js": "^3.2.1",
+    "graphql-tag": "^2.10.1",
+    "react-router-dom": "^5.0.1",
+    "react-tiny-virtual-list": "2.2.0"
+  },
+  "devDependencies": {
+    "@blaze-cms/core-ui": "^0.110.0-alpha.1"
+  },
+  "peerDependencies": {
+    "@blaze-cms/admin": "^0.97.2",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1",
+    "react-apollo": "^3.1.1"
+  },
+  "eslintIgnore": [
+    "lib/*",
+    "lib-es/*"
+  ],
+  "gitHead": "35f5b02ddd0690ef295f6a2881a1b217eaceee4c"
+}

package/src/application/query/index.js

@@ -0,0 +1,28 @@
+import gql from 'graphql-tag';
+
+const SEARCH_ADMIN = () => gql`
+  query searchAdmin($limit: Int, $offset: Int, $sort: String, $rawQuery: JSON!) {
+    search: searchAdmin(limit: $limit, offset: $offset, sort: $sort, rawQuery: $rawQuery) {
+      jsonResults
+      total
+    }
+  }
+`;
+
+const SEARCH_PUBLISHED = ({ resultKeys }) => gql`
+  query searchPublishedContent($limit: Int, $offset: Int, $sort: String, $rawQuery: JSON!) {
+    search: searchPublishedContent(
+      limit: $limit
+      offset: $offset
+      sort: $sort
+      rawQuery: $rawQuery
+    ) {
+      results {
+        ${resultKeys}
+      }
+      total
+    }
+  }
+`;
+
+export default { SEARCH_ADMIN, SEARCH_PUBLISHED };

package/src/components/SearchAdmin/RecentSearches/RecentSearches.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const RecentSearches = ({ recentSearches, handleSearchTerm, search }) => (
+  <div className="list list--search">
+    <div className="header header--list">
+      <h2>Recent searches</h2>
+    </div>
+    {recentSearches.map(searchedTerm => (
+      <div
+        key={searchedTerm}
+        role="button"
+        className="list__item list__item--search"
+        onClick={() => {
+          handleSearchTerm({ target: { value: searchedTerm } });
+          search({ value: searchedTerm });
+        }}>
+        <div className="list__item-row list__item-row--search">
+          <i className="material-icons">search</i>
+          <div className="list__item-text list__item-text--search">{searchedTerm}</div>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+RecentSearches.propTypes = {
+  recentSearches: PropTypes.array.isRequired,
+  handleSearchTerm: PropTypes.func.isRequired,
+  search: PropTypes.func.isRequired
+};
+
+export default RecentSearches;

package/src/components/SearchAdmin/RecentSearches/index.js

@@ -0,0 +1,3 @@
+import RecentSearches from './RecentSearches';
+
+export default RecentSearches;

package/src/components/SearchAdmin/SearchAdmin.js

@@ -0,0 +1,129 @@
+import React, { useState, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import useLocalStorage from '../useLocalStorage';
+import SearchBar from './SearchBar';
+import RecentSearches from './RecentSearches';
+import SearchResults from './SearchResults';
+import TriggerModal from './TriggerModal';
+import useSearchResults from '../useSearchResults';
+import { SEARCH_ADMIN } from '../../constants';
+
+const SearchAdmin = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [recentSearches, setRecentSearches] = useLocalStorage('recentSearches', []);
+  const [displaySearchModalFrame, setDisplaySearchModalFrame] = useState(false);
+  const [enableResults, setEnableResults] = useState(true);
+  const searchInputRef = useRef(null);
+  const [{ loading, results, total }, setQueryParams] = useSearchResults({
+    queryKey: SEARCH_ADMIN
+  });
+
+  useEffect(
+    () => {
+      if (searchInputRef && searchInputRef.current) {
+        searchInputRef.current.focus();
+      }
+    },
+    [displaySearchModalFrame]
+  );
+
+  const handleSearchTerm = ({ target: { value } }) => {
+    setSearchTerm(value);
+  };
+  const toggleSearchModal = () => {
+    setSearchTerm(null);
+    setEnableResults(false);
+    setDisplaySearchModalFrame(!displaySearchModalFrame);
+  };
+  const search = ({ value }) => {
+    if (!value) return;
+    !enableResults && setEnableResults(true);
+    const MAX_RECENT_SEARCHES = 5;
+    const recentSearchesCopy = recentSearches.slice();
+
+    if (!recentSearchesCopy.includes(value)) {
+      recentSearchesCopy.push(value);
+      if (recentSearchesCopy.length > MAX_RECENT_SEARCHES) {
+        recentSearchesCopy.shift();
+      }
+    }
+
+    setRecentSearches(recentSearchesCopy);
+    setQueryParams({ value });
+  };
+
+  const handleKeyDown = ({ key }) => {
+    if (key === 'Enter') {
+      if (!searchTerm) return clear();
+      search({ value: searchTerm });
+    }
+  };
+
+  const clear = () => {
+    setSearchTerm('');
+    setEnableResults(false);
+  };
+
+  const searchModalResultsClassName = classnames('modal modal--full-screen modal--search', {
+    'modal--show': displaySearchModalFrame
+  });
+
+  const isEmptySearchTermAndData = !searchTerm && !results.length;
+  const isEmptySearchTermnAndDisabledResults = !searchTerm && !enableResults;
+  const shouldDisplayRecentSearches =
+    isEmptySearchTermAndData || isEmptySearchTermnAndDisabledResults;
+
+  const showResults = enableResults && results.length;
+
+  return (
+    <div className="search search--header">
+      <TriggerModal toggleSearchModal={toggleSearchModal} />
+      <div className={searchModalResultsClassName}>
+        {displaySearchModalFrame && (
+          <>
+            <div className="modal__header modal__header--search">
+              <SearchBar
+                toggleSearchModal={toggleSearchModal}
+                handleKeyDown={handleKeyDown}
+                searchInputRef={searchInputRef}
+                handleSearchTerm={handleSearchTerm}
+                searchTerm={searchTerm}
+                search={() => search({ value: searchTerm })}
+              />
+            </div>
+            {shouldDisplayRecentSearches ? (
+              <RecentSearches
+                recentSearches={recentSearches}
+                handleSearchTerm={handleSearchTerm}
+                search={search}
+              />
+            ) : (
+              <>
+                {!showResults && (
+                  <div className="list list--search">
+                    <div className="header header--list">
+                      <h2>No Results</h2>
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+            {showResults && (
+              <SearchResults
+                currentValue={searchTerm}
+                searchTerm={searchTerm}
+                loading={loading}
+                results={results}
+                total={total}
+                setQueryParams={setQueryParams}
+                closeModal={toggleSearchModal}
+              />
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SearchAdmin;

package/src/components/SearchAdmin/SearchBar/SearchBar.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SearchBar = ({
+  handleKeyDown,
+  searchInputRef,
+  handleSearchTerm,
+  searchTerm,
+  toggleSearchModal,
+  close,
+  search,
+  placeholder
+}) => (
+  <div className="search__wrapper">
+    <input
+      onKeyDown={handleKeyDown}
+      ref={searchInputRef}
+      placeholder={placeholder}
+      type="text"
+      onChange={handleSearchTerm}
+      value={searchTerm}
+    />
+    <span
+      onClick={search}
+      role="button"
+      className="icon-button icon-button--search icon-button--toggle">
+      <i className="material-icons">search</i>
+    </span>
+    {close && (
+      <div className="modal__close">
+        <i className="material-icons" onClick={toggleSearchModal} role="button">
+          close
+        </i>
+      </div>
+    )}
+  </div>
+);
+
+SearchBar.propTypes = {
+  close: PropTypes.bool,
+  handleKeyDown: PropTypes.func.isRequired,
+  searchInputRef: PropTypes.object,
+  handleSearchTerm: PropTypes.func.isRequired,
+  searchTerm: PropTypes.string,
+  toggleSearchModal: PropTypes.func,
+  search: PropTypes.func.isRequired,
+  placeholder: PropTypes.string
+};
+
+SearchBar.defaultProps = {
+  searchTerm: '',
+  close: true,
+  placeholder: 'Search...',
+  toggleSearchModal: null,
+  searchInputRef: null
+};
+
+export default SearchBar;

package/src/components/SearchAdmin/SearchBar/index.js

@@ -0,0 +1,3 @@
+import SearchBar from './SearchBar';
+
+export default SearchBar;

package/src/components/SearchAdmin/SearchResults/SearchResults.js

@@ -0,0 +1,112 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import VirtualList from 'react-tiny-virtual-list';
+import { withRouter } from 'react-router-dom';
+import {
+  SEARCH_RESULTS_OVER_SCAN_BUFFER,
+  SEARCH_RESULTS_ELEMETS_HEIGHT_ABOVE_LIST,
+  SEARCH_RESULTS_ITEM_SIZE,
+  FILE
+} from '../../../constants';
+
+const SearchResults = ({
+  currentValue,
+  loading,
+  results,
+  total,
+  setQueryParams,
+  closeModal,
+  history
+}) => {
+  const [verifiedRanges, setVerifiedRanges] = useState([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handleRenderedItems = async ({ startIndex }) => {
+    const rowsLength = results.length;
+    const loadIndex = Math.floor(rowsLength / 2) - SEARCH_RESULTS_OVER_SCAN_BUFFER;
+    if (loadIndex > 0 && loadIndex < startIndex && !verifiedRanges.includes(loadIndex)) {
+      setQueryParams({ value: currentValue, offset: results.length });
+      setVerifiedRanges([...verifiedRanges, loadIndex]);
+      setCurrentIndex(startIndex + SEARCH_RESULTS_OVER_SCAN_BUFFER);
+    }
+  };
+
+  const getNavigationRoute = ({ id, docType }) =>
+    docType === FILE ? `/media/edit/${id}` : `/data-listing/${docType}/update/${id}`;
+
+  const navigate = ({ id, docType }) => {
+    history.push(getNavigationRoute({ id, docType }));
+    closeModal();
+  };
+
+  const getDateFormat = date => {
+    const newDate = new Date(date);
+    const day = `0${newDate.getDate()}`.slice(-2);
+    const month = `0${newDate.getMonth() + 1}`.slice(-2);
+    const year = String(newDate.getYear()).slice(-2);
+    return `${day}.${month}.${year}`;
+  };
+
+  return (
+    <>
+      {loading && <span>Loading...</span>}
+      <div className="modal__content modal__content--search">
+        <div className="header header--list">
+          <h2>{total} results</h2>
+        </div>
+        <VirtualList
+          width="100%"
+          height={window.innerHeight - SEARCH_RESULTS_ELEMETS_HEIGHT_ABOVE_LIST}
+          itemCount={results.length}
+          itemSize={SEARCH_RESULTS_ITEM_SIZE}
+          overscanCount={SEARCH_RESULTS_OVER_SCAN_BUFFER}
+          scrollToIndex={currentIndex}
+          onItemsRendered={handleRenderedItems}
+          renderItem={({ index, style }) => {
+            const { id, docType, updated, name } = results[index];
+            const updatedDate = updated ? getDateFormat(updated) : null;
+            return (
+              <div key={index} style={style} className="list__item--resultWrapper">
+                <div className="list__item list__item--result">
+                  <div className="list__item-row list__item-row--result">
+                    <span className="badge badge--primary">
+                      {docType} {updatedDate}
+                    </span>
+                    <a
+                      href={getNavigationRoute({
+                        id,
+                        docType
+                      })}
+                      onClick={() =>
+                        navigate({
+                          id,
+                          docType
+                        })
+                      }
+                      className="list__item-text list__item-text--result">
+                      {name}
+                    </a>
+                  </div>
+                </div>
+              </div>
+            );
+          }}
+        />
+      </div>
+    </>
+  );
+};
+
+SearchResults.propTypes = {
+  loading: PropTypes.bool.isRequired,
+  results: PropTypes.array.isRequired,
+  total: PropTypes.number.isRequired,
+  setQueryParams: PropTypes.func.isRequired,
+  closeModal: PropTypes.func.isRequired,
+  history: PropTypes.object.isRequired,
+  currentValue: PropTypes.string.isRequired
+};
+
+export default withRouter(SearchResults);

package/src/components/SearchAdmin/SearchResults/index.js

@@ -0,0 +1,3 @@
+import SearchResults from './SearchResults';
+
+export default SearchResults;

package/src/components/SearchAdmin/TriggerModal/TriggerModal.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const TriggerModal = ({ toggleSearchModal }) => (
+  <span
+    role="button"
+    className="material-icons searchModal-search-icon"
+    onClick={toggleSearchModal}>
+    search
+  </span>
+);
+
+TriggerModal.propTypes = {
+  toggleSearchModal: PropTypes.func.isRequired
+};
+
+export default TriggerModal;

package/src/components/SearchAdmin/TriggerModal/index.js

@@ -0,0 +1,3 @@
+import TriggerModal from './TriggerModal';
+
+export default TriggerModal;

package/src/components/SearchAdmin/index.js

@@ -0,0 +1,3 @@
+import SearchAdmin from './SearchAdmin';
+
+export default SearchAdmin;