Merge pull request #15 from HubSpot/UIE-public-beta-update

React getting started project

config.json

@@ -1,20 +1,28 @@
 {
-"components": [
-  { "path": "components/app-crm-card-middle", "label": "App (CRM card - middle panel)", "insertPath": "./"},
-  { "path": "components/app-crm-card-side", "label": "App (CRM card - side panel)", "insertPath": "./"}
-],
-"projects": [
-  {
-    "name": "no-template",
-    "label": "No template",
-    "path": "projects/no-template",
-    "insertPath": "./"
-  },
-  {
-    "name": "getting-started",
-    "label": "Getting started",
-    "path": "projects/getting-started-template",
-    "insertPath": "./"
-  }
-]
+  "components": [
+    {
+      "path": "components/app-crm-card-middle",
+      "label": "App (CRM card - middle panel)",
+      "insertPath": "./"
+    },
+    {
+      "path": "components/app-crm-card-side",
+      "label": "App (CRM card - side panel)",
+      "insertPath": "./"
+    }
+  ],
+  "projects": [
+    {
+      "name": "getting-started",
+      "label": "Use CRM getting started project",
+      "path": "projects/getting-started-template",
+      "insertPath": "./"
+    },
+    {
+      "name": "no-template",
+      "label": "No, start from scratch",
+      "path": "projects/no-template",
+      "insertPath": "./"
+    }
+  ]
 }

projects/getting-started-template/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 HubSpot
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

projects/getting-started-template/README.md

@@ -1,16 +1,17 @@
-# getting-started-project-template
+# HubSpot Getting Started Project Template
 
-This is the Getting Started project for HubSpot developer projects. This repo contains code that is intended to help developers to get up and running with developer projects quickly and easily.
+This is the Getting Started project for HubSpot developer projects. It contains a private app, a CRM card written in React, and a serverless function that the CRM card is able to interact with. This code is intended to help developers get up and running with developer projects quickly and easily.
 
 ## Requirements
+
 There are a few things that must be set up before you can make use of this getting started project.
