@veracity/vui 0.7.0-beta.2 → 0.7.0

package/radio/theme.d.ts

@@ -0,0 +1,49 @@
+import { Dict } from '../utils';
+declare function variantDefault(props: Dict): {
+    control: {
+        color: string;
+        hoverColor: string;
+    };
+};
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {
+        colorScheme: string;
+        size: string;
+        variant: string;
+    };
+    parts: string[];
+    sizes: {
+        sm: {
+            control: {
+                h: number;
+                w: number;
+            };
+            label: {
+                size: string;
+            };
+        };
+        md: {
+            control: {
+                h: number;
+                w: number;
+            };
+            label: {
+                size: string;
+            };
+        };
+        lg: {
+            control: {
+                h: number;
+                w: number;
+            };
+            label: {
+                size: string;
+            };
+        };
+    };
+    variants: {
+        default: typeof variantDefault;
+    };
+};
+export default _default;

package/radio/theme.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function variantDefault(props) {
+    var c = props.colorScheme;
+    var control = {
+        color: c + ".80",
+        hoverColor: c + ".90"
+    };
+    if (c === 'prussian') {
+        control.hoverColor = 'prussian.70';
+    }
+    return {
+        control: control
+    };
+}
+var baseStyle = {};
+var defaultProps = {
+    colorScheme: 'blue',
+    size: 'md',
+    variant: 'default'
+};
+var parts = ['container', 'control', 'label'];
+var sizes = {
+    sm: {
+        control: {
+            h: 16,
+            w: 16
+        },
+        label: {
+            size: 'sm'
+        }
+    },
+    md: {
+        control: {
+            h: 20,
+            w: 20
+        },
+        label: {
+            size: 'md'
+        }
+    },
+    lg: {
+        control: {
+            h: 24,
+            w: 24
+        },
+        label: {
+            size: 'lg'
+        }
+    }
+};
+var variants = {
+    default: variantDefault
+};
+exports.default = {
+    baseStyle: baseStyle,
+    defaultProps: defaultProps,
+    parts: parts,
+    sizes: sizes,
+    variants: variants
+};

package/skeleton/index.js

@@ -0,0 +1,20 @@
+"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("./skeleton"), exports);
+var skeleton_1 = require("./skeleton");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(skeleton_1).default; } });
+__exportStar(require("./skeleton.types"), exports);

package/skeleton/skeleton.d.ts

@@ -0,0 +1,5 @@
+import { SkeletonProps } from './skeleton.types';
+export declare const SkeletonBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Displays one or more animated skeleton elements to signify loading content. */
+export declare const Skeleton: import("../core").VuiComponent<"div", SkeletonProps>;
+export default Skeleton;

package/skeleton/skeleton.js

@@ -0,0 +1,51 @@
+"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.Skeleton = exports.SkeletonBase = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+exports.SkeletonBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tanimation: vui-pulse 1.5s ease-in-out 0.5s infinite;\n"], ["\n\tanimation: vui-pulse 1.5s ease-in-out 0.5s infinite;\n"
+    /** Displays one or more animated skeleton elements to signify loading content. */
+])));
+/** Displays one or more animated skeleton elements to signify loading content. */
+exports.Skeleton = (0, core_1.vui)(function (props, ref) {
+    var _a = (0, core_1.omitThemingProps)(props), className = _a.className, _b = _a.repeat, repeat = _b === void 0 ? 1 : _b, rest = __rest(_a, ["className", "repeat"]);
+    var styles = (0, core_1.useStyleConfig)('Skeleton', props);
+    var arr = Array(repeat).fill(0);
+    var aliasedProps = (0, utils_1.filterUndefined)({
+        w: props.variant === 'circle' ? styles.h : undefined
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null, arr.map(function (_, i) { return (react_1.default.createElement(exports.SkeletonBase, __assign({ className: (0, utils_1.cs)('vui-skeleton', className), key: i, ref: ref }, styles, aliasedProps, rest))); })));
+});
+exports.Skeleton.displayName = 'Skeleton';
+exports.default = exports.Skeleton;
+var templateObject_1;

package/skeleton/skeleton.types.d.ts

