@onewelcome/react-lib-components 0.2.1 → 0.2.2

package/src/hooks/usePosition.ts

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 export interface ConfigObject {
   relativeElement: RefElement;
@@ -8,10 +8,10 @@ export interface ConfigObject {
   offset?: Offset;
 }
 
-export type HorizontalPlacment = 'left' | 'center' | 'centerh' | 'right';
-export type VerticalPlacement = 'top' | 'center' | 'centerv' | 'bottom';
+export type HorizontalPlacment = "left" | "center" | "centerh" | "right";
+export type VerticalPlacement = "top" | "center" | "centerv" | "bottom";
 
-type Axis = 'vertical' | 'horizontal';
+type Axis = "vertical" | "horizontal";
 type RefElement = React.RefObject<HTMLOrSVGElement> | undefined;
 
 interface DomRectObject {
@@ -52,25 +52,25 @@ interface Dimensions {
   width: number;
 }
 
-type PositionType = number | 'initial';
+type PositionType = number | "initial";
 
 const defaultConfigObject: ConfigObject = {
   relativeElement: undefined,
   elementToBePositioned: undefined,
   transformOrigin: {
-    horizontal: 'left',
-    vertical: 'top',
+    horizontal: "left",
+    vertical: "top"
   },
   placement: {
-    horizontal: 'left',
-    vertical: 'top',
+    horizontal: "left",
+    vertical: "top"
   },
   offset: {
     top: 0,
     right: 0,
     bottom: 0,
-    left: 0,
-  },
+    left: 0
+  }
 };
 
 export const usePosition = (providedConfigObject: ConfigObject = defaultConfigObject) => {
@@ -91,8 +91,8 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
   const [position, setPosition] = useState<Position>({
     left: 0,
     top: 0,
-    right: 'initial',
-    bottom: 'initial',
+    right: "initial",
+    bottom: "initial"
   });
 
   const _fixPossibleViewportOverflow = (
@@ -104,43 +104,43 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
     let returnValue = value;
 
     if (
-      (transformOrigin[requestedReturnValue] === 'left' && returnValue < 0) ||
-      (transformOrigin[requestedReturnValue] === 'top' && returnValue < 0) ||
-      (transformOrigin[requestedReturnValue] === 'center' && returnValue < 0) ||
-      (transformOrigin[requestedReturnValue] === 'bottom' && returnValue < 0)
+      (transformOrigin[requestedReturnValue] === "left" && returnValue < 0) ||
+      (transformOrigin[requestedReturnValue] === "top" && returnValue < 0) ||
+      (transformOrigin[requestedReturnValue] === "center" && returnValue < 0) ||
+      (transformOrigin[requestedReturnValue] === "bottom" && returnValue < 0)
     ) {
       returnValue = 0;
     }
 
     if (
-      (transformOrigin[requestedReturnValue] === 'left' &&
+      (transformOrigin[requestedReturnValue] === "left" &&
         returnValue > window.innerWidth - elDimensions.width) ||
-      (transformOrigin[requestedReturnValue] === 'center' &&
-        requestedReturnValue === 'horizontal' &&
+      (transformOrigin[requestedReturnValue] === "center" &&
+        requestedReturnValue === "horizontal" &&
         returnValue > window.innerWidth - elDimensions.width)
     ) {
       returnValue = window.innerWidth - elDimensions.width;
     }
 
     if (
-      (transformOrigin[requestedReturnValue] === 'top' &&
+      (transformOrigin[requestedReturnValue] === "top" &&
         returnValue > window.innerHeight - elDimensions.height) ||
-      (transformOrigin[requestedReturnValue] === 'center' &&
-        requestedReturnValue === 'vertical' &&
+      (transformOrigin[requestedReturnValue] === "center" &&
+        requestedReturnValue === "vertical" &&
         returnValue > window.innerHeight - elDimensions.height)
     ) {
       returnValue = window.innerHeight - elDimensions.height;
     }
 
     if (
-      transformOrigin[requestedReturnValue] === 'right' &&
+      transformOrigin[requestedReturnValue] === "right" &&
       returnValue > window.innerWidth - elDimensions.width
     ) {
       returnValue = window.innerWidth - elDimensions.width;
     }
 
     if (
-      transformOrigin[requestedReturnValue] === 'bottom' &&
+      transformOrigin[requestedReturnValue] === "bottom" &&
       returnValue > window.innerHeight - elDimensions.height
     ) {
       returnValue = window.innerHeight - elDimensions.height;
@@ -156,36 +156,36 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
   ) => {
     let returnValue = value;
     if (
-      (requestedReturnValue === 'horizontal' && configObject.offset?.left !== 0) ||
-      (requestedReturnValue === 'horizontal' && configObject.offset?.right !== 0)
+      (requestedReturnValue === "horizontal" && configObject.offset?.left !== 0) ||
+      (requestedReturnValue === "horizontal" && configObject.offset?.right !== 0)
     ) {
       if (
-        transformOrigin[requestedReturnValue] === 'left' ||
-        transformOrigin[requestedReturnValue] === 'center'
+        transformOrigin[requestedReturnValue] === "left" ||
+        transformOrigin[requestedReturnValue] === "center"
       ) {
         returnValue += configObject.offset?.left!;
         returnValue -= configObject.offset?.right!;
       }
 
-      if (transformOrigin[requestedReturnValue] === 'right') {
+      if (transformOrigin[requestedReturnValue] === "right") {
         returnValue -= configObject.offset?.left!;
         returnValue += configObject.offset?.right!;
       }
     }
 
     if (
-      (requestedReturnValue === 'vertical' && configObject.offset?.top !== 0) ||
-      (requestedReturnValue === 'vertical' && configObject.offset?.bottom !== 0)
+      (requestedReturnValue === "vertical" && configObject.offset?.top !== 0) ||
+      (requestedReturnValue === "vertical" && configObject.offset?.bottom !== 0)
     ) {
       if (
-        transformOrigin[requestedReturnValue] === 'top' ||
-        transformOrigin[requestedReturnValue] === 'center'
+        transformOrigin[requestedReturnValue] === "top" ||
+        transformOrigin[requestedReturnValue] === "center"
       ) {
         returnValue += configObject.offset?.top!;
         returnValue -= configObject.offset?.bottom!;
       }
 
-      if (transformOrigin[requestedReturnValue] === 'bottom') {
+      if (transformOrigin[requestedReturnValue] === "bottom") {
         returnValue -= configObject.offset?.top!;
         returnValue += configObject.offset?.bottom!;
       }
@@ -204,20 +204,20 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
     let value = 0;
 
     if (
-      transformOrigin[requestedReturnValue] === 'left' ||
-      transformOrigin[requestedReturnValue] === 'top'
+      transformOrigin[requestedReturnValue] === "left" ||
+      transformOrigin[requestedReturnValue] === "top"
     ) {
       value = relEl[placementOriginDefinition];
-    } else if (transformOrigin[requestedReturnValue] === 'center') {
+    } else if (transformOrigin[requestedReturnValue] === "center") {
       value =
         relEl[placementOriginDefinition] -
-        elDimensions[requestedReturnValue === 'horizontal' ? 'width' : 'height'] / 2;
+        elDimensions[requestedReturnValue === "horizontal" ? "width" : "height"] / 2;
     } else if (
-      transformOrigin[requestedReturnValue] === 'right' ||
-      transformOrigin[requestedReturnValue] === 'bottom'
+      transformOrigin[requestedReturnValue] === "right" ||
+      transformOrigin[requestedReturnValue] === "bottom"
     ) {
       value =
-        window[requestedReturnValue === 'horizontal' ? 'innerWidth' : 'innerHeight'] -
+        window[requestedReturnValue === "horizontal" ? "innerWidth" : "innerHeight"] -
         relEl[placementOriginDefinition];
     }
 
@@ -230,10 +230,10 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
    * @returns either the horizontally centered placement definition (centerh) or the vertically centered one (centerv)
    */
   const _determineCenteredPlacementOrigin = (requestedReturnValue: Axis) => {
-    if (requestedReturnValue === 'horizontal') {
-      return 'centerh';
-    } else if (requestedReturnValue === 'vertical') {
-      return 'centerv';
+    if (requestedReturnValue === "horizontal") {
+      return "centerh";
+    } else if (requestedReturnValue === "vertical") {
+      return "centerv";
     }
     throw new Error(
       `the requested return value isn\'t "vertical" or "horizontal" ${requestedReturnValue} was given.`
@@ -248,7 +248,7 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
     elDimensions: Dimensions
   ): number => {
     const placementOriginDefinition =
-      placement === 'center' ? _determineCenteredPlacementOrigin(requestedReturnValue) : placement;
+      placement === "center" ? _determineCenteredPlacementOrigin(requestedReturnValue) : placement;
 
     const value = _calculateInitialPlacementValue(
       transformOrigin,
@@ -283,29 +283,29 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
       elDimensions
     );
 
-    let direction = 'left';
-    let oppositeDirection = 'right';
+    let direction = "left";
+    let oppositeDirection = "right";
 
-    if (axis === 'horizontal' && configObject.transformOrigin?.horizontal === 'right') {
-      direction = 'right';
-      oppositeDirection = 'left';
-    } else if (axis === 'horizontal') {
-      direction = 'left';
-      oppositeDirection = 'right';
+    if (axis === "horizontal" && configObject.transformOrigin?.horizontal === "right") {
+      direction = "right";
+      oppositeDirection = "left";
+    } else if (axis === "horizontal") {
+      direction = "left";
+      oppositeDirection = "right";
     }
 
-    if (axis === 'vertical' && configObject.transformOrigin?.vertical === 'bottom') {
-      direction = 'bottom';
-      oppositeDirection = 'top';
-    } else if (axis === 'vertical') {
-      direction = 'top';
-      oppositeDirection = 'bottom';
+    if (axis === "vertical" && configObject.transformOrigin?.vertical === "bottom") {
+      direction = "bottom";
+      oppositeDirection = "top";
+    } else if (axis === "vertical") {
+      direction = "top";
+      oppositeDirection = "bottom";
     }
 
-    setPosition((prevState) => ({
+    setPosition(prevState => ({
       ...prevState,
       [direction]: placementValue,
-      [oppositeDirection]: 'initial',
+      [oppositeDirection]: "initial"
     }));
   };
 
@@ -315,7 +315,7 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
       .current as HTMLElement)!.getBoundingClientRect();
     const elementToBePositionedDimensions: Dimensions = {
       height: (configObject.elementToBePositioned!.current as HTMLElement).offsetHeight,
-      width: (configObject.elementToBePositioned!.current as HTMLElement).offsetWidth,
+      width: (configObject.elementToBePositioned!.current as HTMLElement).offsetWidth
     };
 
     /** We want to add a center (horizontal and vertical) property to the DOMRect object. Since it's a special object we can't modify so we clone it and add it. */
@@ -330,11 +330,11 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
       width: relativeElRect.width,
       height: relativeElRect.height,
       x: relativeElRect.x,
-      y: relativeElRect.y,
+      y: relativeElRect.y
     };
 
-    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, 'horizontal');
-    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, 'vertical');
+    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, "horizontal");
+    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, "vertical");
   };
 
   return {
@@ -342,6 +342,6 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
     bottom: position.bottom,
     left: position.left,
     right: position.right,
-    calculatePosition,
+    calculatePosition
   };
 };

package/src/hooks/useRepeater.test.tsx

@@ -1,9 +1,9 @@
-import React, { Fragment, useEffect, useState } from 'react';
-import { useRepeater } from './useRepeater';
-import { render } from '@testing-library/react';
-import { InputWrapper } from '../Form/Wrapper/InputWrapper/InputWrapper';
-import { generateID } from '../util/helper';
-import userEvent from '@testing-library/user-event';
+import React, { Fragment, useEffect, useState } from "react";
+import { useRepeater } from "./useRepeater";
+import { render } from "@testing-library/react";
+import { InputWrapper } from "../Form/Wrapper/InputWrapper/InputWrapper";
+import { generateID } from "../util/helper";
+import userEvent from "@testing-library/user-event";
 
 export interface RepeatedComponentProps {
   onChange?: (state: { [key: string]: unknown }) => void;
@@ -12,10 +12,10 @@ export interface RepeatedComponentProps {
 
 const ComponentToRepeat = ({ onChange, identifier }: RepeatedComponentProps) => {
   const [inputState, setInputState] = useState({
-    errorMessage: 'random error',
+    errorMessage: "random error",
     error: false,
-    value: '',
-    identifier: identifier,
+    value: "",
+    identifier: identifier
   });
 
   useEffect(() => {
@@ -31,27 +31,27 @@ const ComponentToRepeat = ({ onChange, identifier }: RepeatedComponentProps) =>
       error={inputState.error}
       value={inputState.value}
       label="Label for this inputfield"
-      onChange={(event) => {
-        setInputState((prevState) => ({ ...prevState, value: event.target.value }));
+      onChange={event => {
+        setInputState(prevState => ({ ...prevState, value: event.target.value }));
       }}
     />
   );
 };
 
-describe('useRepeater should render', () => {
-  it('renders without crashing and repeats 1 item', () => {
+describe("useRepeater should render", () => {
+  it("renders without crashing and repeats 1 item", () => {
     const onChangeHandler = jest.fn();
 
     const App = () => {
       const { repeatedComponents } = useRepeater({
-        componentToRepeat: <ComponentToRepeat onChange={onChangeHandler} />,
+        componentToRepeat: <ComponentToRepeat onChange={onChangeHandler} />
       });
 
       return (
         <div>
           {repeatedComponents.map((component, index) =>
             React.cloneElement(component, {
-              identifier: `component_${index}`,
+              identifier: `component_${index}`
             })
           )}
         </div>
@@ -60,17 +60,17 @@ describe('useRepeater should render', () => {
 
     const renderedItems = render(<App />);
 
-    const inputWrappers = renderedItems.container.querySelectorAll('.wrapper.input-wrapper');
+    const inputWrappers = renderedItems.container.querySelectorAll(".wrapper.input-wrapper");
 
     expect(inputWrappers.length).toBe(1);
   });
 
-  it('should repeat 2 items', () => {
+  it("should repeat 2 items", () => {
     const onChangeHandler = jest.fn();
 
     const App = () => {
       const { repeatedComponents, repeat } = useRepeater({
-        componentToRepeat: <ComponentToRepeat onChange={onChangeHandler} />,
+        componentToRepeat: <ComponentToRepeat onChange={onChangeHandler} />
       });
 
       useEffect(() => {
@@ -81,7 +81,7 @@ describe('useRepeater should render', () => {
         <div>
           {repeatedComponents.map((component, index) =>
             React.cloneElement(component, {
-              identifier: `component_${index}`,
+              identifier: `component_${index}`
             })
           )}
         </div>
@@ -90,17 +90,17 @@ describe('useRepeater should render', () => {
 
     const renderedItems = render(<App />);
 
-    const inputWrappers = renderedItems.container.querySelectorAll('.wrapper.input-wrapper');
+    const inputWrappers = renderedItems.container.querySelectorAll(".wrapper.input-wrapper");
 
     expect(inputWrappers.length).toBe(2);
   });
 
-  it('should repeat 3 items and remove the first index', () => {
+  it("should repeat 3 items and remove the first index", () => {
     const onChangeHandler = jest.fn();
 
     const App = () => {
       const { repeatedComponents, repeat, remove } = useRepeater({
-        componentToRepeat: <ComponentToRepeat onChange={onChangeHandler} />,
+        componentToRepeat: <ComponentToRepeat onChange={onChangeHandler} />
       });
 
       useEffect(() => {
@@ -113,7 +113,7 @@ describe('useRepeater should render', () => {
           {repeatedComponents.map((component, index) => (
             <Fragment key={index}>
               {React.cloneElement(component, {
-                identifier: generateID(),
+                identifier: generateID()
               })}
               <button id={`remove_input_${index}`} onClick={() => remove(component)}>
                 Remove
@@ -126,14 +126,14 @@ describe('useRepeater should render', () => {
 
     const renderedItems = render(<App />);
 
-    const secondInputID = renderedItems.container.querySelectorAll('.input-wrapper input')[1].id;
+    const secondInputID = renderedItems.container.querySelectorAll(".input-wrapper input")[1].id;
 
-    const removeButton = renderedItems.container.querySelector('#remove_input_1');
+    const removeButton = renderedItems.container.querySelector("#remove_input_1");
 
     userEvent.click(removeButton!);
 
     expect(renderedItems.container.querySelector(`#${secondInputID}`)).toBeFalsy();
-    const inputWrappers = renderedItems.container.querySelectorAll('.wrapper.input-wrapper');
+    const inputWrappers = renderedItems.container.querySelectorAll(".wrapper.input-wrapper");
     expect(inputWrappers.length).toBe(2);
   });
 });

package/src/hooks/useRepeater.ts

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { generateID } from '../util/helper';
+import React, { useEffect, useState } from "react";
+import { generateID } from "../util/helper";
 
 interface Arguments {
   componentToRepeat: React.ReactElement;
@@ -15,12 +15,12 @@ export const useRepeater = <T>({ componentToRepeat }: Arguments) => {
   const repeat = () => {
     const clonedComponent = React.cloneElement(componentToRepeat, { key: generateID(20) });
 
-    setRepeatedComponents((prevState) => [...prevState, clonedComponent]);
+    setRepeatedComponents(prevState => [...prevState, clonedComponent]);
   };
 
   const remove = (componentToRemove: React.ReactElement<T>) => {
     const newRepeatedComponents = repeatedComponents.filter(
-      (component) => component !== componentToRemove
+      component => component !== componentToRemove
     );
 
     setRepeatedComponents(newRepeatedComponents);
@@ -29,6 +29,6 @@ export const useRepeater = <T>({ componentToRepeat }: Arguments) => {
   return {
     repeatedComponents,
     repeat,
-    remove,
+    remove
   };
 };

package/src/hooks/useScroll.test.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import { useScroll } from './useScroll';
+import React from "react";
+import { fireEvent, render } from "@testing-library/react";
+import { useScroll } from "./useScroll";
 
-describe('function should be executed', () => {
-  it('should execute', () => {
+describe("function should be executed", () => {
+  it("should execute", () => {
     const scrollHandler = jest.fn();
 
     const Component = () => {

package/src/hooks/useScroll.ts

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect } from 'react';
+import React, { useLayoutEffect } from "react";
 
 export const useScroll = (
   callbackFunction: (event: Event) => unknown,
@@ -7,10 +7,10 @@ export const useScroll = (
   const scrollListener = (event: Event) => callbackFunction(event);
 
   useLayoutEffect(() => {
-    window.addEventListener('scroll', scrollListener);
+    window.addEventListener("scroll", scrollListener);
 
     return () => {
-      window.removeEventListener('scroll', scrollListener);
+      window.removeEventListener("scroll", scrollListener);
     };
   }, [...dependingStateVariable]);
 };

package/src/hooks/useSpacing.test.ts

@@ -1,70 +1,70 @@
-import { useSpacing } from './useSpacing';
+import { useSpacing } from "./useSpacing";
 
-describe('useSpacing should set propert padding and margin css properties', () => {
-  it('should set padding and margin for 4 values definition', () => {
-    const styles = useSpacing({ padding: '0 0.5 1 2', margin: '0 0.5 1 2' });
-    expect(styles).toHaveProperty('padding', '0rem 0.125rem 0.25rem 0.5rem');
-    expect(styles).toHaveProperty('margin', '0rem 0.125rem 0.25rem 0.5rem');
+describe("useSpacing should set propert padding and margin css properties", () => {
+  it("should set padding and margin for 4 values definition", () => {
+    const styles = useSpacing({ padding: "0 0.5 1 2", margin: "0 0.5 1 2" });
+    expect(styles).toHaveProperty("padding", "0rem 0.125rem 0.25rem 0.5rem");
+    expect(styles).toHaveProperty("margin", "0rem 0.125rem 0.25rem 0.5rem");
   });
 
-  it('should set padding and margin for 3 values definition', () => {
-    const styles = useSpacing({ padding: '3 4 5', margin: '3 4 5' });
-    expect(styles).toHaveProperty('padding', '0.75rem 1rem 1.25rem');
-    expect(styles).toHaveProperty('margin', '0.75rem 1rem 1.25rem');
+  it("should set padding and margin for 3 values definition", () => {
+    const styles = useSpacing({ padding: "3 4 5", margin: "3 4 5" });
+    expect(styles).toHaveProperty("padding", "0.75rem 1rem 1.25rem");
+    expect(styles).toHaveProperty("margin", "0.75rem 1rem 1.25rem");
   });
 
-  it('should set padding and margin for 2 values definition', () => {
-    const styles = useSpacing({ padding: '6 7', margin: '6 7' });
-    expect(styles).toHaveProperty('padding', '1.5rem 1.75rem');
-    expect(styles).toHaveProperty('margin', '1.5rem 1.75rem');
+  it("should set padding and margin for 2 values definition", () => {
+    const styles = useSpacing({ padding: "6 7", margin: "6 7" });
+    expect(styles).toHaveProperty("padding", "1.5rem 1.75rem");
+    expect(styles).toHaveProperty("margin", "1.5rem 1.75rem");
   });
 
-  it('should set padding and margin for 1 value definition', () => {
-    const styles = useSpacing({ padding: 8, margin: '8' });
-    expect(styles).toHaveProperty('padding', '2rem');
-    expect(styles).toHaveProperty('margin', '2rem');
+  it("should set padding and margin for 1 value definition", () => {
+    const styles = useSpacing({ padding: 8, margin: "8" });
+    expect(styles).toHaveProperty("padding", "2rem");
+    expect(styles).toHaveProperty("margin", "2rem");
   });
 
-  it('should set paddingLeft, paddingRight, paddingTop, paddingBottom, marginLeft, marginRight, marginTop, marginBottom css values when all provided', async () => {
+  it("should set paddingLeft, paddingRight, paddingTop, paddingBottom, marginLeft, marginRight, marginTop, marginBottom css values when all provided", async () => {
     const styles = useSpacing({
-      paddingLeft: '1',
+      paddingLeft: "1",
       paddingRight: 1,
-      paddingTop: '2',
+      paddingTop: "2",
       paddingBottom: 0.5,
       marginLeft: 3,
       marginRight: 4,
       marginTop: 5,
-      marginBottom: 6,
+      marginBottom: 6
     });
-    expect(styles).toHaveProperty('paddingLeft', '0.25rem');
-    expect(styles).toHaveProperty('paddingRight', '0.25rem');
-    expect(styles).toHaveProperty('paddingTop', '0.5rem');
-    expect(styles).toHaveProperty('paddingBottom', '0.125rem');
-    expect(styles).toHaveProperty('marginLeft', '0.75rem');
-    expect(styles).toHaveProperty('marginRight', '1rem');
-    expect(styles).toHaveProperty('marginTop', '1.25rem');
-    expect(styles).toHaveProperty('marginBottom', '1.5rem');
+    expect(styles).toHaveProperty("paddingLeft", "0.25rem");
+    expect(styles).toHaveProperty("paddingRight", "0.25rem");
+    expect(styles).toHaveProperty("paddingTop", "0.5rem");
+    expect(styles).toHaveProperty("paddingBottom", "0.125rem");
+    expect(styles).toHaveProperty("marginLeft", "0.75rem");
+    expect(styles).toHaveProperty("marginRight", "1rem");
+    expect(styles).toHaveProperty("marginTop", "1.25rem");
+    expect(styles).toHaveProperty("marginBottom", "1.5rem");
     expect(styles?.padding).toBeUndefined();
     expect(styles?.margin).toBeUndefined();
   });
 });
 
-describe('useSpacing should add/repalce properties in passed style object', () => {
-  it('should add properties to style object', () => {
-    const styles = useSpacing({ padding: 8, margin: '8' }, { backgroundColor: 'red' });
-    expect(styles).toStrictEqual({ padding: '2rem', margin: '2rem', backgroundColor: 'red' });
+describe("useSpacing should add/repalce properties in passed style object", () => {
+  it("should add properties to style object", () => {
+    const styles = useSpacing({ padding: 8, margin: "8" }, { backgroundColor: "red" });
+    expect(styles).toStrictEqual({ padding: "2rem", margin: "2rem", backgroundColor: "red" });
   });
 
-  it('should add and replace properties to style object', () => {
+  it("should add and replace properties to style object", () => {
     const styles = useSpacing(
-      { padding: 8, margin: '8' },
-      { padding: '2px', paddingTop: 2, backgroundColor: 'red' }
+      { padding: 8, margin: "8" },
+      { padding: "2px", paddingTop: 2, backgroundColor: "red" }
     );
     expect(styles).toStrictEqual({
-      padding: '2rem',
-      margin: '2rem',
+      padding: "2rem",
+      margin: "2rem",
       paddingTop: 2,
-      backgroundColor: 'red',
+      backgroundColor: "red"
     });
   });
 });

package/src/hooks/useSpacing.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties } from "react";
 
 export type SpacingMultiplier = 0 | 0.5 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 type SpacingMultiplierStringOrNumber = `${SpacingMultiplier}` | SpacingMultiplier;
@@ -22,7 +22,7 @@ export interface Spacing {
 }
 
 const defaultFactor = 0.25;
-const defaultUnit = 'rem';
+const defaultUnit = "rem";
 const spacingNumberRegex = /(\d+\.?\d*)+/g;
 
 export const useSpacing = (
@@ -34,7 +34,7 @@ export const useSpacing = (
       const matches = String(multiplier).matchAll(spacingNumberRegex);
       const cssSpacingValue = Array.from(matches)
         .map(([multiplierValue]) => `${Number(multiplierValue) * defaultFactor}${defaultUnit}`)
-        .join(' ');
+        .join(" ");
       return { ...prev, [spacing]: cssSpacingValue };
     }, style ?? {});
   }