@vectara/vectara-ui 16.5.1 → 16.6.0

package/lib/components/durationBar/DurationBar.d.ts

@@ -0,0 +1,11 @@
+import { PROGRESS_BAR_COLOR } from "../progressBar/ProgressBar";
+type Props = {
+    window: number;
+    start: number;
+    end: number;
+    color: (typeof PROGRESS_BAR_COLOR)[number];
+    minBarWidthPx?: number;
+    className?: string;
+};
+export declare const VuiDurationBar: ({ window, start, end, color, minBarWidthPx, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/durationBar/DurationBar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const DEFAULT_MIN_BAR_WIDTH_PX = 4;
+export const VuiDurationBar = ({ window, start, end, color, minBarWidthPx = DEFAULT_MIN_BAR_WIDTH_PX, className }) => {
+    // Clamp the bar to the window boundaries.
+    const clampedStart = Math.max(0, Math.min(start, window));
+    const clampedEnd = Math.max(0, Math.min(end, window));
+    const leftPercent = (clampedStart / window) * 100;
+    const widthPercent = Math.max(0, ((clampedEnd - clampedStart) / window) * 100);
+    const classes = classNames(className, "vuiDurationBar", `vuiDurationBar--${color}`);
+    return (_jsx("div", Object.assign({ className: classes }, { children: _jsx("div", { className: "vuiDurationBar__bar", style: { left: `${leftPercent}%`, width: `max(${widthPercent}%, ${minBarWidthPx}px)` } }) })));
+};

package/lib/components/durationBar/_index.scss

@@ -0,0 +1,40 @@
+@use "sass:map";
+
+.vuiDurationBar {
+  position: relative;
+}
+
+.vuiDurationBar__bar {
+  position: absolute;
+  height: $sizeXs;
+}
+
+// Color
+$color: (
+  accent: (
+    "background-color": var(--vui-color-accent-shade)
+  ),
+  primary: (
+    "background-color": var(--vui-color-primary-shade)
+  ),
+  success: (
+    "background-color": var(--vui-color-success-shade)
+  ),
+  warning: (
+    "background-color": var(--vui-color-warning-shade)
+  ),
+  danger: (
+    "background-color": var(--vui-color-danger-shade)
+  ),
+  neutral: (
+    "background-color": var(--vui-color-dark-shade)
+  )
+);
+
+@each $colorName, $colorValue in $color {
+  .vuiDurationBar--#{$colorName} {
+    .vuiDurationBar__bar {
+      background-color: #{map.get($colorValue, "background-color")};
+    }
+  }
+}

package/lib/components/index.d.ts

@@ -27,6 +27,7 @@ import { VuiCopyButton } from "./copyButton/CopyButton";
 import { VuiDatePicker } from "./datePicker/DatePicker";
 import { VuiDateRangePicker } from "./datePicker/DateRangePicker";
 import { VuiDrawer } from "./drawer/Drawer";
+import { VuiDurationBar } from "./durationBar/DurationBar";
 import { VuiErrorBoundary } from "./errorBoundary/ErrorBoundary";
 import { VuiFlexContainer } from "./flex/FlexContainer";
 import { VuiFlexItem } from "./flex/FlexItem";
@@ -100,4 +101,4 @@ import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
 export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabSize, Tree, TreeItem };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/index.js

@@ -23,6 +23,7 @@ import { VuiCopyButton } from "./copyButton/CopyButton";
 import { VuiDatePicker } from "./datePicker/DatePicker";
 import { VuiDateRangePicker } from "./datePicker/DateRangePicker";
 import { VuiDrawer } from "./drawer/Drawer";
+import { VuiDurationBar } from "./durationBar/DurationBar";
 import { VuiErrorBoundary } from "./errorBoundary/ErrorBoundary";
 import { VuiFlexContainer } from "./flex/FlexContainer";
 import { VuiFlexItem } from "./flex/FlexItem";
@@ -90,4 +91,4 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/styles/index.css

@@ -2499,6 +2499,39 @@ h2.react-datepicker__current-month {
   color: var(--vui-color-danger-shade);
 }
 
