Take example app from getting started template

Author: kemmerle

components/example-app/app.functions/example-function.js

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

components/example-app/app.functions/package.json

@@ -1,8 +1,6 @@
 {
-  "name": "example-function",
+  "name": "hubspot-example-function",
   "version": "0.1.0",
-  "description": "",
-  "main": "example-function.js",
   "author": "HubSpot",
   "license": "MIT",
   "dependencies": {

components/example-app/app.json

@@ -1,6 +1,6 @@
 {
-  "name": "Get started App with React",
-  "description": "This is an example of private app that shows a custom card on the Contact record tab built with React-based frontend. This card demonstrates simple handshake with HubSpot's serverless backend.",
+  "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,

components/example-app/extensions/Example.jsx

@@ -1,13 +1,13 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import {
   Divider,
   Link,
   Button,
   Text,
   Input,
-  Stack,
+  Flex,
   hubspot,
-} from '@hubspot/ui-extensions';
+} from "@hubspot/ui-extensions";
 
 // Define the extension to be run within the Hubspot CRM
 hubspot.extend(({ context, runServerlessFunction, actions }) => (
@@ -20,60 +20,57 @@ hubspot.extend(({ context, runServerlessFunction, actions }) => (
 
 // Define the Extension component, taking in runServerless, context, & sendAlert as props
 const Extension = ({ context, runServerless, sendAlert }) => {
-  const [text, setText] = useState('');
+  const [text, setText] = useState("");
 
   // Call serverless function to execute with parameters.
-  // The name `myFunc` as per configurations inside `serverless.json`
-
-  const run = () => {
-    runServerless({ name: 'myFunc', parameters: { text: text } }).then((resp) =>
+  // 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' }}>
+        <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>
-      <Stack>
+      <Flex direction="row" align="end" gap="small">
         <Input name="text" label="Send" onInput={(t) => setText(t)} />
-        <Button type="submit" onClick={run}>
+        <Button type="submit" onClick={handleClick}>
           Click me
         </Button>
-      </Stack>
+      </Flex>
       <Divider />
-      <Stack>
-        <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>
-      </Stack>
+      <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>
     </>
   );
 };