@hubspot/ui-extensions 0.0.0 → 0.0.1-beta.0

package/dist/types.d.ts

@@ -0,0 +1,433 @@
+import { ReactNode, ComponentType } from 'react';
+export interface AlertProps {
+    title: string;
+    body?: string;
+    children?: ReactNode;
+    variant?: 'info' | 'warning' | 'success' | 'error' | 'danger';
+}
+export interface ButtonProps {
+    onClick?: () => void;
+    href?: string;
+    disabled?: boolean;
+    variant?: 'primary' | 'secondary' | 'destructive';
+    type?: 'button' | 'reset' | 'submit';
+    children: ReactNode;
+}
+export interface ButtonRowProps {
+    children: ReactNode;
+    disableDropdown?: boolean;
+}
+export interface CardProps {
+    children: ReactNode;
+}
+export interface DescriptionListItemProps {
+    children: ReactNode;
+    label: string;
+}
+export interface DescriptionListProps {
+    children: ReactNode;
+    direction?: 'row' | 'column';
+}
+export interface DividerProps {
+    distance?: 'flush' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
+}
+export interface EmptyStateProps {
+    flush?: boolean;
+    children: ReactNode;
+    title?: string;
+    layout?: 'horizontal' | 'vertical';
+    reverseOrder?: boolean;
+    imageWidth?: number;
+}
+export interface ErrorStateProps {
+    children: ReactNode;
+    title?: string;
+    type?: 'error' | 'support' | 'lock';
+}
+export type FormInputValues = Record<string, string | number>;
+export interface FormProps {
+    children: ReactNode;
+    onSubmit?: (event: RemoteEvent<FormInputValues>) => void;
+    preventDefault?: boolean;
+}
+export interface HeadingProps {
+    children: ReactNode;
+    inline?: boolean;
+}
+export interface ImageProps {
+    alt?: string;
+    href?: string;
+    onClick?: () => void;
+    src: string;
+    width?: number;
+}
+export interface InputProps {
+    label: string;
+    name: string;
+    value?: string;
+    required?: boolean;
+    readOnly?: boolean;
+    description?: string;
+    tooltip?: string;
+    placeholder?: string;
+    error?: boolean;
+    validationMessage?: string;
+    onChange?: (value: string) => void;
+    onInput?: (value: string) => void;
+    onBlur?: (value: string) => void;
+    onFocus?: (value: string) => void;
+}
+export interface TextareaProps extends InputProps {
+    cols?: number;
+    maxLength?: number;
+    rows?: number;
+    resize?: 'vertical' | 'horizontal' | 'both' | 'none';
+}
+export interface ProgressBarProps {
+    title?: string;
+    showPercentage?: boolean;
+    value?: number;
+    valueMax?: number;
+    valueDescription?: string;
+    variant?: 'success' | 'danger' | 'warning';
+}
+export interface SelectProps {
+    label: string;
+    name: string;
+    value?: string | number;
+    required?: boolean;
+    readOnly?: boolean;
+    description?: string;
+    tooltip?: string;
+    placeholder?: string;
+    error?: boolean;
+    validationMessage?: string;
+    onChange?: (value: SelectProps['value']) => void;
+    options: {
+        label: string;
+        value: string | number;
+    }[];
+}
+export interface TagProps {
+    children: ReactNode;
+    onClick?: () => void;
+    variant?: 'default' | 'warning' | 'success' | 'error';
+}
+export interface TextFormatOptions {
+    fontWeight?: 'regular' | 'bold' | 'demibold';
+    italic?: boolean;
+    lineDecoration?: 'none' | 'underline' | 'strikethrough';
+}
+export type TextProps = {
+    variant?: 'bodytext' | 'microcopy';
+    inline?: boolean;
+    children: ReactNode;
+    format?: TextFormatOptions;
+};
+export interface TileProps {
+    children: ReactNode;
+    flush?: boolean;
+}
+interface Team {
+    id: number;
+    name: string;
+    teammates: number[];
+}
+export type ToggleGroupOption = {
+    label: string;
+    value: string;
+    initialIsChecked?: boolean;
+    readonly?: boolean;
+    description?: string;
+};
+interface ToggleGroupListBaseProps {
+    name: ToggleGroupProps['name'];
+    options: ToggleGroupProps['options'];
+    variant: ToggleGroupProps['variant'];
+    inline?: boolean;
+}
+export interface CheckboxListProps extends ToggleGroupListBaseProps {
+    value?: CheckboxGroupProps['value'];
+    onChange?: CheckboxGroupProps['onChange'];
+}
+export interface RadioButtonListProps extends ToggleGroupListBaseProps {
+    value?: RadioButtonGroupProps['value'];
+    onChange?: RadioButtonGroupProps['onChange'];
+}
+interface CheckboxGroupProps {
+    toggleType: 'checkboxList';
+    onChange?: (value: this['value']) => void;
+    value?: string[];
+}
+interface RadioButtonGroupProps {
+    toggleType: 'radioButtonList';
+    onChange?: (value: this['value']) => void;
+    value?: string;
+}
+export type ToggleGroupProps = {
+    name: string;
+    label: string;
+    validationMessage?: string;
+    required?: boolean;
+    tooltip?: string;
+    error?: boolean;
+    options: Array<ToggleGroupOption>;
+    inline?: boolean;
+    variant?: 'default' | 'small';
+} & (CheckboxGroupProps | RadioButtonGroupProps);
+export interface UserContext {
+    id: number;
+    emails: string[];
+    email: string;
+    firstName: string;
+    lastName: string;
+    roles: string[];
+    teams: Team[];
+    locale?: string;
+}
+export interface PortalContext {
+    id: number;
+    timezone: string;
+}
+export interface Context {
+    user: UserContext;
+    portal: PortalContext;
+}
+export interface StackProps {
+    distance?: 'flush' | 'small' | 'extra-small' | 'medium' | 'large';
+    children?: React.ReactNode;
+    direction?: 'row' | 'column';
+}
+export interface StatisticsTrendProps {
+    value: string;
+    direction: 'increase' | 'decrease';
+}
+export interface StatisticsItemProps {
+    id?: string;
+    label: string;
+    number: string;
+    children: ReactNode;
+}
+export interface StatisticsProps {
+    children: ReactNode;
+}
+export interface ServerlessRunnerParams {
+    /**
+     * Name of the serverless function
+     */
+    name: string;
+    /**
+     * Names of CRM object properties to be retrieved and supplied to the function as `context.propertiesToSend`
+     */
+    propertiesToSend?: string[];
+    /**
+     * Additional parameters to be supplied to the function as `context.parameters`
+     */
+    parameters?: JsonValue;
+    /**
+     * @deprecated Optional payload supplied to the function as `context.event.payload`.
+     * Support for this param may be removed in the future. Use `parameters` instead.
+     */
+    payload?: JsonValue;
+}
+export declare enum ServerlessExecutionStatus {
+    Success = "SUCCESS",
+    Error = "ERROR"
+}
+export type ServerlessExecutionResult = {
+    status: ServerlessExecutionStatus.Success;
+    response: JsonValue;
+} | {
+    status: ServerlessExecutionStatus.Error;
+    message: string;
+};
+export type ServerlessFuncRunner = (params: ServerlessRunnerParams) => Promise<ServerlessExecutionResult>;
+export interface ServerlessExecutionRequest {
+    appId: number;
+    extensibleCardId: number;
+    serverlessFunction: string;
+    location: keyof ExtensionPoints;
+    objectQuery?: {
+        objectId: number;
+        objectTypeId: string;
+        objectPropertyNames: string[];
+    };
+    parameters?: JsonValue;
+    event?: {
+        type: 'SERVERLESS_ACTION_HOOK';
+        payload: JsonValue;
+    };
+}
+export interface ServerlessExecutionResponse {
+    logId: string;
+    response?: JsonValue;
+}
+export interface ServerlessErrorResponse {
+    responseJSON?: {
+        message: string;
+        correlationId: string;
+        category: string;
+        subCategory?: string;
+        errors?: {
+            message: string;
+            subCategory: string;
+        }[];
+    };
+    status: number;
+}
+export interface ExtensionCardContextData {
+    cardId: string;
+    appId: number | string;
+    objectId: number | string;
+    objectTypeId: 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<Record<string, string>>;
+export type OpenIframeModalAction = (action: OpenIframeActionPayload) => void;
+export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
+    actions: {
+        addAlert: AddAlertAction;
+        reloadPage: ReloadPageAction;
+        fetchCrmObjectProperties: FetchCrmObjectPropertiesAction;
+        openIframeModal: OpenIframeModalAction;
+    };
+    customComponents: {
+        CrmPropertyList: ComponentType<CrmPropertyListProps>;
+        CrmAssociationTable: ComponentType<CrmAssociationTableProps>;
+        CrmDataHighlight: ComponentType<CrmDataHighlightProps>;
+        CrmReport: ComponentType<CrmReportProps>;
+        CrmAssociationPivot: ComponentType<CrmAssociationPivotProps>;
+    };
+}
+export interface CrmDataHighlightProps {
+    properties: string[];
+    objectTypeId?: string;
+    objectId?: number;
+}
+export interface CrmReportProps {
+    reportId: string;
+}
+export interface CrmPropertyListProps {
+    properties: string[];
+    direction?: string;
+    objectTypeId?: string;
+    objectId?: number;
+}
+type CrmSortDescriptor = {
+    columnName: string;
+    direction: 1 | -1;
+};
+interface CrmSearchFilter {
+    operator: 'EQ' | 'NEQ' | 'LT' | 'LTE' | 'GT' | 'GTE' | 'BETWEEN' | 'IN' | 'NOT_IN' | 'HAS_PROPERTY' | 'NOT_HAS_PROPERTY' | 'ROLLING_DATE_RANGE' | 'TIME_UNIT_TO_DATE';
+    value?: string | number;
+    values?: string | number;
+    highValue?: string | number;
+    property: string;
+}
+export interface CrmAssociationTableProps {
+    objectTypeId: string;
+    propertyColumns: Array<string>;
+    quickFilterProperties?: Array<string>;
+    searchable?: boolean;
+    pagination?: boolean;
+    pageSize?: number;
+    preFilters?: Array<CrmSearchFilter>;
+    sort?: Array<CrmSortDescriptor>;
+}
+export interface CrmAssociationPivotProps {
+    objectTypeId: string;
+    associationLabels?: Array<string>;
+    maxAssociations?: number;
+    preFilters?: Array<CrmSearchFilter>;
+    sort?: Array<CrmSortDescriptor>;
+}
+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;
+}
+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'];
+}
+interface OpenIframeActionPayload {
+    uri: string;
+    height: number;
+    width: number;
+    associatedObjectProperties?: string[];
+}
+export interface LoadingSpinnerProps {
+    label: string;
+    showLabel?: boolean;
+    size?: 'xs' | 'sm' | 'md';
+    layout?: 'inline' | 'centered';
+}
+export interface TableElementProps {
+    children: React.ReactNode;
+}
+interface BaseTableProps {
+    bordered?: boolean;
+    flush?: boolean;
+    children: React.ReactNode;
+}
+export interface TableNoPaginatedProps extends BaseTableProps {
+    paginated?: false;
+}
+export interface TablePaginatedProps extends BaseTableProps {
+    paginated: true;
+    pageCount: number;
+    onPageChange: (pageNumber: number) => void;
+    showButtonLabels?: boolean;
+    showFirstLastButtons?: boolean;
+    maxVisiblePageButtons?: number;
+    page?: number;
+}
+export type TableProps = TableNoPaginatedProps | TablePaginatedProps;
+export declare class RemoteEvent<V> {
+    type: string;
+    bubbles: boolean;
+    timeStamp: number;
+    targetValue: V;
+    constructor(value: V, event: Event);
+}
+export interface LinkProps {
+    children: ReactNode;
+    href: string;
+    variant?: 'primary' | 'destructive' | 'light' | 'dark';
+}
+export type JsonValue = string | number | boolean | null | JsonValue[] | {
+    [key: string]: JsonValue;
+};
+export {};

