@uncinc/uncinc-react-kitchen-sink 2.3.6 → 2.4.0

package/dist/components/SearchKit/Facets/ChipFacet/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSearchkit } from '@searchkit/client';
-import Button from '../../../Button';
 import classNames from 'classnames';
+import Button from '../../../Button';
 const makeSafeForCSS = value => {
   return encodeURIComponent(value).replace(/\.|%[0-9a-z]{2}/gi, '');
 };

package/dist/components/SearchKit/Facets/ListFacet/index.js

@@ -21,6 +21,7 @@ export const ListFacet = ({
       className: classes,
       key: entry.label
     }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
       onClick: () => {
         api.toggleFilter({
           identifier: facet.identifier,

package/dist/components/SearchKit/Facets/SelectFacet/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useSearchkit, useSearchkitVariables } from '@searchkit/client';
-import Select from '../../../Form/Select';
-import FormikWrapper from '../../../Form/FormikWrapper';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
+import Select from '../../../Form/Select';
+import FormikWrapper from '../../../Form/FormikWrapper';
 const useInitialValues = () => {
   const parsed = useSearchkitVariables();
   const filters = {};

package/dist/components/SearchKit/SearchFacets/index.js

@@ -2,10 +2,8 @@ import React from 'react';
 import { SelectFacet } from '../Facets/SelectFacet';
 import { ListFacet } from '../Facets/ListFacet';
 import { ChipFacet } from '../Facets/ChipFacet';
-import { HierarchicalFilterFacet } from '../Facets/HierarchicalFilterFacet';
-import { HierarchicalMenuFacet } from '../Facets/HierarchicalMenuFacet';
 const FacetList = (components = []) => {
-  const FacetsMapper = [HierarchicalFilterFacet, HierarchicalMenuFacet, SelectFacet, ChipFacet, ListFacet, ...components].reduce((sum, component) => {
+  const FacetsMapper = [SelectFacet, ChipFacet, ListFacet, ...components].reduce((sum, component) => {
     sum[component.DISPLAY] = component;
     return sum;
   }, {});

package/dist/components/SearchKit/SearchField/index.js

@@ -1,5 +1,5 @@
-import React, { useRef } from "react";
-import { useSearchkit, useSearchkitQueryValue } from "@searchkit/client";
+import React, { useRef } from 'react';
+import { useSearchkit, useSearchkitQueryValue } from '@searchkit/client';
 import FormikWrapper from '../../Form/FormikWrapper';
 import Button from '../../Button';
 import TextField from '../../Form/TextField';
@@ -42,7 +42,7 @@ const SearchField = ({
     displayRequiredIndicator: "required",
     enableReinitialize: true,
     onSubmit: onSubmit
-  }, /*#__PURE__*/React.createElement(TextField, {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextField, {
     fieldName: "query",
     title: fieldLabel,
     placeholder: placeholder,
@@ -50,7 +50,7 @@ const SearchField = ({
   }), !autoSearch && /*#__PURE__*/React.createElement(Button, {
     type: "submit",
     primary: true
-  }, buttonText));
+  }, buttonText)));
 };
 SearchField.defaultProps = {
   timeout: 1000,

package/dist/components/SearchKit/SearchPage/index.js

@@ -1,9 +1,16 @@
 import React from 'react';
+import c from 'classnames';
 import { withSearchkitRouting } from '@searchkit/client';
-import { EuiPage } from '@elastic/eui';
 const SearchPage = ({
+  className,
   children
-}) => /*#__PURE__*/React.createElement(EuiPage, null, children);
+}) => {
+  // Adding euiPage className for backwards compatibility.
+  const classNames = c('euiPage', className);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames
+  }, children);
+};
 export const routeToStateFn = routeState => {
   const value = {
     query: routeState.query || '',

package/dist/components/SearchKit/SearchReset/index.js

@@ -1,13 +1,25 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
-import { ResetSearchButton } from '@searchkit/elastic-ui';
+import { useSearchkit } from '@searchkit/client';
+import { useTranslation } from 'react-i18next';
+import Button from '../../Button';
 const SearchReset = ({
-  data,
-  loading
+  loading,
+  children,
+  ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "SearchSorting"
-  }, /*#__PURE__*/React.createElement(ResetSearchButton, {
-    loading: loading
-  }));
+  const {
+    t
+  } = useTranslation();
+  const api = useSearchkit();
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    htmlType: "button",
+    className: "SearchSorting",
+    disabled: !api.canResetSearch() || loading,
+    onClick: () => {
+      api.setQuery('');
+      api.search();
+    }
+  }, props), children || t('searchkit.reset_search', 'Reset search'));
 };
 export default SearchReset;

