@uncinc/uncinc-react-kitchen-sink 2.1.5 → 2.1.9

package/dist/components/ApiAutocomplete/index.js

@@ -2,6 +2,19 @@ import React, { useState } from 'react';
 import Autosuggest from 'react-autosuggest';
 import './style.scss';
 
+function abortableFetch(request, opts) {
+  const controller = new AbortController();
+  const signal = controller.signal;
+  return {
+    abort: () => controller.abort(),
+    ready: fetch(request, { ...opts,
+      signal
+    })
+  };
+}
+
+let currentFetch = null;
+
 const ApiAutocomplete = ({
   endpoint,
   placeholder,
@@ -16,7 +29,13 @@ const ApiAutocomplete = ({
 
   const getSuggestions = query => {
     const url = `${endpoint}?${queryParameter}=${query}`;
-    fetch(url).then(response => {
+
+    if (currentFetch) {
+      currentFetch.abort();
+    }
+
+    currentFetch = abortableFetch(url);
+    currentFetch.ready.then(response => {
       return response.json();
     }).then(response => {
       const ajaxResults = response.map((item, index) => {
@@ -24,6 +43,7 @@ const ApiAutocomplete = ({
         return item;
       });
       setResults(ajaxResults);
+    }).catch(e => {// Catch the error so the browser does not output errors.
     });
   };
 

package/dist/components/ApiAutocomplete/stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import ApiAutocomplete from './';
+export default {
+  title: 'Organisms/Autocomplete'
+};
+export const Default = () => {
+  return /*#__PURE__*/React.createElement(ApiAutocomplete, {
+    endpoint: "http://nldoet.devinc.eu/autocomplete/json",
+    renderItem: item => {
+      console.log(item);
+      return /*#__PURE__*/React.createElement("div", null, item.name);
+    },
+    onSelectItem: item => {
+      console.log('Selected', item);
+    },
+    inputProps: {
+      label: 'test'
+    }
+  });
+};

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

@@ -17,7 +17,8 @@ const Checkbox = props => {
     touched,
     error,
     value,
-    displayRequiredIndicator
+    displayRequiredIndicator,
+    onChange
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
     className: "Checkbox",
@@ -49,9 +50,16 @@ const Checkbox = props => {
       name: fieldName,
       type: "checkbox",
       id: id,
-      checked: field.value
+      checked: field.value,
+      onChange: e => {
+        field.onChange(e);
+        onChange(!field.value);
+      }
     })), title);
   }));
 };
 
+Checkbox.defaultProps = {
+  onChange: () => {}
+};
 export default withMapping(Checkbox);

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

@@ -22,6 +22,9 @@ export const Checkbox = () => {
       }
 
       return error;
+    },
+    onChange: e => {
+      console.log('change', e);
     }
   }));
 };

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

@@ -56,15 +56,15 @@ const SelectInput = props => {
         if (e) {
           if (onChange) {
             onChange(e.value);
-          } else {
-            form.setFieldValue(fieldName, e.value);
           }
+
+          form.setFieldValue(fieldName, e.value);
         } else {
           if (onChange) {
             onChange('');
-          } else {
-            form.setFieldValue(fieldName, null);
           }
+
+          form.setFieldValue(fieldName, null);
         }
       },
       options: optionsTransformed,

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

