@hbuesing/ui-library 3.0.0 → 3.1.0

package/src/components/radio/customRadio.tsx

@@ -1,72 +0,0 @@
-import React, {useEffect, useRef} from 'react';
-import generateKey from 'utils/generateKey';
-import useInjectStyleSheet from "utils/useInjectStyles";
-
-interface ICustomRadio {
-  options     : RadioOption[];
-  value       : string;
-  valueChanged: (value: string) => void;
-  checkColor? : string;
-  disabled?   : boolean;
-  label?      : string;
-}
-
-export interface RadioOption {
-  label    : string;
-  value    : string;
-  checked? : boolean;
-  disabled?: boolean;
-}
-
-export function CustomRadio(props: ICustomRadio) {
-  const {
-    checkColor,
-    disabled,
-    label,
-    options,
-    value,
-    valueChanged,
-  } = props;
-
-  const nodeRef = useRef<HTMLDivElement>(null);
-  useInjectStyleSheet(nodeRef);
-
-  useEffect(() => {
-    // prevents multiple radio options being checked at the same time
-    options.forEach(option => {
-      if (option.checked) handleRadioChange(option.value);
-    });
-  },[]);
-
-  function handleRadioChange(newValue: string) {
-    if (value === newValue) return;
-
-    valueChanged(newValue);
-  }
-
-  return (
-    <div ref={nodeRef}>
-      {label && <div className={'uil-radio-title'}>{label}</div>}
-
-      <div className={'uil-radio-wrapper'}>
-        {options.map((option, idx) =>
-          <div key={generateKey(idx)} className={'uil-radio-option'}>
-            <label className={'uil-radio uil-check'}>
-              <input
-                name={option.label}
-                type={'radio'}
-                value={option.value}
-                checked={value === option.value || value === '' && option.checked}
-                onChange={() => handleRadioChange(option.value)}
-                disabled={disabled? disabled : option.disabled}
-              />
-              <div className={'uil-checkmark uil-radio-check'} style={{backgroundColor: checkColor}}/>
-            </label>
-
-            <span className={'uil-font-base'}>{option.label}</span>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/radio/index.ts

@@ -1 +0,0 @@
-export * from './customRadio';

package/src/components/radio/radio.scss

@@ -1,28 +0,0 @@
-@use "../variables" as *;
-
-.uil-radio-title {
-  display: block;
-  font-size: var(--uil-xl);
-  line-height: var(--uil-xl);
-  margin-bottom: var(--uil-m);
-}
-
-.uil-radio-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--uil-m);
-
-  .uil-radio-option {
-    display: flex;
-    align-items: center;
-    gap: .25rem;
-
-    .uil-radio {
-      border-radius: 50%;
-
-      .uil-radio-check {
-        border-radius: 50%;
-      }
-    }
-  }
-}

package/src/components/variables.scss

@@ -1,61 +0,0 @@
-:root {
-  --uil-black: #000000;
-  --uil-black-alt: #222222;
-
-  --uil-white: #ffffff;
-
-  --uil-grey: #f3f3f3;
-  --uil-grey-alt: #cfcfcf;
-  --uil-grey-dark: #878787;
-
-  --uil-outline-focus: #1E90FFFF;
-  --uil-outline-disabled: #8B0000FF;
-
-  --uil-success: #006A4E;
-  --uil-error: #800020;
-  --uil-question: #00416A;
-  --uil-warning: #FFD700;
-
-  --uil-xxxs: .125rem;
-  --uil-xxs: .25rem;
-  --uil-xs: .5rem;
-  --uil-s: .75rem;
-  --uil-m: 1rem;
-  --uil-l: 1.25rem;
-  --uil-xl: 1.5rem;
-  --uil-xxl: 1.75rem;
-  --uil-xxxl: 2rem;
-
-  --uil-font-base: var(--uil-l);
-  --uil-font-small: var(--uil-m);
-}
-
-@mixin uil-mobile {
-  @media (max-width: 1024px) {
-    @content
-  }
-}
-
-@mixin uil-tablet {
-  @media (min-width: 760px) {
-    @content
-  }
-}
-
-@mixin uil-desktop {
-  @media (min-width: 1025px) {
-    @content
-  }
-}
-
-@mixin uil-widescreen {
-  @media (min-width: 1250px) {
-    @content
-  }
-}
-
-@mixin uil-fullHD {
-  @media (min-width: 1920px) {
-    @content
-  }
-}

package/src/enums/index.ts

@@ -1 +0,0 @@
-export * from './passwordRuleTypes';

package/src/enums/modalType.ts

@@ -1,6 +0,0 @@
-export enum ModalType {
-  error = 'error',
-  question = 'question',
-  success = 'success',
-  warning = 'warning',
-}

package/src/enums/passwordRuleTypes.ts

@@ -1,8 +0,0 @@
-export enum PasswordRuleTypes {
-  minLength = 1,
-  maxLength,
-  letters,
-  numbers,
-  special,
-  upper
-}

package/src/hooks/clickOutside.ts

@@ -1,25 +0,0 @@
-import {useEffect, useRef} from 'react';
-
-export function useClickOutsideRef<T extends HTMLElement>(callback: () => void) {
-  const ref = useRef<T>(null);
-
-  useEffect(() => {
-    if (!ref.current) return;
-
-    function handleClickOutside (event: MouseEvent | TouchEvent) {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        callback();
-      }
-    }
-
-    document.addEventListener('click', handleClickOutside);
-    document.addEventListener('touchend', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-      document.removeEventListener('touchend', handleClickOutside);
-    };
-  }, [callback]);
-
-  return ref;
-}

package/src/hooks/getColor.ts

@@ -1,16 +0,0 @@
-export function useGetColor(backgroundColor: string) {
-  if (backgroundColor.length !== 7) throw new Error('provided hex color must be 7 characters (including #) long');
-
-  backgroundColor = backgroundColor.substring(1, 7);
-  const uiColors = [
-    parseInt(backgroundColor.substring(0, 2), 16) / 255,
-    parseInt(backgroundColor.substring(2, 4), 16) / 255,
-    parseInt(backgroundColor.substring(4, 6), 16) / 255
-  ];
-  const c = uiColors.map(col => {
-    return col <= 0.03928? (col / 12.92) : Math.pow((col + 0.055) / 1.055, 2.4);
-  });
-  const contrast = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
-
-  return contrast > 0.179 ? '#000000' : '#ffffff';
-}

package/src/index.ts

@@ -1,9 +0,0 @@
-export {CustomButton} from './components/button/index';
-export {CustomCheckBox} from './components/checkbox/index';
-export {SVG} from './components/images/index';
-export {CustomInput, PasswordInput, PasswordRule} from './components/input/index';
-export {NotifyModal, QuestionModal} from './components/modal/index';
-export {CustomRadio, RadioOption} from './components/radio/index';
-
-export {useClickOutsideRef, useGetColor} from './hooks/index';
-export {PasswordRuleTypes} from './enums/index';

package/src/utils/generateKey.ts

@@ -1,3 +0,0 @@
-export default function generateKey(prefix: string | number) {
-  return `${prefix}-${new Date().getTime()}`;
-}

package/src/utils/styles.scss

@@ -1,7 +0,0 @@
-@use "../components/button/button";
-@use "../components/checkbox/checkbox";
-@use "../components/images/images";
-@use "../components/input/input";
-@use "../components/modal/modal";
-@use "../components/radio/radio";
-@use "../components/global";

package/src/utils/styles.scss.d.ts

@@ -1,2 +0,0 @@
-declare const cssString: string;
-export default cssString;

package/src/utils/useInjectStyles.ts

@@ -1,19 +0,0 @@
-import {RefObject, useEffect} from "react";
-import styles from "./styles.scss";
-
-const injectedStyles: Document[] = [];
-
-export default function useInjectStyleSheet(nodeRef: RefObject<HTMLElement>): void {
-  useEffect(() => {
-    const parentDocument = nodeRef.current ? nodeRef.current.ownerDocument : document;
-
-    if (typeof parentDocument !== "undefined" && !injectedStyles.includes(parentDocument)) {
-      const styleElement = parentDocument.createElement("style");
-
-      styleElement.innerHTML = styles;
-      injectedStyles.push(parentDocument);
-
-      parentDocument.head.appendChild(styleElement);
-    }
-  }, []);
-}

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "outDir": "./dist/",
-    "sourceMap": true,
-    "module": "ESNext",
-    "target": "ESNext",
-    "moduleResolution": "Node",
-    "jsx": "react",
-    "jsxFactory": "",
-    "jsxFragmentFactory": "",
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "allowSyntheticDefaultImports": true,
-    "strictNullChecks": true,
-    "exactOptionalPropertyTypes": true,
-    "declaration": true,
-    "baseUrl": "./src"
-  },
-  "include": [
-    "./src/**/*"
-  ]
-}