@hbuesing/ui-library 2.0.0 → 3.0.0

package/README.md

@@ -1,2 +1,4 @@
 # ui-library
-Collection of reusable ui components for react based applications
+
+Sourcecode of the package
+

package/package.json

@@ -1,63 +1,32 @@
 {
   "private": false,
   "name": "@hbuesing/ui-library",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Collection of reusable ui components for react based applications",
   "source": "src/index.ts",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.modern.mjs"
-    },
-    "./dist/*.css": {
-      "import": "./dist/index.css",
-      "require": "./dist/index.css"
-    }
-  },
-  "files": [
-    "dist/*"
-  ],
+  "exports": "./dist/bundle.mjs",
   "scripts": {
     "clean": "rimraf ./dist && mkdir dist",
     "lint": "eslint src",
-    "lint:prod": "eslint src --max-warnings 0",
-    "build": "microbundle build --jsx react --globals react/jsx-runtime=jsxRuntime",
-    "dev": "microbundle -w --jsx react",
+    "lint:nw": "eslint src --max-warnings 0",
+    "build": "microbundle build --output ./dist/bundle.mjs --no-pkg-main --generateTypes true --format modern --jsx react --globals react/jsx-runtime=jsxRuntime --css inline",
+    "build:uil": "microbundle build --output ../website/src/uil-bundle/bundle.mjs --no-pkg-main --generateTypes true --format modern --jsx react --globals react/jsx-runtime=jsxRuntime --css inline",
+    "dev": "microbundle -w --output ./dist/bundle.mjs --no-pkg-main --generateTypes true --format modern --jsx react --globals react/jsx-runtime=jsxRuntime --css inline",
     "stats": "microbundle --visualize"
   },
-  "author": "Henrik Buesing",
   "license": "MIT",
   "homepage": "https://github.com/HenrikBuesing/ui-library/tree/main#README.md",
   "bugs": "https://github.com/HenrikBuesing/ui-library/issues",
   "repository": {
     "type": "git",
-    "url": "https://github.com/HenrikBuesing/ui-library.git"
+    "url": "https://github.com/HenrikBuesing/ui-library.git",
+    "directory": "ui-library"
   },
   "peerDependencies": {
     "react": "^18.0.0"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.0.3",
-    "@eslint/js": "^9.5.0",
-    "@types/react": "^18.3.3",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.3",
-    "globals": "^15.6.0",
     "microbundle": "^0.15.1",
-    "react": "^18.3.1",
-    "rimraf": "^5.0.7",
-    "sass": "^1.77.6",
-    "typescript": "^5.5.2",
-    "typescript-eslint": "^7.14.1"
-  },
-  "keywords": [
-    "next",
-    "react",
-    "ui",
-    "ui-library"
-  ]
+    "rimraf": "^6.0.1"
+  }
 }

package/src/components/button/button.scss

@@ -0,0 +1,25 @@
+@use '../variables' as *;
+
+.uil-button {
+  letter-spacing: 1px;
+  color: var(--uil-black);
+  background-color: var(--uil-white);
+  border: 1px solid var(--uil-black);
+  border-radius: 2px;
+  cursor: pointer;
+  padding: var(--uil-xs) var(--uil-s);
+  -webkit-box-shadow: 0 0 3px 0 var(--uil-black-alt);
+  box-shadow: 0 0 3px 0 var(--uil-black-alt);
+
+  &.uil-disabled {
+    background-color: var(--uil-grey-dark);
+    color: var(--uil-grey);
+    border: transparent;
+  }
+
+  &.uil-small {
+    font-size: var(--uil-font-small);
+    line-height: var(--uil-font-small);
+    padding: var(--uil-xxs) var(--uil-xs);
+  }
+}

package/src/components/button/customButton.tsx

@@ -0,0 +1,84 @@
+import React, {ComponentPropsWithoutRef, CSSProperties, useRef} from 'react';
+import useInjectStyleSheet from "utils/useInjectStyles";
+import {useGetColor} from 'hooks/getColor';
+
+type HEXColor = `#${string}`
+
+interface ICustomButton extends ComponentPropsWithoutRef<'button'> {
+  label    : string;
+  disabled?: boolean;
+  small?   : boolean;
+  theme?   : HEXColor | 'success' | 'warning' | 'error';
+}
+
+export function CustomButton(props: ICustomButton) {
+  const {
+    disabled = false,
+    label,
+    small = false,
+    theme,
+    ...buttonProps
+  } = props;
+
+  const nodeRef = useRef<HTMLButtonElement>(null);
+  useInjectStyleSheet(nodeRef);
+
+  function getStyle(): CSSProperties | undefined {
+    if (disabled || !theme) return undefined;
+
+    if (theme.includes('#')) {
+      return {
+        color: useGetColor(theme),
+        backgroundColor: theme,
+        border: 'transparent'
+      };
+    }
+
+    switch (theme) {
+      case 'success':
+        return {
+          color: useGetColor('#006A4E'),
+          backgroundColor: '#006A4E',
+          border: 'transparent'
+        };
+      case 'warning':
+        return {
+          color: '#000000',
+          backgroundColor: '#FFD700',
+          border: 'transparent'
+        };
+      case 'error':
+        return {
+          color: useGetColor('#800020'),
+          backgroundColor: '#800020',
+          border: 'transparent'
+        };
+      default:
+        throw new Error('invalid theme provided')
+    }
+  }
+
+  function getClassName(): string {
+    const base = 'uil-button uil-fit'
+
+    if (disabled && !small) {
+      return `${base} uil-font-base uil-disabled`;
+    }
+
+    if (disabled && small) {
+      return `${base} uil-disabled uil-small`;
+    }
+
+    if (small) {
+      return `${base} uil-small`;
+    }
+
+    return `${base} uil-font-base`;
+  }
+
+  return (
+    <button className={getClassName()} style={getStyle()} disabled={disabled} {...buttonProps} ref={nodeRef}>
+      {label}
+    </button>
+  );
+}

