@onewelcome/react-lib-components 0.1.0-alpha

package/src/hooks/usePosition.ts

@@ -0,0 +1,347 @@
+import React, { useState } from 'react';
+
+export interface ConfigObject {
+  relativeElement: RefElement;
+  elementToBePositioned: RefElement;
+  transformOrigin?: Placement;
+  placement?: Placement;
+  offset?: Offset;
+}
+
+export type HorizontalPlacment = 'left' | 'center' | 'centerh' | 'right';
+export type VerticalPlacement = 'top' | 'center' | 'centerv' | 'bottom';
+
+type Axis = 'vertical' | 'horizontal';
+type RefElement = React.RefObject<HTMLOrSVGElement> | undefined;
+
+interface DomRectObject {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+  center: number;
+  centerh: number;
+  centerv: number;
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+}
+
+export interface Placement {
+  horizontal: HorizontalPlacment;
+  vertical: VerticalPlacement;
+}
+
+export interface Offset {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export interface Position {
+  top: PositionType;
+  right: PositionType;
+  bottom: PositionType;
+  left: PositionType;
+}
+
+interface Dimensions {
+  height: number;
+  width: number;
+}
+
+type PositionType = number | 'initial';
+
+const defaultConfigObject: ConfigObject = {
+  relativeElement: undefined,
+  elementToBePositioned: undefined,
+  transformOrigin: {
+    horizontal: 'left',
+    vertical: 'top',
+  },
+  placement: {
+    horizontal: 'left',
+    vertical: 'top',
+  },
+  offset: {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+};
+
+export const usePosition = (providedConfigObject: ConfigObject = defaultConfigObject) => {
+  const configObject = { ...defaultConfigObject, ...providedConfigObject };
+
+  if (configObject.transformOrigin === undefined) {
+    configObject.transformOrigin = defaultConfigObject.transformOrigin;
+  }
+
+  if (configObject.placement === undefined) {
+    configObject.placement = defaultConfigObject.placement;
+  }
+
+  if (configObject.offset === undefined) {
+    configObject.offset = defaultConfigObject.offset;
+  }
+
+  const [position, setPosition] = useState<Position>({
+    left: 0,
+    top: 0,
+    right: 'initial',
+    bottom: 'initial',
+  });
+
+  const _fixPossibleViewportOverflow = (
+    value: number,
+    transformOrigin: Placement,
+    requestedReturnValue: Axis,
+    elDimensions: Dimensions
+  ) => {
+    let returnValue = value;
+
+    if (
+      (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' &&
+        returnValue > window.innerWidth - elDimensions.width) ||
+      (transformOrigin[requestedReturnValue] === 'center' &&
+        requestedReturnValue === 'horizontal' &&
+        returnValue > window.innerWidth - elDimensions.width)
+    ) {
+      returnValue = window.innerWidth - elDimensions.width;
+    }
+
+    if (
+      (transformOrigin[requestedReturnValue] === 'top' &&
+        returnValue > window.innerHeight - elDimensions.height) ||
+      (transformOrigin[requestedReturnValue] === 'center' &&
+        requestedReturnValue === 'vertical' &&
+        returnValue > window.innerHeight - elDimensions.height)
+    ) {
+      returnValue = window.innerHeight - elDimensions.height;
+    }
+
+    if (
+      transformOrigin[requestedReturnValue] === 'right' &&
+      returnValue > window.innerWidth - elDimensions.width
+    ) {
+      returnValue = window.innerWidth - elDimensions.width;
+    }
+
+    if (
+      transformOrigin[requestedReturnValue] === 'bottom' &&
+      returnValue > window.innerHeight - elDimensions.height
+    ) {
+      returnValue = window.innerHeight - elDimensions.height;
+    }
+
+    return returnValue;
+  };
+
+  const _applyOffsetToPlacementValue = (
+    value: number,
+    requestedReturnValue: Axis,
+    transformOrigin: Placement
+  ) => {
+    let returnValue = value;
+    if (
+      (requestedReturnValue === 'horizontal' && configObject.offset?.left !== 0) ||
+      (requestedReturnValue === 'horizontal' && configObject.offset?.right !== 0)
+    ) {
+      if (
+        transformOrigin[requestedReturnValue] === 'left' ||
+        transformOrigin[requestedReturnValue] === 'center'
+      ) {
+        returnValue += configObject.offset?.left!;
+        returnValue -= configObject.offset?.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)
+    ) {
+      if (
+        transformOrigin[requestedReturnValue] === 'top' ||
+        transformOrigin[requestedReturnValue] === 'center'
+      ) {
+        returnValue += configObject.offset?.top!;
+        returnValue -= configObject.offset?.bottom!;
+      }
+
+      if (transformOrigin[requestedReturnValue] === 'bottom') {
+        returnValue -= configObject.offset?.top!;
+        returnValue += configObject.offset?.bottom!;
+      }
+    }
+
+    return returnValue;
+  };
+
+  const _calculateInitialPlacementValue = (
+    transformOrigin: Placement,
+    requestedReturnValue: Axis,
+    relEl: DomRectObject,
+    placementOriginDefinition: HorizontalPlacment | VerticalPlacement,
+    elDimensions: Dimensions
+  ) => {
+    let value = 0;
+
+    if (
+      transformOrigin[requestedReturnValue] === 'left' ||
+      transformOrigin[requestedReturnValue] === 'top'
+    ) {
+      value = relEl[placementOriginDefinition];
+    } else if (transformOrigin[requestedReturnValue] === 'center') {
+      value =
+        relEl[placementOriginDefinition] -
+        elDimensions[requestedReturnValue === 'horizontal' ? 'width' : 'height'] / 2;
+    } else if (
+      transformOrigin[requestedReturnValue] === 'right' ||
+      transformOrigin[requestedReturnValue] === 'bottom'
+    ) {
+      value =
+        window[requestedReturnValue === 'horizontal' ? 'innerWidth' : 'innerHeight'] -
+        relEl[placementOriginDefinition];
+    }
+
+    return value;
+  };
+
+  /**
+   *
+   * @param requestedReturnValue whether the requested return value is for the horizontal or vertical axis
+   * @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';
+    }
+    throw new Error(
+      `the requested return value isn\'t "vertical" or "horizontal" ${requestedReturnValue} was given.`
+    );
+  };
+
+  const _calculatePlacementValue = (
+    transformOrigin: Placement,
+    placement: HorizontalPlacment | VerticalPlacement,
+    requestedReturnValue: Axis,
+    relEl: DomRectObject,
+    elDimensions: Dimensions
+  ): number => {
+    const placementOriginDefinition =
+      placement === 'center' ? _determineCenteredPlacementOrigin(requestedReturnValue) : placement;
+
+    const value = _calculateInitialPlacementValue(
+      transformOrigin,
+      requestedReturnValue,
+      relEl,
+      placementOriginDefinition,
+      elDimensions
+    );
+
+    const valueWithOffset = _applyOffsetToPlacementValue(
+      value,
+      requestedReturnValue,
+      transformOrigin
+    );
+
+    const valueCorrectionForViewportOverflow = _fixPossibleViewportOverflow(
+      valueWithOffset,
+      transformOrigin,
+      requestedReturnValue,
+      elDimensions
+    );
+
+    return valueCorrectionForViewportOverflow;
+  };
+
+  const _calculatePlacement = (relEl: DomRectObject, elDimensions: Dimensions, axis: Axis) => {
+    const placementValue = _calculatePlacementValue(
+      configObject.transformOrigin!,
+      configObject.placement![axis]!,
+      axis,
+      relEl,
+      elDimensions
+    );
+
+    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 === 'vertical' && configObject.transformOrigin?.vertical === 'bottom') {
+      direction = 'bottom';
+      oppositeDirection = 'top';
+    } else if (axis === 'vertical') {
+      direction = 'top';
+      oppositeDirection = 'bottom';
+    }
+
+    setPosition((prevState) => ({
+      ...prevState,
+      [direction]: placementValue,
+      [oppositeDirection]: 'initial',
+    }));
+  };
+
+  const calculatePosition = () => {
+    if (!configObject.relativeElement?.current) return;
+    const relativeElRect = (configObject.relativeElement!
+      .current as HTMLElement)!.getBoundingClientRect();
+    const elementToBePositionedDimensions: Dimensions = {
+      height: (configObject.elementToBePositioned!.current as HTMLElement).offsetHeight,
+      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. */
+    const clonedRelEl = {
+      top: relativeElRect.top,
+      right: relativeElRect.right,
+      bottom: relativeElRect.bottom,
+      center: 0,
+      centerv: relativeElRect.top + relativeElRect.height / 2,
+      centerh: relativeElRect.left + relativeElRect.width / 2,
+      left: relativeElRect.left,
+      width: relativeElRect.width,
+      height: relativeElRect.height,
+      x: relativeElRect.x,
+      y: relativeElRect.y,
+    };
+
+    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, 'horizontal');
+    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, 'vertical');
+  };
+
+  return {
+    top: position.top,
+    bottom: position.bottom,
+    left: position.left,
+    right: position.right,
+    calculatePosition,
+  };
+};