@@ -5,7 +5,11 @@ export default {
   title: 'Molecules/Form'
 };
 export const Select = () => {
-  return /*#__PURE__*/React.createElement(FormikWrapper, null, /*#__PURE__*/React.createElement(FormikSelect, {
+  return /*#__PURE__*/React.createElement(FormikWrapper, {
+    initialValues: {
+      poison: 'beer'
+    }
+  }, /*#__PURE__*/React.createElement(FormikSelect, {
     title: "Pick your poison",
     required: true,
     description: "This is a test input.",
@@ -25,6 +29,9 @@ export const Select = () => {
       }
 
       return error;
+    },
+    onChange: e => {
+      console.log(e);
     }
   }));
 };

package/dist/components/Header/index.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import classnames from 'classnames';
 import Container from '../Layout/Container';
 import Hamburger from '../Hamburger';
-import AnimationWrapper from './AnimationWrapper';
+import NavigationScroll from '../NavigationScroll';
 import './style.scss';
 
 const Header = ({
@@ -33,7 +33,7 @@ const Header = ({
     });
   }
 
-  const onUpdateAnimationWrapper = (isVisible, hasReachedTop, scrolledPastNavHeight) => {
+  const onUpdateNavigationScroll = (isVisible, hasReachedTop, scrolledPastNavHeight) => {
     const shouldUpdate = state.visible !== isVisible || state.reachedTop !== hasReachedTop || state.scrolledPastNavHeight !== scrolledPastNavHeight;
 
     if (shouldUpdate) {
@@ -66,8 +66,8 @@ const Header = ({
   }, /*#__PURE__*/React.createElement(Container, null, subMenu)));
 
   if (withAnimation) {
-    return /*#__PURE__*/React.createElement(AnimationWrapper, {
-      onUpdate: onUpdateAnimationWrapper,
+    return /*#__PURE__*/React.createElement(NavigationScroll, {
+      onUpdate: onUpdateNavigationScroll,
       hasBackground: true
     }, headerComponent);
   } else {

package/dist/components/MagicLine/index.js

@@ -0,0 +1,70 @@
+import React, { useRef, useState, useEffect } from 'react';
+import c from 'classnames';
+
+const MagicLine = ({
+  activeClassName = "Menu__item--active",
+  children
+}) => {
+  const magicLineParentRef = useRef(null);
+  const magicLineRef = useRef(null);
+  const currentActiveItem = useRef(null);
+  const [loaded, setLoaded] = useState(false);
+  const [activeItemInNavigation, _setActiveItemInNavigation] = useState(false);
+
+  const setActiveItemInNavigation = value => {
+    if (value !== activeItemInNavigation) {
+      _setActiveItemInNavigation(value);
+    }
+  };
+
+  const MagicLineRefClasses = c('MagicLine__magic_line', {
+    'MagicLine__magic_line--visible': activeItemInNavigation && loaded
+  });
+
+  const alignMagicLine = () => {
+    if (magicLineRef.current && currentActiveItem.current) {
+      const left = currentActiveItem.current.getBoundingClientRect().left - magicLineParentRef.current.getBoundingClientRect().left;
+      const right = magicLineParentRef.current.getBoundingClientRect().width - left - currentActiveItem.current.getBoundingClientRect().width;
+      magicLineRef.current.style.left = `${left}px`;
+      magicLineRef.current.style.right = `${right}px`;
+      setLoaded(true);
+    }
+  };
+
+  const hoverMagicLine = e => {
+    currentActiveItem.current = e.target;
+    alignMagicLine();
+  };
+
+  const setInitialMagicLine = () => {
+    currentActiveItem.current = document.getElementsByClassName(activeClassName)[0];
+    alignMagicLine();
+  };
+
+  useEffect(() => {
+    const initialize = () => {
+      setInitialMagicLine();
+    };
+
+    const handleResize = () => {
+      alignMagicLine();
+    };
+
+    document.fonts.ready.then(initialize);
+    window.addEventListener('load', initialize);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener('load', initialize);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: magicLineParentRef,
+    className: "MagicLine"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: magicLineRef,
+    className: MagicLineRefClasses
+  }), children(setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation));
+};
+
+export default MagicLine;

package/dist/components/MagicLine/stories.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import c from 'classnames';
+import MagicLine from './';
+import './stories.scss';
+export default {
+  title: 'Molecules/MagicLine'
+};
+export const Default = () => /*#__PURE__*/React.createElement(MagicLine, null, (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) => {
+  const items = ["one", "two with a longer name", "three"];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "Menu"
+  }, items.map(item => {
+    const active = item === "three";
+
+    if (active) {
+      setActiveItemInNavigation(true);
+    }
+
+    const classes = c('Menu__item', {
+      'Menu__item--active': active
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      key: item,
+      className: classes,
+      onMouseEnter: e => {
+        hoverMagicLine(e);
+      },
+      onMouseLeave: e => {
+        setInitialMagicLine();
+      }
+    }, item);
+  }));
+});

package/dist/components/MagicLine/stories.scss

@@ -0,0 +1,38 @@
+.Menu {
+  display: flex;
+  flex-direction: row;
+
+  &__item {
+    margin: 0 1rem;
+    padding: 0 1rem;
+  }
+}
+
+.MagicLine {
+  position: relative;
+
+  &__magic_line {
+    pointer-events: none;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 100%;
+    padding: 0;
+    margin: 0;
+    background-color: red;
+    height: .2rem;
+    z-index: 1000000;
+    opacity: 0;
+
+    &--visible {
+      opacity: 1;
+      transition: left .3s cubic-bezier(0.64, 0.04, 0.35, 1),
+                  right .3s cubic-bezier(0.64, 0.04, 0.35, 1),
+                  opacity 0.3s .3s cubic-bezier(0.64, 0.04, 0.35, 1);
+    }
+  }
+
+  &:hover .MagicLine__magic_line {
+    opacity: 1;
+  }
+}

package/dist/components/{Header/AnimationWrapper → NavigationScroll}/index.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import './style.scss';
 
-const AnimationWrapper = props => {
+const NavigationScroll = props => {
   const node = useRef(null);
   const [state, setState] = useState({
     pos: 0,
@@ -71,8 +71,8 @@ const AnimationWrapper = props => {
     children,
     hasBackground
   } = props;
-  const classes = classNames('AnimationWrapper', {
-    'AnimationWrapper--hasBackground': hasBackground,
+  const classes = classNames('NavigationScroll', {
+    'NavigationScroll--hasBackground': hasBackground,
     's-scrolled-past-nav-height': scrolledPastNavHeight,
     's-reached-page-top': reachedTop,
     's-reached-page-bottom': reachedBottom
@@ -86,11 +86,11 @@ const AnimationWrapper = props => {
   }, children);
 };
 
-AnimationWrapper.propTypes = {
+NavigationScroll.propTypes = {
   children: PropTypes.element.isRequired,
   onUpdate: PropTypes.func
 };
-AnimationWrapper.defaultProps = {
+NavigationScroll.defaultProps = {
   onUpdate: () => {}
 };
-export default AnimationWrapper;
+export default NavigationScroll;

package/dist/components/NavigationScroll/stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import c from 'classnames';
+import NavigationScroll from './';
+import './stories.scss';
+export default {
+  title: 'Molecules/NavigationScroll'
+};
+export const Default = () => /*#__PURE__*/React.createElement("div", {
+  className: "NavigationScrollExample"
+}, /*#__PURE__*/React.createElement(NavigationScroll, null, /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement("div", null, "one"), /*#__PURE__*/React.createElement("div", null, "two"), /*#__PURE__*/React.createElement("div", null, "three"))));

package/dist/components/NavigationScroll/stories.scss

@@ -0,0 +1,17 @@
+.NavigationScrollExample {
+  min-height: 200vh;
+  background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
+  margin: -4rem;
+
+  nav {
+    background-color: grey;
+    display: flex;
+    flex-direction: row;
+    padding: 2rem;
+
+    & > div {
+      flex: 0 0 auto;
+      margin: 0 1rem;
+    }
+  }
+}

package/dist/components/{Header/AnimationWrapper → NavigationScroll}/style.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/assets/variables';
+@import '../../styles/assets/variables';
 
 @keyframes animation-wrapper--slide-down {
   from {
@@ -10,21 +10,20 @@
   }
 }
 
-.AnimationWrapper {
+.NavigationScroll {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   display: block;
   z-index: $z-index-4;
-  transition: 0.5s background ease-in-out;
+  transition: background-color 0.5s ease-in-out;
 
   &--hasBackground {
-    background: white;
+    background-color: white;
 
     &.s-reached-page-bottom {
       animation: animation-wrapper--slide-down 0.3s $animation-timing--cubic-bezier;
     }
   }
 }
-

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

@@ -0,0 +1,62 @@
+import React, { Fragment, useRef } from 'react';
+import { EuiFacetGroup, EuiTitle, EuiFacetButton } from '@elastic/eui';
+import { useSearchkit, FilterLink } from '@searchkit/client';
+
+const EntriesList = ({
+  entries,
+  loading,
+  facet
+}) => {
+  console.log('entries', entries);
+  const api = useSearchkit();
+  const entriesElements = entries.map(entry => {
+    const ref = useRef();
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: entry.label
+    }, /*#__PURE__*/React.createElement(EuiFacetButton, {
+      style: {
+        height: '28px',
+        marginTop: 0,
+        marginBottom: 0
+      },
+      quantity: entry.count,
+      isSelected: api.isFilterSelected({
+        identifier: facet.identifier,
+        value: entry.label,
+        level: entry.level
+      }),
+      isLoading: loading,
+      onClick: e => {
+        ref.current.onClick(e);
+      }
+    }, /*#__PURE__*/React.createElement(FilterLink, {
+      ref: ref,
+      filter: {
+        identifier: facet.identifier,
+        value: entry.label,
+        level: entry.level
+      }
+    }, entry.label)), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginLeft: '10px'
+      }
+    }, entry.entries && /*#__PURE__*/React.createElement(EntriesList, {
+      entries: entry.entries,
+      loading: loading,
+      facet: facet
+    })));
+  });
+  return /*#__PURE__*/React.createElement(EuiFacetGroup, null, entriesElements);
+};
+
+export const HierarchicalFilterFacet = ({
+  facet,
+  loading
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EuiTitle, {
+  size: "xxs"
+}, /*#__PURE__*/React.createElement("h3", null, facet.label)), /*#__PURE__*/React.createElement(EntriesList, {
+  entries: facet.entries,
+  facet: facet,
+  loading: loading
+}));
+HierarchicalFilterFacet.DISPLAY = 'HierarchicalFilterFacet';

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

@@ -0,0 +1,62 @@
+import React, { Fragment, useRef } from 'react';
+import { EuiFacetGroup, EuiTitle, EuiFacetButton } from '@elastic/eui';
+import { useSearchkit, FilterLink } from '@searchkit/client';
+
+const EntriesList = ({
+  entries,
+  loading,
+  facet
+}) => {
+  console.log('entries', entries);
+  const api = useSearchkit();
+  const entriesElements = entries.map(entry => {
+    const ref = useRef();
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: entry.label
+    }, /*#__PURE__*/React.createElement(EuiFacetButton, {
+      style: {
+        height: '28px',
+        marginTop: 0,
+        marginBottom: 0
+      },
+      quantity: entry.count,
+      isSelected: api.isFilterSelected({
+        identifier: facet.identifier,
+        value: entry.label,
+        level: entry.level
+      }),
+      isLoading: loading,
+      onClick: e => {
+        ref.current.onClick(e);
+      }
+    }, /*#__PURE__*/React.createElement(FilterLink, {
+      ref: ref,
+      filter: {
+        identifier: facet.identifier,
+        value: entry.label,
+        level: entry.level
+      }
+    }, entry.label)), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginLeft: '10px'
+      }
+    }, entry.entries && /*#__PURE__*/React.createElement(EntriesList, {
+      entries: entry.entries,
+      loading: loading,
+      facet: facet
+    })));
+  });
+  return /*#__PURE__*/React.createElement(EuiFacetGroup, null, entriesElements);
+};
+
+export const HierarchicalMenuFacet = ({
+  facet,
+  loading
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EuiTitle, {
+  size: "xxs"
+}, /*#__PURE__*/React.createElement("h3", null, facet.label)), /*#__PURE__*/React.createElement(EntriesList, {
+  entries: facet.entries,
+  facet: facet,
+  loading: loading
+}));
+HierarchicalMenuFacet.DISPLAY = 'HierarchicalMenuFacet';

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

@@ -3,8 +3,9 @@ import { gql, useQuery } from '@apollo/client';
 import { useSearchkitVariables } from '@searchkit/client';
 import SearchPage from '../SearchPage';
 
-function App({
+function Query({
   query,
+  useRouting,
   children
 }) {
   const graphQuery = useMemo(() => {
@@ -21,7 +22,12 @@ function App({
   } = useQuery(graphQuery, {
     variables
   });
+
+  if (!useRouting) {
+    return /*#__PURE__*/React.createElement("div", null, children(data, loading));
+  }
+
   return /*#__PURE__*/React.createElement(SearchPage, null, children(data, loading));
 }
 
-export default App;
+export default Query;

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

@@ -2,9 +2,11 @@ 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 = [SelectFacet, ChipFacet, ListFacet, ...components].reduce((sum, component) => {
+  const FacetsMapper = [HierarchicalFilterFacet, HierarchicalMenuFacet, SelectFacet, ChipFacet, ListFacet, ...components].reduce((sum, component) => {
     sum[component.DISPLAY] = component;
     return sum;
   }, {});

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

@@ -6,4 +6,51 @@ const SearchPage = ({
   children
 }) => /*#__PURE__*/React.createElement(EuiPage, null, children);
 
-export default withSearchkitRouting(SearchPage);
+console.log('W', typeof withSearchkitRouting, withSearchkitRouting.getInitialProps);
+export const routeToStateFn = routeState => {
+  const value = {
+    query: routeState.query || '',
+    sortBy: routeState.sort || '',
+    filters: routeState.filters || [],
+    page: {
+      size: Number(routeState.size) || 10,
+      from: Number(routeState.from) || 0
+    }
+  }; // Map Number values for min and max filters. By default they
+  // are parsed as strings, which does not comply to the schema.
+  // The 'qs' package is at fault here.
+  // @see https://github.com/ljharb/qs/issues/91
+
+  value.filters = value.filters.map(item => {
+    if (item.min) {
+      item.min = Number(item.min);
+    }
+
+    if (item.max) {
+      item.max = Number(item.max);
+    }
+
+    if (item.boolValue) {
+      item.boolValue = !!(item.boolValue.toString() === 'true');
+    }
+
+    if (item.geoBoundingBox) {
+      item.geoBoundingBox.topLeft.lat = Number(item.geoBoundingBox.topLeft.lat);
+      item.geoBoundingBox.topLeft.lon = Number(item.geoBoundingBox.topLeft.lon);
+      item.geoBoundingBox.bottomRight.lat = Number(item.geoBoundingBox.bottomRight.lat);
+      item.geoBoundingBox.bottomRight.lon = Number(item.geoBoundingBox.bottomRight.lon);
+    }
+
+    if (item.geoRadius) {
+      item.geoRadius.radius = Number(item.geoRadius.radius);
+      item.geoRadius.center.lat = Number(item.geoRadius.center.lat);
+      item.geoRadius.center.lon = Number(item.geoRadius.center.lon);
+    }
+
+    return item;
+  });
+  return value;
+};
+export default withSearchkitRouting(SearchPage, {
+  routeToState: routeToStateFn
+});

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

@@ -32,7 +32,8 @@ const SearchSelectedFilters = ({
     customFilterComponents: {
       SelectFacet: ValueFilter,
       ListFacet: ValueFilter,
-      ChipFacet: ValueFilter
+      ChipFacet: ValueFilter,
+      HierarchicalFilterFacet: ValueFilter
     }
   }));
 };

package/dist/components/SearchKit/index.js

@@ -24,7 +24,9 @@ const defaultChildren = (data, loading) => /*#__PURE__*/React.createElement(Reac
 const SearchKit = ({
   query,
   uri,
-  children
+  children,
+  pageSize = 5,
+  useRouting = true
 }) => {
   const client = new ApolloClient({
     uri: uri,
@@ -36,7 +38,8 @@ const SearchKit = ({
   }, /*#__PURE__*/React.createElement(SearchkitProvider, {
     client: skClient
   }, /*#__PURE__*/React.createElement(Query, {
-    query: query
+    query: query,
+    useRouting: useRouting
   }, (data, loading) => children ? children(data, loading) : defaultChildren(data, loading))));
 };
 

package/dist/components/SearchKit/stories.js

@@ -26,6 +26,10 @@ const query = `
           identifier
           display
           label
+          ... on HierarchicalValueSelectedFilter {
+            level
+            value
+          }
           ... on DateRangeSelectedFilter {
             dateMin
             dateMax
@@ -70,6 +74,17 @@ const query = `
         entries {
           label
           count
+          level
+          entries {
+            label
+            count
+            level
+            entries {
+              label
+              count
+              level
+            }
+          }
         }
       }
     }

package/dist/helpers/useValueForCurrentViewPort.js

@@ -14,17 +14,17 @@ export default function useValueForCurrentViewPort(val1, val2, val3, val4, val5)
         return;
       } // 768 & 992
       else if (width >= viewportContext.screenSizes.SCREEN_TABLET && width <= viewportContext.screenSizes.SCREEN_NORMAL) {
-          setValueForCurrentViewPort(val2);
-          return;
-        } // 992 & 1240
-        else if (width >= viewportContext.screenSizes.SCREEN_NORMAL && width <= viewportContext.screenSizes.SCREEN_WIDE) {
-            setValueForCurrentViewPort(val3);
-            return;
-          } // 1240 & 2000
-          else if (width >= viewportContext.screenSizes.SCREEN_WIDE && width <= viewportContext.screenSizes.SCREEN_HUGE) {
-              setValueForCurrentViewPort(val4);
-              return;
-            } // SCREEN_HUGE and larger
+        setValueForCurrentViewPort(val2);
+        return;
+      } // 992 & 1240
+      else if (width >= viewportContext.screenSizes.SCREEN_NORMAL && width <= viewportContext.screenSizes.SCREEN_WIDE) {
+        setValueForCurrentViewPort(val3);
+        return;
+      } // 1240 & 2000
+      else if (width >= viewportContext.screenSizes.SCREEN_WIDE && width <= viewportContext.screenSizes.SCREEN_HUGE) {
+        setValueForCurrentViewPort(val4);
+        return;
+      } // SCREEN_HUGE and larger
 
 
       setValueForCurrentViewPort(val5);

package/dist/index.js

@@ -12,6 +12,8 @@ export { default as Pagination } from './components/Pagination';
 export { default as QuickLayout } from './components/Layout/QuickLayout';
 export { default as Lottie } from './components/Lottie';
 export { default as LottieAnimationWithMousePosition } from './components/Lottie/LottieAnimationWithMousePosition';
+export { default as MagicLine } from './components/MagicLine';
+export { default as NavigationScroll } from './components/NavigationScroll';
 export { default as Image } from './components/Image';
 export { default as ImageBackground } from './components/Image/Background';
 export { default as InlineMenu } from './components/InlineMenu';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.1.5",
+  "version": "2.1.9",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",
@@ -35,13 +35,30 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
+    "@babel/cli": "^7.0.0-beta.44",
+    "@babel/helper-define-map": "^7.14.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/runtime": "^7.9.6",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eui": "^40.0.0",
     "@loadable/component": "^5.15.0",
     "@searchkit/client": "^3.0.0-canary.45",
     "@searchkit/elastic-ui": "^3.0.0-canary.45",
+    "@storybook/addon-actions": "^6.2.8",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-links": "^6.2.8",
+    "@storybook/addons": "^6.2.8",
+    "@storybook/react": "^6.2.8",
+    "@storybook/theming": "^6.2.8",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
     "apollo-server-micro": "^3.4.0",
     "bootstrap": "^4.3.1",
+    "chai": "^4.2.0",
+    "cross-env": "^7.0.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "formik": "^2.2.6",
     "graphql": "^15.7.0",
@@ -67,35 +84,16 @@
     "react-redux": "^7.2.4",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
+    "react-scripts": "3.4.1",
     "react-select": "^3.1.0",
     "react-share": "^4.3.1",
     "react-slick": "^0.27.14",
+    "react-test-renderer": "^16.13.1",
     "redux": "^4.0.5",
     "sass-loader": "^8.0.2",
-    "slick-carousel": "^1.8.1"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.44",
-    "@babel/helper-define-map": "^7.14.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/runtime": "^7.9.6",
-    "@storybook/addon-actions": "^6.2.8",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.2.8",
-    "@storybook/addons": "^6.2.8",
-    "@storybook/react": "^6.2.8",
-    "@storybook/theming": "^6.2.8",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "chai": "^4.2.0",
-    "cross-env": "^7.0.2",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "react-scripts": "3.4.1",
-    "react-test-renderer": "^16.13.1",
     "sinon": "^9.0.2",
     "sinon-chai": "^3.5.0",
+    "slick-carousel": "^1.8.1",
     "storybook-addon-export-stories": "^1.0.0"
   },
   "eslintConfig": {