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

package/src/browser/react/components/AppConnectHeader/AppConnectHeader.tsx

@@ -0,0 +1,124 @@
+import { Menu } from '@base-ui/react/menu';
+
+import { useHubSpotAppConnect } from '../../hooks.ts';
+import { ConnectButton } from '../ConnectButton/ConnectButton.tsx';
+import { ChevronDownIcon } from '../icons/ChevronDownIcon.tsx';
+import { ExternalLinkIcon } from '../icons/ExternalLinkIcon.tsx';
+import { HubSpotDataSourceIcon } from '../icons/HubSpotDataSourceIcon.tsx';
+import { LogoutIcon } from '../icons/LogoutIcon.tsx';
+import { ShareButton } from '../ShareButton/ShareButton.tsx';
+import { styles } from './AppConnectHeader.css.ts';
+
+interface FakeUser {
+  firstName: string;
+  lastName: string;
+  email: string;
+}
+
+const FAKE_USER: FakeUser = {
+  firstName: 'Gabby',
+  lastName: 'Martinez',
+  email: 'gabby.martinez@acmecorp.com',
+};
+
+function getUserInitials(user: FakeUser): string {
+  const first = user.firstName.charAt(0).toUpperCase();
+  const last = user.lastName.charAt(0).toUpperCase();
+  return `${first}${last}`;
+}
+
+function getFullName(user: FakeUser): string {
+  return `${user.firstName} ${user.lastName}`;
+}
+
+interface AppConnectHeaderProps {
+  title: string;
+}
+
+export function AppConnectHeader({ title }: AppConnectHeaderProps) {
+  const { status } = useHubSpotAppConnect();
+  return (
+    <header className={styles.header}>
+      <div className={styles.titleRow}>
+        <div className={styles.leftStack}>
+          <div className={styles.titleCluster}>
+            <h1 className={styles.title}>{title}</h1>
+            <ShareButton pageTitle={title} />
+          </div>
+          {status === 'connected' ? <ViewingHubSpotContextRow /> : null}
+        </div>
+      </div>
+      {status === 'connected' ? (
+        <UserMenu />
+      ) : (
+        <ConnectButton variant="secondary" />
+      )}
+    </header>
+  );
+}
+
+function ViewingHubSpotContextRow() {
+  return (
+    <div className={styles.contextRow}>
+      <HubSpotDataSourceIcon className={styles.contextIcon} />
+      <span className={styles.contextPrefix}>Viewing HubSpot data from </span>
+      <a
+        className={styles.contextLink}
+        href="#"
+        onClick={(event) => {
+          event.preventDefault();
+        }}
+      >
+        Acme Corp · HubSpot
+        <ExternalLinkIcon className={styles.contextExternalIcon} />
+      </a>
+    </div>
+  );
+}
+
+function UserMenu() {
+  const { disconnectFromHubSpot } = useHubSpotAppConnect();
+  const initials = getUserInitials(FAKE_USER);
+  const fullName = getFullName(FAKE_USER);
+
+  return (
+    <Menu.Root modal={false}>
+      <Menu.Trigger className={styles.userTrigger}>
+        <span
+          className={`${styles.avatar} ${styles.avatarSm}`}
+          aria-hidden="true"
+        >
+          {initials}
+        </span>
+        <span className={styles.triggerName}>{fullName}</span>
+        <ChevronDownIcon className={styles.chevron} />
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Positioner sideOffset={8} align="end">
+          <Menu.Popup className={styles.popup}>
+            <div className={styles.userInfo}>
+              <span
+                className={`${styles.avatar} ${styles.avatarLg}`}
+                aria-hidden="true"
+              >
+                {initials}
+              </span>
+              <div className={styles.userInfoText}>
+                <span className={styles.userInfoName}>{fullName}</span>
+                <span className={styles.userInfoEmail}>{FAKE_USER.email}</span>
+              </div>
+            </div>
+            <Menu.Separator className={styles.separator} />
+            <Menu.Item
+              className={styles.disconnectItem}
+              onClick={() => void disconnectFromHubSpot()}
+            >
+              <LogoutIcon className={styles.disconnectIcon} />
+              Disconnect
+            </Menu.Item>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  );
+}

package/src/browser/react/components/Button/Button.css.ts

