@onewelcome/react-lib-components 1.3.0 → 1.5.0

package/dist/util/helper.d.ts

@@ -1,4 +1,4 @@
-declare type KeyValuePair = {
+type KeyValuePair = {
     [key: string]: unknown;
 };
 export declare const generateID: (length?: number, stringToWeaveIn?: string) => string;

package/package.json

@@ -1,6 +1,7 @@
 {
+  "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",
@@ -51,60 +52,60 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.19.3",
+    "@babel/core": "^7.20.12",
     "@mdx-js/react": "^1.6.22",
     "@onewelcome/eslint-config-shared-codestyle": "^9.0.3",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^6.5.12",
-    "@storybook/addon-docs": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-links": "^6.5.12",
-    "@storybook/addons": "^6.5.12",
-    "@storybook/builder-webpack5": "^6.5.12",
-    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/addon-a11y": "^6.5.15",
+    "@storybook/addon-docs": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/addons": "^6.5.15",
+    "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/manager-webpack5": "^6.5.15",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.12",
-    "@storybook/theming": "^6.5.12",
-    "@testing-library/dom": "^8.18.1",
+    "@storybook/react": "^6.5.15",
+    "@storybook/theming": "^6.5.15",
+    "@testing-library/dom": "^8.19.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
-    "@tsconfig/create-react-app": "^1.0.2",
+    "@tsconfig/create-react-app": "^1.0.3",
     "@tsconfig/recommended": "^1.0.1",
     "@types/color-convert": "^2.0.0",
-    "@types/mdx": "^2.0.2",
-    "@types/react": "^17.0.50",
-    "@types/react-dom": "^17.0.17",
-    "@types/react-router": "^5.1.19",
+    "@types/mdx": "^2.0.3",
+    "@types/react": "^17.0.52",
+    "@types/react-dom": "^17.0.18",
+    "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.39.0",
-    "@typescript-eslint/parser": "^5.39.0",
-    "babel-loader": "^8.2.5",
-    "dts-cli": "^1.6.0",
-    "eslint": "^8.24.0",
-    "eslint-config-prettier": "^8.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
+    "babel-loader": "^9.1.0",
+    "dts-cli": "^1.6.3",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-jest": "^26.9.0",
+    "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-license-header": "^0.6.0",
     "eslint-plugin-prettier": "^4.2.1",
     "html-webpack-plugin": "^5.5.0",
-    "husky": "^7.0.4",
+    "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest-junit": "^13.2.0",
-    "lint-staged": "^13.0.3",
+    "jest-junit": "^15.0.0",
+    "lint-staged": "^13.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
-    "react-router": "^6.4.2",
-    "react-router-dom": "^6.4.2",
+    "react-is": "^18.2.0",
+    "react-router": "^6.6.2",
+    "react-router-dom": "^6.6.2",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-styles": "^4.0.0",
-    "sass": "^1.55.0",
+    "sass": "^1.57.1",
     "size-limit": "^7.0.8",
-    "tslib": "^2.4.0",
-    "typescript": "^4.8.4"
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.4"
   }
 }

package/src/Breadcrumbs/Breadcrumbs.tsx

@@ -14,7 +14,12 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, Fragment, ReactElement } from "react";
+import React, {
+  ComponentPropsWithRef,
+  ForwardRefRenderFunction,
+  Fragment,
+  ReactElement
+} from "react";
 import { Icon, Icons } from "../Icon/Icon";
 import { Link, Props as LinkProps } from "../Link/Link";
 import { Typography } from "../Typography/Typography";
@@ -27,40 +32,43 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   ariaLabel: string;
 }
 
-export const Breadcrumbs = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, 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>
-    );
-  }
-);
+const BreadcrumbsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, 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>
+  );
+};
+
+export const Breadcrumbs = React.forwardRef(BreadcrumbsComponent);

package/src/Button/BaseButton.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import classes from "./BaseButton.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"button"> {
@@ -23,24 +23,27 @@ export interface Props extends ComponentPropsWithRef<"button"> {
   color?: "primary" | "secondary" | "tertiary" | "default";
 }
 
-export const BaseButton = React.forwardRef<HTMLButtonElement, Props>(
-  ({ children, type = "button", className, ...rest }, ref) => {
-    const validTypes = ["submit", "button", "reset"];
+const BaseButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  { children, type = "button", className, ...rest },
+  ref
+) => {
+  const validTypes = ["submit", "button", "reset"];
 
-    if (!validTypes.includes(type))
-      throw new Error(
-        `You have entered an invalid button type. Expected 'submit', 'button' or 'reset' got ${type}`
-      );
-
-    return (
-      <button
-        {...rest}
-        ref={ref}
-        type={type}
-        className={`${classes.button} ${className ? className : ""}`}
-      >
-        {children}
-      </button>
+  if (!validTypes.includes(type))
+    throw new Error(
+      `You have entered an invalid button type. Expected 'submit', 'button' or 'reset' got ${type}`
     );
-  }
-);
+
+  return (
+    <button
+      {...rest}
+      ref={ref}
+      type={type}
+      className={`${classes.button} ${className ? className : ""}`}
+    >
+      {children}
+    </button>
+  );
+};
+
+export const BaseButton = React.forwardRef(BaseButtonComponent);

