@hubspot/app-connect-sdk 1.0.0-alpha.1

package/src/browser/react/components/icons/HubSpotDataSourceIcon.tsx

@@ -0,0 +1,33 @@
+export interface HubSpotDataSourceIconProps {
+  className?: string;
+}
+
+export function HubSpotDataSourceIcon({
+  className,
+}: HubSpotDataSourceIconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <rect
+        x="2.5"
+        y="2.5"
+        width="11"
+        height="11"
+        rx="1.5"
+        stroke="currentColor"
+        strokeWidth="1.25"
+      />
+      <path
+        d="M5 6h6M5 8.25h6M5 10.5h4"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

package/src/browser/react/components/icons/LogoutIcon.tsx

@@ -0,0 +1,37 @@
+export interface LogoutIconProps {
+  className?: string;
+}
+
+export function LogoutIcon({ className }: LogoutIconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        d="M6.5 2.5h-3a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.5 11l3-3-3-3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.5 8h-7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/browser/react/components/icons/ShareIcon.tsx

@@ -0,0 +1,31 @@
+export interface ShareIconProps {
+  className?: string;
+}
+
+export function ShareIcon({ className }: ShareIconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <circle cx="18" cy="5" r="2.75" stroke="currentColor" strokeWidth="1.5" />
+      <circle cx="6" cy="12" r="2.75" stroke="currentColor" strokeWidth="1.5" />
+      <circle
+        cx="18"
+        cy="19"
+        r="2.75"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M8.6 10.5L15.4 6.5M8.6 13.5L15.4 17.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

package/src/browser/react/context.ts

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+import type { AppConnectController } from '../types.ts';
+
+/**
+ * React context that carries the `AppConnectController` from the
+ * `HubSpotAppConnect` provider down to consumers of
+ * `useHubSpotAppConnect`. `null` indicates the hook is being used
+ * outside a provider.
+ */
+export const HubSpotAppConnectControllerContext =
+  createContext<AppConnectController | null>(null);

package/src/browser/react/hooks.ts

@@ -0,0 +1,28 @@
+import { useContext, useSyncExternalStore } from 'react';
+
+import type { AppConnectState } from '../types.ts';
+import { HubSpotAppConnectControllerContext } from './context.ts';
+
+export type UseHubSpotAppConnectResult = AppConnectState;
+
+/**
+ * React hook that returns the current `AppConnectState`. Must be
+ * called inside a {@link HubSpotAppConnect} provider — throws when
+ * no controller is available.
+ *
+ * The hook subscribes to the controller via `useSyncExternalStore`
+ * so React 18+ batched updates and SSR work correctly.
+ */
+export function useHubSpotAppConnect(): UseHubSpotAppConnectResult {
+  const controller = useContext(HubSpotAppConnectControllerContext);
+  if (controller == null) {
+    throw new Error(
+      'useHubSpotAppConnect must be used within HubSpotAppConnect'
+    );
+  }
+  return useSyncExternalStore(
+    controller.subscribe,
+    controller.getSnapshot,
+    controller.getServerSnapshot
+  );
+}

package/src/browser/react/index.ts

@@ -0,0 +1,6 @@
+export {
+  HubSpotAppConnect,
+  type HubSpotAppConnectProps,
+} from './components/HubSpotAppConnect/HubSpotAppConnect.tsx';
+export { useHubSpotAppConnect } from './hooks.ts';
+export type { UseHubSpotAppConnectResult } from './hooks.ts';

package/src/browser/react/lovable/LovableHubSpotAppConnect.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+import { createAppConnectController } from '../../app-connect-controller/create.ts';
+import { HubSpotAppConnect } from '../components/HubSpotAppConnect/HubSpotAppConnect.tsx';
+
+const HUBSPOT_CONNECT_BASE_URL = '/functions/v1/hubspot-connect';
+
+const controller = createAppConnectController({
+  config: { hubSpotConnectBaseUrl: HUBSPOT_CONNECT_BASE_URL },
+});
+
+/**
+ * Props accepted by {@link LovableHubSpotAppConnect}.
+ */
+export interface LovableHubSpotAppConnectProps {
+  /** Title text rendered in the standard SDK header. */
+  title: string;
+  /** Content rendered when the controller is in the `connected` state. */
+  connected: ReactNode;
+  /**
+   * Description text rendered inside the SDK-owned disconnected card,
+   * above the primary "Connect to HubSpot" button.
+   */
+  disconnectedMessage: ReactNode;
+}
+
+/**
+ * Lovable-preset variant of `HubSpotAppConnect`. The controller is
+ * created once at module load with `hubSpotConnectBaseUrl` fixed to
+ * `/functions/v1/hubspot-connect` — the path that
+ * `@hubspot/app-connect-sdk/server/lovable` mounts. Callers that need
+ * a custom base URL or logger should use the canonical
+ * `HubSpotAppConnect` from `@hubspot/app-connect-sdk/react` instead.
+ */
+export function LovableHubSpotAppConnect(props: LovableHubSpotAppConnectProps) {
+  return <HubSpotAppConnect {...props} controller={controller} />;
+}

package/src/browser/react/lovable/index.ts

@@ -0,0 +1,4 @@
+export {
+  LovableHubSpotAppConnect,
+  type LovableHubSpotAppConnectProps,
+} from './LovableHubSpotAppConnect.tsx';

package/src/browser/theme-tokens.generated.css.ts

@@ -0,0 +1,424 @@
+// AUTO-GENERATED by scripts/src/generate-trellis-theme.ts.
+// Run `pnpm trellis:generate-theme` to refresh from resources/trellis/theme.json.
+// Do not edit by hand.
+
+import { createTheme } from '@vanilla-extract/css';
+
+export const [themeClass, themeVars] = createTheme({
+  border: {
+    accent: {
+      blue: {
+        default: '#016DE1',
+      },
+      green: {
+        default: '#00823A',
+      },
+      light: {
+        orange: {
+          default: '#C93700',
+        },
+      },
+      magenta: {
+        default: '#D20688',
+      },
+      orange: {
+        default: '#C93700',
+      },
+      purple: {
+        default: '#7D53E9',
+      },
+      red: {
+        default: '#D9002B',
+      },
+      yellow: {
+        default: '#956309',
+      },
+    },
+    alert: {
+      default: '#D9002B',
+    },
+    brand: {
+      default: '#FF4800',
+    },
+    caution: {
+      default: '#EEB117',
+    },
+    container: {
+      default: '#CCCCCC',
+    },
+    core: {
+      default: '#8A8A8A',
+      disabled: '#E6E6E6',
+      hover: '#666666',
+      on: {
+        fill: {
+          default: '#FFFFFF',
+        },
+      },
+      pressed: '#141414',
+      subtle: {
+        default: '#CCCCCC',
+        hover: '#B3B3B3',
+        pressed: '#8A8A8A',
+      },
+    },
+    info: {
+      default: '#016DE1',
+    },
+    interactive: {
+      default: '#8A8A8A',
+      pressed: '#141414',
+    },
+    positive: {
+      default: '#00823A',
+    },
+    primary: {
+      default: 'rgba(20,20,20,0)',
+      disabled: 'rgba(20,20,20,0)',
+    },
+    secondary: {
+      default: {
+        alt: '#8A8A8A',
+        default: '#8A8A8A',
+      },
+      disabled: {
+        alt: '#E6E6E6',
+        default: '#E6E6E6',
+      },
+    },
+    tertiary: {
+      default: '#8A8A8A',
+      disabled: '#E6E6E6',
+    },
+  },
+  borderRadius: {
+    '0': '0px',
+    '100': '4px',
+    '200': '4px',
+    '300': '8px',
+    '400': '16px',
+    'breeze-core-component-default': '999999px',
+    'breeze-textarea-default': '16px',
+    full: '999999px',
+    'temp-future-300': '8px',
+    'transitional-component': '4px',
+    'transitional-container': '8px',
+    'transitional-container-alt': '8px',
+    'transitional-floating': '16px',
+    'transitional-full-0': '999999px',
+    'transitional-full-3': '999999px',
+    'transitional-full-8': '999999px',
+  },
+  fill: {
+    accent: {
+      blue: {
+        default: '#016DE1',
+        hover: '#0050C7',
+        pressed: '#0035B2',
+        subtle: {
+          alt: '#E1F2FB',
+          default: '#ACDAF4',
+        },
+      },
+      green: {
+        default: '#00823A',
+        hover: '#006831',
+        pressed: '#003C1E',
+        subtle: {
+          alt: '#EDF4EF',
+          default: '#BDE7CB',
+        },
+      },
+      light: {
+        orange: {
+          default: '#FF4800',
+          hover: '#C93700',
+          pressed: '#9F2800',
+          subtle: {
+            alt: '#FCECE6',
+            default: '#FCC6B1',
+          },
+        },
+      },
+      magenta: {
+        default: '#D20688',
+        hover: '#A5016A',
+        pressed: '#800051',
+        subtle: {
+          alt: '#FCEBF2',
+          default: '#FCC3DC',
+        },
+      },
+      neutral: {
+        default: '#141414',
+        hover: '#4D4D4D',
+        pressed: '#666666',
+        subtle: {
+          alt: '#F0F0F0',
+          default: '#E6E6E6',
+        },
+      },
+      orange: {
+        default: '#C93700',
+        hover: '#9F2800',
+        pressed: '#7B1D00',
+        subtle: {
+          alt: '#FCECE6',
+          default: '#FCC6B1',
+        },
+      },
+      purple: {
+        default: '#6431DA',
+        hover: '#5113BA',
+        pressed: '#321986',
+        subtle: {
+          alt: '#EFEEFD',
+          default: '#D7CDFC',
+        },
+      },
+      red: {
+        default: '#D9002B',
+        hover: '#AC0020',
+        pressed: '#850016',
+        subtle: {
+          alt: '#FCECE9',
+          default: '#FCC5BE',
+        },
+      },
+      teal: {
+        default: '#007C7D',
+        hover: '#006162',
+        pressed: '#00494B',
+        subtle: {
+          alt: '#E0FCFA',
+          default: '#B3F0ED',
+        },
+      },
+      yellow: {
+        default: '#956309',
+        hover: '#784B05',
+        pressed: '#5E3804',
+        subtle: {
+          alt: '#FCF6E6',
+          default: '#FBE0A5',
+        },
+      },
+    },
+    alert: {
+      default: '#D9002B',
+      hover: '#AC0020',
+      pressed: '#850016',
+      subtle: '#FCECE9',
+    },
+    brand: {
+      default: '#FF4800',
+      hover: '#C93700',
+      pressed: '#9F2800',
+      subtle: '#FCC6B1',
+    },
+    caution: {
+      default: '#FCCB57',
+      hover: '#EEB117',
+      pressed: '#D39913',
+      subtle: '#FCF6E6',
+    },
+    field: {
+      default: {
+        alt: '#FFFFFF',
+        default: '#FFFFFF',
+      },
+      disabled: '#F5F5F5',
+      hover: '#EBEBEB',
+      pressed: '#E6E6E6',
+    },
+    info: {
+      default: '#016DE1',
+      hover: '#0050C7',
+      pressed: '#0035B2',
+      subtle: '#E1F2FB',
+    },
+    positive: {
+      default: '#00823A',
+      hover: '#006831',
+      pressed: '#005027',
+      subtle: '#EDF4EF',
+    },
+    primary: {
+      default: '#141414',
+      disabled: '#F5F5F5',
+      hover: '#333333',
+      pressed: '#4D4D4D',
+    },
+    secondary: {
+      default: {
+        alt: '#D6C2D9',
+        default: '#FFFFFF',
+      },
+      disabled: {
+        alt: '#F5F5F5',
+        default: '#FFFFFF',
+      },
+      hover: {
+        alt: '#CAAACF',
+        default: '#F0F0F0',
+      },
+      pressed: {
+        alt: '#BC8DC3',
+        default: '#E6E6E6',
+      },
+    },
+    surface: {
+      default: {
+        default: '#FFFFFF',
+        hover: 'rgba(20,20,20,0.08)',
+        pressed: 'rgba(20,20,20,0.11)',
+      },
+      raised: '#FFFFFF',
+      recessed: {
+        default: '#F0F0F0',
+        hover: 'rgba(20,20,20,0.08)',
+        pressed: 'rgba(20,20,20,0.11)',
+      },
+    },
+    tertiary: {
+      default: '#FFFFFF',
+      disabled: '#F5F5F5',
+      hover: '#EBEBEB',
+      pressed: '#E6E6E6',
+    },
+    transparent: {
+      default: 'rgba(20,20,20,0)',
+      disabled: 'rgba(20,20,20,0)',
+      hover: 'rgba(20,20,20,0)',
+      pressed: 'rgba(20,20,20,0)',
+    },
+  },
+  icon: {
+    alert: {
+      default: '#D9002B',
+      hover: '#AC0020',
+      on: {
+        fill: {
+          default: '#FFFFFF',
+        },
+      },
+      pressed: '#850016',
+    },
+    core: {
+      default: '#141414',
+      disabled: '#8A8A8A',
+      on: {
+        fill: {
+          default: '#FFFFFF',
+        },
+      },
+      subtle: '#666666',
+    },
+    interactive: {
+      default: '#141414',
+      disabled: '#8A8A8A',
+      hover: '#4D4D4D',
+      on: {
+        fill: {
+          default: '#FFFFFF',
+          hover: '#E6E6E6',
+          pressed: '#B3B3B3',
+        },
+      },
+      pressed: '#666666',
+    },
+    primary: {
+      default: '#FFFFFF',
+      disabled: '#8A8A8A',
+      hover: '#FFFFFF',
+      pressed: '#FFFFFF',
+    },
+    secondary: {
+      default: '#141414',
+      disabled: '#8A8A8A',
+    },
+    tertiary: {
+      default: '#141414',
+      disabled: '#8A8A8A',
+    },
+  },
+  space: {
+    '0': '0px',
+    '25': '1px',
+    '50': '2px',
+    '100': '4px',
+    '200': '8px',
+    '250': '10px',
+    '300': '12px',
+    '400': '16px',
+    '500': '20px',
+    '600': '24px',
+    '700': '28px',
+    '800': '32px',
+    '900': '36px',
+    '1000': '40px',
+    '1100': '48px',
+    '1200': '56px',
+    '1300': '60px',
+    '1400': '64px',
+    '1500': '96px',
+    '1600': '144px',
+    '1700': '192px',
+  },
+  specialty: {
+    scrim: {
+      alt: 'rgba(255,255,255,0.81)',
+      default: 'rgba(20,20,20,0.46)',
+    },
+  },
+  text: {
+    alert: {
+      default: '#D9002B',
+      hover: '#AC0020',
+      on: {
+        fill: {
+          default: '#FFFFFF',
+        },
+      },
+      pressed: '#850016',
+    },
+    core: {
+      default: '#141414',
+      disabled: '#8A8A8A',
+      on: {
+        fill: {
+          default: '#FFFFFF',
+        },
+      },
+      subtle: '#666666',
+    },
+    interactive: {
+      default: {
+        default: '#006162',
+        disabled: '#8A8A8A',
+        hover: '#00494B',
+        pressed: '#033637',
+      },
+      on: {
+        fill: {
+          default: '#FFFFFF',
+          hover: '#E6E6E6',
+          pressed: '#B3B3B3',
+        },
+      },
+    },
+    primary: {
+      default: '#FFFFFF',
+      disabled: '#8A8A8A',
+      subtle: '#FFFFFF',
+    },
+    secondary: {
+      default: '#141414',
+      disabled: '#8A8A8A',
+    },
+    tertiary: {
+      default: '#141414',
+      disabled: '#8A8A8A',
+    },
+  },
+});

package/src/browser/theme.css.ts

@@ -0,0 +1,21 @@
+import { globalStyle } from '@vanilla-extract/css';
+
+import { themeVars } from './theme-tokens.generated.css.ts';
+
+export { themeClass, themeVars } from './theme-tokens.generated.css.ts';
+
+globalStyle('*, *::before, *::after', {
+  boxSizing: 'border-box',
+});
+
+globalStyle(':root', {
+  colorScheme: 'light',
+});
+
+globalStyle('body', {
+  margin: 0,
+  fontFamily:
+    'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  color: themeVars.text.core.default,
+  backgroundColor: themeVars.fill.surface.default.default,
+});