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

package/README.md

@@ -332,14 +332,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 +362,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
@@ -472,9 +561,11 @@ interface InputProps {
   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 |
@@ -489,8 +580,10 @@ interface InputProps {
 | `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
@@ -698,13 +791,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 +928,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 +943,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 +977,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 +1334,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:

package/dist/coreComponents.d.ts

@@ -0,0 +1,152 @@
+import type { AlertProps, ButtonProps, ButtonRowProps, CardProps, DescriptionListProps, DescriptionListItemProps, DividerProps, EmptyStateProps, ErrorStateProps, FormProps, HeadingProps, ImageProps, InputProps, LoadingSpinnerProps, ProgressBarProps, SelectProps, TagProps, TextProps, TileProps, StackProps, StatisticsProps, StatisticsItemProps, StatisticsTrendProps, TableProps, TableElementProps } from './types';
+declare const Alert: "Alert" & {
+    readonly type?: "Alert" | undefined;
+    readonly props?: AlertProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Alert", AlertProps, true>>;
+declare const Button: "Button" & {
+    readonly type?: "Button" | undefined;
+    readonly props?: ButtonProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Button", ButtonProps, true>>;
+declare const ButtonRow: "ButtonRow" & {
+    readonly type?: "ButtonRow" | undefined;
+    readonly props?: ButtonRowProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ButtonRow", ButtonRowProps, true>>;
+declare const Card: "Card" & {
+    readonly type?: "Card" | undefined;
+    readonly props?: CardProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Card", CardProps, true>>;
+declare const DescriptionList: "DescriptionList" & {
+    readonly type?: "DescriptionList" | undefined;
+    readonly props?: DescriptionListProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"DescriptionList", DescriptionListProps, true>>;
+declare const DescriptionListItem: "DescriptionListItem" & {
+    readonly type?: "DescriptionListItem" | undefined;
+    readonly props?: DescriptionListItemProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"DescriptionListItem", DescriptionListItemProps, true>>;
+declare const Divider: "Divider" & {
+    readonly type?: "Divider" | undefined;
+    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;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Form", FormProps, true>>;
+declare const Heading: "Heading" & {
+    readonly type?: "Heading" | undefined;
+    readonly props?: HeadingProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Heading", HeadingProps, true>>;
+declare const Image: "Image" & {
+    readonly type?: "Image" | undefined;
+    readonly props?: ImageProps | undefined;
+    readonly children?: true | undefined;
+} & 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 children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Input", InputProps, true>>;
+declare const LoadingSpinner: "LoadingSpinner" & {
+    readonly type?: "LoadingSpinner" | undefined;
+    readonly props?: LoadingSpinnerProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"LoadingSpinner", LoadingSpinnerProps, true>>;
+declare const ProgressBar: "ProgressBar" & {
+    readonly type?: "ProgressBar" | undefined;
+    readonly props?: ProgressBarProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ProgressBar", ProgressBarProps, true>>;
+declare const Select: "Select" & {
+    readonly type?: "Select" | undefined;
+    readonly props?: SelectProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Select", SelectProps, true>>;
+declare const Tag: "Tag" & {
+    readonly type?: "Tag" | undefined;
+    readonly props?: TagProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tag", TagProps, true>>;
+declare const Text: "Text" & {
+    readonly type?: "Text" | undefined;
+    readonly props?: TextProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Text", TextProps, true>>;
+declare const Tile: "Tile" & {
+    readonly type?: "Tile" | undefined;
+    readonly props?: TileProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tile", TileProps, true>>;
+declare const Stack: "Stack" & {
+    readonly type?: "Stack" | undefined;
+    readonly props?: StackProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Stack", StackProps, true>>;
+declare const StatisticsItem: "StatisticsItem" & {
+    readonly type?: "StatisticsItem" | undefined;
+    readonly props?: StatisticsItemProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StatisticsItem", StatisticsItemProps, true>>;
+declare const Statistics: "Statistics" & {
+    readonly type?: "Statistics" | undefined;
+    readonly props?: StatisticsProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Statistics", StatisticsProps, true>>;
+declare const StatisticsTrend: "StatisticsTrend" & {
+    readonly type?: "StatisticsTrend" | undefined;
+    readonly props?: StatisticsTrendProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StatisticsTrend", StatisticsTrendProps, true>>;
+declare const Table: "Table" & {
+    readonly type?: "Table" | undefined;
+    readonly props?: TableProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Table", TableProps, true>>;
+declare const TableFooter: "TableFooter" & {
+    readonly type?: "TableFooter" | undefined;
+    readonly props?: TableElementProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableFooter", TableElementProps, true>>;
+declare const TableCell: "TableCell" & {
+    readonly type?: "TableCell" | undefined;
+    readonly props?: TableElementProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableCell", TableElementProps, true>>;
+declare const TableRow: "TableRow" & {
+    readonly type?: "TableRow" | undefined;
+    readonly props?: TableElementProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableRow", TableElementProps, true>>;
+declare const TableBody: "TableBody" & {
+    readonly type?: "TableBody" | undefined;
+    readonly props?: TableElementProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableBody", TableElementProps, true>>;
+declare const TableHeader: "TableHeader" & {
+    readonly type?: "TableHeader" | undefined;
+    readonly props?: TableElementProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableHeader", TableElementProps, true>>;
+declare const TableHead: "TableHead" & {
+    readonly type?: "TableHead" | undefined;
+    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, EmptyState, ErrorState, Form, Heading, Image, Input, LoadingSpinner, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, };

package/dist/coreComponents.js

@@ -0,0 +1,32 @@
+import { createRemoteReactComponent } from '@remote-ui/react';
+const Alert = createRemoteReactComponent('Alert');
+const Button = createRemoteReactComponent('Button');
+const ButtonRow = createRemoteReactComponent('ButtonRow');
+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 LoadingSpinner = createRemoteReactComponent('LoadingSpinner');
+const ProgressBar = createRemoteReactComponent('ProgressBar');
+const Select = createRemoteReactComponent('Select');
+const Tag = createRemoteReactComponent('Tag');
+const Text = createRemoteReactComponent('Text');
+const Tile = createRemoteReactComponent('Tile');
+const Stack = createRemoteReactComponent('Stack');
+const StatisticsItem = createRemoteReactComponent('StatisticsItem');
+const Statistics = createRemoteReactComponent('Statistics');
+const StatisticsTrend = createRemoteReactComponent('StatisticsTrend');
+const Table = createRemoteReactComponent('Table');
+const TableFooter = createRemoteReactComponent('TableFooter');
+const TableCell = createRemoteReactComponent('TableCell');
+const TableRow = createRemoteReactComponent('TableRow');
+const TableBody = createRemoteReactComponent('TableBody');
+const TableHeader = createRemoteReactComponent('TableHeader');
+const TableHead = createRemoteReactComponent('TableHead');
+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, Tile, };

package/dist/crm/components.d.ts

@@ -0,0 +1,12 @@
+import { CrmAssociationsTableProps, 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>>;
+declare const CrmAssociationsTable: "CrmAssociationsTable" & {
+    readonly type?: "CrmAssociationsTable" | undefined;
+    readonly props?: CrmAssociationsTableProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmAssociationsTable", CrmAssociationsTableProps, true>>;
+export { CrmPropertyList, CrmAssociationsTable };

package/dist/crm/components.js

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

package/dist/crm/index.d.ts

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

package/dist/crm/index.js

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

package/dist/hubspot.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import type { ExtensionPoints, ExtensionPointApi } from './types';
+export declare const hubspot: {
+    extend: typeof render;
+};
+declare function render<ExtensionPointName extends keyof ExtensionPoints>(renderCallback: (api: ExtensionPointApi<ExtensionPointName>) => ReactElement<any>): any;
+export {};

package/dist/hubspot.js

@@ -0,0 +1,17 @@
+/* eslint-disable hubspot-dev/no-confusing-browser-globals */
+import { createRoot } from '@remote-ui/react';
+import { isValidElement } from 'react';
+export const hubspot = {
+    extend: render,
+};
+const extend = (...args) => self.extend(...args);
+function render(renderCallback) {
+    return extend((root, api) => {
+        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/dist/index.d.ts

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

package/dist/index.js

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

package/dist/types.d.ts

@@ -0,0 +1,329 @@
+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 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?: (event: RemoteEvent<FormInputValues>) => 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;
+    validationMessage?: string;
+    onChange?: (value: string) => void;
+    onInput?: (value: string) => void;
+    onBlur?: (value: string) => void;
+    onFocus?: (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;
+    required?: boolean;
+    readonly?: boolean;
+    description?: string;
+    tooltip?: string;
+    placeholder?: string;
+    error?: boolean;
+    validationMessage?: string;
+    onChange?: (value: SelectProps['value']) => void;
+    options: {
+        label: string;
+        value: string | number;
+    }[];
+}
+export interface TagProps {
+    text: string;
+    onClick?: () => void;
+    variant?: 'default' | 'warning' | 'success' | 'error';
+}
+interface BaseTextProps {
+    variant?: 'bodytext' | 'microcopy';
+    tagName?: 'p' | 'span' | 'small';
+}
+export interface PlainTextProps extends BaseTextProps {
+    format?: 'plaintext';
+    children: ReactNode;
+}
+export interface MarkdownTextProps extends BaseTextProps {
+    format: 'markdown';
+    text: string;
+}
+export type TextProps = PlainTextProps | MarkdownTextProps;
+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;
+}
+export interface StackProps {
+    distance?: 'flush' | 'small' | 'extra-small' | 'medium' | 'large';
+    children?: React.ReactNode;
+    direction?: 'row' | 'column';
+}
+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;
+}[]>;
+export type OpenIframeModalAction = (action: OpenIframeActionPayload) => void;
+export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
+    actions: {
+        addAlert: AddAlertAction;
+        reloadPage: ReloadPageAction;
+        fetchCrmObjectProperties: FetchCrmObjectPropertiesAction;
+        openIframeModal: OpenIframeModalAction;
+    };
+    customComponents: {
+        CrmPropertyList?: ComponentType<CrmPropertyListProps>;
+        CrmAssociationsTable?: ComponentType<CrmAssociationsTableProps>;
+    };
+}
+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 CrmAssociationsTableProps {
+    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;
+    };
+}
+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;
+}
+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[];
+}
+export interface LoadingSpinnerProps {
+    label: string;
+    showLabel?: boolean;
+    size?: 'xs' | 'sm' | 'md';
+    layout?: 'inline' | 'centered';
+    grow?: boolean;
+}
+export interface TableElementProps {
+    children: React.ReactNode;
+}
+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 {};

package/dist/types.js

@@ -0,0 +1,12 @@
+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/dist/utils/createExtensionComponent.d.ts

@@ -0,0 +1,3 @@
+import type { RemoteComponentType } from '@remote-ui/core';
+import type { ReactComponentTypeFromRemoteComponentType } from '@remote-ui/react';
+export declare 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>>;

package/dist/utils/createExtensionComponent.js

@@ -0,0 +1,4 @@
+import { createRemoteReactComponent } from '@remote-ui/react';
+export function createExtensionComponent(componentType) {
+    return createRemoteReactComponent(componentType);
+}

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.0.1-prealpha.4",
+  "version": "0.0.1-prealpha.6",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "rm -rf dist/ && tsc",
-    "watch": "rm -rf dist/ && tsc --watch"
+    "clean": "rm -rf dist/",
+    "build": "npm run clean && tsc",
+    "watch": "npm run clean && tsc --watch",
+    "prepare": "npm run build"
   },
   "files": [
     "dist/**/*"
   ],
-  "prepare": "npm run build",
   "publishConfig": {
     "access": "public"
   },
@@ -47,5 +48,5 @@
   "devDependencies": {
     "typescript": "5.0.4"
   },
-  "gitHead": "d3ed42de0f9675a2f599416ba1886ba379ecfcd0"
+  "gitHead": "1dfa4048c08a39c6f50a5f87e92eddf1b19dde5c"
 }