package/src/components/button/index.ts

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

package/src/components/checkbox/checkbox.scss

@@ -0,0 +1,13 @@
+@use '../variables' as *;
+
+.uil-check-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--uil-s);
+  font-size: var(--uil-font-base);
+  line-height: var(--uil-font-base);
+
+  .uil-checkbox {
+    border-radius: 2px;
+  }
+}

package/src/components/checkbox/customCheckBox.tsx

@@ -0,0 +1,35 @@
+import React, {ComponentPropsWithoutRef, ReactNode, useRef} from 'react';
+import useInjectStyleSheet from "utils/useInjectStyles";
+
+interface ICustomCheckbox extends ComponentPropsWithoutRef<'input'> {
+  checked     : boolean;
+  label?      : string;
+  toggleCheck : (value: boolean) => void;
+  checkColor? : string;
+  children?   : ReactNode;
+}
+
+export function CustomCheckBox(props: ICustomCheckbox) {
+  const {
+    checkColor,
+    checked,
+    toggleCheck,
+    label,
+    children,
+    ...checkProps
+  } = props;
+
+  const nodeRef = useRef<HTMLDivElement>(null);
+  useInjectStyleSheet(nodeRef);
+
+  return (
+    <div className={'uil-check-wrapper'} ref={nodeRef}>
+      <label className={'uil-checkbox uil-check'}>
+        <input type={'checkbox'} checked={checked} onChange={() => {toggleCheck(!checked)}} {...checkProps}/>
+        <div className={'uil-checkmark'} style={{backgroundColor: checkColor}}/>
+      </label>
+
+      {children ? children : <span onClick={() => toggleCheck(!checked)} style={{cursor: 'pointer', userSelect: 'none'}}>{label}</span>}
+    </div>
+  );
+}

package/src/components/checkbox/index.ts

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

package/src/components/global.scss

@@ -0,0 +1,60 @@
+@use "variables" as *;
+
+.uil-fit {
+  height: fit-content;
+  width: fit-content;
+}
+
+.uil-font-base {
+  font-size: var(--uil-font-base);
+  line-height: var(--uil-font-base);
+}
+
+.uil-check {
+  position: relative;
+  display: block;
+  cursor: pointer;
+  font-size: var(--uil-font-small);
+  line-height: var(--uil-font-small);
+  min-height: var(--uil-l);
+  min-width: var(--uil-l);
+  user-select: none;
+  border: 2px solid var(--uil-black-alt);
+  box-sizing: border-box;
+
+  &:has(input:disabled) {
+    background-color: var(--uil-grey);
+    border-color: var(--uil-grey-dark);
+  }
+
+  input {
+    position: absolute;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+    opacity: 0;
+
+    &:checked {
+      ~ .uil-checkmark {
+        transform: scale(1);
+      }
+    }
+
+    &:disabled {
+      ~ .uil-checkmark {
+        background-color: var(--uil-grey-dark);
+      }
+    }
+  }
+
+  .uil-checkmark {
+    position: absolute;
+    top: 25%;
+    left: 25%;
+    background-color: var(--uil-black-alt);
+    width: var(--uil-xs);
+    height: var(--uil-xs);
+    transform: scale(0);
+    transition: .1s ease;
+  }
+}

package/src/components/images/images.scss

@@ -0,0 +1,12 @@
+@use '../variables' as *;
+
+.uil-svg-wrapper {
+  display: flex;
+  height: fit-content;
+  width: fit-content;
+
+  .uil-svg {
+    height: var(--uil-xxxl);
+    width: var(--uil-xxxl);
+  }
+}

package/src/components/images/index.ts

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

package/src/components/images/svgIcon.tsx

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,54 @@
+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

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

package/src/components/input/input.scss

@@ -0,0 +1,142 @@
+@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);
+  }
+}