@onewelcome/react-lib-components 0.1.0-alpha → 0.1.3-alpha

package/dist/util/helper.d.ts

@@ -1 +1,6 @@
-export declare const generateID: (length?: number, stringToWeaveIn?: string | undefined) => string;
+declare type KeyValuePair = {
+    [key: string]: unknown;
+};
+export declare const generateID: (length?: number, stringToWeaveIn?: string) => string;
+export declare const filterProps: (props: any, regexPattern: RegExp, returnFiltered?: boolean) => KeyValuePair;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "0.1.0-alpha",
+  "version": "0.1.3-alpha",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",
@@ -17,13 +17,15 @@
     "analyze": "size-limit --why",
     "build": "dts build",
     "build-storybook": "build-storybook",
+    "dev": "npm-run-all -p start test:watch storybook",
     "lint": "dts lint",
     "prepare": "husky install && dts build",
     "size": "size-limit",
     "start": "dts watch",
     "prettier": "prettier --write --ignore-path .gitignore \"**/*.+(ts|tsx|scss|mdx)\"",
     "storybook": "start-storybook -p 6006",
-    "test": "dts test --passWithNoTests"
+    "test": "dts test --passWithNoTests",
+    "test:watch": "dts test --passWithNoTests --watch"
   },
   "jest": {
     "testEnvironment": "jsdom"
@@ -45,44 +47,48 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.8",
+    "@babel/core": "^7.18.0",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^6.4.18",
-    "@storybook/addon-docs": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.18",
-    "@storybook/addon-links": "^6.4.18",
-    "@storybook/addons": "^6.4.17",
-    "@storybook/builder-webpack5": "^6.4.17",
-    "@storybook/manager-webpack5": "^6.4.18",
+    "@storybook/addon-a11y": "^6.5.3",
+    "@storybook/addon-docs": "^6.5.3",
+    "@storybook/addon-essentials": "^6.5.3",
+    "@storybook/addon-links": "^6.5.3",
+    "@storybook/addons": "^6.5.3",
+    "@storybook/builder-webpack5": "^6.5.3",
+    "@storybook/manager-webpack5": "^6.5.3",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.4.13",
-    "@testing-library/dom": "^8.12.0",
-    "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^12.1.4",
+    "@storybook/react": "^6.5.3",
+    "@storybook/theming": "^6.5.6",
+    "@testing-library/dom": "^8.13.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
     "@tsconfig/create-react-app": "^1.0.2",
     "@tsconfig/recommended": "^1.0.1",
-    "@types/mdx": "^2.0.1",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/color-convert": "^2.0.0",
+    "@types/mdx": "^2.0.2",
+    "@types/react": "^17.0.45",
+    "@types/react-dom": "^17.0.17",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
-    "babel-loader": "^8.2.4",
-    "dts-cli": "^1.4.0",
+    "babel-loader": "^8.2.5",
+    "dts-cli": "^1.5.1",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
-    "jest-junit": "^13.0.0",
-    "lint-staged": "^12.3.7",
+    "jest-junit": "^13.2.0",
+    "lint-staged": "^12.4.1",
+    "npm-run-all": "^4.1.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
     "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
     "rollup-plugin-styles": "^4.0.0",
-    "sass": "^1.49.10",
+    "sass": "^1.52.0",
     "size-limit": "^7.0.8",
-    "tslib": "^2.3.1",
-    "typescript": "^4.6.3"
+    "tslib": "^2.4.0",
+    "typescript": "^4.6.4"
   }
 }

package/src/Breadcrumbs/Breadcrumbs.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, HTMLProps, ReactElement } from 'react';
+import React, { ComponentPropsWithRef, Fragment, ReactElement } from 'react';
 import { Icon, Icons } from '../Icon/Icon';
 import { Link, Props as LinkProps } from '../Link/Link';
 import { Typography } from '../Typography/Typography';
@@ -6,43 +6,45 @@ import classes from './Breadcrumbs.module.scss';
 
 type ChildrenType = ReactElement<LinkProps, typeof Link>;
 