@@ -0,0 +1,59 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+
+import { themeVars } from '../../../theme.css.ts';
+
+export const root = style({
+  appearance: 'none',
+  WebkitAppearance: 'none',
+  margin: 0,
+  font: 'inherit',
+  fontWeight: 500,
+  lineHeight: 'inherit',
+  textAlign: 'center',
+  cursor: 'pointer',
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderRadius: themeVars.borderRadius[100],
+  transition:
+    'background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease',
+  selectors: {
+    '&:disabled': {
+      cursor: 'wait',
+      opacity: 0.55,
+    },
+  },
+});
+
+export const variant = styleVariants({
+  primary: {
+    backgroundColor: themeVars.fill.primary.default,
+    color: themeVars.text.primary.default,
+    borderColor: themeVars.border.primary.default,
+    selectors: {
+      '&:hover:not(:disabled)': {
+        filter: 'brightness(0.95)',
+      },
+    },
+  },
+  secondary: {
+    backgroundColor: themeVars.fill.surface.default.default,
+    color: themeVars.text.core.default,
+    borderColor: themeVars.border.core.default,
+    selectors: {
+      '&:hover:not(:disabled)': {
+        backgroundColor: '#f7f7f7',
+      },
+    },
+  },
+});
+
+export const size = styleVariants({
+  md: {
+    padding: `${themeVars.space[200]} ${themeVars.space[300]}`,
+    fontSize: 14,
+  },
+  lg: {
+    padding: `${themeVars.space[300]} ${themeVars.space[500]}`,
+    fontSize: 16,
+  },
+});

package/src/browser/react/components/Button/Button.tsx

