@veracity/vui 0.0.15 → 0.2.0

package/utils/assertion.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isString = exports.isReactText = exports.isObject = exports.isNumber = exports.isFunction = exports.isArray = void 0;
+/** Is value an array. */
+function isArray(value) {
+    return Array.isArray(value);
+}
+exports.isArray = isArray;
+/** Is value a function. */
+function isFunction(value) {
+    return typeof value === 'function';
+}
+exports.isFunction = isFunction;
+/** Is value a number. */
+function isNumber(value) {
+    return typeof value === 'number';
+}
+exports.isNumber = isNumber;
+/** Is value an object. */
+function isObject(value) {
+    var type = typeof value;
+    return value !== null && (type === 'object' || type === 'function') && !isArray(value);
+}
+exports.isObject = isObject;
+/** Is value a valid ReactText - string or number */
+function isReactText(value) {
+    return isNumber(value) || isString(value);
+}
+exports.isReactText = isReactText;
+/** Is value a string */
+function isString(value) {
+    return Object.prototype.toString.call(value) === '[object String]';
+}
+exports.isString = isString;

package/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from './assertion';
 export * from './function';
 export * from './object';
 export * from './styles';

package/utils/index.js

@@ -10,6 +10,7 @@ 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);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./assertion"), exports);
 __exportStar(require("./function"), exports);
 __exportStar(require("./object"), exports);
 __exportStar(require("./styles"), exports);

package/utils/object.d.ts

@@ -1,27 +1,14 @@
 import { Dict } from './types';
 /** Removes keys from an object if their value is undefined. */
 export declare const filterUndefined: (object: Dict) => Dict<any>;
-/**
- * Recursively retrieves a nested property of a given object
- * @param object
- * @param path string, such as: 'user.name', or array ['user', 'name']
- * @param separator used when path is a string to split individual keys
- */
-export declare function get(object: Dict, path: string | string[], separator?: string): any | undefined;
-/** Checks if the item is an object. */
-export declare function isObj(item: any): boolean;
 /**
  * Recursively deep merges two objects in an immutable fashion, following these rules:
- * - Property exists in both objects and is an object itself => merge
- * - Property exists in both objects and has the same, non-object type => override
- * - Property doesn't exist in source => override
+ * - 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 declare function mergeWith<TSource extends Dict, TOverride extends Dict>(source: TSource, override: TOverride): TSource & TOverride;
-declare type FilterFn<T> = (value: any, key: string, object: T) => boolean;
+export declare function merge<Target extends Dict, Source extends Dict>(target: Target, source: Source): Target & Source;
 /**
  * Returns the items of an object that meet the condition specified in a callback function.
  */
-export declare function objectFilter<T extends Dict>(object: T, fn: FilterFn<T>): Dict<any>;
-/** Removes given keys from an object. */
-export declare function omit<T extends Dict, K extends keyof T>(object: T, keys: K[]): Omit<T, K>;
-export {};
+export declare function objectFilter<T extends Dict>(object: T, fn: (value: any, key: string, object: T) => boolean): Dict<any>;

package/utils/object.js

@@ -11,60 +11,38 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.omit = exports.objectFilter = exports.mergeWith = exports.isObj = exports.get = exports.filterUndefined = void 0;
+exports.objectFilter = exports.merge = exports.filterUndefined = void 0;
+var assertion_1 = require("./assertion");
 /** Removes keys from an object if their value is undefined. */
 var filterUndefined = function (object) { return objectFilter(object, function (val) { return val !== null && val !== undefined; }); };
 exports.filterUndefined = filterUndefined;
-/**
- * Recursively retrieves a nested property of a given object
- * @param object
- * @param path string, such as: 'user.name', or array ['user', 'name']
- * @param separator used when path is a string to split individual keys
- */
-function get(object, path, separator) {
-    if (separator === void 0) { separator = '.'; }
-    if (!isObj(object))
-        return;
-    var keys = Array.isArray(path) ? path : path.split(separator);
-    return keys.reduce(function (obj, property) { return obj === null || obj === void 0 ? void 0 : obj[property]; }, object);
-}
-exports.get = get;
-/** Checks if the item is an object. */
-function isObj(item) {
-    return item && typeof item === 'object' && item.constructor === Object;
-}
-exports.isObj = isObj;
 /**
  * Recursively deep merges two objects in an immutable fashion, following these rules:
- * - Property exists in both objects and is an object itself => merge
- * - Property exists in both objects and has the same, non-object type => override
- * - Property doesn't exist in source => override
+ * - 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
  */
