@vectara/vectara-ui 0.0.2

package/lib/components/searchSelect/SearchSelect.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { VuiOptionsList } from "../optionsList/OptionsList";
+import { VuiPopover } from "../popover/Popover";
+import { VuiTextInput } from "../form";
+import { VuiSpacer } from "../spacer/Spacer";
+// https://github.com/typescript-eslint/typescript-eslint/issues/4062
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
+export const VuiSearchSelect = ({ children, title, isOpen, setIsOpen, options, onSelect, isMultiSelect = true, selected = [] }) => {
+    const [searchValue, setSearchValue] = useState("");
+    const [selectedOptions, setSelectedOptions] = useState();
+    const [orderedOptions, setOrderedOptions] = useState([]);
+    useEffect(() => {
+        // When the popover is opened, initialize the selected options,
+        // and sort the options so the selected ones are on top.
+        if (isOpen) {
+            const selectedOptionsCopy = selected.concat();
+            setSelectedOptions(selectedOptionsCopy);
+            const sortedOptions = options.concat().sort((first, second) => {
+                const isFirstSelected = selectedOptionsCopy.includes(first.value);
+                const isSecondSelected = selectedOptionsCopy.includes(second.value);
+                if (isFirstSelected && !isSecondSelected) {
+                    return -1;
+                }
+                if (!isFirstSelected && isSecondSelected) {
+                    return 1;
+                }
+                return 0;
+            });
+            setOrderedOptions(sortedOptions);
+        }
+    }, [isOpen]);
+    const updateOpen = () => {
+        if (isOpen) {
+            // When the popover is closed, notify the consumer of the
+            // selected options.
+            onSelect(selectedOptions !== null && selectedOptions !== void 0 ? selectedOptions : []);
+            // Signal the popover to be closed. We don't depend on the
+            // original isOpen because it will cause a flicker when the
+            // options are sorted.
+            setSelectedOptions(undefined);
+        }
+        setIsOpen(!isOpen);
+    };
+    const onSelectOption = (value) => {
+        if (isMultiSelect) {
+            setSelectedOptions((prev) => {
+                if (!prev)
+                    return [];
+                const updated = prev.concat();
+                const index = prev.findIndex((item) => item === value);
+                if (index !== -1) {
+                    updated.splice(index, 1);
+                    return updated;
+                }
+                updated.push(value);
+                return updated;
+            });
+            return;
+        }
+        // If the user can only select one option at a time,
+        // close the search select as soon as they make a choice.
+        onSelect([value]);
+        // Signal the popover to be closed. We don't depend on the
+        // original isOpen because it will cause a flicker when the
+        // options are sorted.
+        setSelectedOptions(undefined);
+        setIsOpen(false);
+    };
+    const visibleOptions = orderedOptions.filter((option) => {
+        if (!searchValue.trim())
+            return true;
+        if (option.label.toLowerCase().includes(searchValue.toLowerCase()))
+            return true;
+        return false;
+    });
+    return (_jsxs(VuiPopover, Object.assign({ isOpen: selectedOptions !== undefined, setIsOpen: updateOpen, button: children, header: title }, { children: [_jsxs("div", Object.assign({ className: "vuiSearchSelect__search" }, { children: [_jsx(VuiTextInput, { placeholder: "Search", value: searchValue, onChange: (event) => setSearchValue(event.target.value) }), _jsx(VuiSpacer, { size: "xxs" })] })), _jsx(VuiOptionsList, { isSelectable: true, isScrollable: true, onSelectOption: onSelectOption, selected: selectedOptions, options: visibleOptions })] })));
+};

package/lib/components/searchSelect/_index.scss

@@ -0,0 +1,13 @@
+.vuiSearchSelectHeader {
+  background-color: $colorLightShade;
+  padding: $sizeM;
+  border-bottom: 1px solid $borderColor;
+  font-weight: $fontWeightBold;
+  font-size: $fontSizeStandard;
+  color: $colorDarkerShade;
+}
+
+.vuiSearchSelect__search {
+  padding: $sizeXxs $sizeXs;
+  border-bottom: 1px solid $borderColor;
+}

package/lib/components/setting/Setting.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    title: string;
+    label: string;
+    badge?: string;
+    helpUrl?: string;
+    description?: React.ReactNode;
+    isEnabled?: boolean;
+    onToggle?: () => void;
+    children?: React.ReactNode;
+};
+export declare const VuiSetting: ({ title, label, badge, helpUrl, description, isEnabled, onToggle, children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/setting/Setting.js

@@ -0,0 +1,24 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { VuiSpacer } from "../spacer/Spacer";
+import { VuiText } from "../typography/Text";
+import { VuiTextColor } from "../typography/TextColor";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiLinkInternal } from "../link/Link";
+import { VuiBadge } from "../badge/Badge";
+import { VuiToggle } from "../toggle/Toggle";
+export const VuiSetting = (_a) => {
+    var { title, label, badge, helpUrl, description, isEnabled, onToggle, children } = _a, rest = __rest(_a, ["title", "label", "badge", "helpUrl", "description", "isEnabled", "onToggle", "children"]);
+    return (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, Object.assign({ size: "m" }, { children: _jsx("p", { children: title }) })) })), badge && (_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiBadge, Object.assign({ color: "neutral" }, { children: badge })) })))] })) })), helpUrl && (_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, Object.assign({ size: "s" }, { children: _jsx("p", { children: _jsx(VuiLinkInternal, Object.assign({ href: helpUrl, target: "_blank" }, { children: "Learn more" })) }) })) })))] })), description && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xxs" }), _jsx(VuiText, { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: _jsx("p", { children: description }) })) })] })), _jsx(VuiSpacer, { size: "xs" }), _jsx(VuiToggle, Object.assign({}, rest, { checked: isEnabled, label: label, onChange: onToggle })), isEnabled && children && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), children] }))] }));
+};