package/dist/components/SearchKit/SearchResults/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import usePrevious from '../../../hooks/usePrevious';
 import { useSearchkitVariables } from '@searchkit/client';
 import PropTypes from 'prop-types';
+import usePrevious from '../../../hooks/usePrevious';
 const SearchResultItemDefault = ({
   item
 }) => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, item.fields.title[0]));
@@ -24,12 +24,14 @@ const SearchResults = ({
   const [previousActiveFilters, setPreviousActiveFilters] = useState(variables.filters);
   const [previousSortBy, setPreviousSortBy] = useState(variables.sortBy);
   const [searchResultItems, setSearchResultItems] = useState( /*#__PURE__*/React.createElement(React.Fragment, null));
-  const [currentData, setCurrentData] = useState("");
+  const [currentData, setCurrentData] = useState('');
   const previousPage = usePrevious(currentPage);
   const previousItems = usePrevious(items);
   useEffect(() => {
-    if (typeof data.results === 'undefined') return;
-    setCurrentPage(data.results.hits.page.pageNumber);
+    if (!data || typeof data.results === 'undefined') {
+      return;
+    }
+    setCurrentPage(data.results.hits?.page?.pageNumber || 0);
     setPreviousQuery(variables.query);
     setPreviousSortBy(variables.sortBy);
     setPreviousActiveFilters(variables.filters);
@@ -71,8 +73,10 @@ const SearchResults = ({
 
   // Scroll to top on every page.
   useEffect(() => {
-    if (typeof data.results === 'undefined') return;
-    const currentPageNumber = data?.results?.hits?.page?.pageNumber;
+    if (!data || typeof data.results === 'undefined') {
+      return;
+    }
+    const currentPageNumber = data.results.hits?.page?.pageNumber || 0;
     if (appendResults === false && scrollView && scrollView.current && currentPageNumber !== 0) {
       scrollView.current.scrollIntoView({
         behavior: 'smooth',

package/dist/components/SearchKit/SearchSelectedFilters/Filters/CustomValue/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useSearchkit } from '@searchkit/client';
+import Button from '../../../../Button';
+const CustomValueFilter = ({
+  filter
+}) => {
+  const api = useSearchkit();
+  return /*#__PURE__*/React.createElement(Button, {
+    onClick: () => {
+      api.removeFilter(filter);
+      api.search();
+    }
+  }, filter.label, ": ", filter.value);
+};
+export default CustomValueFilter;

package/dist/components/SearchKit/SearchSelectedFilters/Filters/DateRange/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSearchkit } from '@searchkit/client';
+import Button from '../../../../Button';
+const DateRangeFilter = ({
+  filter,
+  loading
+}) => {
+  const api = useSearchkit();
+  return /*#__PURE__*/React.createElement(Button, {
+    disabled: loading,
+    onClick: () => {
+      api.removeFilter(filter);
+      api.search();
+    }
+  }, filter.label, ": ", new Date(filter.dateMin).toDateString(), " -", ' ', new Date(filter.dateMax).toDateString());
+};
+export default DateRangeFilter;

package/dist/components/SearchKit/SearchSelectedFilters/Filters/NumericRange/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSearchkit } from '@searchkit/client';
+import Button from '../../../../Button';
+const NumericRangeFilter = ({
+  filter,
+  loading
+}) => {
+  const api = useSearchkit();
+  return /*#__PURE__*/React.createElement(Button, {
+    disabled: loading,
+    onClick: () => {
+      api.removeFilter(filter);
+      api.search();
+    }
+  }, filter.label, ": ", filter.min, " - ", filter.max);
+};
+export default NumericRangeFilter;

package/dist/components/SearchKit/SearchSelectedFilters/Filters/Value/index.js

@@ -0,0 +1,19 @@
+import React, { useRef } from 'react';
+import { FilterLink } from '@searchkit/client';
+import Button from '../../../../Button';
+const ValueFilter = ({
+  filter,
+  loading
+}) => {
+  const ref = useRef();
+  return /*#__PURE__*/React.createElement(Button, {
+    disabled: loading,
+    onClick: e => {
+      ref.current.onClick(e);
+    }
+  }, /*#__PURE__*/React.createElement(FilterLink, {
+    ref: ref,
+    filter: filter
+  }, filter.label, ": ", filter.value));
+};
+export default ValueFilter;

package/dist/components/SearchKit/SearchSelectedFilters/index.js

@@ -1,37 +1,44 @@
 import React from 'react';
-import { useSearchkit } from '@searchkit/client';
-import { SelectedFilters } from '@searchkit/elastic-ui';
-import Button from '../../Button';
+import CustomValueFilter from './Filters/CustomValue';
+import DateRangeFilter from './Filters/DateRange';
+import NumericRangeFilter from './Filters/NumericRange';
+import ValueFilter from './Filters/Value';
+import './style.scss';
 const SearchSelectedFilters = ({
   data,
   loading
 }) => {
-  const ValueFilter = ({
-    filter,
-    loading
-  }) => {
-    const api = useSearchkit();
-    return /*#__PURE__*/React.createElement(Button, {
-      onClick: () => {
-        api.removeFilter(filter);
-        api.search();
-      }
-    }, filter.label, ": ", filter.value);
-  };
   if (!data) {
     return null;
   }
+  const {
+    results
+  } = data;
+
+  // All filter components are copies of Searchkit's own filters, recreated within our library.
+  // Only the CustomValueFilter is a completely custom filter, written by us. Hence the name.
+  const filterComponentMap = {
+    ListFacet: CustomValueFilter,
+    RangeSliderFacet: NumericRangeFilter,
+    DateRangeFacet: DateRangeFilter,
+    ComboBoxFacet: ValueFilter,
+    HierarchicalMenuFacet: ValueFilter,
+    SelectFacet: CustomValueFilter,
+    ChipFacet: CustomValueFilter,
+    HierarchicalFilterFacet: CustomValueFilter
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: "SearchSelectedFilters"
-  }, /*#__PURE__*/React.createElement(SelectedFilters, {
-    data: data.results,
-    loading: loading,
-    customFilterComponents: {
-      SelectFacet: ValueFilter,
-      ListFacet: ValueFilter,
-      ChipFacet: ValueFilter,
-      HierarchicalFilterFacet: ValueFilter
+  }, results?.summary?.appliedFilters.map(filter => {
+    const FilterComponent = filterComponentMap[filter.display] || ValueFilter;
+    if (!filterComponentMap[filter.display]) {
+      throw new Error(`could not display selected filters for ${filter.identifier} facet. Use customFilterComponents prop to pass a component to handle this filter for ${filter.display} display`);
     }
+    return /*#__PURE__*/React.createElement(FilterComponent, {
+      filter: filter,
+      loading: loading,
+      key: filter.id
+    });
   }));
 };
 export default SearchSelectedFilters;

package/dist/components/SearchKit/SearchSelectedFilters/style.scss

@@ -0,0 +1,4 @@
+.SearchSelectedFilters {
+  display: flex;
+  flex-wrap: wrap;
+}

package/dist/components/SearchKit/SearchSorting/index.js

@@ -8,7 +8,7 @@ const useInitialValues = () => {
     'sortBy': parsed.sortBy
   };
 };
-export const SearchSorting = ({
+const SearchSorting = ({
   data,
   loading
 }) => {

package/dist/components/SearchKit/index.js

@@ -1,13 +1,13 @@
 import React, { useEffect, useState, useMemo } from 'react';
-import Query from './Query';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import { SearchkitProvider, SearchkitClient } from '@searchkit/client';
 import PropTypes from 'prop-types';
+import Query from './Query';
 import SearchField from './SearchField';
 import SearchPagination from './SearchPagination';
 import SearchResults from './SearchResults';
 import SearchFacets from './SearchFacets';
-import SearchSelectedFilters from './SearchFacets';
+import SearchSelectedFilters from './SearchSelectedFilters';
 const defaultChildren = (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchField, null), /*#__PURE__*/React.createElement(SearchFacets, {
   data: data,
   loading: loading
@@ -59,7 +59,6 @@ const SearchKit = ({
   }, (data, loading) => children ? children(data, loading) : defaultChildren(data, loading))));
 };
 SearchKit.propTypes = {
-  queryString: PropTypes.string,
   uri: PropTypes.string,
   pageSize: PropTypes.number,
   useRouting: PropTypes.bool,
@@ -67,4 +66,12 @@ SearchKit.propTypes = {
   defaultQuery: PropTypes.string,
   defaultSorting: PropTypes.string
 };
+SearchKit.defaultProps = {
+  uri: null,
+  pageSize: null,
+  useRouting: null,
+  defaultFilters: null,
+  defaultQuery: null,
+  defaultSorting: null
+};
 export default SearchKit;

package/dist/components/SearchKit/stories.js

@@ -14,77 +14,82 @@ export default {
   title: 'Molecules/SearchKit'
 };
 const query = `
-  query resultSet($query: String, $filters: [SKFiltersSet], $page: SKPageInput) {
-    results(query: $query, filters: $filters) {
-      summary {
-        total
-        sortOptions {
-          id
-          label
-        }
-        appliedFilters {
-          id
-          identifier
-          display
-          label
-          ... on HierarchicalValueSelectedFilter {
-            level
-            value
-          }
-          ... on DateRangeSelectedFilter {
-            dateMin
-            dateMax
+  query contentResultSet($query: String, $filters: [SKFiltersSet], $page: SKPageInput, $sortBy: String) {
+    content {
+      results(query: $query, filters: $filters) {
+        summary {
+          total
+          sortOptions {
+            id
+            label
           }
+          appliedFilters {
+            id
+            identifier
+            display
+            label
+            ... on DateRangeSelectedFilter {
+              dateMin
+              dateMax
+            }
 
-          ... on NumericRangeSelectedFilter {
-            min
-            max
-          }
+            ... on NumericRangeSelectedFilter {
+              min
+              max
+            }
 
-          ... on ValueSelectedFilter {
-            value
+            ... on ValueSelectedFilter {
+              value
+            }
           }
+          query
         }
-        query
-      }
-      hits(page: $page) {
-        sortedBy
-        page {
-          total
-          totalPages
-          pageNumber
-          from
-          size
-        }
-        items {
-          id
-          ... on ResultHit {
-            fields {
-              title
-              type
-              body
+        hits(page: $page, sortBy: $sortBy) {
+          sortedBy
+          page {
+            total
+            totalPages
+            pageNumber
+            from
+            size
+          }
+          items {
+            id
+            ... on ContentResultHit {
+              fields {
+                nid
+                title
+                type
+                summary
+                milestone_summary
+                url
+                author_name
+                created
+                image_style_uri
+                field_article_type_name
+                field_download_type_name
+                field_elearning_type_name
+                field_event_type_name
+                field_intervention_type_name
+                field_research_type_name
+                field_practicalexample_type_name
+                field_tool_type_name
+                field_publication_date
+                field_domain_access
+                field_milestone_label
+                combined_types
+              }
             }
           }
         }
-      }
-      facets {
-        identifier
-        type
-        label
-        display
-        entries {
+        facets {
+          identifier
+          type
           label
-          count
-          level
+          display
           entries {
             label
             count
-            level
-            entries {
-              label
-              count
-              level
-            }
           }
         }
       }
@@ -101,22 +106,22 @@ export const Default = () => /*#__PURE__*/React.createElement(SearchKit, {
   uri: "http://localhost:4000/api/graphql",
   query: query
 }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchField, null), /*#__PURE__*/React.createElement(SearchFacets, {
-  data: data,
+  data: data?.content,
   loading: loading
 }), /*#__PURE__*/React.createElement(SearchSelectedFilters, {
-  data: data,
+  data: data?.content,
   loading: loading
 }), /*#__PURE__*/React.createElement(SearchSorting, {
-  data: data,
+  data: data?.content,
   loading: loading
 }), /*#__PURE__*/React.createElement(SearchReset, {
   loading: loading
 }), /*#__PURE__*/React.createElement(SearchResults, {
-  data: data,
+  data: data?.content,
   renderItem: SearchItem,
   renderHeader: SearchHeader
 }), /*#__PURE__*/React.createElement(SearchPagination, {
-  data: data
+  data: data?.content
 })));
 const ListFacet = ({
   facet
@@ -156,23 +161,23 @@ export const CustomFacets = () => {
     uri: "http://localhost:4000/api/graphql",
     query: query
   }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchField, null), /*#__PURE__*/React.createElement(SearchFacets, {
-    data: data,
+    data: data?.content,
     loading: loading,
     facets: customFacets
   }), /*#__PURE__*/React.createElement(SearchSelectedFilters, {
-    data: data,
+    data: data?.content,
     loading: loading
   }), /*#__PURE__*/React.createElement(SearchSorting, {
-    data: data,
+    data: data?.content,
     loading: loading
   }), /*#__PURE__*/React.createElement(SearchReset, {
     loading: loading
   }), /*#__PURE__*/React.createElement(SearchResults, {
-    data: data,
+    data: data?.content,
     renderItem: SearchItem,
     renderHeader: SearchHeader
   }), /*#__PURE__*/React.createElement(SearchPagination, {
-    data: data
+    data: data?.content
   })));
 };
 export const Test = () => {
@@ -190,11 +195,11 @@ export const Test = () => {
     }],
     searchQuery: q
   }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchResults, {
-    data: data,
+    data: data?.content,
     renderItem: SearchItem,
     renderHeader: SearchHeader
   }), /*#__PURE__*/React.createElement(SearchPagination, {
-    data: data
+    data: data?.content
   }))), /*#__PURE__*/React.createElement(SearchKit, {
     uri: "http://localhost:4000/api/graphql",
     query: query,
@@ -205,11 +210,11 @@ export const Test = () => {
     }],
     searchQuery: q
   }, (data, loading) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchResults, {
-    data: data,
+    data: data?.content,
     renderItem: SearchItem,
     renderHeader: SearchHeader
   }), /*#__PURE__*/React.createElement(SearchPagination, {
-    data: data
+    data: data?.content
   }))));
 };
 export const LoadMore = () => {
@@ -223,20 +228,21 @@ export const LoadMore = () => {
   }, (data, loading) => {
     const toggleFilter = () => {
       api.toggleFilter({
-        identifier: "type",
-        value: "22"
+        identifier: 'type',
+        value: '22'
       });
       api.search();
     };
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+      type: "button",
       onClick: toggleFilter
     }, "Toggle"), /*#__PURE__*/React.createElement(SearchResults, {
-      data: data,
+      data: data?.content,
       renderItem: SearchItem,
       renderHeader: SearchHeader,
       appendResults: true
     }), /*#__PURE__*/React.createElement(SearchLoadMore, {
-      data: data
+      data: data?.content
     }));
   });
 };

package/dist/components/Share/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EmailShareButton, FacebookShareButton, LinkedinShareButton, TwitterShareButton, WhatsappShareButton } from "react-share";
+import { EmailShareButton, FacebookShareButton, LinkedinShareButton, TwitterShareButton, WhatsappShareButton } from 'react-share';
 import './style.scss';
 const ShareButton = ({
   type,
@@ -55,10 +55,10 @@ const Share = ({
   }, buttons)));
 };
 Share.defaultProps = {
-  title: "Share this page:",
-  pageTitle: "",
+  title: 'Share this page:',
+  pageTitle: '',
   url: null,
-  items: ["mail", "facebook", "linkedin", "twitter", "whatsapp"],
+  items: ['mail', 'facebook', 'linkedin', 'twitter', 'whatsapp'],
   onClick: () => {}
 };
 export default Share;

package/dist/components/Share/stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Share from './';
+import Share from '.';
 import './stories.scss';
 export default {
   title: 'Organisms/Share'

package/dist/components/Sliders/SliderRelated/index.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
-import Slider from "react-slick";
+import Slider from 'react-slick';
 import useValueForCurrentViewPort from '../../../helpers/useValueForCurrentViewPort';
 import './style.scss';
 const SliderNextArrow = ({