tables example repo

tables-example/.gitignore

@@ -0,0 +1,105 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env*
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+hubspot.config.yml

tables-example/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.

tables-example/README.md

@@ -0,0 +1,17 @@
+# HubSpot Getting Started Project Template
+
+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 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:
+
+`hs project dev`

tables-example/hsproject.json

@@ -0,0 +1,5 @@
+{
+  "name": "tables-example",
+  "srcDir": "src",
+  "platformVersion": "2023.2"
+}

tables-example/src/app/app.json

@@ -0,0 +1,16 @@
+{
+  "name": "Table Example Card",
+  "description": "This app demonstrates how to use buttons and example scrolling on tables.",
+  "uid": "table_example_app",
+  "scopes": ["crm.objects.contacts.read", "crm.objects.contacts.write"],
+  "public": false,
+  "extensions": {
+    "crm": {
+      "cards": [
+        {
+          "file": "extensions/table-example-card.json"
+        }
+      ]
+    }
+  }
+}

tables-example/src/app/extensions/TableExampleCard.jsx

@@ -0,0 +1,135 @@
+import React, { useState } from "react";
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Button,
+  Input,
+  Flex,
+  Heading,
+  Text,
+  hubspot,
+} from "@hubspot/ui-extensions";
+
+// Define the extension to be run within the Hubspot CRM
+hubspot.extend(() => (
+  <TableExampleCard />
+));
+
+const TableExampleCard = () => {
+  const tableData = [
+    {
+      name: "Instapage",
+      publishStatus: "Published",
+      review: "-",
+      installs: "-",
+      lastUpdated: "March 8, 2019 (Amelia Merchant)",
+      createdAt: "March 8, 2019 (Amelia Merchant)",
+    },
+    {
+      name: "Spotify",
+      publishStatus: "Draft",
+      review: "41",
+      installs: "41",
+      lastUpdated: "March 8, 2019 (Amelia Merchant)",
+      createdAt: "March 8, 2019 (Amelia Merchant)",
+    },
+    {
+      name: "Slack",
+      publishStatus: "Published | Draft",
+      review: "136",
+      installs: "136",
+      lastUpdated: "March 8, 2019 (Amelia Merchant)",
+      createdAt: "March 8, 2019 (Amelia Merchant)",
+    },
+    {
+      name: "Survey Monkey",
+      publishStatus: "Published",
+      review: "136",
+      installs: "136",
+      lastUpdated: "March 8, 2019 (Amelia Merchant)",
+      createdAt: "March 8, 2019 (Amelia Merchant)",
+    },
+  ];
+
+  const [search, setSearch] = useState("");
+  const [data, setData] = useState(tableData);
+
+// Search for both name and publish status match, case insensitive
+  const handleSearchClick = () => {
+    const foundSearch = tableData.filter(({name, publishStatus}) => {
+      const searchLower = search.toLowerCase();
+      const nameMatch = name.toLowerCase().includes(searchLower);
+      const publishStatusMatch = publishStatus.toLowerCase().includes(searchLower);
+      return nameMatch || publishStatusMatch;
+    });
+
+    setData(foundSearch);
+  };
+
+  return (
+    <>
+      <Flex direction="column" gap="small">
+        <Heading>Table Example</Heading>
+        <Text>
+          Tables can be tricky, especially as they grow in complexity and size.
+          This is an example of how to input, buttons, and scrolling can be
+          implemented.
+        </Text>
+
+        <Flex direction="row"
+        >
+          <Input
+            name="search"
+            placeholder="Search"
+            value={search}
+            onChange={(search) => setSearch(search)}
+          />
+           <Flex
+           justify="end"
+        >
+          <Button
+            size="xs"
+            variant="secondary"
+            type="button"
+            align-self="end"
+            onClick={handleSearchClick}
+          >
+            Button
+          </Button>
+          </Flex>
+
+        </Flex>
+
+        <Table bordered={true} paginated={true} showButtonLabels={true} pageCount="5">
+          <TableHead width="min">
+            <TableRow>
+              <TableHeader width="min">Name</TableHeader>
+              <TableHeader width="min">Publish Status</TableHeader>
+              <TableHeader width="min">Review</TableHeader>
+              <TableHeader width="min">Installs</TableHeader>
+              <TableHeader width="min">Last Updated</TableHeader>
+              <TableHeader width="min">Created At</TableHeader>
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+            {data.map(({name, publishStatus, review, installs, lastUpdated, createdAt}, index) => (
+              <TableRow key={index}>
+                <TableCell width="min">{name}</TableCell>
+                <TableCell width="min">{publishStatus}</TableCell>
+                <TableCell width="min">{review}</TableCell>
+                <TableCell width="min">{installs}</TableCell>
+                <TableCell width="min">{lastUpdated}</TableCell>
+                <TableCell width="min">{createdAt}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </Flex>
+    </>
+  );
+};