-function mergeWith(source, override) {
-    var output;
-    if (isObj(source) && isObj(override)) {
-        output = __assign({}, source);
-        Object.keys(override).forEach(function (key) {
+function merge(target, source) {
+    var output = __assign({}, target);
+    if (assertion_1.isObject(target) && assertion_1.isObject(source)) {
+        Object.keys(source).forEach(function (key) {
+            var _a;
             if (key === '__proto__')
                 return;
-            if (key in source) {
-                if (override[key] && typeof source[key] === typeof override[key]) {
-                    if (isObj(override[key])) {
-                        output[key] = mergeWith(source[key], override[key]);
-                    }
-                    else {
-                        output[key] = override[key];
-                    }
-                }
+            if (key in target && assertion_1.isObject(target[key]) && assertion_1.isObject(source[key])) {
+                output[key] = merge(target[key], source[key]);
+            }
+            else if (key in target && assertion_1.isArray(target[key]) && assertion_1.isArray(source[key])) {
+                output[key] = (_a = target[key]) === null || _a === void 0 ? void 0 : _a.concat(source[key]);
             }
             else {
-                output[key] = override[key];
+                output[key] = source[key];
             }
         });
     }
     return output;
 }
-exports.mergeWith = mergeWith;
+exports.merge = merge;
 /**
  * Returns the items of an object that meet the condition specified in a callback function.
  */
@@ -80,14 +58,3 @@ function objectFilter(object, fn) {
     return result;
 }
 exports.objectFilter = objectFilter;
-/** Removes given keys from an object. */
-function omit(object, keys) {
-    var result = {};
-    Object.keys(object).forEach(function (key) {
-        if (keys.includes(key))
-            return;
-        result[key] = object[key];
-    });
-    return result;
-}
-exports.omit = omit;

package/utils/types.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+export declare type AnyElement = React.ReactNode & {};
 export declare type AnyNumber = number & {};
 export declare type AnyString = string & {};
 export declare type Dict<T = any> = Record<string, T>;

package/alert/alert.d.ts

@@ -1,13 +0,0 @@
-import { AlertProps } from './alert.types';
-import AlertButton from './alertButton';
-import AlertIcon from './alertIcon';
-import AlertText from './alertText';
-import AlertTitle from './alertTitle';
-import { VuiComponent } from '../core';
-export declare const Alert: VuiComponent<"div", AlertProps> & {
-    Button: typeof AlertButton;
-    Icon: typeof AlertIcon;
-    Text: typeof AlertText;
-    Title: typeof AlertTitle;
-};
-export default Alert;

package/alert/alert.types.d.ts

@@ -1,20 +0,0 @@
-import { ReactNode } from 'react';
-import { BoxProps } from '../box';
-import { IconProps } from '../icon';
-import { VuiIcon } from '../icons';
-import { ThemingProps } from '../theme';
-export interface AlertProps extends Omit<BoxProps, 'size' | 'variant'>, ThemingProps<'Alert'> {
-    action?: ReactNode;
-    colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
-    icon?: VuiIcon | (ReactNode & {});
-    onClose?: () => void;
-    status?: AlertStatus;
-    statusMapping?: AlertStatusMapping;
-    text?: ReactNode;
-    title?: ReactNode;
-}
-export declare type AlertStatus = 'error' | 'info' | 'loading' | 'success' | 'warning';
-export declare type AlertStatusMapping = Record<string, {
-    colorScheme?: AlertProps['colorScheme'];
-    iconProps: IconProps;
-}>;

package/alert/alertButton.d.ts

@@ -1,3 +0,0 @@
-import { ButtonProps } from '../button';
-export declare const AlertButton: import("../core").VuiComponent<"button", ButtonProps>;
-export default AlertButton;

package/alert/alertIcon.d.ts

@@ -1,3 +0,0 @@
-import { IconProps } from '../icon';
-export declare const AlertIcon: import("../core").VuiComponent<"svg", IconProps>;
-export default AlertIcon;

package/alert/alertText.d.ts

@@ -1,3 +0,0 @@
-import { PProps } from '../p';
-export declare const AlertText: import("../core").VuiComponent<"p", PProps>;
-export default AlertText;

package/alert/alertTitle.d.ts

@@ -1,3 +0,0 @@
-import { TProps } from '../t';
-export declare const AlertTitle: import("../core").VuiComponent<"span", TProps>;
-export default AlertTitle;

package/alert/consts.d.ts

@@ -1,2 +0,0 @@
-import { AlertStatusMapping } from './alert.types';
-export declare const alertStatusMapping: AlertStatusMapping;

package/alert/context.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { AlertProps } from './alert.types';
-declare const AlertProvider: import("react").Provider<Partial<AlertProps>>, useAlert: () => Partial<AlertProps>;
-export { AlertProvider, useAlert };

package/alert/index.d.ts

@@ -1,8 +0,0 @@
-export * from './alert';
-export * from './alert.types';
-export * from './alertButton';
-export * from './alertIcon';
-export * from './alertText';
-export * from './alertTitle';
-export * from './context';
-export { default } from './alert';

package/label/index.d.ts

@@ -1,3 +0,0 @@
-export * from './label';
-export * from './label.types';
-export { default } from './label';

package/label/label.d.ts

@@ -1,5 +0,0 @@
-import { LabelProps } from './label.types';
-import { SystemProps } from '../system';
-export declare const LabelBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
-export declare const Label: import("../core").VuiComponent<"span", LabelProps>;
-export default Label;

package/label/label.js

@@ -1,71 +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.Label = exports.LabelBase = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var core_1 = require("../core");
-var icon_1 = __importDefault(require("../icon"));
-var system_1 = require("../system");
-var utils_1 = require("../utils");
-var Text = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.isTruncated);
-exports.LabelBase = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"])), system_1.system);
-exports.Label = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), casing = _a.casing, children = _a.children, className = _a.className, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, isElevated = _a.isElevated, isFullWidth = _a.isFullWidth, _b = _a.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isRound = _a.isRound, isSplit = _a.isSplit, _c = _a.isTruncated, isTruncated = _c === void 0 ? true : _c, itemLeft = _a.itemLeft, itemRight = _a.itemRight, text = _a.text, weight = _a.weight, rest = __rest(_a, ["casing", "children", "className", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isInteractive", "isRound", "isSplit", "isTruncated", "itemLeft", "itemRight", "text", "weight"]);
-    var _d = core_1.useStyleConfig('Label', props), activeBg = _d.activeBg, h = _d.h, hoverBg = _d.hoverBg, _e = _d.iconSize, iconSize = _e === void 0 ? 'md' : _e, _f = _d.spaceX, spaceXBase = _f === void 0 ? 0 : _f, styles = __rest(_d, ["activeBg", "h", "hoverBg", "iconSize", "spaceX"]);
-    var spaceX = spaceXBase / 8;
-    var spaceXText = (spaceXBase + 4) / 8;
-    var iconRightMl = isSplit ? 'auto' : spaceX;
-    var pl = icon || itemLeft || iconLeft ? spaceX : spaceXText;
-    var pr = icon || itemRight || iconRight ? spaceX : spaceXText;
-    var interactiveProps = isInteractive
-        ? {
-            cursor: 'pointer',
-            hoverBg: hoverBg,
-            activeBg: activeBg,
-            focusRing: 3,
-            tabIndex: 0,
-            userSelect: 'none'
-        }
-        : {};
-    var aliasedProps = utils_1.filterUndefined({
-        borderRadius: isRound ? h / 2 : undefined,
-        boxShadow: isElevated ? '1' : undefined,
-        fontWeight: weight,
-        textTransform: casing,
-        w: isFullWidth ? '100%' : undefined
-    });
-    return (react_1.default.createElement(exports.LabelBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-label', className), fontWeight: "medium", h: h, pl: pl, pr: pr, ref: ref, transitionDuration: "fast" }, styles, interactiveProps, aliasedProps, rest), icon ? (react_1.default.createElement(icon_1.default, { icon: icon, size: iconSize })) : (react_1.default.createElement(react_1.default.Fragment, null, itemLeft !== null && itemLeft !== void 0 ? itemLeft : (iconLeft && react_1.default.createElement(icon_1.default, { icon: iconLeft, mr: spaceX, size: iconSize })),
-        react_1.default.createElement(Text, { isTruncated: isTruncated }, children !== null && children !== void 0 ? children : text), itemRight !== null && itemRight !== void 0 ? itemRight : (iconRight && react_1.default.createElement(icon_1.default, { icon: iconRight, ml: iconRightMl, size: iconSize }))))));
-});
-exports.Label.displayName = 'Label';
-exports.default = exports.Label;
-var templateObject_1, templateObject_2;

package/label/theme.d.ts

@@ -1,61 +0,0 @@
-import { Dict } from '../utils';
-declare function variantOutlined(props: Dict): {
-    hoverBg: string;
-    activeBg: string;
-    bg: string;
-    color: string;
-    borderColor: string;
-    borderWidth: number;
-};
-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 function variantText(props: Dict): {
-    hoverBg: string;
-    activeBg: string;
-    bg: string;
-    color: string;
-};
-declare const _default: {
-    defaultProps: {
-        colorScheme: string;
-        size: string;
-        variant: string;
-    };
-    sizes: {
-        sm: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
-            spaceX: number;
-        };
-        md: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
-            spaceX: number;
-        };
-        lg: {
-            fontSize: string;
-            h: number;
-            iconSize: string;
-            spaceX: number;
-        };
-    };
-    variants: {
-        outlined: typeof variantOutlined;
-        solid: typeof variantSolid;
-        subtle: typeof variantSubtle;
-        text: typeof variantText;
-    };
-};
-export default _default;

