@onewelcome/react-lib-components 0.1.0-alpha

package/src/Wizard/wizardStateReducer.ts

@@ -0,0 +1,51 @@
+import { Reducer } from 'react';
+import { Step } from './BaseWizardSteps/BaseWizardSteps';
+import { WizardMode } from './Wizard';
+
+type WizardStateType = {
+  steps: Step[];
+  currentStepNo: number;
+  mode: WizardMode;
+  stepScreenReaderLabel: string;
+};
+
+interface SetWizardStateAction {
+  type: 'SET_STATE';
+  payload: {
+    steps: Step[];
+    mode: WizardMode;
+    stepScreenReaderLabel: string;
+  };
+}
+
+interface ChangeCurrentStepNoAction {
+  type: 'CHANGE_CURRENT_STEP_NO';
+  payload: number;
+}
+
+const setWizardState = (
+  steps: Step[],
+  mode: WizardMode,
+  stepScreenReaderLabel: string
+): SetWizardStateAction => {
+  return { type: 'SET_STATE', payload: { steps, mode, stepScreenReaderLabel } };
+};
+
+const changeCurrentStepNo = (currentStepNo: number): ChangeCurrentStepNoAction => {
+  return { type: 'CHANGE_CURRENT_STEP_NO', payload: currentStepNo };
+};
+
+type WizardActions = SetWizardStateAction | ChangeCurrentStepNoAction;
+
+const reducer: Reducer<WizardStateType, WizardActions> = (state, action) => {
+  switch (action.type) {
+    case 'SET_STATE':
+      return { ...state, ...action.payload };
+    case 'CHANGE_CURRENT_STEP_NO':
+      return { ...state, currentStepNo: action.payload };
+    default:
+      return state;
+  }
+};
+
+export { setWizardState, changeCurrentStepNo, reducer, WizardActions, WizardStateType };

package/src/_BaseStyling_/BaseStyling.test.tsx

@@ -0,0 +1,39 @@
+import React, { Fragment } from 'react';
+import { BaseStyling } from './BaseStyling';
+import { Button } from '../Button/Button';
+import { render } from '@testing-library/react';
+
+describe('BaseStyling should render', () => {
+  it('renders without crashing', async () => {
+    const { container, findByTestId } = render(
+      <Fragment>
+        <BaseStyling>
+          <Button data-testid="button">Test</Button>
+        </BaseStyling>
+      </Fragment>
+    );
+
+    const button = await findByTestId('button');
+    expect(button).toHaveStyle({ backgroundColor: 'rgb(158, 0, 107);' });
+    expect(container.querySelector('#child')).toBeDefined();
+  });
+});
+
+describe('Should override default color', () => {
+  it('overrides primary color', async () => {
+    const { findByTestId } = render(
+      <Fragment>
+        <BaseStyling
+          properties={{
+            colorPrimary: 'rgb(255, 255, 255);',
+          }}
+        >
+          <Button data-testid="button">Test</Button>
+        </BaseStyling>
+      </Fragment>
+    );
+
+    const button = await findByTestId('button');
+    expect(button).toHaveStyle({ backgroundColor: 'rgb(255, 255, 255);' });
+  });
+});

package/src/_BaseStyling_/BaseStyling.tsx

