@veracity/vui 0.7.1 → 1.1.0

package/src/utils/dom.ts

@@ -0,0 +1,29 @@
+export const addElement = (id: string): HTMLElement => {
+  const element = document.createElement('div')
+  element.setAttribute('id', id)
+  return element
+}
+
+export const removeElement = (id: string): void => {
+  const element = document.getElementById(id)
+  if (element) element.remove()
+}
+
+export const addElementClass = (id: string, className: string): void => {
+  const element = document.getElementById(id)
+  if (element) element.classList.add(className)
+}
+
+export const removeElementClass = (id: string, className: string): void => {
+  const element = document.getElementById(id)
+  if (element) element.classList.remove(className)
+}
+
+export const appendToBody = (rootElem: HTMLElement) => {
+  document.body.appendChild(rootElem)
+}
+
+export const addContainer = (id: string): void => {
+  const toastContainer = document.getElementById(id)
+  if (!toastContainer) appendToBody(addElement(id))
+}

package/src/utils/function.ts

@@ -0,0 +1,18 @@
+import { isFunction } from './assertion'
+import { AnyFunction } from './types'
+
+/** Calls each provided function with the same set of arguments. Useful for merging multiple callbacks. */
+export function callAll(...fns: (AnyFunction | undefined)[]) {
+  return (...args: any[]) => fns.forEach(fn => typeof fn === 'function' && fn(...args))
+}
+
+// Used as a safe default to be called when no function is provided.
+export function noop() {}
+
+/**
+ * If given value is a function, it's called with any additional arguments provided.
+ * Otherwise, the provided value is returned directly.
+ */
+export function runIfFn<T, U>(valueOrFn: T | ((...fnArgs: U[]) => T), ...args: U[]): T {
+  return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn
+}

package/src/utils/index.ts

@@ -0,0 +1,11 @@
+export * from './array'
+export * from './assertion'
+export * from './consts'
+export * from './dom'
+export * from './function'
+export * from './number'
+export * from './object'
+export * from './react'
+export * from './styles'
+export * from './types'
+export * from './uid'

package/src/utils/number.ts

@@ -0,0 +1,4 @@
+/** Returns a random integer within the provided range. Default: 0 - 1000000 */
+export function random(start = 0, end = 1000000) {
+  return Math.floor(Math.random() * end) + start
+}

package/src/utils/object.ts

@@ -0,0 +1,67 @@
+import { isArray, isObject } from './assertion'
+import { Dict } from './types'
+
+/** Removes keys from an object if their value is undefined. */
+export function filterUndefined<T = Dict>(object: T) {
+  return objectFilter(object, val => val !== null && val !== undefined)
+}
+
+/**
+ * Recursively deep merges two objects in an immutable fashion, following these rules:
+ * - Key exists in target and both keys are objects => merge
+ * - Key exists in target and both keys are arrays => concat (not unique)
+ * - Key isn't an object, an array or doesn't exist in target => override
+ */
+export function merge<S1 extends Dict>(s1: S1): S1
+export function merge<S1 extends Dict, S2 extends Dict>(s1: S1, s2: S2): S1 & S2
+export function merge<S1 extends Dict, S2 extends Dict, S3 extends Dict>(s1: S1, s2: S2, s3: S3): S1 & S2 & S3
+export function merge<S1 extends Dict, S2 extends Dict, S3 extends Dict, S4 extends Dict>(
+  s1: S1,
+  s2: S2,
+  s3: S3,
+  s4: S4
+): S1 & S2 & S3 & S4
+export function merge(...sources: any[]): any {
+  const target = {} as Dict
+
+  sources.forEach(source => {
+    if (!isObject(source)) return
+
+    Object.keys(source).forEach(key => {
+      if (key === '__proto__') return
+
+      if (isObject(target[key]) && isObject(source[key])) {
+        // Merge objects
+        target[key] = merge(target[key], source[key])
+      } else if (isArray(target[key]) && isArray(source[key])) {
+        // Concat arrays
+        target[key] = target[key].concat(source[key])
+      } else if (source[key] !== undefined) {
+        // Pick source if it exists
+        target[key] = source[key]
+      }
+    })
+  })
+
+  return target
+}
+
+/**
+ * Returns the items of an object that meet the condition specified in a callback function.
+ */
+export function objectFilter<T extends Dict, K extends keyof T>(
+  object: T,
+  fn: (value: any, key: string, object: T) => boolean
+) {
+  const result: Partial<T> = {}
+
+  Object.keys(object).forEach(key => {
+    const value = object[key]
+    const shouldPass = fn(value, key, object)
+    if (shouldPass) {
+      result[key as K] = value
+    }
+  })
+
+  return result
+}