package/label/theme.js

@@ -1,107 +0,0 @@
-"use strict";
-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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-function variantOutlined(props) {
-    var c = props.colorScheme;
-    var styles = __assign({ borderColor: c + ".80", borderWidth: 1 }, variantText(props));
-    return styles;
-}
-function variantSolid(props) {
-    var c = props.colorScheme;
-    var styles = {
-        hoverBg: c + ".90",
-        activeBg: c + ".100",
-        bg: c + ".80",
-        color: 'white'
-    };
-    if (c === 'yellow') {
-        styles.hoverBg = c + ".80";
-        styles.activeBg = c + ".90";
-        styles.bg = c + ".70";
-    }
-    return styles;
-}
-function variantSubtle(props) {
-    var c = props.colorScheme;
-    var styles = {
-        hoverBg: c + ".30",
-        activeBg: c + ".40",
-        bg: c + ".20",
-        color: c + ".80"
-    };
-    // Special cases
-    if (c === 'green') {
-        styles.color = c + ".90";
-    }
-    if (c === 'grey') {
-        styles.color = "prussian.80";
-    }
-    if (c === 'red') {
-        styles.color = c + ".90";
-    }
-    if (c === 'yellow') {
-        styles.color = c + ".100";
-    }
-    return styles;
-}
-function variantText(props) {
-    var c = props.colorScheme;
-    var styles = {
-        hoverBg: c + ".20",
-        activeBg: c + ".30",
-        bg: 'transparent',
-        color: c + ".80"
-    };
-    // Special cases
-    if (c === 'prussian') {
-        styles.activeBg = 'blue.30';
-        styles.hoverBg = 'blue.20';
-    }
-    return styles;
-}
-var defaultProps = {
-    colorScheme: 'blue',
-    size: 'md',
-    variant: 'subtle'
-};
-var sizes = {
-    sm: {
-        fontSize: 'sm',
-        h: 24,
-        iconSize: 'xs',
-        spaceX: 4
-    },
-    md: {
-        fontSize: 'sm',
-        h: 32,
-        iconSize: 'sm',
-        spaceX: 6
-    },
-    lg: {
-        fontSize: 'md',
-        h: 40,
-        iconSize: 'md',
-        spaceX: 8
-    }
-};
-var variants = {
-    outlined: variantOutlined,
-    solid: variantSolid,
-    subtle: variantSubtle,
-    text: variantText
-};
-exports.default = {
-    defaultProps: defaultProps,
-    sizes: sizes,
-    variants: variants
-};

