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,40 @@
+# Design Patterns ![](https://badgen.net/badge/-/TypeScript/blue?icon=typescript&label)
+
+This app includes a number of different **Design Patterns** that showcase how to compose UI components the HubSpot way. These are our recommended best code and design practices to create a smooth, and easy to use end customer experience. Each extension file contains a different pattern that you can copy and paste right into your own project. Feel free to use these as boilerplates.
+
+[Here’s a link to the Figma Kit](https://developers.hubspot.com/docs/reference/ui-components/figma-design-kit) with Design Pattern assets if you prefer to begin with designs.
+
+## Quick Start
+
+### Step 1: Update your CLI and & authenticate your account
+
+1. Update to the latest CLI version by running `npm install -g @hubspot/cli@latest`.
+1. Run `hs init` if you haven’t already done so to create a config file for your parent account.
+1. Run `hs auth` to authenticate your account. Alternatively, select your pre-authenticated account with `hs accounts use`.
+
+### Step 2: Create the project
+
+In the folder where you want this sample to be cloned, create a new project by running `hs project create --templateSource="HubSpot/ui-extensions-examples" --location="design-patterns" --name="design-patterns" --template="design-patterns"`
+
+### Step 3: Install dependencies
+
+Now in the CLI, enter into this newly created folder by `cd design-patterns/src/app/extensions`. Run `npm install` to install the dependencies for this project.
+
+### Step 4: Upload project
+
+Run `hs project upload`. If you’d like to build directly from this project, run `hs project dev` to kickoff the dev process and see changes reflected locally as you build.
+
+### Step 5: View the cards
+
+In the main menu select `Contacts` > `Contacts` to view contact records. Click on any of the contact objects and navigate to the custom tab to access the sample card. If you don’t have any contacts in the account you’re using to view this sample, create a contact by the following steps:
+
+1. In the main menu, select `Contacts` > `Contacts`.
+2. Click `Create contact` in the top right hand corner and fill in all required fields. Click `create` once you’ve finished filling in your contact details.
+3. Your new contact should appear in the `Contacts table`. Select it and navigate to the `Custom` tab in the middle pane to access the sample card.
+
+If you haven't customized the tabs before follow step #4 from [this guide](https://developers.hubspot.com/docs/platform/ui-extensions-quickstart).
+
+## Examples by Component
+
+### Table
+- [Table Example](./src/app/extensions/TableExampleCard.jsx)

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,105 @@
+import React, { useState } from 'react';
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Input,
+  Flex,
+  Heading,
+  Text,
+  hubspot,
+} from '@hubspot/ui-extensions';
+
+// Define the extension to be run within the Hubspot CRM
+hubspot.extend(() => <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 TableExampleCard = () => {
+  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 input, buttons, and scrolling can be
+        implemented.
+      </Text>
+
+      <Flex direction="row">
+        <Input name="search" placeholder="Search" />
+      </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>
+          {tableData.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>
+  );
+};