@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

package/dist/interfaces.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export type DataAttributeKey = `data-${string}`;
+export interface KeyValuePair {
+    [dataAttribute: DataAttributeKey]: unknown;
+}
+export type MergeElementProps<T extends React.ElementType, P> = Omit<React.ComponentPropsWithRef<T>, keyof P> & P;
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends (infer U)[] ? DeepPartial<U>[] : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : DeepPartial<T[P]>;
+};

package/dist/util/helper.d.ts

@@ -0,0 +1,14 @@
+export declare const generateID: (length?: number, stringToWeaveIn?: string) => string;
+export declare const filterProps: (props: any, regexPattern: RegExp, returnFiltered?: boolean) => {};
+export declare const debounce: (fn: (...args: unknown[]) => unknown, delay: number) => (...args: unknown[]) => void;
+export declare const throttle: (fn: (...args: unknown[]) => unknown, delay: number) => () => void;
+export declare const areArraysDifferent: (arr1: Record<string, any>[], arr2: Record<string, any>[], key: string) => boolean;
+/** Source: https://stackoverflow.com/a/42769683/5084110 */
+export declare const remToPx: (rem: number) => number;
+export declare const isJsonString: (str: any) => boolean;
+type ObjectType = {
+    [key: string]: any;
+};
+export declare const deepMerge: <T extends object>(obj1: ObjectType, obj2: ObjectType | false) => T;
+export declare const escapeRegExp: (str: string) => string;
+export {};

package/dist/util/helper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/util/unitTestUtils.d.ts

@@ -0,0 +1,12 @@
+export declare class MockDOMRect implements DOMRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    constructor(x?: number, y?: number, width?: number, height?: number, top?: number, right?: number, bottom?: number, left?: number);
+    toJSON(): this;
+}

package/dist/utils/statusUtils.d.ts

@@ -0,0 +1,10 @@
+import { Icons } from '../components/Icon/Icon';
+interface StatusProps {
+    error?: boolean;
+    success?: boolean;
+    info?: boolean;
+}
+type StatusState = "error" | "success" | "info";
+export declare function getStatusIcon({ error, success, info }: StatusProps): Icons;
+export declare function getStatusState({ error, success, info }: StatusProps, defaultToInfo?: boolean): StatusState | undefined;
+export {};

package/dist/variables.d.ts

@@ -0,0 +1,8 @@
+export declare enum ScreenSize {
+    SMALL = 0,
+    MEDIUM = 1,
+    LARGE = 2
+}
+export declare const breakpoints: {
+    [key in ScreenSize]: number;
+};

package/package.json

