@onewelcome/react-lib-components 0.2.1 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "0.2.1",
+  "version": "0.2.4",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",
@@ -18,7 +18,7 @@
     "build": "dts build",
     "build-storybook": "build-storybook",
     "dev": "npm-run-all -p start test:watch storybook",
-    "lint": "dts lint",
+    "lint": "eslint --fix '**/*.{ts,tsx}'",
     "prepare": "husky install && dts build",
     "size": "size-limit",
     "start": "dts watch",
@@ -47,20 +47,21 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.18.6",
+    "@babel/core": "^7.18.10",
+    "@onewelcome/eslint-config-shared-codestyle": "^9.0.3",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^6.5.9",
-    "@storybook/addon-docs": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/addons": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/addon-a11y": "^6.5.10",
+    "@storybook/addon-docs": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addons": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.9",
-    "@storybook/theming": "^6.5.9",
-    "@testing-library/dom": "^8.16.0",
-    "@testing-library/jest-dom": "^5.16.4",
+    "@storybook/react": "^6.5.10",
+    "@storybook/theming": "^6.5.10",
+    "@testing-library/dom": "^8.16.1",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
@@ -68,23 +69,33 @@
     "@tsconfig/recommended": "^1.0.1",
     "@types/color-convert": "^2.0.0",
     "@types/mdx": "^2.0.2",
-    "@types/react": "^17.0.47",
+    "@types/react": "^17.0.48",
     "@types/react-dom": "^17.0.17",
+    "@types/react-router": "^5.1.18",
+    "@types/react-router-dom": "^5.3.3",
+    "@typescript-eslint/eslint-plugin": "^5.33.1",
+    "@typescript-eslint/parser": "^5.33.1",
     "babel-loader": "^8.2.5",
     "dts-cli": "^1.5.2",
+    "eslint": "^8.22.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-jest": "^26.8.3",
+    "eslint-plugin-prettier": "^4.2.1",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest-junit": "^13.2.0",
     "lint-staged": "^13.0.3",
     "npm-run-all": "^4.1.5",
+    "prettier": "^2.7.1",
     "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.53.0",
+    "sass": "^1.54.3",
     "size-limit": "^7.0.8",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4"

package/src/Breadcrumbs/Breadcrumbs.test.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
-import { Breadcrumbs, Props } from './Breadcrumbs';
-import { render } from '@testing-library/react';
-import { Link } from '../Link/Link';
+import React from "react";
+import { Breadcrumbs, Props } from "./Breadcrumbs";
+import { render } from "@testing-library/react";
+import { Link } from "../Link/Link";
 
 const defaultParams: Props = {
-  'aria-label': 'Breadcrumbs',
+  "aria-label": "Breadcrumbs",
   children: [
     <Link key="0" to="#1" data-testid="link">
       Test1
     </Link>,
     <Link key="1" to="#2" data-testid="link">
       Test2
-    </Link>,
-  ],
+    </Link>
+  ]
 };
 
 const createBreadcrumbs = (params?: (defaultParams: Props) => Props) => {
@@ -21,22 +21,22 @@ const createBreadcrumbs = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<Breadcrumbs {...parameters} data-testid="breadcrumbs"></Breadcrumbs>);
-  const breadcrumbs = queries.getByTestId('breadcrumbs');
+  const breadcrumbs = queries.getByTestId("breadcrumbs");
 
   return {
     ...queries,
-    breadcrumbs,
+    breadcrumbs
   };
 };
 
