@hubspot/ui-extensions 0.8.37 → 0.8.39

package/dist/coreComponents.d.ts

@@ -7,6 +7,14 @@ export declare const Alert: "Alert" & {
     readonly props?: types.AlertProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Alert", types.AlertProps, true>>;
+/**
+ * The `Button` component renders a single button. Use this component to enable users to perform actions, such as submitting a form, sending data to an external system, or deleting data.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/beta-docs/reference/ui-components/standard-components/button Docs}
+ * - {@link https://developers.hubspot.com/beta-docs/reference/ui-components/standard-components/button#usage-examples Examples}
+ */
 export declare const Button: "Button" & {
     readonly type?: "Button" | undefined;
     readonly props?: types.ButtonProps | undefined;

package/dist/coreComponents.js

@@ -3,6 +3,14 @@ import { createRemoteReactComponent } from '@remote-ui/react';
  * @link https://developers.hubspot.com/beta-docs/reference/ui-components/standard-components/alert
  */
 export const Alert = createRemoteReactComponent('Alert');
+/**
+ * The `Button` component renders a single button. Use this component to enable users to perform actions, such as submitting a form, sending data to an external system, or deleting data.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/beta-docs/reference/ui-components/standard-components/button Docs}
+ * - {@link https://developers.hubspot.com/beta-docs/reference/ui-components/standard-components/button#usage-examples Examples}
+ */
 export const Button = createRemoteReactComponent('Button', {
     fragmentProps: ['overlay'],
 });

package/dist/experimental/testing/index.d.ts

@@ -0,0 +1,14 @@
+import { type RootNode, type Node } from '@remote-ui/testing';
+import type { ReactNode } from 'react';
+type CoreComponentName = keyof typeof import('../../coreComponents');
+type CrmComponentName = keyof typeof import('../../crm');
+interface HubSpotRoot extends RootNode<unknown> {
+    findByName: (name: CoreComponentName | CrmComponentName) => ReturnType<Node<unknown>['find']>;
+}
+interface RenderReturn {
+    extension: HubSpotRoot;
+    flushAsync: () => Promise<void>;
+}
+/** @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 function render(ui: ReactNode): RenderReturn;
+export {};

package/dist/experimental/testing/index.js

@@ -0,0 +1,33 @@
+import { createRoot } from '@remote-ui/react';
+import { mount } from '@remote-ui/testing';
+/** @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 function render(ui) {
+    const mountedExtension = mount((coreRemoteRoot) => {
+        // create the react appliction to render remote react component
+        createRoot(coreRemoteRoot).render(ui);
+    });
+    function findByName(name) {
+        return mountedExtension.find(name);
+    }
+    // @ts-expect-error ts doesn't know the type of object that we are forwarding to
+    const extension = new Proxy({ findByName }, //target object
+    {
+        // traps and modifies calls to target object
+        get(target, key, receiver) {
+            // if target object has the key, invoke.
+            if (Reflect.ownKeys(target).includes(key)) {
+                return Reflect.get(target, key, receiver);
+            }
+            // if our target object doesn't have the key, pass to the extension
+            return Reflect.get(mountedExtension, key);
+        },
+    });
+    function flushAsync() {
+        // the promise with the setTimeout is what flushes the promise stack
+        return new Promise((resolve) => setTimeout(resolve, 0)).then(() => {
+            // the act call on the extension forces the UI to update
+            mountedExtension.act(() => null);
+        });
+    }
+    return { extension, flushAsync };
+}

package/dist/experimental/testing/jest/matchers/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Direct re-export of shopify matchers. This is a great way
+ * to enable internal testing but I don't think it's how we should ship to
+ * customers because error messages make reference to shopify internals.
+ */
+export * from '@remote-ui/testing/matchers';

package/dist/experimental/testing/jest/matchers/index.js

@@ -0,0 +1,6 @@
+/**
+ * Direct re-export of shopify matchers. This is a great way
+ * to enable internal testing but I don't think it's how we should ship to
+ * customers because error messages make reference to shopify internals.
+ */
+export * from '@remote-ui/testing/matchers';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.8.37",
+  "version": "0.8.39",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -22,11 +22,14 @@
   "exports": {
     ".": "./dist/index.js",
     "./crm": "./dist/crm/index.js",
-    "./experimental": "./dist/experimental/index.js"
+    "./experimental": "./dist/experimental/index.js",
+    "./experimental/testing": "./dist/experimental/testing/index.js",
+    "./experimental/testing/jest-matchers": "./dist/experimental/testing/jest/matchers/index.js"
   },
   "license": "MIT",
   "dependencies": {
     "@remote-ui/react": "^5.0.0",
+    "@remote-ui/testing": "^1.4.3",
     "react": "^18.2.0"
   },
   "engines": {
@@ -46,10 +49,16 @@
     },
     "typescript": {
       "optional": true
+    },
+    "jest": {
+      "optional": true
     }
   },
   "devDependencies": {
+    "@types/jest": "^29.5.13",
+    "jest": "^29.7.0",
+    "react-reconciler": "^0.29.0",
     "typescript": "5.0.4"
   },
-  "gitHead": "d1c0d81115c16b53ed5b9d2da2992be27181330f"
+  "gitHead": "3dbfe0afee58682d51c4a5eb7e0e40a6e3920631"
 }