package/dist/types.js

@@ -0,0 +1,17 @@
+export var ServerlessExecutionStatus;
+(function (ServerlessExecutionStatus) {
+    ServerlessExecutionStatus["Success"] = "SUCCESS";
+    ServerlessExecutionStatus["Error"] = "ERROR";
+})(ServerlessExecutionStatus || (ServerlessExecutionStatus = {}));
+export class RemoteEvent {
+    type;
+    bubbles;
+    timeStamp;
+    targetValue;
+    constructor(value, event) {
+        this.bubbles = event.bubbles;
+        this.type = event.type;
+        this.timeStamp = event.timeStamp;
+        this.targetValue = value;
+    }
+}

package/dist/utils/createExtensionComponent.d.ts

@@ -0,0 +1,3 @@
+import type { RemoteComponentType } from '@remote-ui/core';
+import type { ReactComponentTypeFromRemoteComponentType } from '@remote-ui/react';
+export declare 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>>;

package/dist/utils/createExtensionComponent.js

@@ -0,0 +1,4 @@
+import { createRemoteReactComponent } from '@remote-ui/react';
+export function createExtensionComponent(componentType) {
+    return createRemoteReactComponent(componentType);
+}

package/package.json

@@ -1,17 +1,52 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.0.0",
+  "version": "0.0.1-beta.0",
   "description": "",
   "type": "module",
