@onewelcome/react-lib-components 1.1.0 → 1.3.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.3.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",

package/src/Button/Button.module.scss

@@ -42,4 +42,13 @@
     padding-left: 1.25rem;
     padding-right: 1rem;
   }
+
+  i {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 1.5rem;
+    margin-right: 0.25rem;
+  }
 }

package/src/Button/Button.tsx

@@ -62,7 +62,7 @@ export const Button = React.forwardRef<HTMLButtonElement, Props>(
         ref={ref}
         className={`${classes[color]} ${classes[variant]} ${additionalClasses.join(" ")}`}
       >
-        {startIcon && <i>{startIcon}&nbsp;</i>}
+        {startIcon && <i>{startIcon}</i>}
         <span>{children}</span>
         {endIcon && <i>&nbsp;{endIcon}</i>}
       </BaseButton>

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/Icon/Icon.module.scss

@@ -42,6 +42,7 @@
 
 .icon {
   line-height: 0;
+  font-size: 0.875rem;
 }
 
 .icon-image:before {

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/hooks/useDebouncedCallback.test.ts

@@ -0,0 +1,140 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import { useDebouncedCallback } from "./useDebouncedCallback";
+
+const BASE_DELAY = 300;
+const EXTRA_DELAY = 200;
+
+const sleep = (delay: number) => new Promise(resolve => setTimeout(resolve, delay));
+
+describe("Testing the useDebouncedCallback hook", () => {
+  it("should run callback after specified delay", async () => {
+    const delay = BASE_DELAY;
+    const callback = jest.fn();
+
+    const { result } = renderHook(() => useDebouncedCallback(callback, delay));
+
+    expect(callback).toHaveBeenCalledTimes(0);
+    act(result.current);
+    await sleep(delay + EXTRA_DELAY);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    act(result.current);
+    await sleep(delay + EXTRA_DELAY);
+
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+
+  it("should pass args through to callback function", async () => {
+    let mutableValue = "";
+    const delay = BASE_DELAY;
+    const callback = jest.fn(arg => (mutableValue = `got arg ${arg}`));
+
+    const { result } = renderHook(() => useDebouncedCallback(callback, delay));
+
+    act(() => result.current("passthrough"));
+    await sleep(delay + EXTRA_DELAY);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(mutableValue).toBe(`got arg passthrough`);
+  });
+
+  it("should cancel pending call if fn is called again", async () => {
+    const delay = BASE_DELAY;
+    const callback = jest.fn();
+
+    const { result } = renderHook(() => useDebouncedCallback(callback, delay));
+
+    expect(callback).toHaveBeenCalledTimes(0);
+    act(result.current);
+    await sleep(delay / 2);
+
+    act(result.current);
+    await sleep(delay + EXTRA_DELAY);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should cancel pending call if callback changes", async () => {
+    const delay = BASE_DELAY;
+    const callback1 = jest.fn();
+    const callback2 = jest.fn();
+
+    const { result, rerender } = renderHook(
+      ({ callback, delay }) => useDebouncedCallback(callback, delay),
+      { initialProps: { callback: callback1, delay } }
+    );
+
+    act(result.current);
+    await sleep(delay / 2);
+
+    rerender({ callback: callback2, delay });
+    act(result.current);
+    await sleep(delay + EXTRA_DELAY);
+
+    expect(callback1).toHaveBeenCalledTimes(0);
+    expect(callback2).toHaveBeenCalledTimes(1);
+  });
+
+  it("should cancel pending call if delay changes", async () => {
+    const delay1 = BASE_DELAY;
+    const delay2 = BASE_DELAY * 2;
+    const callback = jest.fn();
+
+    const { result, rerender } = renderHook(
+      ({ callback, delay }) => useDebouncedCallback(callback, delay),
+      { initialProps: { callback, delay: delay1 } }
+    );
+
+    act(result.current);
+    await sleep(delay1 / 2);
+
+    rerender({ callback, delay: delay2 });
+    act(result.current);
+    await sleep(delay2 + EXTRA_DELAY);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should cancel pending call if dependencies change", async () => {
+    const delay = BASE_DELAY;
+    const callback = jest.fn();
+
+    const { result, rerender } = renderHook(
+      ({ callback, delay, dependencies }) => useDebouncedCallback(callback, delay, dependencies),
+      { initialProps: { callback, delay, dependencies: ["a"] } }
+    );
+
+    act(result.current);
+    await sleep(delay / 2);
+
+    rerender({ callback, delay, dependencies: ["b"] });
+    act(result.current);
+    await sleep(delay + EXTRA_DELAY);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should support async callbacks", async () => {
+    const makeAsyncCall = jest.fn(
+      () =>
+        new Promise(async resolve => {
+          await sleep(delay / 2);
+          resolve(null);
+        })
+    );
+
+    const delay = BASE_DELAY;
+    const callback = jest.fn(async () => {
+      await makeAsyncCall();
+    });
+
+    const { result } = renderHook(() => useDebouncedCallback(callback, delay));
+
+    await act(async () => result.current());
+    await sleep(delay + EXTRA_DELAY);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(makeAsyncCall).toHaveBeenCalledTimes(1);
+  });
+});

package/src/hooks/useDebouncedCallback.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React from "react";
+
+export const useDebouncedCallback = (callback: Function, delay: number, dependencies?: any[]) => {
+  const timeout = React.useRef<ReturnType<typeof setTimeout>>();
+  const comboDeps = dependencies ? [callback, delay, ...dependencies] : [callback, delay];
+
+  return React.useCallback((...args) => {
+    if (timeout.current != null) {
+      clearTimeout(timeout.current);
+    }
+
+    timeout.current = setTimeout(() => {
+      callback(...args);
+    }, delay);
+  }, comboDeps);
+};

package/src/index.ts

@@ -43,7 +43,8 @@ export {
 
 /* Utils */
 export { useRepeater } from "./hooks/useRepeater";
-export { generateID } from "./util/helper";
+export { useDebouncedCallback } from "./hooks/useDebouncedCallback";
+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 {