package/src/hooks/useScroll.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { useScroll } from './useScroll';
+
+describe('function should be executed', () => {
+  it('should execute', () => {
+    const scrollHandler = jest.fn();
+
+    const Component = () => {
+      useScroll(scrollHandler);
+      return <div>Test</div>;
+    };
+
+    render(<Component />);
+
+    expect(scrollHandler).not.toBeCalled();
+    fireEvent.scroll(window, { target: { scrollY: 100 } });
+    expect(scrollHandler).toBeCalledTimes(1);
+  });
+});

package/src/hooks/useScroll.ts

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

package/src/hooks/useSpacing.test.ts

@@ -0,0 +1,70 @@
+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');
+  });
+
+  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 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 () => {
+    const styles = useSpacing({
+      paddingLeft: '1',
+      paddingRight: 1,
+      paddingTop: '2',
+      paddingBottom: 0.5,
+      marginLeft: 3,
+      marginRight: 4,
+      marginTop: 5,
+      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?.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' });
+  });
+
+  it('should add and replace properties to style object', () => {
+    const styles = useSpacing(
+      { padding: 8, margin: '8' },
+      { padding: '2px', paddingTop: 2, backgroundColor: 'red' }
+    );
+    expect(styles).toStrictEqual({
+      padding: '2rem',
+      margin: '2rem',
+      paddingTop: 2,
+      backgroundColor: 'red',
+    });
+  });
+});