-  "main": "index.ts",
-  "scripts": {},
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "clean": "rm -rf dist/",
+    "build": "npm run clean && tsc",
+    "watch": "npm run clean && tsc --watch",
+    "prepare": "npm run build"
+  },
+  "files": [
+    "dist/**/*"
+  ],
   "publishConfig": {
     "access": "public"
   },
+  "exports": {
+    ".": "./dist/index.js",
+    "./crm": "./dist/crm/index.js"
+  },
   "license": "MIT",
   "dependencies": {
     "@remote-ui/react": "^5.0.0",
     "react": "^18.2.0"
   },
-  "gitHead": "ca7c7648663fd4c60ce98b616ba6d3662d949f07"
+  "engines": {
+    "node": ">=16"
+  },
+  "peerDependencies": {
+    "@remote-ui/react": "^5.0.0",
+    "react": "^18.2.0",
+    "typescript": "^5.0.4"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "@remote-ui/react": {
+      "optional": false
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "typescript": "5.0.4"
+  },
+  "gitHead": "0bfb66cacc456a73f05a40841938e6b42f87aaba"
 }

package/components.ts

@@ -1,92 +0,0 @@
-import { createRemoteReactComponent } from '@remote-ui/react';
-
-import type {
-  AlertProps,
-  ButtonProps,
-  ButtonRowProps,
-  DescriptionListProps,
-  DescriptionListItemProps,
-  FormProps,
-  HeadingProps,
-  ImageProps,
-  InputProps,
-  ProgressBarProps,
-  SelectProps,
-  TagProps,
-  TextProps,
-  TileProps,
-  StackProps,
-  StatisticsProps,
-  StatisticsItemProps,
-  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>(
-  'ButtonRow'
-);
-const Card = createRemoteReactComponent<'Card', CardProps>('Card');
-const DescriptionList = createRemoteReactComponent<
-  'DescriptionList',
-  DescriptionListProps
->('DescriptionList');
-const DescriptionListItem = createRemoteReactComponent<
-  'DescriptionListItem',
-  DescriptionListItemProps
->('DescriptionListItem');
-const Divider = createRemoteReactComponent<'Divider', {}>('Divider');
-const Form = createRemoteReactComponent<'Form', FormProps>('Form');
-const Heading = createRemoteReactComponent<'Heading', HeadingProps>('Heading');
-const Image = createRemoteReactComponent<'Image', ImageProps>('Image');
-const Input = createRemoteReactComponent<'Input', InputProps>('Input');
-const ProgressBar = createRemoteReactComponent<'ProgressBar', ProgressBarProps>(
-  'ProgressBar'
-);
-const Select = createRemoteReactComponent<'Select', SelectProps>('Select');
-const Tag = createRemoteReactComponent<'Tag', TagProps>('Tag');
-const Text = createRemoteReactComponent<'Text', TextProps>('Text');
-const Tile = createRemoteReactComponent<'Tile', TileProps>('Tile');
-const Stack = createRemoteReactComponent<'Stack', StackProps>('Stack');
-
-const StatisticsItem = createRemoteReactComponent<
-  'StatisticsItem',
-  StatisticsItemProps
->('StatisticsItem');
-
-const Statistics = createRemoteReactComponent<'Statistics', StatisticsProps>(
-  'Statistics'
-);
-
-const StatisticsTrend = createRemoteReactComponent<
-  'StatisticsTrend',
-  StatisticsTrendProps
->('StatisticsTrend');
-
-export {
-  Alert,
-  Button,
-  ButtonRow,
-  Card,
-  DescriptionList,
-  DescriptionListItem,
-  Divider,
-  Form,
-  Heading,
-  Image,
-  Input,
-  ProgressBar,
-  Select,
-  Stack,
-  Statistics,
-  StatisticsItem,
-  StatisticsTrend,
-  Tag,
-  Text,
-  Tile,
-};

package/hubspot.ts

@@ -1,20 +0,0 @@
-/* eslint-disable hubspot-dev/no-confusing-browser-globals */
-
-import { createRoot, RemoteRoot } from '@remote-ui/react';
-import { ReactElement } from 'react';
-import { Context } from './types';
-
-export const hubspot = {
-  extend: render,
-};
-
-const extend = (...args) => (self as any).extend(...args);
-
-function render(
-  renderCallback: (api: { context: Context }) => ReactElement<any>
-) {
-  return extend((root: RemoteRoot, api: { context: Context }) => {
-    createRoot(root).render(renderCallback(api));
-    root.mount();
-  });
-}

package/index.ts

@@ -1,24 +0,0 @@
-export {
-  Alert,
-  Button,
-  ButtonRow,
-  Card,
-  DescriptionList,
-  DescriptionListItem,
-  Divider,
-  Form,
-  Heading,
-  Image,
-  Input,
-  ProgressBar,
-  Select,
-  Stack,
-  Statistics,
-  StatisticsItem,
-  StatisticsTrend,
-  Tag,
-  Text,
-  Tile,
-} from './components';
-
-export { hubspot } from './hubspot';