package/lib/components/spacer/Spacer.d.ts

@@ -0,0 +1,6 @@
+import { SPACER_SIZE } from "./types";
+interface Props {
+    size: (typeof SPACER_SIZE)[number];
+}
+export declare const VuiSpacer: ({ size }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/spacer/Spacer.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+export const VuiSpacer = ({ size = "m" }) => {
+    const classes = classNames("vuiSpacer", { [`vuiSpacer--${size}`]: size });
+    return _jsx("div", { className: classes });
+};

package/lib/components/spacer/_index.scss

@@ -0,0 +1,20 @@
+.vuiSpacer {
+  flex-shrink: 0;
+}
+
+$size: (
+  xxxs: $sizeXxxs,
+  xxs: $sizeXxs,
+  xs: $sizeXs,
+  s: $sizeS,
+  m: $sizeM,
+  l: $sizeL,
+  xl: $sizeXl,
+  xxl: $sizeXxl
+);
+
+@each $sizeName, $sizeValue in $size {
+  .vuiSpacer--#{$sizeName} {
+    height: $sizeValue;
+  }
+}

package/lib/components/spacer/types.d.ts

@@ -0,0 +1 @@
+export declare const SPACER_SIZE: readonly ["xxxs", "xxs", "xs", "s", "m", "l", "xl", "xxl"];

package/lib/components/spacer/types.js

@@ -0,0 +1 @@
+export const SPACER_SIZE = ["xxxs", "xxs", "xs", "s", "m", "l", "xl", "xxl"];

package/lib/components/spinner/Spinner.d.ts

@@ -0,0 +1,7 @@
+import { SPINNER_SIZE, SpinnerColor } from "./types";
+type Props = {
+    color?: SpinnerColor;
+    size?: (typeof SPINNER_SIZE)[number];
+};
+export declare const VuiSpinner: ({ color, size }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/spinner/Spinner.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const sizeToClassNameMap = {
+    xs: "vuiSpinner--xs",
+    s: "vuiSpinner--s",
+    m: "vuiSpinner--m",
+    l: "vuiSpinner--l",
+    xl: "vuiSpinner--xl",
+    xxl: "vuiSpinner--xxl",
+    xxxl: "vuiSpinner--xxxl"
+};
+export const VuiSpinner = ({ color = "accent", size = "m" }) => {
+    const classes = classNames("vuiSpinner", sizeToClassNameMap[size], `vuiSpinner--${color}`);
+    return (_jsx("div", Object.assign({ className: classes }, { children: _jsx("svg", Object.assign({ version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 50 50" }, { children: _jsx("path", Object.assign({ fill: "#000", d: "M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" }, { children: _jsx("animateTransform", { attributeType: "xml", attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "0.6s", repeatCount: "indefinite" }) })) })) })));
+};

package/lib/components/spinner/_index.scss

@@ -0,0 +1,52 @@
+@use "sass:map";
+
+// Color
+$color: (
+  accent: (
+    "color": $colorAccent
+  ),
+  primary: (
+    "color": $colorPrimary
+  ),
+  success: (
+    "color": $colorSuccess
+  ),
+  danger: (
+    "color": $colorDanger
+  ),
+  warning: (
+    "color": $colorWarning
+  ),
+  empty: (
+    "color": $colorEmptyShade
+  ),
+  dark: (
+    "color": $colorDarkerShade
+  )
+);
+
+@each $colorName, $colorValue in $color {
+  .vuiSpinner--#{$colorName} {
+    svg path,
+    svg rect {
+      fill: #{map.get($colorValue, "color")};
+    }
+  }
+}
+
+$size: (
+  xs: $sizeXs * 1.75,
+  s: $sizeS * 1.325,
+  m: $sizeM * 1.255,
+  l: $sizeL * 2,
+  xl: $sizeXl * 2,
+  xxl: $sizeXxl * 2,
+  xxxl: $sizeXxl * 2.5
+);
+
+@each $sizeName, $sizeValue in $size {
+  .vuiSpinner--#{$sizeName} {
+    width: $sizeValue;
+    height: $sizeValue;
+  }
+}

package/lib/components/spinner/types.d.ts

@@ -0,0 +1,3 @@
+export declare const SPINNER_COLOR: readonly ["accent", "primary", "success", "danger", "warning", "empty", "dark"];
+export declare const SPINNER_SIZE: readonly ["xs", "s", "m", "l", "xl", "xxl", "xxxl"];
+export type SpinnerColor = (typeof SPINNER_COLOR)[number];

package/lib/components/spinner/types.js

@@ -0,0 +1,2 @@
+export const SPINNER_COLOR = ["accent", "primary", "success", "danger", "warning", "empty", "dark"];
+export const SPINNER_SIZE = ["xs", "s", "m", "l", "xl", "xxl", "xxxl"];

package/lib/components/statList/StatList.d.ts

@@ -0,0 +1,9 @@
+type Stat = {
+    name: string;
+    value: React.ReactNode;
+};
+type Props = {
+    stats: Stat[];
+};
+export declare const VuiStatList: ({ stats }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/statList/StatList.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiLink } from "../link/Link";
+import { VuiSpacer } from "../spacer/Spacer";
+import { VuiText } from "../typography/Text";
+const VuiStat = ({ name, value }) => {
+    return (_jsx(_Fragment, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "m" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false, className: "vuiStatName" }, { children: _jsx(VuiText, { children: _jsx("p", { children: _jsx("strong", { children: name }) }) }) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: value }) }) }))] })) }));
+};
+export const VuiStatList = ({ stats }) => {
+    return (_jsx(_Fragment, { children: stats.map(({ name, value }, index) => {
+            const renderedValue = name === "url" || (typeof value === "string" && value.indexOf("http") === 0) ? (_jsx(VuiLink, Object.assign({ href: value, target: "_blank" }, { children: value }))) : (value);
+            return (_jsxs(_Fragment, { children: [_jsx(VuiStat, { name: name, value: renderedValue }, `${name}:${value}`), index < stats.length - 1 && _jsx(VuiSpacer, { size: "s" })] }));
+        }) }));
+};

