@hubspot/ui-extensions 0.0.0

package/components.ts

@@ -0,0 +1,92 @@
+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

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

@@ -0,0 +1,24 @@
+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';

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@hubspot/ui-extensions",
+  "version": "0.0.0",
+  "description": "",
+  "type": "module",
+  "main": "index.ts",
+  "scripts": {},
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@remote-ui/react": "^5.0.0",
+    "react": "^18.2.0"
+  },
+  "gitHead": "ca7c7648663fd4c60ce98b616ba6d3662d949f07"
+}

package/types.ts

@@ -0,0 +1,213 @@
+// Do not manually update this file, changes will be overridden from ui-extensions-remote-renderer/static/js/types.ts
+import { ReactNode } 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';
+}
+
+export interface ButtonRowProps {
+  children: ReactNode;
+  disableDropdown?: boolean;
+}
+
+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;
+}
+
+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;
+  visible?: boolean;
+  onChange: (value: string) => void;
+  onInput: (value: string) => void;
+}
+
+export interface ProgressBarProps {
+  title?: string;
+  showPercentage?: boolean;
+  type: 'progressBar';
+  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;
+}
+
+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: string;
+}