package/src/hooks/useSpacing.ts

@@ -0,0 +1,42 @@
+import { CSSProperties } from 'react';
+
+type SpacingMultiplier = 0 | 0.5 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+type SpacingMultiplierStringOrNumber = `${SpacingMultiplier}` | SpacingMultiplier;
+type MultiValueSpacingMultiplier =
+  | `${SpacingMultiplier} ${SpacingMultiplier} ${SpacingMultiplier} ${SpacingMultiplier}`
+  | `${SpacingMultiplier} ${SpacingMultiplier} ${SpacingMultiplier}`
+  | `${SpacingMultiplier} ${SpacingMultiplier}`
+  | SpacingMultiplierStringOrNumber;
+
+export interface Spacing {
+  padding?: MultiValueSpacingMultiplier;
+  paddingTop?: SpacingMultiplierStringOrNumber;
+  paddingBottom?: SpacingMultiplierStringOrNumber;
+  paddingLeft?: SpacingMultiplierStringOrNumber;
+  paddingRight?: SpacingMultiplierStringOrNumber;
+  margin?: MultiValueSpacingMultiplier;
+  marginTop?: SpacingMultiplierStringOrNumber;
+  marginBottom?: SpacingMultiplierStringOrNumber;
+  marginLeft?: SpacingMultiplierStringOrNumber;
+  marginRight?: SpacingMultiplierStringOrNumber;
+}
+
+const defaultFactor = 0.25;
+const defaultUnit = 'rem';
+const spacingNumberRegex = /(\d+\.?\d*)+/g;
+
+export const useSpacing = (
+  spacingProps?: Spacing,
+  style?: CSSProperties
+): CSSProperties | undefined => {
+  if (spacingProps) {
+    return Object.entries(spacingProps).reduce<CSSProperties>((prev, [spacing, multiplier]) => {
+      const matches = String(multiplier).matchAll(spacingNumberRegex);
+      const cssSpacingValue = Array.from(matches)
+        .map(([multiplierValue]) => `${Number(multiplierValue) * defaultFactor}${defaultUnit}`)
+        .join(' ');
+      return { ...prev, [spacing]: cssSpacingValue };
+    }, style ?? {});
+  }
+  return style;
+};

package/src/hooks/useWrapper.test.ts

@@ -0,0 +1,49 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useWrapper } from './useWrapper';
+
+describe('it should give the correct results based on no value, no placeholder and default text input', () => {
+  it('should execute correctly', () => {
+    const { result } = renderHook(() => useWrapper('', undefined, 'text'));
+
+    expect(result.current.helperId).toHaveLength(20);
+    expect(result.current.errorId).toHaveLength(20);
+    expect(result.current.labelId).toHaveLength(20);
+    expect(result.current.floatingLabelActive).toBe(false);
+
+    act(() => {
+      result.current.setFloatingLabelActive(true);
+    });
+
+    expect(result.current.floatingLabelActive).toBe(true);
+
+    act(() => {
+      result.current.setFloatingLabelActive(false);
+    });
+
+    expect(result.current.floatingLabelActive).toBe(false);
+
+    act(() => {
+      result.current.setHasFocus(true);
+    });
+
+    expect(result.current.floatingLabelActive).toBe(true);
+  });
+});
+
+describe('it should have floating label active because of the value', () => {
+  it('should have active floating label state', () => {
+    const { result } = renderHook(() => useWrapper('value', undefined, 'text'));
+
+    expect(result.current.floatingLabelActive).toBe(true);
+  });
+  it('should have floating label active because input type is datetime-local', () => {
+    const { result } = renderHook(() => useWrapper('', undefined, 'datetime-local'));
+
+    expect(result.current.floatingLabelActive).toBe(true);
+  });
+  it('should have floating label active because of placeholder', () => {
+    const { result } = renderHook(() => useWrapper('', 'placeholder', 'text'));
+
+    expect(result.current.floatingLabelActive).toBe(true);
+  });
+});