package/src/utils/react.ts

@@ -0,0 +1,172 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+import React, {
+  DependencyList,
+  Dispatch,
+  RefObject,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react'
+
+import { isArray, isFunction } from './assertion'
+import { runIfFn } from './function'
+import { AnyFunction, CreateContextOptions, CreateContextReturn } from './types'
+
+type ReactRef<T> = React.Ref<T> | React.RefObject<T> | React.MutableRefObject<T>
+
+/**
+ * Assigns given value to the provided ref.
+ * Supports ref as function (e.g. useState) and classic ref (e.g. useRef).
+ */
+export function assignRef<T = any>(ref: ReactRef<T> | undefined, value: T) {
+  if (ref === null || ref === undefined) return
+
+  if (isFunction(ref)) {
+    ref(value)
+    return
+  }
+
+  try {
+    // @ts-ignore - TS complains about 'current' being read-only
+    ref.current = value
+  } catch (error) {
+    throw new Error(`Cannot assign value '${value}' to ref '${ref}'`)
+  }
+}
+
+/** Generic function to create new Context and context access hook. */
+export function createContext<ContextType>(options: CreateContextOptions = {}) {
+  const {
+    errorMessage = 'Context can only be accessed by components wrapped with the Provider.',
+    isOptional,
+    name
+  } = options
+
+  const Context = React.createContext<ContextType | undefined>(undefined)
+
+  Context.displayName = name
+
+  function useContext() {
+    const context = React.useContext(Context)
+
+    if (!isOptional && context === undefined) throw new Error(errorMessage)
+
+    return context
+  }
+
+  return [Context.Provider, useContext] as CreateContextReturn<ContextType>
+}
+
+/** Assigns a node to all provided refs. */
+export function mergeRefs<T>(...refs: (ReactRef<T> | undefined)[]) {
+  return (node: T | null) => {
+    refs.forEach(ref => assignRef(ref, node))
+  }
+}
+
+// TODO: Bring it from UI-Utils
+/** Returns given callback with a stable reference, but keeps it updated internally. */
+export function useCallbackRef<T extends AnyFunction>(callback?: T, deps: DependencyList = []) {
+  const ref = useRef(callback)
+
+  ref.current = callback
+
+  return useCallback(((...args) => ref.current?.(...args)) as T, deps)
+}
+
+const defaultEvents = ['mousedown', 'touchstart']
+
+// TODO: Bring it from UI-Utils
+/**
+ * Triggers given callback when an event happens outside of a given element.
+ * Event listeners are attached to the window object.
+ * @param ref - element to check click position for
+ * @param callback - function triggered on outside click
+ * @param events - array of events listened for (default: ['mousedown', 'touchstart'])
+ */
+export function useClickOutside(
+  ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],
+  callback?: (event: Event) => void,
+  events: string[] = defaultEvents
+) {
+  const eventsString = JSON.stringify(events)
+  const listener = useCallbackRef((ev: Event) => {
+    const refs = isArray(ref) ? ref : [ref]
+    const target = ev.target as HTMLElement
+    const isClickOutside = refs.every(ref => ref.current && !ref.current.contains(target))
+
+    isClickOutside && callback?.(ev)
+  })
+
+  useEffect(() => {
+    const events: string[] = JSON.parse(eventsString)
+
+    events.forEach(event => window.addEventListener(event, listener))
+
+    return () => {
+      events.forEach(event => window.removeEventListener(event, listener))
+    }
+  }, [eventsString, ref])
+}
+
+export type UseControlledProps<T> = {
+  defaultValue?: T
+  onChange?: (value: T) => void
+  value?: T
+}
+
+// TODO: Move to ui-utils
+/** Supports state management in components that can be controlled or uncontrolled. */
+export function useControlled<T>(props: UseControlledProps<T>) {
+  const { defaultValue, onChange: onChangeProp, value: valueProp } = props
+  const [valueState, setValue] = useState(defaultValue)
+
+  const isControlled = valueProp !== undefined
+  const value = isControlled ? valueProp : valueState
+
+  /** Triggers the external callback with the new value. In uncontrolled mode, updates state. */
+  const onChange = useCallbackRef((next: SetStateAction<T>) => {
+    const newValue = runIfFn(next)
+
+    if (!isControlled) setValue(newValue)
+
+    onChangeProp?.(newValue)
+  })
+
+  /** In uncontrolled mode, sets the state to the default value. */
+  const reset = useCallbackRef(() => {
+    !isControlled && defaultValue && onChange(defaultValue)
+  })
+
+  return [value, onChange, { isControlled, reset }] as [
+    T,
+    Dispatch<SetStateAction<T>>,
+    { isControlled: boolean; reset: () => void }
+  ]
+}
+
+/** Returns an array with each prefix added to the id. Useful for aria attributes in compound components. */
+export function useIds(id: string, prefixes: string[]) {
+  return prefixes.map(prefix => `${prefix}-${id}`)
+}
+
+// TODO: Bring it from ui-utils
+/**
+ * Provides a function, which can be called to check if component using the hook is mounted or unmounted.
+ */
+export function useIsMounted() {
+  const isMounted = useRef(false)
+
+  useEffect(() => {
+    isMounted.current = true
+
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
+
+  return useCallback(() => isMounted.current, [])
+}

package/src/utils/readme.md

@@ -0,0 +1,9 @@
+# Contents
+
+- Plain JS utilities and helpers
+- React-related utilities
+- General utility types
+
+# Description
+
+This folder includes simple utilities, transformers and helpers functions inteded for internal library usage. Utilities are divided into several files based on their purpose and context.

package/src/utils/styles.ts

@@ -0,0 +1,30 @@
+/** Concatenates individual className arguments and returns a single string. */
+export function cs(...classNames: any[]) {
+  return classNames.filter(Boolean).join(' ')
+}
+
+/** Converts hex color value to rgb with optional alpha property. */
+export function hexToRGBA(hex: string, alpha?: number) {
+  let hexStr = hex
+
+  if (hexStr.charAt(0) === '#') {
+    hexStr = hexStr.slice(1)
+  }
+
+  if (hexStr.length < 4) {
+    hexStr = hexStr
+      .split('')
+      .map(char => char + char)
+      .join('')
+  }
+
+  const r = parseInt(hexStr.slice(0, 2), 16)
+  const g = parseInt(hexStr.slice(2, 4), 16)
+  const b = parseInt(hexStr.slice(4, 6), 16)
+
+  if (alpha !== undefined) {
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  } else {
+    return `rgb(${r}, ${g}, ${b})`
+  }
+}

package/src/utils/types.ts

@@ -0,0 +1,69 @@
+import React, { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react'
+
+/** Type for a a no-op function stub. */
+export type AnyFunction = (...args: any[]) => any
+
+/** Type for any number without breaking autocompletion. */
+export type AnyNumber = number & {}
+
+/** Type for any string without breaking autocompletion. */
+export type AnyString = string & {}
+
+/** Type of change event defaulted to input element */
+export type ChangeEvent<T = HTMLInputElement> = React.ChangeEvent<T>
+
+/** Type of change event handler defaulted to input element */
+export type ChangeEventHandler<T = HTMLInputElement> = React.ChangeEventHandler<T>
+
+export type CreateContextOptions = {
+  /** Message displayed when context is used outside of the provider */
+  errorMessage?: string
+  /** Accessing context outside of provider won't throw error */
+  isOptional?: boolean
+  /** Name of the context */
+  name?: string
+}
+
+/** Return value of the createContext function. */
+export type CreateContextReturn<T> = [React.Provider<T>, () => T]
+
+/** Basic dictionary typing. */
+export type Dict<T = any> = Record<string, T>
+
+/** Classic application's environment names. */
+export type Environment = 'Prod' | 'Stag' | 'Test'
+
+/** Type of blur/focus event defaulted to any html element */
+export type FocusEvent<T = HTMLElement> = React.FocusEvent<T>
+
+/** Type of blur/focus event handler defaulted to any html element */
+export type FocusEventHandler<T = HTMLElement> = React.FocusEventHandler<T>
+
+/** Type of keyboard event defaulted to any html element */
+export type KeyboardEvent<T = HTMLElement> = React.KeyboardEvent<T>
+
+/** Type of keyboard event handler defaulted to any html element */
+export type KeyboardEventHandler<T = HTMLElement> = React.KeyboardEventHandler<T>
+
+/** Type of mouse event defaulted to any html element */
+export type MouseEvent<T = HTMLElement> = React.MouseEvent<T>
+
+/** Type of mouse event handler defaulted to any html element */
+export type MouseEventHandler<T = HTMLElement> = React.MouseEventHandler<T>
+
+/** Merges component/element base props and custom props */
+export type PropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithoutRef<C>, Props>
+
+/** Merges component/element base props and custom props including ref */
+export type RefPropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithRef<C>, Props>
+
+/** Render props of component's children. */
+export type RenderProps<P> = React.ReactNode | ((props: P) => React.ReactNode)
+
+/** Merges props definitions, overriding source keys */
+export type RightJoinProps<SourceProps, OverrideProps> = Omit<SourceProps, keyof OverrideProps> & OverrideProps
+
+export type Sort<T = string> = {
+  key: T
+  order: 'asc' | 'desc'
+}

package/src/utils/uid.ts

@@ -0,0 +1,2 @@
+export const uid = (prefix?: string) =>
+  `${prefix ? `${prefix}_` : ''}${Date.now().toString(36) + Math.random().toString(36).substr(2)}`

package/avatar/avatar.d.ts

@@ -1,5 +0,0 @@
-import { AvatarProps } from './avatar.types';
-export declare const AvatarBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
-/** Displays user data, such as name initials or profile image. */
-export declare const Avatar: import("../core").VuiComponent<"span", AvatarProps>;
-export default Avatar;

package/avatar/avatar.js

@@ -1,62 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = exports.AvatarBase = void 0;
-var react_1 = __importDefault(require("react"));
-var core_1 = require("../core");
-var icon_1 = __importDefault(require("../icon"));
-var image_1 = __importDefault(require("../image"));
-var utils_1 = require("../utils");
-var helpers_1 = require("./helpers");
-exports.AvatarBase = core_1.styled.spanBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tfont-weight: medium;\n\tjustify-content: center;\n\tline-height: normal;\n\toutline: none;\n\toverflow: hidden;\n\ttransition-duration: fast;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tfont-weight: medium;\n\tjustify-content: center;\n\tline-height: normal;\n\toutline: none;\n\toverflow: hidden;\n\ttransition-duration: fast;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n"
-    /** Displays user data, such as name initials or profile image. */
-])));
-/** Displays user data, such as name initials or profile image. */
-exports.Avatar = (0, core_1.vui)(function (props, ref) {
-    var _a = (0, core_1.omitThemingProps)(props), children = _a.children, className = _a.className, _b = _a.getInitials, getInitials = _b === void 0 ? helpers_1.defaultGetInitials : _b, icon = _a.icon, _c = _a.isInteractive, isInteractive = _c === void 0 ? props.onClick !== undefined : _c, isSquare = _a.isSquare, _d = _a.name, name = _d === void 0 ? '' : _d, src = _a.src, rest = __rest(_a, ["children", "className", "getInitials", "icon", "isInteractive", "isSquare", "name", "src"]);
-    var _e = (0, core_1.useStyleConfig)('Avatar', props), activeBg = _e.activeBg, h = _e.h, hoverBg = _e.hoverBg, iconSize = _e.iconSize, styles = __rest(_e, ["activeBg", "h", "hoverBg", "iconSize"]);
-    var borderRadius = isSquare ? 'lg' : '50%';
-    var initials = getInitials(name);
-    var interactiveProps = isInteractive
-        ? {
-            cursor: 'pointer',
-            hoverBg: hoverBg,
-            activeBg: activeBg,
-            focusRing: 3,
-            tabIndex: 0,
-            userSelect: 'none'
-        }
-        : {};
-    return (react_1.default.createElement(exports.AvatarBase, __assign({ borderRadius: borderRadius, className: (0, utils_1.cs)('vui-avatar', className), h: h, ref: ref, w: h }, styles, interactiveProps, rest), children ? (children) : src ? (react_1.default.createElement(image_1.default, __assign({}, { borderRadius: borderRadius, src: src }))) : icon ? (react_1.default.createElement(icon_1.default, { name: icon, size: iconSize })) : initials ? (initials) : null));
-});
-exports.Avatar.displayName = 'Avatar';
-exports.default = exports.Avatar;
-var templateObject_1;

