@growth-operations/ui-shared 1.5.9 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-operations/ui-shared",
-  "version": "1.5.9",
+  "version": "1.6.0",
   "description": "Shared HubSpot UI-extension modules (Home, Billing) for Growth Operations apps.",
   "license": "MIT",
   "private": false,

package/src/forms/OptionSelect.jsx

@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import { Select, LoadingSpinner, Alert, Flex, Text } from "@hubspot/ui-extensions";
+import { useToken } from "../sdk/index";
+import { getForms } from "../sdk/hubspot/forms";
+import { getLists } from "../sdk/hubspot/lists";
+import { getPipelines, getPipelineStages } from "../sdk/hubspot/pipeline";
+import { useStrictModeEffect } from "../lib/useStrictModeEffect";
+
+// OptionSelect — one shared HubSpot-options dropdown, replacing the per-app
+// FormSelector / SegmentSelector / PipelineStageSelector that every app
+// re-implemented (fetch options → map to {label,value} → <Select> → save on
+// change). The data-fetch half already lives in the SDK (getForms / getLists /
+// getPipelineStages); this owns the loading/error/Select chrome around it.
+//
+// Pick options ONE of two ways:
+//   - source="forms" | "lists" | "pipelines" | "pipelineStages" — built-in SDK
+//     fetchers. "pipelines"/"pipelineStages" take opts.objectType; the latter
+//     also needs opts.pipelineId.
+//   - fetchOptions={async (context, token) => [{label, value}, ...]} — any
+//     custom source. Takes precedence over `source`.
+//
+// onChange(value) fires with the selected value; the caller owns persistence
+// (e.g. ui-shared updateSettings). `value` is the controlled selection.
+const SOURCES = {
+  forms: async (context, token) => {
+    const { results = [] } = await getForms(context, token);
+    return results.map((f) => ({ label: f.name, value: f.id }));
+  },
+  lists: async (context, token, opts) => {
+    const { lists = [] } = await getLists(context, token, opts?.query ?? "");
+    return lists.map((l) => ({ label: l.name, value: String(l.listId) }));
+  },
+  pipelines: async (context, token, opts) => {
+    const { results = [] } = await getPipelines(context, token, opts?.objectType);
+    return results.map((p) => ({ label: p.label, value: p.id }));
+  },
+  pipelineStages: async (context, token, opts) => {
+    if (!opts?.pipelineId) return [];
+    const { results = [] } = await getPipelineStages(
+      context,
+      token,
+      opts.pipelineId,
+      opts.objectType
+    );
+    return results.map((s) => ({ label: s.label, value: s.id }));
+  },
+};
+
+export function OptionSelect({
+  context,
+  value,
+  onChange,
+  source,
+  fetchOptions,
+  label = "Select",
+  description,
+  placeholder = "Choose…",
+  // Extra source args (pipelineId/objectType for pipelineStages, query for lists)
+  ...opts
+}) {
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const { ensureValidToken } = useToken();
+
+  // Re-fetch when the source or its key args change (e.g. pipelineId).
+  const depKey = JSON.stringify({
+    source,
+    pipelineId: opts.pipelineId,
+    objectType: opts.objectType,
+    query: opts.query,
+  });
+
+  useStrictModeEffect(
+    async ({ mounted }) => {
+      try {
+        const token = await ensureValidToken();
+        if (!token || !mounted.current) return;
+        const loader =
+          fetchOptions ?? SOURCES[source] ?? (async () => []);
+        const opted = await loader(context, token, opts);
+        if (mounted.current) setOptions(opted);
+      } catch (e) {
+        if (mounted.current) setError(String(e?.message ?? e));
+      } finally {
+        if (mounted.current) setLoading(false);
+      }
+    },
+    [context, depKey]
+  );
+
+  if (loading) {
+    return <LoadingSpinner size="small" label={`Loading ${label.toLowerCase()}…`} showLabel />;
+  }
+  if (error) {
+    return (
+      <Alert title={`Couldn't load ${label.toLowerCase()}`} variant="danger">
+        <Text>{error}</Text>
+      </Alert>
+    );
+  }
+
+  return (
+    <Flex direction="column" gap="extra-small">
+      <Select
+        label={label}
+        description={description}
+        placeholder={placeholder}
+        options={options}
+        value={value ?? ""}
+        onChange={(v) => onChange?.(v)}
+      />
+    </Flex>
+  );
+}

package/src/index.js

@@ -27,6 +27,9 @@ export { UsageTab } from "./usage/UsageTab";
 // Sandbox — the shared "Install on a sandbox" action (mints a signed link).
 export { SandboxInstall } from "./sandbox/SandboxInstall";
 
+// Forms — shared HubSpot-options dropdown (forms/lists/pipeline-stages picker).
+export { OptionSelect } from "./forms/OptionSelect";
+
 // Lib helpers.
 export {
   fmtDate,