@vectara/vectara-ui 0.0.2

package/lib/components/progressBar/_index.scss

@@ -0,0 +1,63 @@
+@use "sass:map";
+
+.vuiProgressBar {
+  position: relative;
+  border-radius: $sizeXxs;
+  height: $sizeS;
+  overflow: hidden;
+}
+
+.vuiProgressBar__empty,
+.vuiProgressBar__bar,
+.vuiProgressBar__outline {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.vuiProgressBar__empty {
+  z-index: 0;
+  background-color: $colorLightShade;
+  box-shadow: inset rgba(0, 0, 0, 0.05) 0px 2px 2px;
+}
+
+.vuiProgressBar__bar {
+  transition: all $transitionSpeed;
+  z-index: 1;
+}
+
+.vuiProgressBar__outline {
+  z-index: 2;
+  border-radius: $sizeXxs;
+  box-shadow: inset 0 0 0 1px rgba(#000000, 0.1);
+}
+
+// Color
+$color: (
+  accent: (
+    "background-color": $colorAccent
+  ),
+  primary: (
+    "background-color": $colorPrimary
+  ),
+  success: (
+    "background-color": $colorSuccess
+  ),
+  warning: (
+    "background-color": $colorWarning
+  ),
+  danger: (
+    "background-color": $colorDanger
+  ),
+  neutral: (
+    "background-color": $colorDarkShade
+  )
+);
+
+@each $colorName, $colorValue in $color {
+  .vuiProgressBar--#{$colorName} {
+    .vuiProgressBar__bar {
+      background-color: #{map.get($colorValue, "background-color")};
+    }
+  }
+}

package/lib/components/prompt/Prompt.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+declare const COLOR: readonly ["danger", "neutral"];
+declare const paddingToClassNameMap: {
+    readonly xs: "vuiPrompt--paddingXs";
+    readonly s: "vuiPrompt--paddingS";
+    readonly m: "vuiPrompt--paddingM";
+    readonly l: "vuiPrompt--paddingL";
+    readonly xl: "vuiPrompt--paddingXl";
+    readonly xxl: "vuiPrompt--paddingXxl";
+};
+type Props = {
+    children: ReactNode;
+    className?: string;
+    color?: (typeof COLOR)[number];
+    padding?: keyof typeof paddingToClassNameMap;
+    onClick?: () => void;
+    isSpeechBubble?: boolean;
+};
+export declare const VuiPrompt: ({ children, className, onClick, color, padding, isSpeechBubble }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/prompt/Prompt.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const COLOR = ["danger", "neutral"];
+const paddingToClassNameMap = {
+    xs: "vuiPrompt--paddingXs",
+    s: "vuiPrompt--paddingS",
+    m: "vuiPrompt--paddingM",
+    l: "vuiPrompt--paddingL",
+    xl: "vuiPrompt--paddingXl",
+    xxl: "vuiPrompt--paddingXxl"
+};
+export const VuiPrompt = ({ children, className, onClick, color = "neutral", padding = "l", isSpeechBubble }) => {
+    const Component = onClick ? "button" : "div";
+    const classes = classNames(className, "vuiPrompt", `vuiPrompt--${color}`, paddingToClassNameMap[padding], {
+        "vuiPrompt--interactive": onClick !== undefined,
+        "vuiPrompt--speechBubble": isSpeechBubble
+    });
+    return (_jsx(Component, Object.assign({ className: classes, onClick: onClick }, { children: children })));
+};

package/lib/components/prompt/_index.scss

@@ -0,0 +1,70 @@
+@use "sass:map";
+
+.vuiPrompt {
+  position: relative;
+  border-radius: $sizeM;
+  transition: all $transitionSpeed;
+  word-wrap: break-word;
+}
+
+.vuiPrompt--speechBubble {
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    width: 0;
+    height: 0;
+    left: 48px;
+    border-style: solid;
+    border-left-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    border-width: 20px;
+    margin-left: -20px;
+    margin-bottom: -20px;
+    border-top-color: $colorLightShade;
+    border-bottom: 0;
+  }
+}
+
+.vuiPrompt--interactive {
+  &:hover {
+    background-color: $colorAccentLightShade;
+    color: $colorAccent;
+  }
+}
+
+// Color
+$color: (
+  danger: (
+    "color": $colorDanger,
+    "background-color": $colorDangerLightShade
+  ),
+  neutral: (
+    "color": $colorDarkShade,
+    "background-color": $colorLightShade
+  )
+);
+
+@each $colorName, $colorValue in $color {
+  .vuiPrompt--#{$colorName} {
+    color: #{map.get($colorValue, "color")};
+    background-color: #{map.get($colorValue, "background-color")};
+  }
+}
+
+// Padding
+$padding: (
+  paddingXs: $sizeXs,
+  paddingS: $sizeS,
+  paddingM: $sizeM,
+  paddingL: $sizeL,
+  paddingXl: $sizeXl,
+  paddingXxl: $sizeXl * 2
+);
+
+@each $paddingName, $paddingValue in $padding {
+  .vuiPrompt--#{$paddingName} {
+    padding: $paddingValue;
+  }
+}

