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

package/src/mixins.module.scss

@@ -0,0 +1,371 @@
+/*!
+ * 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 "sass:map";
+@use "sass:meta";
+@use "./readyclasses.module.scss";
+@use "./variables.scss";
+@use "./functions" as *;
+
+@mixin button($variant: "text", $type: "default") {
+  $disabledSelector: if($type == "link", ".disabled", ":disabled");
+  font-weight: 500;
+
+  @if $variant == "text" {
+    border-color: transparent;
+    background-color: transparent;
+  } @else if $variant == "fill" {
+    &:not(#{$disabledSelector}) {
+      color: var(--button-fill-text-color);
+    }
+  } @else if $variant == "outline" {
+    background-color: var(--white);
+  }
+
+  &.primary:not(#{$disabledSelector}) {
+    @include buttonStyles(
+      var(--button-#{$variant}-primary-default-color),
+      var(--button-#{$variant}-primary-hover-color),
+      var(--button-#{$variant}-primary-focused-color),
+      var(--button-#{$variant}-primary-pressed-color),
+      $variant,
+      $type
+    );
+  }
+  &.success:not(#{$disabledSelector}) {
+    @include buttonStyles(
+      var(--button-#{$variant}-success-default-color),
+      var(--button-#{$variant}-success-hover-color),
+      var(--button-#{$variant}-success-focused-color),
+      var(--button-#{$variant}-success-pressed-color),
+      $variant,
+      $type
+    );
+  }
+  &.danger:not(#{$disabledSelector}) {
+    @include buttonStyles(
+      var(--button-#{$variant}-danger-default-color),
+      var(--button-#{$variant}-danger-hover-color),
+      var(--button-#{$variant}-danger-focused-color),
+      var(--button-#{$variant}-danger-pressed-color),
+      $variant,
+      $type
+    );
+  }
+  &.default:not(#{$disabledSelector}) {
+    @include buttonStyles(
+      var(--button-default-color),
+      var(--button-default-hover-color),
+      var(--button-default-focused-color),
+      var(--button-default-pressed-color),
+      $variant,
+      $type
+    );
+  }
+  &.warning:not(#{$disabledSelector}) {
+    @include buttonStyles(
+      var(--button-warning-default-color),
+      var(--button-warning-hover-color),
+      var(--button-warning-focused-color),
+      var(--button-warning-pressed-color),
+      $variant,
+      $type
+    );
+  }
+}
+
+@mixin buttonStyles(
+  $defaultColor: "transparent",
+  $hoverColor: "transparent",
+  $focusedColor: "transparent",
+  $pressedColor: "transparent",
+  $variant: "text",
+  $type: "default"
+) {
+  @if $variant == "text" {
+    color: $defaultColor;
+  } @else if $variant == "outline" {
+    border-color: $defaultColor;
+    color: $defaultColor;
+  } @else if $variant == "fill" {
+    background-color: $defaultColor;
+    border-color: $defaultColor;
+  }
+
+  &:hover:not(.disabled) {
+    @if $variant == "fill" {
+      background-color: $hoverColor;
+      border-color: $hoverColor;
+    } @else {
+      color: $hoverColor;
+    }
+
+    @if $variant == "text" or $variant == "outline" {
+      background-color: var(--color-black10);
+    }
+
+    @if $variant == "outline" or $variant == "fill" {
+      border-color: $hoverColor;
+    }
+  }
+
+  &:focus:not(.disabled),
+  &:focus-visible:not(.disabled) {
+    @if $variant == "fill" {
+      background-color: $focusedColor;
+    } @else {
+      color: $focusedColor;
+    }
+
+    @if $variant == "outline" or $variant == "fill" {
+      border-color: $focusedColor;
+    }
+
+    position: relative;
+    outline: relativeToBaseFontSize(0.125) solid var(--color-focus);
+    outline-offset: relativeToBaseFontSize(0.125);
+    z-index: 2;
+  }
+
+  &:active:not(.disabled) {
+    @if $variant == "fill" {
+      background-color: $pressedColor;
+      border-color: $pressedColor;
+    } @else {
+      color: $pressedColor;
+    }
+
+    @if $variant == "outline" or $variant == "fill" {
+      border-color: $pressedColor;
+    }
+
+    @if $variant == "text" or $variant == "outline" {
+      background-color: var(--color-black20);
+    }
+  }
+}
+
+@mixin buttonBase($type: "default") {
+  $transition-property: color, background-color, border-color;
+  $disabledSelector: if($type == "link", ".disabled", ":disabled");
+
+  border-width: var(--button-border-width);
+  border-style: var(--button-border-style);
+  border-radius: var(--button-border-radius);
+  font-size: var(--button-font-size);
+  line-height: 1;
+  margin: 0;
+  padding: relativeToBaseFontSize(0.5) relativeToBaseFontSize(0.75);
+  min-height: relativeToBaseFontSize(2.5);
+  cursor: pointer;
+
+  font-family: var(--font-family);
+
+  @include transition($transition-property, 0.2s, ease-in-out);
+
+  &#{$disabledSelector} {
+    color: var(--greyed-out);
+    cursor: not-allowed;
+    background-color: var(--disabled);
+    border-color: var(--disabled);
+  }
+}
+
+@mixin outline(
+  $color: var(--input-border-color),
+  $style: var(--input-border-style),
+  $width: var(--input-border-width),
+  $borderRadius: var(--input-border-radius),
+  $backgroundColor: ""
+) {
+  [data-readonlyview="true"] {
+    .outline {
+      border-color: var(--read-only-border-color);
+    }
+  }
+
+  .outline {
+    pointer-events: none;
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    inset: 0;
+    border-color: $color;
+    border-style: $style;
+    border-width: $width;
+    border-radius: $borderRadius;
+    @if ($backgroundColor != "") {
+      background-color: $backgroundColor;
+    }
+    @include transition(all, 0.2s, ease-in-out);
+  }
+}
+
+@mixin outlineStates {
+  &:hover .outline {
+    border-color: var(--input-border-color);
+    background-color: var(--input-hover-background-color);
+  }
+
+  .outline.disabled {
+    border-color: var(--disabled);
+    background-color: var(--input-disabled-background-color);
+  }
+
+  .outline.error {
+    border-color: var(--error);
+  }
+}
+
+@mixin browserOutlineDisabled {
+  &:focus:not(:disabled) {
+    outline: none;
+  }
+}
+
+@mixin skeletonLoading() {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--skeleton-background-color);
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(
+      90deg,
+      rgba(var(--skeleton-animation-color-rgb), 0) 0,
+      rgba(var(--skeleton-animation-color-rgb), 0.2) 20%,
+      rgba(var(--skeleton-animation-color-rgb), 0.5) 60%,
+      rgba(var(--skeleton-animation-color-rgb), 0)
+    );
+    content: "";
+
+    animation: shimmer 2s infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}
+
+@mixin transition($property, $duration, $function) {
+  transition-property: $property;
+  transition-duration: $duration;
+  transition-timing-function: $function;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0.1ms;
+  }
+}
+
+@mixin focusVisibleOutline(
+  $color: var(--color-focus),
+  $outlineWidth: relativeToBaseFontSize(0.125),
+  $outlineOffset: relativeToBaseFontSize(0.125),
+  $selectors: "&:focus-visible"
+) {
+  @if $selectors {
+    #{$selectors} {
+      outline: $outlineWidth solid $color;
+      outline-offset: $outlineOffset;
+      border-radius: var(--focus-border-radius);
+    }
+  } @else {
+    outline: $outlineWidth solid $color;
+    outline-offset: $outlineOffset;
+    border-radius: var(--focus-border-radius);
+  }
+}
+
+@mixin alertBorder($border-color) {
+  border-style: none none none solid;
+  border-width: var(--alert-border-width);
+  border-color: $border-color;
+  padding-left: calc(relativeToBaseFontSize(1) - var(--alert-border-width));
+}
+
+@mixin searchInputPointer($inputType, $selector) {
+  @if $selector {
+    #{$selector} {
+      @if $inputType == "search" {
+        input[type="search"]::-webkit-search-cancel-button {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+
+@mixin fontProperties(
+  $fontFamily: var(--font-family),
+  $fontSize: var(--font-size),
+  $fontWeight: 400,
+  $lineHeight: var(--default-line-height),
+  $color: var(--default)
+) {
+  font-family: $fontFamily;
+  font-size: $fontSize;
+  font-style: normal;
+  font-variant: normal;
+  line-height: $lineHeight;
+  font-weight: $fontWeight;
+  text-transform: none;
+  letter-spacing: 0;
+  color: $color;
+  margin: 0 0 relativeToBaseFontSize(1) 0;
+}
+
+@mixin breakpoint($minOrMax, $breakpoint) {
+  // If the key exists in the map
+  @if map.has-key(variables.$breakpoints, $breakpoint) {
+    @if ($minOrMax == "min") {
+      @media screen and (min-width: #{meta.inspect(map.get(variables.$breakpoints, $breakpoint))}) {
+        @content;
+      }
+    } @else if ($minOrMax == "max") {
+      @media screen and (max-width: #{meta.inspect(map.get(variables.$breakpoints, $breakpoint))}) {
+        @content;
+      }
+    } @else {
+      @warn "First argument should 'min' or 'max'";
+    }
+  }
+
+  // If the key doesn't exist in the map
+  @else {
+    @if ($minOrMax == "min") {
+      @media screen and (min-width: $breakpoint) {
+        @content;
+      }
+    } @else if ($minOrMax == "max") {
+      @media screen and (max-width: $breakpoint) {
+        @content;
+      }
+    } @else {
+      @warn "First argument should 'min' or 'max'";
+    }
+  }
+}

package/src/readyclasses.module.scss

@@ -0,0 +1,64 @@
+/*!
+ * 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.
+ */
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.hidden {
+  display: none;
+}
+
+.slide-in {
+  animation: slide-in 0.5s forwards;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.1ms;
+  }
+}
+
+.slide-out {
+  animation: slide-out 0.5s forwards;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.1ms;
+  }
+}
+
+@keyframes slide-in {
+  0% {
+    transform: translateY(100vh);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes slide-out {
+  0% {
+    transform: translateY(0%);
+  }
+  100% {
+    transform: translateY(100vh);
+  }
+}

package/src/types.d.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+declare module "*.scss" {
+  const content: { [className: string]: string };
+  export = content;
+}

package/src/util/helper.tsx

@@ -0,0 +1,219 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+type KeyValuePair = { [key: string]: unknown };
+
+export const generateID = (length = 15, stringToWeaveIn?: string) => {
+  /** We will make sure to mesh the generate id and name property together to basically create a unique ID */
+  const hashCharacters = [
+    "1",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "0",
+    "A",
+    "B",
+    "C",
+    "D",
+    "E",
+    "F",
+    "G",
+    "H",
+    "I",
+    "J",
+    "K",
+    "L",
+    "M",
+    "N",
+    "O",
+    "P",
+    "Q",
+    "R",
+    "S",
+    "T",
+    "U",
+    "V",
+    "W",
+    "X",
+    "Y",
+    "Z",
+    "a",
+    "b",
+    "c",
+    "d",
+    "e",
+    "f",
+    "g",
+    "h",
+    "i",
+    "j",
+    "k",
+    "l",
+    "m",
+    "n",
+    "o",
+    "p",
+    "q",
+    "r",
+    "s",
+    "t",
+    "u",
+    "v",
+    "w",
+    "x",
+    "y",
+    "z"
+  ];
+
+  let id = "";
+
+  /** Generate an id of x characters in length */
+  for (let i = 0; i < length && id.length < length; i++) {
+    const stringCharacter =
+      typeof stringToWeaveIn === "string" &&
+      stringToWeaveIn?.[i] !== undefined &&
+      !/\s/.test(stringToWeaveIn[i])
+        ? stringToWeaveIn[i]
+        : "";
+    id = id + stringCharacter + hashCharacters[Math.floor(Math.random() * hashCharacters.length)];
+  }
+
+  return id.slice(0, length);
+};
+
+export const filterProps = (props: any, regexPattern: RegExp, returnFiltered: boolean = true) => {
+  if (returnFiltered) {
+    return Object.keys(props).reduce((acc: KeyValuePair, key) => {
+      if (regexPattern.test(key)) {
+        acc[key] = props[key];
+      }
+
+      return acc;
+    }, {});
+  } else {
+    return Object.entries(props)
+      .filter(([key]) => !regexPattern.test(key))
+      .reduce(
+        (prevObj, currKeyValPair) => ({ ...prevObj, [currKeyValPair[0]]: currKeyValPair[1] }),
+        {}
+      );
+  }
+};
+
+export const debounce = (fn: (...args: unknown[]) => unknown, delay: number) => {
+  let timeout: undefined | ReturnType<typeof setTimeout>;
+
+  return function executedFunction(...args: unknown[]) {
+    const later = () => {
+      clearTimeout(timeout);
+      fn(...args);
+    };
+
+    clearTimeout(timeout);
+
+    timeout = setTimeout(later, delay);
+  };
+};
+
+export const throttle = (fn: (...args: unknown[]) => unknown, delay: number) => {
+  let lastTime = 0;
+
+  return function () {
+    const now = Date.now();
+
+    if (now - lastTime >= delay) {
+      fn();
+      lastTime = now;
+    }
+  };
+};
+
+const isEqual = (x: any, y: any): boolean => {
+  const typesCoincide = x && y && typeof x === "object" && typeof y === "object";
+  return typesCoincide
+    ? Object.keys(x).length === Object.keys(y).length &&
+        Object.keys(x).every(key => isEqual(x[key], y[key]))
+    : x === y;
+};
+
+export const areArraysDifferent = (
+  arr1: Record<string, any>[],
+  arr2: Record<string, any>[],
+  key: string
+) => {
+  if (arr1.length !== arr2.length) {
+    return true;
+  } else {
+    const firstFilteredArray = arr1.filter(arr1Item =>
+      arr2.some((arr2Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))
+    );
+    const secondFilteredArray = arr2.filter(arr2Item =>
+      arr1.some((arr1Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))
+    );
+
+    return !!firstFilteredArray.length || !!secondFilteredArray.length;
+  }
+};
+
+/** Source: https://stackoverflow.com/a/42769683/5084110 */
+export const remToPx = (rem: number): number => {
+  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+};
+
+export const isJsonString = (str: any) => {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+};
+
+type ObjectType = { [key: string]: any };
+
+export const deepMerge = <T extends object>(obj1: ObjectType, obj2: ObjectType | false): T => {
+  if (!obj2) {
+    return obj1 as T;
+  }
+
+  const result: ObjectType = { ...obj1 };
+
+  for (const key in obj2) {
+    if (Object.prototype.hasOwnProperty.call(obj2, key)) {
+      if (
+        typeof obj2[key] === "object" &&
+        obj2[key] !== null &&
+        Object.prototype.hasOwnProperty.call(obj1, key) &&
+        !Array.isArray(obj2[key])
+      ) {
+        result[key] = deepMerge(obj1[key], obj2[key]);
+      } else {
+        result[key] = obj2[key];
+      }
+    }
+  }
+
+  return result as T;
+};
+
+export const escapeRegExp = (str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");

package/src/util/unitTestUtils.ts

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+export class MockDOMRect implements DOMRect {
+  constructor(
+    public x: number = 0,
+    public y: number = 0,
+    public width: number = 0,
+    public height: number = 0,
+    public top: number = y,
+    public right: number = x + width,
+    public bottom: number = y + height,
+    public left: number = x
+  ) {}
+
+  toJSON() {
+    return { ...this };
+  }
+}