@@ -0,0 +1,10 @@
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export declare type SkeletonProps = SystemProps & ThemingProps<'Skeleton'> & {
+    /** Children are disabled for this component. */
+    children?: never;
+    /** Available theme colors for this component. @default blue */
+    colorScheme?: 'blue' | 'grey';
+    /** Displays given amount of skeleton elements. */
+    repeat?: number;
+};

package/skeleton/theme.d.ts

@@ -0,0 +1,37 @@
+import { Dict } from '../utils';
+declare function variantCircle(props: Dict): {
+    borderRadius: string;
+    bg: string;
+};
+declare function variantRectangle(props: Dict): {
+    borderRadius: string;
+    bg: string;
+    w: string;
+};
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {
+        colorScheme: string;
+        size: string;
+        variant: string;
+    };
+    sizes: {
+        xs: {
+            h: number;
+        };
+        sm: {
+            h: number;
+        };
+        md: {
+            h: number;
+        };
+        lg: {
+            h: number;
+        };
+    };
+    variants: {
+        circle: typeof variantCircle;
+        rect: typeof variantRectangle;
+    };
+};
+export default _default;

package/skeleton/theme.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function variantCircle(props) {
+    var c = props.colorScheme;
+    var styles = {
+        borderRadius: '50%',
+        bg: c + ".20"
+    };
+    return styles;
+}
+function variantRectangle(props) {
+    var c = props.colorScheme;
+    var styles = {
+        borderRadius: 'md',
+        bg: c + ".20",
+        w: '100%'
+    };
+    return styles;
+}
+var baseStyle = {};
+var defaultProps = {
+    colorScheme: 'blue',
+    size: 'md',
+    variant: 'rect'
+};
+var sizes = {
+    xs: {
+        h: 24
+    },
+    sm: {
+        h: 32
+    },
+    md: {
+        h: 40
+    },
+    lg: {
+        h: 48
+    }
+};
+var variants = {
+    circle: variantCircle,
+    rect: variantRectangle
+};
+exports.default = {
+    baseStyle: baseStyle,
+    defaultProps: defaultProps,
+    sizes: sizes,
+    variants: variants
+};

package/spinner/consts.d.ts

@@ -0,0 +1,24 @@
+import { Dict } from '../utils';
+export declare const spinnerPositionMapping: {
+    bottom: {
+        container: {
+            flexDirection: string;
+        };
+    };
+    left: {
+        container: {
+            flexDirection: string;
+        };
+    };
+    right: {
+        container: {
+            flexDirection: string;
+        };
+    };
+    top: {
+        container: {
+            flexDirection: string;
+        };
+    };
+};
+export declare const spinnerSpeedMapping: Dict<string>;

package/spinner/index.js

@@ -0,0 +1,20 @@
+"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("./spinner"), exports);
+var spinner_1 = require("./spinner");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(spinner_1).default; } });
+__exportStar(require("./spinner.types"), exports);

package/spinner/spinner.d.ts

@@ -0,0 +1,8 @@
+import { SpinnerProps } from './spinner.types';
+export declare const SpinnerCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/**
+ * Displays a spinning circular element with optional text to signify loading content.
+ * Handles different positioning scenarios, speeds and coloring of the circle.
+ */
+export declare const Spinner: import("../core").VuiComponent<"div", SpinnerProps>;
+export default Spinner;

package/spinner/spinner.js