package/lib/components/screenBlock/ScreenBlock.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    onClick?: () => void;
+    children: React.ReactNode;
+};
+export declare const VuiScreenBlock: ({ onClick, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/screenBlock/ScreenBlock.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const VuiScreenBlock = ({ onClick, children }) => {
+    return (_jsxs("div", Object.assign({ className: "vuiScreenBlock" }, { children: [children, _jsx("div", { className: "vuiScreenBlock__mask", onClick: onClick })] })));
+};

package/lib/components/screenBlock/_index.scss

@@ -0,0 +1,17 @@
+.vuiScreenBlock {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $screenBlockZIndex;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vuiScreenBlock__mask {
+  width: 100%;
+  height: 100%;
+  background-color: transparentize($colorFullShade, 0.4);
+}

package/lib/components/searchInput/SearchInput.d.ts

@@ -0,0 +1,13 @@
+import { ChangeEventHandler, FormEventHandler } from "react";
+declare const SIZE: readonly ["m", "l"];
+type Props = {
+    className?: string;
+    value?: string;
+    size?: (typeof SIZE)[number];
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    placeholder?: string;
+    autoFocus?: boolean;
+    onSubmit?: FormEventHandler;
+};
+export declare const VuiSearchInput: ({ className, size, value, onChange, placeholder, autoFocus, onSubmit, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/searchInput/SearchInput.js

@@ -0,0 +1,19 @@
+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 } from "react/jsx-runtime";
+import classNames from "classnames";
+const SIZE = ["m", "l"];
+export const VuiSearchInput = (_a) => {
+    var { className, size = "m", value, onChange, placeholder, autoFocus, onSubmit } = _a, rest = __rest(_a, ["className", "size", "value", "onChange", "placeholder", "autoFocus", "onSubmit"]);
+    const classes = classNames("vuiSearchInput", `vuiSearchInput--${size}`, className);
+    return (_jsx("form", Object.assign({ onSubmit: onSubmit }, { children: _jsx("div", Object.assign({ className: classes }, { children: _jsx("input", Object.assign({ className: "vuiSearchInput__input", type: "text", autoComplete: "off", autoCapitalize: "off", spellCheck: "false", autoFocus: autoFocus, placeholder: placeholder, value: value, onChange: onChange }, rest)) })) })));
+};

package/lib/components/searchInput/_index.scss

@@ -0,0 +1,49 @@
+.vuiSearchInput {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.vuiSearchInput__input {
+  flex-grow: 1;
+  background-color: $colorEmptyShade;
+  border: 1px solid $colorMediumShade;
+  border-radius: $sizeXs;
+  box-shadow: $shadowSmallStart;
+  transition: all $transitionSpeed;
+  outline-width: 1px !important;
+  outline-style: solid;
+  outline-color: transparent;
+  outline-offset: -1px !important;
+
+  &:focus-visible {
+    outline-color: $colorPrimary !important;
+    box-shadow: $shadowSmallEnd;
+  }
+}
+
+.vuiSearchInput__submitButton {
+  position: absolute;
+  right: $sizeS;
+  line-height: 0; // TODO: Should this be applied to all buttons?
+  color: $colorDarkShade;
+  transition: all $transitionSpeed;
+
+  &:hover {
+    color: $colorAccent;
+  }
+}
+
+.vuiSearchInput--m {
+  .vuiSearchInput__input {
+    padding: $sizeXs $sizeM;
+    font-size: $fontSizeStandard;
+  }
+}
+
+.vuiSearchInput--l {
+  .vuiSearchInput__input {
+    padding: $sizeS $sizeM;
+    font-size: $fontSizeLarge;
+  }
+}

package/lib/components/searchResult/SearchResult.d.ts

@@ -0,0 +1,21 @@
+export type SearchResult = {
+    title?: string;
+    url?: string;
+    date?: string;
+    snippet: {
+        pre: string;
+        text: string;
+        post: string;
+    };
+};
+type Props = {
+    result: SearchResult;
+    position: number;
+    isSelected?: boolean;
+    subTitle?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    snippetProps?: any;
+};
+export declare const VuiSearchResult: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement | null>>;
+export {};

package/lib/components/searchResult/SearchResult.js

@@ -0,0 +1,33 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import { VuiTitle } from "../typography/Title";
+import { VuiLink } from "../link/Link";
+import { VuiSpacer } from "../spacer/Spacer";
+import { VuiText } from "../typography/Text";
+import { VuiTextColor } from "../typography/TextColor";
+const highlightUrl = (url, text) => `${url}#:~:text=${text}`;
+export const VuiSearchResult = forwardRef((_a, ref) => {
+    var { result, position, isSelected, subTitle, children, className, snippetProps } = _a, rest = __rest(_a, ["result", "position", "isSelected", "subTitle", "children", "className", "snippetProps"]);
+    const { title, url, date, snippet: { pre, post, text } } = result;
+    // 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("vuiSearchResult", "fs-mask", className);
+    const positionClasses = classNames("vuiSearchResultPosition", {
+        "vuiSearchResultPosition--selected": isSelected
+    });
+    const hasTitle = title && title.trim().length > 0;
+    const hasUrl = url && url.trim().length > 0;
+    return (_jsxs("div", Object.assign({ className: classes, ref: ref }, rest, { children: [_jsx("div", Object.assign({ "data-testid": `searchResultCitation-${position}`, className: positionClasses }, { children: position })), (hasTitle || hasUrl) && (_jsx(VuiTitle, Object.assign({ size: "s" }, { children: hasUrl ? (_jsx(VuiLink, Object.assign({ href: highlightUrl(url, text), target: "_blank" }, { children: _jsx("h3", { children: hasTitle ? title : url }) }))) : (_jsx("h3", { children: title })) }))), subTitle && (_jsxs(_Fragment, { children: [title && _jsx(VuiSpacer, { size: "xs" }), subTitle] })), _jsx(VuiText, Object.assign({}, snippetProps, { size: "s" }, { children: _jsxs("p", { children: [date && _jsxs(VuiTextColor, Object.assign({ color: "subdued" }, { children: [date, " \u2014 "] })), pre, " ", _jsx("strong", { children: text }), " ", post] }) })), children && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), children] }))] })));
+});

