@uncinc/uncinc-react-kitchen-sink 2.3.2 → 2.3.4

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "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",
@@ -53,14 +57,14 @@
     "next-with-apollo": "^5.2.1",
     "ola": "^1.1.1",
     "path": "^0.12.7",
-    "react": "^16.14.0",
+    "react": "^16 || ^17 || ^18",
     "react-animate-height": "^2.0.23",
     "react-autosuggest": "^10.0.2",
     "react-datepicker": "^3.0.0",
-    "react-dom": "^16.4",
+    "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/components/WysiwygField/stories.scss

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

package/dist/helpers/makeSafeForCSS.js

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