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

package/README.md

@@ -13,6 +13,7 @@
 - [Heading](#heading)
 - [Image](#image)
 - [Input](#input)
+- [Link](#link)
 - [LoadingSpinner](#loadingspinner)
 - [ProgressBar](#progressbar)
 - [Select](#select)
@@ -29,6 +30,7 @@
     - [TableRow](#tablerow)
 - [Tag](#tag)
 - [Text](#text)
+- [Textarea](#textarea)
 - [Tile](#tile)
 
 ## Components
@@ -115,8 +117,8 @@ interface ButtonProps {
 | `onClick` | `() => void` `(optional)` | `N/A` | A function that will be invoked when the button is clicked.  It receives no arguments and it's return value is ignored|
 | `href` | `string(optional)`| `N/A` | A URL that will be opened when the button is clicked.  If the value is a URL external to HubSpot it will be opened in a new tab. |
 | `disabled` | `boolean(optional)` | `N/A` | Determines if the button should be disabled or not.|
-| `variant` | ` 'primary' | 'secondary' | 'destructive'` `(optional)` |`'secondary'`| Sets the color variation of the button |
-| `type` | `'button' \| 'reset' \| 'submit'` `(optional)` | `'button'`| Sets the HTML attribute "role" of the button |
+| `variant` | `'primary' \| 'secondary' \| 'destructive'` `(optional)` | `'secondary'` | Sets the color variation of the button |
+| `type` | `'button' \| 'reset' \| 'submit'` `(optional)` | `'button'` | Sets the HTML attribute "role" of the button |
 
 ##### Usage
 ```javascript
@@ -332,14 +334,14 @@ import { Form } from '@hubspot/ui-extensions';
 ```typescript
 interface FormProps {
   children: ReactNode;
-  onSubmit?: () => void;
+  onSubmit?: (event: RemoteEvent<FormInputValues>) => void;
   preventDefault?: boolean;
 }
 ```
 | Prop | Type | Default | Description |
 | - | - | - | - |
 | `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. |
-| `onSubmit` | `function(optional)` | `N/A`| A function that will be called when the form is submitted. It will receive no arguments and it's return value will be ignored. |
+| `onSubmit` | `function(optional)` | `N/A`| A function that will be called when the form is submitted. It will receive a `RemoteEvent` as argument and it's return value will be ignored. |
 | `preventDefault` | `boolean(optional)` | `false`| If set to `true` `event.preventDefault()` will be invoked before your `onSubmit` function is called, preventing the default html form behavior. |
 
 ##### Usage
@@ -362,6 +364,95 @@ const Extension = () => {
 }
 ```
 
+### EmptyState
+
+##### Import
+```javascript
+import { EmptyState } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface EmptyStateProps {
+  children: ReactNode;
+  flush?: boolean;
+  imageWidth?: number;
+  layout?: 'horizontal' | 'vertical';
+  reverseOrder?: boolean;
+  title?: string;
+}
+```
+| Prop | Type | Default | Description |
+| - | - | - | - |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. |
+| `flush` | `boolean(optional)` | `false` | Removes the default vertical margins for the component. |
+| `imageWidth` | `number(optional)` | `250`| The max-width for the image container. |
+| `layout` | `'horizontal' \| 'vertical'` `(optional)` | `'horizontal'` | Sets the layout direction for the content. |
+| `reverseOrder` | `boolean(optional)` | `false` | Swaps the visual order of the text (primary) and image (secondary) content. This ensures the primary content is still presented first to assistive technology. |
+| `title` | `string(optional)` | `Intl("All is not lost.")` | The text for the title header rendered above the `children`. |
+
+##### Usage
+```javascript
+const Extension = ({ data }) => {
+  if (!data || !data.length) {
+    return (
+      <EmptyState title="Nothing here yet" layout="vertical" reverseOrder={true}>
+        <Text text="Go out there and get some leads!" />
+      </EmptyState>
+    )
+  }
+
+  return (
+    <Stack>
+      {data.map(...)}
+    </Stack>
+  );
+}
+```
+
+### ErrorState
+
+##### Import
+```javascript
+import { ErrorState } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface ErrorStateProps {
+  children: ReactNode;
+  title?: string;
+  type?: 'error' | 'support' | 'lock';
+}
+```
+| Prop | Type | Default | Description |
+| - | - | - | - |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. |
+| `title` | `string(optional)` | `Intl("All is not lost.")` | The text for the title header rendered above the `children`. |
+| `type` | `'error' \| 'support' \| 'lock'` `(optional)` | `'error'` | Sets the type of error image that will be shown. |
+
+##### Usage
+```javascript
+const Extension = ({ data, error, fetchData }) => {
+  if (error) {
+    return (
+      <ErrorState title="Trouble fetching properties." layout="vertical" reverseOrder={true}>
+        <Stack>
+          <Text text="Please try again in a few moments." />
+          <Button text="Try again" onClick={fetchData} />
+        </Stack>
+      </ErrorState>
+    )
+  }
+
+  return (
+    <Stack>
+      {data.map(...)}
+    </Stack>
+  );
+}
+```
+
 ### Heading
 
 ##### Import
@@ -467,14 +558,16 @@ interface InputProps {
   name: string;
   value?: string;
   required?: boolean;
-  readonly?: boolean;
+  readOnly?: boolean;
   description?: string;
   tooltip?: string;
   placeholder?: string;
   error?: boolean;
-  errorMessage?: string;
-  onChange: (value: string) => void;
-  onInput: (value: string) => void;
+  validationMessage?: string;
+  onChange?: (value: string) => void;
+  onInput?: (value: string) => void;
+  onBlur?: (value: string) => void;
+  onFocus?: (value: string) => void;
 }
 ```
 | Prop | Type | Default | Description |
@@ -483,14 +576,16 @@ interface InputProps {
 | `name` | `string` | `N/A`| The unique identifier for the input element, this could be thought of as the HTML5 [Input element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) |
 | `value` | `string(optional)` | `''`| The value of the input |
 | `required` | `boolean(optional)` | `false`| Determines if the required indicator should be displayed |
-| `readonly` | `boolean(optional)` | `false`| Determines if the field is editable or not. |
+| `readOnly` | `boolean(optional)` | `false`| Determines if the field is editable or not. |
 | `description` | `string(optional)` | `N/A`| Instructional message to display to the user to help understand the purpose of the input. |
 | `tooltip` | `string(optional)` | `N/A`| Text that will appear in a tooltip next to the input label. |
 | `placeholder` | `string(optional)` | `N/A`| Text that appears in the input when it has no value set. |
 | `error` | `boolean(optional)` | `false`| If set to true, `validationMessage` is displayed as an error message, if it was provided. The input will also render it's error state to let the user know there is an error.  If false, `validationMessage` is displayed as a success message. |
 | `validationMessage` | `string(optional)` | `''`| The text to show if the input has an error. |
-| `onChange` | `(value: string) => void` | `N/A`| A callback function that is invoked when the value is committed.  Currently these times are `onBlur` of the input and when the user stops typing.  |
-| `onInput` | `(value: string) => void` | `N/A`| A function that is called and passed the value every time the field is edited by the user.  It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation. |
+| `onChange` | `(value: string) => void(optional)` | `N/A`| A callback function that is invoked when the value is committed.  Currently these times are `onBlur` of the input and when the user submits the form.  |
+| `onInput` | `(value: string) => void(optional)` | `N/A`| A function that is called and passed the value every time the field is edited by the user.  It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation. |
+| `onBlur` | `(value: string) => void(optional)` | `N/A`| A function that is called and passed the value every time the field loses focus. |
+| `onFocus` | `(value: string) => void(optional)` | `N/A`| A function that is called and passed the value every time the field gets focused. |
 
 ##### Usage
 ```javascript
@@ -533,6 +628,33 @@ const Extension = () => {
 }
 ```
 
+### Link
+
+##### Import
+```javascript
+import { Link } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+export interface LinkProps {
+  href: string;
+  variant?: 'primary' | 'destructive' | 'light' | 'dark';
+  children: ReactNode;
+}
+```
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `href` | `string`| `N/A` | A URL that will be opened when the link is clicked.  If the value is a URL external to HubSpot it will be opened in a new tab. |
+| `variant` | `'primary' \| 'light' \| 'dark' \| 'destructive'` `(optional)` | `'primary'` | Sets the color variation of the link |
+| `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component. |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return <Link href="https://app.hubspot.com/">HubSpot</Link>
+}
+```
 ### LoadingSpinner
 
 ##### Import
@@ -619,7 +741,7 @@ interface SelectProps {
   name: string;
   value?: string | number | boolean;
   required?: boolean;
-  readonly?: boolean;
+  readOnly?: boolean;
   description?: string;
   tooltip?: string;
   placeholder?: string;
@@ -639,7 +761,7 @@ interface SelectProps {
 | `name` | `string` | `N/A`| The unique identifier for the select element. |
 | `value` | `string \| number \| boolean` | `''`| The value of the select input. |
 | `required` | `boolean` | `false`| Determines if the required indicator should be displayed |
-| `readonly` | `boolean` | `false`| Determines if the field is editable or not. |
+| `readOnly` | `boolean` | `false`| Determines if the field is editable or not. |
 | `description` | `string` | `N/A`| Instructional message to display to the user to help understand the purpose of the input. |
 | `tooltip` | `string` | `N/A`| Text that will appear in a tooltip next to the input label. |
 | `placeholder` | `string` | `N/A`| Text that appears in the input when it has no value set. |
@@ -698,13 +820,15 @@ import { Stack } from '@hubspot/ui-extensions';
 ##### Props
 ```typescript
 interface StackProps {
-  distance?: 'flush' | 'small';
+  distance?: 'flush' | 'small' | 'extra-small' | 'medium' | 'large';
+  direction?: 'row' | 'column';
   children?: ReactNode;
 }
 ```
 | Prop | Type | Default | Description |
 | - | - | - | - |
-| `distance` | `'flush' \| 'small'` | `'small'`| Amount of padding between each child component passed as children |
+| `distance` | `'flush' \| 'extra-small' \| 'small' \| 'medium' \| 'large'` | `'small'`| Amount of space between each child component passed as children |
+| `direction` | `'row' \| 'column'` | `'column'`| Stacks elements in the vertical or horizontal direction. |
 | `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. |
 
 ##### Usage
@@ -833,6 +957,14 @@ interface TableProps {
   children: ReactNode;
   flush?: boolean;
   bordered?: boolean;
+  paginated?: boolean;
+  // if paginated=true
+  pageCount: number;
+  onPageChange: (pageNumber: number) => void;
+  showButtonLabels?: boolean;
+  showFirstLastButtons?: boolean;
+  maxVisiblePageButtons?: number;
+  page?: number;
 }
 ```
 | Prop | Type | Default | Description |
@@ -840,6 +972,19 @@ interface TableProps {
 | `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. These children should be [TableHead](#tablehead), [TableFooter](#tablefooter), or [TableBody](#tablebody) |
 | `flush` | `boolean(optional)` | `false`| If true the table will not have bottom margin. |
 | `bordered` | `boolean(optional)` | `true`| If false the table will not haver borders around its content. |
+| `paginated` | `boolean(optional)` | `false`| If true, the table will display the paginator component and consumer will have to provide extra pagination props. |
+
+**Props for paginated=true**
+
+| Prop | Type | Default | Description |
+| - | - | - | - |
+| `pageCount` | `number` | `N/A`| The total number of pages available |
+| `onPageChange` | `onPageChange: (pageNumber: number) => void` |`N/A`| A function that will be invoked when the pagination button is clicked.  It receives the new page number as argument. |
+| `showButtonLabels` | `boolean(optional)` | `true` | if `false`, it hides the text labels for the First/Prev/Next/Last buttons. The button labels will still be accessible for screen readers. |
+| `showFirstLastButtons` | `boolean(optional)` | `false` | if `true`, it displays the First page and Last page buttons. |
+| `maxVisiblePageButtons` | `number(optional)` | `5` | Changes how many page buttons are shown. |
+| `page` | `number(optional)` | `N/A` | Denotes the current page. |
+
 
 ##### Usage
 ```javascript
@@ -861,6 +1006,64 @@ const Extension = () => {
     </Table>
   );
 }
+
+
+// Paginated example
+
+function generateData(count = 15) {
+  const result = [];
+
+  for (let index = 0; index < count; index++) {
+    result.push({
+      name: `Jane Doe ${index}`,
+      email: `janedoemail${index}@hubspot.com`,
+    });
+  }
+
+  return result;
+}
+
+function PaginatedTable() {
+  const ITEMS_PER_PAGE = 10;
+  const data = generateData(30);
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageCount = data.length / ITEMS_PER_PAGE;
+
+  const dataToDisplay = data.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE
+  );
+
+  return (
+    <Table
+      paginated={true}
+      pageCount={pageCount}
+      page={currentPage}
+      onPageChange={(nextPageNumber: number) => {
+        setCurrentPage(nextPageNumber);
+      }}
+    >
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Email</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {dataToDisplay.map(({ name, email }) => {
+          console.log(name, email);
+          return (
+            <TableRow key={email}>
+              <TableCell>{name}</TableCell>
+              <TableCell>{email}</TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
 ```
 ### TableBody
 
@@ -1160,13 +1363,17 @@ interface TextProps {
   format?: 'plaintext' | 'markdown';
   text: string;
   variant?: 'bodytext' | 'microcopy';
+  children: ReactNode;
+  tagName?: 'p' | 'span' | 'small';
 }
 ```
 | Prop | Type | Default | Description |
 | - | - | - | - |
 | `format` | `'plaintext' \| 'markdown'` `(optional)`| `'plaintext'`| Type of formatting for the display text. |
-| `text` | `string` | `N/A`| Text to be displayed as body text. If format is `"markdown"`, inline markdown elements (i.e. bold, italics, code, links) are supported |
+| `text` | `string` | `N/A`| Text to be displayed as body text iff format is `"markdown"`. Inline markdown elements (i.e. bold, italics, code, links) are supported |
+| `children` | `string` | `N/A`| Text to be displayed as body text iff format is `"plaintext"`. |
 | `variant` | `'bodytext' \| 'microcopy'` | `'bodytext`| Type of text to display |
+| `tagName` | `'p' \| 'small' \| 'span'` | `'bodytext`| Type of text element(tag) to display. |
 
 #### Markdown
 Markdown syntax supported in the component:
@@ -1190,6 +1397,96 @@ const Extension = () => {
 }
 ```
 
+### Textarea
+
+##### Import
+```javascript
+import { Textarea } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface TextareaProps {
+  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;
+  onBlur?: (value: string) => void;
+  onFocus?: (value: string) => void;
+  cols?: number;
+  maxLength?: number;
+  rows?: number;
+  resize?: 'vertical' | 'horizontal' | 'both' | 'none';
+}
+```
+| Prop | Type | Default | Description |
+| - | - | - | - |
+| `label` | `string` | `N/A`| The label text to display for the textarea element |
+| `name` | `string` | `N/A`| The unique identifier for the textarea element, this could be thought of as the HTML5 [Textarea element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#name) |
+| `value` | `string(optional)` | `''`| The value of the textarea |
+| `required` | `boolean(optional)` | `false`| Determines if the required indicator should be displayed |
+| `readOnly` | `boolean(optional)` | `false`| Determines if the field is editable or not. |
+| `description` | `string(optional)` | `N/A`| Instructional message to display to the user to help understand the purpose of the textarea. |
+| `tooltip` | `string(optional)` | `N/A`| Text that will appear in a tooltip next to the textarea label. |
+| `placeholder` | `string(optional)` | `N/A`| Text that appears in the textarea when it has no value set. |
+| `error` | `boolean(optional)` | `false`| If set to true, `validationMessage` is displayed as an error message, if it was provided. The textarea will also render it's error state to let the user know there is an error.  If false, `validationMessage` is displayed as a success message. |
+| `validationMessage` | `string(optional)` | `''`| The text to show if the textarea has an error. |
+| `onChange` | `(value: string) => void(optional)` | `N/A` | A callback function that is invoked when the value is committed.  Currently these times are `onBlur` of the textarea and when the user submits the form.  |
+| `onInput` | `(value: string) => void(optional)` | `N/A`| A function that is called and passed the value every time the field is edited by the user.  It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation. |
+| `onBlur` | `(value: string) => void(optional)` | `N/A`| A function that is called and passed the value every time the field loses focus. |
+| `onFocus` | `(value: string) => void(optional)` | `N/A`| A function that is called and passed the value every time the field gets focused. |
+| `cols` | `number(optional)` | `N/A` | The visible width of the text control, in average character widths. |
+| `rows` | `number(optional)` | `N/A` | The number of visible text lines for the control. |
+| `maxLength` | `number(optional)` | `N/A` | The maximum number of characters (UTF-16 code units) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters. |
+| `resize` | `'vertical' \| 'horizontal' \| 'both' \| 'none'` `(optional)`| `'vertical'` | Sets whether an element is resizable, and if so, in which directions. |
+
+##### Usage
+```javascript
+import { useState } from 'react';
+
+const Extension = () => {
+  const [ desciptiption, setDescription ] = useState('');
+  const [ validationMessage, setValidationMessage ] = useState('');
+  const [ isValid, setIsValid ] = useState(true);
+
+  return (
+    <Form>
+      <Textarea
+        label="Description"
+        name="description"
+        tooltip="Provide as much detail as possible"
+        description="Please include a link"
+        placeholder="My desription"
+        required={true}
+        error={!isValid}
+        validationMessage={validationMessage}
+        onChange={(value) => {
+          setDescription(value)
+        }}
+        onInput={(value) => {
+          if (!value.includes('http')) {
+            setValidationMessage('A link must be included.');
+            setIsValid(false);
+          } else {
+            setValidationMessage('Valid description!')
+            setIsValid(true);
+          }
+        }}
+      />
+    </Form>
+  );
+}
+```
+
+
 ### Tile
 
 ##### Import

package/dist/coreComponents.d.ts

@@ -1,4 +1,4 @@
-import type { AlertProps, ButtonProps, ButtonRowProps, CardProps, DescriptionListProps, DescriptionListItemProps, DividerProps, FormProps, HeadingProps, ImageProps, InputProps, LoadingSpinnerProps, ProgressBarProps, SelectProps, TagProps, TextProps, TileProps, StackProps, StatisticsProps, StatisticsItemProps, StatisticsTrendProps, TableProps, TableElementProps } 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, LinkProps } from './types';
 declare const Alert: "Alert" & {
     readonly type?: "Alert" | undefined;
     readonly props?: AlertProps | undefined;
@@ -34,6 +34,16 @@ declare const Divider: "Divider" & {
     readonly props?: DividerProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Divider", DividerProps, true>>;
+declare const EmptyState: "EmptyState" & {
+    readonly type?: "EmptyState" | undefined;
+    readonly props?: EmptyStateProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"EmptyState", EmptyStateProps, true>>;
+declare const ErrorState: "ErrorState" & {
+    readonly type?: "ErrorState" | undefined;
+    readonly props?: ErrorStateProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ErrorState", ErrorStateProps, true>>;
 declare const Form: "Form" & {
     readonly type?: "Form" | undefined;
     readonly props?: FormProps | undefined;
@@ -54,6 +64,11 @@ declare const Input: "Input" & {
     readonly props?: InputProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Input", InputProps, true>>;
+declare const Textarea: "Textarea" & {
+    readonly type?: "Textarea" | undefined;
+    readonly props?: TextareaProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Textarea", TextareaProps, true>>;
 declare const LoadingSpinner: "LoadingSpinner" & {
     readonly type?: "LoadingSpinner" | undefined;
     readonly props?: LoadingSpinnerProps | undefined;
@@ -139,4 +154,9 @@ declare const TableHead: "TableHead" & {
     readonly props?: TableElementProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableHead", TableElementProps, true>>;
-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, };
+declare const Link: "Link" & {
+    readonly type?: "Link" | undefined;
+    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, };

package/dist/coreComponents.js

@@ -6,10 +6,13 @@ const Card = createRemoteReactComponent('Card');
 const DescriptionList = createRemoteReactComponent('DescriptionList');
 const DescriptionListItem = createRemoteReactComponent('DescriptionListItem');
 const Divider = createRemoteReactComponent('Divider');
+const EmptyState = createRemoteReactComponent('EmptyState');
+const ErrorState = createRemoteReactComponent('ErrorState');
 const Form = createRemoteReactComponent('Form');
 const Heading = createRemoteReactComponent('Heading');
 const Image = createRemoteReactComponent('Image');
 const Input = createRemoteReactComponent('Input');
+const Textarea = createRemoteReactComponent('Textarea');
 const LoadingSpinner = createRemoteReactComponent('LoadingSpinner');
 const ProgressBar = createRemoteReactComponent('ProgressBar');
 const Select = createRemoteReactComponent('Select');
@@ -27,4 +30,5 @@ const TableRow = createRemoteReactComponent('TableRow');
 const TableBody = createRemoteReactComponent('TableBody');
 const TableHeader = createRemoteReactComponent('TableHeader');
 const TableHead = createRemoteReactComponent('TableHead');
-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, };
+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, };

package/dist/crm/components.d.ts

@@ -1,7 +1,12 @@
-import { CrmPropertyListProps } from '../types';
+import { CrmAssociationTableProps, CrmPropertyListProps } from '../types';
 declare const CrmPropertyList: "CrmPropertyList" & {
     readonly type?: "CrmPropertyList" | undefined;
     readonly props?: CrmPropertyListProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmPropertyList", CrmPropertyListProps, true>>;
-export { CrmPropertyList };
+declare const CrmAssociationTable: "CrmAssociationTable" & {
+    readonly type?: "CrmAssociationTable" | undefined;
+    readonly props?: CrmAssociationTableProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmAssociationTable", CrmAssociationTableProps, true>>;
+export { CrmPropertyList, CrmAssociationTable };

package/dist/crm/components.js

@@ -1,3 +1,4 @@
 import { createExtensionComponent } from '../utils/createExtensionComponent';
 const CrmPropertyList = createExtensionComponent('CrmPropertyList');
-export { CrmPropertyList };
+const CrmAssociationTable = createExtensionComponent('CrmAssociationTable');
+export { CrmPropertyList, CrmAssociationTable };

package/dist/crm/index.d.ts

@@ -1,2 +1,2 @@
-import { CrmPropertyList } from './components';
-export { CrmPropertyList };
+import { CrmPropertyList, CrmAssociationTable } from './components';
+export { CrmPropertyList, CrmAssociationTable };

package/dist/crm/index.js

@@ -1,2 +1,2 @@
-import { CrmPropertyList } from './components';
-export { CrmPropertyList };
+import { CrmPropertyList, CrmAssociationTable } from './components';
+export { CrmPropertyList, CrmAssociationTable };

package/dist/index.d.ts

@@ -1,3 +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 { 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 { hubspot } from './hubspot';
 export * from './types';

package/dist/index.js

@@ -1,3 +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 { 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 { hubspot } from './hubspot';
 export * from './types';

package/dist/types.d.ts

@@ -6,12 +6,12 @@ export interface AlertProps {
     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';
+    children: ReactNode;
 }
 export interface ButtonRowProps {
     children: ReactNode;
@@ -31,9 +31,23 @@ export interface DescriptionListProps {
 export interface DividerProps {
     distance?: 'flush' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
 }
+export interface EmptyStateProps {
+    flush?: boolean;
+    children: ReactNode;
+    title?: string;
+    layout?: 'horizontal' | 'vertical';
+    reverseOrder?: boolean;
+    imageWidth?: number;
+}
+export interface ErrorStateProps {
+    children: ReactNode;
+    title?: string;
+    type?: 'error' | 'support' | 'lock';
+}
+export type FormInputValues = Record<string, string | number>;
 export interface FormProps {
     children: ReactNode;
-    onSubmit?: () => void;
+    onSubmit?: (event: RemoteEvent<FormInputValues>) => void;
     preventDefault?: boolean;
 }
 export interface HeadingProps {
@@ -52,14 +66,22 @@ export interface InputProps {
     name: string;
     value?: string;
     required?: boolean;
-    readonly?: boolean;
+    readOnly?: boolean;
     description?: string;
     tooltip?: string;
     placeholder?: string;
     error?: boolean;
     validationMessage?: string;
-    onChange: (value: string) => void;
-    onInput: (value: string) => void;
+    onChange?: (value: string) => void;
+    onInput?: (value: string) => void;
+    onBlur?: (value: string) => void;
+    onFocus?: (value: string) => void;
+}
+export interface TextareaProps extends InputProps {
+    cols?: number;
+    maxLength?: number;
+    rows?: number;
+    resize?: 'vertical' | 'horizontal' | 'both' | 'none';
 }
 export interface ProgressBarProps {
     title?: string;
@@ -72,9 +94,9 @@ export interface ProgressBarProps {
 export interface SelectProps {
     label: string;
     name: string;
-    value?: string | number | boolean;
+    value?: string | number;
     required?: boolean;
-    readonly?: boolean;
+    readOnly?: boolean;
     description?: string;
     tooltip?: string;
     placeholder?: string;
@@ -83,7 +105,7 @@ export interface SelectProps {
     onChange?: (value: SelectProps['value']) => void;
     options: {
         label: string;
-        value: string | number | boolean;
+        value: string | number;
     }[];
 }
 export interface TagProps {
@@ -91,11 +113,17 @@ export interface TagProps {
     onClick?: () => void;
     variant?: 'default' | 'warning' | 'success' | 'error';
 }
-export interface TextProps {
-    format?: 'plaintext' | 'markdown';
-    text: string;
-    variant?: 'bodytext' | 'microcopy';
+export interface TextFormatOptions {
+    fontWeight?: 'regular' | 'bold' | 'demibold';
+    italic?: boolean;
+    lineDecoration?: 'none' | 'underline' | 'strikethrough';
 }
+export type TextProps = {
+    variant?: 'bodytext' | 'microcopy';
+    inline?: boolean;
+    children: ReactNode;
+    format?: TextFormatOptions;
+};
 export interface TileProps {
     children: ReactNode;
     flush?: boolean;
@@ -123,10 +151,10 @@ export interface Context {
     user: UserContext;
     portal: PortalContext;
 }
-type distanceOptions = 'flush' | 'small';
 export interface StackProps {
-    distance?: distanceOptions;
+    distance?: 'flush' | 'small' | 'extra-small' | 'medium' | 'large';
     children?: React.ReactNode;
+    direction?: 'row' | 'column';
 }
 export interface StatisticsTrendProps {
     value: string;
@@ -141,26 +169,56 @@ export interface StatisticsItemProps {
 export interface StatisticsProps {
     children: ReactNode;
 }
-export interface CrmPropertyListProps {
-    properties: string[];
-    direction?: string;
-}
 export interface ServerlessRunnerParams {
+    /**
+     * Name of the serverless function
+     */
     name: string;
-    payload: Record<string, unknown>;
-    onError?: () => void;
+    /**
+     * Names of CRM object properties to be retrieved and supplied to the function as `context.propertiesToSend`
+     */
+    propertiesToSend?: string[];
+    /**
+     * Additional parameters to be supplied to the function as `context.parameters`
+     */
+    parameters?: JsonValue;
+    /**
+     * @deprecated Optional payload supplied to the function as `context.event.payload`.
+     * Support for this param may be removed in the future. Use `parameters` instead.
+     */
+    payload?: JsonValue;
+}
+export declare enum ServerlessExecutionStatus {
+    Success = "SUCCESS",
+    Error = "ERROR"
+}
+export type ServerlessExecutionResult = {
+    status: ServerlessExecutionStatus.Success;
+    response: JsonValue;
+} | {
+    status: ServerlessExecutionStatus.Error;
+    message: string;
+};
+export type ServerlessFuncRunner = (params: ServerlessRunnerParams) => Promise<ServerlessExecutionResult>;
+export interface ServerlessExecutionRequest {
+    appId: number;
+    extensibleCardId: number;
+    serverlessFunction: string;
+    location: keyof ExtensionPoints;
+    objectQuery?: {
+        objectId: number;
+        objectTypeId: string;
+        objectPropertyNames: string[];
+    };
+    parameters?: JsonValue;
+    event?: {
+        type: 'SERVERLESS_ACTION_HOOK';
+        payload: JsonValue;
+    };
 }
-export type ServerlessFuncRunner = (params: ServerlessRunnerParams) => Promise<any>;
-export interface ServerlessSuccessResponse {
+export interface ServerlessExecutionResponse {
     logId: string;
-    response: {
-        message?: {
-            type: 'SUCCESS' | 'ERROR';
-            body: string;
-        } | string;
-        context?: Record<string, unknown>;
-        section?: Record<string, unknown>;
-    };
+    response?: JsonValue;
 }
 export interface ServerlessErrorResponse {
     responseJSON?: {
@@ -195,10 +253,7 @@ export type AddAlertAction = (args: {
     message: string;
 }) => void;
 export type ReloadPageAction = () => void;
-export type FetchCrmObjectPropertiesAction = (properties: string[]) => Promise<{
-    name: string;
-    value: string;
-}[]>;
+export type FetchCrmObjectPropertiesAction = (properties: string[]) => Promise<Record<string, string>>;
 export type OpenIframeModalAction = (action: OpenIframeActionPayload) => void;
 export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
     actions: {
@@ -208,9 +263,34 @@ export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
         openIframeModal: OpenIframeModalAction;
     };
     customComponents: {
-        CrmPropertyList?: ComponentType<CrmPropertyListProps>;
+        CrmPropertyList: ComponentType<CrmPropertyListProps>;
+        CrmAssociationTable: ComponentType<CrmAssociationTableProps>;
     };
 }
+export interface CrmPropertyListProps {
+    properties: string[];
+    direction?: string;
+}
+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';
+    value?: string | number;
+    highValue?: string | number;
+    property: string;
+}
+export interface CrmAssociationTableProps {
+    objectTypeId: string;
+    propertyColumns: Array<string>;
+    quickFilterProperties?: Array<string>;
+    searchable?: boolean;
+    pagination?: boolean;
+    pageSize?: number;
+    preFilters?: Array<CrmSearchFilter>;
+    sort?: Array<CrmSortDescriptor>;
+}
 interface CrmSidebarExtensionPoint extends ExtensionPointContract {
     actions: {
         reloadPage: ReloadPageAction;
@@ -256,8 +336,37 @@ export interface LoadingSpinnerProps {
 export interface TableElementProps {
     children: React.ReactNode;
 }
-export interface TableProps extends TableElementProps {
-    flush?: boolean;
+interface BaseTableProps {
     bordered?: boolean;
+    flush?: boolean;
+    children: React.ReactNode;
+}
+export interface TableNoPaginatedProps extends BaseTableProps {
+    paginated?: false;
+}
+export interface TablePaginatedProps extends BaseTableProps {
+    paginated: true;
+    pageCount: number;
+    onPageChange: (pageNumber: number) => void;
+    showButtonLabels?: boolean;
+    showFirstLastButtons?: boolean;
+    maxVisiblePageButtons?: number;
+    page?: number;
+}
+export type TableProps = TableNoPaginatedProps | TablePaginatedProps;
+export declare class RemoteEvent<V> {
+    type: string;
+    bubbles: boolean;
+    timeStamp: number;
+    targetValue: V;
+    constructor(value: V, event: Event);
+}
+export interface LinkProps {
+    children: ReactNode;
+    href: string;
+    variant?: 'primary' | 'destructive' | 'light' | 'dark';
 }
+export type JsonValue = string | number | boolean | null | JsonValue[] | {
+    [key: string]: JsonValue;
+};
 export {};

package/dist/types.js

@@ -1 +1,17 @@
-export {};
+export var ServerlessExecutionStatus;
+(function (ServerlessExecutionStatus) {
+    ServerlessExecutionStatus["Success"] = "SUCCESS";
+    ServerlessExecutionStatus["Error"] = "ERROR";
+})(ServerlessExecutionStatus || (ServerlessExecutionStatus = {}));
+export class RemoteEvent {
+    type;
+    bubbles;
+    timeStamp;
+    targetValue;
+    constructor(value, event) {
+        this.bubbles = event.bubbles;
+        this.type = event.type;
+        this.timeStamp = event.timeStamp;
+        this.targetValue = value;
+    }
+}

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.0.1-prealpha.5",
+  "version": "0.0.1-prealpha.7",
   "description": "",
   "type": "module",
   "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"
+    "build": "npm run clean && tsc",
+    "watch": "npm run clean && tsc --watch",
+    "prepare": "npm run build"
   },
   "files": [
     "dist/**/*"
@@ -47,5 +48,5 @@
   "devDependencies": {
     "typescript": "5.0.4"
   },
-  "gitHead": "a4652eb58cbde813dbebc8b7127c36102b9b6ed6"
+  "gitHead": "b5968f431fe29ee9977e6aacdd9b9ab3aa08af0c"
 }