package/lib/components/searchResult/SearchResult.test.d.ts

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

package/lib/components/searchResult/SearchResult.test.js

@@ -0,0 +1,280 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MemoryRouter } from "react-router-dom";
+import "@testing-library/jest-dom";
+import { VuiSearchResult } from "./SearchResult";
+import { renderWithContext } from "../context/Context.test.util";
+describe("VuiSearchResult", () => {
+    describe("renders", () => {
+        test("all props", () => {
+            const { asFragment } = renderWithContext(_jsx(VuiSearchResult, Object.assign({ result: {
+                    title: "title",
+                    url: "url",
+                    date: "date",
+                    snippet: { pre: "pre", text: "text", post: "" }
+                }, position: 1, subTitle: _jsx("div", { children: "subTitle" }), className: "customClass", snippetProps: {
+                    className: "snippetCustomClass"
+                } }, { children: _jsx("div", { children: "children" }) })), { wrapper: MemoryRouter });
+            expect(asFragment()).toMatchInlineSnapshot(`
+        <DocumentFragment>
+          <div
+            class="vuiSearchResult fs-mask customClass"
+          >
+            <div
+              class="vuiSearchResultPosition"
+              data-testid="searchResultCitation-1"
+            >
+              1
+            </div>
+            <a
+              class="vuiLink vuiTitle vuiTitle--s"
+              href="/url#:~:text=text"
+              rel="noopener"
+              target="_blank"
+            >
+              <h3>
+                title
+              </h3>
+            </a>
+            <div
+              class="vuiSpacer vuiSpacer--xs"
+            />
+            <div>
+              subTitle
+            </div>
+            <div
+              class="vuiText vuiText--s snippetCustomClass"
+            >
+              <p>
+                <span
+                  class="vuiTextColor vuiTextColor--subdued"
+                >
+                  date — 
+                </span>
+                pre 
+                <strong>
+                  text
+                </strong>
+                 
+              </p>
+            </div>
+            <div
+              class="vuiSpacer vuiSpacer--s"
+            />
+            <div>
+              children
+            </div>
+          </div>
+        </DocumentFragment>
+      `);
+        });
+        test("missing optional props", () => {
+            const { asFragment } = renderWithContext(_jsx(VuiSearchResult, Object.assign({ result: { snippet: { pre: "pre", text: "text", post: "" } }, position: 1 }, { children: _jsx("div", { children: "children" }) })), { wrapper: MemoryRouter });
+            expect(asFragment()).toMatchInlineSnapshot(`
+        <DocumentFragment>
+          <div
+            class="vuiSearchResult fs-mask"
+          >
+            <div
+              class="vuiSearchResultPosition"
+              data-testid="searchResultCitation-1"
+            >
+              1
+            </div>
+            <div
+              class="vuiText vuiText--s"
+            >
+              <p>
+                pre 
+                <strong>
+                  text
+                </strong>
+                 
+              </p>
+            </div>
+            <div
+              class="vuiSpacer vuiSpacer--s"
+            />
+            <div>
+              children
+            </div>
+          </div>
+        </DocumentFragment>
+      `);
+        });
+        test("has title but missing url", () => {
+            const { asFragment } = renderWithContext(_jsx(VuiSearchResult, Object.assign({ result: {
+                    title: "title",
+                    snippet: { pre: "pre", text: "text", post: "" }
+                }, position: 1 }, { children: _jsx("div", { children: "children" }) })), { wrapper: MemoryRouter });
+            expect(asFragment()).toMatchInlineSnapshot(`
+        <DocumentFragment>
+          <div
+            class="vuiSearchResult fs-mask"
+          >
+            <div
+              class="vuiSearchResultPosition"
+              data-testid="searchResultCitation-1"
+            >
+              1
+            </div>
+            <h3
+              class="vuiTitle vuiTitle--s"
+            >
+              title
+            </h3>
+            <div
+              class="vuiText vuiText--s"
+            >
+              <p>
+                pre 
+                <strong>
+                  text
+                </strong>
+                 
+              </p>
+            </div>
+            <div
+              class="vuiSpacer vuiSpacer--s"
+            />
+            <div>
+              children
+            </div>
+          </div>
+        </DocumentFragment>
+      `);
+        });
+        test("missing title but has url", () => {
+            const { asFragment } = renderWithContext(_jsx(VuiSearchResult, Object.assign({ result: {
+                    url: "url",
+                    snippet: { pre: "pre", text: "text", post: "" }
+                }, position: 1 }, { children: _jsx("div", { children: "children" }) })), { wrapper: MemoryRouter });
+            expect(asFragment()).toMatchInlineSnapshot(`
+        <DocumentFragment>
+          <div
+            class="vuiSearchResult fs-mask"
+          >
+            <div
+              class="vuiSearchResultPosition"
+              data-testid="searchResultCitation-1"
+            >
+              1
+            </div>
+            <a
+              class="vuiLink vuiTitle vuiTitle--s"
+              href="/url#:~:text=text"
+              rel="noopener"
+              target="_blank"
+            >
+              <h3>
+                url
+              </h3>
+            </a>
+            <div
+              class="vuiText vuiText--s"
+            >
+              <p>
+                pre 
+                <strong>
+                  text
+                </strong>
+                 
+              </p>
+            </div>
+            <div
+              class="vuiSpacer vuiSpacer--s"
+            />
+            <div>
+              children
+            </div>
+          </div>
+        </DocumentFragment>
+      `);
+        });
+        test("has empty title but has url", () => {
+            const { asFragment } = renderWithContext(_jsx(VuiSearchResult, Object.assign({ result: {
+                    title: "  ",
+                    url: "url",
+                    snippet: { pre: "pre", text: "text", post: "" }
+                }, position: 1 }, { children: _jsx("div", { children: "children" }) })), { wrapper: MemoryRouter });
+            expect(asFragment()).toMatchInlineSnapshot(`
+        <DocumentFragment>
+          <div
+            class="vuiSearchResult fs-mask"
+          >
+            <div
+              class="vuiSearchResultPosition"
+              data-testid="searchResultCitation-1"
+            >
+              1
+            </div>
+            <a
+              class="vuiLink vuiTitle vuiTitle--s"
+              href="/url#:~:text=text"
+              rel="noopener"
+              target="_blank"
+            >
+              <h3>
+                url
+              </h3>
+            </a>
+            <div
+              class="vuiText vuiText--s"
+            >
+              <p>
+                pre 
+                <strong>
+                  text
+                </strong>
+                 
+              </p>
+            </div>
+            <div
+              class="vuiSpacer vuiSpacer--s"
+            />
+            <div>
+              children
+            </div>
+          </div>
+        </DocumentFragment>
+      `);
+        });
+        test("has empty title and empty url", () => {
+            const { asFragment } = renderWithContext(_jsx(VuiSearchResult, Object.assign({ result: {
+                    title: "  ",
+                    url: "  ",
+                    snippet: { pre: "pre", text: "text", post: "" }
+                }, position: 1 }, { children: _jsx("div", { children: "children" }) })), { wrapper: MemoryRouter });
+            expect(asFragment()).toMatchInlineSnapshot(`
+        <DocumentFragment>
+          <div
+            class="vuiSearchResult fs-mask"
+          >
+            <div
+              class="vuiSearchResultPosition"
+              data-testid="searchResultCitation-1"
+            >
+              1
+            </div>
+            <div
+              class="vuiText vuiText--s"
+            >
+              <p>
+                pre 
+                <strong>
+                  text
+                </strong>
+                 
+              </p>
+            </div>
+            <div
+              class="vuiSpacer vuiSpacer--s"
+            />
+            <div>
+              children
+            </div>
+          </div>
+        </DocumentFragment>
+      `);
+        });
+    });
+});

