@onewelcome/react-lib-components 1.1.0 → 1.2.0

package/dist/util/helper.d.ts

@@ -3,4 +3,6 @@ declare type KeyValuePair = {
 };
 export declare const generateID: (length?: number, stringToWeaveIn?: string) => string;
 export declare const filterProps: (props: any, regexPattern: RegExp, returnFiltered?: boolean) => KeyValuePair;
+export declare const debounce: (fn: (...args: unknown[]) => unknown, delay: number) => (...args: unknown[]) => void;
+export declare const throttle: (fn: (...args: unknown[]) => unknown, delay: number) => () => void;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",

package/src/Form/Input/Input.module.scss

@@ -25,7 +25,7 @@
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
   padding: 0 1.25rem;
-  transition: all 0.2s ease-in-out;
+  @include transition(all, 0.2s, ease-in-out);
 
   // General autofill styles
   input:-webkit-autofill,
@@ -76,7 +76,7 @@
   box-sizing: border-box;
   border: 0;
   border-radius: var(--input-border-radius);
-  transition: all 0.2s ease-in-out;
+  @include transition(all, 0.2s, ease-in-out);
   background-color: transparent;
   z-index: 1;
 
@@ -103,7 +103,7 @@
   padding-right: 3.5rem;
 
   &.remove-extra-indent {
-    padding-right: 0rem;
+    padding-right: 0;
   }
 }
 
@@ -113,7 +113,7 @@
   height: 100%;
   width: 1.25rem;
   right: 1.25rem;
-  top: 0px;
+  top: 0;
   font-size: 1.125rem;
   display: flex;
   align-items: center;
@@ -127,7 +127,7 @@
 
 .input-wrapper [data-prefix],
 .input-wrapper [data-suffix] {
-  transition: all 0.2s ease-in-out;
+  @include transition(all, 0.2s, ease-in-out);
   display: block;
   z-index: 1;
 }

package/src/Form/Select/Select.module.scss

@@ -15,13 +15,14 @@
  */
 
 @import "../../readyclasses.module.scss";