@@ -0,0 +1,144 @@
+{
+  "homepage": "http://onewelcome.github.io/react-lib-components",
+  "name": "@onewelcome/react-lib-components",
+  "version": "0.0.0-experimental-8e3a0fd",
+  "license": "Apache-2.0",
+  "author": "OneWelcome B.V.",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "!*/**/*.test.tsx",
+    "!*/**/*.test.ts"
+  ],
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/onewelcome/react-lib-components"
+  },
+  "scripts": {
+    "build": "rimraf dist && vite build",
+    "build-storybook": "storybook build",
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "dev": "npm-run-all -p test:watch storybook",
+    "lint": "eslint \"**/*.{js,mjs,ts,tsx}\"",
+    "prepare": "husky && vite build",
+    "start": "npm run storybook",
+    "test": "jest",
+    "test:watch": "npm test -- --watch",
+    "prettier": "prettier --write --ignore-path .gitignore \"**/*.+(ts|tsx|scss|mdx)\"",
+    "storybook": "storybook dev -p 6006"
+  },
+  "peerDependencies": {
+    "date-fns": "^4.1.0",
+    "react": ">=16",
+    "react-day-picker": "^9.4.1",
+    "react-dom": ">=16"
+  },
+  "overrides": {
+    "cross-spawn": ">=7.0.5"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.9",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@mdx-js/react": "^3.0.1",
+    "@onewelcome/eslint-config-shared-codestyle": "^9.3.0",
+    "@onewelcome/storybook-addon-basestyling": "^2.0.0",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-virtual": "^3.0.2",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/components": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/preview-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-webpack5": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
+    "@testing-library/dom": "^10.3.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/mdx": "^2.0.13",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
+    "autoprefixer": "^10.4.21",
+    "babel-loader": "^9.1.3",
+    "chromatic": "^11.5.4",
+    "clean-css": "^5.3.3",
+    "css-loader": "^7.1.2",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-export-scope": "^2.4.0",
+    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-license-header": "^0.6.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.12.0",
+    "husky": "^9.1.7",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-junit": "^16.0.0",
+    "jest-sonar-reporter": "^2.0.0",
+    "lint-staged": "^15.2.7",
+    "mini-css-extract-plugin": "^2.9.2",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.3.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
+    "react-router-dom": "^6.24.1",
+    "remark-gfm": "^4.0.1",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.18.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.85.1",
+    "sass-loader": "^16.0.5",
+    "size-limit": "^11.1.4",
+    "storybook": "^8.6.12",
+    "storybook-addon-mock": "^5.0.0",
+    "storybook-addon-pseudo-states": "^4.0.4",
+    "storybook-mock-date-decorator": "^2.0.6",
+    "style-inject": "^0.3.0",
+    "style-loader": "^4.0.0",
+    "ts-jest": "^29.1.5",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3",
+    "vite": "^6.4.1",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^4.5.3"
+  }
+}

package/src/_functions.scss

@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+@function relativeToBaseFontSize($ratio) {
+  @return calc($ratio * var(--font-size));
+}

package/src/components/Breadcrumbs/Breadcrumbs.module.scss

@@ -0,0 +1,54 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+.breadcrumbs {
+  .last {
+    color: var(--color-primary900);
+    font-weight: 700;
+    margin: 0;
+  }
+
+  .icon {
+    color: var(--color-primary);
+    font-size: var(--font-size-small);
+    line-height: var(--default-line-height);
+    margin: 0 0.84rem;
+  }
+
+  .breadcrumb-link {
+    text-decoration: none;
+    &:hover,
+    &.visited {
+      [data-underline] {
+        text-decoration: underline;
+      }
+    }
+    &:focus,
+    &:focus-visible {
+      outline: 2px solid var(--color-focus);
+      outline-offset: 1px;
+    }
+
+    &:visited {
+      color: var(--color-primary700);
+    }
+
+    &:active {
+      color: var(--color-primary900);
+      font-weight: 700;
+    }
+  }
+}

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,84 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+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";
+import classes from "./Breadcrumbs.module.scss";
+
+type ChildrenType = ReactElement<LinkProps, typeof Link>;
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  children: ChildrenType | ChildrenType[];
+  ariaLabel: string;
+}
+
+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;
+    const isFirstElement = Array.isArray(children) && index === 0;
+    const item = React.cloneElement(child, {
+      className: classes["breadcrumb-link"],
+      ...(isFirstElement
+        ? {
+            prefixIcon: <Icon icon={Icons.HomeFilled} style={{ marginRight: "0.35rem" }} />
+          }
+        : {})
+    } as LinkProps);
+
+    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}>
+          {item}
+          <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/components/Button/BaseButton.module.scss

@@ -0,0 +1,48 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+@use "../../mixins.module.scss";
+
+.button {
+  position: relative;
+
+  .content-hidden {
+    visibility: hidden;
+    display: flex;
+  }
+
+  & {
+    @include mixins.buttonBase();
+  }
+}
+
+.spinner {
+  position: absolute;
+  top: calc(50% - 0.75rem);
+  left: calc(50% - 0.75rem);
+  transform: translate(-50%, -50%);
+  animation: spin 1s infinite linear;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}

