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

package/README.md

@@ -1,6 +1,35 @@
 # ui-extensions-components
 
-## Overview
+## TOC
+
+- [Alert](#alert)
+- [Button](#button)
+- [ButtonRow](#buttonrow)
+- [Card](#card)
+- [DescriptionList](#descriptionlist)
+    - [DescriptionListItem](#descriptionlistitem)
+- [Divider](#divider)
+- [Form](#form)
+- [Heading](#heading)
+- [Image](#image)
+- [Input](#input)
+- [LoadingSpinner](#loadingspinner)
+- [ProgressBar](#progressbar)
+- [Select](#select)
+- [Stack](#stack)
+- [Statistics](#statistics)
+    - [StatisticsItem](#statisticsitem)
+    - [StatisticsTrend](#statisticstrend)
+- [Table](#table)
+    - [TableBody](#tablebody)
+    - [TableCell](#tablecell)
+    - [TableFooter](#tablefooter)
+    - [TableHead](#tablehead)
+    - [TableHeader](#tableheader)
+    - [TableRow](#tablerow)
+- [Tag](#tag)
+- [Text](#text)
+- [Tile](#tile)
 
 ## Components
 
@@ -458,8 +487,8 @@ interface InputProps {
 | `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, displays an `errorMessage` if provided and renders the error state for the input. |
-| `errorMessage` | `string(optional)` | `''`| The text to show if the input has an error. |
+| `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. |
 
@@ -469,7 +498,8 @@ import { useState } from 'react';
 
 const Extension = () => {
   const [ name, setName ] = useState('');
-  const [ errorMessage, setErrorMessage ] = useState('');
+  const [ validationMessage, setValidationMessage ] = useState('');
+  const [ isValid, setIsValid ] = useState(true);
 
   return (
     <Form>
@@ -480,18 +510,21 @@ const Extension = () => {
         description="Please enter your first name"
         placeholder="First name"
         required={true}
-        error={errorMessage !== ''}
-        errorMessage={errorMessage}
+        error={!isValid}
+        validationMessage={validationMessage}
         onChange={(value) => {
           setName(value)
         }}
         onInput={(value) => {
           if(value !== 'Bill') {
-            setErrorMessage('This form only works for people named Bill');
+            setValidationMessage('This form only works for people named Bill');
+            setIsValid(false);
           } else if (value === '') {
-            setErrorMessage('First name is required')
+            setValidationMessage('First name is required')
+            setIsValid(false);
           } else {
-            setErrorMessage('')
+            setValidationMessage('Valid first name!')
+            setIsValid(true);
           }
         }}
       />
@@ -500,6 +533,37 @@ const Extension = () => {
 }
 ```
 
+### LoadingSpinner
+
+##### Import
+```javascript
+import { LoadingSpinner } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+export interface LoadingSpinnerProps {
+  label: string;
+  showLabel?: boolean;
+  size?: 'xs' | 'sm' | 'md';
+  layout?: 'inline' | 'centered';
+  grow?: boolean;
+}
+```
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` | `string` | `N/A`| The companion text for the loading spinner. |
+| `showLabel` | `boolean(optional)` | `false` | if `true`, the label will be visible alongside the loading spinner. |
+| `size` | `'xs'\| 'sm' \| 'md'` `(optional)`| `'sm'` | The size of the loading spinner icon. |
+| `layout` | `'inline'\| 'centered'` `(optional)`| `N/A` | Use the `centered` option for layout as a convenience for the common pattern of filling the space of its parent. |
+| `grow` | `boolean(optional)` | `false` | if `true`, sets the height and width of the loading spinner to 100%.|
+
+##### Usage
+```javascript
+const Extension = () => {
+  return <LoadingSpinner label="Loading..." />;
+}
+```
 ### ProgressBar
 
 ##### Import
@@ -579,8 +643,8 @@ interface SelectProps {
 | `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. |
-| `error` | `boolean` | `false`| If set to true, displays an `errorMessage` if provided and renders the error state for the input. |
-| `errorMessage` | `string` | `''`| The text to show if the input has an error. |
+| `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`| Function that is called with the new value when it is updated. |
 | `options` | `Array<{label: string; value: string \| number \| boolean}>` | `N/A`| Array of options to be displayed in the select. `label` will be used as the display text in the dropdown list and `value` should be a **unique** identifier. `value` is the data that will be submitted with the form. |
 
@@ -588,7 +652,8 @@ interface SelectProps {
 ```javascript
 const Extension = () => {
   const [ name, setName ] = useState(null);
-  const [ errorMessage, setErrorMessage ] = useState('');
+  const [ validationMessage, setValidationMessage ] = useState('');
+  const [ isValid, setIsValid ] = useState(true);
 
   const options = [
     {label: 'Bill', value: 42},
@@ -597,21 +662,23 @@ const Extension = () => {
 
   return (
     <Form>
-      <Input
+      <Select
         label="Best Bill & Ted Character?"
         name="best-char"
         tooltip="Please choose"
         description="Please choose"
         placeholder="Bill or Ted?"
         required={true}
-        error={errorMessage !== ''}
-        errorMessage={errorMessage}
+        error={!isValid}
+        validationMessage={validationMessage}
         onChange={(value) => {
           setName(value)
           if(!value) {
-            setErrorMessage('This is required');
+            setValidationMessage('This is required');
+            setIsValid(false);
           } else {
-            setErrorMessage('');
+            setValidationMessage('Excellent!');
+            setIsValid(true);
           }
         }}
         options={options}
@@ -753,6 +820,297 @@ const Extension = () => {
 ```
 
 
+### Table
+
+##### Import
+```javascript
+import { Table } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface TableProps {
+  children: ReactNode;
+  flush?: boolean;
+  bordered?: 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. 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. |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+### TableBody
+
+##### Import
+```javascript
+import { TableBody } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface TableBodyProps {
+  children: ReactNode;
+}
+```
+| 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. These children should be [TableRow](#tablerow). |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+### TableCell
+
+##### Import
+```javascript
+import { TableCell } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface TableCellProps {
+  children: ReactNode;
+}
+```
+| 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.|
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+### TableFooter
+
+##### Import
+```javascript
+import { TableFooter } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface TableFooterProps {
+  children: ReactNode;
+}
+```
+| 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. These children should be [TableRow](#tablerow). |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Series</TableHeader>
+          <TableHeader>Years on air</TableHeader>
+          <TableHeader>Emmys</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableFooter>
+        <TableRow>
+          <TableHeader>Totals</TableHeader>
+          <TableHeader>43</TableHeader>
+          <TableHeader>50</TableHeader>
+        </TableRow>
+      </TableFooter>
+      <TableBody>
+        <TableRow>
+          <TableCell>The Simpsons</TableCell>
+          <TableCell>28</TableCell>
+          <TableCell>31</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>M*A*S*H</TableCell>
+          <TableCell>11</TableCell>
+          <TableCell>14</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Arrested Development</TableCell>
+          <TableCell>4</TableCell>
+          <TableCell>5</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### TableHead
+
+##### Import
+```javascript
+import { TableHead } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface TableHeadProps {
+  children: ReactNode;
+}
+```
+| 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. These children should be [TableHeader](#tableheader). |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+### TableHeader
+
+##### Import
+```javascript
+import { TableHeader } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface TableHeaderProps {
+  children: ReactNode;
+}
+```
+| 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.|
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+### TableRow
+
+##### Import
+```javascript
+import { TableRow } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface TableRowProps {
+  children: ReactNode;
+}
+```
+| 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.|
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+
 ### Tag
 
 ##### Import

package/package.json

@@ -1,17 +1,51 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.0.1-prealpha.3",
+  "version": "0.0.1-prealpha.4",
   "description": "",
   "type": "module",
-  "main": "index.ts",
-  "scripts": {},
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rm -rf dist/ && tsc",
+    "watch": "rm -rf dist/ && tsc --watch"
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "prepare": "npm run build",
   "publishConfig": {
     "access": "public"
   },
+  "exports": {
+    ".": "./dist/index.js",
+    "./crm": "./dist/crm/index.js"
+  },
   "license": "MIT",
   "dependencies": {
     "@remote-ui/react": "^5.0.0",
     "react": "^18.2.0"
   },
-  "gitHead": "74dbffa7fe6e4ad7d5029897801c11dc5d5edae1"
+  "engines": {
+    "node": ">=16"
+  },
+  "peerDependencies": {
+    "@remote-ui/react": "^5.0.0",
+    "react": "^18.2.0",
+    "typescript": "^5.0.4"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "@remote-ui/react": {
+      "optional": false
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "typescript": "5.0.4"
+  },
+  "gitHead": "d3ed42de0f9675a2f599416ba1886ba379ecfcd0"
 }

package/CrmComponents/crmComponents.ts

@@ -1,11 +0,0 @@
-/* Hello! To create your first component, uncomment the code below and replace
-*  the entry with your props and component name
-* import { createExtensionComponent } from '../utils/createExtensionComponent';
-* import type { ExampleCrmComponentProps } from '../types';
-
-* const ExampleCrmComponent = createExtensionComponent<
-* 'ExampleCrmComponent',
-* ExampleCrmComponentProps
-* >('ExampleCrmComponent');
-*/
-export {};

package/CrmComponents/index.ts

@@ -1 +0,0 @@
-export {};

package/coreComponents.ts

@@ -1,94 +0,0 @@
-import { createRemoteReactComponent } from '@remote-ui/react';
-
-import type {
-  AlertProps,
-  ButtonProps,
-  ButtonRowProps,
-  CardProps,
-  DescriptionListProps,
-  DescriptionListItemProps,
-  FormProps,
-  HeadingProps,
-  ImageProps,
-  InputProps,
-  LoadingSpinnerProps,
-  ProgressBarProps,
-  SelectProps,
-  TagProps,
-  TextProps,
-  TileProps,
-  StackProps,
-  StatisticsProps,
-  StatisticsItemProps,
-  StatisticsTrendProps,
-} from './types';
-
-const Alert = createRemoteReactComponent<'Alert', AlertProps>('Alert');
-const Button = createRemoteReactComponent<'Button', ButtonProps>('Button');
-const ButtonRow = createRemoteReactComponent<'ButtonRow', ButtonRowProps>(
-  'ButtonRow'
-);
-const Card = createRemoteReactComponent<'Card', CardProps>('Card');
-const DescriptionList = createRemoteReactComponent<
-  'DescriptionList',
-  DescriptionListProps
->('DescriptionList');
-const DescriptionListItem = createRemoteReactComponent<
-  'DescriptionListItem',
-  DescriptionListItemProps
->('DescriptionListItem');
-const Divider = createRemoteReactComponent<'Divider', {}>('Divider');
-const Form = createRemoteReactComponent<'Form', FormProps>('Form');
-const Heading = createRemoteReactComponent<'Heading', HeadingProps>('Heading');
-const Image = createRemoteReactComponent<'Image', ImageProps>('Image');
-const Input = createRemoteReactComponent<'Input', InputProps>('Input');
-const LoadingSpinner = createRemoteReactComponent<
-  'LoadingSpinner',
-  LoadingSpinnerProps
->('LoadingSpinner');
-const ProgressBar = createRemoteReactComponent<'ProgressBar', ProgressBarProps>(
-  'ProgressBar'
-);
-const Select = createRemoteReactComponent<'Select', SelectProps>('Select');
-const Tag = createRemoteReactComponent<'Tag', TagProps>('Tag');
-const Text = createRemoteReactComponent<'Text', TextProps>('Text');
-const Tile = createRemoteReactComponent<'Tile', TileProps>('Tile');
-const Stack = createRemoteReactComponent<'Stack', StackProps>('Stack');
-
-const StatisticsItem = createRemoteReactComponent<
-  'StatisticsItem',
-  StatisticsItemProps
->('StatisticsItem');
-
-const Statistics = createRemoteReactComponent<'Statistics', StatisticsProps>(
-  'Statistics'
-);
-
-const StatisticsTrend = createRemoteReactComponent<
-  'StatisticsTrend',
-  StatisticsTrendProps
->('StatisticsTrend');
-
-export {
-  Alert,
-  Button,
-  ButtonRow,
-  Card,
-  DescriptionList,
-  DescriptionListItem,
-  Divider,
-  Form,
-  Heading,
-  Image,
-  Input,
-  LoadingSpinner,
-  ProgressBar,
-  Select,
-  Stack,
-  Statistics,
-  StatisticsItem,
-  StatisticsTrend,
-  Tag,
-  Text,
-  Tile,
-};

package/hubspot.ts

@@ -1,32 +0,0 @@
-/* eslint-disable hubspot-dev/no-confusing-browser-globals */
-
-import { createRoot, RemoteRoot } from '@remote-ui/react';
-import { ReactElement, isValidElement } from 'react';
-import { ExtensionPoints, ExtensionPointApi } from './types';
-
-export const hubspot = {
-  extend: render,
-};
-
-const extend = (...args) => (self as any).extend(...args);
-
-function render<ExtensionPointName extends keyof ExtensionPoints>(
-  renderCallback: (
-    api: ExtensionPointApi<ExtensionPointName>
-  ) => ReactElement<any>
-) {
-  return extend(
-    (root: RemoteRoot, api: ExtensionPointApi<ExtensionPointName>) => {
-      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/index.ts

@@ -1,25 +0,0 @@
-export {
-  Alert,
-  Button,
-  ButtonRow,
-  Card,
-  DescriptionList,
-  DescriptionListItem,
-  Divider,
-  Form,
-  Heading,
-  Image,
-  Input,
-  LoadingSpinner,
-  ProgressBar,
-  Select,
-  Stack,
-  Statistics,
-  StatisticsItem,
-  StatisticsTrend,
-  Tag,
-  Text,
-  Tile,
-} from './coreComponents';
-
-export { hubspot } from './hubspot';

package/types.ts

@@ -1,297 +0,0 @@
-// Do not manually update this file, changes will be overridden from ui-extensions-remote-renderer/static/js/types.ts
-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 FormProps {
-  children: ReactNode;
-  onSubmit?: () => 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;
-  errorMessage?: string;
-  onChange: (value: string) => void;
-  onInput: (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 | boolean;
-  required?: boolean;
-  readonly?: boolean;
-  description?: string;
-  tooltip?: string;
-  placeholder?: string;
-  error?: boolean;
-  errorMessage?: string;
-  onChange: (value: string) => void;
-  options: {
-    label: string;
-    value: string | number | boolean;
-  }[];
-}
-
-export interface TagProps {
-  text: string;
-  onClick?: () => void;
-  variant?: 'default' | 'warning' | 'success' | 'error';
-}
-
-export interface TextProps {
-  format?: 'plaintext' | 'markdown';
-  text: string;
-  variant?: 'bodytext' | 'microcopy';
-}
-
-export interface TileProps {
-  children: ReactNode;
-  flush?: boolean;
-}
-
-interface Team {
-  id: number;
-  name: string;
-  teammates: number[];
-}
-
-export interface UserContext {
-  id: number;
-  emails: string[];
-  email: string;
-  firstName: string;
-  lastName: string;
-  roles: string[];
-  teams: Team[];
-  locale?: string;
-}
-
-export interface PortalContext {
-  id: number;
-  timezone: string;
-}
-
-export interface Context {
-  user: UserContext;
-  portal: PortalContext;
-}
-
-type distanceOptions = 'flush' | 'small';
-
-export interface StackProps {
-  distance?: distanceOptions;
-  children?: React.ReactNode;
-}
-export interface StatisticsTrendProps {
-  value: string;
-  direction: 'increase' | 'decrease';
-}
-
-export interface StatisticsItemProps {
-  id?: string;
-  label: string;
-  number: string;
-  children: ReactNode;
-}
-
-export interface StatisticsProps {
-  children: ReactNode;
-}
-
-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 }[]>;
-
-interface CrmMiddleExtensionPoint extends ExtensionPointContract {
-  actions: {
-    addAlert: AddAlertAction;
-    reloadPage: ReloadPageAction;
-    fetchCrmObjectProperties: FetchCrmObjectPropertiesAction;
-    openIframeModal: (action: OpenIframeActionPayload) => void;
-  };
-}
-
-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;
-}
-
-//TODO(Randy): Delete once we have real custom components
-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;
-}

package/utils/createExtensionComponent.ts

@@ -1,20 +0,0 @@
-import type { RemoteComponentType } from '@remote-ui/core';
-import type { ReactComponentTypeFromRemoteComponentType } from '@remote-ui/react';
-import { createRemoteReactComponent } from '@remote-ui/react';
-
-export 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>
-  > {
-  return createRemoteReactComponent<ComponentType, Props, AllowedChildren>(
-    componentType
-  );
-}