@@ -0,0 +1,68 @@
+"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.Spinner = exports.SpinnerCircle = void 0;
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
+var consts_1 = require("./consts");
+exports.SpinnerCircle = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-radius: round;\n\tdisplay: flex;\n\tflex-shrink: 0;\n"], ["\n\tborder-radius: round;\n\tdisplay: flex;\n\tflex-shrink: 0;\n"
+    /**
+     * Displays a spinning circular element with optional text to signify loading content.
+     * Handles different positioning scenarios, speeds and coloring of the circle.
+     */
+])));
+/**
+ * Displays a spinning circular element with optional text to signify loading content.
+ * Handles different positioning scenarios, speeds and coloring of the circle.
+ */
+exports.Spinner = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var className = props.className, emptyColor = props.emptyColor, size = props.size, _b = props.speed, speedProp = _b === void 0 ? 'normal' : _b, text = props.text, _c = props.textPosition, textPosition = _c === void 0 ? 'bottom' : _c, thickness = props.thickness, rest = __rest(props, ["className", "emptyColor", "size", "speed", "text", "textPosition", "thickness"]);
+    var styles = (0, core_1.useStyleConfig)('Spinner', props);
+    var isCustomSize = typeof size === 'number';
+    var positionProps = consts_1.spinnerPositionMapping[textPosition];
+    var speed = (_a = consts_1.spinnerSpeedMapping[speedProp]) !== null && _a !== void 0 ? _a : speedProp;
+    var circleProps = (0, utils_1.filterUndefined)({
+        borderColor: emptyColor,
+        borderWidth: isCustomSize ? thickness !== null && thickness !== void 0 ? thickness : 4 : thickness,
+        h: isCustomSize ? size : undefined,
+        w: isCustomSize ? size : undefined
+    });
+    return (react_1.default.createElement(box_1.default, __assign({ center: true, className: (0, utils_1.cs)('vui-spinner', className), gap: 1, ref: ref, transitionDuration: "fast" }, styles.container, positionProps.container, rest),
+        react_1.default.createElement(exports.SpinnerCircle, __assign({ animation: "vui-spin " + speed + " linear infinite", className: "vui-spinnerCircle" }, styles.circle, circleProps)),
+        text && (react_1.default.createElement(t_1.default, __assign({ className: "vui-spinnerText" }, styles.text), text))));
+});
+exports.Spinner.displayName = 'Spinner';
+exports.default = exports.Spinner;
+var templateObject_1;

package/spinner/spinner.types.d.ts

@@ -0,0 +1,20 @@
+import { BoxProps } from '../box';
+import { ThemingProps } from '../theme';
+export declare type SpinnerProps = Omit<BoxProps, 'size' | 'variant'> & Omit<ThemingProps<'Spinner'>, 'size'> & {
+    /** Children are disabled for this component. */
+    children?: never;
+    /** Available theme colors for this component. @default blue */
+    colorScheme?: 'blue' | 'grey' | 'prussian';
+    /** Color of the 'empty' part of the circle. */
+    emptyColor?: string;
+    /** Amount of time needed to make a full rotation. */
+    speed?: string;
+    /** Theme size or a number defining height and width. */
+    size?: ThemingProps<'Spinner'>['size'] | number;
+    /** Displays given text next to the spinner. */
+    text?: string;
+    /** Text placement relative to the spinner. */
+    textPosition?: 'bottom' | 'left' | 'right' | 'top';
+    /** Thickness of the spinner circle in pixels. */
+    thickness?: number;
+};

package/spinner/theme.d.ts

@@ -0,0 +1,68 @@
+import { Dict } from '../utils';
+declare function variantDefault(props: Dict): {
+    container: {
+        color: string;
+    };
+    circle: {
+        borderColor: string;
+        borderTopColor: string;
+    };
+    text: {};
+};
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {
+        colorScheme: string;
+        size: string;
+        variant: string;
+    };
+    parts: string[];
+    sizes: {
+        xs: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        sm: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        md: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        lg: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        card: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+        page: {
+            circle: {
+                borderWidth: number;
+                h: number;
+                w: number;
+            };
+        };
+    };
+    variants: {
+        default: typeof variantDefault;
+    };
+};
+export default _default;

