@vectara/vectara-ui 18.4.0 → 19.1.0

package/src/docs/pages/sparkline/index.tsx

@@ -0,0 +1,22 @@
+import { Basic } from "./Basic";
+import { Inline } from "./Inline";
+
+const BasicSource = require("!!raw-loader!./Basic");
+const InlineSource = require("!!raw-loader!./Inline");
+
+export const sparkline = {
+  name: "Sparkline",
+  path: "/sparkline",
+  examples: [
+    {
+      name: "Basic",
+      component: <Basic />,
+      source: BasicSource.default.toString()
+    },
+    {
+      name: "Inline with stats",
+      component: <Inline />,
+      source: InlineSource.default.toString()
+    }
+  ]
+};

package/src/docs/pages/treeMap/Basic.tsx

@@ -0,0 +1,14 @@
+import { VuiTreeMap } from "../../../lib";
+
+const data = [
+  { name: "Documentation", value: 4200 },
+  { name: "Blog", value: 2100 },
+  { name: "Support tickets", value: 1450 },
+  { name: "Forums", value: 980 },
+  { name: "Release notes", value: 620 },
+  { name: "Changelog", value: 340 }
+];
+
+export const Basic = () => {
+  return <VuiTreeMap data={data} categoryKey="name" valueKey="value" />;
+};

package/src/docs/pages/treeMap/Nested.tsx

@@ -0,0 +1,88 @@
+import { VuiTreeMap } from "../../../lib";
+
+// The same base categories and relative sizes as the Basic example. Each category's value is split
+// across eight nested subcategories so the parents sum to the same totals, keeping their ratios identical.
+const data = [
+  {
+    name: "Documentation",
+    children: [
+      { name: "Documentation 1", value: 826 },
+      { name: "Documentation 2", value: 689 },
+      { name: "Documentation 3", value: 620 },
+      { name: "Documentation 4", value: 551 },
+      { name: "Documentation 5", value: 482 },
+      { name: "Documentation 6", value: 413 },
+      { name: "Documentation 7", value: 344 },
+      { name: "Documentation 8", value: 275 }
+    ]
+  },
+  {
+    name: "Blog",
+    children: [
+      { name: "Blog 1", value: 413 },
+      { name: "Blog 2", value: 344 },
+      { name: "Blog 3", value: 310 },
+      { name: "Blog 4", value: 275 },
+      { name: "Blog 5", value: 241 },
+      { name: "Blog 6", value: 207 },
+      { name: "Blog 7", value: 172 },
+      { name: "Blog 8", value: 138 }
+    ]
+  },
+  {
+    name: "Support tickets",
+    children: [
+      { name: "Support tickets 1", value: 285 },
+      { name: "Support tickets 2", value: 238 },
+      { name: "Support tickets 3", value: 214 },
+      { name: "Support tickets 4", value: 190 },
+      { name: "Support tickets 5", value: 166 },
+      { name: "Support tickets 6", value: 143 },
+      { name: "Support tickets 7", value: 119 },
+      { name: "Support tickets 8", value: 95 }
+    ]
+  },
+  {
+    name: "Forums",
+    children: [
+      { name: "Forums 1", value: 193 },
+      { name: "Forums 2", value: 161 },
+      { name: "Forums 3", value: 145 },
+      { name: "Forums 4", value: 129 },
+      { name: "Forums 5", value: 112 },
+      { name: "Forums 6", value: 96 },
+      { name: "Forums 7", value: 80 },
+      { name: "Forums 8", value: 64 }
+    ]
+  },
+  {
+    name: "Release notes",
+    children: [
+      { name: "Release notes 1", value: 122 },
+      { name: "Release notes 2", value: 102 },
+      { name: "Release notes 3", value: 91 },
+      { name: "Release notes 4", value: 81 },
+      { name: "Release notes 5", value: 71 },
+      { name: "Release notes 6", value: 61 },
+      { name: "Release notes 7", value: 51 },
+      { name: "Release notes 8", value: 41 }
+    ]
+  },
+  {
+    name: "Changelog",
+    children: [
+      { name: "Changelog 1", value: 67 },
+      { name: "Changelog 2", value: 56 },
+      { name: "Changelog 3", value: 50 },
+      { name: "Changelog 4", value: 45 },
+      { name: "Changelog 5", value: 39 },
+      { name: "Changelog 6", value: 33 },
+      { name: "Changelog 7", value: 28 },
+      { name: "Changelog 8", value: 22 }
+    ]
+  }
+];
+
+export const Nested = () => {
+  return <VuiTreeMap data={data} categoryKey="name" valueKey="value" childrenKey="children" height={440} />;
+};

package/src/docs/pages/treeMap/index.tsx