package/src/Button/Button.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React from "react";
+import React, { ForwardRefRenderFunction } from "react";
 import { BaseButton, Props as BaseButtonProps } from "./BaseButton";
 import classes from "./Button.module.scss";
 
@@ -25,47 +25,47 @@ export interface Props extends BaseButtonProps {
   variant?: "text" | "fill" | "outline";
 }
 
-export const Button = React.forwardRef<HTMLButtonElement, Props>(
-  (
-    {
-      children,
-      variant = "fill",
-      color = "primary",
-      startIcon = false,
-      endIcon = false,
-      className,
-      ...rest
-    },
-    ref
-  ) => {
-    const additionalClasses = [];
+const ButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  {
+    children,
+    variant = "fill",
+    color = "primary",
+    startIcon = false,
+    endIcon = false,
+    className,
+    ...rest
+  },
+  ref
+) => {
+  const additionalClasses = [];
 
-    if (startIcon || endIcon) {
-      additionalClasses.push(classes["has-icon"]);
-    }
-
-    if (startIcon) {
-      additionalClasses.push(classes["start-icon"]);
-    }
+  if (startIcon || endIcon) {
+    additionalClasses.push(classes["has-icon"]);
+  }
 
-    if (endIcon) {
-      additionalClasses.push(classes["end-icon"]);
-    }
+  if (startIcon) {
+    additionalClasses.push(classes["start-icon"]);
+  }
 
-    if (className) {
-      additionalClasses.push(className);
-    }
+  if (endIcon) {
+    additionalClasses.push(classes["end-icon"]);
+  }
 
-    return (
-      <BaseButton
-        {...rest}
-        ref={ref}
-        className={`${classes[color]} ${classes[variant]} ${additionalClasses.join(" ")}`}
-      >
-        {startIcon && <i>{startIcon}</i>}
-        <span>{children}</span>
-        {endIcon && <i>&nbsp;{endIcon}</i>}
-      </BaseButton>
-    );
+  if (className) {
+    additionalClasses.push(className);
   }
-);
+
+  return (
+    <BaseButton
+      {...rest}
+      ref={ref}
+      className={`${classes[color]} ${classes[variant]} ${additionalClasses.join(" ")}`}
+    >
+      {startIcon && <i>{startIcon}</i>}
+      <span>{children}</span>
+      {endIcon && <i>&nbsp;{endIcon}</i>}
+    </BaseButton>
+  );
+};
+
+export const Button = React.forwardRef(ButtonComponent);

package/src/Button/IconButton.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { Fragment } from "react";
+import React, { ForwardRefRenderFunction, Fragment } from "react";
 import { BaseButton, Props as BaseButtonProps } from "./BaseButton";
 import classes from "./IconButton.module.scss";
 import readyclasses from "../readyclasses.module.scss";
@@ -27,33 +27,33 @@ export interface Props extends BaseButtonProps {
   title?: string;
 }
 
-export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
-  (
-    { children, color = "primary", variant = "text", 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[variant],
-      classes[color],
-      classes["button-" + iconSize]
-    ];
+export const IconButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  { children, color = "primary", variant = "text", iconSize = "m", title, className, ...rest },
+  ref
+) => {
+  if (!title) {
+    console.error("Please make sure to specify a 'title' prop to your IconButton component! ");
+  }
 
-    if (className) {
-      iconButtonClasses.push(className);
-    }
+  const iconButtonClasses = [
+    classes["icon-button"],
+    classes[variant],
+    classes[color],
+    classes["button-" + iconSize]
+  ];
 
-    return (
-      <BaseButton {...rest} ref={ref} className={iconButtonClasses.join(" ")}>
-        <Fragment>
-          {children}
-          <span className={readyclasses["sr-only"]}>{title}</span>
-        </Fragment>
-      </BaseButton>
-    );
+  if (className) {
+    iconButtonClasses.push(className);
   }
-);
+
+  return (
+    <BaseButton {...rest} ref={ref} className={iconButtonClasses.join(" ")}>
+      <Fragment>
+        {children}
+        <span className={readyclasses["sr-only"]}>{title}</span>
+      </Fragment>
+    </BaseButton>
+  );
+};
+
+export const IconButton = React.forwardRef(IconButtonComponent);