+@import "../../mixins.module.scss";
 
 $listItemHeight: 2.125rem;
 
 .select {
   position: relative;
   box-sizing: border-box;
-  transition: all 0.2s ease-in-out;
+  @include transition(all, 0.2s, ease-in-out);
   border: 0;
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
@@ -65,7 +66,7 @@ $listItemHeight: 2.125rem;
     border-radius: var(--input-border-radius);
     font-size: var(--font-size);
     cursor: pointer;
-    transition: all 0.2s ease-in-out;
+    @include transition(all, 0.2s, ease-in-out);
 
     &:focus {
       outline: 0;

package/src/Form/Textarea/Textarea.module.scss

@@ -29,7 +29,7 @@
   box-sizing: border-box;
   border: 0;
   border-radius: var(--input-border-radius);
-  transition: all 0.2s ease-in-out;
+  @include transition(all, 0.2s, ease-in-out);
   font-family: var(--font-family);
   font-size: var(--font-size);
   color: var(--greyed-out);

package/src/Form/Toggle/Toggle.module.scss

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@import "../../mixins.module.scss";
+
 $borderRadius: 2.5rem;
 
 .toggle-wrapper {
@@ -29,7 +31,7 @@ $borderRadius: 2.5rem;
   background-color: var(--default);
   border-radius: $borderRadius;
   position: relative;
-  transition: background-color 0.2s ease-in-out;
+  @include transition(background-color, 0.2s, ease-in-out);
   display: block;
   pointer-events: none;
 
@@ -44,7 +46,7 @@ $borderRadius: 2.5rem;
     top: 50%;
     transform: translateY(-50%) translateX(0);
     left: 0.125rem;
-    transition: transform 0.2s ease-in-out;
+    @include transition(transform, 0.2s, ease-in-out);
   }
 
   &.checked {

package/src/Form/Wrapper/InputWrapper/InputWrapper.module.scss

@@ -30,7 +30,7 @@ input {
 
 .input-wrapper {
   [data-icon]:before {
-    transition: 0.2s ease-in-out;
+    @include transition(all, 0.2s, ease-in-out);
     transform: translateY(0px);
     font-size: 1.125rem;
   }

package/src/Form/Wrapper/TextareaWrapper/TextareaWrapper.module.scss

@@ -21,7 +21,7 @@
 .textarea-wrapper {
   &:after {
     content: "";
-    transition: all 0.15s ease-in-out;
+    @include transition(all, 0.15s, ease-in-out);
     display: block;
     width: calc(95%);
     height: 1.625rem;

package/src/Form/Wrapper/Wrapper/Wrapper.module.scss

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@import "../../../mixins.module.scss";
+
 .floating-wrapper {
   position: relative;
 
@@ -25,7 +27,7 @@
     top: 1.3125rem;
     left: 1.25rem;
     transform-origin: left top;
-    transition: all 0.2s ease-in-out;
+    @include transition(all, 0.2s, ease-in-out);
     pointer-events: none;
 
     &.floating-label-active {

package/src/Notifications/BaseModal/BaseModal.module.scss

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@import "../../mixins.module.scss";
+
 $zIndex: 10;
 $marginTop: 3.125rem;
 
@@ -39,7 +41,7 @@ $marginTop: 3.125rem;
     left: 0;
     top: 0;
     background-color: transparent;
-    transition: background-color 0.5s ease;
+    @include transition(background-color, 0.5s, ease);
   }
 
   &.visible {

package/src/Notifications/SlideInModal/SlideInModal.module.scss

@@ -14,12 +14,14 @@
  *    limitations under the License.
  */
 
+@import "../../mixins.module.scss";
+
 .slide-in-modal {
   justify-content: flex-end;
 
   visibility: visible;
 
-  transition: transform 0.5s ease-in-out;
+  @include transition(transform, 0.5s, ease-in-out);
   transform: translate(120%);
 
   &.hidden {

package/src/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.module.scss

@@ -13,14 +13,15 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+@import "../../../mixins.module.scss";
 
 .snackbars {
   position: fixed;
   z-index: 20;
   width: 100%;
-  transition: height 0.2s ease-in-out;
   display: flex;
   flex-direction: column;
+  @include transition(height, 0.2s, ease-in-out);
 
   &.bottom {
     bottom: 3.5rem;

package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -15,6 +15,7 @@
  */
 
 @import "../../../readyclasses.module.scss";
+@import "../../../mixins.module.scss";
 
 .snackbar {
   padding: 1rem 1.25rem;
@@ -22,7 +23,7 @@
   display: flex;
   width: 100%;
   box-sizing: border-box;
-  transition: height 0.2s ease-in-out;
+  @include transition(height, 0.2s, ease-in-out);
   flex-grow: 0;
 
   &.info {
@@ -122,8 +123,7 @@
 
     &:active {
       position: relative;
-      border-color: transparent;
-      border: 0;
+      border: 0 transparent;
       padding: calc(0.625rem + var(--button-border-width))
         calc(1.25rem + var(--button-border-width));
 

package/src/Popover/Popover.module.scss

@@ -14,17 +14,20 @@
  *    limitations under the License.
  */
 
+@import "../mixins.module.scss";
+
 .popover {
+  $transition-property: transform, opacity;
+
   position: fixed;
   pointer-events: none;
   background-color: var(--light);
   border-radius: 8px;
-  box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.29);
+  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.29);
   opacity: 0;
   transform: scale(0.5);
-  transition-property: transform, opacity;
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
+
+  @include transition($transition-property, 0.2s, ease-in-out);
 
   &.show {
     transform: scale(1);

package/src/Tabs/Tabs.module.scss

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@import "../mixins.module.scss";
+
 $focus-width: 5px;
 
 .tabs {
@@ -37,12 +39,13 @@ $focus-width: 5px;
 }
 
 .indicator {
+  $transition-property: left, width;
+
   position: absolute;
   height: var(--tab-active-border-height);
   background-color: var(--tab-active-border-color);
-  transition-property: left, width;
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
+
+  @include transition($transition-property, 0.2s, ease-in-out);
 }
 
 .tabdivider {

package/src/TextEllipsis/TextEllipsis.module.scss

@@ -25,7 +25,7 @@
   padding: 0.6875rem 0.6875rem 0.6875rem 0.875rem;
   border-radius: 0.25rem;
 
-  box-shadow: 0rem 0.1875rem 0.375rem rgba(0, 0, 0, 0.29);
+  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.29);
   white-space: pre-wrap;
 
   transition-property: opacity;

package/src/Tiles/Tile.module.scss

@@ -22,7 +22,7 @@
   box-sizing: border-box;
   padding: 0 0 2rem;
   background-color: var(--light);
-  transition: box-shadow 0.2s ease-in-out;
+  @include transition(box-shadow, 0.2s, ease-in-out);
   font-family: var(--font-family);
 
   &:hover {

package/src/Tooltip/Tooltip.module.scss

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@import "../mixins.module.scss";
+
 .wrapper {
   display: flex;
   align-items: center;
@@ -22,7 +24,7 @@
 .tooltip-wrapper {
   .icon {
     margin-left: 0.5rem;
-    transition: all 0.2s ease-in-out;
+    @include transition(all, 0.2s, ease-in-out);
     color: var(--greyed-out);
 
     &:hover {
@@ -32,6 +34,8 @@
 }
 
 .tooltip {
+  $transition-property: opacity, transform;
+
   position: fixed;
   background-color: var(--default);
   padding: 0.1875rem 0.5rem;
@@ -39,12 +43,11 @@
   max-width: 330px;
   opacity: 0;
   transform: scale(0);
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
-  transition-property: opacity, transform;
   transform-origin: center left;
   pointer-events: none;
 
+  @include transition($transition-property, 0.2s, ease-in-out);
+
   &.visible {
     opacity: 1;
     transform: scale(1);

package/src/_BaseStyling_/BaseStyling.tsx

@@ -140,7 +140,6 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
   /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */
   const [isLoading, setIsLoading] = useState(true);
 
-  /** Set the actual CSS properties on the HTML :root object */
   const setCSSProperties = (CSSPropertiesObject: CSSProperties) => {
     for (const [key, value] of Object.entries(CSSPropertiesObject)) {
       const formattedPropertyName = key.replace(/([A-Z])/g, val => `-${val.toLowerCase()}`);
@@ -148,7 +147,6 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     }
   };
 
-  /** Check if the properties prop object is filled with anything. If it is, we want to shallow merge it with the default BaseStyling. */
   useEffect(() => {
     if (Object.keys(properties).length !== 0) {
       const mergedState = { ...defaultProperties, ...properties };
@@ -159,6 +157,5 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     setIsLoading(false);
   }, [properties]);
 
-  /** Only render if we're not loading */
   return !isLoading ? <Fragment>{children}</Fragment> : null;
 };

package/src/index.ts

@@ -43,7 +43,7 @@ export {
 
 /* Utils */
 export { useRepeater } from "./hooks/useRepeater";
-export { generateID } from "./util/helper";
+export { generateID, debounce, throttle } from "./util/helper";
 
 /* Notifications */
 export { Modal, Props as ModalProps } from "./Notifications/Modal/Modal";

package/src/mixins.module.scss

@@ -133,6 +133,7 @@
 }
 
 @mixin buttonBase($type: "default") {
+  $transition-property: color, background-color, border-color;
   $disabledSelector: if($type == "link", ".disabled", ":disabled");
 
   border-width: var(--button-border-width);
@@ -144,9 +145,9 @@
   padding: 0.5rem 1.25rem;
   min-height: 2.5rem;
   cursor: pointer;
-  transition-property: color, background-color, border-color;
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
+
+  @include transition($transition-property, 0.2s, ease-in-out);
+
   font-family: var(--font-family);
 
   &#{$disabledSelector} {
@@ -166,7 +167,7 @@
     border-style: var(--input-border-style);
     border-width: var(--input-border-width);
     border-radius: var(--input-border-radius);
-    transition: all 0.2s ease-in-out;
+    @include transition(all, 0.2s, ease-in-out);
   }
 }
 
@@ -223,8 +224,13 @@
       rgba(#fff, 0.5) 60%,
       rgba(#fff, 0)
     );
-    animation: shimmer 2s infinite;
     content: "";
+
+    animation: shimmer 2s infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 
   @keyframes shimmer {
@@ -233,3 +239,13 @@
     }
   }
 }
+
+@mixin transition($property, $duration, $function) {
+  transition-property: $property;
+  transition-duration: $duration;
+  transition-timing-function: $function;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0.1ms;
+  }
+}

package/src/readyclasses.module.scss

@@ -31,10 +31,18 @@
 
 .slide-in {
   animation: slide-in 0.5s forwards;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.1ms;
+  }
 }
 
 .slide-out {
   animation: slide-out 0.5s forwards;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.1ms;
+  }
 }
 
 @keyframes slide-in {

package/src/util/helper.test.tsx

@@ -14,7 +14,10 @@
  *    limitations under the License.
  */
 
-import { generateID, filterProps } from "./helper";
+import React, { useCallback, useEffect, useState } from "react";
+import { fireEvent, waitFor } from "@testing-library/dom";
+import { generateID, filterProps, debounce, throttle } from "./helper";
+import { render } from "@testing-library/react";
 
 /* Generate an ID of 20 characters with a string woven in */
 
@@ -66,3 +69,127 @@ describe("filterprops should return the correct object", () => {
     });
   });
 });
+
+describe("debounce function", () => {
+  it("debounced the resizing of the window, it will only execute 1 time", async () => {
+    const debouncedFunction = jest.fn();
+
+    window.addEventListener("resize", debounce(debouncedFunction, 200));
+
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+
+    await waitFor(() => expect(debouncedFunction).toHaveBeenCalledTimes(1));
+  });
+
+  it("Works in a react component as well, it should only fire the exampleFunction once.", async () => {
+    const ExampleComponent = ({
+      debouncedFunction
+    }: {
+      debouncedFunction: (...args: unknown[]) => unknown;
+    }) => {
+      const [variable, setVariable] = useState(0);
+
+      useEffect(() => {
+        debouncedFunction(variable);
+      }, [variable]);
+
+      const incrementVariable = () => {
+        setVariable(Math.random());
+      };
+
+      useEffect(() => {
+        window.addEventListener("resize", debounce(incrementVariable, 200));
+      }, []);
+
+      return null;
+    };
+
+    const exampleFunction = jest.fn();
+
+    render(<ExampleComponent debouncedFunction={exampleFunction} />);
+
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+
+    expect(exampleFunction).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("throttling works", () => {
+  it("throttles the function", async () => {
+    const throttledFunction = jest.fn();
+
+    window.addEventListener("resize", throttle(throttledFunction, 1));
+
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+
+    expect(throttledFunction).not.toHaveBeenCalledTimes(1);
+    expect(throttledFunction).not.toHaveBeenCalledTimes(10);
+  });
+
+  it("Works in a react component as well, it should only fire the exampleFunction once.", async () => {
+    const ExampleComponent = ({
+      throttledFunction
+    }: {
+      throttledFunction: (...args: unknown[]) => unknown;
+    }) => {
+      const [variable, setVariable] = useState(0);
+
+      useEffect(() => {
+        throttledFunction(variable);
+      }, [variable]);
+
+      const incrementVariable = useCallback(() => {
+        setVariable(Math.random());
+      }, []);
+
+      useEffect(() => {
+        window.addEventListener("resize", throttle(incrementVariable, 1));
+      }, []);
+
+      return null;
+    };
+
+    const exampleFunction = jest.fn();
+
+    render(<ExampleComponent throttledFunction={exampleFunction} />);
+
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+
+    expect(exampleFunction).not.toHaveBeenCalledTimes(1);
+    expect(exampleFunction).not.toHaveBeenCalledTimes(10);
+  });
+});

package/src/util/helper.tsx

@@ -115,3 +115,31 @@ export const filterProps = (props: any, regexPattern: RegExp, returnFiltered: bo
       );
   }
 };
+
+export const debounce = (fn: (...args: unknown[]) => unknown, delay: number) => {
+  let timeout: undefined | ReturnType<typeof setTimeout>;
+
+  return function executedFunction(...args: unknown[]) {
+    const later = () => {
+      clearTimeout(timeout);
+      fn(...args);
+    };
+
+    clearTimeout(timeout);
+
+    timeout = setTimeout(later, delay);
+  };
+};
+
+export const throttle = (fn: (...args: unknown[]) => unknown, delay: number) => {
+  let lastTime = 0;
+
+  return function () {
+    let now = Date.now();
+
+    if (now - lastTime >= delay) {
+      fn();
+      lastTime = now;
+    }
+  };
+};