@vectara/vectara-ui 15.2.0 → 15.3.1

package/lib/components/button/BaseButton.d.ts

@@ -25,6 +25,7 @@ export type BaseButtonProps = {
     title?: string;
     isSubmit?: boolean;
     isLoading?: boolean;
+    truncate?: boolean;
 };
 export declare const BaseButton: import("react").ForwardRefExoticComponent<BaseButtonProps & {
     spinnerColor?: "accent" | "primary" | "success" | "warning" | "danger" | "subdued" | "empty" | "dark" | undefined;

package/lib/components/button/BaseButton.js

@@ -27,7 +27,7 @@ const sizeToSpinnerSizeMap = {
     l: "m"
 };
 export const BaseButton = forwardRef((_a, ref) => {
-    var { children, icon, iconSide = "left", align = "center", className, size = "m", fullWidth, onClick, onMouseOver, onMouseOut, onMouseMove, tabIndex, isInert, isDisabled, href, target, track, htmlFor, isSubmit, isLoading, spinnerColor } = _a, rest = __rest(_a, ["children", "icon", "iconSide", "align", "className", "size", "fullWidth", "onClick", "onMouseOver", "onMouseOut", "onMouseMove", "tabIndex", "isInert", "isDisabled", "href", "target", "track", "htmlFor", "isSubmit", "isLoading", "spinnerColor"]);
+    var { children, icon, iconSide = "left", align = "center", className, size = "m", fullWidth, onClick, onMouseOver, onMouseOut, onMouseMove, tabIndex, isInert, isDisabled, href, target, track, htmlFor, isSubmit, isLoading, spinnerColor, truncate } = _a, rest = __rest(_a, ["children", "icon", "iconSide", "align", "className", "size", "fullWidth", "onClick", "onMouseOver", "onMouseOut", "onMouseMove", "tabIndex", "isInert", "isDisabled", "href", "target", "track", "htmlFor", "isSubmit", "isLoading", "spinnerColor", "truncate"]);
     const { createLink } = useVuiContext();
     const classes = classNames("vuiBaseButton", className, `vuiBaseButton--${size}`, alignToClassMap[align], {
         "vuiBaseButton-isInert": isInert,
@@ -62,10 +62,13 @@ export const BaseButton = forwardRef((_a, ref) => {
             _jsxs("button", Object.assign({ className: classes, tabIndex: -1, ref: ref }, { children: [iconContainer, children] }))), target,
             tabIndex }, rest), getTrackingProps(track)));
     }
+    const labelClasses = classNames({
+        "vuiBaseButtonLabel--truncate": truncate
+    });
     const props = Object.assign({ onClick,
         onMouseOver,
         onMouseOut,
         onMouseMove,
         tabIndex, type: isSubmit ? "submit" : "button", disabled: isDisabled }, rest);
-    return (_jsxs("button", Object.assign({ className: classes }, props, { ref: ref }, { children: [iconContainer, children] })));
+    return (_jsxs("button", Object.assign({ className: classes }, props, { ref: ref }, { children: [iconContainer, _jsx("span", Object.assign({ className: labelClasses }, { children: children }))] })));
 });

package/lib/components/button/baseButton.scss

@@ -25,7 +25,7 @@
   font-weight: 500;
   box-shadow: $shadowSmallStart;
   transition: all $transitionSpeed;
-  line-height: 1;
+  line-height: 1.2;
   cursor: pointer;
 }
 
@@ -94,3 +94,8 @@
   padding: $sizeS $sizeL;
   height: 47px;
 }
+
+.vuiBaseButtonLabel--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/lib/styles/index.css

@@ -705,7 +705,7 @@ fieldset {
   font-weight: 500;
   box-shadow: rgba(60, 64, 67, 0.3) 0px 0px 0px 0px, rgba(60, 64, 67, 0.15) 0px 0px 0px 0px;
   transition: all 0.2s;
-  line-height: 1;
+  line-height: 1.2;
   cursor: pointer;
 }
 