-export interface Props extends HTMLProps<HTMLElement> {
+export interface Props extends ComponentPropsWithRef<'div'> {
   children: ChildrenType | ChildrenType[];
   'aria-label': string;
 }
 
-export const Breadcrumbs = ({
-  children,
-  'aria-label': ariaLabel,
-  className = '',
-  ...rest
-}: Props) => {
-  const items = React.Children.map(children, (child, index) => {
-    const isLastElement = Array.isArray(children) ? index === children.length - 1 : true;
-    if (isLastElement) {
-      return (
-        <Typography
-          key={child.key}
-          variant="body"
-          tag="span"
-          className={classes['last']}
-          aria-current="page"
-        >
-          {child.props.children}
-        </Typography>
-      );
-    } else {
-      return (
-        <Fragment key={child.key}>
-          {React.cloneElement(child)}
-          <Icon icon={Icons.ChevronRight} className={classes['icon']} />
-        </Fragment>
-      );
-    }
-  });
-  return (
-    <nav {...rest} aria-label={ariaLabel} className={`${classes['breadcrumbs']} ${className}`}>
-      {items}
-    </nav>
-  );
-};
+export const Breadcrumbs = React.forwardRef<HTMLDivElement, Props>(
+  ({ children, 'aria-label': ariaLabel, className = '', ...rest }: Props, ref) => {
+    const items = React.Children.map(children, (child, index) => {
+      const isLastElement = Array.isArray(children) ? index === children.length - 1 : true;
+      if (isLastElement) {
+        return (
+          <Typography
+            key={child.key}
+            variant="body"
+            tag="span"
+            className={classes['last']}
+            aria-current="page"
+          >
+            {child.props.children}
+          </Typography>
+        );
+      } else {
+        return (
+          <Fragment key={child.key}>
+            {React.cloneElement(child)}
+            <Icon icon={Icons.ChevronRight} className={classes['icon']} />
+          </Fragment>
+        );
+      }
+    });
+    return (
+      <nav
+        {...rest}
+        ref={ref}
+        aria-label={ariaLabel}
+        className={`${classes['breadcrumbs']} ${className}`}
+      >
+        {items}
+      </nav>
+    );
+  }
+);

package/src/Button/BaseButton.test.tsx

@@ -1,31 +1,46 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { BaseButton, Props } from './BaseButton';
-import { render, getByRole } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-const createButton = (params?: Props, children = 'This is a button') => {
-  const queries = render(<BaseButton {...params}>{children}</BaseButton>);
-  const button = getByRole(queries.container, 'button');
+const defaultParams: Props = {};
+
+const createBaseButton = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <BaseButton {...parameters} data-testid="baseButton">
+      baseButton content
+    </BaseButton>
+  );
+  const baseButton = queries.getByTestId('baseButton');
 
   return {
     ...queries,
-    button,
+    baseButton,
   };
 };
 
 describe('BaseButton should render', () => {
-  it('renders without crashing', async () => {
-    const { findByText } = createButton();
-    findByText('This is a button');
+  it('renders without crashing', () => {
+    const { baseButton } = createBaseButton();
+
+    expect(baseButton).toBeDefined();
+    expect(baseButton).toHaveTextContent('baseButton content');
   });
 });
 
 describe('On click handler', () => {
   it('executes the onclick handler', async () => {
     const onClickHandler = jest.fn();
-    const { button } = createButton({ onClick: onClickHandler });
+    const { baseButton } = createBaseButton((defaultParams) => ({
+      ...defaultParams,
+      onClick: onClickHandler,
+    }));
 
-    userEvent.click(button);
+    userEvent.click(baseButton);
 
     expect(onClickHandler).toBeCalled();
   });
@@ -34,26 +49,57 @@ describe('On click handler', () => {
 describe('Properties of the button', () => {
   it('should be disabled, function should not have been called', () => {
     const onClickHandler = jest.fn();
-    const { button } = createButton({
+    const { baseButton } = createBaseButton((defaultParams) => ({
+      ...defaultParams,
       disabled: true,
       onClick: onClickHandler,
-    });
+    }));
 
-    userEvent.click(button);
+    userEvent.click(baseButton);
     expect(onClickHandler).toHaveBeenCalledTimes(0);
   });
 
   it('should have the class "TESTING"', () => {
-    const { button } = createButton({
+    const { baseButton } = createBaseButton((defaultParams) => ({
+      ...defaultParams,
       className: 'TESTING',
-    });
+    }));
 
-    expect(button.classList.contains('TESTING')).toBe(true);
+    expect(baseButton).toHaveClass('TESTING');
   });
 
   it('should have a "name" property with the value "button"', () => {
-    const { button } = createButton({ name: 'button' });
+    const { baseButton } = createBaseButton((defaultParams) => ({
+      ...defaultParams,
+      name: 'button',
+    }));
+
+    expect(baseButton).toHaveAttribute('name', 'button');
+  });
+});
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <BaseButton {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
 
-    expect(button.getAttribute('name')).toBe('button');
+    render(<ExampleComponent propagateRef={refCheck} />);
   });
 });

package/src/Button/BaseButton.tsx

@@ -1,10 +1,9 @@
-import React, { RefObject } from 'react';
+import React, { ComponentPropsWithRef } from 'react';
 import classes from './BaseButton.module.scss';
 
-export interface Props extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref'> {
+export interface Props extends ComponentPropsWithRef<'button'> {
   type?: 'submit' | 'button' | 'reset';
   disabled?: boolean;
-  ref?: RefObject<HTMLButtonElement>;
   color?: 'primary' | 'secondary' | 'tertiary' | 'default';
 }
 

package/src/Button/Button.test.tsx

@@ -1,11 +1,21 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { Button, Props } from './Button';
-import { render, getByRole } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { Icon, Icons } from '../Icon/Icon';
 
-const createButton = (params?: Props, children = 'This is a button') => {
-  const queries = render(<Button {...params}>{children}</Button>);
-  const button = getByRole(queries.container, 'button');
+const defaultParams: Props = {};
+
+const createButton = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <Button {...parameters} data-testid="button">
+      button content
+    </Button>
+  );
+  const button = queries.getByTestId('button');
 
   return {
     ...queries,
@@ -21,56 +31,92 @@ describe('Button should render', () => {
   });
 });
 
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <Button {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
+describe('Button should render', () => {
+  it('renders without crashing', () => {
+    const { button } = createButton();
+
+    expect(button).toBeDefined();
+  });
+});
+
 describe('Different variants of the button', () => {
   it('should have a class of "primary"', () => {
-    const { button } = createButton({ color: 'primary' });
+    const { button } = createButton();
     expect(button.classList.contains('primary')).toBe(true);
   });
 
   it('should have a class of "secondary"', () => {
-    const { button } = createButton({ color: 'secondary' });
+    const { button } = createButton((defaultParams) => ({ ...defaultParams, color: 'secondary' }));
     expect(button.classList.contains('secondary')).toBe(true);
   });
 
   it('should have a class of "tertiary"', () => {
-    const { button } = createButton({ color: 'tertiary' });
+    const { button } = createButton((defaultParams) => ({ ...defaultParams, color: 'tertiary' }));
     expect(button.classList.contains('tertiary')).toBe(true);
   });
 
   it('should have a class of "fill"', () => {
-    const { button } = createButton({ variant: 'fill' });
+    const { button } = createButton((defaultParams) => ({ ...defaultParams, variant: 'fill' }));
     expect(button.classList.contains('fill')).toBe(true);
   });
 
   it('should have a class of "outline"', () => {
-    const { button } = createButton({ variant: 'outline' });
+    const { button } = createButton((defaultParams) => ({ ...defaultParams, variant: 'outline' }));
     expect(button.classList.contains('outline')).toBe(true);
   });
 
   it('should have a class of "text"', () => {
-    const { button } = createButton({ variant: 'text' });
+    const { button } = createButton((defaultParams) => ({ ...defaultParams, variant: 'text' }));
     expect(button.classList.contains('text')).toBe(true);
   });
 });
 
 describe('Button contains an icon', () => {
   it('Contains an icon at the start', () => {
-    const { button } = createButton({
+    const { button } = createButton((defaultParams) => ({
+      ...defaultParams,
       startIcon: <Icon icon={Icons.Calendar} />,
-    });
+    }));
 
     expect(button.classList.contains('has-icon')).toBe(true);
     expect(button.firstElementChild?.nodeName).toBe('I');
-    expect(button.querySelector('i + span')!.innerHTML).toBe('This is a button');
+    expect(button.querySelector('i + span')!.innerHTML).toBe('button content');
   });
 
   it('Contains an icon at the end', () => {
-    const { button } = createButton({
+    const { button } = createButton((defaultParams) => ({
+      ...defaultParams,
       endIcon: <Icon icon={Icons.Calendar} />,
-    });
+    }));
 
     expect(button.classList.contains('has-icon')).toBe(true);
     expect(button.lastElementChild?.nodeName).toBe('I');
-    expect(button.querySelector('span')!.innerHTML).toBe('This is a button');
+    expect(button.querySelector('span')!.innerHTML).toBe('button content');
   });
 });

package/src/Button/Button.tsx

@@ -1,18 +1,25 @@
-import React, { RefObject } from 'react';
+import React from 'react';
 import { BaseButton, Props as BaseButtonProps } from './BaseButton';
 import classes from './Button.module.scss';
 
-export interface Props extends Omit<BaseButtonProps, 'ref'> {
+export interface Props extends BaseButtonProps {
   startIcon?: React.ReactNode | false;
   endIcon?: React.ReactNode | false;
   children?: React.ReactNode;
   variant?: 'text' | 'fill' | 'outline';
-  ref?: RefObject<HTMLButtonElement>;
 }
 
 export const Button = React.forwardRef<HTMLButtonElement, Props>(
   (
-    { children, variant = 'fill', color = 'primary', startIcon = false, endIcon = false, ...rest },
+    {
+      children,
+      variant = 'fill',
+      color = 'primary',
+      startIcon = false,
+      endIcon = false,
+      className,
+      ...rest
+    },
     ref
   ) => {
     const additionalClasses = [];
@@ -29,6 +36,10 @@ export const Button = React.forwardRef<HTMLButtonElement, Props>(
       additionalClasses.push(classes['end-icon']);
     }
 
+    if (className) {
+      additionalClasses.push(className);
+    }
+
     return (
       <BaseButton
         {...rest}

package/src/Button/IconButton.test.tsx

@@ -1,47 +1,82 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { IconButton, Props } from './IconButton';
-import { render, getByRole } from '@testing-library/react';
-import { Icon, Icons } from '../Icon/Icon';
-
-const createButton = ({
-  title = 'Icon',
-  children = <Icon icon={Icons.Calendar} />,
-  ...rest
-}: Partial<Props> = {}) => {
+import { render } from '@testing-library/react';
+
+const defaultParams: Props = {
+  title: 'iconbutton',
+};
+
+const createIconButton = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
   const queries = render(
-    <IconButton {...rest} title={title}>
-      {children}
+    <IconButton {...parameters} data-testid="iconButton">
+      iconButton content
     </IconButton>
   );
-  const button = getByRole(queries.container, 'button');
+  const iconButton = queries.getByTestId('iconButton');
 
   return {
     ...queries,
-    button,
+    iconButton,
   };
 };
 
-describe('IconButton', () => {
+describe('IconButton should render', () => {
   it('renders without crashing', () => {
-    const { button } = createButton();
+    const { iconButton } = createIconButton();
+
+    expect(iconButton).toBeDefined();
+  });
+});
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <IconButton {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
 
-    expect(button).toBeDefined();
+    render(<ExampleComponent propagateRef={refCheck} />);
   });
 });
 
 describe('Different variants of the button', () => {
   it('should have a class of "primary"', () => {
-    const { button } = createButton({ color: 'primary' });
-    expect(button.classList.contains('primary')).toBe(true);
+    const { iconButton } = createIconButton();
+    expect(iconButton.classList.contains('primary')).toBe(true);
   });
 
   it('should have a class of "secondary"', () => {
-    const { button } = createButton({ color: 'secondary' });
-    expect(button.classList.contains('secondary')).toBe(true);
+    const { iconButton } = createIconButton((defaultParams) => ({
+      ...defaultParams,
+      color: 'secondary',
+    }));
+    expect(iconButton.classList.contains('secondary')).toBe(true);
   });
 
   it('should have a class of "tertiary"', () => {
-    const { button } = createButton({ color: 'tertiary' });
-    expect(button.classList.contains('tertiary')).toBe(true);
+    const { iconButton } = createIconButton((defaultParams) => ({
+      ...defaultParams,
+      color: 'tertiary',
+    }));
+    expect(iconButton.classList.contains('tertiary')).toBe(true);
   });
 });

package/src/Button/IconButton.tsx

@@ -1,28 +1,37 @@
-import React, { RefObject } from 'react';
+import React, { Fragment } from 'react';
 import { BaseButton, Props as BaseButtonProps } from './BaseButton';
 import classes from './IconButton.module.scss';
 import readyclasses from '../readyclasses.module.scss';
 
-export interface Props extends Omit<BaseButtonProps, 'ref'> {
+export interface Props extends BaseButtonProps {
   children?: React.ReactNode;
   iconSize?: 's' | 'm' | 'l';
   className?: string;
-  title: string;
-  ref?: RefObject<HTMLButtonElement>;
+  title?: string;
 }
 
 export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
-  ({ children, color = 'primary', iconSize = 'm', title, ...rest }, ref) => {
+  ({ children, color = 'primary', iconSize = 'm', title, className, ...rest }, ref) => {
+    if (!title) {
+      console.error("Please make sure to specify a 'title' prop to your IconButton component! ");
+    }
+
+    const iconButtonClasses = [
+      classes['icon-button'],
+      classes[color],
+      classes['button-' + iconSize],
+    ];
+
+    if (className) {
+      iconButtonClasses.push(className);
+    }
+
     return (
-      <BaseButton
-        {...rest}
-        ref={ref}
-        className={`${classes['icon-button']} ${classes[color]} ${classes['button-' + iconSize]}`}
-      >
-        <>
+      <BaseButton {...rest} ref={ref} className={iconButtonClasses.join(' ')}>
+        <Fragment>
           {children}
           <span className={readyclasses['sr-only']}>{title}</span>
-        </>
+        </Fragment>
       </BaseButton>
     );
   }