@hubspot/ui-extensions 0.0.1-prealpha.3 → 0.0.1-prealpha.5

package/dist/hubspot.js

@@ -0,0 +1,17 @@
+/* eslint-disable hubspot-dev/no-confusing-browser-globals */
+import { createRoot } from '@remote-ui/react';
+import { isValidElement } from 'react';
+export const hubspot = {
+    extend: render,
+};
+const extend = (...args) => self.extend(...args);
+function render(renderCallback) {
+    return extend((root, api) => {
+        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/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, Form, Heading, Image, Input, LoadingSpinner, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, } from './coreComponents';
+export { hubspot } from './hubspot';
+export * from './types';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, Form, Heading, Image, Input, LoadingSpinner, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, } from './coreComponents';
+export { hubspot } from './hubspot';
+export * from './types';

package/dist/types.d.ts

@@ -0,0 +1,263 @@
+import { ReactNode, ComponentType } from 'react';
+export interface AlertProps {
+    title: string;
+    body?: string;
+    children?: ReactNode;
+    variant?: 'info' | 'warning' | 'success' | 'error' | 'danger';
+}
+export interface ButtonProps {
+    text: string;
+    onClick?: () => void;
+    href?: string;
+    disabled?: boolean;
+    variant?: 'primary' | 'secondary' | 'destructive';
+    type?: 'button' | 'reset' | 'submit';
+}
+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 FormProps {
+    children: ReactNode;
+    onSubmit?: () => void;
+    preventDefault?: boolean;
+}
+export interface HeadingProps {
+    text: string;
+    format?: 'plaintext' | 'markdown';
+}
+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;
+}
+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 | boolean;
+    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 | boolean;
+    }[];
+}
+export interface TagProps {
+    text: string;
+    onClick?: () => void;
+    variant?: 'default' | 'warning' | 'success' | 'error';
+}
+export interface TextProps {
+    format?: 'plaintext' | 'markdown';
+    text: string;
+    variant?: 'bodytext' | 'microcopy';
+}
+export interface TileProps {
+    children: ReactNode;
+    flush?: boolean;
+}
+interface Team {
+    id: number;
+    name: string;
+    teammates: number[];
+}
+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;
+}
+type distanceOptions = 'flush' | 'small';
+export interface StackProps {
+    distance?: distanceOptions;
+    children?: React.ReactNode;
+}
+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 CrmPropertyListProps {
+    properties: string[];
+    direction?: string;
+}
+export interface ServerlessRunnerParams {
+    name: string;
+    payload: Record<string, unknown>;
+    onError?: () => void;
+}
+export type ServerlessFuncRunner = (params: ServerlessRunnerParams) => Promise<any>;
+export interface ServerlessSuccessResponse {
+    logId: string;
+    response: {
+        message?: {
+            type: 'SUCCESS' | 'ERROR';
+            body: string;
+        } | string;
+        context?: Record<string, unknown>;
+        section?: Record<string, unknown>;
+    };
+}
+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<{
+    name: string;
+    value: 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>;
+    };
+}
+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'];
+    customComponents: string[];
+}
+interface OpenIframeActionPayload {
+    uri: string;
+    height: number;
+    width: number;
+    associatedObjectProperties?: string[];
+}
+export interface LoadingSpinnerProps {
+    label: string;
+    showLabel?: boolean;
+    size?: 'xs' | 'sm' | 'md';
+    layout?: 'inline' | 'centered';
+    grow?: boolean;
+}
+export interface TableElementProps {
+    children: React.ReactNode;
+}
+export interface TableProps extends TableElementProps {
+    flush?: boolean;
+    bordered?: boolean;
+}
+export {};

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,51 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.0.1-prealpha.3",
+  "version": "0.0.1-prealpha.5",
   "description": "",
   "type": "module",
-  "main": "index.ts",
-  "scripts": {},
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "clean": "rm -rf dist/",
+    "prepare": "npm run clean && tsc",
+    "watch": "npm run clean && tsc --watch"
+  },
+  "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": "74dbffa7fe6e4ad7d5029897801c11dc5d5edae1"
+  "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": "a4652eb58cbde813dbebc8b7127c36102b9b6ed6"
 }

package/CrmComponents/crmComponents.ts

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

package/coreComponents.ts

@@ -1,94 +0,0 @@
-import { createRemoteReactComponent } from '@remote-ui/react';
-
-import type {
-  AlertProps,
-  ButtonProps,
-  ButtonRowProps,
-  CardProps,
-  DescriptionListProps,
-  DescriptionListItemProps,
-  FormProps,
-  HeadingProps,
-  ImageProps,
-  InputProps,
-  LoadingSpinnerProps,
-  ProgressBarProps,
-  SelectProps,
-  TagProps,
-  TextProps,
-  TileProps,
-  StackProps,
-  StatisticsProps,
-  StatisticsItemProps,
-  StatisticsTrendProps,
-} from './types';
-
-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 LoadingSpinner = createRemoteReactComponent<
-  'LoadingSpinner',
-  LoadingSpinnerProps
->('LoadingSpinner');
-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,
-  LoadingSpinner,
-  ProgressBar,
-  Select,
-  Stack,
-  Statistics,
-  StatisticsItem,
-  StatisticsTrend,
-  Tag,
-  Text,
-  Tile,
-};

package/hubspot.ts

@@ -1,32 +0,0 @@
-/* eslint-disable hubspot-dev/no-confusing-browser-globals */
-
-import { createRoot, RemoteRoot } from '@remote-ui/react';
-import { ReactElement, isValidElement } from 'react';
-import { ExtensionPoints, ExtensionPointApi } from './types';
-
-export const hubspot = {
-  extend: render,
-};
-
-const extend = (...args) => (self as any).extend(...args);
-
-function render<ExtensionPointName extends keyof ExtensionPoints>(
-  renderCallback: (
-    api: ExtensionPointApi<ExtensionPointName>
-  ) => ReactElement<any>
-) {
-  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

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