@uncinc/uncinc-react-kitchen-sink 2.2.9 → 2.2.12

package/dist/components/Button/stories.scss

@@ -0,0 +1,45 @@
+@import '../../styles/assets/variables';
+
+.Button {
+  &.Button--styled {
+    display: inline-block;
+    border-radius: 5px;
+    text-decoration: none;
+    text-align: center;
+    cursor: pointer;
+
+    &--primary {
+      font-size: 21px;
+      background-color: black;
+      color: #ffffff;
+      font-weight: 600;
+      line-height: 1.14;
+      padding: 19px 30px;
+
+      &:hover {
+        background-color: #434343;
+      }
+      &:disabled {
+        font-family: inherit;
+        background-color: rgba(0, 0, 0, 0.3);
+      }
+    }
+
+    &--inverted {
+      border: solid 1px #888888;
+      background-color: #ffffff;
+      padding: 18px 34.5px;
+      font-size: 18px;
+      font-weight: 600;
+      color: #000000;
+
+      &:hover {
+        background-color: #f1f1f1;
+      }
+      &:disabled {
+        font-family: inherit;
+        opacity: .5;
+      }
+    }
+  }
+}

package/dist/components/Cookie/Checkbox/style.scss

@@ -1,5 +1,5 @@
-@import 'assets/variables';
-@import 'assets/mixins';
+@import '../../../styles/assets/mixins';
+@import '../../../styles/assets/variables';
 
 // Radio's and checkboxes
 input[type='checkbox'],

package/dist/components/Cookie/stories.scss

@@ -1,6 +1,5 @@
-@import 'assets/variables';
-@import 'assets/mixins';
-
+@import '../../styles/assets/mixins';
+@import '../../styles/assets/variables';
 
 @keyframes fade-out-and-transform {
   0% {

package/dist/components/Cookie/style.scss

@@ -1,5 +1,5 @@
-@import 'assets/variables';
-@import 'assets/mixins';
+@import '../../styles/assets/mixins';
+@import '../../styles/assets/variables';
 
 .Cookie {
   width: 100%;

package/dist/components/Form/Checkboxes/index.js

@@ -30,6 +30,31 @@ function Checkbox(props) {
       'icon-checkmark': true,
       'icon-variant-1': checked
     });
+
+    if (props.value === '__other__') {
+      const inputClasses = c({
+        hidden: !field.value.includes('__other__')
+      });
+      return /*#__PURE__*/React.createElement("label", {
+        className: classes,
+        htmlFor: name
+      }, /*#__PURE__*/React.createElement("input", _extends({}, field, {
+        name: props.name,
+        value: value,
+        type: "checkbox",
+        id: name,
+        checked: checked,
+        disabled: disabled,
+        className: className
+      })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, props.otherLabel ? props.otherLabel : props.label), props.description && /*#__PURE__*/React.createElement("span", null, props.description)), /*#__PURE__*/React.createElement("textarea", {
+        placeholder: props.otherPlaceholder,
+        className: inputClasses,
+        onChange: e => {
+          form.setFieldValue(`${props.name}--other`, e.target.value);
+        }
+      }));
+    }
+
     return /*#__PURE__*/React.createElement("label", {
       className: classes,
       htmlFor: name
@@ -39,21 +64,9 @@ function Checkbox(props) {
       type: "checkbox",
       id: name,
       checked: checked,
-      onChange: e => {
-        const set = new Set(field.value);
-
-        if (set.has(value)) {
-          set.delete(value);
-        } else {
-          set.add(value);
-        }
-
-        form.setFieldValue(field.name, Array.from(set));
-        form.setFieldTouched(field.name, true);
-      },
       disabled: disabled,
       className: className
-    })), props.label);
+    })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, props.label), props.description && /*#__PURE__*/React.createElement("span", null, props.description)));
   });
 }
 
