@vectara/vectara-ui 15.3.0 → 15.4.0

package/lib/components/table/Table.js

@@ -136,7 +136,10 @@ export const VuiTable = (_a) => {
                                             onSelectRow(selectedRows);
                                         } }) }) }))), columns.map((column) => {
                                 const { name, render, className, testId } = column;
-                                return (_jsx("td", Object.assign({ className: className, "data-testid": typeof testId === "function" ? testId(row) : testId }, { children: _jsx(VuiTableCell, Object.assign({ column: column }, { children: render ? render(row, rowIndex) : row[column.name] })) }), name));
+                                const cellClasses = classNames(className, {
+                                    "vuiTableCell--truncate": column.truncate
+                                });
+                                return (_jsx("td", Object.assign({ className: cellClasses, "data-testid": typeof testId === "function" ? testId(row) : testId }, { children: _jsx(VuiTableCell, Object.assign({ column: column }, { children: render ? render(row, rowIndex) : row[column.name] })) }), name));
                             }), (actions || hasExpandableRows) && (_jsx("td", Object.assign({ className: "vuiTableRowActions" }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "end", spacing: "xs" }, { children: [actions && (_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiTableRowActions, { row: row, actions: actions, onToggle: (isSelected) => {
                                                     if (isSelected) {
                                                         setRowBeingActedUpon(row);

package/lib/components/table/_index.scss

@@ -97,6 +97,14 @@ $tableResponsiveBreakpointSmall: 500px;
       padding-right: $sizeXxl;
     }
 
+    // This enables truncated VuiText children to actually be truncated.
+    .vuiTableCell--truncate {
+      min-width: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
     tbody tr:not(.vuiTableRowExpandedContent) {
       position: relative;
       column-gap: $sizeM;

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

@@ -10,5 +10,6 @@ export type Column<T> = {
     render?: (row: T, rowIndex: number) => React.ReactNode;
     className?: string;
     testId?: string | ((row: T) => string);
+    truncate?: boolean;
 };
 export type OnSort = (column: string, direction: "asc" | "desc" | "none") => void;

package/lib/styles/index.css

@@ -5175,6 +5175,12 @@ h2.react-datepicker__current-month {
   .vuiTable--responsive .vuiTableRow--hasActions {
     padding-right: 40px;
   }
+  .vuiTable--responsive .vuiTableCell--truncate {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
   .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) {
     position: relative;
     column-gap: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "15.3.0",
+  "version": "15.4.0",
   "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" />
+    </>
+  );
+};