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

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,8 +84,15 @@ 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;
+    'aria-label'?: string;
     showPercentage?: boolean;
     value?: number;
     valueMax?: number;
@@ -109,7 +117,7 @@ export interface SelectProps {
     }[];
 }
 export interface TagProps {
-    text: string;
+    children: ReactNode;
     onClick?: () => void;
     variant?: 'default' | 'warning' | 'success' | 'error';
 }
@@ -133,6 +141,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 +202,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 +268,8 @@ export interface ServerlessExecutionRequest {
         type: 'SERVERLESS_ACTION_HOOK';
         payload: JsonValue;
     };
+    objectId?: number;
+    objectTypeId?: string;
 }
 export interface ServerlessExecutionResponse {
     logId: string;
@@ -265,19 +320,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 +367,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 +408,6 @@ export interface ExtensionPointApi<ExtensionPointName extends keyof ExtensionPoi
     context: Context;
     runServerlessFunction: ServerlessFuncRunner;
     actions: ExtensionPoints[ExtensionPointName]['actions'];
-    customComponents: string[];
 }
 interface OpenIframeActionPayload {
     uri: string;
@@ -329,9 +418,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 +453,41 @@ export interface LinkProps {
     children: ReactNode;
     href: string;
     variant?: 'primary' | 'destructive' | 'light' | 'dark';
+    onClick?: () => void;
+    preventDefault?: boolean;
 }
 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 interface StepIndicatorProps {
+    stepNames: string[];
+    direction?: 'horizontal' | 'vertical';
+    onClick?: (stepIndex: number) => void;
+    circleSize?: AllSizes;
+    currentStep?: number;
+    variant?: 'default' | 'compact' | 'flush';
+}
+export interface AccordionProps {
+    title: string;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    open?: boolean;
+    size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
+    onClick?: () => void;
+}
 export {};

package/package.json

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