@hubspot/ui-extensions 0.0.1-prealpha.7 → 0.1.0

package/dist/coreComponents.d.ts

@@ -1,4 +1,4 @@
-import type { AlertProps, ButtonProps, ButtonRowProps, CardProps, DescriptionListProps, DescriptionListItemProps, DividerProps, EmptyStateProps, ErrorStateProps, FormProps, HeadingProps, ImageProps, InputProps, TextareaProps, LoadingSpinnerProps, ProgressBarProps, SelectProps, TagProps, TextProps, TileProps, StackProps, StatisticsProps, StatisticsItemProps, StatisticsTrendProps, TableProps, TableElementProps, LinkProps } from './types';
+import type { AlertProps, ButtonProps, ButtonRowProps, CardProps, DescriptionListProps, DescriptionListItemProps, DividerProps, EmptyStateProps, ErrorStateProps, FormProps, HeadingProps, ImageProps, InputProps, TextareaProps, LoadingSpinnerProps, ProgressBarProps, SelectProps, TagProps, TextProps, TileProps, StackProps, StatisticsProps, StatisticsItemProps, StatisticsTrendProps, TableProps, TableElementProps, ToggleGroupProps, LinkProps, NumberInputProps, BoxProps } from './types';
 declare const Alert: "Alert" & {
     readonly type?: "Alert" | undefined;
     readonly props?: AlertProps | undefined;
@@ -61,9 +61,9 @@ declare const Image: "Image" & {
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Image", ImageProps, true>>;
 declare const Input: "Input" & {
     readonly type?: "Input" | undefined;
-    readonly props?: InputProps | undefined;
+    readonly props?: InputProps<string> | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Input", InputProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Input", InputProps<string>, true>>;
 declare const Textarea: "Textarea" & {
     readonly type?: "Textarea" | undefined;
     readonly props?: TextareaProps | undefined;
@@ -99,6 +99,11 @@ declare const Tile: "Tile" & {
     readonly props?: TileProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tile", TileProps, true>>;
+declare const ToggleGroup: "ToggleGroup" & {
+    readonly type?: "ToggleGroup" | undefined;
+    readonly props?: ToggleGroupProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ToggleGroup", ToggleGroupProps, true>>;
 declare const Stack: "Stack" & {
     readonly type?: "Stack" | undefined;
     readonly props?: StackProps | undefined;
@@ -159,4 +164,14 @@ declare const Link: "Link" & {
     readonly props?: LinkProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Link", LinkProps, true>>;
-export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, Textarea, LoadingSpinner, Link, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, };
+declare const NumberInput: "NumberInput" & {
+    readonly type?: "NumberInput" | undefined;
+    readonly props?: NumberInputProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"NumberInput", NumberInputProps, true>>;
+declare const Box: "Box" & {
+    readonly type?: "Box" | undefined;
+    readonly props?: BoxProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Box", BoxProps, true>>;
+export { Alert, Box, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, Textarea, LoadingSpinner, Link, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, ToggleGroup, NumberInput, };

package/dist/coreComponents.js

@@ -19,6 +19,7 @@ const Select = createRemoteReactComponent('Select');
 const Tag = createRemoteReactComponent('Tag');
 const Text = createRemoteReactComponent('Text');
 const Tile = createRemoteReactComponent('Tile');
+const ToggleGroup = createRemoteReactComponent('ToggleGroup');
 const Stack = createRemoteReactComponent('Stack');
 const StatisticsItem = createRemoteReactComponent('StatisticsItem');
 const Statistics = createRemoteReactComponent('Statistics');
@@ -31,4 +32,6 @@ const TableBody = createRemoteReactComponent('TableBody');
 const TableHeader = createRemoteReactComponent('TableHeader');
 const TableHead = createRemoteReactComponent('TableHead');
 const Link = createRemoteReactComponent('Link');
-export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, Textarea, LoadingSpinner, Link, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, };
+const NumberInput = createRemoteReactComponent('NumberInput');
+const Box = createRemoteReactComponent('Box');
+export { Alert, Box, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, Textarea, LoadingSpinner, Link, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, ToggleGroup, NumberInput, };

package/dist/crm/components.d.ts

@@ -1,4 +1,9 @@
-import { CrmAssociationTableProps, CrmPropertyListProps } from '../types';
+import { CrmAssociationPivotProps, CrmAssociationTableProps, CrmDataHighlightProps, CrmObjectPropertyProps, CrmPropertyListProps, CrmReportProps, CrmAssociationPropertyListProps } from '../types';
+declare const CrmObjectProperty: "CrmObjectProperty" & {
+    readonly type?: "CrmObjectProperty" | undefined;
+    readonly props?: CrmObjectPropertyProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmObjectProperty", CrmObjectPropertyProps, true>>;
 declare const CrmPropertyList: "CrmPropertyList" & {
     readonly type?: "CrmPropertyList" | undefined;
     readonly props?: CrmPropertyListProps | undefined;
@@ -9,4 +14,24 @@ declare const CrmAssociationTable: "CrmAssociationTable" & {
     readonly props?: CrmAssociationTableProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmAssociationTable", CrmAssociationTableProps, true>>;
-export { CrmPropertyList, CrmAssociationTable };
+declare const CrmDataHighlight: "CrmDataHighlight" & {
+    readonly type?: "CrmDataHighlight" | undefined;
+    readonly props?: CrmDataHighlightProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmDataHighlight", CrmDataHighlightProps, true>>;
+declare const CrmReport: "CrmReport" & {
+    readonly type?: "CrmReport" | undefined;
+    readonly props?: CrmReportProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmReport", CrmReportProps, true>>;
+declare const CrmAssociationPivot: "CrmAssociationPivot" & {
+    readonly type?: "CrmAssociationPivot" | undefined;
+    readonly props?: CrmAssociationPivotProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmAssociationPivot", CrmAssociationPivotProps, true>>;
+declare const CrmAssociationPropertyList: "CrmAssociationPropertyList" & {
+    readonly type?: "CrmAssociationPropertyList" | undefined;
+    readonly props?: CrmAssociationPropertyListProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmAssociationPropertyList", CrmAssociationPropertyListProps, true>>;
+export { CrmObjectProperty, CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, };

package/dist/crm/components.js

@@ -1,4 +1,9 @@
 import { createExtensionComponent } from '../utils/createExtensionComponent';
+const CrmObjectProperty = createExtensionComponent('CrmObjectProperty');
 const CrmPropertyList = createExtensionComponent('CrmPropertyList');
 const CrmAssociationTable = createExtensionComponent('CrmAssociationTable');
-export { CrmPropertyList, CrmAssociationTable };
+const CrmDataHighlight = createExtensionComponent('CrmDataHighlight');
+const CrmReport = createExtensionComponent('CrmReport');
+const CrmAssociationPivot = createExtensionComponent('CrmAssociationPivot');
+const CrmAssociationPropertyList = createExtensionComponent('CrmAssociationPropertyList');
+export { CrmObjectProperty, CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, };

package/dist/crm/index.d.ts

@@ -1,2 +1,2 @@
-import { CrmPropertyList, CrmAssociationTable } from './components';
-export { CrmPropertyList, CrmAssociationTable };
+import { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList } from './components';
+export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, };

package/dist/crm/index.js

@@ -1,2 +1,2 @@
-import { CrmPropertyList, CrmAssociationTable } from './components';
-export { CrmPropertyList, CrmAssociationTable };
+import { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, } from './components';
+export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, };

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/types.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode, ComponentType } from 'react';
 export interface AlertProps {
     title: string;
-    body?: string;
     children?: ReactNode;
     variant?: 'info' | 'warning' | 'success' | 'error' | 'danger';
 }
@@ -29,7 +28,7 @@ export interface DescriptionListProps {
     direction?: 'row' | 'column';
 }
 export interface DividerProps {
-    distance?: 'flush' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
+    distance?: AllDistances;
 }
 export interface EmptyStateProps {
     flush?: boolean;
@@ -51,8 +50,8 @@ export interface FormProps {
     preventDefault?: boolean;
 }
 export interface HeadingProps {
-    text: string;
-    format?: 'plaintext' | 'markdown';
+    children: ReactNode;
+    inline?: boolean;
 }
 export interface ImageProps {
     alt?: string;
@@ -60,22 +59,24 @@ export interface ImageProps {
     onClick?: () => void;
     src: string;
     width?: number;
+    height?: number;
 }
-export interface InputProps {
+export interface InputProps<T = string> {
     label: string;
     name: string;
-    value?: string;
+    value?: T;
     required?: boolean;
     readOnly?: boolean;
     description?: string;
     tooltip?: string;
     placeholder?: string;
     error?: boolean;
+    defaultValue?: T;
     validationMessage?: string;
-    onChange?: (value: string) => void;
-    onInput?: (value: string) => void;
-    onBlur?: (value: string) => void;
-    onFocus?: (value: string) => void;
+    onChange?: (value: T) => void;
+    onInput?: (value: T) => void;
+    onBlur?: (value: T) => void;
+    onFocus?: (value: T) => void;
 }
 export interface TextareaProps extends InputProps {
     cols?: number;
@@ -83,6 +84,12 @@ export interface TextareaProps extends InputProps {
     rows?: number;
     resize?: 'vertical' | 'horizontal' | 'both' | 'none';
 }
+export interface NumberInputProps extends InputProps<number> {
+    min?: number;
+    max?: number;
+    precision?: number;
+    formatStyle?: 'decimal' | 'percentage';
+}
 export interface ProgressBarProps {
     title?: string;
     showPercentage?: boolean;
@@ -109,7 +116,7 @@ export interface SelectProps {
     }[];
 }
 export interface TagProps {
-    text: string;
+    children: ReactNode;
     onClick?: () => void;
     variant?: 'default' | 'warning' | 'success' | 'error';
 }
@@ -133,6 +140,48 @@ interface Team {
     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[];
@@ -152,9 +201,12 @@ export interface Context {
     portal: PortalContext;
 }
 export interface StackProps {
-    distance?: 'flush' | 'small' | 'extra-small' | 'medium' | 'large';
+    distance?: AllDistances;
     children?: React.ReactNode;
     direction?: 'row' | 'column';
+    justify?: 'center' | 'end' | 'start';
+    align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+    width?: 'auto' | '100%';
 }
 export interface StatisticsTrendProps {
     value: string;
@@ -215,6 +267,8 @@ export interface ServerlessExecutionRequest {
         type: 'SERVERLESS_ACTION_HOOK';
         payload: JsonValue;
     };
+    objectId?: number;
+    objectTypeId?: string;
 }
 export interface ServerlessExecutionResponse {
     logId: string;
@@ -265,19 +319,40 @@ export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
     customComponents: {
         CrmPropertyList: ComponentType<CrmPropertyListProps>;
         CrmAssociationTable: ComponentType<CrmAssociationTableProps>;
+        CrmDataHighlight: ComponentType<CrmDataHighlightProps>;
+        CrmReport: ComponentType<CrmReportProps>;
+        CrmAssociationPivot: ComponentType<CrmAssociationPivotProps>;
+        CrmObjectProperty?: ComponentType<CrmObjectPropertyProps>;
+        CrmAssociationPropertyList?: ComponentType<CrmAssociationPropertyListProps>;
     };
 }
+export interface CrmDataHighlightProps {
+    properties: Array<string>;
+    objectTypeId?: string;
+    objectId?: number;
+}
+export interface CrmReportProps {
+    reportId: string;
+}
 export interface CrmPropertyListProps {
-    properties: string[];
+    properties: Array<string>;
     direction?: string;
+    objectTypeId?: string;
+    objectId?: number;
+}
+export interface CrmObjectPropertyProps {
+    properties: Array<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';
+    operator: 'EQ' | 'NEQ' | 'LT' | 'LTE' | 'GT' | 'GTE' | 'BETWEEN' | 'IN' | 'NOT_IN' | 'HAS_PROPERTY' | 'NOT_HAS_PROPERTY';
     value?: string | number;
+    values?: string | number;
     highValue?: string | number;
     property: string;
 }
@@ -291,6 +366,20 @@ export interface CrmAssociationTableProps {
     preFilters?: Array<CrmSearchFilter>;
     sort?: Array<CrmSortDescriptor>;
 }
+export interface CrmAssociationPivotProps {
+    objectTypeId: string;
+    associationLabels?: Array<string>;
+    maxAssociations?: number;
+    preFilters?: Array<CrmSearchFilter>;
+    sort?: Array<CrmSortDescriptor>;
+}
+export interface CrmAssociationPropertyListProps {
+    objectTypeId: string;
+    properties: Array<string>;
+    associationLabels?: Array<string>;
+    filters?: Array<CrmSearchFilter>;
+    sort?: Array<CrmSortDescriptor>;
+}
 interface CrmSidebarExtensionPoint extends ExtensionPointContract {
     actions: {
         reloadPage: ReloadPageAction;
@@ -318,7 +407,6 @@ export interface ExtensionPointApi<ExtensionPointName extends keyof ExtensionPoi
     context: Context;
     runServerlessFunction: ServerlessFuncRunner;
     actions: ExtensionPoints[ExtensionPointName]['actions'];
-    customComponents: string[];
 }
 interface OpenIframeActionPayload {
     uri: string;
@@ -329,9 +417,8 @@ interface OpenIframeActionPayload {
 export interface LoadingSpinnerProps {
     label: string;
     showLabel?: boolean;
-    size?: 'xs' | 'sm' | 'md';
+    size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
     layout?: 'inline' | 'centered';
-    grow?: boolean;
 }
 export interface TableElementProps {
     children: React.ReactNode;
@@ -365,8 +452,23 @@ export interface LinkProps {
     children: ReactNode;
     href: string;
     variant?: 'primary' | 'destructive' | 'light' | 'dark';
+    onClick?: () => void;
 }
 export type JsonValue = string | number | boolean | null | JsonValue[] | {
     [key: string]: JsonValue;
 };
+export interface BoxProps {
+    children: ReactNode;
+    grow?: boolean;
+    alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch' | 'auto';
+}
+interface TShirtSizes {
+    xs: 'extra-small' | 'xs';
+    sm: 'small' | 'sm';
+    md: 'medium' | 'md';
+    lg: 'large' | 'lg';
+    xl: 'extra-large' | 'xl';
+}
+export type AllSizes = TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'] | TShirtSizes['xl'];
+export type AllDistances = 'flush' | AllSizes;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.0.1-prealpha.7",
+  "version": "0.1.0",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -48,5 +48,5 @@
   "devDependencies": {
     "typescript": "5.0.4"
   },
-  "gitHead": "b5968f431fe29ee9977e6aacdd9b9ab3aa08af0c"
+  "gitHead": "abac5960e6277af827714dcd4150ad7606e6a481"
 }