package/lib/components/statList/_index.scss

@@ -0,0 +1,3 @@
+.vuiStatName {
+  width: 120px;
+}

package/lib/components/status/Status.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    status: "error" | "warning" | "success" | "info";
+    label: string;
+};
+export declare const VuiStatus: ({ status, label }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/status/Status.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BiCheck, BiError, BiInfoCircle, BiSolidHand } from "react-icons/bi";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiIcon } from "../icon/Icon";
+import { VuiText } from "../typography/Text";
+import { VuiTextColor } from "../typography/TextColor";
+const statusToColor = {
+    error: "danger",
+    warning: "warning",
+    success: "success",
+    info: "primary"
+};
+const statusToIcon = {
+    error: _jsx(BiError, {}),
+    warning: _jsx(BiSolidHand, {}),
+    success: _jsx(BiCheck, {}),
+    info: _jsx(BiInfoCircle, {})
+};
+export const VuiStatus = ({ status, label }) => {
+    const color = statusToColor[status];
+    const icon = statusToIcon[status];
+    return (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiIcon, Object.assign({ color: color }, { children: icon })) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: label })) }) }) }))] })));
+};

package/lib/components/summary/Summary.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    summary: string;
+    className?: string;
+    SummaryCitation: React.ComponentType<any>;
+};
+export declare const VuiSummary: ({ summary, className, SummaryCitation }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/summary/Summary.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import Markdown from "markdown-to-jsx";
+import { extractCitations } from "../../utils/citations/extractCitations";
+import { VuiText } from "../typography/Text";
+const markDownCitations = (summary) => {
+    const citations = extractCitations(summary);
+    return citations
+        .reduce((accum, { text, references }) => {
+        if (references) {
+            accum.push(text);
+            const marginBefore = text ? text[text.length - 1] !== " " : false;
+            if (marginBefore) {
+                accum.push(" ");
+            }
+            references.forEach((reference, referenceIndex) => {
+                if (referenceIndex > 0) {
+                    accum.push(" ");
+                }
+                accum.push(`<SummaryCitation reference={${reference}} />`);
+            });
+        }
+        else {
+            accum.push(text);
+        }
+        return accum;
+    }, [])
+        .join("");
+};
+export const VuiSummary = ({ summary, className, SummaryCitation }) => {
+    // Protect users' privacy in FullStory.
+    // https://help.fullstory.com/hc/en-us/articles/360020623574-How-do-I-protect-my-users-privacy-in-FullStory-#01F5DPW1AJHZHR8TBM9YQEDRMH
+    const classes = classNames("vuiSummary", "fs-mask", className);
+    const markdown = markDownCitations(summary);
+    return (_jsx("div", Object.assign({ className: classes, dir: "auto" }, { children: _jsx(VuiText, Object.assign({ size: "m" }, { children: _jsx(Markdown, { children: markdown, options: {
+                    forceBlock: true,
+                    overrides: {
+                        SummaryCitation: {
+                            component: SummaryCitation
+                        }
+                    }
+                } }) })) })));
+};

package/lib/components/summary/Summary.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";