@hubspot/ui-extensions 0.0.1-prealpha.0 → 0.0.1-prealpha.2

package/CrmComponents/crmComponents.ts

@@ -0,0 +1,11 @@
+/* Hello! To create your first component, uncomment the code below and replace
+*  the entrie with your props and component name
+* import { createExtensionComponent } from '../utils/createExtensionComponent';
+* import type { ExampleCrmComponentProps } from '../types';
+
+* const ExampleCrmComponent = createExtensionComponent<
+* 'ExampleCrmComponent',
+* ExampleCrmComponentProps
+* >('ExampleCrmComponent');
+*/
+export {};

package/CrmComponents/index.ts

@@ -0,0 +1 @@
+export {};

package/{components.ts → coreComponents.ts}

@@ -4,6 +4,7 @@ import type {
   AlertProps,
   ButtonProps,
   ButtonRowProps,
+  CardProps,
   DescriptionListProps,
   DescriptionListItemProps,
   FormProps,
@@ -21,11 +22,6 @@ import type {
   StatisticsTrendProps,
 } from './types';
 
-interface CardProps {
-  style: React.CSSProperties;
-  title: string;
-}
-
 const Alert = createRemoteReactComponent<'Alert', AlertProps>('Alert');
 const Button = createRemoteReactComponent<'Button', ButtonProps>('Button');
 const ButtonRow = createRemoteReactComponent<'ButtonRow', ButtonRowProps>(

package/hubspot.ts

@@ -1,8 +1,8 @@
 /* eslint-disable hubspot-dev/no-confusing-browser-globals */
 
 import { createRoot, RemoteRoot } from '@remote-ui/react';
-import { ReactElement } from 'react';
-import { Context } from './types';
+import { ReactElement, isValidElement } from 'react';
+import { ExtensionPoints, ExtensionPointApi } from './types';
 
 export const hubspot = {
   extend: render,
@@ -10,11 +10,23 @@ export const hubspot = {
 
 const extend = (...args) => (self as any).extend(...args);
 
-function render(
-  renderCallback: (api: { context: Context }) => ReactElement<any>
+function render<ExtensionPointName extends keyof ExtensionPoints>(
+  renderCallback: (
+    api: ExtensionPointApi<ExtensionPointName>
+  ) => ReactElement<any>
 ) {
-  return extend((root: RemoteRoot, api: { context: Context }) => {
-    createRoot(root).render(renderCallback(api));
-    root.mount();
-  });
+  return extend(
+    (root: RemoteRoot, api: ExtensionPointApi<ExtensionPointName>) => {
+      const renderCallbackResult = renderCallback(api);
+
+      if (!isValidElement(renderCallbackResult)) {
+        throw new Error(
+          `[hubspot.extend]: Expected callback function to return a valid element, got: ${renderCallbackResult}`
+        );
+      }
+
+      createRoot(root).render(renderCallbackResult);
+      root.mount();
+    }
+  );
 }

package/index.ts

@@ -19,6 +19,6 @@ export {
   Tag,
   Text,
   Tile,
-} from './components';
+} from './coreComponents';
 
 export { hubspot } from './hubspot';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.0.1-prealpha.0",
+  "version": "0.0.1-prealpha.2",
   "description": "",
   "type": "module",
   "main": "index.ts",
@@ -13,5 +13,5 @@
     "@remote-ui/react": "^5.0.0",
     "react": "^18.2.0"
   },
-  "gitHead": "961d6ecb59b6cadfd4c19dea2d935df1a53c4fd8"
+  "gitHead": "236831146a8ce8906c080b3f555a8ff50d6f12da"
 }

package/types.ts

@@ -1,5 +1,5 @@
 // Do not manually update this file, changes will be overridden from ui-extensions-remote-renderer/static/js/types.ts
-import { ReactNode } from 'react';
+import { ReactNode, ComponentType } from 'react';
 
 export interface AlertProps {
   title: string;
@@ -14,6 +14,7 @@ export interface ButtonProps {
   href?: string;
   disabled?: boolean;
   variant?: 'primary' | 'secondary' | 'destructive';
+  type?: 'button' | 'reset' | 'submit';
 }
 
 export interface ButtonRowProps {
@@ -21,6 +22,10 @@ export interface ButtonRowProps {
   disableDropdown?: boolean;
 }
 
+export interface CardProps {
+  children: ReactNode;
+}
+
 export interface DescriptionListItemProps {
   children: ReactNode;
   label: string;
@@ -43,7 +48,8 @@ export interface DividerProps {
 
 export interface FormProps {
   children: ReactNode;
-  onSubmit: () => void;
+  onSubmit?: () => void;
+  preventDefault?: boolean;
 }
 
 export interface HeadingProps {
@@ -70,7 +76,6 @@ export interface InputProps {
   placeholder?: string;
   error?: boolean;
   errorMessage?: string;
-  visible?: boolean;
   onChange: (value: string) => void;
   onInput: (value: string) => void;
 }
@@ -78,7 +83,6 @@ export interface InputProps {
 export interface ProgressBarProps {
   title?: string;
   showPercentage?: boolean;
-  type: 'progressBar';
   value?: number;
   valueMax?: number;
   valueDescription?: string;
@@ -169,7 +173,7 @@ export interface StatisticsProps {
   children: ReactNode;
 }
 
-interface ServerlessRunnerParams {
+export interface ServerlessRunnerParams {
   name: string;
   payload: Record<string, unknown>;
   onError?: () => void;
@@ -209,5 +213,77 @@ export interface ExtensionCardContextData {
   appId: number | string;
   objectId: number | string;
   objectTypeId: string;
-  location: string;
+  location: keyof ExtensionPoints;
+}
+
+export type ExtensionPointAction = (...args: any[]) => Promise<any> | void;
+
+export interface ExtensionPointContract {
+  actions?: { [k: string]: ExtensionPointAction } | {};
+  customComponents: Record<string, ComponentType<any>>;
+}
+type AlertType = 'info' | 'warning' | 'success' | 'danger' | 'tip' | undefined;
+
+export type AddAlertAction = (args: {
+  type?: AlertType;
+  message: string;
+}) => void;
+
+export type ReloadPageAction = () => void;
+
+export type FetchCrmObjectPropertiesAction = (
+  properties: string[]
+) => Promise<{ name: string; value: string }[]>;
+
+interface CrmMiddleExtensionPoint extends ExtensionPointContract {
+  actions: {
+    addAlert: AddAlertAction;
+    reloadPage: ReloadPageAction;
+    fetchCrmObjectProperties: FetchCrmObjectPropertiesAction;
+    openIframeModal?: (action: OpenIframeActionPayload) => void;
+  };
+}
+
+interface CrmSidebarExtensionPoint extends ExtensionPointContract {
+  actions: {
+    reloadPage: ReloadPageAction;
+  };
+}
+
+interface RemotePlaygroundExtensionPoint extends ExtensionPointContract {
+  actions: {
+    warn: () => void;
+  };
+  customComponents: {
+    ExampleCrmComponent: ComponentType<ExampleCrmComponentProps>;
+  };
+}
+
+export interface ExtensionPoints {
+  'uie.playground.middle': RemotePlaygroundExtensionPoint;
+  'crm.record.tab': CrmMiddleExtensionPoint;
+  'crm.record.sidebar': CrmSidebarExtensionPoint;
+}
+
+//TODO(Randy): Delete once we have real custom components
+export interface ExampleCrmComponentProps {
+  name: string;
+  size: 'sm' | 'md' | 'lg';
+  count: number;
+}
+
+export interface ExtensionPointApi<
+  ExtensionPointName extends keyof ExtensionPoints
+> {
+  context: Context;
+  runServerlessFunction: ServerlessFuncRunner;
+  actions: ExtensionPoints[ExtensionPointName]['actions'];
+  customComponents: string[];
+}
+
+interface OpenIframeActionPayload {
+  uri: string;
+  height: number;
+  width: number;
+  associatedObjectProperties?: string[];
 }

package/utils/createExtensionComponent.ts

@@ -0,0 +1,20 @@
+import type { RemoteComponentType } from '@remote-ui/core';
+import type { ReactComponentTypeFromRemoteComponentType } from '@remote-ui/react';
+import { createRemoteReactComponent } from '@remote-ui/react';
+
+export function createExtensionComponent<
+  ComponentType extends string,
+  Props = Record<string, never>,
+  AllowedChildren extends RemoteComponentType<string, any> | boolean = true
+>(
+  componentType:
+    | ComponentType
+    | RemoteComponentType<ComponentType, Props, AllowedChildren>
+): RemoteComponentType<ComponentType, Props, AllowedChildren> &
+  ReactComponentTypeFromRemoteComponentType<
+    RemoteComponentType<ComponentType, Props, AllowedChildren>
+  > {
+  return createRemoteReactComponent<ComponentType, Props, AllowedChildren>(
+    componentType
+  );
+}