@@ -0,0 +1,22 @@
+import { Basic } from "./Basic";
+import { Nested } from "./Nested";
+
+const BasicSource = require("!!raw-loader!./Basic");
+const NestedSource = require("!!raw-loader!./Nested");
+
+export const treeMap = {
+  name: "Tree map",
+  path: "/tree-map",
+  examples: [
+    {
+      name: "Basic",
+      component: <Basic />,
+      source: BasicSource.default.toString()
+    },
+    {
+      name: "Nested",
+      component: <Nested />,
+      source: NestedSource.default.toString()
+    }
+  ]
+};

package/src/docs/pages.tsx

@@ -3,6 +3,7 @@ import { accordion } from "./pages/accordion";
 import { accountButton } from "./pages/accountButton";
 import { app } from "./pages/app";
 import { badge } from "./pages/badge";
+import { barChart } from "./pages/barChart";
 import { button } from "./pages/button";
 import { callout } from "./pages/callout";
 import { card } from "./pages/card";
@@ -11,12 +12,16 @@ import { checkbox } from "./pages/checkbox";
 import { chip } from "./pages/chip";
 import { code } from "./pages/code";
 import { codeEditor } from "./pages/codeEditor";
+import { composedChart } from "./pages/composedChart";
+import { colorPalette } from "./pages/colorPalette";
 import { complexConfigurationButton } from "./pages/complexConfigurationButton";
+import { composer } from "./pages/composer";
 import { copyButton } from "./pages/copyButton";
 import { datePicker } from "./pages/datePicker";
 import { drawer } from "./pages/drawer";
 import { durationBar } from "./pages/durationBar";
 import { errorBoundary } from "./pages/errorBoundary";
+import { fileDropTarget } from "./pages/fileDropTarget";
 import { flex } from "./pages/flex";
 import { formGroup } from "./pages/formGroup";
 import { grid } from "./pages/grid";
@@ -31,6 +36,7 @@ import { inProgress } from "./pages/inProgress";
 import { input } from "./pages/input";
 import { itemsInput } from "./pages/itemsInput";
 import { label } from "./pages/label";
+import { lineChart } from "./pages/lineChart";
 import { link } from "./pages/link";
 import { list } from "./pages/list";
 import { menu } from "./pages/menu";
@@ -40,17 +46,21 @@ import { optionsButton } from "./pages/optionsButton";
 import { optionsList } from "./pages/optionsList";
 import { pagination } from "./pages/pagination";
 import { panel } from "./pages/panel";
+import { patch } from "./pages/patch";
+import { pieChart } from "./pages/pieChart";
 import { popover } from "./pages/popover";
 import { progressBar } from "./pages/progressBar";
 import { prompt } from "./pages/prompt";
 import { radioButton } from "./pages/radioButton";
 import { searchInput } from "./pages/searchInput";
 import { searchResult } from "./pages/searchResult";
+import { scatterChart } from "./pages/scatterChart";
 import { searchSelect } from "./pages/searchSelect";
 import { select } from "./pages/select";
 import { setting } from "./pages/setting";
 import { menuList } from "./pages/menuList";
 import { spacer } from "./pages/spacer";
+import { sparkline } from "./pages/sparkline";
 import { spinner } from "./pages/spinner";
 import { stat } from "./pages/stat";
 import { status } from "./pages/status";
@@ -69,6 +79,7 @@ import { textArea } from "./pages/textArea";
 import { theme } from "./pages/theme";
 import { portalContainer } from "./pages/portalContainer";
 import { timeline } from "./pages/timeline";
+import { treeMap } from "./pages/treeMap";
 import { toggle } from "./pages/toggle";
 import { tooltip } from "./pages/tooltip";
 import { topicButton } from "./pages/topicButton";
@@ -84,11 +95,11 @@ type Example = { component: React.ReactNode; source: string };
 export const categories: Category[] = [
   {
     name: "Query",
-    pages: [chat, prompt, searchInput, searchResult, summary]
+    pages: [chat, composer, prompt, searchInput, searchResult, summary]
   },
   {
     name: "Application",
-    pages: [app, drawer, modal, portalContainer, notifications, accountButton, theme]
+    pages: [app, drawer, modal, portalContainer, notifications, accountButton, theme, colorPalette]
   },
   {
     name: "Info",
@@ -106,6 +117,7 @@ export const categories: Category[] = [
     name: "Content",
     pages: [
       badge,
+      patch,
       status,
       callout,
       code,
@@ -138,7 +150,8 @@ export const categories: Category[] = [
       radioButton,
       superCheckboxGroup,
       superRadioGroup,
-      itemsInput
+      itemsInput,
+      fileDropTarget
     ]
   },
   {
@@ -156,6 +169,10 @@ export const categories: Category[] = [
       searchSelect
     ]
   },
+  {
+    name: "Data visualization",
+    pages: [barChart, lineChart, pieChart, scatterChart, composedChart, treeMap, sparkline]
+  },
   {
     name: "Utils",
     pages: [errorBoundary, truncate]