@uncinc/uncinc-react-kitchen-sink 2.3.3 → 2.3.5

package/dist/components/Webform/index.js

@@ -2,43 +2,37 @@ import React, { useState, useRef } from 'react';
 import Immutable from 'immutable';
 import WebformMapper from './WebformMapper';
 import FormikWrapper from '../Form/FormikWrapper';
-
 const Webform = ({
   entities
 }) => {
   const [currentPage, setCurrentPage] = useState(0);
   const webformRef = useRef(null);
+
   /**
    * @description Scroll to the top of the webform component
    */
-
   const scrollToTop = () => {
     window.scrollTo(0, webformRef.getBoundingClientRect().top);
     webformRef.scrollIntoView();
   };
-
   const onNextPage = () => {
     setCurrentPage(currentPage + 1);
     scrollToTop();
   };
-
   const onPreviousPage = () => {
     setCurrentPage(currentPage - 1);
     scrollToTop();
   };
-
   const collectPages = entities => {
     let output = new Immutable.List();
     entities.entrySeq().forEach(([key, entity]) => {
       const mappedEntity = Immutable.fromJS(entity);
-
       if (mappedEntity.get('#type') === 'webform_wizard_page') {
         output = output.push(mappedEntity.get('#webform_key'));
       }
     });
     return output;
   };
-
   const pages = collectPages(entities);
   return /*#__PURE__*/React.createElement("div", {
     className: "Webform",
@@ -52,5 +46,4 @@ const Webform = ({
     currentPage: pages.get(currentPage)
   })));
 };
-
 export default Webform;

package/dist/components/Webform/withStates.js

@@ -1,13 +1,12 @@
 import React from 'react';
-
 const determineVisibility = (entity, values) => {
   let visible = true;
-
   if (entity.hasIn(['#states', 'visible'])) {
     visible = entity.getIn(['#states', 'visible']).keySeq().every(component => {
       const condition = entity.getIn(['#states', 'visible', component]);
-      const fieldName = component.match(/input\[name="(.+)"\]/)[1]; // Determine the type of condition.
+      const fieldName = component.match(/input\[name="(.+)"\]/)[1];
 
+      // Determine the type of condition.
       if (condition.get('filled')) {
         if (values[fieldName]) {
           return true;
@@ -17,69 +16,57 @@ const determineVisibility = (entity, values) => {
           return true;
         }
       } else if (condition.get('value')) {
-        const value = condition.get('value'); // Check for subfield.
-
+        const value = condition.get('value');
+        // Check for subfield.
         const matches = [...fieldName.matchAll(/(.*)\[(.*)\]/g)];
-
         if (matches && matches.length > 0) {
           const [, field] = matches[0];
-
           if (values[field]) {
             if (values[field].includes(value)) {
               return true;
             }
           }
         }
-
         if (values[fieldName] === value) {
           return true;
         }
       } else if (condition.get('checked')) {
         // Check for subfield.
         const matches = [...fieldName.matchAll(/(.*)\[(.*)\]/g)];
-
         if (matches && matches.length > 0) {
           const [, field, subField] = matches[0];
-
           if (values[field]) {
             if (values[field].includes(subField)) {
               return true;
             }
           }
         }
-
         if (values[fieldName] === true) {
           return true;
         }
       } else {
         console.log('Condition not yet supported:', condition);
-      } // By default, states will make a field invisible.
-
+      }
 
+      // By default, states will make a field invisible.
       return false;
     });
   }
-
   return visible;
 };
-
 const withStates = BaseComponent => props => {
   const {
     entity,
     values
   } = props;
   const states = entity.get('#states');
-
   if (states) {
     const visible = entity.get('#visible', true);
     const visibility = determineVisibility(entity, values);
-
     if (!visible || !visibility) {
       return null;
     }
   }
-
   return /*#__PURE__*/React.createElement(BaseComponent, props, props.children);
 };
-
 export default withStates;

package/dist/components/WysiwygField/index.js

