hs-uix 1.4.1 → 1.5.0

package/dist/utils.mjs

@@ -0,0 +1,230 @@
+// src/utils/collections.js
+var sumBy = (items, keyOrFn) => (items || []).reduce((total, item) => {
+  const value = typeof keyOrFn === "function" ? keyOrFn(item) : item == null ? void 0 : item[keyOrFn];
+  return total + Number(value || 0);
+}, 0);
+
+// src/utils/formatters.js
+var DEFAULT_LOCALE = "en-US";
+var formatCurrency = (value, { locale = DEFAULT_LOCALE, currency = "USD", maximumFractionDigits = 0, ...options } = {}) => new Intl.NumberFormat(locale, {
+  style: "currency",
+  currency,
+  maximumFractionDigits,
+  ...options
+}).format(Number(value || 0));
+var formatDate = (value, { locale = DEFAULT_LOCALE, month = "short", day = "numeric", year = "numeric", ...options } = {}) => {
+  if (value == null || value === "") return "";
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleDateString(locale, {
+    month,
+    day,
+    year,
+    ...options
+  });
+};
+var formatDateTime = (value, {
+  locale = DEFAULT_LOCALE,
+  month = "short",
+  day = "numeric",
+  year = "numeric",
+  hour = "numeric",
+  minute = "2-digit",
+  ...options
+} = {}) => {
+  if (value == null || value === "") return "";
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleString(locale, {
+    month,
+    day,
+    year,
+    hour,
+    minute,
+    ...options
+  });
+};
+var formatPercentage = (value, { locale = DEFAULT_LOCALE, minimumFractionDigits = 0, maximumFractionDigits = 0, ...options } = {}) => new Intl.NumberFormat(locale, {
+  style: "percent",
+  minimumFractionDigits,
+  maximumFractionDigits,
+  ...options
+}).format(Number(value || 0));
+
+// src/utils/hubspotValues.js
+var isDateValueObject = (value) => Boolean(
+  value && typeof value === "object" && typeof value.year === "number" && typeof value.month === "number" && typeof value.date === "number"
+);
+var isTimeValueObject = (value) => Boolean(
+  value && typeof value === "object" && typeof value.hours === "number" && typeof value.minutes === "number"
+);
+var isDateTimeValueObject = (value) => Boolean(
+  value && typeof value === "object" && (value.date == null || isDateValueObject(value.date)) && (value.time == null || isTimeValueObject(value.time))
+);
+
+// src/utils/options.js
+var buildOptions = (items, { labelKey = "label", valueKey = "value", descriptionKey, mapLabel, mapValue, mapDescription } = {}) => (items || []).map((item) => {
+  const label = mapLabel ? mapLabel(item) : (item == null ? void 0 : item[labelKey]) ?? item;
+  const value = mapValue ? mapValue(item) : (item == null ? void 0 : item[valueKey]) ?? item;
+  const description = descriptionKey ? item == null ? void 0 : item[descriptionKey] : void 0;
+  const mappedDescription = mapDescription ? mapDescription(item) : description;
+  return mappedDescription == null ? { label, value } : { label, value, description: mappedDescription };
+});
+var findOptionLabel = (options, value, fallback = "") => {
+  const match = (options || []).find((option) => (option == null ? void 0 : option.value) === value);
+  return (match == null ? void 0 : match.label) ?? fallback;
+};
+
+// src/utils/tagVariants.js
+var DEFAULT_VARIANT = "default";
+var DANGER_VARIANT = "danger";
+var ERROR_VARIANT = "error";
+var SUCCESS_MATCHERS = [
+  "active",
+  "success",
+  "succeeded",
+  "complete",
+  "completed",
+  "approved",
+  "won",
+  "healthy",
+  "enabled",
+  "connected",
+  "paid",
+  "live",
+  "published",
+  "available",
+  "synced",
+  "resolved"
+];
+var WARNING_MATCHERS = [
+  "warning",
+  "at risk",
+  "risky",
+  "pending",
+  "paused",
+  "pause",
+  "on hold",
+  "hold",
+  "review",
+  "expiring",
+  "trial",
+  "in progress",
+  "awaiting",
+  "scheduled"
+];
+var DANGER_MATCHERS = [
+  "danger",
+  "error",
+  "failed",
+  "failure",
+  "inactive",
+  "disabled",
+  "blocked",
+  "cancelled",
+  "canceled",
+  "rejected",
+  "denied",
+  "churned",
+  "lost",
+  "overdue",
+  "expired",
+  "offline",
+  "deleted",
+  "archived",
+  "unpaid"
+];
+var INFO_MATCHERS = [
+  "info",
+  "new",
+  "queued",
+  "processing",
+  "progress",
+  "upcoming",
+  "draft",
+  "open"
+];
+var normalizeTagValue = (value) => {
+  if (value == null) return "";
+  if (typeof value === "boolean") return value ? "true" : "false";
+  return String(value).trim().toLowerCase().replace(/[_-]+/g, " ").replace(/\s+/g, " ");
+};
+var matchesAny = (value, matchers) => matchers.some((matcher) => {
+  if (value === matcher) return true;
+  return ` ${value} `.includes(` ${matcher} `);
+});
+var getSemanticVariant = (value, options = {}) => {
+  const normalized = normalizeTagValue(value);
+  const fallback = options.fallback || DEFAULT_VARIANT;
+  if (!normalized) return fallback;
+  if (options.overrides) {
+    const overrideKey = Object.keys(options.overrides).find(
+      (key) => normalizeTagValue(key) === normalized
+    );
+    if (overrideKey) return options.overrides[overrideKey];
+  }
+  if (normalized === "true") return "success";
+  if (normalized === "false") return fallback;
+  if (matchesAny(normalized, SUCCESS_MATCHERS)) return "success";
+  if (matchesAny(normalized, DANGER_MATCHERS)) return DANGER_VARIANT;
+  if (matchesAny(normalized, WARNING_MATCHERS)) return "warning";
+  if (matchesAny(normalized, INFO_MATCHERS)) return "info";
+  return fallback;
+};
+var getAutoTagVariant = (value, options = {}) => {
+  const semanticVariant = getSemanticVariant(value, options);
+  return semanticVariant === DANGER_VARIANT ? ERROR_VARIANT : semanticVariant;
+};
+var getAutoStatusTagVariant = (value, options = {}) => getSemanticVariant(value, options);
+var getAutoTagDisplayValue = (value) => {
+  if (typeof value === "boolean") return value ? "True" : "False";
+  return value;
+};
+var DEFAULT_STATUS_TAG_COLOR_ORDER = [
+  "success",
+  "warning",
+  "danger",
+  "error",
+  "info",
+  "default"
+];
+var createStatusTagSortComparator = (options = {}) => {
+  const {
+    variantOrder = DEFAULT_STATUS_TAG_COLOR_ORDER,
+    overrides,
+    fallback,
+    getLabel
+  } = options;
+  const variantIndex = (variant) => {
+    const idx = variantOrder.indexOf(variant);
+    return idx === -1 ? variantOrder.length : idx;
+  };
+  const labelOf = (value) => {
+    if (getLabel) return String(getLabel(value) ?? "");
+    if (value == null) return "";
+    return String(getAutoTagDisplayValue(value) ?? "");
+  };
+  return (aVal, bVal) => {
+    const aVariant = getSemanticVariant(aVal, { overrides, fallback });
+    const bVariant = getSemanticVariant(bVal, { overrides, fallback });
+    const diff = variantIndex(aVariant) - variantIndex(bVariant);
+    if (diff !== 0) return diff;
+    return labelOf(aVal).localeCompare(labelOf(bVal));
+  };
+};
+export {
+  buildOptions,
+  createStatusTagSortComparator,
+  findOptionLabel,
+  formatCurrency,
+  formatDate,
+  formatDateTime,
+  formatPercentage,
+  getAutoStatusTagVariant,
+  getAutoTagDisplayValue,
+  getAutoTagVariant,
+  isDateTimeValueObject,
+  isDateValueObject,
+  isTimeValueObject,
+  sumBy
+};

