@hbuesing/ui-library 3.0.0 → 3.0.1

package/src/components/images/svgIcon.tsx

@@ -1,39 +0,0 @@
-import React, {ComponentPropsWithoutRef, CSSProperties, useRef} from 'react';
-import useInjectStyleSheet from "utils/useInjectStyles";
-
-interface ISvgIcon extends ComponentPropsWithoutRef<'svg'>{
-  src    : string;
-  color? : string | undefined;
-  height?: number;
-  width? : number;
-}
-
-export function SVG(props: ISvgIcon) {
-  const {
-    src,
-    color,
-    height,
-    width
-  } = props;
-
-  if (!src.includes('.svg')) {
-    throw new Error('Provided src is not an svg image');
-  }
-
-  const nodeRef = useRef<HTMLDivElement>(null);
-  useInjectStyleSheet(nodeRef);
-
-  const style: CSSProperties = {
-    fill: color,
-    height: `${height}px`,
-    width: `${width}px`
-  }
-
-  return (
-    <div ref={nodeRef} className={'uil-svg-wrapper'}>
-      <svg aria-hidden={true} className={'uil-svg'} style={style}>
-        <use href={src}/>
-      </svg>
-    </div>
-  );
-}

package/src/components/input/baseInput.tsx

@@ -1,48 +0,0 @@
-import React, {ComponentPropsWithoutRef, useRef} from 'react';
-import {SVG} from 'components/images/svgIcon';
-import useInjectStyleSheet from "../../utils/useInjectStyles";
-
-export interface IBaseInput extends ComponentPropsWithoutRef<'input'> {
-  label       : string;
-  value       : string;
-  valueChanged: (value: string) => void;
-  iconColor?  : string;
-  iconSrc?    : string;
-  inputColor? : string;
-  toggle?     : () => void;
-}
-
-export function BaseInput(props: IBaseInput) {
-  const {
-    iconColor,
-    iconSrc,
-    inputColor,
-    label,
-    toggle,
-    valueChanged,
-    ...inputProps
-  } = props;
-
-  const nodeRef = useRef<HTMLLabelElement>(null);
-  useInjectStyleSheet(nodeRef);
-
-  return (
-    <label className={'uil-input-wrapper'} htmlFor={inputProps.id} ref={nodeRef}>
-      <input
-        className={'uil-input uil-font-base'}
-        onChange={(e) => valueChanged(e.target.value)}
-        placeholder={label}
-        style={{color: inputColor}}
-        {...inputProps}
-      />
-
-      {iconSrc &&
-        <div className={'uil-icon'} onClick={toggle}>
-          <SVG src={iconSrc} width={24} height={24} color={iconColor}/>
-        </div>
-      }
-
-      <span className={'uil-label uil-font-base'} style={{color: inputColor}}>{label}</span>
-    </label>
-  );
-}

package/src/components/input/customInput.tsx

@@ -1,54 +0,0 @@
-import React, {useState} from 'react';
-import {BaseInput, IBaseInput} from './baseInput';
-import {SVG} from 'components/images/svgIcon';
-import {useClickOutsideRef} from 'hooks/clickOutside';
-
-export interface ICustomInput extends IBaseInput {
-  tooltipClose?: string;
-  tooltipIcon? : string;
-  tooltipText? : string;
-}
-
-export function CustomInput(props: ICustomInput) {
-  const {
-    tooltipClose,
-    tooltipIcon,
-    tooltipText,
-    ...inputProps
-  } = props;
-
-  const [tooltipVisible, setTooltipVisible] = useState(false);
-  const ref = useClickOutsideRef<HTMLDivElement>(closeTooltip);
-
-  function closeTooltip() {
-    setTooltipVisible(false);
-  }
-
-  return (
-    <>
-      {tooltipIcon ?
-        <div className={'uil-tooltip-wrapper'} ref={ref}>
-          {tooltipVisible &&
-            <div className={'uil-tooltip'}>
-              {tooltipClose &&
-                <button className={'uil-tooltip-button uil-fit'} onClick={closeTooltip}>
-                  {tooltipClose}
-                </button>
-              }
-
-              <span>{tooltipText}</span>
-            </div>
-          }
-
-          <div className={'uil-tooltip-icon uil-fit'} onClick={() => setTooltipVisible(!tooltipVisible)}>
-            <SVG src={tooltipIcon} height={16} width={16}/>
-          </div>
-
-          <BaseInput {...inputProps}/>
-        </div> :
-
-        <BaseInput {...inputProps}/>
-      }
-    </>
-  );
-}

