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

package/package.json

@@ -1,17 +1,51 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.0.1-prealpha.2",
+  "version": "0.0.1-prealpha.4",
   "description": "",
   "type": "module",
-  "main": "index.ts",
-  "scripts": {},
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rm -rf dist/ && tsc",
+    "watch": "rm -rf dist/ && tsc --watch"
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "prepare": "npm run build",
   "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": "236831146a8ce8906c080b3f555a8ff50d6f12da"
+  "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": "d3ed42de0f9675a2f599416ba1886ba379ecfcd0"
 }

package/CrmComponents/crmComponents.ts

@@ -1,11 +0,0 @@
-/* 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

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

package/coreComponents.ts

@@ -1,88 +0,0 @@
-import { createRemoteReactComponent } from '@remote-ui/react';
-
-import type {
-  AlertProps,
-  ButtonProps,
-  ButtonRowProps,
-  CardProps,
-  DescriptionListProps,
-  DescriptionListItemProps,
-  FormProps,
-  HeadingProps,
-  ImageProps,
-  InputProps,
-  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 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,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,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 './coreComponents';
-
-export { hubspot } from './hubspot';

package/types.ts

@@ -1,289 +0,0 @@
-// Do not manually update this file, changes will be overridden from ui-extensions-remote-renderer/static/js/types.ts
-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;
-  errorMessage?: 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;
-  errorMessage?: string;
-  onChange: (value: string) => 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 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 }[]>;
-
-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

@@ -1,20 +0,0 @@
-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
-  );
-}