package/src/hooks/useWrapper.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { generateID } from '../util/helper';
+import { Type as InputTypes } from '../Form/Input/Input';
+
+export const useWrapper = (value?: string, placeholder?: string, type?: InputTypes) => {
+  const [helperId] = useState(generateID(20));
+  const [errorId] = useState(generateID(20));
+  const [labelId] = useState(generateID(20));
+  const [floatingLabelActive, setFloatingLabelActive] = useState(false);
+  const [hasFocus, setHasFocus] = useState(false);
+
+  useEffect(() => {
+    if (value?.length || placeholder || type === 'datetime-local' || type === 'time') {
+      setFloatingLabelActive(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (value?.length || hasFocus) {
+      setFloatingLabelActive(true);
+    } else if (!placeholder && !hasFocus && type !== 'datetime-local' && type !== 'time') {
+      setFloatingLabelActive(false);
+    }
+  }, [value, placeholder, type, hasFocus]);
+
+  return {
+    helperId,
+    errorId,
+    labelId,
+    floatingLabelActive,
+    setFloatingLabelActive,
+    hasFocus,
+    setHasFocus,
+  };
+};

package/src/index.ts

@@ -0,0 +1,52 @@
+/** Components */
+export { BaseStyling } from './_BaseStyling_/BaseStyling';
+export { Typography } from './Typography/Typography';
+export { Button } from './Button/Button';
+export { Link } from './Link/Link';
+export { IconButton } from './Button/IconButton';
+
+export { Icon, Icons } from './Icon/Icon';
+
+export { Dialog } from './Dialog/Dialog';
+export { Modal } from './Modal/Modal';
+export { ModalActions } from './Modal/ModalActions/ModalActions';
+export { ModalContent } from './Modal/ModalContent/ModalContent';
+export { ModalHeader } from './Modal/ModalHeader/ModalHeader';
+export { Tooltip } from './Tooltip/Tooltip';
+export { Tiles } from './Tiles/Tiles';
+export { Tile } from './Tiles/Tile';
+export { ContextMenu } from './ContextMenu/ContextMenu';
+export { ContextMenuItem } from './ContextMenu/ContextMenuItem';
+export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
+
+export { SnackbarProvider } from './Snackbar/SnackbarProvider/SnackbarProvider';
+export { useSnackbar } from './Snackbar/useSnackbar';
+
+/** Form components */
+export { Form } from './Form/Form';
+export { Fieldset } from './Form/Fieldset/Fieldset';
+export { FormControl } from './Form/FormControl/FormControl';
+export { FormGroup } from './Form/FormGroup/FormGroup';
+export { FormHelperText } from './Form/FormHelperText/FormHelperText';
+export { Label } from './Form/Label/Label';
+export { Select } from './Form/Select/Select';
+export { Option } from './Form/Select/Option';
+export { Textarea } from './Form/Textarea/Textarea';
+export { CheckboxWrapper } from './Form/Wrapper/CheckboxWrapper/CheckboxWrapper';
+export { InputWrapper } from './Form/Wrapper/InputWrapper/InputWrapper';
+export { RadioWrapper } from './Form/Wrapper/RadioWrapper/RadioWrapper';
+export { SelectWrapper } from './Form/Wrapper/SelectWrapper/SelectWrapper';
+export { TextareaWrapper } from './Form/Wrapper/TextareaWrapper/TextareaWrapper';
+export { Input } from './Form/Input/Input';
+export { Radio } from './Form/Radio/Radio';
+export { Checkbox } from './Form/Checkbox/Checkbox';
+
+/** Wizard */
+export {
+  BaseWizardSteps,
+  Props as BaseWizardStepsProps,
+  Step as WizardStep,
+} from './Wizard/BaseWizardSteps/BaseWizardSteps';
+export { WizardActions } from './Wizard/WizardActions/WizardActions';
+export { WizardSteps } from './Wizard/WizardSteps/WizardSteps';
+export { Wizard, Props as WizardProps } from './Wizard/Wizard';

package/src/interfaces.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+/**
+ * By default typescript does not allow data-* attributes on HTMLAttributes interface. We extend the default React.HTMLAttributes interface here and add the dataAttribute possibility into it.
+ * An example of this can be found in Checkbox.tsx. We assign wrapperProps to the HTMLAttributes interface below, and are now able to add a test-id inside of Checkbox.test.tsx on line 77.
+ */
+type DataAttributeKey = `data-${string}`;
+
+export interface HTMLProps<T> extends React.HTMLProps<T> {
+  [dataAttribute: DataAttributeKey]: any;
+}
+
+export interface HTMLAttributes<T> extends React.HTMLAttributes<T> {
+  [dataAttribute: DataAttributeKey]: any;
+}