@@ -1,10 +1,8 @@
-function _extends() { _extends = Object.assign || 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); }
-
+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 PropTypes from 'prop-types';
 import ReactHtmlParser from 'react-html-parser';
 import Button from '../Button';
-
 const WysiwygField = ({
   html,
   customElementHandler,
@@ -13,11 +11,9 @@ const WysiwygField = ({
   const parsedHtml = ReactHtmlParser(html, {
     transform: node => {
       const customHandler = customElementHandler(node);
-
       if (customHandler) {
         return customHandler;
       }
-
       switch (node.name) {
         case 'a':
           {
@@ -33,10 +29,8 @@ const WysiwygField = ({
                 key: `${node.name}:${label}`
               }, label);
             }
-
             break;
           }
-
         default:
           {
             break;
@@ -48,7 +42,6 @@ const WysiwygField = ({
     className: "WysiwygField"
   }, props), parsedHtml);
 };
-
 WysiwygField.propTypes = {
   html: PropTypes.string.isRequired,
   customElementHandler: PropTypes.func

package/dist/components/WysiwygField/stories.js

@@ -1,5 +1,7 @@
+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 WysiwygField from './';
+import AbbreviationAnnotation from '../AbbreviationAnnotation';
 export default {
   title: 'Atoms/WysiwygField'
 };
@@ -7,16 +9,6 @@ const html = "<p>This is <em>some</em> example <a href='https://www.uncinc.nl'>H
 export const Primary = () => /*#__PURE__*/React.createElement(WysiwygField, {
   html: html
 });
-
-const Abbr = ({
-  title,
-  children
-}) => {
-  return /*#__PURE__*/React.createElement("abbr", {
-    title: title
-  }, children);
-};
-
 const htmlCustomHandler = `
   <p>Lorem ipsum dolor sit amet, <abbr title="Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi.">consectetur adipiscing</abbr> elit. Aliquam in sodales tellus. Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi. Nulla malesuada erat non massa pellentesque, ut ultricies tellus sodales. Fusce ac feugiat ligula. In vel metus diam. Maecenas diam ex, tincidunt tempor nibh sed, suscipit semper lectus. Sed eu enim vel erat tempus mollis. Integer eget gravida orci. Nunc volutpat velit id dui semper tincidunt. Nulla maximus nisl nec volutpat faucibus. Integer vitae ullamcorper ex. Vestibulum facilisis convallis arcu, ac interdum libero malesuada eget.</p>
   <p>Donec feugiat, nunc vitae euismod posuere, urna nisl elementum nibh, quis ultricies libero leo sed neque. Praesent vel vestibulum sem, eget congue purus. Nunc non volutpat urna, vitae ullamcorper justo. Suspendisse in tortor ex. Phasellus euismod eget neque vitae consequat. Vestibulum sem mi, dictum id consectetur at, hendrerit in massa. Mauris quis sem condimentum, condimentum enim sed, varius sem. Curabitur convallis tempus nulla, eget consectetur quam sagittis at. Nulla a feugiat tortor. Mauris fermentum lectus ac mauris cursus ornare.</p>
@@ -28,12 +20,10 @@ export const CustomHandlers = () => /*#__PURE__*/React.createElement(WysiwygFiel
     switch (element.name) {
       case 'abbr':
         {
-          console.log(element);
-          return /*#__PURE__*/React.createElement(Abbr, {
+          return /*#__PURE__*/React.createElement(AbbreviationAnnotation, _extends({
             title: element.attribs.title
-          }, element.children[0].data);
+          }, element.attribs), element.children[0].data);
         }
-
       default:
         {
           return null;

package/dist/config/constants.js

@@ -4,17 +4,16 @@ export const DEFAULT_LANGUAGE = 'nl';
 export const SITE_NAME = 'Unc Inc';
 export const MAPBOX_API_TOKEN = 'pk.eyJ1IjoidW5jaW5jYnYiLCJhIjoiY2pxeHhxd2FlMDMyeTQzbWp1a3hleHRscCJ9.QMfmlryTLEyrSyjU7FfBiw';
 let API_URL = 'https://content.uncinc.nl';
-
 if (APP_ENV === 'development') {
   API_URL = 'http://uncinc.docker.localhost';
 } else if (APP_ENV === 'staging') {
   API_URL = 'https://staging.uncinc.nl';
 }
-
 export const IS_SERVER = !(typeof window !== 'undefined' && window.document && window.document.createElement);
-export const IS_CLIENT = !IS_SERVER; // The value is where the breakpoint starts (mobile-first).
-// These values are taken from '/src/shared/styles/assets/_variables.scss'.
+export const IS_CLIENT = !IS_SERVER;
 
+// The value is where the breakpoint starts (mobile-first).
+// These values are taken from '/src/shared/styles/assets/_variables.scss'.
 export const SCREEN_MOBILE = 0;
 export const SCREEN_TABLET = 768;
 export const SCREEN_NORMAL = 992;

package/dist/config/i18next/index.js

@@ -0,0 +1,23 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+import NL from './locales/nl.json';
+import EN from './locales/en.json';
+const resources = {
+  nl: {
+    translation: NL
+  },
+  en: {
+    translation: EN
+  }
+};
+i18n.use(LanguageDetector).use(initReactI18next).init({
+  resources,
+  lng: 'nl',
+  fallbackLng: 'nl',
+  debug: true,
+  interpolation: {
+    escapeValue: false
+  }
+});
+export default i18n;

package/dist/config/i18next/locales/en.json

@@ -0,0 +1,22 @@
+{
+  "dateselect": {
+    "months": {
+      "jan": "January",
+      "feb": "February",
+      "mar": "March",
+      "apr": "April",
+      "may": "May",
+      "jun": "June",
+      "jul": "Juli",
+      "aug": "August",
+      "sep": "September",
+      "oct": "October",
+      "nov": "November",
+      "dec": "December"
+    }
+  },
+  "form": {
+    "required": "required",
+    "optional": "optional"
+  }
+}

package/dist/config/i18next/locales/nl.json

@@ -0,0 +1,22 @@
+{
+  "dateselect" : {
+    "months": {
+      "jan": "Januari",
+      "feb": "Februari",
+      "mar": "Maart",
+      "apr": "April",
+      "may": "Mei",
+      "jun": "Juni",
+      "jul": "Juli",
+      "aug": "Augustus",
+      "sep": "September",
+      "oct": "Oktober",
+      "nov": "November",
+      "dec": "December"
+    }
+  },
+  "form": {
+    "required": "vereist",
+    "optional": "optioneel"
+  }
+}

package/dist/helpers/gtm.js

@@ -5,7 +5,9 @@ const gtm = {
   // If GTM is not loaded we will push all events to this variable. Once GTM is
   // loaded we will concat this array with the GTM dataLayer variable.
   tempDataLayer: []
-}; // -----------------------------------------------------------------------------
+};
+
+// -----------------------------------------------------------------------------
 //
 // Define our internal helper functions.
 //
@@ -19,10 +21,10 @@ const gtm = {
  * @return {bool}
  *   A boolean wether the GTM is loaded or not.
  */
-
 gtm.loaded = () => {
   return typeof window.google_tag_manager !== 'undefined';
 };
+
 /**
  * gtm.register
  *
@@ -35,17 +37,15 @@ gtm.loaded = () => {
  *   The callback of the function being registered.
  * @return {void}
  */
-
-
 gtm.register = (fn, callback) => {
   gtm[fn] = (...args) => {
     if (__DEBUG__) {
       console.info(`GTM Event: ${fn}() with args`, args);
     }
-
     callback(...args);
   };
 };
+
 /**
  * gtm.push
  *
@@ -56,17 +56,15 @@ gtm.register = (fn, callback) => {
  * @return {array|bool}
  *   An array containing the new dataLayer result or `false`.
  */
-
-
 gtm.push = data => {
   if (gtm.loaded()) {
     return window.dataLayer.push(data);
   } else {
     gtm.tempDataLayer.push(data);
   }
-
   return false;
 };
+
 /**
  * gtm.attachEventListeners
  *
@@ -74,26 +72,23 @@ gtm.push = data => {
  *   Attach event listeners related to GTM.
  * @return {void}
  */
-
-
 gtm.attachEventListeners = () => {
   if (IS_CLIENT && !gtm.hasEventsAttached) {
     window.addEventListener('GTM-Loaded', () => {
       for (let i = 0, len = gtm.tempDataLayer.length; i < len; i++) {
         window.dataLayer.push(gtm.tempDataLayer[i]);
       }
-
       gtm.tempDataLayer = [];
     });
     gtm.hasEventsAttached = true;
   }
-}; // -----------------------------------------------------------------------------
+};
+
+// -----------------------------------------------------------------------------
 //
 // Register our wrapper functions. We will use these throughout the app.
 //
 // -----------------------------------------------------------------------------
-
-
 gtm.register('trackPage', url => {
   if (url) {
     gtm.push({
@@ -115,7 +110,8 @@ gtm.register('loadConsentRequiredTags', () => {
   gtm.push({
     event: 'Cookie consent: load tags on consent'
   });
-}); // Initialize GTM.
+});
 
+// Initialize GTM.
 gtm.attachEventListeners();
 export default gtm;

package/dist/helpers/link.js

@@ -1,19 +1,15 @@
 import config from 'react-global-configuration';
 export function isExternalLink(uri = '') {
   const value = uri.trim().replace(/\/$/, '');
-
   if (/^(https?|mailto|tel):/g.test(value)) {
     return true;
   }
-
   return false;
 }
 export function normalizeLink(link) {
   const API_URL = config.get('API_URL');
-
   if (/^\//g.test(link)) {
     return `${API_URL}${link}`;
   }
-
   return link;
 }

package/dist/helpers/useValueForCurrentViewPort.js

@@ -7,29 +7,35 @@ export default function useValueForCurrentViewPort(val1, val2, val3, val4, val5)
     function handleResize() {
       const {
         innerWidth: width
-      } = window; // 0 & 768
+      } = window;
 
+      // 0 & 768
       if (width >= viewportContext.screenSizes.SCREEN_MOBILE && width <= viewportContext.screenSizes.SCREEN_TABLET) {
         setValueForCurrentViewPort(val1);
         return;
-      } // 768 & 992
+      }
+
+      // 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);
     }
-
     window.addEventListener('resize', handleResize);
     handleResize();
     return () => window.removeEventListener('resize', handleResize);

package/dist/hooks/useOnScreen.js

@@ -3,8 +3,8 @@ export default function useOnScreen(ref) {
   const [isIntersecting, setIntersecting] = useState(false);
   const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting));
   useEffect(() => {
-    observer.observe(ref.current); // Remove the observer as soon as the component is unmounted
-
+    observer.observe(ref.current);
+    // Remove the observer as soon as the component is unmounted
     return () => observer.disconnect();
   }, [observer, ref]);
   return isIntersecting;

package/dist/hooks/usePrevious.js

@@ -2,13 +2,14 @@ import { useEffect, useRef } from 'react';
 export default function usePrevious(value) {
   // The ref object is a generic container whose current property is mutable ...
   // ... and can hold any value, similar to an instance property on a class
-  const ref = useRef(); // Store current value in ref
+  const ref = useRef();
 
+  // Store current value in ref
   useEffect(() => {
     ref.current = value;
   }, [value]); // Only re-run if value changes
-  // Return previous value (happens before update in useEffect above)
 
+  // Return previous value (happens before update in useEffect above)
   return ref.current;
 }
 ;

package/dist/hooks/useScrollPosition.js

@@ -1,17 +1,14 @@
 import { useEffect, useState } from 'react';
-
 const useScrollPosition = () => {
   const [scrollPosition, setScrollPosition] = useState(0);
   useEffect(() => {
     const updatePosition = () => {
       setScrollPosition(window.pageYOffset);
     };
-
     window.addEventListener('scroll', updatePosition);
     updatePosition();
     return () => window.removeEventListener('scroll', updatePosition);
   }, []);
   return scrollPosition;
 };
-
 export default useScrollPosition;

package/dist/hooks/useWindowDimensions.js

@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-
 function getWindowDimensions() {
   const {
     innerWidth: width,
@@ -10,14 +9,12 @@ function getWindowDimensions() {
     height
   };
 }
-
 export default function useWindowDimensions() {
   const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
   useEffect(() => {
     function handleResize() {
       setWindowDimensions(getWindowDimensions());
     }
-
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
   }, []);

package/dist/index.js

@@ -51,4 +51,5 @@ export { default as Cookie } from './components/Cookie';
 export { default as useOnScreen } from './hooks/useOnScreen';
 export { default as usePrevious } from './hooks/usePrevious';
 export { default as useScrollPosition } from './hooks/useScrollPosition';
-export { default as useWindowDimensions } from './hooks/useWindowDimensions';
+export { default as useWindowDimensions } from './hooks/useWindowDimensions';
+export { default as AbbreviationAnnotation } from './components/AbbreviationAnnotation';

package/dist/styles/assets/_base.scss

@@ -23,7 +23,6 @@ a:not(.Button) {
   &:focus,
   &:active,
   &:hover {
-    text-decoration: none;
     color: inherit;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.3.3",
+  "version": "2.3.5",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",
@@ -24,7 +24,7 @@
   "scripts": {
     "start": "yarn run storybook",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "jest",
     "eject": "react-scripts eject",
     "prepare": "yarn run publish:npm",
     "storybook": "start-storybook -p 9009 -s public",
@@ -40,11 +40,15 @@
     "@loadable/component": "^5.15.0",
     "@searchkit/client": "^3.0.0-canary.45",
     "@searchkit/elastic-ui": "^3.0.0-canary.45",
+    "@uncinc/react-drupal-core": "^2.3.4",
     "apollo-server-micro": "^3.4.0",
     "bootstrap": "^4",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "formik": "^2.2.6",
     "graphql": "^15.7.0",
+    "i18next": "^22.4.13",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-http-backend": "^2.2.0",
     "immutable": "^4.0.0-rc.15",
     "js-cookie": "^3.0.1",
     "lottie-web": "^5.7.7",
@@ -60,7 +64,7 @@
     "react-dom": "^16 || ^17 || ^18",
     "react-global-configuration": "^1.4.0",
     "react-html-parser": "^2.0.2",
-    "react-i18next": "^11.5.0",
+    "react-i18next": "^12.2.0",
     "react-immutable-proptypes": "^2.2.0",
     "react-lazyload": "^3.0.0",
     "react-paginate": "^7.1.3",
@@ -80,6 +84,8 @@
     "@babel/cli": "^7.0.0-beta.44",
     "@babel/helper-define-map": "^7.14.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
     "@babel/runtime": "^7.9.6",
     "@storybook/addon-actions": "^6.2.8",
     "@storybook/addon-info": "^5.3.21",
@@ -90,15 +96,18 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "babel-jest": "^29.4.3",
     "chai": "^4.2.0",
     "cross-env": "^7.0.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
+    "jest": "^29.4.3",
     "react-scripts": "3.4.1",
-    "react-test-renderer": "^16.13.1",
+    "react-test-renderer": "^18.2.0",
     "sinon": "^9.0.2",
     "sinon-chai": "^3.5.0",
-    "storybook-addon-export-stories": "^1.0.0"
+    "storybook-addon-export-stories": "^1.0.0",
+    "storybook-react-i18next": "^1.1.3"
   },
   "eslintConfig": {
     "extends": "react-app"

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'
-});