package/src/components/input/index.ts

@@ -1,2 +0,0 @@
-export * from './customInput';
-export * from './passwordInput';

package/src/components/input/input.scss

@@ -1,142 +0,0 @@
-@use '../variables' as *;
-
-.uil-input-wrapper {
-  position: relative;
-  display: block;
-
-  & .uil-label {
-    position: absolute;
-    top: 25%;
-    left: var(--uil-xxs);
-    cursor: text;
-    font-weight: bold;
-    color: var(--uil-black);
-    background: linear-gradient(0deg, var(--uil-white) 9px, rgba(0,0,0,0) 0%);
-    opacity: .6;
-    padding: 0 var(--uil-xxxs);
-    transition: top .25s ease-in-out;
-  }
-
-  & .uil-input {
-    box-sizing: border-box;
-    width: 100%;
-    color: var(--uil-black);
-    background-color: var(--uil-white);
-    border: 1px solid var(--uil-black);
-    border-radius: 0;
-    padding: var(--uil-xs);
-
-    //hide placeholder as it is only needed for stylesheet rules
-    &::placeholder {
-      color: transparent;
-      width: 0;
-      height: 0;
-    }
-
-    &:focus {
-      outline: 1px solid var(--uil-outline-focus);
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      border: 2px solid var(--uil-outline-disabled);
-      background-color: var(--uil-grey);
-      color: var(--uil-grey-dark);
-
-      & ~ .uil-label {
-        cursor: not-allowed;
-        background: transparent;
-        color: var(--uil-grey-dark);
-      }
-
-      & ~ .uil-icon {
-        cursor: not-allowed;
-        fill: var(--uil-grey-dark);
-      }
-
-      &:not(:placeholder-shown) ~ .uil-label {
-        background: linear-gradient(0deg, var(--uil-grey) 8px, rgba(0,0,0,0) 0%);
-      }
-    }
-  }
-
-  & .uil-icon {
-    position: absolute;
-    top: 50%;
-    right: var(--uil-xs);
-    transform: translate(0%, -50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    fill: var(--uil-black);
-    opacity: .5;
-  }
-
-  & .uil-input:focus ~ .uil-label, .uil-input:not(:placeholder-shown) ~ .uil-label {
-    top: -30%;
-    opacity: 1;
-  }
-
-  & .uil-input:focus ~ .uil-icon, .uil-input:not(:placeholder-shown) ~ .uil-icon {
-    opacity: 1;
-  }
-}
-
-.uil-tooltip-wrapper {
-  position: relative;
-
-  .uil-tooltip-icon {
-    cursor: pointer;
-    fill: var(--uil-black-alt);
-    margin-bottom: var(--uil-xxs);
-  }
-
-  & .uil-tooltip-icon:has(~ .uil-input-wrapper > .uil-input:not(:placeholder-shown), ~ .uil-input-wrapper:focus-within) {
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity .3s, visibility .3s;
-  }
-
-  .uil-tooltip {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    box-sizing: border-box;
-    z-index: 1;
-    color: var(--uil-white);
-    background-color: rgba(34, 34, 34, .9);
-    padding: var(--uil-s);
-    border-radius: 3px;
-    font-size: var(--uil-font-small);
-    line-height: var(--uil-font-small);
-
-    .uil-tooltip-button {
-      display: block;
-      margin-left: auto;
-      margin-bottom: var(--uil-m);
-      color: var(--uil-white);
-      background-color: transparent;
-      border: none;
-      padding: 0;
-      border-bottom: 1px solid var(--uil-white);
-      cursor: pointer;
-    }
-  }
-}
-
-.uil-password-rules {
-  margin-top: var(--uil-m);
-  display: flex;
-  flex-direction: column;
-  gap: var(--uil-xs);
-  margin-left: var(--uil-xs);
-
-  .uil-password-rule {
-    display: flex;
-    align-items: center;
-    gap: var(--uil-xxs);
-    font-size: var(--uil-font-small);
-    line-height: var(--uil-font-small);
-  }
-}

package/src/components/input/passwordInput.tsx

@@ -1,118 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import {CustomInput, ICustomInput} from './customInput';
-import {SVG} from 'components/images/svgIcon';
-import {PasswordRuleTypes} from 'enums/passwordRuleTypes';
-
-interface IPasswordInput extends ICustomInput {
-  ruleChecked     : string;
-  rules           : PasswordRule[];
-  ruleUnchecked   : string;
-  capsLockWarning?: string;
-  setFailedRules? : (value: PasswordRule[]) => void;
-}
-
-export interface PasswordRule {
-  label   : string;
-  count?  : number;
-  type?   : PasswordRuleTypes;
-  pattern?: string;
-}
-
-export function PasswordInput(props: IPasswordInput) {
-  const {
-    capsLockWarning,
-    rules,
-    ruleChecked,
-    ruleUnchecked,
-    setFailedRules,
-    ...inputProps
-  } = props;
-
-  const [capsLock, setCapsLock] = useState(false);
-
-  useEffect(() => {
-    validateInput();
-  }, [props.value]);
-
-  useEffect(() => {
-    if (!capsLockWarning) return;
-
-    function setCapsLockState(event: globalThis.KeyboardEvent) {
-      setCapsLock(event.getModifierState?.('CapsLock'));
-    }
-
-    document.addEventListener('keydown', setCapsLockState);
-
-    return () => document.removeEventListener('keydown', setCapsLockState);
-  }, []);
-
-  function validateInput() {
-    const failedRules: PasswordRule[] = [];
-
-    rules.forEach(rule => {
-      if (!checkRule(rule)) {
-        failedRules.push(rule);
-      }
-    });
-
-    setFailedRules?.(failedRules);
-  }
-
-  function checkRule(rule: PasswordRule): boolean {
-    let pattern: string;
-
-    if (rule.type) {
-      if (!rule.count) throw new Error('count must not be empty if a type is provided');
-
-      switch (rule.type) {
-        case PasswordRuleTypes.minLength:
-          pattern = `[a-zA-Z0-9ßÄäÖöÜü._!"\`'#%&§,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{${rule.count},}`;
-          break;
-        case PasswordRuleTypes.maxLength:
-          pattern = `^[a-zA-Z0-9ßÄäÖöÜü._!"\`'#%&,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{0,${rule.count}}$`;
-          break;
-        case PasswordRuleTypes.letters:
-          pattern = `[a-zA-ZßÄäÖöÜü]{${rule.count},}`;
-          break;
-        case PasswordRuleTypes.numbers:
-          pattern = `[0-9]{${rule.count},}`;
-          break;
-        case PasswordRuleTypes.special:
-          pattern = `[._!"\`'#%&§,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{${rule.count},}`;
-          break;
-        case PasswordRuleTypes.upper:
-          pattern = `[A-ZÄÖÜ]{${rule.count},}`;
-          break;
-        default:
-          throw new Error('unrecognized rule type provided');
-      }
-    } else {
-      pattern = rule.pattern ? rule.pattern : '';
-    }
-
-    if (pattern === '') throw new Error('pattern must not be an empty string');
-
-    const reg = new RegExp(pattern);
-    return reg.test(props.value);
-  }
-
-  return (
-    <>
-      <CustomInput {...inputProps}/>
-
-      <div className={'uil-password-rules'}>
-        {capsLock &&
-          <div className={'uil-password-rule'}>{capsLockWarning}</div>
-        }
-
-        {rules.map((rule, idx) =>
-          <div key={idx} className={'uil-password-rule'}>
-            <SVG src={checkRule(rule) ? ruleChecked : ruleUnchecked} height={12} width={12}/>
-
-            <span>{rule.label}</span>
-          </div>
-        )}
-      </div>
-    </>
-  );
-}

package/src/components/modal/baseModal.tsx

@@ -1,105 +0,0 @@
-import React, {useEffect, useRef} from 'react';
-import {ModalType} from 'enums/modalType';
-import {CustomButton} from 'components/button/customButton';
-import useInjectStyleSheet from "utils/useInjectStyles";
-
-interface IBaseModal {
-  close        : () => void;
-  message      : string | string[];
-  title        : string;
-  type         : ModalType;
-  callback?    : (() => void) | undefined;
-  cancelLabel? : string;
-  closeLabel?  : string;
-  confirm?     : () => void;
-  confirmLabel?: string;
-  timeout?     : number;
-}
-
-export function BaseModal(props: IBaseModal) {
-  const {
-    callback,
-    cancelLabel = '',
-    close,
-    closeLabel,
-    confirm,
-    confirmLabel = '',
-    message,
-    timeout,
-    title,
-    type
-  } = props;
-
-  let timer: NodeJS.Timeout | undefined = undefined;
-  const nodeRef = useRef<HTMLDivElement>(null);
-  useInjectStyleSheet(nodeRef);
-
-  useEffect(() => {
-    if (!timeout) return;
-
-    timer = setTimeout(() => {
-      return callback ? callback() : close();
-    }, timeout);
-
-    return () => clearTimeout(timer);
-  },[]);
-
-  function setHeaderClass() {
-    const base = 'uil-header';
-
-    switch (type) {
-      case ModalType.error:
-        return `${base} uil-error`;
-      case ModalType.success:
-        return `${base} uil-success`;
-      case ModalType.warning:
-        return `${base} uil-warning`;
-      default:
-        return base;
-    }
-  }
-
-  //run callback if timeout and callback are set, otherwise close
-  function handleClose() {
-    clearTimeout(timer);
-    timeout && callback ? callback() : close();
-  }
-
-  return (
-    <div className={'uil-modal-wrapper'} ref={nodeRef}>
-      <div className={'uil-modal'}>
-        <div className={setHeaderClass()}>
-          {title}
-        </div>
-
-        {timeout &&
-          <div className={'uil-progress-wrapper'}>
-            <div className={'uil-progress-bar'} style={{animationDuration: `${(timeout / 1000) + .5}s`}}/>
-          </div>
-        }
-
-        <div className={'uil-content'}>
-          <div>
-            {Array.isArray(message) ?
-              message.map((m, idx) => <p key={idx} className={'uil-modal-text'}>{m}</p>)
-              : <p className={'uil-modal-text'}>{message}</p>
-            }
-          </div>
-
-          <div className={`uil-button-wrapper ${type !== ModalType.question ? 'uil-single' : ''}`}>
-            {type !== ModalType.question &&
-              <CustomButton label={closeLabel?? ''} onClick={handleClose} type={'button'}/>
-            }
-
-            {type == ModalType.question && props.confirm &&
-              <>
-                <CustomButton label={confirmLabel} theme={'#00416A'} onClick={confirm} type={'button'}/>
-                <CustomButton label={cancelLabel} onClick={close} type={'button'}/>
-              </>
-            }
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/modal/index.ts

@@ -1,2 +0,0 @@
-export * from './notifyModal';
-export * from './questionModal';

package/src/components/modal/modal.scss

@@ -1,125 +0,0 @@
-@use '../variables' as *;
-
-.uil-modal-wrapper {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 99;
-
-  .uil-modal {
-    position: absolute;
-    top: 30%;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 95%;
-    -webkit-box-shadow: 0 0 6px 0 var(--uil-black);
-    box-shadow: 0 0 6px 0 var(--uil-black);
-    border-radius: 5px;
-    z-index: 999;
-
-    @include uil-desktop {
-      width: 75%;
-    }
-
-    @include uil-widescreen {
-      width: 55%;
-    }
-
-    @include uil-fullHD {
-      width: 35%;
-    }
-
-    .uil-progress-wrapper {
-      background-color: var(--uil-grey-alt);
-
-      & .uil-progress-bar {
-        border: 2px solid var(--uil-grey-dark);
-        animation-duration: 2s;
-        animation-iteration-count: initial;
-        animation-name: uil-progress;
-      }
-    }
-
-    @keyframes uil-progress {
-      0% {
-        width: 100%;
-      }
-
-      100% {
-        width: 0;
-      }
-    }
-
-    .uil-header {
-      color: var(--uil-white);
-      background-color: var(--uil-question);
-      display: flex;
-      justify-content: space-between;
-      font-size: var(--uil-xl);
-      line-height: var(--uil-xl);
-      font-weight: bold;
-      margin: 0;
-      padding: var(--uil-s);
-      border-top-left-radius: 3px;
-      border-top-right-radius: 3px;
-
-      @include uil-desktop {
-        font-size: var(--uil-xxxl);
-        line-height: var(--uil-xxxl);
-        padding: var(--uil-m);
-      }
-
-      &.uil-success {
-        background-color: var(--uil-success);
-      }
-
-      &.uil-error {
-        background-color: var(--uil-error);
-      }
-
-      &.uil-warning {
-        color: var(--uil-black);
-        background-color: var(--uil-warning);
-      }
-    }
-
-    .uil-content {
-      background-color: var(--uil-white);
-      padding: var(--uil-m);
-      border-bottom-left-radius: 3px;
-      border-bottom-right-radius: 3px;
-      display: flex;
-      flex-direction: column;
-      gap: var(--uil-m);
-
-      @include uil-desktop {
-        padding: var(--uil-l);
-        gap: var(--uil-xxxl);
-      }
-
-      .uil-modal-text {
-        font-size: var(--uil-font-small);
-        line-height: var(--uil-font-small);
-        color: var(--uil-black);
-        margin: var(--uil-s) 0;
-
-        @include uil-tablet {
-          font-size: var(--uil-font-base);
-          line-height: var(--uil-font-base);
-        }
-      }
-
-      .uil-button-wrapper {
-        display: flex;
-        justify-content: space-between;
-
-        &.uil-single {
-          justify-content: end;
-        }
-      }
-    }
-  }
-}

package/src/components/modal/notifyModal.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import {BaseModal} from './baseModal';
-import {ModalType} from 'enums/modalType';
-
-export interface INotifyModal {
-  close     : () => void;
-  closeLabel: string;
-  modalType : 'success' | 'warning' | 'error';
-  message   : string | string[];
-  title     : string;
-  callback? : (() => void) | undefined;
-  timeout?  : number;
-}
-
-export function NotifyModal(props: INotifyModal) {
-  const {
-    modalType,
-    ...modalProps
-  } = props;
-
-  return (
-    <BaseModal type={modalType as ModalType} {...modalProps}/>
-  );
-}

package/src/components/modal/questionModal.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import {BaseModal} from './baseModal';
-import {ModalType} from 'enums/modalType';
-
-export interface IQuestionModal {
-  cancel      : () => void;
-  cancelLabel : string;
-  confirm     : () => void;
-  confirmLabel: string;
-  message     : string | string[];
-  title       : string;
-}
-
-export function QuestionModal(props: IQuestionModal) {
-  const {
-    cancel,
-    ...modalProps
-  } = props;
-
-  return (
-    <BaseModal type={ModalType.question} close={cancel} {...modalProps}/>
-  );
-}