@@ -0,0 +1,115 @@
+import React, { Fragment, HTMLAttributes, ReactChild, useEffect, useState } from 'react';
+
+interface CSSProperties {
+  colorPrimary?: string;
+  colorSecondary?: string;
+  colorTertiary?: string;
+  defaultLineHeight?: string;
+  buttonBorderRadius?: string;
+  buttonBorderWidth?: string;
+  buttonFontSize?: string;
+  buttonBorderStyle?: string;
+  buttonFillTextColor?: string;
+  buttonFillBackgroundColor?: string;
+  buttonOutlineHoverTextColor?: string;
+  inputBorderColor?: string;
+  inputBorderRadius?: string;
+  inputBorderWidth?: string;
+  inputBorderStyle?: string;
+  modalShadowColor?: string;
+  modalBackgroundColor?: string;
+  modalHeaderBackgroundColor?: string;
+  snackbarTextColor?: string;
+  snackbarInfoBackgroundColor?: string;
+  snackbarSuccessBackgroundColor?: string;
+  snackbarErrorBackgroundColor?: string;
+  snackbarBorderRadius?: string;
+  default?: string;
+  success?: string;
+  error?: string;
+  disabled?: string;
+  greyedOut?: string;
+  warning?: string;
+  fontFamily?: string;
+  fontFamilyCode?: string;
+  fontSize?: string;
+  fontSizeH1?: string;
+  fontSizeH2?: string;
+  fontSizeH3?: string;
+  fontSizeH4?: string;
+  fontSizeSub?: string;
+  fontSizeCode?: string;
+}
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactChild;
+  properties?: CSSProperties;
+}
+
+export const BaseStyling = ({ children, properties = {} }: Props) => {
+  const defaultProperties: CSSProperties = {
+    colorPrimary: '#9e006b',
+    colorSecondary: '#003b5e',
+    colorTertiary: '#ff1e4e',
+    defaultLineHeight: '26px',
+    buttonBorderRadius: '20px',
+    buttonBorderWidth: '2px',
+    buttonFontSize: '1rem',
+    buttonBorderStyle: 'solid',
+    buttonFillTextColor: '#FFF',
+    buttonFillBackgroundColor: '#FFF',
+    buttonOutlineHoverTextColor: '#FFF',
+    inputBorderColor: '#e9e9eb',
+    inputBorderRadius: '8px',
+    inputBorderWidth: '1px',
+    inputBorderStyle: 'solid',
+    modalShadowColor: 'rgba(0, 0, 0, 0.16)',
+    modalBackgroundColor: '#F5F8F8',
+    modalHeaderBackgroundColor: '#FFF',
+    snackbarTextColor: '#fff',
+    snackbarInfoBackgroundColor: '#003b5e',
+    snackbarSuccessBackgroundColor: '#008a28',
+    snackbarErrorBackgroundColor: '#e22a1d',
+    snackbarBorderRadius: '8px',
+    default: '#0f0f1e',
+    success: '#008a28',
+    error: '#e22a1d',
+    disabled: '#e9e9eb',
+    greyedOut: '#6f6f76',
+    warning: '#ff6105',
+    fontFamily: "'Red Hat Display', sans-serif",
+    fontFamilyCode: "'Red Hat Mono', sans-serif",
+    fontSize: '1rem',
+    fontSizeH1: '2.5rem',
+    fontSizeH2: '1.625rem',
+    fontSizeH3: '1.5rem',
+    fontSizeH4: '1.25rem',
+    fontSizeSub: '.75rem',
+    fontSizeCode: '1rem',
+  };
+
+  /** 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.replaceAll(/([A-Z])/g, (val) => `-${val.toLowerCase()}`);
+      document.documentElement.style.setProperty(`--${formattedPropertyName}`, value);
+    }
+  };
+
+  /** 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 };
+      setCSSProperties(mergedState);
+    } else {
+      setCSSProperties(defaultProperties);
+    }
+    setIsLoading(false);
+  }, [properties]);
+
+  /** Only render if we're not loading */
+  return !isLoading ? <Fragment>{children}</Fragment> : null;
+};

package/src/hooks/useAnimation.test.tsx

@@ -0,0 +1,45 @@
+import React, { Fragment } from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useAnimation } from './useAnimation';
+
+describe('useAnimation', () => {
+  it('should execute', () => {
+    const callback = jest.fn();
+
+    const Component = () => {
+      const { ref, animationStarted, startAnimation } = useAnimation<HTMLDivElement>(callback);
+
+      return (
+        <Fragment>
+          <button data-testid="button" onClick={() => startAnimation()}>
+            start animation
+          </button>
+          <div
+            data-testid="animated-div"
+            ref={ref}
+            className={animationStarted ? 'animation-started' : ''}
+          >
+            animated div
+          </div>
+        </Fragment>
+      );
+    };
+
+    const { getByTestId } = render(<Component />);
+
+    const animatedDiv = getByTestId('animated-div');
+    const startButton = getByTestId('button');
+
+    expect(animatedDiv).not.toHaveClass('animation-started');
+    expect(callback).not.toBeCalled();
+
+    userEvent.click(startButton);
+    expect(animatedDiv).toHaveClass('animation-started');
+    expect(callback).not.toBeCalled();
+
+    fireEvent.animationEnd(animatedDiv);
+    expect(animatedDiv).toHaveClass('animation-started');
+    expect(callback).toBeCalled();
+  });
+});

package/src/hooks/useAnimation.ts

@@ -0,0 +1,20 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useAnimation = <RefElement extends HTMLElement>(callback: () => void) => {
+  const animatedObjectRef = useRef<RefElement>(null);
+  /** We need to store flag that says us when to call the callback */
+  const [animationStarted, setAnimationStarted] = useState(false);
+
+  const onAnimationEnd = () => animationStarted && callback();
+
+  useEffect(() => {
+    animatedObjectRef.current?.addEventListener('animationend', onAnimationEnd);
+    return () => animatedObjectRef.current?.removeEventListener('animationend', onAnimationEnd);
+  }, [animationStarted]);
+
+  return {
+    ref: animatedObjectRef,
+    animationStarted,
+    startAnimation: () => setAnimationStarted(true),
+  };
+};