-describe('Breadcrumbs should render', () => {
-  it('renders without crashing', () => {
+describe("Breadcrumbs should render", () => {
+  it("renders without crashing", () => {
     const { breadcrumbs } = createBreadcrumbs();
 
     expect(breadcrumbs).toBeDefined();
-    expect(breadcrumbs.firstChild).not.toHaveAttribute('aria-current');
-    expect((breadcrumbs.firstChild as HTMLElement).tagName).toEqual('A');
-    expect(breadcrumbs.lastChild).toHaveAttribute('aria-current', 'page');
-    expect((breadcrumbs.lastChild as HTMLElement).tagName).toEqual('SPAN');
+    expect(breadcrumbs.firstChild).not.toHaveAttribute("aria-current");
+    expect((breadcrumbs.firstChild as HTMLElement).tagName).toEqual("A");
+    expect(breadcrumbs.lastChild).toHaveAttribute("aria-current", "page");
+    expect((breadcrumbs.lastChild as HTMLElement).tagName).toEqual("SPAN");
   });
 });

package/src/Breadcrumbs/Breadcrumbs.tsx

@@ -1,18 +1,18 @@
-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';
-import classes from './Breadcrumbs.module.scss';
+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";
+import classes from "./Breadcrumbs.module.scss";
 
 type ChildrenType = ReactElement<LinkProps, typeof Link>;
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   children: ChildrenType | ChildrenType[];
-  'aria-label': string;
+  "aria-label": string;
 }
 
 export const Breadcrumbs = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, 'aria-label': ariaLabel, className = '', ...rest }: Props, ref) => {
+  ({ 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) {
@@ -21,7 +21,7 @@ export const Breadcrumbs = React.forwardRef<HTMLDivElement, Props>(
             key={child.key}
             variant="body"
             tag="span"
-            className={classes['last']}
+            className={classes["last"]}
             aria-current="page"
           >
             {child.props.children}
@@ -31,7 +31,7 @@ export const Breadcrumbs = React.forwardRef<HTMLDivElement, Props>(
         return (
           <Fragment key={child.key}>
             {React.cloneElement(child)}
-            <Icon icon={Icons.ChevronRight} className={classes['icon']} />
+            <Icon icon={Icons.ChevronRight} className={classes["icon"]} />
           </Fragment>
         );
       }
@@ -41,7 +41,7 @@ export const Breadcrumbs = React.forwardRef<HTMLDivElement, Props>(
         {...rest}
         ref={ref}
         aria-label={ariaLabel}
-        className={`${classes['breadcrumbs']} ${className}`}
+        className={`${classes["breadcrumbs"]} ${className}`}
       >
         {items}
       </nav>

package/src/Button/BaseButton.module.scss

@@ -1,4 +1,4 @@
-@import '../mixins.module.scss';
+@import "../mixins.module.scss";
 
 .button {
   @include buttonBase();

package/src/Button/BaseButton.test.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useRef } from 'react';
-import { BaseButton, Props } from './BaseButton';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { BaseButton, Props } from "./BaseButton";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {};
 
@@ -15,29 +15,29 @@ const createBaseButton = (params?: (defaultParams: Props) => Props) => {
       baseButton content
     </BaseButton>
   );
-  const baseButton = queries.getByTestId('baseButton');
+  const baseButton = queries.getByTestId("baseButton");
 
   return {
     ...queries,
-    baseButton,
+    baseButton
   };
 };
 
-describe('BaseButton should render', () => {
-  it('renders without crashing', () => {
+describe("BaseButton should render", () => {
+  it("renders without crashing", () => {
     const { baseButton } = createBaseButton();
 
     expect(baseButton).toBeDefined();
-    expect(baseButton).toHaveTextContent('baseButton content');
+    expect(baseButton).toHaveTextContent("baseButton content");
   });
 });
 
-describe('On click handler', () => {
-  it('executes the onclick handler', async () => {
+describe("On click handler", () => {
+  it("executes the onclick handler", async () => {
     const onClickHandler = jest.fn();
-    const { baseButton } = createBaseButton((defaultParams) => ({
+    const { baseButton } = createBaseButton(defaultParams => ({
       ...defaultParams,
-      onClick: onClickHandler,
+      onClick: onClickHandler
     }));
 
     userEvent.click(baseButton);
@@ -46,13 +46,13 @@ describe('On click handler', () => {
   });
 });
 
-describe('Properties of the button', () => {
-  it('should be disabled, function should not have been called', () => {
+describe("Properties of the button", () => {
+  it("should be disabled, function should not have been called", () => {
     const onClickHandler = jest.fn();
-    const { baseButton } = createBaseButton((defaultParams) => ({
+    const { baseButton } = createBaseButton(defaultParams => ({
       ...defaultParams,
       disabled: true,
-      onClick: onClickHandler,
+      onClick: onClickHandler
     }));
 
     userEvent.click(baseButton);
@@ -60,28 +60,28 @@ describe('Properties of the button', () => {
   });
 
   it('should have the class "TESTING"', () => {
-    const { baseButton } = createBaseButton((defaultParams) => ({
+    const { baseButton } = createBaseButton(defaultParams => ({
       ...defaultParams,
-      className: 'TESTING',
+      className: "TESTING"
     }));
 
-    expect(baseButton).toHaveClass('TESTING');
+    expect(baseButton).toHaveClass("TESTING");
   });
 
   it('should have a "name" property with the value "button"', () => {
-    const { baseButton } = createBaseButton((defaultParams) => ({
+    const { baseButton } = createBaseButton(defaultParams => ({
       ...defaultParams,
-      name: 'button',
+      name: "button"
     }));
 
-    expect(baseButton).toHaveAttribute('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', () => {
+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
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -97,7 +97,7 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);

package/src/Button/BaseButton.tsx

@@ -1,15 +1,15 @@
-import React, { ComponentPropsWithRef } from 'react';
-import classes from './BaseButton.module.scss';
+import React, { ComponentPropsWithRef } from "react";
+import classes from "./BaseButton.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'button'> {
-  type?: 'submit' | 'button' | 'reset';
+export interface Props extends ComponentPropsWithRef<"button"> {
+  type?: "submit" | "button" | "reset";
   disabled?: boolean;
-  color?: 'primary' | 'secondary' | 'tertiary' | 'default';
+  color?: "primary" | "secondary" | "tertiary" | "default";
 }
 
 export const BaseButton = React.forwardRef<HTMLButtonElement, Props>(
-  ({ children, type = 'button', className, ...rest }, ref) => {
-    const validTypes = ['submit', 'button', 'reset'];
+  ({ children, type = "button", className, ...rest }, ref) => {
+    const validTypes = ["submit", "button", "reset"];
 
     if (!validTypes.includes(type))
       throw new Error(
@@ -21,7 +21,7 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, Props>(
         {...rest}
         ref={ref}
         type={type}
-        className={`${classes.button} ${className ? className : ''}`}
+        className={`${classes.button} ${className ? className : ""}`}
       >
         {children}
       </button>

package/src/Button/Button.module.scss

@@ -1,16 +1,16 @@
-@import '../readyclasses.module.scss';
-@import '../mixins.module.scss';
+@import "../readyclasses.module.scss";
+@import "../mixins.module.scss";
 
 .fill {
-  @include button('fill');
+  @include button("fill");
 }
 
 .outline {
-  @include button('outline');
+  @include button("outline");
 }
 
 .text {
-  @include button('text');
+  @include button("text");
 }
 
 .has-icon {

package/src/Button/Button.test.tsx

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

package/src/Button/Button.tsx

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

package/src/Button/IconButton.module.scss

@@ -1,5 +1,5 @@
-@import '../readyclasses.module.scss';
-@import '../mixins.module.scss';
+@import "../readyclasses.module.scss";
+@import "../mixins.module.scss";
 
 .icon-button {
   border: var(--button-border-width) var(--button-border-style) transparent;
@@ -41,14 +41,14 @@
   }
 
   &.fill {
-    @include button('fill', 'icon');
+    @include button("fill", "icon");
   }
 
   &.text {
-    @include button('text', 'icon');
+    @include button("text", "icon");
   }
 
   &.outline {
-    @include button('outline', 'icon');
+    @include button("outline", "icon");
   }
 }