attio 0.0.1-experimental.20241031 → 0.0.1-experimental.20241203.2

package/lib/api/handle-error.js

@@ -10,7 +10,7 @@ export async function handleError(response) {
     try {
         json = JSON.parse(text);
     }
-    catch (error) {
+    catch {
         throw new Error(`Error parsing JSON: ${JSON.stringify(text)}`);
     }
     const error = serverErrorSchema.parse(json);

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.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/client/alert.d.ts

@@ -0,0 +1,59 @@
+interface BaseAlertOptions {
+    /**
+     * Label for the "OK" button.
+     *
+     * Defaults to "OK".
+     * @default "OK"
+     */
+    okLabel?: string;
+}
+interface AlertWithNoTextOptions extends BaseAlertOptions {
+    /**
+     * The title of the prompt.
+     */
+    title: string;
+    /**
+     * No text will be displayed.
+     */
+    text?: never;
+}
+interface AlertNoTitleOptions extends BaseAlertOptions {
+    /**
+     * No title will be displayed.
+     */
+    title?: never;
+    /**
+     * Text to display.
+     */
+    text: string;
+}
+interface AlertWithTextAndTitleOptions extends BaseAlertOptions {
+    /**
+     * The title of the prompt.
+     */
+    title: string;
+    /**
+     * The text that will be displayed below the title.
+     */
+    text: string;
+}
+export type AlertOptions = AlertWithNoTextOptions | AlertNoTitleOptions | AlertWithTextAndTitleOptions;
+/**
+ * Shows an alert to the user.
+ *
+ * ## EXAMPLE USAGE
+ *
+ * ----
+ * ```tsx
+ * // app.tsx
+ * import { alert } from "attio/client";
+ *
+ * await alert({
+ *     title: "Insufficient privileges",
+ *     text: "You do not have permission to perform this action.",
+ * });
+ * ```
+ * ----
+ */
+export declare function alert(options: AlertOptions): Promise<void>;
+export {};

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/confirm.d.ts

@@ -0,0 +1,80 @@
+import { Icon } from "./icon";
+interface BaseConfirmOptions {
+    /**
+     * Label for the "Cancel" button.
+     *
+     * Defaults to "Cancel".
+     * @default "Cancel"
+     */
+    cancelLabel?: string;
+    /**
+     * Label for the "Confirm" button.
+     *
+     * Defaults to "OK".
+     * @default "OK"
+     */
+    confirmLabel?: string;
+    /**
+     * Icon to display on the confirm button.
+     */
+    confirmIcon?: Icon;
+    /**
+     * Variant of the "confirm" button.
+     *
+     * Defaults to "primary".
+     * @default "primary"
+     */
+    confirmVariant?: "primary" | "secondary" | "secondary-destructive" | "destructive";
+}
+interface ConfirmNoTextOptions extends BaseConfirmOptions {
+    /**
+     * Title of the prompt.
+     */
+    title: string;
+    /**
+     * No text will be displayed.
+     */
+    text?: never;
+}
+interface ConfirmNoTitleOptions extends BaseConfirmOptions {
+    /**
+     * No title will be displayed.
+     */
+    title?: never;
+    /**
+     * Text to display
+     */
+    text: string;
+}
+interface ConfirmWithTextAndTitleOptions extends BaseConfirmOptions {
+    /**
+     * Title of the prompt.
+     */
+    title: string;
+    /**
+     * Text to display below the title.
+     */
+    text: string;
+}
+export type ConfirmOptions = ConfirmNoTextOptions | ConfirmNoTitleOptions | ConfirmWithTextAndTitleOptions;
+/**
+ * Shows a confirm prompt to the user.
+ *
+ * ## EXAMPLE USAGE
+ *
+ * ----
+ * ```tsx
+ * // app.tsx
+ * import { showPrompt } from "attio/client";
+ *
+ * await confirm({
+ *     title: "Are you sure you want to delete this item?",
+ *     text: "This action cannot be undone.",
+ *     cancelLabel: "Cancel",
+ *     confirmLabel: "Delete",
+ * });
+ * ```
+ * ----
+ */
+export declare function confirm(options: ConfirmOptions): Promise<boolean>;
+export {};

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,7 +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/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))
+                .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

@@ -35,10 +35,6 @@ export const jsMachine = setup({
                             const js = await generateClientEntry({
                                 srcDirAbsolute: path.resolve(srcDir),
                                 assetsDirAbsolute: path.resolve(assetsDir),
-                                onAppFileMissing: () => {
-                                },
-                                onAppFileFound: () => {
-                                },
                             });
                             if (js === lastJS) {
                                 return;

package/lib/templates/javascript/package.json

@@ -7,13 +7,15 @@
     "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-plugin-react-hooks": "^4.6.2"
+    "eslint": "^8.57.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^4.5.0"
   },
   "dependencies": {
     "@eslint/eslintrc": "^3.1.0",

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>
+        </>
+    )
+}