@hubspot/ui-extensions 0.12.3 → 0.12.4

package/dist/__tests__/crm/utils/fetchAssociations.spec.js

@@ -1,5 +1,6 @@
 import { vi } from 'vitest';
-import { calculatePaginationFlags, fetchAssociations, } from "../../../crm/utils/fetchAssociations.js";
+import { fetchAssociations } from "../../../crm/utils/fetchAssociations.js";
+import { calculatePaginationFlags } from "../../../utils/pagination.js";
 // Set up the mock before importing the module
 const mockFetchAssociations = vi.fn();
 const mockSelf = {

package/dist/crm/hooks/useAssociations.d.ts

@@ -1,24 +1,16 @@
+import { type PaginationResult } from '../../utils/pagination.ts';
 import type { AssociationResult, FetchAssociationsRequest } from '../utils/fetchAssociations.ts';
 import { type FetchCrmPropertiesOptions } from '../utils/fetchCrmProperties.ts';
 export interface UseAssociationsOptions {
     propertiesToFormat?: 'all' | string[];
     formattingOptions?: FetchCrmPropertiesOptions['formattingOptions'];
 }
-export interface UseAssociationsPagination {
-    hasNextPage: boolean;
-    hasPreviousPage: boolean;
-    currentPage: number;
-    pageSize: number;
-    nextPage: () => void;
-    previousPage: () => void;
-    reset: () => void;
-}
 export interface UseAssociationsResult {
     results: AssociationResult[];
     error: Error | null;
     isLoading: boolean;
     isRefetching: boolean;
-    pagination: UseAssociationsPagination;
+    pagination: PaginationResult;
     refetch: () => Promise<void>;
 }
 /**

package/dist/crm/hooks/useAssociations.js

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
 import { createMockAwareHook } from "../../internal/hook-utils.js";
-import { calculatePaginationFlags, DEFAULT_PAGE_SIZE, fetchAssociations, } from "../utils/fetchAssociations.js";
+import { calculatePaginationFlags, DEFAULT_PAGE_SIZE, } from "../../utils/pagination.js";
+import { fetchAssociations } from "../utils/fetchAssociations.js";
 function createInitialState(pageSize) {
     return {
         results: [],

package/dist/crm/utils/fetchAssociations.d.ts

@@ -1,12 +1,4 @@
 import type { FetchCrmPropertiesOptions } from './fetchCrmProperties.ts';
-export declare const DEFAULT_PAGE_SIZE = 10;
-/**
- * Calculate pagination flags based on current page and API hasMore flag
- */
-export declare function calculatePaginationFlags(currentPage: number, hasMore: boolean): {
-    hasNextPage: boolean;
-    hasPreviousPage: boolean;
-};
 export type AssociationResult = {
     toObjectId: number;
     associationTypes: {

package/dist/crm/utils/fetchAssociations.js

@@ -1,13 +1,3 @@
-export const DEFAULT_PAGE_SIZE = 10;
-/**
- * Calculate pagination flags based on current page and API hasMore flag
- */
-export function calculatePaginationFlags(currentPage, hasMore) {
-    return {
-        hasNextPage: hasMore,
-        hasPreviousPage: currentPage > 1,
-    };
-}
 function isAssociationsResponse(data) {
     if (data === null ||
         typeof data !== 'object' ||

package/dist/experimental/pages/components/index.d.ts

@@ -0,0 +1 @@
+export * from './page-routes.ts';

package/dist/experimental/pages/components/index.js

@@ -0,0 +1 @@
+export * from "./page-routes.js";

package/dist/experimental/pages/components/page-routes.d.ts

@@ -0,0 +1,83 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { EmptyProps } from '../../../shared/types/shared.ts';
+/**
+ * The props type for the layout component of [PageRoutes](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/app-page-components/page-routes#pageroutes).
+ */
+export interface PageRoutesLayoutProps {
+    /**
+     * The content to render inside the layout.
+     */
+    children: ReactNode;
+}
+interface BaseRouteProps {
+    /**
+     * The component to render when the route is matched.
+     */
+    component: ComponentType<EmptyProps>;
+    /**
+     * A unique identifier for the route.
+     */
+    id?: string;
+}
+/**
+ * The props type for [PageRoutes.IndexRoute](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/app-page-components/page-routes#pageroutes-indexroute).
+ */
+export type IndexRouteProps = BaseRouteProps;
+/**
+ * The props type for [PageRoutes.Route](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/app-page-components/page-routes#pageroutes-route).
+ */
+export interface RouteProps extends BaseRouteProps {
+    /**
+     * The path pattern of the route to match.
+     */
+    path: string;
+}
+/**
+ * The props type for [PageRoutes.AnyRoute](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/app-page-components/page-routes#pageroutes-anyroute).
+ */
+export type AnyRouteProps = BaseRouteProps;
+/**
+ * The component type for the layout component of [PageRoutes](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/app-page-components/page-routes#pageroutes).
+ */
+export type PageRoutesLayoutComponent = ComponentType<PageRoutesLayoutProps>;
+/**
+ * The props type for [PageRoutes](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/app-page-components/page-routes#pageroutes).
+ */
+export interface PageRoutesProps {
+    /**
+     * The path pattern of the route to include with all nested routes.
+     */
+    path?: string;
+    /**
+     * The component to render for the layout of the page routes.
+     */
+    layoutComponent?: PageRoutesLayoutComponent;
+    /**
+     * The nested route definitions.
+     */
+    children: ReactNode;
+}
+/**
+ * Used as a descriptor for a collection of page routes.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * const PageRouter = createPageRouter(<PageRoutes>
+ *   <PageRoutes.IndexRoute component={HomePage} />
+ *   <PageRoutes.Route path="/docs" component={DocsPage} />
+ *   <PageRoutes.AnyRoute component={NotFoundPage} />
+ * </PageRoutes>);
+ * ```
+ *
+ * See [PageRoutes](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/app-page-components/page-routes#pageroutes) for more information.
+ *
+ * @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates.
+ */
+export declare function PageRoutes(__props: PageRoutesProps): null;
+export declare namespace PageRoutes {
+    var IndexRoute: (__props: IndexRouteProps) => null;
+    var Route: (__props: RouteProps) => null;
+    var AnyRoute: (__props: AnyRouteProps) => null;
+}
+export {};

package/dist/experimental/pages/components/page-routes.js

@@ -0,0 +1,66 @@
+class PageRoutesRenderError extends Error {
+    constructor(componentName) {
+        super(`<${componentName}> should not be rendered directly. Use createPageRouter instead.`);
+    }
+}
+/**
+ * Used as a descriptor for a collection of page routes.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * const PageRouter = createPageRouter(<PageRoutes>
+ *   <PageRoutes.IndexRoute component={HomePage} />
+ *   <PageRoutes.Route path="/docs" component={DocsPage} />
+ *   <PageRoutes.AnyRoute component={NotFoundPage} />
+ * </PageRoutes>);
+ * ```
+ *
+ * See [PageRoutes](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/app-page-components/page-routes#pageroutes) for more information.
+ *
+ * @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates.
+ */
+export function PageRoutes(__props) {
+    throw new PageRoutesRenderError('PageRoutes');
+}
+/**
+ * Used as a descriptor for an index (i.e., "/") route.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * <PageRoutes.IndexRoute component={HomePage} />
+ * ```
+ *
+ * @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates.
+ */
+PageRoutes.IndexRoute = function IndexRoute(__props) {
+    throw new PageRoutesRenderError('PageRoutes.IndexRoute');
+};
+/**
+ * Used as a descriptor for a route with a path pattern.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * <PageRoutes.Route path="/docs" component={DocsPage} />
+ * ```
+ * @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates.
+ */
+PageRoutes.Route = function Route(__props) {
+    throw new PageRoutesRenderError('PageRoutes.Route');
+};
+/**
+ * Used as a descriptor for a route that matches any path.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * <PageRoutes.AnyRoute component={NotFoundPage} />
+ * ```
+ *
+ * @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates.
+ */
+PageRoutes.AnyRoute = function AnyRoute(__props) {
+    throw new PageRoutesRenderError('PageRoutes.AnyRoute');
+};

package/dist/experimental/pages/create-page-router.d.ts

@@ -0,0 +1,35 @@
+import { type ReactElement } from 'react';
+import type { ReactFragmentProps } from '../../shared/types/index.ts';
+import type { PageRoutesProps } from './components/page-routes.ts';
+import type { PageRouterComponent } from './types.ts';
+/**
+ * The function type for [createPageRouter](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/app-pages/reference#createpagerouter).
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * const PageRouter = createPageRouter(
+ *   <PageRoutes layoutComponent={AppLayout}>
+ *     <PageRoutes.IndexRoute component={HomePage} id="home" />
+ *     <PageRoutes.Route path="/docs" component={DocsPage} />
+ *     <PageRoutes path="/customers" layoutComponent={CustomersLayout}>
+ *       <PageRoutes.IndexRoute component={ListCustomersPage} />
+ *       <PageRoutes.Route path="/:customerId" component={ViewCustomerPage} />
+ *     </PageRoutes>
+ *     <PageRoutes.AnyRoute component={NotFoundPage} />
+ *   </PageRoutes>
+ * );
+ *
+ * function AppPages() {
+ *   return <PageRouter />;
+ * }
+ *
+ * hubspot.extend<"pages">(() => <AppPages />);
+ * ```
+ *
+ * @param routes The routes to render.
+ * @returns The page router component.
+ *
+ * @experimental This function is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates.
+ */
+export declare const createPageRouter: (reactPageRoutesElement: ReactElement<PageRoutesProps> | ReactElement<ReactFragmentProps>) => PageRouterComponent;

package/dist/experimental/pages/create-page-router.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { EmptyState, Text } from "../../shared/remoteComponents.js";
+import { AppPageRouteProvider } from "./internal/app-page-route-context.js";
+import { convertReactPageRoutesElement } from "./internal/convert-page-routes-react-elements.js";
+import { RouteNodeType, } from "./internal/page-router-internal-types.js";
+import { createTrieRouter } from "./internal/trie-router.js";
+import { useAppPageLocation } from "./internal/useAppPageLocation.js";
+/**
+ * Adds the routes to the trie router.
+ *
+ * @param trieRouter - The trie router to add the routes to.
+ * @param seenRouteIds - The set of route ids that have already been seen.
+ * @param routeNode - The node to add the routes to.
+ * @param parentPath - The path to the parent node.
+ * @param parentLayouts - The layouts to apply to the node.
+ */
+const addRoutes = (trieRouter, seenRouteIds, routeNode, parentPath, parentLayouts) => {
+    if (routeNode.type === RouteNodeType.Routes) {
+        const prefix = parentPath + (routeNode.path ?? '');
+        const layouts = routeNode.layoutComponent
+            ? [...parentLayouts, routeNode.layoutComponent]
+            : parentLayouts;
+        if (routeNode.children) {
+            for (const childRouteNode of routeNode.children) {
+                addRoutes(trieRouter, seenRouteIds, childRouteNode /* routeNode */, prefix /* parentPath */, layouts /* parentLayouts */);
+            }
+        }
+    }
+    else {
+        const fullPath = parentPath + routeNode.path;
+        if (routeNode.id !== undefined) {
+            if (seenRouteIds.has(routeNode.id)) {
+                throw new Error(`Duplicate route id: "${routeNode.id}"`);
+            }
+            seenRouteIds.add(routeNode.id);
+        }
+        trieRouter.addRoute(fullPath, {
+            component: routeNode.component,
+            layouts: parentLayouts,
+            id: routeNode.id,
+        });
+    }
+};
+/**
+ * The function type for [createPageRouter](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/app-pages/reference#createpagerouter).
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * const PageRouter = createPageRouter(
+ *   <PageRoutes layoutComponent={AppLayout}>
+ *     <PageRoutes.IndexRoute component={HomePage} id="home" />
+ *     <PageRoutes.Route path="/docs" component={DocsPage} />
+ *     <PageRoutes path="/customers" layoutComponent={CustomersLayout}>
+ *       <PageRoutes.IndexRoute component={ListCustomersPage} />
+ *       <PageRoutes.Route path="/:customerId" component={ViewCustomerPage} />
+ *     </PageRoutes>
+ *     <PageRoutes.AnyRoute component={NotFoundPage} />
+ *   </PageRoutes>
+ * );
+ *
+ * function AppPages() {
+ *   return <PageRouter />;
+ * }
+ *
+ * hubspot.extend<"pages">(() => <AppPages />);
+ * ```
+ *
+ * @param routes The routes to render.
+ * @returns The page router component.
+ *
+ * @experimental This function is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates.
+ */
+export const createPageRouter = (reactPageRoutesElement) => {
+    // Convert the React element to a route node and add them to a trie router.
+    const rootRouteNode = convertReactPageRoutesElement(reactPageRoutesElement);
+    const trieRouter = createTrieRouter();
+    const seenRouteIds = new Set();
+    addRoutes(trieRouter, seenRouteIds, rootRouteNode /* routeNode */, '' /* parentPath */, [] /* parentLayouts */);
+    // Now create the PageRouter component that uses the trie router to match the current app page location.
+    // The component will render the content of the matched route.
+    // The component will also provide the matched app page route to the content of the matched route.
+    const PageRouter = () => {
+        const appPageLocation = useAppPageLocation();
+        const { path: appPagePath, params: appPageParams } = appPageLocation;
+        const matchedRoute = useMemo(() => {
+            return trieRouter.matchPath(appPagePath);
+        }, [appPagePath]);
+        const matchedAppPageRoute = useMemo(() => {
+            return matchedRoute
+                ? {
+                    routeId: matchedRoute.data.id,
+                    path: appPagePath,
+                    params: {
+                        ...matchedRoute.params,
+                        ...appPageParams,
+                    },
+                }
+                : {
+                    path: appPagePath,
+                    params: appPageParams,
+                };
+        }, [matchedRoute, appPagePath, appPageParams]);
+        const routeData = matchedRoute?.data;
+        const content = useMemo(() => {
+            if (!routeData) {
+                // TODO: Localize the title and body text.
+                return (_jsx(EmptyState, { title: "Page not found", layout: "vertical", reverseOrder: true, children: _jsx(Text, { children: "This app page does not exist." }) }));
+            }
+            const Component = routeData.component;
+            let node = _jsx(Component, {});
+            // Wrap the route component with any ancestor layout components found in the route tree.
+            for (let i = routeData.layouts.length - 1; i >= 0; i--) {
+                const Layout = routeData.layouts[i];
+                node = _jsx(Layout, { children: node });
+            }
+            return node;
+        }, [routeData]);
+        return (_jsx(AppPageRouteProvider, { pageRoute: matchedAppPageRoute, children: content }));
+    };
+    return PageRouter;
+};

package/dist/experimental/pages/create-page-router.test.d.ts

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