package/list/listItem.types.d.ts

@@ -1,16 +0,0 @@
-import { IconProp } from '../icon';
-import { SystemProps } from '../system';
-import { ThemingProps } from '../theme';
-export interface ListItemProps extends SystemProps, ThemingProps<'List'> {
-    center?: boolean;
-    centerH?: boolean;
-    centerV?: boolean;
-    colorScheme?: 'blue' | 'grey';
-    column?: boolean;
-    disabled?: boolean;
-    iconLeft?: IconProp;
-    iconRight?: IconProp;
-    isInteractive?: boolean;
-    isSelected?: boolean;
-    text?: number | string;
-}

package/switch/switchButton.types.d.ts

@@ -1,19 +0,0 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { ChangeEventHandler, FocusEventHandler } from '../core';
-import { SystemProps } from '../system';
-import { ThemingProps } from '../theme';
-export interface SwitchButtonProps extends SystemProps, ThemingProps<'Switch'> {
-    checked?: boolean;
-    colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
-    disabled?: boolean;
-    innerLabelOff?: ReactNode;
-    innerLabelOn?: ReactNode;
-    inputProps?: HTMLAttributes<HTMLInputElement>;
-    inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
-    name?: string;
-    onBlur?: FocusEventHandler;
-    onChange?: ChangeEventHandler;
-    onFocus?: FocusEventHandler;
-    required?: boolean;
-    value?: number | string;
-}

package/tile/index.d.ts

@@ -1,3 +0,0 @@
-export * from './tile';
-export * from './tile.types';
-export { default } from './tile';

package/tile/tile.d.ts

@@ -1,3 +0,0 @@
-import { TileProps } from './tile.types';
-export declare const Tile: import("../core").VuiComponent<"div", TileProps>;
-export default Tile;