@@ -69,10 +82,13 @@ const Checkboxes = props => {
     error,
     type,
     options,
+    descriptions = {},
     displayRequiredIndicator,
     className,
     wrapperClassName,
-    disabled = false
+    disabled = false,
+    otherLabel,
+    otherPlaceholder
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
     className: c("Checkboxes", wrapperClassName),
@@ -85,9 +101,11 @@ const Checkboxes = props => {
     displayRequiredIndicator: displayRequiredIndicator
   }, Object.keys(options).map(value => {
     const label = options[value];
+    const description = descriptions[value] || null;
     return /*#__PURE__*/React.createElement(Checkbox, {
       key: value,
       label: label,
+      description: description,
       className: c(className, {
         'error': error && touched
       }),
@@ -96,7 +114,9 @@ const Checkboxes = props => {
       value: value,
       placeholder: placeholder,
       validate: validation,
-      disabled: disabled
+      disabled: disabled,
+      otherLabel: otherLabel,
+      otherPlaceholder: otherPlaceholder
     });
   }));
 };

package/dist/components/Form/Checkboxes/stories.js

@@ -10,7 +10,8 @@ export const Checkboxes = props => {
   return /*#__PURE__*/React.createElement(FormikWrapper, _extends({}, props, {
     initialValues: {
       'poison': []
-    }
+    },
+    onSubmit: values => console.log(values)
   }), /*#__PURE__*/React.createElement(FormikCheckboxes, {
     title: "Pick your poison",
     required: true,
@@ -20,7 +21,8 @@ export const Checkboxes = props => {
       beer: 'Beer',
       wine: 'Wine',
       rum: 'Rum',
-      whisky: 'Whisk(e)y'
+      whisky: 'Whisk(e)y',
+      '__other__': 'Anders'
     },
     validation: value => {
       let error;
@@ -30,6 +32,10 @@ export const Checkboxes = props => {
       }
 
       return error;
-    }
+    },
+    otherLabel: "Anders"
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "submit",
+    value: "Verzenden"
   }));
 };

package/dist/components/Form/RadioButtons/index.js

@@ -29,15 +29,14 @@ const Radio = props => {
       const inputClasses = c({
         hidden: field.value !== '__other__'
       });
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("label", {
+        htmlFor: name,
         className: classes
-      }, /*#__PURE__*/React.createElement("label", {
-        htmlFor: name
       }, /*#__PURE__*/React.createElement("input", _extends({}, field, {
         type: "radio",
         id: name,
         value: props.value
-      })), props.otherLabel), /*#__PURE__*/React.createElement("textarea", {
+      })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, props.otherLabel ? props.otherLabel : props.label), props.description && /*#__PURE__*/React.createElement("span", null, props.description)), /*#__PURE__*/React.createElement("textarea", {
         placeholder: props.otherPlaceholder,
         className: inputClasses,
         onChange: e => {
@@ -55,7 +54,7 @@ const Radio = props => {
       id: name,
       value: props.value,
       disabled: disabled
-    })), props.label);
+    })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, props.label), props.description && /*#__PURE__*/React.createElement("span", null, props.description)));
   });
 };
 
@@ -71,6 +70,7 @@ const RadioButtons = props => {
     error,
     type,
     options,
+    descriptions = {},
     otherLabel,
     otherPlaceholder,
     displayRequiredIndicator
@@ -84,11 +84,13 @@ const RadioButtons = props => {
     touched: touched,
     error: error,
     displayRequiredIndicator: displayRequiredIndicator
-  }, Object.keys(options).map(value => {
+  }, Object.keys(options).map((value, index) => {
     const label = options[value];
+    const description = descriptions[value] || null;
     return /*#__PURE__*/React.createElement(Radio, {
       key: value,
       label: label,
+      description: description,
       className: error && touched ? 'error' : null,
       name: fieldName,
       type: type || 'text',

package/dist/components/Form/RadioButtons/stories.js

@@ -10,7 +10,8 @@ export const RadioButtons = props => {
   return /*#__PURE__*/React.createElement(FormikWrapper, _extends({}, props, {
     initialValues: {
       'poison': null
-    }
+    },
+    onSubmit: values => console.log(values)
   }), /*#__PURE__*/React.createElement(FormikRadio, {
     title: "Pick your poison",
     required: true,
@@ -20,7 +21,13 @@ export const RadioButtons = props => {
       beer: 'Beer',
       wine: 'Wine',
       rum: 'Rum',
-      whisky: 'Whisk(e)y'
+      whisky: 'Whisk(e)y',
+      '__other__': 'Anders'
+    },
+    descriptions: {
+      beer: 'Bier is lekker',
+      wine: 'Wijn ook wel',
+      whisky: 'Maar whiskey is het lekkerst'
     },
     validation: value => {
       let error;
@@ -30,6 +37,10 @@ export const RadioButtons = props => {
       }
 
       return error;
-    }
+    },
+    otherLabel: "Anders"
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "submit",
+    value: "Verzenden"
   }));
 };

package/dist/components/Form/Select/Input/index.js

@@ -16,7 +16,8 @@ const SelectInput = props => {
     placeholder,
     disabled,
     className,
-    wrapperClassName
+    wrapperClassName,
+    isClearable = true
   } = props;
   let {
     selectedOption
@@ -77,7 +78,7 @@ const SelectInput = props => {
         return option.disabled;
       },
       placeholder: placeholder,
-      isClearable: true,
+      isClearable: isClearable,
       theme: {
         borderRadius: 0,
         colors: {

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

@@ -30,9 +30,13 @@ export const ChipFacet = ({
           identifier: facet.identifier,
           value: entry.label
         });
+        api.setPage({
+          from: 0
+        });
         api.search();
       }
     }, entry.label);
   })));
 };
