chore: migrate vui-source changes to v3.3.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "1.0.1",
+  "version": "3.3.1",
   "homepage": "https://vectara.github.io/vectara-ui/",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",
@@ -28,11 +28,11 @@
     "buildDocs": "BUILD_PATH='./docs/public' PUBLIC_URL='.' react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "buildLib": "npx tsc --project tsconfig.lib.json && npm run copyStyleUtils && npm run copyComponentStyles && npm run compileCss",
+    "build": "npx tsc --project tsconfig.lib.json && npm run copyStyleUtils && npm run copyComponentStyles && npm run compileCss",
     "compileCss": "sass --no-source-map src/lib/styles/styles.scss lib/styles/index.css",
     "copyStyleUtils": "copyfiles -u 2 src/lib/sassUtils/* lib",
     "copyComponentStyles": "copyfiles -u 2 src/lib/components/index.scss lib && copyfiles -u 2 src/lib/components/**/*.scss lib && copyfiles -u 2 src/lib/components/**/**/*.scss lib",
-    "publishLib": "npm run buildLib && npm publish --access public"
+    "publish": "npm run build && npm publish --access public"
   },
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",

src/docs/Docs.tsx

@@ -81,6 +81,7 @@ const DocsContent = () => {
             target="_blank"
             color="neutral"
             size="m"
+            aria-label="Vectara UI GitHub repository"
             icon={
               <VuiIcon>
                 <BiLogoGithub />

src/docs/Page.tsx

@@ -31,6 +31,7 @@ export const Page = ({ name, examples }: { name: string; examples: ExampleType[]
           <VuiFlexContainer alignItems="center" spacing="xxs">
             <VuiFlexItem grow={false}>
               <VuiIconButton
+                aria-label="Go to previous example"
                 icon={
                   <VuiIcon>
                     <BiLeftArrowAlt />
@@ -42,8 +43,8 @@ export const Page = ({ name, examples }: { name: string; examples: ExampleType[]
             </VuiFlexItem>
 
             <VuiFlexItem>
-              {" "}
               <VuiIconButton
+                aria-label="Go to next example"
                 icon={
                   <VuiIcon>
                     <BiRightArrowAlt />

src/docs/pages.tsx

@@ -1,6 +1,5 @@
 // Components
 import { accordion } from "./pages/accordion";
-import { accountMenu } from "./pages/accountMenu";
 import { app } from "./pages/app";
 import { badge } from "./pages/badge";
 import { button } from "./pages/button";
@@ -16,6 +15,8 @@ import { formGroup } from "./pages/formGroup";
 import { grid } from "./pages/grid";
 import { horizontalRule } from "./pages/horizontalRule";
 import { icon } from "./pages/icon";
+import { infoList } from "./pages/infoList";
+import { infoMenu } from "./pages/infoMenu";
 import { infoTable } from "./pages/infoTable";
 import { input } from "./pages/input";
 import { label } from "./pages/label";
@@ -45,6 +46,7 @@ import { table } from "./pages/table";
 import { tabs } from "./pages/tabs";
 import { text } from "./pages/text";
 import { textArea } from "./pages/textArea";
+import { timeline } from "./pages/timeline";
 import { toggle } from "./pages/toggle";
 import { topicButton } from "./pages/topicButton";
 import { validation } from "./pages/validation";
@@ -63,19 +65,19 @@ export const categories: Category[] = [
   },
   {
     name: "Application",
-    pages: [app, accountMenu, drawer, modal, notifications]
+    pages: [app, drawer, modal, notifications]
   },
   {
     name: "Info",
-    pages: [table, infoTable, statList, list]
+    pages: [table, infoTable, infoList, statList, list]
   },
   {
     name: "Layout",
-    pages: [tabs, accordion, popover, flex, grid, spacer, card, horizontalRule]
+    pages: [tabs, accordion, popover, infoMenu, flex, grid, spacer, card, horizontalRule]
   },
   {
     name: "Content",
-    pages: [badge, status, callout, code, icon, progressBar, spinner, text]
+    pages: [badge, status, callout, timeline, code, icon, progressBar, spinner, text]
   },
   {
     name: "Form",

src/docs/pages/button/IconButton.tsx

@@ -21,7 +21,14 @@ export const IconButton = () => {
       <VuiFlexContainer>
         {BUTTON_COLOR.map((color) => (
           <VuiFlexItem grow={false} key={color}>
-            <VuiIconButton icon={icon} color={color} />
+            <VuiIconButton
+              aria-label="Example button"
+              icon={icon}
+              color={color}
+              onClick={() => console.log("click")}
+              onMouseOver={() => console.log("mouse over")}
+              onMouseOut={() => console.log("mouse out")}
+            />
           </VuiFlexItem>
         ))}
       </VuiFlexContainer>
@@ -31,7 +38,7 @@ export const IconButton = () => {
       <VuiFlexContainer>
         {BUTTON_SIZE.map((size) => (
           <VuiFlexItem grow={false} key={size}>
-            <VuiIconButton icon={icon} color="primary" size={size} />
+            <VuiIconButton aria-label="Example button" icon={icon} color="primary" size={size} />
           </VuiFlexItem>
         ))}
       </VuiFlexContainer>

src/docs/pages/button/Link.tsx

@@ -2,7 +2,14 @@ import { VuiButtonPrimary } from "../../../lib";
 
 export const Link = () => {
   return (
-    <VuiButtonPrimary color="accent" href="https://vectara.com" target="_blank">
+    <VuiButtonPrimary
+      color="accent"
+      href="https://vectara.com"
+      target="_blank"
+      onClick={() => console.log("click")}
+      onMouseOver={() => console.log("mouse over")}
+      onMouseOut={() => console.log("mouse out")}
+    >
       Visit Vectara.com
     </VuiButtonPrimary>
   );

src/docs/pages/button/Sizes.tsx

@@ -32,7 +32,15 @@ export const Sizes = () => {
         <VuiFlexContainer>
           {BUTTON_SIZE.map((size) => (
             <VuiFlexItem grow={false} key={size}>
-              <VuiButtonPrimary icon={icon} color="primary" size={size} isLoading={isLoading}>
+              <VuiButtonPrimary
+                icon={icon}
+                color="primary"
+                size={size}
+                isLoading={isLoading}
+                onClick={() => console.log("click")}
+                onMouseOver={() => console.log("mouse over")}
+                onMouseOut={() => console.log("mouse out")}
+              >
                 Size {size}
               </VuiButtonPrimary>
             </VuiFlexItem>

src/docs/pages/code/FullHeight.tsx

@@ -2,50 +2,49 @@ import { VuiCode } from "../../../lib";
 
 export const FullHeight = () => (
   <VuiCode language="tsx" fullHeight>
-    {`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" />
-    </>
-  );
-};
-`}
+    {`
+curl -X POST \
+-H "customer-id: 2219234556" \
+-H "Content-Type: application/json" \
+-H "Authorization: Bearer eyJraWQiOiJqUENhYmhHTndTTlBOdFE1bXh6NWQxOFV2a0xyQVc3aEZsS3N2dU9qcDNVPSIsImFsZyI6IlJTMjU2In0.eyJzdWIiOiI1ODAxMzNlMC05MDIxLTcwNzgtMThiNC03MjkwNmYxNDEwYWMiLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLXdlc3QtMi5hbWF6b25hd3MuY29tXC91cy13ZXN0LTJfYjlwMnUza2RHIiwiY29nbml0bzp1c2VybmFtZSI6ImNqK2F1ZzFAdmVjdGFyYS5jb20iLCJvcmlnaW5fanRpIjoiOWU5MDhmMmMtMTJlYy00NTEyLWFjMTEtOGNhYjI1YTlkNjM2IiwiYXVkIjoiNG0zdDBnc3MyZnJ0cTRodTc0YmMxNmVjN3IiLCJldmVudF9pZCI6IjFlZWIzZWQ5LTA1NzctNDg5YS05YWIwLTdhNGQ3YmIxMWRiYiIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNzIwNzM0MDEzLCJleHAiOjE3MjA3NjM0OTksImlhdCI6MTcyMDc1OTg5OSwianRpIjoiYmE0ZGMzYWQtNGU0Mi00NTJhLTg4NmMtNWVhYzIzM2Y2ODA0IiwiZW1haWwiOiJjaithdWcxQHZlY3RhcmEuY29tIn0.oyXW3uLvjaphK6-xXonHeU3OlK6FVdOEK3mNtb9EuLyS1d6HfO1fP0tvHYPzPOmg5tmdKGdHajmMxkehVN4kwRslYTQLRzBWiZgs1LcMPU9HbZ8_YUAu97MT_KW8erEIy9lRYIP3jAWBb7DN_At1NLri4pxXAvEFLNbgsmgjAJCmkVxM4MrKUC37lAR_f_prjb38LFZYNdkP_851UGWYblc2DNiIhGomIrCMVxrHDf5OTlH03sJwQoreFzdI9-W_izdfcCEayKZEDMjkOf9g-8uvdvQ_-817rcssu0DAlfWIuW9K2NRVfPw7L5ik-vZJyGnS23qlsyJ9vpRnXvUxeg"  \
+ https://api.vectara.dev:443/v2/chats \
+-d @- <<END;
+{
+  "query": "what is time?",
+  "search": {
+    "corpora": [
+      {
+        "corpus_key": "quanta_38",
+        "metadata_filter": "",
+        "lexical_interpolation": 0.005,
+        "custom_dimensions": {}
+      }
+    ],
+    "offset": 0,
+    "limit": 10,
+    "context_configuration": {
+      "sentences_before": 2,
+      "sentences_after": 2,
+      "start_tag": "%START_SNIPPET%",
+      "end_tag": "%END_SNIPPET%"
+    },
+    "reranker": {
+      "type": "none"
+    }
+  },
+  "stream_response": true,
+  "generation": {
+    "prompt_name": "vectara-summary-ext-v1.3.0",
+    "max_used_search_results": 2,
+    "prompt_text": "",
+    "response_language": "eng",
+    "enable_factual_consistency_score": true
+  },
+  "chat": {
+    "store": true
+  }
+}
+END
+        `}
   </VuiCode>
 );

src/docs/pages/formGroup/FormGroup.tsx

@@ -1,5 +1,13 @@
 import { useState } from "react";
-import { RadioButtonConfig, VuiFormGroup, VuiSelect, VuiSpacer, VuiSuperRadioGroup, VuiTextInput } from "../../../lib";
+import {
+  RadioButtonConfig,
+  VuiFormGroup,
+  VuiSelect,
+  VuiSpacer,
+  VuiSuperRadioGroup,
+  VuiTextArea,
+  VuiTextInput
+} from "../../../lib";
 import { Subsection } from "../../components/Subsection";
 
 type Pizza = "pepperoni" | "mushrooms" | "jalapenos";
@@ -59,9 +67,15 @@ export const FormGroup = () => {
 
         <VuiSpacer size="m" />
 
-        <VuiFormGroup label="Select option" labelFor="superRadioGroup">
+        <VuiFormGroup label="Select option" labelFor="superRadioGroup" helpText="Choose wisely.">
           <VuiSuperRadioGroup groupName="superRadioGroup" group={group} onChange={onChange} />
         </VuiFormGroup>
+
+        <VuiSpacer size="m" />
+
+        <VuiFormGroup label="Enter text" labelFor="textArea" helpText="Enter some text here.">
+          <VuiTextArea id="textArea" value="Text area" onChange={() => undefined} />
+        </VuiFormGroup>
       </Subsection>
 
       <Subsection title="Without help text">

src/docs/pages/formGroup/NonFormElement.tsx

@@ -0,0 +1,19 @@
+import { VuiCallout, VuiFormGroup } from "../../../lib";
+
+export const NonFormElement = () => {
+  return (
+    <>
+      <VuiFormGroup
+        label="Enter text"
+        labelFor="textArea"
+        helpText="Enter some text here"
+        errors={[
+          "This is an error message.",
+          "Here's a second validation error that you must address before submitting this form."
+        ]}
+      >
+        <VuiCallout color="accent" headingElement="h4" title="This field isn't available right now." />
+      </VuiFormGroup>
+    </>
+  );
+};

src/docs/pages/formGroup/index.tsx

@@ -1,13 +1,22 @@
 import { FormGroup } from "./FormGroup";
+import { NonFormElement } from "./NonFormElement";
+
 const FormGroupSource = require("!!raw-loader!./FormGroup");
+const NonFormElementSource = require("!!raw-loader!./NonFormElement");
 
 export const formGroup = {
   name: "Form Group",
   path: "/formGroup",
   examples: [
     {
+      name: "Form elements",
       component: <FormGroup />,
       source: FormGroupSource.default.toString()
+    },
+    {
+      name: "Non-form elements",
+      component: <NonFormElement />,
+      source: NonFormElementSource.default.toString()
     }
   ]
 };

src/docs/pages/icon/InlineText.tsx

@@ -0,0 +1,15 @@
+import { BiStar } from "react-icons/bi";
+import { VuiIcon, VuiText } from "../../../lib";
+
+export const InlineText = () => {
+  return (
+    <VuiText>
+      <p>
+        Here's some text inline with an icon{" "}
+        <VuiIcon size="s">
+          <BiStar />
+        </VuiIcon>
+      </p>
+    </VuiText>
+  );
+};

src/docs/pages/icon/index.tsx

@@ -1,8 +1,10 @@
 import { Sizes } from "./Sizes";
 import { Colors } from "./Colors";
+import { InlineText } from "./InlineText";
 
 const SizesSource = require("!!raw-loader!./Sizes");
 const ColorsSource = require("!!raw-loader!./Colors");
+const InlineTextSource = require("!!raw-loader!./InlineText");
 
 export const icon = {
   name: "Icon",
@@ -17,6 +19,11 @@ export const icon = {
       name: "Colors",
       component: <Colors />,
       source: ColorsSource.default.toString()
+    },
+    {
+      name: "Inline Text",
+      component: <InlineText />,
+      source: InlineTextSource.default.toString()
     }
   ]
 };

src/docs/pages/infoList/InfoList.tsx

@@ -0,0 +1,28 @@
+import { VuiButtonSecondary, VuiSpacer, VuiText, VuiInfoList } from "../../../lib";
+
+export const InfoList = () => {
+  return (
+    <VuiInfoList
+      info={[
+        { title: "Email", value: "email@email.com" },
+        { title: "Account number", value: "1234567890" },
+        {
+          title: "Account size",
+          value: (
+            <>
+              <VuiText>
+                <p>22 MB</p>
+              </VuiText>
+
+              <VuiSpacer size="xs" />
+
+              <VuiButtonSecondary size="xs" color="neutral">
+                Refresh
+              </VuiButtonSecondary>
+            </>
+          )
+        }
+      ]}
+    />
+  );
+};