+.vuiDurationBar {
+  position: relative;
+}
+
+.vuiDurationBar__bar {
+  position: absolute;
+  height: 8px;
+}
+
+.vuiDurationBar--accent .vuiDurationBar__bar {
+  background-color: var(--vui-color-accent-shade);
+}
+
+.vuiDurationBar--primary .vuiDurationBar__bar {
+  background-color: var(--vui-color-primary-shade);
+}
+
+.vuiDurationBar--success .vuiDurationBar__bar {
+  background-color: var(--vui-color-success-shade);
+}
+
+.vuiDurationBar--warning .vuiDurationBar__bar {
+  background-color: var(--vui-color-warning-shade);
+}
+
+.vuiDurationBar--danger .vuiDurationBar__bar {
+  background-color: var(--vui-color-danger-shade);
+}
+
+.vuiDurationBar--neutral .vuiDurationBar__bar {
+  background-color: var(--vui-color-dark-shade);
+}
+
 .vuiFlexContainer {
   display: flex;
   align-items: stretch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "16.5.1",
+  "version": "16.6.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

package/src/docs/pages/durationBar/Colors.tsx

@@ -0,0 +1,15 @@
+import { Fragment } from "react";
+import { PROGRESS_BAR_COLOR, VuiDurationBar, VuiSpacer } from "../../../lib";
+
+export const Colors = () => {
+  return (
+    <>
+      {PROGRESS_BAR_COLOR.map((color) => (
+        <Fragment key={color}>
+          <VuiDurationBar window={100} start={10} end={70} color={color} />
+          <VuiSpacer size="s" />
+        </Fragment>
+      ))}
+    </>
+  );
+};

package/src/docs/pages/durationBar/MinBarWidth.tsx

@@ -0,0 +1,25 @@
+import { VuiDurationBar, VuiSpacer, VuiText } from "../../../lib";
+
+export const MinBarWidth = () => {
+  return (
+    <>
+      <VuiText>
+        <p>Default minBarWidthPx (4px) for a near-zero-width bar:</p>
+      </VuiText>
+
+      <VuiSpacer size="s" />
+
+      <VuiDurationBar window={10000} start={5000} end={5001} color="accent" />
+
+      <VuiSpacer size="m" />
+
+      <VuiText>
+        <p>Custom minBarWidthPx (16px) for the same bar:</p>
+      </VuiText>
+
+      <VuiSpacer size="s" />
+
+      <VuiDurationBar window={10000} start={5000} end={5001} color="accent" minBarWidthPx={16} />
+    </>
+  );
+};

package/src/docs/pages/durationBar/Timeline.tsx

@@ -0,0 +1,43 @@
+import { PROGRESS_BAR_COLOR, VuiDurationBar, VuiFlexContainer, VuiFlexItem, VuiText } from "../../../lib";
+
+const WINDOW = 12480;
+
+type Bar = {
+  label: string;
+  start: number;
+  end: number;
+  color: (typeof PROGRESS_BAR_COLOR)[number];
+};
+
+const bars: Bar[] = [
+  { label: "12.48s", start: 0, end: 12480, color: "neutral" },
+  { label: "1.85s", start: 0, end: 1850, color: "neutral" },
+  { label: "3.20s", start: 1850, end: 5050, color: "neutral" },
+  { label: "880ms", start: 5700, end: 6580, color: "neutral" },
+  { label: "2.40s", start: 6200, end: 8600, color: "neutral" },
+  { label: "80ms", start: 8700, end: 8780, color: "neutral" },
+  { label: "3.20s", start: 8900, end: 12100, color: "neutral" },
+  { label: "540ms", start: 11400, end: 11940, color: "neutral" }
+];
+
+export const Timeline = () => {
+  return (
+    <>
+      {bars.map((bar) => (
+        <VuiFlexContainer key={bar.label} alignItems="center" spacing="m">
+          <VuiFlexItem grow={false} shrink={false}>
+            <div style={{ width: 60, textAlign: "right" }}>
+              <VuiText>
+                <p>{bar.label}</p>
+              </VuiText>
+            </div>
+          </VuiFlexItem>
+
+          <VuiFlexItem grow={1}>
+            <VuiDurationBar window={WINDOW} start={bar.start} end={bar.end} color={bar.color} />
+          </VuiFlexItem>
+        </VuiFlexContainer>
+      ))}
+    </>
+  );
+};

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

@@ -0,0 +1,29 @@
+import { Timeline } from "./Timeline";
+import { Colors } from "./Colors";
+import { MinBarWidth } from "./MinBarWidth";
+
+const TimelineSource = require("!!raw-loader!./Timeline");
+const ColorsSource = require("!!raw-loader!./Colors");
+const MinBarWidthSource = require("!!raw-loader!./MinBarWidth");
+
+export const durationBar = {
+  name: "Duration Bar",
+  path: "/durationBar",
+  examples: [
+    {
+      name: "Timeline",
+      component: <Timeline />,
+      source: TimelineSource.default.toString()
+    },
+    {
+      name: "Colors",
+      component: <Colors />,
+      source: ColorsSource.default.toString()
+    },
+    {
+      name: "Minimum bar width",
+      component: <MinBarWidth />,
+      source: MinBarWidthSource.default.toString()
+    }
+  ]
+};

package/src/docs/pages.tsx

@@ -14,6 +14,7 @@ import { complexConfigurationButton } from "./pages/complexConfigurationButton";
 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 { flex } from "./pages/flex";
 import { formGroup } from "./pages/formGroup";
@@ -111,7 +112,7 @@ export const categories: Category[] = [
   },
   {
     name: "Content",
-    pages: [badge, status, callout, code, icon, image, inProgress, spinner, skeleton, stat, progressBar, text, tooltip]
+    pages: [badge, status, callout, code, durationBar, icon, image, inProgress, progressBar, spinner, skeleton, stat, text, tooltip]
   },
   {
     name: "Form",