package/spinner/theme.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function variantDefault(props) {
+    var c = props.colorScheme;
+    var container = {
+        color: c + ".50"
+    };
+    var circle = {
+        borderColor: c + ".20",
+        borderTopColor: c + ".50"
+    };
+    var text = {};
+    return { container: container, circle: circle, text: text };
+}
+var baseStyle = {};
+var defaultProps = {
+    colorScheme: 'blue',
+    size: 'page',
+    variant: 'default'
+};
+var parts = ['container', 'circle', 'text'];
+var sizes = {
+    xs: {
+        circle: {
+            borderWidth: 1,
+            h: 16,
+            w: 16
+        }
+    },
+    sm: {
+        circle: {
+            borderWidth: 2,
+            h: 24,
+            w: 24
+        }
+    },
+    md: {
+        circle: {
+            borderWidth: 3,
+            h: 32,
+            w: 32
+        }
+    },
+    lg: {
+        circle: {
+            borderWidth: 3,
+            h: 40,
+            w: 40
+        }
+    },
+    card: {
+        circle: {
+            borderWidth: 4,
+            h: 60,
+            w: 60
+        }
+    },
+    page: {
+        circle: {
+            borderWidth: 5,
+            h: 80,
+            w: 80
+        }
+    }
+};
+var variants = {
+    default: variantDefault
+};
+exports.default = {
+    baseStyle: baseStyle,
+    defaultProps: defaultProps,
+    parts: parts,
+    sizes: sizes,
+    variants: variants
+};

package/svg/cache.d.ts

@@ -0,0 +1,15 @@
+declare type CachedItem = string | Promise<string>;
+/**
+ * Provides svg caching functionality to avoid redundant XHR requests.
+ * When the retrieved item doesn't exist in cache yet, a request is sent
+ * to its 'src' url. The request's promise is cached for that 'src' key
+ * and can be used for the whole session without repeating requests.
+ */
+declare class Cache {
+    cache: Map<string, CachedItem>;
+    add: (src: string, svg: CachedItem) => void;
+    get: (src: string) => CachedItem;
+    reset: () => void;
+}
+declare const cache: Cache;
+export default cache;

package/svg/cache.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Provides svg caching functionality to avoid redundant XHR requests.
+ * When the retrieved item doesn't exist in cache yet, a request is sent
+ * to its 'src' url. The request's promise is cached for that 'src' key
+ * and can be used for the whole session without repeating requests.
+ */
+var Cache = /** @class */ (function () {
+    function Cache() {
+        var _this = this;
+        this.cache = new Map();
+        this.add = function (src, svg) {
+            _this.cache.set(src, svg);
+        };
+        this.get = function (src) {
+            var item = _this.cache.get(src);
+            if (!item) {
+                var promise = fetch(src).then(function (res) { return res.text(); });
+                _this.add(src, promise);
+                return promise;
+            }
+            return item;
+        };
+        this.reset = function () {
+            _this.cache.clear();
+        };
+    }
+    return Cache;
+}());
+var cache = new Cache();
+exports.default = cache;

package/svg/helpers.d.ts

@@ -0,0 +1,10 @@
+import { Dict } from '../utils';
+import { SvgState } from './svg.types';
+/** Returns an object with given element's HTML attributes. */
+export declare function getAttributes(element?: Element): Dict<string>;
+/** Returns content of the SVG HTML string by stripping the svg tag. */
+export declare function getSvgContent(html?: string): string;
+/** Returns object with initial state values. */
+export declare function initState(): SvgState;
+/** Returns given HTML string as an HTML element. */
+export declare function stringToHTML(html: string): Element | null;

package/svg/helpers.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringToHTML = exports.initState = exports.getSvgContent = exports.getAttributes = void 0;
+/** Returns an object with given element's HTML attributes. */
+function getAttributes(element) {
+    if (!element)
+        return {};
+    var attrs = Array.from(element.attributes);
+    return attrs.reduce(function (props, attr) {
+        var name = attr.name, value = attr.value;
+        props[name] = value;
+        return props;
+    }, {});
+}
+exports.getAttributes = getAttributes;
+/** Returns content of the SVG HTML string by stripping the svg tag. */
+function getSvgContent(html) {
+    if (html === void 0) { html = ''; }
+    return html.replace(/(<\/?svg(?:.|\n)*?>)|(\r\n|\n|\r)/gm, '');
+}
+exports.getSvgContent = getSvgContent;
+/** Returns object with initial state values. */
+function initState() {
+    return { content: '', svgAttributes: {} };
+}
+exports.initState = initState;
+/** Returns given HTML string as an HTML element. */
+function stringToHTML(html) {
+    var container = document.createElement('div');
+    container.innerHTML = html;
+    return container.firstElementChild;
+}
+exports.stringToHTML = stringToHTML;