package/index.d.ts

@@ -51,3 +51,24 @@ export type {
   FormBuilderRef,
   FieldTypePlugin,
 } from "./packages/form/index";
+
+export { AutoTag, AutoStatusTag, KeyValueList, SectionHeader } from "./common-components";
+export {
+  getAutoTagVariant,
+  getAutoStatusTagVariant,
+  createStatusTagSortComparator,
+} from "./utils";
+export type {
+  AutoTagOptions,
+  AutoTagVariant,
+  AutoStatusTagOptions,
+  AutoStatusTagVariant,
+  StatusTagSortComparatorOptions,
+} from "./utils";
+export type {
+  AutoTagProps,
+  AutoStatusTagProps,
+  KeyValueListItem,
+  KeyValueListProps,
+  SectionHeaderProps,
+} from "./common-components";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hs-uix",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Production-ready UI components for HubSpot UI Extensions — DataTable, FormBuilder, and more",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -21,6 +21,16 @@
       "types": "./form.d.ts",
       "import": "./dist/form.mjs",
       "require": "./dist/form.js"
+    },
+    "./common-components": {
+      "types": "./common-components.d.ts",
+      "import": "./dist/common-components.mjs",
+      "require": "./dist/common-components.js"
+    },
+    "./utils": {
+      "types": "./utils.d.ts",
+      "import": "./dist/utils.mjs",
+      "require": "./dist/utils.js"
     }
   },
   "files": [
@@ -28,6 +38,8 @@
     "index.d.ts",
     "datatable.d.ts",
     "form.d.ts",
+    "common-components.d.ts",
+    "utils.d.ts",
     "README.md"
   ],
   "workspaces": [
@@ -46,7 +58,7 @@
     "react": ">=18.0.0"
   },
   "devDependencies": {
-    "@hubspot/ui-extensions": "latest",
+    "@hubspot/ui-extensions": "^0.12.3",
     "react": "^18.0.0",
     "tsup": "^8.0.0"
   },