+
 - You must have an active HubSpot account.
 - You must have the [HubSpot CLI](https://www.npmjs.com/package/@hubspot/cli) installed and set up.
 - You must have access to developer projects (developer projects are currently [in public beta under "CRM Development Tools"](https://app.hubspot.com/l/whats-new/betas)).
 
 ## Usage
-The HubSpot CLI is configured to pull from the latest release of this project. To get started, run the following CLI command in your terminal:
 
-`hs project create`
+The HubSpot CLI enables you to run this project locally so that you may test and iterate quickly. Getting started is simple, just run this HubSpot CLI command in your project directory and follow the prompts:
 
-The CLI should walk you throug the rest of the setup flow.
+`hs project dev`

projects/getting-started-template/hsproject.json

@@ -1,5 +1,5 @@
 {
-  "name": "getting-started-template",
+  "name": "Get Started Project",
   "srcDir": "src",
   "platformVersion": "2023.1"
 }

projects/getting-started-template/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "hubspot-get-started-project",
+  "version": "0.1.0",
+  "description": "Basic example of a UI Extension built with HubSpot's React developer tools",
+  "scripts": {
+    "postinstall": "cd ./src/app/extensions/ && npm install; cd ../app.functions && npm install",
+    "build": "npm run build --prefix ./src/app/extensions/"
+  },
+  "author": "HubSpot",
+  "license": "MIT"
+}

projects/getting-started-template/src/app/app.functions/example-function.js

@@ -0,0 +1,11 @@
+exports.main = (context = {}, sendResponse) => {
+  const { text } = context.parameters;
+
+  const response = `This is coming from a serverless function! You entered: ${text}`;
+
+  try {
+    sendResponse(response);
+  } catch (error) {
+    sendResponse(error);
+  }
+};

projects/getting-started-template/src/app/app.functions/package.json

@@ -1,13 +1,8 @@
 {
-  "name": "demo.functions",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC",
+  "name": "hubspot-example-function",
+  "version": "0.1.0",
+  "author": "HubSpot",
+  "license": "MIT",
   "dependencies": {
     "@hubspot/api-client": "^7.0.1",
     "axios": "^0.27.2"

projects/getting-started-template/src/app/app.functions/serverless.json

@@ -2,8 +2,8 @@
   "runtime": "nodejs16.x",
   "version": "1.0",
   "appFunctions": {
-    "crm-card": {
-      "file": "example-card.js",
+    "myFunc": {
+      "file": "example-function.js",
       "secrets": []
     }
   }

projects/getting-started-template/src/app/app.json

@@ -1,13 +1,14 @@
 {
-  "name": "Example App",
-  "description": "An example private app that contains a single card extension.",
+  "name": "Get started App",
+  "description": "This is an example private app that shows a custom card on the Contact record tab built with React-based frontend. This card demonstrates a simple handshake with HubSpot's serverless backend.",
+  "uid": "get_started_app",
   "scopes": ["crm.objects.contacts.read", "crm.objects.contacts.write"],
   "public": false,
   "extensions": {
     "crm": {
       "cards": [
         {
-          "file": "./example-card.json"
+          "file": "extensions/example-card.json"
         }
       ]
     }

projects/getting-started-template/src/app/extensions/Example.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import {
+  Divider,
+  Link,
+  Button,
+  Text,
+  Input,
+  Flex,
+  hubspot,
+} from "@hubspot/ui-extensions";
+
+// Define the extension to be run within the Hubspot CRM
+hubspot.extend(({ context, runServerlessFunction, actions }) => (
+  <Extension
+    context={context}
+    runServerless={runServerlessFunction}
+    sendAlert={actions.addAlert}
+  />
+));
+
+// Define the Extension component, taking in runServerless, context, & sendAlert as props
+const Extension = ({ context, runServerless, sendAlert }) => {
+  const [text, setText] = useState("");
+
+  // Call serverless function to execute with parameters.
+  // The `myFunc` function name is configured inside `serverless.json`
+  const handleClick = () => {
+    runServerless({ name: "myFunc", parameters: { text: text } }).then((resp) =>
+      sendAlert({ message: resp.response })
+    );
+  };
+
+  return (
+    <>
+      <Text>
+        <Text format={{ fontWeight: "bold" }}>
+          Your first UI extension is ready!
+        </Text>
+        Congratulations, {context.user.firstName}! You just deployed your first
+        HubSpot UI extension. This example demonstrates how you would send
+        parameters from your React frontend to the serverless function and get a
+        response back.
+      </Text>
+      <Flex direction="row" align="end" gap="small">
+        <Input name="text" label="Send" onInput={(t) => setText(t)} />
+        <Button type="submit" onClick={handleClick}>
+          Click me
+        </Button>
+      </Flex>
+      <Divider />
+      <Text>
+        What now? Explore all available{" "}
+        <Link href="https://developers.hubspot.com/docs/platform/ui-extension-components">
+          UI components
+        </Link>
+        , get an overview of{" "}
+        <Link href="https://developers.hubspot.com/docs/platform/ui-extensions-overview">
+          UI extensions
+        </Link>
+        , learn how to{" "}
+        <Link href="https://developers.hubspot.com/docs/platform/create-ui-extensions">
+          add a new custom card
+        </Link>
+        , jump right in with our{" "}
+        <Link href="https://developers.hubspot.com/docs/platform/ui-extensions-quickstart">
+          Quickstart Guide
+        </Link>
+        , or check out our{" "}
+        <Link href="https://github.com/HubSpot/ui-extensions-react-examples">
+          code Samples
+        </Link>
+        .
+      </Text>
+    </>
+  );
+};

projects/getting-started-template/src/app/extensions/example-card.json

@@ -0,0 +1,12 @@
+{
+  "type": "crm-card",
+  "data": {
+    "title": "Example Card",
+    "uid": "get_started_card",
+    "location": "crm.record.tab",
+    "module": {
+      "file": "Example.jsx"
+    },
+    "objectTypes": [{ "name": "contacts" }]
+  }
+}

projects/getting-started-template/src/app/extensions/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "hubspot-example-extension",
+  "version": "0.1.0",
+  "author": "HubSpot",
+  "license": "MIT",
+  "dependencies": {
+    "@hubspot/ui-extensions": "latest",
+    "react": "^18.2.0"
+  }
+}

projects/no-template/hsproject.json

@@ -1,5 +1,5 @@
 {
-  "name": "no-template",
+  "name": "Empty Project",
   "srcDir": "src",
   "platformVersion": "2023.1"
 }