-ChipFacet.DISPLAY = 'ChipFacet';
+ChipFacet.DISPLAY = 'ChipFacet';
+export default ChipFacet;

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

@@ -26,10 +26,14 @@ export const ListFacet = ({
           identifier: facet.identifier,
           value: entry.label
         });
+        api.setPage({
+          from: 0
+        });
         api.search();
       },
       disabled: parseInt(entry.count) === 0
     }, entry.label, " (", entry.count, ")"));
   })));
 };
-ListFacet.DISPLAY = 'ListFacet';
+ListFacet.DISPLAY = 'ListFacet';
+export default ListFacet;

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

@@ -1,32 +1,65 @@
 import React from 'react';
-import { useSearchkit } from '@searchkit/client';
+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';
+
+const useInitialValues = () => {
+  const parsed = useSearchkitVariables();
+  const filters = {};
+
+  if (parsed.filters) {
+    parsed.filters.forEach(filter => {
+      filters[filter.identifier] = filter.value;
+    });
+  }
+
+  return filters;
+};
+
 export const SelectFacet = ({
   facet
 }) => {
+  const {
+    t
+  } = useTranslation();
   const api = useSearchkit();
   const options = facet.entries.map(entry => ({
     value: entry.label,
-    label: entry.label,
+    label: facet.identifier === 'type' ? t(`tags.${entry.label.toLowerCase()}`) : entry.label,
     disabled: parseInt(entry.count) === 0
   }));
+  const placeHolder = t(`placeholders.${facet.identifier}.placeholder`);
+  const classes = classNames('Facet', 'SelectFacet', `Facet--${facet.identifier}`);
+  const initialValues = useInitialValues();
   return /*#__PURE__*/React.createElement("div", {
-    className: "Facet SelectFacet",
+    className: classes,
     key: facet.identifier
-  }, /*#__PURE__*/React.createElement(FormikWrapper, null, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/React.createElement(FormikWrapper, {
+    initialValues: initialValues
+  }, /*#__PURE__*/React.createElement(Select, {
     title: facet.label,
     required: true,
-    placeholder: "Select a value...",
+    placeholder: placeHolder,
     fieldName: facet.identifier,
     options: options,
     onChange: value => {
-      api.toggleFilter({
-        identifier: facet.identifier,
-        value: value
+      api.removeFiltersByIdentifier(facet.identifier);
+      api.setPage({
+        from: 0
       });
+
+      if (value) {
+        api.addFilter({
+          identifier: facet.identifier,
+          value: value
+        });
+      }
+
       api.search();
     }
   })));
 };
-SelectFacet.DISPLAY = 'SelectFacet';
+SelectFacet.DISPLAY = 'SelectFacet';
+export default SelectFacet;

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

@@ -1,5 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import usePrevious from '../../../hooks/usePrevious';
+import { useSearchkitVariables } from '@searchkit/client';
 
 const SearchResultItemDefault = ({
   item
@@ -17,25 +18,57 @@ const SearchResults = ({
 }) => {
   const SearchResultItem = renderItem || SearchResultItemDefault;
   const SearchResultHeader = renderHeader || SearchResultHeaderDefault;
+  const variables = useSearchkitVariables();
   const [items, setItems] = useState([]);
   const [currentPage, setCurrentPage] = useState(-1);
+  const [previousQuery, setPreviousQuery] = useState(variables.query);
+  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 previousPage = usePrevious(currentPage);
   const previousItems = usePrevious(items);
   useEffect(() => {
+    if (typeof data.results === 'undefined') return;
+
     if (!appendResults) {
-      return;
+      // Set items directly if not appendResults
+      return setItems([...data.results.hits.items]);
     }
 
-    if (data && previousPage !== undefined && data.results.hits.page.pageNumber !== previousPage) {
-      setItems([...previousItems, ...data.results.hits.items]);
+    const currentPageNumber = data.results.hits.page.pageNumber;
+    const currentQuery = variables.query;
+    const currentFiltersLength = variables.filters.length;
+    const newData = JSON.stringify(data);
+    const currentSortBy = variables.sortBy;
+    const queryChanged = previousQuery !== currentQuery;
+    const filtersChanged = previousActiveFilters.length !== currentFiltersLength;
+    const sortByChanged = currentSortBy !== previousSortBy;
+    const pageChanged = currentPageNumber !== previousPage;
+    const dataChanged = currentData !== newData; // Determine if we have to reset the results, or should append them to the results
+
+    if (dataChanged && (queryChanged || filtersChanged || pageChanged || sortByChanged)) {
+      if (typeof previousItems === 'undefined' || queryChanged || filtersChanged || sortByChanged) {
+        // Overwrite data when Query, Filters or SortBy has changed
+        setItems([...data.results.hits.items]);
+      } else {
+        // Append data if the page has changed and we have previousItems
+        setItems([...previousItems, ...data.results.hits.items]);
+      }
+
       setCurrentPage(data.results.hits.page.pageNumber);
+      setPreviousQuery(variables.query);
+      setPreviousSortBy(variables.sortBy);
+      setPreviousActiveFilters(variables.filters);
+      setCurrentData(JSON.stringify(data));
     }
-  }, [data, previousPage, previousItems, appendResults]);
-  const searchResultItems = appendResults ? data && items.map(item => /*#__PURE__*/React.createElement(SearchResultItem, {
-    item: item
-  })) : data && data.results.hits.items.map(item => /*#__PURE__*/React.createElement(SearchResultItem, {
-    item: item
-  }));
+  }, [data, appendResults, variables]); // Set the search results when items have changed
+
+  useEffect(() => {
+    setSearchResultItems(items.map(item => /*#__PURE__*/React.createElement(SearchResultItem, {
+      item: item
+    })));
+  }, [items]);
   return /*#__PURE__*/React.createElement("div", {
     className: "SearchResults"
   }, data && /*#__PURE__*/React.createElement(SearchResultHeader, {

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

@@ -1,20 +1,40 @@
-import React from 'react';
-import { SortingSelector } from '@searchkit/elastic-ui';
+import { useSearchkit, useSearchkitVariables } from '@searchkit/client';
+import React, { useState, useEffect } from 'react';
+import SelectStyled from 'react-select';
+import FormikWrapper from '../../Form/FormikWrapper';
+import Select from '../../Form/Select';
 
-const SearchSorting = ({
+const useInitialValues = () => {
+  const parsed = useSearchkitVariables();
+  return {
+    'sortBy': parsed.sortBy
+  };
+};
+
+export const SearchSorting = ({
   data,
   loading
 }) => {
-  if (!data) {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: "SearchSorting"
-  }, /*#__PURE__*/React.createElement(SortingSelector, {
-    data: data.results,
-    loading: loading
+  const api = useSearchkit();
+  const initialValues = useInitialValues();
+  const options = data?.results?.summary?.sortOptions?.map(sortOption => ({
+    value: sortOption.id,
+    label: sortOption.label
+  })) || [];
+  return /*#__PURE__*/React.createElement(FormikWrapper, {
+    initialValues: initialValues
+  }, /*#__PURE__*/React.createElement(Select, {
+    fieldName: "sortBy",
+    isClearable: false,
+    options: options,
+    isLoading: loading,
+    onChange: value => {
+      api.setSortBy(value);
+      api.setPage({
+        from: 0
+      });
+      api.search();
+    }
   }));
 };
-
 export default SearchSorting;

package/dist/components/SearchKit/index.js

@@ -28,7 +28,8 @@ const SearchKit = ({
   useRouting = true,
   defaultFilters = [],
   defaultQuery = '',
-  children
+  children,
+  defaultSorting = 'relevance'
 }) => {
   const client = useMemo(() => {
     return new ApolloClient({
@@ -38,20 +39,17 @@ const SearchKit = ({
   }, [uri]);
   const skClient = useMemo(() => {
     const skClient = new SearchkitClient();
-
-    if (!useRouting) {
-      skClient.updateBaseSearchState({
-        filters: defaultFilters,
-        query: defaultQuery,
-        page: {
-          size: pageSize,
-          from: 0
-        }
-      });
-    }
-
+    skClient.updateBaseSearchState({
+      filters: defaultFilters,
+      query: defaultQuery,
+      page: {
+        size: pageSize,
+        from: 0
+      },
+      sortBy: defaultSorting
+    });
     return skClient;
-  }, [useRouting, defaultFilters, defaultQuery, pageSize]);
+  }, [useRouting, defaultFilters, defaultQuery, pageSize, defaultSorting]);
   return /*#__PURE__*/React.createElement(ApolloProvider, {
     client: client
   }, /*#__PURE__*/React.createElement(SearchkitProvider, {
@@ -69,6 +67,7 @@ SearchKit.propTypes = {
   pageSize: PropTypes.number,
   useRouting: PropTypes.bool,
   defaultFilters: PropTypes.object,
-  defaultQuery: PropTypes.string
+  defaultQuery: PropTypes.string,
+  defaultSorting: PropTypes.string
 };
 export default SearchKit;

package/dist/components/SearchKit/stories.js

@@ -239,7 +239,7 @@ export const LoadMore = () => {
       data: data,
       renderItem: SearchItem,
       renderHeader: SearchHeader,
-      append: true
+      appendResults: true
     }), /*#__PURE__*/React.createElement(SearchLoadMore, {
       data: data
     }));

package/dist/components/Share/stories.scss

@@ -1,5 +1,5 @@
-@import 'assets/variables';
-@import 'assets/mixins';
+@import '../../styles/assets/mixins';
+@import '../../styles/assets/variables';
 
 $facebook: #3b5998;
 $twitter: #00aced;

package/dist/components/WysiwygField/stories.scss

@@ -0,0 +1,3 @@
+.WysiwygField {
+  margin-right: 200px;
+}

package/dist/helpers/makeSafeForCSS.js

@@ -0,0 +1,5 @@
+const makeSafeForCSS = value => {
+  return encodeURIComponent(value).replace(/\.|%[0-9a-z]{2}/gi, '');
+};
+
+export default makeSafeForCSS;

package/dist/index.js

@@ -38,6 +38,9 @@ export { default as ViewportContext } from './Context/ViewportContext';
 export { default as SearchKit } from './components/SearchKit';
 export { default as SearchField } from './components/SearchKit/SearchField';
 export { default as SearchFacets } from './components/SearchKit/SearchFacets';
+export { default as SelectFacet } from './components/SearchKit/Facets/SelectFacet';
+export { default as ListFacet } from './components/SearchKit/Facets/ListFacet';
+export { default as ChipFacet } from './components/SearchKit/Facets/ChipFacet';
 export { default as SearchSelectedFilters } from './components/SearchKit/SearchSelectedFilters';
 export { default as SearchSorting } from './components/SearchKit/SearchSorting';
 export { default as SearchReset } from './components/SearchKit/SearchReset';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.2.9",
+  "version": "2.2.12",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",

package/dist/pages/api/graphql.js

@@ -1,25 +0,0 @@
-import { ApolloServer, gql } from 'apollo-server-micro';
-export const config = {
-  api: {
-    bodyParser: false
-  }
-};
-const typeDefs = [gql`
-    type Query {
-      root: String
-    }
-
-    type Mutation {
-      root: String
-    }
-  `];
-const server = new ApolloServer({
-  typeDefs,
-  resolvers: {},
-  introspection: true,
-  playground: true,
-  context: {}
-});
-export default server.createHandler({
-  path: '/api/graphql'
-});