package/src/components/Button/BaseButton.tsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment } from "react";
+import classes from "./BaseButton.module.scss";
+import { ButtonSpinner } from "./Spinner";
+
+export interface Props extends ComponentPropsWithRef<"button"> {
+  type?: "submit" | "button" | "reset";
+  disabled?: boolean;
+  loading?: boolean;
+  color?: "primary" | "danger" | "default" | "success" | "warning";
+}
+
+const BaseButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  { children, type = "button", className, loading, disabled, hidden, ...rest },
+  ref
+) => {
+  const validTypes = ["submit", "button", "reset"];
+  const isDisabled = disabled ?? loading;
+  if (!validTypes.includes(type)) {
+    throw new Error(
+      `You have entered an invalid button type. Expected 'submit', 'button' or 'reset' got ${type}`
+    );
+  }
+
+  const buttonClasses = [classes.button];
+  loading && buttonClasses.push(classes.loading);
+  className && buttonClasses.push(className);
+
+  return (
+    <button
+      {...rest}
+      disabled={isDisabled}
+      ref={ref}
+      type={type}
+      hidden={hidden}
+      className={hidden ? "" : buttonClasses.join(" ")}
+    >
+      {loading ? (
+        <Fragment>
+          <div className={classes["content-hidden"]}>{children}</div>
+          <ButtonSpinner className={classes["spinner"]} />
+        </Fragment>
+      ) : (
+        children
+      )}
+    </button>
+  );
+};
+
+export const BaseButton = React.forwardRef(BaseButtonComponent);

package/src/components/Button/Button.module.scss

@@ -0,0 +1,58 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+@use "../../mixins.module.scss";
+@use "../../functions" as *;
+
+.fill {
+  @include mixins.button("fill");
+}
+
+.outline {
+  @include mixins.button("outline");
+}
+
+.text {
+  @include mixins.button("text");
+}
+
+.has-icon {
+  display: flex;
+  align-items: center;
+
+  &.start-icon {
+    padding-left: relativeToBaseFontSize(0.75);
+    padding-right: relativeToBaseFontSize(1.25);
+  }
+
+  &.end-icon {
+    padding-left: relativeToBaseFontSize(1.25);
+    padding-right: relativeToBaseFontSize(0.75);
+  }
+
+  i {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: relativeToBaseFontSize(1.5);
+    margin-right: relativeToBaseFontSize(0.25);
+
+    span {
+      font-size: var(--font-size);
+    }
+  }
+}

package/src/components/Button/Button.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ForwardRefRenderFunction } 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;
+  variant?: "text" | "fill" | "outline";
+}
+
+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 (endIcon) {
+    additionalClasses.push(classes["end-icon"]);
+  }
+
+  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/components/Button/IconButton.module.scss

@@ -0,0 +1,73 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+@use "../../mixins.module.scss";
+@use "../../functions" as *;
+
+.icon-button {
+  border: var(--button-border-width) var(--button-border-style) transparent;
+  background-color: transparent;
+  padding: 0;
+  border-radius: var(--button-border-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: auto;
+
+  span {
+    vertical-align: top;
+  }
+
+  /** Sizes **/
+  &.button-s {
+    width: relativeToBaseFontSize(1.875);
+    height: relativeToBaseFontSize(1.875);
+
+    span {
+      font-size: relativeToBaseFontSize(0.75);
+    }
+  }
+
+  &.button-m {
+    width: relativeToBaseFontSize(2.5);
+    height: relativeToBaseFontSize(2.5);
+
+    span {
+      font-size: var(--font-size);
+    }
+  }
+
+  &.button-l {
+    width: relativeToBaseFontSize(3.125);
+    height: relativeToBaseFontSize(3.125);
+
+    span {
+      font-size: relativeToBaseFontSize(1.375);
+    }
+  }
+
+  &.fill {
+    @include mixins.button("fill", "icon");
+  }
+
+  &.text {
+    @include mixins.button("text", "icon");
+  }
+
+  &.outline {
+    @include mixins.button("outline", "icon");
+  }
+}