package/utils.d.ts

@@ -0,0 +1,59 @@
+export type AutoStatusTagVariant = "default" | "success" | "warning" | "danger" | "info";
+export type AutoTagVariant = "default" | "success" | "warning" | "error" | "info";
+
+export interface AutoTagSharedOptions<TVariant extends string> {
+  overrides?: Record<string, TVariant>;
+  fallback?: TVariant;
+}
+
+export interface AutoStatusTagOptions extends AutoTagSharedOptions<AutoStatusTagVariant> {}
+
+export interface AutoTagOptions extends AutoTagSharedOptions<AutoTagVariant> {}
+
+export interface FormatCurrencyOptions extends Intl.NumberFormatOptions {
+  locale?: string;
+  currency?: string;
+  maximumFractionDigits?: number;
+}
+
+export interface FormatDateOptions extends Intl.DateTimeFormatOptions {
+  locale?: string;
+}
+
+export interface BuildOptionsConfig<Item> {
+  labelKey?: keyof Item | string;
+  valueKey?: keyof Item | string;
+  descriptionKey?: keyof Item | string;
+  mapLabel?: (item: Item) => unknown;
+  mapValue?: (item: Item) => unknown;
+  mapDescription?: (item: Item) => unknown;
+}
+
+export interface BuiltOption {
+  label: unknown;
+  value: unknown;
+  description?: unknown;
+}
+
+export declare function getAutoTagVariant(value: unknown, options?: AutoTagOptions): AutoTagVariant;
+export declare function getAutoStatusTagVariant(value: unknown, options?: AutoStatusTagOptions): AutoStatusTagVariant;
+export declare function getAutoTagDisplayValue(value: unknown): unknown;
+
+export interface StatusTagSortComparatorOptions extends AutoStatusTagOptions {
+  variantOrder?: readonly string[];
+  getLabel?: (value: unknown) => unknown;
+}
+
+export declare function createStatusTagSortComparator(
+  options?: StatusTagSortComparatorOptions
+): (aValue: unknown, bValue: unknown) => number;
+export declare function formatCurrency(value: unknown, options?: FormatCurrencyOptions): string;
+export declare function formatDate(value: unknown, options?: FormatDateOptions): string;
+export declare function formatDateTime(value: unknown, options?: FormatDateOptions): string;
+export declare function formatPercentage(value: unknown, options?: Intl.NumberFormatOptions & { locale?: string }): string;
+export declare function buildOptions<Item = Record<string, unknown>>(items: Item[] | null | undefined, config?: BuildOptionsConfig<Item>): BuiltOption[];
+export declare function findOptionLabel(options: Array<{ label?: unknown; value?: unknown }> | null | undefined, value: unknown, fallback?: string): unknown;
+export declare function isDateValueObject(value: unknown): boolean;
+export declare function isTimeValueObject(value: unknown): boolean;
+export declare function isDateTimeValueObject(value: unknown): boolean;
+export declare function sumBy<Item = Record<string, unknown>>(items: Item[] | null | undefined, keyOrFn: keyof Item | ((item: Item) => unknown)): number;