package/src/hooks/useBodyClick.test.tsx

@@ -0,0 +1,39 @@
+import React, { Fragment, useState } from 'react';
+import { useBodyClick } from './useBodyClick';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('function should be executed', () => {
+  it('should execute', () => {
+    const clickHandler = jest.fn();
+    const validateFunction = jest.fn(() => true);
+
+    const Component = () => {
+      const [variable, setVariable] = useState(true);
+      const [variable2, setvariable2] = useState(true);
+      useBodyClick(validateFunction, clickHandler, [variable, variable2]);
+
+      return (
+        <Fragment>
+          <button data-testid="button1" onClick={() => setVariable(!variable)}>
+            Test
+          </button>
+          <button data-testid="button2" onClick={() => setvariable2(!variable2)}>
+            Test
+          </button>
+        </Fragment>
+      );
+    };
+
+    const { getByTestId } = render(<Component></Component>);
+
+    const button1 = getByTestId('button1');
+    const button2 = getByTestId('button2');
+
+    userEvent.click(button1);
+    userEvent.click(button2);
+
+    expect(clickHandler).toHaveBeenCalledTimes(2);
+    expect(validateFunction).toHaveBeenCalledTimes(2);
+  });
+});

package/src/hooks/useBodyClick.ts

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+
+export const useBodyClick = (
+  checkFunction: (event: MouseEvent) => boolean,
+  callbackFunction: (...args: unknown[]) => unknown,
+  dependingStateVariable: React.ComponentState | React.ComponentState[]
+) => {
+  function bodyClickListener(event: MouseEvent) {
+    if (checkFunction(event)) {
+      callbackFunction();
+    }
+  }
+  useEffect(() => {
+    window.addEventListener('click', bodyClickListener);
+
+    return () => {
+      window.removeEventListener('click', bodyClickListener);
+    };
+  }, [dependingStateVariable]);
+};

package/src/hooks/useFormSelector.test.ts

@@ -0,0 +1,40 @@
+import { useFormSelector } from './useFormSelector';
+import { renderHook } from '@testing-library/react-hooks';
+
+describe('we should get the correct return values and describedBy is the same as identifier', () => {
+  it('should return correct values', () => {
+    const { result } = renderHook(() =>
+      useFormSelector({
+        name: 'test',
+        errorMessage: 'errormessage',
+        error: false,
+        parentErrorId: 'parenterrorid',
+        helperText: 'helpertext',
+        parentHelperId: 'parenthelperid',
+      })
+    );
+
+    expect(result.current.describedBy).toHaveLength(15);
+    expect(result.current.errorId).toHaveLength(15);
+    expect(result.current.identifier).toHaveLength(15);
+
+    expect(result.current.describedBy).toBe(result.current.identifier);
+  });
+});
+
+describe('describedBy should be the parenterrorid', () => {
+  it('should be linked correctly', () => {
+    const { result } = renderHook(() =>
+      useFormSelector({
+        name: 'test',
+        errorMessage: 'errormessage',
+        error: true,
+        parentErrorId: 'parenterrorid',
+        helperText: 'helpertext',
+        parentHelperId: 'parenthelperid',
+      })
+    );
+
+    expect(result.current.describedBy).toBe('parenterrorid');
+  });
+});

package/src/hooks/useFormSelector.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import { generateID } from '../util/helper';
+
+export interface ConfigObject {
+  name: string | undefined;
+  errorMessage?: string;
+  error?: boolean;
+  parentErrorId?: string;
+  helperText?: string;
+  parentHelperId?: string;
+}
+
+export const useFormSelector = (configObject: ConfigObject) => {
+  const [identifier] = useState(generateID(15, configObject.name));
+  const [describedBy, setDescribedBy] = useState('');
+  const [errorId] = useState(generateID(15, configObject.errorMessage));
+
+  useEffect(() => {
+    if (configObject.error && configObject.parentErrorId) {
+      setDescribedBy(configObject.parentErrorId);
+    }
+
+    if (
+      (!configObject.error && configObject.helperText) ||
+      (!configObject.parentErrorId && !configObject.errorMessage && configObject.helperText)
+    ) {
+      setDescribedBy(`${identifier}`);
+    }
+
+    if (
+      (!configObject.error && !configObject.helperText && configObject.parentHelperId) ||
+      (!configObject.parentErrorId && !configObject.errorMessage && configObject.parentHelperId)
+    ) {
+      setDescribedBy(`${configObject.parentHelperId}`);
+    }
+
+    if (configObject.errorMessage && !configObject.parentErrorId && configObject.error) {
+      setDescribedBy(errorId);
+    }
+  }, [identifier, configObject.error, configObject.parentErrorId]);
+
+  return {
+    describedBy,
+    errorId,
+    identifier,
+  };
+};