@@ -771,6 +771,11 @@ fieldset {
   height: 47px;
 }
 
+.vuiBaseButtonLabel--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .vuiButtonPrimary:hover {
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "15.2.0",
+  "version": "15.3.1",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",
@@ -23,6 +23,13 @@
   "module": "lib/index.js",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
+  "files": [
+    "lib/",
+    "src/docs/",
+    "README.md",
+    "NO_LICENSE",
+    "CHANGELOG.md"
+  ],
   "scripts": {
     "start": "PORT=2000 react-scripts start",
     "buildDocs": "BUILD_PATH='./docs/public' PUBLIC_URL='.' react-scripts build",

package/src/docs/Docs.tsx

@@ -0,0 +1,102 @@
+import { Link, Navigate, Route, HashRouter as Router, Routes, useLocation } from "react-router-dom";
+import { BiLogoGithub } from "react-icons/bi";
+import {
+  VuiAppHeader,
+  VuiIconButton,
+  VuiFlexContainer,
+  VuiFlexItem,
+  VuiIcon,
+  VuiTitle,
+  VuiAppLayout,
+  VuiButtonSecondary,
+  VuiContextProvider,
+  LinkProps
+} from "../lib";
+import { HeaderLogo } from "./components/HeaderLogo";
+import { categories } from "./pages";
+import { Home } from "./Home";
+import { Page } from "./Page";
+import "./index.scss";
+
+export const Docs = () => {
+  return (
+    <Router>
+      <DocsContent />
+    </Router>
+  );
+};
+
+const DocsContent = () => {
+  const location = useLocation();
+
+  const routes: React.ReactNode[] = [];
+
+  categories.forEach(({ pages }) => {
+    pages.forEach((page) => {
+      const { name, path } = page;
+      routes.push(<Route key={name} path={path} element={<Page page={page} />} />);
+    });
+  });
+
+  const linkProvider = (linkConfig: LinkProps) => {
+    const { className, href, onClick, children, ...rest } = linkConfig;
+
+    return (
+      <Link className={className} to={href ?? ""} onClick={onClick} {...rest}>
+        {children}
+      </Link>
+    );
+  };
+
+  const pathProvider = () => {
+    return location.pathname;
+  };
+
+  return (
+    <VuiContextProvider linkProvider={linkProvider} pathProvider={pathProvider}>
+      <VuiAppHeader
+        left={
+          <VuiFlexContainer spacing="m" alignItems="center">
+            <VuiFlexItem grow={false} shrink={false}>
+              <HeaderLogo />
+            </VuiFlexItem>
+
+            <VuiFlexItem grow={false} shrink={false}>
+              <VuiTitle size="xs">
+                <h1>Vectara UI Library</h1>
+              </VuiTitle>
+            </VuiFlexItem>
+
+            <VuiFlexItem grow={false} shrink={false}>
+              <VuiButtonSecondary size="s" color="neutral" href="/">
+                Home
+              </VuiButtonSecondary>
+            </VuiFlexItem>
+          </VuiFlexContainer>
+        }
+        right={
+          <VuiIconButton
+            href="https://github.com/vectara/vectara-ui"
+            target="_blank"
+            color="neutral"
+            size="m"
+            aria-label="Vectara UI GitHub repository"
+            icon={
+              <VuiIcon>
+                <BiLogoGithub />
+              </VuiIcon>
+            }
+          />
+        }
+      />
+
+      <VuiAppLayout navItems={categories}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          {routes}
+          <Route path="*" element={<Navigate replace to="/" />} />
+        </Routes>
+      </VuiAppLayout>
+    </VuiContextProvider>
+  );
+};

package/src/docs/Home.tsx

@@ -0,0 +1,123 @@
+import { BiLinkExternal } from "react-icons/bi";
+import {
+  VuiTitle,
+  VuiAppContent,
+  VuiSpacer,
+  VuiCard,
+  VuiFlexContainer,
+  VuiFlexItem,
+  VuiText,
+  VuiLink,
+  VuiIcon,
+  VuiHorizontalRule
+} from "../lib";
+
+export const Home = () => {
+  return (
+    <VuiAppContent padding="l">
+      <VuiFlexContainer alignItems="center" justifyContent="center">
+        <VuiFlexItem className="homeCard">
+          <VuiCard
+            header={
+              <VuiTitle size="m">
+                <h2>Vectara UI Library</h2>
+              </VuiTitle>
+            }
+            body={
+              <>
+                <VuiFlexContainer alignItems="start" justifyContent="center">
+                  <VuiFlexItem shrink={false} grow={false}>
+                    <VuiText size="l">
+                      <p>✨</p>
+                    </VuiText>
+                  </VuiFlexItem>
+
+                  <VuiFlexItem grow={1}>
+                    <VuiText size="m">
+                      <p>The Vectara UI Library is a React component library built with TypeScript and SCSS.</p>
+                    </VuiText>
+                  </VuiFlexItem>
+                </VuiFlexContainer>
+
+                <VuiSpacer size="m" />
+
+                <VuiFlexContainer alignItems="start" justifyContent="center">
+                  <VuiFlexItem shrink={false} grow={false}>
+                    <VuiText size="l">
+                      <p>🚨</p>
+                    </VuiText>
+                  </VuiFlexItem>
+
+                  <VuiFlexItem grow={1}>
+                    <VuiText size="m">
+                      <p>
+                        We solely intend this library for internal use by{" "}
+                        <VuiLink href="http://vectara.com/">Vectara</VuiLink>. Vectara, Inc. reserves all rights. For
+                        more information, see the{" "}
+                        <VuiLink href="https://github.com/vectara/vectara-ui/blob/main/README.md">README</VuiLink> and{" "}
+                        <VuiLink href="https://github.com/vectara/vectara-ui/blob/main/NO_LICENSE">NO_LICENSE</VuiLink>.
+                      </p>
+                    </VuiText>
+                  </VuiFlexItem>
+                </VuiFlexContainer>
+
+                <VuiSpacer size="m" />
+
+                <VuiFlexContainer alignItems="start" justifyContent="center">
+                  <VuiFlexItem shrink={false} grow={false}>
+                    <VuiText size="l">
+                      <p>🙌</p>
+                    </VuiText>
+                  </VuiFlexItem>
+
+                  <VuiFlexItem grow={1}>
+                    <VuiText size="m">
+                      <p>
+                        That said, we welcome bug reports and feature requests on our{" "}
+                        <VuiLink href="https://github.com/vectara/vectara-ui" target="_blank">
+                          GitHub repo{" "}
+                          <VuiIcon inline size="s">
+                            <BiLinkExternal />
+                          </VuiIcon>
+                        </VuiLink>
+                        .
+                      </p>
+                    </VuiText>
+                  </VuiFlexItem>
+                </VuiFlexContainer>
+
+                <VuiSpacer size="m" />
+                <VuiHorizontalRule />
+                <VuiSpacer size="m" />
+
+                <VuiTitle size="s">
+                  <h3>Dependencies</h3>
+                </VuiTitle>
+
+                <VuiSpacer size="s" />
+
+                <VuiText>
+                  <ul>
+                    <li>
+                      <strong>
+                        <VuiLink href="https://react-icons.github.io/react-icons/icons/bi/">BoxIcons</VuiLink>
+                      </strong>{" "}
+                      for icons
+                    </li>
+
+                    <li>
+                      <strong>
+                        <VuiLink href="https://prismjs.com/">PrismJS</VuiLink>
+                      </strong>{" "}
+                      for syntax highlighting
+                    </li>
+                  </ul>
+                </VuiText>
+              </>
+            }
+          />
+        </VuiFlexItem>
+      </VuiFlexContainer>
+    </VuiAppContent>
+  );
+};

package/src/docs/Page.tsx

@@ -0,0 +1,79 @@
+import { useLocation, useNavigate } from "react-router-dom";
+import { BiRightArrowAlt, BiLeftArrowAlt } from "react-icons/bi";
+import { VuiIconButton, VuiFlexContainer, VuiFlexItem, VuiIcon, VuiTitle, VuiAppContent, VuiSpacer } from "../lib";
+import { Page as PageType, paths } from "./pages";
+import { Example } from "./components/Example";
+import React from "react";
+
+export const Page = ({ page }: { page: PageType }) => {
+  const { name, example, examples } = page;
+  const location = useLocation();
+  const navigate = useNavigate();
+  const currentPageIndex = paths.list.findIndex((page) => page.path === location.pathname);
+
+  const navigateToPreviousPage = () => {
+    const prevIndex = currentPageIndex === 0 ? paths.list.length - 1 : currentPageIndex - 1;
+    navigate(paths.list[prevIndex].path);
+  };
+
+  const navigateToNextPage = () => {
+    const nextIndex = currentPageIndex === paths.list.length - 1 ? 0 : currentPageIndex + 1;
+    navigate(paths.list[nextIndex].path);
+  };
+  return (
+    <VuiAppContent padding="l">
+      <VuiFlexContainer alignItems="center" justifyContent="spaceBetween">
+        <VuiFlexItem grow={false}>
+          <VuiTitle size="m">
+            <h2>{name}</h2>
+          </VuiTitle>
+        </VuiFlexItem>
+
+        <VuiFlexItem>
+          <VuiFlexContainer alignItems="center" spacing="xxs">
+            <VuiFlexItem grow={false}>
+              <VuiIconButton
+                aria-label="Go to previous example"
+                icon={
+                  <VuiIcon>
+                    <BiLeftArrowAlt />
+                  </VuiIcon>
+                }
+                color="neutral"
+                onClick={() => navigateToPreviousPage()}
+              />
+            </VuiFlexItem>
+
+            <VuiFlexItem>
+              <VuiIconButton
+                aria-label="Go to next example"
+                icon={
+                  <VuiIcon>
+                    <BiRightArrowAlt />
+                  </VuiIcon>
+                }
+                color="neutral"
+                onClick={() => navigateToNextPage()}
+              />
+            </VuiFlexItem>
+          </VuiFlexContainer>
+        </VuiFlexItem>
+      </VuiFlexContainer>
+
+      <VuiSpacer size="m" />
+
+      <>
+        {example ? (
+          <Example name={undefined} component={example.component} source={example.source} />
+        ) : (
+          examples?.map(({ name: exampleName, component, source }) => (
+            <React.Fragment key={`example-${name}-${exampleName}`}>
+              <Example name={exampleName} component={component} source={source} />
+              <VuiSpacer size="l" />
+            </React.Fragment>
+          ))
+        )}
+      </>
+    </VuiAppContent>
+  );
+};

package/src/docs/components/Example.tsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { VuiCode, VuiSpacer, VuiTab, VuiTabs, VuiTitle } from "../../lib";
+
+type Props = {
+  name?: string;
+  component: React.ReactNode;
+  source: string;
+};
+
+export const Example = ({ name, component, source }: Props) => {
+  const [tab, setTab] = useState<"example" | "source">("example");
+
+  return (
+    <>
+      {name && (
+        <VuiTitle size="s">
+          <h3>{name}</h3>
+        </VuiTitle>
+      )}
+
+      <VuiSpacer size="xs" />
+
+      <VuiTabs>
+        <VuiTab isActive={tab === "example"} onClick={() => setTab("example")}>
+          Example
+        </VuiTab>
+
+        <VuiTab isActive={tab === "source"} onClick={() => setTab("source")}>
+          Source
+        </VuiTab>
+      </VuiTabs>
+
+      {tab === "example" && (
+        <>
+          <VuiSpacer size="m" />
+          {component}
+        </>
+      )}
+      {tab === "source" && <VuiCode language="tsx">{source}</VuiCode>}
+
+      <VuiSpacer size="l" />
+    </>
+  );
+};