### Figma API Response Example (GET /v1/files/:key) Source: https://github.com/deco-cx/apps/blob/main/figma/README.MD This is an example of the JSON response structure when retrieving a Figma file's details. ```json { "name": String, "role": String, "lastModified": String, "editorType": String, "thumbnailUrl": String, "version": String, "document": Node, "components": Map, "componentSets": Map, "schemaVersion": 0, "styles": Map } ``` -------------------------------- ### Basic Form Island Setup Source: https://github.com/deco-cx/apps/blob/main/resend/README.md A basic setup for a form island in React, demonstrating the structure for handling form submissions. ```typescript //islands/form.tsx const handleSubmit: JSX.GenericEventHandler = async (e) => { e.preventDefault(); } export default function Form(){ return (
...
) } ``` -------------------------------- ### HTTP Response Headers Example Source: https://github.com/deco-cx/apps/blob/main/unsplash/api.md Example of HTTP response headers for a request to list liked photos, including pagination links and rate limit information. ```http 200 OK Link: ; rel="first", ; rel="prev", ; rel="last", ; rel="next" X-Ratelimit-Limit: 1000 X-Ratelimit-Remaining: 999 ``` -------------------------------- ### Unsplash API Response Example Source: https://github.com/deco-cx/apps/blob/main/unsplash/api.md This example shows a typical 200 OK response from the Unsplash API, including Link headers for pagination and rate limit information. ```http 200 OK Link: ; rel="first", ; rel="prev", ; rel="last", ; rel="next" X-Ratelimit-Limit: 1000 X-Ratelimit-Remaining: 999 ``` -------------------------------- ### Total Stats Response Example Source: https://github.com/deco-cx/apps/blob/main/unsplash/api.md Example of a successful response for the total stats endpoint, showing various counts across the Unsplash platform. ```json { "photos": 10000, "downloads": 2000, "views": 5000, "likes": 800, "photographers": 100, "pixels": 200000, "downloads_per_second": 10, // average number of downloads per second for the past 7 days "views_per_second": 20, // average number of views per second for the past 7 days "developers": 20, "applications": 50, "requests": 8000 } ``` -------------------------------- ### Monthly Stats Response Example Source: https://github.com/deco-cx/apps/blob/main/unsplash/api.md Example of a successful response for the monthly stats endpoint, detailing metrics for the past 30 days. ```json { "downloads": 20, "views": 200, "likes": 60, "new_photos": 10, "new_photographers": 5, "new_pixels": 2000, "new_developers": 8, "new_applications": 5, "new_requests": 100 } ``` -------------------------------- ### Unsplash API Response Example Source: https://github.com/deco-cx/apps/blob/main/unsplash/api.md This example shows a typical successful response (200 OK) from the Unsplash API, including pagination links and rate limit information. It also demonstrates the JSON structure for a collection object. ```http 200 OK Link: ; rel="last", ; rel="next" X-Ratelimit-Limit: 1000 X-Ratelimit-Remaining: 999 ``` ```json [ { "id": 296, "title": "I like a man with a beard.", "description": "Yeah even Santa...", "published_at": "2016-01-27T18:47:13-05:00", "last_collected_at": "2016-06-02T13:10:03-04:00", "updated_at": "2016-07-10T11:00:01-05:00", "total_photos": 12, "private": false, "share_key": "312d188df257b957f8b86d2ce20e4766", "cover_photo": { "id": "C-mxLOk6ANs", "width": 5616, "height": 3744, "color": "#E4C6A2", "blur_hash": "L57Uhwni00t7EeRkagj@s+kBxvoe", "likes": 12, "liked_by_user": false, "description": "A man drinking a coffee.", "user": { "id": "xlt1-UPW7FE", "username": "lionsdenpro", "name": "Greg Raines", "portfolio_url": "https://example.com/", "bio": "Just an everyday Greg", "location": "Montreal", "total_likes": 5, "total_photos": 10, "total_collections": 13, "profile_image": { "small": "https://images.unsplash.com/profile-1449546653256-0faea3006d34?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=32&w=32", "medium": "https://images.unsplash.com/profile-1449546653256-0faea3006d34?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=64&w=64", "large": "https://images.unsplash.com/profile-1449546653256-0faea3006d34?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=128&w=128" }, "links": { "self": "https://api.unsplash.com/users/lionsdenpro", "html": "https://unsplash.com/lionsdenpro", "photos": "https://api.unsplash.com/users/lionsdenpro/photos", "likes": "https://api.unsplash.com/users/lionsdenpro/likes", "portfolio": "https://api.unsplash.com/users/lionsdenpro/portfolio" } }, "urls": { "raw": "https://images.unsplash.com/photo-1449614115178-cb924f730780", "full": "https://images.unsplash.com/photo-1449614115178-cb924f730780?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy", "regular": "https://images.unsplash.com/photo-1449614115178-cb924f730780?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max", "small": "https://images.unsplash.com/photo-1449614115178-cb924f730780?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=400&fit=max", "thumb": "https://images.unsplash.com/photo-1449614115178-cb924f730780?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max" }, "links": { "self": "https://api.unsplash.com/photos/C-mxLOk6ANs", "html": "https://unsplash.com/photos/C-mxLOk6ANs", "download": "https://unsplash.com/photos/C-mxLOk6ANs/download" } }, "user": { "id": "IFcEhJqem0Q", "updated_at": "2016-07-10T11:00:01-05:00", "username": "fableandfolk", "name": "Annie Spratt", "portfolio_url": "http://mammasaurus.co.uk", "bio": "Follow me on Twitter & Instagram @anniespratt\r\nEmail me at hello@fableandfolk.com", "location": "New Forest National Park, UK", "total_likes": 0, "total_photos": 273, "total_collections": 36, "profile_image": { "small": "https://images.unsplash.com/profile-1450003783594-db47c765cea3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=32&w=32", "medium": "https://images.unsplash.com/profile-1450003783594-db47c765cea3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=64&w=64", "large": "https://images.unsplash.com/profile-1450003783594-db47c765cea3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=128&w=128" }, "links": { "self": "https://api.unsplash.com/users/fableandfolk", "html": "https://unsplash.com/fableandfolk", "photos": "https://api.unsplash.com/users/fableandfolk/photos", "likes": "https://api.unsplash.com/users/fableandfolk/likes", "portfolio": "https://api.unsplash.com/users/fableandfolk/portfolio" } }, "links": { "self": "https://api.unsplash.com/collections/296", "html": "https://unsplash.com/collections/296", "photos": "https://api.unsplash.com/collections/296/photos", "related": "https://api.unsplash.com/collections/296/related" } }, "// ... more Collections ... " ] ``` -------------------------------- ### Example Response for Liked Photos Source: https://github.com/deco-cx/apps/blob/main/unsplash/api.md This is an example of the JSON response when retrieving a list of liked photos. The photo objects are abbreviated and may require a separate call to GET /photos/:id for full details. ```json [ { "id": "LBI7cgq3pbM", "created_at": "2016-05-03T11:00:28-04:00", "updated_at": "2016-07-10T11:00:01-05:00", "width": 5245, "height": 3497, "color": "#60544D", "blur_hash": "LoC%a7IoIVxZ_NM|M{s:%hRjWAo0", "likes": 12, "liked_by_user": false, "description": "A man drinking a coffee.", "user": { "id": "pXhwzz1JtQU", "username": "poorkane", "name": "Gilbert Kane", "portfolio_url": "https://theylooklikeeggsorsomething.com/", "bio": "XO", "location": "Way out there", "total_likes": 5, "total_photos": 74, "total_collections": 52, "instagram_username": "instantgrammer", "twitter_username": "crew", "profile_image": { "small": "https://images.unsplash.com/face-springmorning.jpg?q=80&fm=jpg&crop=faces&fit=crop&h=32&w=32", "medium": "https://images.unsplash.com/face-springmorning.jpg?q=80&fm=jpg&crop=faces&fit=crop&h=64&w=64", "large": "https://images.unsplash.com/face-springmorning.jpg?q=80&fm=jpg&crop=faces&fit=crop&h=128&w=128" }, "links": { "self": "https://api.unsplash.com/users/poorkane", "html": "https://unsplash.com/poorkane", "photos": "https://api.unsplash.com/users/poorkane/photos", "likes": "https://api.unsplash.com/users/poorkane/likes", "portfolio": "https://api.unsplash.com/users/poorkane/portfolio" } }, "current_user_collections": [ { "id": 206, "title": "Makers: Cat and Ben", "published_at": "2016-01-12T18:16:09-05:00", "last_collected_at": "2016-06-02T13:10:03-04:00", "updated_at": "2016-07-10T11:00:01-05:00", "cover_photo": null, "user": null }, // ... more collections ], "urls": { "raw": "https://images.unsplash.com/face-springmorning.jpg", "full": "https://images.unsplash.com/face-springmorning.jpg?q=75&fm=jpg", "regular": "https://images.unsplash.com/face-springmorning.jpg?q=75&fm=jpg&w=1080&fit=max", "small": "https://images.unsplash.com/face-springmorning.jpg?q=75&fm=jpg&w=400&fit=max", "thumb": "https://images.unsplash.com/face-springmorning.jpg?q=75&fm=jpg&w=200&fit=max" }, "links": { "self": "https://api.unsplash.com/photos/LBI7cgq3pbM", "html": "https://unsplash.com/photos/LBI7cgq3pbM", "download": "https://unsplash.com/photos/LBI7cgq3pbM/download", "download_location": "https://api.unsplash.com/photos/LBI7cgq3pbM/download" } }, // ... more photos ] ``` -------------------------------- ### Pagination Link Header Example Source: https://github.com/deco-cx/apps/blob/main/unsplash/api.md Response headers include URLs for navigating through paginated results. This example shows links for the first, previous, last, and next pages. ```http Link: ; rel="first", ; rel="prev", ; rel="last", ; rel="next" ``` -------------------------------- ### Unsplash API JSON Response Example Source: https://github.com/deco-cx/apps/blob/main/unsplash/api.md This example demonstrates the JSON structure of a successful response from the Unsplash API, detailing collections and their associated data. ```json { "total": 237, "total_pages": 12, "results": [ { "id": 193913, "title": "Office", "description": null, "published_at": "2016-04-15T21:05:44-04:00", "last_collected_at": "2016-06-02T13:10:03-04:00", "updated_at": "2016-07-10T11:00:01-05:00", "featured": true, "total_photos": 60, "private": false, "share_key": "79ec77a237f014935eddc774f6aac1cd", "cover_photo": { "id": "pb_lF8VWaPU", "created_at": "2015-02-12T18:39:43-05:00", "width": 5760, "height": 3840, "color": "#1F1814", "blur_hash": "L14Bk2M{0d^lR*j[ofWB0K%3^l9Y", "likes": 786, "liked_by_user": false, "description": "A man drinking a coffee.", "user": { "id": "tkoUSod3di4", "username": "gilleslambert", "name": "Gilles Lambert", "first_name": "Gilles", "last_name": "Lambert", "instagram_username": "instantgrammer", "twitter_username": "gilleslambert", "portfolio_url": "http://www.gilleslambert.be/photography", "profile_image": { "small": "https://images.unsplash.com/profile-1445832407811-c04ed64d238b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=4bb8fad0dcba43c46491c6fd0b92f537", "medium": "https://images.unsplash.com/profile-1445832407811-c04ed64d238b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=a6d8602c855914fe13650eedd5996cb5", "large": "https://images.unsplash.com/profile-1445832407811-c04ed64d238b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=26099ca5069692aac6973d08ae02dd71" }, "links": { "self": "https://api.unsplash.com/users/gilleslambert", "html": "http://unsplash.com/@gilleslambert", "photos": "https://api.unsplash.com/users/gilleslambert/photos", "likes": "https://api.unsplash.com/users/gilleslambert/likes" } }, "urls": { "raw": "https://images.unsplash.com/photo-1423784346385-c1d4dac9893a", "full": "https://hd.unsplash.com/photo-1423784346385-c1d4dac9893a", "regular": "https://images.unsplash.com/photo-1423784346385-c1d4dac9893a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=d60d527cb347746ab3abf5fccecf0271", "small": "https://images.unsplash.com/photo-1423784346385-c1d4dac9893a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=0bf0c97abca8b2741380f38d3debd45f", "thumb": "https://images.unsplash.com/photo-1423784346385-c1d4dac9893a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=9bc3a6d42a16809b735c22720de3fb13" }, "links": { "self": "https://api.unsplash.com/photos/pb_lF8VWaPU", "html": "http://unsplash.com/photos/pb_lF8VWaPU", "download": "http://unsplash.com/photos/pb_lF8VWaPU/download" } }, "user": { "id": "k_gSWNtOjS8", "username": "cjmconnors", "name": "Christine Connors", "portfolio_url": null, "bio": "", "profile_image": { "small": "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=0ad68f44c4725d5a3fda019bab9d3edc", "medium": "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=356bd4b76a3d4eb97d63f45b818dd358", "large": "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=ee8bbf5fb8d6e43aaaa238feae2fe90d" }, "links": { "self": "https://api.unsplash.com/users/cjmconnors", "html": "http://unsplash.com/@cjmconnors", "photos": "https://api.unsplash.com/users/cjmconnors/photos", "likes": "https://api.unsplash.com/users/cjmconnors/likes" } }, "links": { "self": "https://api.unsplash.com/collections/193913", "html": "http://unsplash.com/collections/193913/office", "photos": "https://api.unsplash.com/collections/193913/photos", "related": "https://api.unsplash.com/collections/193913/related" } } // more collections... ] } ``` -------------------------------- ### Unsplash API List Collections Endpoint Source: https://github.com/deco-cx/apps/blob/main/unsplash/api.md Example of an HTTP GET request to list collections on the Unsplash API. Parameters for pagination are optional. ```http GET /collections ``` -------------------------------- ### Get Webhooks Source: https://github.com/deco-cx/apps/blob/main/hubspot/README.md List all configured webhook subscriptions. ```APIDOC ## Get Webhooks ### Description List all configured webhook subscriptions. ### Method GET ### Endpoint /webhooks ### Request Example ```json {} ``` ``` -------------------------------- ### Get Tasks Source: https://github.com/deco-cx/apps/blob/main/hubspot/README.md List tasks and activities. Supports filtering by limit and properties. ```APIDOC ## Get Tasks ### Description List tasks and activities. ### Method GET ### Endpoint /crm/tasks ### Parameters #### Query Parameters - **limit** (integer) - Optional - Maximum number of tasks to return. - **properties** (array of strings) - Optional - Properties to include in the response. ### Request Example ```json { "limit": 50, "properties": ["hs_task_subject", "hs_task_status", "hs_task_type"] } ``` ``` -------------------------------- ### Create a New Project using a POST Request Source: https://github.com/deco-cx/apps/blob/main/deno-deploy/README.md This example demonstrates how to create a new project in Deno Deploy using a POST request to the `/live/actions/deno-deploy/createProject.ts` endpoint. It utilizes `useUI` to display alerts for success or error messages. Remember to replace 'your-organization-id' with your actual Deno Deploy organization ID. ```typescript import { useCallback } from "preact/hooks"; import { useUI } from "deco/hooks/useUI.ts"; export default function Page() { const { displayAlert } = useUI(); const createProject = useCallback(async () => { try { const response = await fetch("/live/actions/deno-deploy/createProject.ts", { method: "POST", body: JSON.stringify({ organizationId: "your-organization-id", name: "my-new-project", description: "My awesome project", }), }); if (response.ok) { const project = await response.json(); displayAlert({ message: `Created project: ${project.name}` }); } } catch (error) { displayAlert({ message: `Error: ${error.message}`, type: "error" }); } }, []); return ( ); } ``` -------------------------------- ### Toggle UI Theme and Apply Source: https://github.com/deco-cx/apps/blob/main/airtable/utils/ui-templates/selection-page.template.html Reads the current theme from local storage, determines the next theme ('light' or 'dark'), saves the new theme to local storage, applies the theme to the UI by calling `applyTheme`, and then re-renders the selection list. ```javascript function toggleTheme() { const current = localStorage.getItem("theme") || "light"; const next = current === "dark" ? "light" : "dark"; localStorage.setItem("theme", next); applyTheme(next); renderSelectionList(); } ``` -------------------------------- ### Get Conversations Source: https://github.com/deco-cx/apps/blob/main/hubspot/README.md Retrieve conversation threads. Supports limit, state, and start timestamp for filtering. ```APIDOC ## Get Conversations ### Description Retrieve conversation threads. ### Method GET ### Endpoint /conversations ### Parameters #### Query Parameters - **limit** (integer) - Optional - Maximum number of conversations to return. - **state** (string) - Optional - State of the conversations to retrieve (e.g., "OPEN"). - **startTimestamp** (integer) - Optional - Unix timestamp to filter conversations starting from. ### Request Example ```json { "limit": 20, "state": "OPEN", "startTimestamp": 1640995200000 } ``` ``` -------------------------------- ### Initialize 1001fx App with API Key Source: https://github.com/deco-cx/apps/blob/main/1001fx/README.md Initializes the deco client with the 1001fx app, requiring your API key for authentication. This setup is necessary before making any 1001fx API calls. ```typescript import { createClient } from "deco"; const client = createClient({ apps: { "1001fx": { apiKey: "your-api-key" } } }); ``` -------------------------------- ### Abbreviated Photo Response Source: https://github.com/deco-cx/apps/blob/main/unsplash/api.md This is an example of an abbreviated photo object response. For full details, use the `GET /photos/:id` endpoint. ```http 200 OK X-Ratelimit-Limit: 1000 X-Ratelimit-Remaining: 999 ``` ```json [ { "id": "LBI7cgq3pbM", "created_at": "2016-05-03T11:00:28-04:00", "updated_at": "2016-07-10T11:00:01-05:00", "width": 5245, "height": 3497, "color": "#60544D", "blur_hash": "LoC%a7IoIVxZ_NM|M{s:%hRjWAo0", "likes": 12, "liked_by_user": false, "description": "A man drinking a coffee.", "user": { "id": "pXhwzz1JtQU", "username": "poorkane", "name": "Gilbert Kane", "portfolio_url": "https://theylooklikeeggsorsomething.com/", "bio": "XO", "location": "Way out there", "total_likes": 5, "total_photos": 74, "total_collections": 52, "instagram_username": "instantgrammer", "twitter_username": "crew", "profile_image": { "small": "https://images.unsplash.com/face-springmorning.jpg?q=80&fm=jpg&crop=faces&fit=crop&h=32&w=32", "medium": "https://images.unsplash.com/face-springmorning.jpg?q=80&fm=jpg&crop=faces&fit=crop&h=64&w=64", "large": "https://images.unsplash.com/face-springmorning.jpg?q=80&fm=jpg&crop=faces&fit=crop&h=128&w=128" }, "links": { "self": "https://api.unsplash.com/users/poorkane", "html": "https://unsplash.com/poorkane", "photos": "https://api.unsplash.com/users/poorkane/photos", "likes": "https://api.unsplash.com/users/poorkane/likes", "portfolio": "https://api.unsplash.com/users/poorkane/portfolio" } }, "current_user_collections": [ { "id": 206, "title": "Makers: Cat and Ben", "published_at": "2016-01-12T18:16:09-05:00", "last_collected_at": "2016-06-02T13:10:03-04:00", "updated_at": "2016-07-10T11:00:01-05:00", "cover_photo": null, "user": null }, // ... more collections ], "urls": { "raw": "https://images.unsplash.com/face-springmorning.jpg", "full": "https://images.unsplash.com/face-springmorning.jpg?q=75&fm=jpg", "regular": "https://images.unsplash.com/face-springmorning.jpg?q=75&fm=jpg&w=1080&fit=max", "small": "https://images.unsplash.com/face-springmorning.jpg?q=75&fm=jpg&w=400&fit=max", "thumb": "https://images.unsplash.com/face-springmorning.jpg?q=75&fm=jpg&w=200&fit=max" }, "links": { "self": "https://api.unsplash.com/photos/LBI7cgq3pbM", "html": "https://unsplash.com/photos/LBI7cgq3pbM", "download": "https://unsplash.com/photos/LBI7cgq3pbM/download", "download_location": "https://api.unsplash.com/photos/LBI7cgq3pbM/download" } }, // ... more photos ] ``` -------------------------------- ### Get HubSpot Conversations Source: https://github.com/deco-cx/apps/blob/main/hubspot/README.md Retrieve conversation threads from HubSpot. Supports filtering by limit, state (e.g., 'OPEN'), and a start timestamp. ```typescript { "limit": 20, "state": "OPEN", "startTimestamp": 1640995200000 } ``` -------------------------------- ### Install Turso DB App Source: https://github.com/deco-cx/apps/blob/main/turso-db/README.md Import and instantiate the Turso DB app in your deco.ts file. Ensure you replace the placeholder database URL and authentication token with your actual Turso credentials. ```typescript import tursoDb from "turso-db/mod.ts"; export default { apps: { // Other apps... "turso-db": tursoDb({ databaseUrl: "https://your-database-org.turso.io", token: "your-auth-token" }), }, }; ``` -------------------------------- ### App Configuration and Client Instantiation (mod.ts) Source: https://github.com/deco-cx/apps/blob/main/NewAppPrompt.md Defines the app's configuration, such as API tokens and account names, and instantiates the HTTP client. This setup is passed as context to loaders and actions. ```typescript import type { App, FnContext } from "@deco/deco"; import { fetchSafe } from "../utils/fetch.ts"; import { createHttpClient } from "../utils/http.ts"; import type { Secret } from "../website/loaders/secret.ts"; import manifest, { Manifest } from "./manifest.gen.ts"; import { ClientInterfaceExample } from "./client.ts"; export type AppContext = FnContext; export interface Props { /** * @title Account Name * @description erploja2 etc */ account: string; /** * @title API token * @description The token for accessing your API */ token?: string | Secret; } // Here we define the state of the app // You choose what to put in the state export interface State extends Omit { api: ReturnType>; } /** * @name App Template * @description This is an template of an app to be used as a reference. * @category Developer Tools * @logo https:// */ export default function App(props: Props): App { const { token, account: _account } = props; const _stringToken = typeof token === "string" ? token : token?.get?.() ?? ""; const api = createHttpClient({ base: `https://api.github.com/users/guitavano`, headers: new Headers({ "Authorization": `Bearer ${_stringToken}` }), fetcher: fetchSafe, }); // it is the state of the app, all data // here will be available in the context of // loaders, actions and workflows const state = { ...props, api }; return { state, manifest, }; } ``` -------------------------------- ### Example JSON Response for Budgets Source: https://github.com/deco-cx/apps/blob/main/aws/README.md Illustrates the structure of a typical response when monitoring budget performance and alerts. ```json { "budgets": [ { "budgetName": "Monthly Cost Budget", "utilizationPercentage": 75.5, "status": "ON_TRACK", "remainingBudget": {"amount": "245.50", "formatted": "$245.50"} } ], "alerts": [ { "budgetName": "Production Budget", "alertType": "HIGH_UTILIZATION", "severity": "MEDIUM" } ] } ``` -------------------------------- ### Start OAuth Flow Source: https://github.com/deco-cx/apps/blob/main/slack/README.md Initiates the OAuth flow, either showing the selection interface or redirecting to Slack for authorization. ```APIDOC ## GET /loaders/oauth/start ### Description Starts the OAuth flow for Slack integration. ### Method GET ### Endpoint /loaders/oauth/start ``` -------------------------------- ### Render Selection List and Header Source: https://github.com/deco-cx/apps/blob/main/airtable/utils/ui-templates/selection-page.template.html Dynamically renders the list of bases and tables, including a 'Select All' header. Adapts UI based on search query and theme. ```javascript const filteredTablesSet = new Set(); function renderSelectionList() { const container = document.getElementById("selection-list"); const headerContainer = document.getElementById("select-all-header"); const theme = localStorage.getItem("theme") || "light"; if (filteredBases.length === 0) { container.innerHTML = '
No bases found
'; headerContainer.innerHTML = ""; return; } filteredTables.forEach((table) => filteredTablesSet.add(table.id)); const searchQuery = document.getElementById("search-input").value.toLowerCase(); let basesToShow; if (searchQuery) { basesToShow = filteredBases; } else { const basesWithFilteredTablesMap = new Map(); filteredTables.forEach((table) => { if (table.baseId) { basesWithFilteredTablesMap.set(table.baseId, true); } }); basesToShow = bases.filter((base) => basesWithFilteredTablesMap.has(base.id)); } if (searchQuery && filteredBases.length > 0) { const directMatchTableBaseIds = new Set(); for (const table of filteredTables) { if ( table.baseId && ((table.name || "").toLowerCase().includes(searchQuery) || table.id.toLowerCase().includes(searchQuery)) ) { directMatchTableBaseIds.add(table.baseId); } } if (directMatchTableBaseIds.size === 0 && filteredBases.length <= 10) { filteredBases.forEach((base) => expandedBases.add(base.id)); } else { directMatchTableBaseIds.forEach((baseId) => expandedBases.add(baseId)); } } let allBasesFullySelected = true; if (selectedBases.size !== bases.length) { allBasesFullySelected = false; } else { for (const base of bases) { const baseTableIds = baseToTablesMap.get(base.id) || new Set(); for (const tableId of baseTableIds) { if (!selectedTables.has(tableId)) { allBasesFullySelected = false; break; } } if (!allBasesFullySelected) break; } } const selectAllChecked = allBasesFullySelected ? "checked" : "unchecked"; const totalBases = selectedBases.size; const totalBasesCount = bases.length; const headerHTML = `
Select all
${totalBases} of ${totalBasesCount} bases selected `; headerContainer.innerHTML = headerHTML; if (theme === "light") { headerContainer.classList.add("light-mode"); container.classList.add("light-mode"); } else { headerContainer.classList.remove("light-mode"); container.classList.remove("light-mode"); } container.innerHTML = basesToShow.map(createBaseItemHTML).join( "", ); } function createBaseItemHTML(base) { const isSelected = selectedBases. ``` -------------------------------- ### Run SQL Queries with Turso DB App Source: https://github.com/deco-cx/apps/blob/main/turso-db/README.md Use the `runQuery` action to execute SQL queries against your Turso database. This example demonstrates both SELECT and INSERT operations, including parameter binding and handling query results or errors. ```tsx import { useSignal } from "@preact/signals"; import { useCallback } from "preact/hooks"; import type { Result } from "turso-db/actions/runQuery.ts"; export default function MyComponent() { const queryResult = useSignal(null); const handleQuery = useCallback(async () => { // SELECT query example const result = await runQuery({ sql: "SELECT * FROM users WHERE age > ?", params: [{ type: "integer", value: 21 }] }); queryResult.value = result; }, []); // For INSERT/UPDATE operations const handleInsert = useCallback(async () => { const result = await runQuery({ sql: "INSERT INTO users (name, email) VALUES (?, ?)", params: [ { type: "text", value: "John Doe" }, { type: "text", value: "john@example.com" } ] }); console.log(`Rows affected: ${result.affected_row_count}`); console.log(`Last insert ID: ${result.last_insert_rowid}`); }, []); return (
{queryResult.value?.rows && ( {queryResult.value.columns?.map((col) => ( ))} {queryResult.value.rows.map((row, i) => ( {row.map((cell, j) => ( ))} ))}
{col}
{String(cell)}
)} {queryResult.value?.error && (
Error: {queryResult.value.error.message}
)}
); } ``` -------------------------------- ### Get a Single Photo (GET /photos/:id) Source: https://github.com/deco-cx/apps/blob/main/unsplash/api.md Retrieve detailed information for a specific photo using its ID. This endpoint requires the photo's ID as a parameter. ```http GET /photos/:id ``` -------------------------------- ### Create Algolia Indices Source: https://github.com/deco-cx/apps/blob/main/algolia/README.md Use this form to initiate the setup of necessary indices in your Algolia dashboard. Ensure you have your Algolia Application ID and Admin API Key. ```html
``` -------------------------------- ### Get Figma Image Fills Loader Source: https://github.com/deco-cx/apps/blob/main/figma/README.MD Use `getFileImageFills` to get download URLs for all images used as fills within a Figma document. Requires a file key. ```typescript import { getFileImageFills } from "figma/loaders/image-fills.ts"; const imageFills = await getFileImageFills({ fileKey: "your_file_key_here", }); ``` -------------------------------- ### List Topics - GET Request Source: https://github.com/deco-cx/apps/blob/main/unsplash/api.md Use this GET request to retrieve a single page of topics from the Unsplash API. Optional parameters allow filtering by IDs, pagination, and sorting. ```http GET /topics ``` -------------------------------- ### Track Photo Download GET Request Source: https://github.com/deco-cx/apps/blob/main/unsplash/api.md Trigger a GET request to this endpoint to increment the download count for a photo. This is for tracking purposes only and should not be used to embed or direct users to the photo. ```http GET /photos/:id/download ``` -------------------------------- ### Create and Use HTTP Client with Deco Source: https://github.com/deco-cx/apps/blob/main/NewAppPrompt.md Instantiate the HTTP client using `createHttpClient` with the defined client interface and base URL. Use the client to make type-safe API calls, including those with URL parameters, query parameters, and request bodies. ```typescript const api = createHttpClient({ base: "https://api.github.com", headers: new Headers({ "Authorization": `Bearer ${token}`, }), }); const user = await api["GET /users/:username"]({ username: "octocat", }); const search = await api["GET /search/users"]({ q: "john", page: 1, per_page: 10, }); const issue = await api["POST /repos/:owner/:repo/issues"]( { owner: "octocat", repo: "Hello-World", }, { body: { title: "Found a bug", body: "This is a bug report", }, }, ); ``` -------------------------------- ### User Portfolio Link Response Source: https://github.com/deco-cx/apps/blob/main/unsplash/api.md This is an example of a successful response when retrieving a user's portfolio link. ```http 200 OK X-Ratelimit-Limit: 1000 X-Ratelimit-Remaining: 999 ``` ```json { "url": "http://example.com" } ``` -------------------------------- ### Get Account Source: https://github.com/deco-cx/apps/blob/main/hubspot/README.md Retrieve account information and settings. ```APIDOC ## Get Account ### Description Retrieve account information and settings. ### Method GET ### Endpoint /settings/account ### Request Example ```json {} ``` ``` -------------------------------- ### Initialize Figma App Configuration Source: https://github.com/deco-cx/apps/blob/main/figma/README.MD Configure the Figma app by providing your Figma API access token during initialization. This token is required for the app to authenticate and interact with the Figma API. ```typescript import { App } from "figma/mod.ts"; const figmaApp = App({ accessToken: "your_token_here", }); ``` -------------------------------- ### Create Task Source: https://github.com/deco-cx/apps/blob/main/hubspot/README.md Create a new task with specified properties. ```APIDOC ## Create Task ### Description Create a new task. ### Method POST ### Endpoint /crm/tasks ### Parameters #### Request Body - **properties** (object) - Required - Key-value pairs for task properties (e.g., hs_task_subject, hs_task_body, hs_task_type, hs_timestamp). ### Request Example ```json { "properties": { "hs_task_subject": "Follow up with lead", "hs_task_body": "Call to discuss next steps", "hs_task_type": "CALL", "hs_timestamp": "1640995200000" } } ``` ``` -------------------------------- ### Get Form Source: https://github.com/deco-cx/apps/blob/main/hubspot/README.md Retrieve a specific form by ID. ```APIDOC ## Get Form ### Description Retrieve a specific form by ID. ### Method GET ### Endpoint /marketing/forms/{formId} ### Parameters #### Path Parameters - **formId** (string) - Required - The ID of the form to retrieve. ### Request Example ```json { "formId": "form-uuid" } ``` ``` -------------------------------- ### Get Tickets Source: https://github.com/deco-cx/apps/blob/main/hubspot/README.md Retrieve support tickets with pagination. ```APIDOC ## Get Tickets ### Description Retrieve support tickets with pagination. ### Method Not specified (Loader) ### Endpoint Not specified (Loader) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **limit** (integer) - Optional - The maximum number of tickets to return (default: 25). - **properties** (array of strings) - Optional - A list of properties to include for each ticket. ### Request Example ```json { "limit": 25, "properties": ["subject", "hs_ticket_priority", "hubspot_owner_id"] } ``` ### Response #### Success Response (200) - **tickets** (array of objects) - A list of tickets. #### Response Example ```json { "tickets": [ { "id": "12345", "properties": { "subject": "Issue with login", "hs_ticket_priority": "HIGH", "hubspot_owner_id": "9876" } } ] } ``` ```