attio 0.0.1-experimental.20241112 → 0.0.1-experimental.20241209

package/lib/attio.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node --no-warnings=ExperimentalWarning
+#!/usr/bin/env node
 import Pastel from "pastel";
 const app = new Pastel({
     name: "attio",

package/lib/build/client/generate-client-entry.js

@@ -1,23 +1,9 @@
 import fs from "fs/promises";
 import path from "path";
+import { findSurfaceExports } from "../../util/find-surface-exports/find-surface-exports.js";
 const ASSET_FILE_EXTENSIONS = ["png"];
-export async function generateClientEntry({ srcDirAbsolute, assetsDirAbsolute, onAppFileFound, onAppFileMissing, }) {
-    let appFilePathAbsolute = null;
-    for (const possiblePath of ["tsx", "jsx", "ts", "js"].map((extension) => path.join(srcDirAbsolute, `app.${extension}`))) {
-        try {
-            await fs.access(possiblePath);
-            appFilePathAbsolute = possiblePath;
-            break;
-        }
-        catch {
-        }
-    }
-    if (appFilePathAbsolute) {
-        onAppFileFound();
-    }
-    else {
-        onAppFileMissing();
-    }
+export async function generateClientEntry({ srcDirAbsolute, assetsDirAbsolute, }) {
+    const surfaceExports = await findSurfaceExports(srcDirAbsolute);
     let assetFiles;
     try {
         assetFiles = await fs.readdir(assetsDirAbsolute, { recursive: true });
@@ -31,11 +17,28 @@ export async function generateClientEntry({ srcDirAbsolute, assetsDirAbsolute, o
         path: path.join(assetsDirAbsolute, relativeAssetPath),
         name: relativeAssetPath,
     }));
-    return `
-${appFilePathAbsolute ? `import ${JSON.stringify(appFilePathAbsolute)};` : ""}
-
-${assets.map((asset, index) => `import A${index} from ${JSON.stringify(asset.path)};`).join("\n")}
-
+    const importSurfacesJS = surfaceExports
+        .map(([filePath, actionKinds], index) => `import {${actionKinds
+        .map((actionKind) => `${actionKind} as ${actionKind}${index}`)
+        .join(", ")}} from ${JSON.stringify(filePath)};`)
+        .join("\n");
+    const surfaceImportNamesBySurfaceType = {
+        recordAction: [],
+        bulkRecordAction: [],
+    };
+    surfaceExports.forEach(([, surfaceNames], index) => {
+        surfaceNames.forEach((surfaceName) => {
+            surfaceImportNamesBySurfaceType[surfaceName].push(`${surfaceName}${index}`);
+        });
+    });
+    const registerSurfacesJS = `registerSurfaces({
+  "record-action": [${surfaceImportNamesBySurfaceType.recordAction.join(", ")}],
+  "bulk-record-action": [${surfaceImportNamesBySurfaceType.bulkRecordAction.join(", ")}],
+});`;
+    const importAssetsJS = assets
+        .map((asset, index) => `import A${index} from ${JSON.stringify(asset.path)};`)
+        .join("\n");
+    const registerAssetsJS = `
 const assets = [];
 
  ${assets
@@ -43,5 +46,14 @@ const assets = [];
         .join("\n")}
 
 registerAssets(assets);
+`;
+    return `
+${importSurfacesJS}
+
+${importAssetsJS}
+
+${registerSurfacesJS}
+
+${registerAssetsJS}
 `;
 }

package/lib/build.js

@@ -7,6 +7,7 @@ const buildErrorSchema = z.object({
         length: z.number(),
         line: z.number(),
         lineText: z.string(),
+        additionalLines: z.array(z.string()).optional(),
         namespace: z.string(),
         suggestion: z.string(),
     }),

package/lib/client/bulk-record-action.d.ts

@@ -0,0 +1,54 @@
+import { Icon } from "./icon";
+import { ObjectSlug } from "./object-slug";
+/**
+ * A bulk record action is some action that can be taken on a group of records,
+ *
+ * You should use this in a TypeScript file in your app's `src` directory.
+ *
+ * ## EXAMPLE USAGE
+ *
+ * ----
+ * ```tsx
+ * // my-bulk-record-action.tsx
+ * import type { BulkRecordAction } from "attio/client";
+ *
+ * export const bulkRecordAction: BulkRecordAction = {
+ *     id: "send-invoice",
+ *     onTrigger: (records) => {
+ *         console.log("send invoice", records)
+ *     },
+ *     label: "Send Invoice",
+ *     icon: "money-bag"
+ * }
+ * ```
+ * ----
+ */
+export interface BulkRecordAction {
+    /**
+     * A unique identifier for the action.
+     */
+    readonly id: string;
+    /**
+     * A function to execute when the action is triggered
+     */
+    readonly onTrigger: (records: {
+        recordIds: Array<string>;
+        object: ObjectSlug;
+    }) => Promise<void> | void;
+    /**
+     * The label to display for the action
+     */
+    readonly label: string;
+    /**
+     * An icon to display in the action, either an `AttioIcon` or
+     * a string `.png` referencing a file in your app's `assets`
+     * directory.
+     *
+     * If no `icon` prop is provided, it will default to your app's icon.
+     */
+    readonly icon?: Icon;
+    /**
+     * If provided then the action will only be shown on records of the specified object(s).
+     */
+    readonly objects?: ObjectSlug | Array<ObjectSlug>;
+}

package/lib/client/components/index.d.ts

@@ -1,7 +1,5 @@
-export { Action } from "./action.js";
 export { ComboboxOption, ComboboxOptionsProvider } from "./combobox.js";
 export { Json } from "./json.js";
-export { Multistep, Step } from "./multistep.js";
 export { Section } from "./section.js";
 export { TextBlock } from "./text-block.js";
 export { Row } from "./row.js";

package/lib/client/hooks/index.d.ts

@@ -1,6 +1,6 @@
 export { useAsyncCache, AsyncCacheConfig, AsyncFunction } from "./use-async-cache.js";
-export { useDialog } from "./use-dialog.js";
 export { useForm, FormApi, FormSchema } from "./use-form.js";
 export { useQuery } from "./use-query.js";
 export { useRecord } from "./use-record.js";
 export { useRecords } from "./use-records.js";
+export { useWorkspace } from "./use-workspace.js";

package/lib/client/hooks/use-workspace.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Get information about the Attio workspace.
+ */
+export declare function useWorkspace(): {
+    /**
+     * The name of the workspace.
+     */
+    workspaceName: string;
+    /**
+     * The slug of the workspace
+     */
+    workspaceSlug: string;
+};

package/lib/client/index.d.ts

@@ -9,9 +9,10 @@ export { FormString } from "./forms/string.js";
 export { FormValue } from "./forms/value.js";
 export * from "./forms/path.js";
 export { Icon, AttioIcon } from "./icon.js";
-export { registerRecordAction } from "./register-record-action.js";
-export { registerBulkRecordAction } from "./register-bulk-record-action.js";
 export { showToast, ToastOptions, ToastVariant } from "./show-toast.js";
 export { confirm, ConfirmOptions } from "./confirm.js";
 export { alert, AlertOptions } from "./alert.js";
 export { platform } from "./platform.js";
+export { showDialog, type Dialog } from "./show-dialog.js";
+export type { RecordAction } from "./record-action.js";
+export type { BulkRecordAction } from "./bulk-record-action.js";

package/lib/client/record-action.d.ts

@@ -0,0 +1,53 @@
+import { Icon } from "./icon";
+import { ObjectSlug } from "./object-slug";
+/**
+ * A record action is some action that can be taken on a record,
+ *
+ * You should use this in a TypeScript file in your app's `src` directory.
+ *
+ * ## EXAMPLE USAGE
+ *
+ * ----
+ * ```tsx
+ * // my-action.tsx
+ * import type { RecordAction } from "attio/client";
+ *
+ * export const recordAction: RecordAction = {
+ *     onTrigger: ({recordId, object}) => {
+ *         console.log("send invoice", recordId, object)
+ *     },
+ *     label: "Send Invoice",
+ *     icon: "money-bag"
+ * }
+ * ```
+ * ----
+ */
+export interface RecordAction {
+    /**
+     * A unique identifier for the action.
+     */
+    readonly id: string;
+    /**
+     * A function to execute when the action is triggered
+     */
+    readonly onTrigger: (record: {
+        recordId: string;
+        object: ObjectSlug;
+    }) => Promise<void>;
+    /**
+     * The label to display for the action
+     */
+    readonly label: string;
+    /**
+     * An icon to display in the action, either an `AttioIcon` or
+     * a string `.png` referencing a file in your app’s `assets`
+     * directory.
+     *
+     * If no `icon` prop is provided, it will default to your app’s icon.
+     */
+    readonly icon?: Icon;
+    /**
+     * If provided then the action will only be shown on records of the specified object(s).
+     */
+    readonly objects?: ObjectSlug | Array<ObjectSlug>;
+}

package/lib/client/show-dialog.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+export type Dialog = React.FC<{
+    hideDialog: () => void;
+}>;
+interface DialogOptions {
+    /**
+     * The title of the toast.
+     */
+    title: string;
+    /**
+     * The contents of the dialog.
+     */
+    Dialog: Dialog;
+}
+/**
+ * Opens a modal dialog.
+ *
+ * ## EXAMPLE USAGE
+ *
+ * ----
+ * ```tsx
+ * // show-dialog.tsx
+ * import { showDialog } from "attio/client";
+ *
+ * await showDialog({
+ *     title: "Invoice sent",
+ *     contents: ({hideDialog}) => <TextBlock>Hello world</TextBlock>,
+ * });
+ * ```
+ * ----
+ */
+export declare function showDialog(options: DialogOptions): Promise<void>;
+export {};

package/lib/client/show-toast.d.ts

@@ -11,7 +11,7 @@ export interface ToastOptions {
     /**
      * The text that will be displayed below the title.
      */
-    text: string;
+    text?: string;
     /**
      * An optional action to be displayed at the bottom of the toast.
      */

package/lib/commands/dev.js

@@ -12,6 +12,7 @@ import { renderTypeScriptErrors } from "../components/TypeScriptErrors.js";
 import { useFullScreen } from "../hooks/useFullScreen.js";
 import { useTerminalTitle } from "../hooks/useTerminalTitle.js";
 import { devMachine } from "../machines/dev-machine.js";
+import { Log } from "../components/Log.js";
 export const description = "Develop your Attio extension";
 const PrettyDate = ({ date }) => React.createElement(Text, null, format(date, "yyyy-MM-dd HH:mm:ss"));
 export const options = z.object({
@@ -75,6 +76,7 @@ export default function Dev({ options: { debug } }) {
                     " ",
                     React.createElement(PrettyDate, { date: snapshot.context.lastSuccessfulJavaScriptBuild }),
                     "."))),
+            React.createElement(Log, null),
             jsError && jsTime && (React.createElement(Box, null,
                 React.createElement(Text, null,
                     "\u274C Last failed build was at ",

package/lib/components/BuildError.js

@@ -31,7 +31,13 @@ const Error = React.forwardRef(({ message, level }, ref) => (React.createElement
                             message.location.lineText.trim().length -
                             message.location.lineText.length +
                             1 },
-                        React.createElement(Text, { color: "greenBright" }, "^")))))))));
+                        React.createElement(Text, { color: "greenBright" }, "^"))))),
+        message.location.additionalLines &&
+            message.location.additionalLines.slice(0, 2).map((line, index) => (React.createElement(Box, { key: `additional-line-${index}`, marginLeft: 4 },
+                React.createElement(Text, null,
+                    message.location.line + index + 1,
+                    " | ",
+                    line))))))));
 export function renderBuildErrors({ errors, warnings }) {
     return [
         ...(errors ?? []).map((error, index) => (React.createElement(Error, { key: `BuildError-${index}`, message: error, level: "error" }))),

package/lib/components/CodeGenErrors.js

@@ -11,12 +11,12 @@ export const CodeGenError = React.forwardRef(({ error }, ref) => {
                     " "),
                 " ",
                 React.createElement(Text, null, error.message))),
-        React.createElement(Box, { paddingTop: 1, flexDirection: "column" },
+        error.locations && (React.createElement(Box, { paddingTop: 1, flexDirection: "column" },
             React.createElement(Box, null,
                 React.createElement(Text, null, codeFrameColumns(error.source, {
                     start: {
                         line: error.locations[0].line,
                         column: error.locations[0].column,
                     },
-                }))))));
+                })))))));
 });

package/lib/components/Log.js

@@ -0,0 +1,69 @@
+import { Box, Text } from "ink";
+import React from "react";
+const emojis = {
+    log: "📝",
+    info: "💬",
+    warn: "🔸",
+    error: "🚨",
+};
+class GlobalLog {
+    constructor() {
+        this._messages = [];
+        this._listeners = new Map();
+        this._nextListenerId = 0;
+    }
+    notifyListeners() {
+        this._listeners.forEach((listener) => listener());
+    }
+    addMessage(level, messages) {
+        this._messages.push({
+            level,
+            message: messages
+                .map((message) => typeof message === "string"
+                ? message
+                : typeof message === "number"
+                    ? message.toString()
+                    : JSON.stringify(message, null, 2))
+                .join(" "),
+        });
+        this.notifyListeners();
+    }
+    log(...messages) {
+        this.addMessage("log", messages);
+    }
+    info(...messages) {
+        this.addMessage("info", messages);
+    }
+    warn(...messages) {
+        this.addMessage("warn", messages);
+    }
+    error(...messages) {
+        this.addMessage("error", messages);
+    }
+    clear() {
+        this._messages = [];
+        this.notifyListeners();
+    }
+    getMessages() {
+        return this._messages;
+    }
+    listen(listener) {
+        const id = this._nextListenerId++;
+        this._listeners.set(id, listener);
+        return () => this._listeners.delete(id);
+    }
+}
+const globalLog = new GlobalLog();
+export const log = (...messages) => globalLog.log(...messages);
+export const info = (...messages) => globalLog.info(...messages);
+export const warn = (...messages) => globalLog.warn(...messages);
+export const error = (...messages) => globalLog.error(...messages);
+export const Log = () => {
+    const messages = React.useSyncExternalStore(() => globalLog.listen(() => {
+    }), () => globalLog.getMessages(), () => []);
+    if (messages.length === 0)
+        return null;
+    return (React.createElement(Box, { flexDirection: "column", paddingY: 1 }, messages.map((message, index) => (React.createElement(Box, { key: index, flexDirection: "row", gap: 1 },
+        React.createElement(Text, null, emojis[message.level]),
+        React.createElement(Text, null, message.message))))));
+};

package/lib/machines/dev-machine.js

@@ -13,6 +13,7 @@ import { codeGenMachine } from "./code-gen-machine.js";
 import { envMachine } from "./env-machine.js";
 import { jsMachine } from "./js-machine.js";
 import { tsMachine } from "./ts-machine.js";
+import { error as logError } from "../components/Log.js";
 export const devMachine = setup({
     types: {
         context: {},
@@ -93,7 +94,7 @@ export const devMachine = setup({
                         body: clientBundle,
                         headers: {
                             "Content-Type": "text/javascript",
-                            "Content-Length": String(clientBundle.length),
+                            "Content-Length": String(Buffer.from(clientBundle).length),
                         },
                     }),
                     fetch(server_bundle_upload_url, {
@@ -101,10 +102,12 @@ export const devMachine = setup({
                         body: serverBundle,
                         headers: {
                             "Content-Type": "text/javascript",
-                            "Content-Length": String(serverBundle.length),
+                            "Content-Length": String(Buffer.from(serverBundle).length),
                         },
                     }),
-                ]);
+                ]).catch((error) => {
+                    logError("Upload Error", error);
+                });
                 await completeBundleUpload({
                     token,
                     developerSlug,

package/lib/machines/js-machine.js

@@ -25,9 +25,6 @@ export const jsMachine = setup({
                 const assetsDir = path.join(srcDir, "assets");
                 const webhooksDir = path.join(srcDir, "webhooks");
                 const eventsDir = path.join(srcDir, "events");
-                const log = (message) => {
-                    sendBack({ type: "Log", message });
-                };
                 buildContexts = (await Promise.all([
                     tmp.file({ postfix: ".js" }).then(async (tempFile) => {
                         let lastJS;
@@ -35,10 +32,6 @@ export const jsMachine = setup({
                             const js = await generateClientEntry({
                                 srcDirAbsolute: path.resolve(srcDir),
                                 assetsDirAbsolute: path.resolve(assetsDir),
-                                onAppFileMissing: () => {
-                                },
-                                onAppFileFound: () => {
-                                },
                             });
                             if (js === lastJS) {
                                 return;
@@ -75,7 +68,6 @@ export const jsMachine = setup({
                                 srcDirAbsolute: path.resolve(srcDir),
                                 webhooksDirAbsolute: path.resolve(webhooksDir),
                                 eventDirAbsolute: path.resolve(eventsDir),
-                                log,
                             });
                             if (js === lastJS) {
                                 return;

package/lib/server/attio-fetch.d.ts

@@ -0,0 +1,57 @@
+type Path = "/comments" | `/comments/${string}` | "/notes" | `/notes/${string}` | "/tasks" | `/tasks/${string}` | "/lists" | `/lists/${string}` | "/self" | "/objects" | "/objects/people/records" | "/objects/people/records/query" | `/objects/people/records/${string}` | "/objects/companies/records" | "/objects/companies/records/query" | `/objects/companies/records/${string}` | "/objects/users/records" | "/objects/users/records/query" | `/objects/users/records/${string}` | "/objects/deals/records" | "/objects/deals/records/query" | `/objects/deals/records/${string}` | "/objects/workspaces/records" | "/objects/workspaces/records/query" | `/objects/workspaces/records/${string}` | `/objects/${string & {
+    _brand?: "ObjectPath";
+}}` | "/threads" | `/threads/${string}` | "/webhooks" | `/webhooks/${string}` | "/workspace_members" | `/workspace_members/${string}` | (`/${string & {
+    length: number;
+}}${string}` & {
+    _brand?: "Path";
+});
+interface FetchAttioOptions {
+    /**
+     * The HTTP method to use.
+     */
+    method: "GET" | "POST" | "DELETE" | "PATCH";
+    /**
+     * The path to the resource to fetch.
+     */
+    path: Path;
+    /**
+     * The query parameters to use in the request.
+     */
+    queryParams?: Record<string, unknown>;
+    /**
+     * The body to use in the request.
+     *
+     * In the Attio API, this is always an object with the single key "data".
+     */
+    body?: {
+        data: Record<string, unknown>;
+    };
+}
+/**
+ * Communicates with the Attio API.
+ *
+ * See: https://developers.attio.com/reference
+ *
+ * ## EXAMPLE USAGE
+ *
+ * ----
+ * ```tsx
+ * import {attioFetch} from "attio/server"
+ *
+ * const notes = await attioFetch({
+ *     method: "GET",
+ *     path: "/notes",
+ * })
+ * ```
+ * ----
+ *
+ * ## RETURN VALUE
+ *
+ * The return value is the JSON response.
+ *
+ * @throws If the request is not successful.
+ */
+export declare function attioFetch(options: FetchAttioOptions): Promise<{
+    data: Record<string, unknown> | Array<Record<string, unknown>>;
+}>;
+export {};

package/lib/server/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./env";
 export * from "./connections";
 export * from "./webhook-handlers";
+export * from "./attio-fetch";

package/lib/templates/javascript/package.json

@@ -7,12 +7,14 @@
     "attio": "attio",
     "dev": "attio dev",
     "build": "attio build",
+    "format": "yarn run -T prettier --ignore-path $(yarn run -T find-up .prettierignore) --check ./",
+    "format-fix": "yarn run format --write ./",
     "clean": "rm -rf dist",
-    "lint": "eslint 'src/**/*.{js,jsx}'"
+    "lint": "ATTIO_LINT_MODE='exhaustive' eslint 'src/**/*.{js,jsx}'"
   },
   "devDependencies": {
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.2",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^4.6.2"
   },
   "dependencies": {

package/lib/templates/javascript/src/advice.jsx

@@ -0,0 +1,16 @@
+import React from "react"
+import {TextBlock, useAsyncCache} from "attio/client"
+import getAdvice from "./get-advice.server"
+
+export const Advice = ({recordId}) => {
+    // By passing in the recordId, the result will be cached for each recordId
+    const {
+        values: {advice},
+        //       ^^^^^^– this key matches
+        //             vvvvvv– this key
+    } = useAsyncCache({advice: [getAdvice, recordId]})
+    //                          ^^^^^^^^^  ^^^^^^^^
+    //                          async fn   parameter(s)
+
+    return <TextBlock align="center">{`"${advice}"`}</TextBlock>
+}

package/lib/templates/javascript/src/get-advice.server.js

@@ -0,0 +1,6 @@
+export default async function getAdvice(recordId) {
+    // We don't really need the recordId for this API, but this is how we could use a parameter
+    const response = await fetch(`https://api.adviceslip.com/advice?${recordId}`)
+    const data = await response.json()
+    return data.slip.advice
+}

package/lib/templates/javascript/src/hello-world-action.jsx

@@ -0,0 +1,17 @@
+import React from "react"
+import { showDialog } from "attio/client"
+import { HelloWorldDialog } from "./hello-world-dialog"
+
+export const recordAction = {
+    id: "slug-to-be-replaced",
+    label: "title-to-be-replaced",
+    onTrigger: async ({recordId}) => {
+      showDialog({
+        title: "title-to-be-replaced",
+        Dialog: () => {
+            // This is a React component. It can use hooks and render other components.
+            return <HelloWorldDialog recordId={recordId} />
+        }
+      })
+    },
+}

package/lib/templates/javascript/src/hello-world-dialog.jsx

@@ -0,0 +1,25 @@
+import React from "react"
+import {TextBlock} from "attio/client"
+import {Advice} from "./advice"
+
+const Loading = () => <TextBlock>Loading advice...</TextBlock>
+
+export function HelloWorldDialog ({recordId}) {
+    const [seconds, setSeconds] = React.useState(0)
+    React.useEffect(() => {
+        const timeout = setTimeout(() => setSeconds(seconds + 1), 1000)
+        return () => clearTimeout(timeout)
+    }, [seconds])
+
+    return (
+        <>
+            <TextBlock align="flex-start">
+                I am a dialog. I have been open for: {seconds} second{seconds === 1 ? "" : "s"}
+            </TextBlock>
+            {/* The hook in Advice will suspend until the advice is loaded. */}
+            <React.Suspense fallback={<Loading />}>
+                <Advice recordId={recordId} />
+            </React.Suspense>
+        </>
+    )
+}

package/lib/templates/typescript/package.json

@@ -7,15 +7,17 @@
     "attio": "attio",
     "dev": "attio dev",
     "build": "attio build",
+    "format": "yarn run -T prettier --ignore-path $(yarn run -T find-up .prettierignore) --check ./",
+    "format-fix": "yarn run format --write ./",
     "clean": "rm -rf lib && rm -rf dist",
-    "lint": "eslint \"src/**/*.{ts,tsx,js,tsx}\""
+    "lint": "ATTIO_LINT_MODE='exhaustive' eslint \"src/**/*.{ts,tsx,js,tsx}\""
   },
   "devDependencies": {
-    "@types/react": "18.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.2",
+    "@types/react": "~18.3.12",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "typescript": "5.4.5"
   },