package/avatar/avatar.types.d.ts

@@ -1,19 +0,0 @@
-import { IconProp } from '../icon';
-import { SystemProps } from '../system';
-import { ThemingProps } from '../theme';
-export declare type AvatarProps = SystemProps & ThemingProps<'Avatar'> & {
-    /** Available theme colors for this component. @default blue */
-    colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
-    /** Custom function to compute initials based on the provided name. */
-    getInitials?: (name: string) => string;
-    /** Renders an icon as the only content. */
-    icon?: IconProp;
-    /** Makes avatar clickable and focusable with correct styling. */
-    isInteractive?: boolean;
-    /** Displays Avatar with slightly rounded corners. */
-    isSquare?: boolean;
-    /** Displays initials of the provided name. */
-    name?: string;
-    /** Displays an image loaded from the given URL. */
-    src?: string;
-};

package/avatar/helpers.d.ts

@@ -1,2 +0,0 @@
-/** Gets initials from the name for the Avatar. */
-export declare function defaultGetInitials(name?: string): string;

package/avatar/helpers.js

@@ -1,26 +0,0 @@
-"use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultGetInitials = void 0;
-/** Gets initials from the name for the Avatar. */
-function defaultGetInitials(name) {
-    if (name === void 0) { name = ''; }
-    var _a = __read(name.split(' '), 2), _b = _a[0], first = _b === void 0 ? '' : _b, _c = _a[1], last = _c === void 0 ? '' : _c;
-    return ("" + first.charAt(0) + last.charAt(0)).toUpperCase();
-}
-exports.defaultGetInitials = defaultGetInitials;

package/avatar/index.js

@@ -1,20 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-__exportStar(require("./avatar"), exports);
-var avatar_1 = require("./avatar");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(avatar_1).default; } });
-__exportStar(require("./avatar.types"), exports);

package/avatar/theme.d.ts

@@ -1,53 +0,0 @@
-import { Dict } from '../utils';
-declare function variantSolid(props: Dict): {
-    hoverBg: string;
-    activeBg: string;
-    bg: string;
-    color: string;
-};
-declare function variantSubtle(props: Dict): {
-    hoverBg: string;
-    activeBg: string;
-    bg: string;
-    color: string;
-};
-declare const _default: {
-    baseStyle: {};
-    defaultProps: {
-        colorScheme: string;
-        size: string;
-        variant: string;
-    };
-    sizes: {
-        xs: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
-        };
-        sm: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
-        };
-        md: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
-        };
-        lg: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
-        };
-        xl: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
-        };
-    };
-    variants: {
-        solid: typeof variantSolid;
-        subtle: typeof variantSubtle;
-    };
-};
-export default _default;