@@ -0,0 +1,38 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+import * as styles from './Button.css.ts';
+
+export type ButtonVariant = 'primary' | 'secondary';
+export type ButtonSize = 'md' | 'lg';
+
+export interface ButtonProps extends Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'children'
+> {
+  children: ReactNode;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+export function Button({
+  children,
+  className,
+  variant = 'primary',
+  size = 'md',
+  type = 'button',
+  ...rest
+}: ButtonProps) {
+  const composedClassName = [
+    styles.root,
+    styles.variant[variant],
+    styles.size[size],
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+  return (
+    <button {...rest} type={type} className={composedClassName}>
+      {children}
+    </button>
+  );
+}

package/src/browser/react/components/ConnectButton/ConnectButton.css.ts

@@ -0,0 +1,73 @@
+import { keyframes, style, styleVariants } from '@vanilla-extract/css';
+
+import { themeVars } from '../../../theme.css.ts';
+
+const spin = keyframes({
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' },
+});
+
+export const root = style({
+  position: 'relative',
+});
+
+export const label = style({
+  position: 'relative',
+  zIndex: 0,
+});
+
+export const labelMuted = style({
+  opacity: 0.22,
+});
+
+export const loadingBackdrop = styleVariants({
+  primary: {
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    zIndex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 36,
+    height: 36,
+    marginLeft: -18,
+    marginTop: -18,
+    borderRadius: '50%',
+    backgroundColor: 'rgba(255, 255, 255, 0.88)',
+    boxShadow: '0 1px 6px rgba(0, 0, 0, 0.14)',
+    pointerEvents: 'none',
+  },
+  secondary: {
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    zIndex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 36,
+    height: 36,
+    marginLeft: -18,
+    marginTop: -18,
+    borderRadius: '50%',
+    backgroundColor: 'rgba(255, 255, 255, 0.82)',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: themeVars.border.core.subtle.default,
+    boxShadow: '0 1px 4px rgba(0, 0, 0, 0.08)',
+    pointerEvents: 'none',
+  },
+});
+
+export const spinner = style({
+  display: 'block',
+  width: 14,
+  height: 14,
+  borderWidth: 2,
+  borderStyle: 'solid',
+  borderColor: themeVars.border.core.subtle.default,
+  borderTopColor: themeVars.fill.primary.default,
+  borderRadius: '50%',
+  animation: `${spin} 0.8s linear infinite`,
+});

package/src/browser/react/components/ConnectButton/ConnectButton.tsx

@@ -0,0 +1,43 @@
+import { useHubSpotAppConnect } from '../../hooks.ts';
+import type { ButtonProps } from '../Button/Button.tsx';
+import { Button } from '../Button/Button.tsx';
+import {
+  label,
+  labelMuted,
+  loadingBackdrop,
+  root,
+  spinner,
+} from './ConnectButton.css.ts';
+
+export interface ConnectButtonProps extends Pick<
+  ButtonProps,
+  'variant' | 'size' | 'className'
+> {}
+
+export function ConnectButton({
+  variant = 'primary',
+  size = 'md',
+  className,
+}: ConnectButtonProps) {
+  const { status, connectToHubSpot } = useHubSpotAppConnect();
+  const isConnecting = status === 'connecting';
+  const composedClassName = [root, className].filter(Boolean).join(' ');
+  const labelClassName = isConnecting ? `${label} ${labelMuted}` : label;
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      className={composedClassName}
+      aria-busy={isConnecting}
+      onClick={() => void connectToHubSpot()}
+      disabled={isConnecting}
+    >
+      <span className={labelClassName}>Connect to HubSpot</span>
+      {isConnecting ? (
+        <span className={loadingBackdrop[variant]} aria-hidden="true">
+          <span className={spinner} />
+        </span>
+      ) : null}
+    </Button>
+  );
+}

package/src/browser/react/components/DisconnectedBody/DisconnectedBody.css.ts

@@ -0,0 +1,25 @@
+import { style } from '@vanilla-extract/css';
+
+import { themeVars } from '../../../theme.css.ts';
+
+export const styles = {
+  card: style({
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: themeVars.border.core.default,
+    borderRadius: themeVars.borderRadius[400],
+    padding: themeVars.space[500],
+    textAlign: 'center',
+    backgroundColor: themeVars.fill.surface.default.default,
+    color: themeVars.text.core.default,
+  }),
+  message: style({
+    marginTop: 0,
+    marginBottom: themeVars.space[400],
+  }),
+  errorText: style({
+    marginTop: themeVars.space[300],
+    marginBottom: 0,
+    color: themeVars.text.alert.default,
+  }),
+} as const;

package/src/browser/react/components/DisconnectedBody/DisconnectedBody.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+import { useHubSpotAppConnect } from '../../hooks.ts';
+import { ConnectButton } from '../ConnectButton/ConnectButton.tsx';
+import { styles } from './DisconnectedBody.css.ts';
+
+interface DisconnectedBodyProps {
+  message: ReactNode;
+}
+
+export function DisconnectedBody({ message }: DisconnectedBodyProps) {
+  const { error } = useHubSpotAppConnect();
+
+  return (
+    <div className={styles.card}>
+      <p className={styles.message}>{message}</p>
+      <ConnectButton size="lg" />
+      {error && (
+        <p className={styles.errorText}>
+          Failed to connect to HubSpot. {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/browser/react/components/HubSpotAppConnect/HubSpotAppConnect.css.ts

@@ -0,0 +1,23 @@
+import { style } from '@vanilla-extract/css';
+
+import { themeVars } from '../../../theme.css.ts';
+
+export const styles = {
+  shell: style({
+    width: '100%',
+    padding: `${themeVars.space[400]} ${themeVars.space[500]}`,
+  }),
+  content: style({
+    marginTop: themeVars.space[500],
+  }),
+  connectedErrorBanner: style({
+    backgroundColor: themeVars.fill.alert.subtle,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: themeVars.border.alert.default,
+    borderRadius: themeVars.borderRadius[300],
+    padding: themeVars.space[300],
+    marginBottom: themeVars.space[300],
+    color: themeVars.text.alert.default,
+  }),
+} as const;

package/src/browser/react/components/HubSpotAppConnect/HubSpotAppConnect.tsx

@@ -0,0 +1,90 @@
+import { useEffect, type ReactNode } from 'react';
+
+import { themeClass } from '../../../theme.css.ts';
+import type { AppConnectController } from '../../../types.ts';
+import { HubSpotAppConnectControllerContext } from '../../context.ts';
+import { useHubSpotAppConnect } from '../../hooks.ts';
+import { AppConnectHeader } from '../AppConnectHeader/AppConnectHeader.tsx';
+import { DisconnectedBody } from '../DisconnectedBody/DisconnectedBody.tsx';
+import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator.tsx';
+import { styles } from './HubSpotAppConnect.css.ts';
+
+/**
+ * Props accepted by {@link HubSpotAppConnect}.
+ */
+export interface HubSpotAppConnectProps {
+  /** Title text rendered in the standard SDK header. */
+  title: string;
+  /** Controller produced by `createAppConnectController`. */
+  controller: AppConnectController;
+  /** 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;
+}
+
+/**
+ * Layout component that exposes `controller` to {@link useHubSpotAppConnect},
+ * starts it once on mount, and renders a standard header plus the content
+ * slot that matches the current connection status.
+ */
+export function HubSpotAppConnect({
+  title,
+  controller,
+  connected,
+  disconnectedMessage,
+}: HubSpotAppConnectProps) {
+  useEffect(() => {
+    controller.start();
+  }, [controller]);
+  useEffect(() => {
+    document.documentElement.classList.add(themeClass);
+    return () => {
+      document.documentElement.classList.remove(themeClass);
+    };
+  }, []);
+  return (
+    <HubSpotAppConnectControllerContext.Provider value={controller}>
+      <div className={styles.shell}>
+        <AppConnectHeader title={title} />
+        <div className={styles.content}>
+          <HubSpotAppConnectContent
+            connected={connected}
+            disconnectedMessage={disconnectedMessage}
+          />
+        </div>
+      </div>
+    </HubSpotAppConnectControllerContext.Provider>
+  );
+}
+
+interface HubSpotAppConnectContentProps {
+  connected: ReactNode;
+  disconnectedMessage: ReactNode;
+}
+
+function HubSpotAppConnectContent({
+  connected,
+  disconnectedMessage,
+}: HubSpotAppConnectContentProps) {
+  const { status, error } = useHubSpotAppConnect();
+  if (status === 'initializing') {
+    return <LoadingIndicator />;
+  }
+  if (status === 'connected') {
+    return (
+      <>
+        {error ? (
+          <div className={styles.connectedErrorBanner} role="alert">
+            {error}
+          </div>
+        ) : null}
+        {connected}
+      </>
+    );
+  }
+  return <DisconnectedBody message={disconnectedMessage} />;
+}

package/src/browser/react/components/LoadingIndicator/LoadingIndicator.css.ts

@@ -0,0 +1,28 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+import { themeVars } from '../../../theme.css.ts';
+
+const spin = keyframes({
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' },
+});
+
+export const styles = {
+  wrapper: style({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 200,
+    padding: themeVars.space[600],
+  }),
+  spinner: style({
+    width: 40,
+    height: 40,
+    borderWidth: 3,
+    borderStyle: 'solid',
+    borderColor: themeVars.border.core.subtle.default,
+    borderTopColor: themeVars.fill.primary.default,
+    borderRadius: '50%',
+    animation: `${spin} 0.8s linear infinite`,
+  }),
+} as const;

package/src/browser/react/components/LoadingIndicator/LoadingIndicator.tsx

@@ -0,0 +1,9 @@
+import { styles } from './LoadingIndicator.css.ts';
+
+export function LoadingIndicator() {
+  return (
+    <div className={styles.wrapper} role="status" aria-label="Loading">
+      <div className={styles.spinner} />
+    </div>
+  );
+}

package/src/browser/react/components/ShareButton/ShareButton.css.ts

@@ -0,0 +1,52 @@
+import { style } from '@vanilla-extract/css';
+
+import { themeVars } from '../../../theme.css.ts';
+
+const shareBorder = '#cbd6e2';
+const shareText = '#33475b';
+
+export const styles = {
+  shareButton: style({
+    flexShrink: 0,
+    appearance: 'none',
+    WebkitAppearance: 'none',
+    margin: 0,
+    fontFamily: 'inherit',
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: 1,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: themeVars.space[200],
+    padding: `8px ${themeVars.space[300]}`,
+    color: shareText,
+    backgroundColor: themeVars.fill.surface.default.default,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: shareBorder,
+    borderRadius: 100,
+    transition:
+      'background-color 120ms ease, border-color 120ms ease, color 120ms ease',
+    selectors: {
+      '&:hover:not(:disabled)': {
+        backgroundColor: '#f5f8fa',
+      },
+      '&:focus-visible': {
+        outline: `2px solid ${themeVars.border.tertiary.default}`,
+        outlineOffset: 2,
+      },
+      '&:disabled': {
+        cursor: 'not-allowed',
+        opacity: 0.55,
+      },
+    },
+  }),
+  shareIcon: style({
+    width: 16,
+    height: 16,
+    flexShrink: 0,
+    display: 'block',
+  }),
+} as const;

package/src/browser/react/components/ShareButton/ShareButton.tsx

@@ -0,0 +1,43 @@
+import { ShareIcon } from '../icons/ShareIcon.tsx';
+import { styles } from './ShareButton.css.ts';
+
+interface ShareAppConnectPageOptions {
+  pageTitle: string;
+}
+
+async function shareAppConnectPage(
+  options: ShareAppConnectPageOptions
+): Promise<void> {
+  const { pageTitle } = options;
+  const url = window.location.href;
+  if (typeof navigator.share === 'function') {
+    try {
+      await navigator.share({ title: pageTitle, text: pageTitle, url });
+      return;
+    } catch (error) {
+      if (error instanceof DOMException && error.name === 'AbortError') {
+        return;
+      }
+    }
+  }
+  if (typeof navigator.clipboard?.writeText === 'function') {
+    await navigator.clipboard.writeText(url);
+  }
+}
+
+export interface ShareButtonProps {
+  pageTitle: string;
+}
+
+export function ShareButton({ pageTitle }: ShareButtonProps) {
+  return (
+    <button
+      type="button"
+      className={styles.shareButton}
+      onClick={() => void shareAppConnectPage({ pageTitle })}
+    >
+      <ShareIcon className={styles.shareIcon} />
+      <span>Share</span>
+    </button>
+  );
+}

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

@@ -0,0 +1,23 @@
+export interface ChevronDownIconProps {
+  className?: string;
+}
+
+export function ChevronDownIcon({ className }: ChevronDownIconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        d="M4 6l4 4 4-4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,23 @@
+export interface ExternalLinkIconProps {
+  className?: string;
+}
+
+export function ExternalLinkIcon({ className }: ExternalLinkIconProps) {
+  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 3.5H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-2.5M10 2.5h3.5V6M9 7l5-5"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}