@vectara/vectara-ui 18.3.0 → 19.0.0

package/src/docs/pages/fileDropTarget/FileDropTarget.tsx

@@ -0,0 +1,80 @@
+import { useRef, useState } from "react";
+import { VuiFileDropTarget, VuiSpacer, VuiText, VuiTextColor, VuiToggle } from "../../../lib";
+
+export const FileDropTarget = () => {
+  const [isScoped, setIsScoped] = useState(false);
+  const [droppedFiles, setDroppedFiles] = useState<string[]>([]);
+  const scopeRef = useRef<HTMLDivElement>(null);
+
+  // Only one target is mounted at a time: the global target listens on the whole
+  // document, so it would intercept drops meant for a scoped target.
+  return (
+    <>
+      <VuiToggle
+        label="Scope drop target to an element"
+        checked={isScoped}
+        onChange={(e) => {
+          setIsScoped(e.target.checked);
+          setDroppedFiles([]);
+        }}
+      />
+
+      <VuiSpacer size="m" />
+
+      <VuiText>
+        <p>
+          <VuiTextColor color="subdued">
+            {isScoped
+              ? "Drag a file over the box below. The overlay is scoped to the positioned container."
+              : "Drag a file anywhere over the page to reveal a full-screen overlay."}
+          </VuiTextColor>
+        </p>
+      </VuiText>
+
+      {droppedFiles.length > 0 && (
+        <>
+          <VuiSpacer size="xs" />
+          <VuiText size="s">
+            <p>Dropped: {droppedFiles.join(", ")}</p>
+          </VuiText>
+        </>
+      )}
+
+      <VuiSpacer size="s" />
+
+      {isScoped ? (
+        <div
+          ref={scopeRef}
+          style={{
+            position: "relative",
+            minHeight: 160,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: 16,
+            border: "1px dashed var(--vui-color-border)",
+            borderRadius: 8
+          }}
+        >
+          <VuiText>
+            <p>
+              <VuiTextColor color="subdued">Drop zone</VuiTextColor>
+            </p>
+          </VuiText>
+
+          <VuiFileDropTarget
+            scopeRef={scopeRef}
+            message={
+              <VuiText align="center" size="l">
+                <p>Release to drop here</p>
+              </VuiText>
+            }
+            onFilesDropped={(files) => setDroppedFiles(files.map((file) => file.name))}
+          />
+        </div>
+      ) : (
+        <VuiFileDropTarget onFilesDropped={(files) => setDroppedFiles(files.map((file) => file.name))} />
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,11 @@
+import { FileDropTarget } from "./FileDropTarget";
+const FileDropTargetSource = require("!!raw-loader!./FileDropTarget");
+
+export const fileDropTarget = {
+  name: "File drop target",
+  path: "/fileDropTarget",
+  example: {
+    component: <FileDropTarget />,
+    source: FileDropTargetSource.default.toString()
+  }
+};

package/src/docs/pages/patch/Icons.tsx

@@ -0,0 +1,16 @@
+import { BiHelpCircle } from "react-icons/bi";
+import { PATCH_COLOR, VuiIcon, VuiPatch, VuiFlexContainer } from "../../../lib";
+
+export const Icons = () => {
+  return (
+    <VuiFlexContainer spacing="m" wrap>
+      {PATCH_COLOR.map((color) => (
+        <VuiPatch color={color}>
+          <VuiIcon size="m">
+            <BiHelpCircle />
+          </VuiIcon>
+        </VuiPatch>
+      ))}
+    </VuiFlexContainer>
+  );
+};

package/src/docs/pages/patch/Sizes.tsx

@@ -0,0 +1,20 @@
+import { BiCompass } from "react-icons/bi";
+import { VuiPatch, VuiFlexContainer, VuiIcon } from "../../../lib";
+
+const sizes = ["xs", "s", "m"] as const;
+
+export const Sizes = () => {
+  return (
+    <VuiFlexContainer spacing="m" wrap>
+      {sizes.map((size) => (
+        <div>
+          <VuiPatch color="indigo" size={size}>
+            <VuiIcon>
+              <BiCompass />
+            </VuiIcon>
+          </VuiPatch>
+        </div>
+      ))}
+    </VuiFlexContainer>
+  );
+};

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

@@ -0,0 +1,22 @@
+import { Icons } from "./Icons";
+import { Sizes } from "./Sizes";
+
+const IconsSource = require("!!raw-loader!./Icons");
+const SizesSource = require("!!raw-loader!./Sizes");
+
+export const patch = {
+  name: "Patch",
+  path: "/patch",
+  examples: [
+    {
+      name: "Icons",
+      component: <Icons />,
+      source: IconsSource.default.toString()
+    },
+    {
+      name: "Sizes",
+      component: <Sizes />,
+      source: SizesSource.default.toString()
+    }
+  ]
+};

package/src/docs/pages.tsx

@@ -8,14 +8,18 @@ import { callout } from "./pages/callout";
 import { card } from "./pages/card";
 import { chat } from "./pages/chat";
 import { checkbox } from "./pages/checkbox";
+import { chip } from "./pages/chip";
 import { code } from "./pages/code";
 import { codeEditor } from "./pages/codeEditor";
+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";
@@ -39,6 +43,7 @@ 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 { popover } from "./pages/popover";
 import { progressBar } from "./pages/progressBar";
 import { prompt } from "./pages/prompt";
@@ -83,11 +88,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",
@@ -99,12 +104,13 @@ export const categories: Category[] = [
   },
   {
     name: "Navigation",
-    pages: [tabs, stepsVertical, steps]
+    pages: [tabs, stepsVertical, steps, chip]
   },
   {
     name: "Content",
     pages: [
       badge,
+      patch,
       status,
       callout,
       code,
@@ -137,7 +143,8 @@ export const categories: Category[] = [
       radioButton,
       superCheckboxGroup,
       superRadioGroup,
-      itemsInput
+      itemsInput,
+      fileDropTarget
     ]
   },
   {