package/lib/components/searchResult/_index.scss

@@ -0,0 +1,29 @@
+.vuiSearchResult {
+  position: relative;
+
+  & + & {
+    margin-top: $sizeL;
+  }
+}
+
+.vuiSearchResultPosition {
+  position: absolute;
+  left: -42px;
+  top: 0;
+  font-weight: 600;
+  padding: $sizeXs;
+  color: $colorSubdued;
+  padding: 4px 8px;
+  width: 30px;
+  text-align: center;
+  font-size: 12px;
+  border-radius: $sizeXs;
+  height: 23px;
+  transition: all $transitionSpeed;
+}
+
+.vuiSearchResultPosition--selected {
+  background-color: $colorPrimary;
+  color: $colorEmptyShade;
+  height: 100%;
+}

package/lib/components/searchSelect/SearchSelect.d.ts

@@ -0,0 +1,11 @@
+import { Props as OptionsListProps } from "../optionsList/OptionsList";
+import { Props as PopoverProps } from "../popover/Popover";
+type Props<T> = Pick<PopoverProps, "isOpen" | "setIsOpen"> & Pick<OptionsListProps<T>, "options"> & {
+    children: PopoverProps["button"];
+    title?: string;
+    selected: T[];
+    onSelect: (selected: T[]) => void;
+    isMultiSelect?: boolean;
+};
+export declare const VuiSearchSelect: <T extends unknown = unknown>({ children, title, isOpen, setIsOpen, options, onSelect, isMultiSelect, selected }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export {};