attio 0.0.1-experimental.20250218 → 0.0.1-experimental.20250227

package/lib/api/get-app-info.js

@@ -0,0 +1,26 @@
+import { z } from "zod";
+import { API } from "../env.js";
+import { handleError } from "./handle-error.js";
+import { makeHeaders } from "./make-headers.js";
+const isTest = process.env.NODE_ENV === "test";
+const appSchema = z.object({
+    app: z
+        .object({
+        app_id: z.string().uuid(),
+        title: z.string(),
+    })
+        .nullable(),
+});
+export async function getAppInfo({ token, developerSlug, appSlug, }) {
+    if (isTest) {
+        return {
+            app_id: "test-id",
+            title: "Test App",
+        };
+    }
+    const response = await fetch(`${API}/developer-accounts/${developerSlug}/apps/by-slug/${appSlug}`, {
+        headers: makeHeaders(token),
+    });
+    await handleError(response);
+    return appSchema.parse(await response.json()).app;
+}

package/lib/attio.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { Command } from "commander";
-import { create } from "./commands/create.js";
+import { init } from "./commands/init.js";
 import { build } from "./commands/build.js";
 import { dev } from "./commands/dev.js";
 import { connection } from "./commands/connection/index.js";
@@ -10,7 +10,7 @@ program
     .name("attio")
     .description("CLI tool to create Attio apps")
     .version("0.0.1")
-    .addCommand(create, { isDefault: true })
+    .addCommand(init)
     .addCommand(build)
     .addCommand(dev)
     .addCommand(connection)

package/lib/build/client/create-client-build-config.js

@@ -14,6 +14,10 @@ export function createClientBuildConfig({ srcDir, entryPoint, }) {
                     varName: "ATTIO_CLIENT_EXTENSION_SDK",
                     type: "cjs",
                 },
+                "attio/shared": {
+                    varName: "ATTIO_SHARED_SDK",
+                    type: "cjs",
+                },
             }),
             proxyServerModulesPlugin({ srcDir }),
         ],

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

@@ -18,7 +18,7 @@ import { Attribute, ObjectSlug } from "./object-slug";
  *         console.log("send invoice", records)
  *     },
  *     label: "Send Invoice",
- *     icon: "money-bag"
+ *     icon: "Sales"
  * }
  * ```
  * ----

package/lib/client/components/attio-suspense.d.ts

@@ -3,5 +3,6 @@ import React from "react";
  * A component that wraps React.Suspense and provides Attio-specific error handling.
  *
  * @see https://react.dev/reference/react/Suspense
+ * @deprecated Just use React.Suspense directly.
  */
 export declare const AttioSuspense: typeof React.Suspense;

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

@@ -4,4 +4,4 @@ export { Section } from "./section.js";
 export { TextBlock } from "./text-block.js";
 export { Column } from "./column.js";
 export { Row } from "./row.js";
-export { AttioSuspense } from "./attio-suspense.js";
+export { Typography } from "./typography.js";

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

@@ -0,0 +1,29 @@
+import React from "react";
+/**
+ * A set of components for styling text.
+ */
+interface TypographyType {
+    Body: (props: {
+        /**
+         * The variant of the text.
+         *
+         * @default "standard"
+         */
+        variant?: "standard" | "large" | "strong" | "interactive";
+        children: React.ReactNode;
+    }) => React.JSX.Element;
+    Title: (props: {
+        /**
+         * The variant of the text.
+         *
+         * @default "standard"
+         */
+        variant?: "extraLarge" | "large" | "standard" | "medium" | "small" | "extraSmall";
+        children: React.ReactNode;
+    }) => React.JSX.Element;
+    Caption: (props: {
+        children: React.ReactNode;
+    }) => React.JSX.Element;
+}
+export declare const Typography: TypographyType;
+export {};

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

@@ -162,13 +162,6 @@ type CollectionItem = (props: {
 type SubmitButton = (props: {
     /** The label of the submit button */
     label: string;
-    /**
-     * Whether the submit button is disabled
-     *
-     * It will automatically become disabled while the form is submitting.
-     * You do not need to manage that state.
-     */
-    disabled?: boolean;
 }) => JSX.Element;
 export interface WithStateProps<TSchema extends FormSchema, TValues extends boolean = false, TSubmitting extends boolean = false, TErrors extends boolean = false> {
     values?: TValues;
@@ -225,10 +218,12 @@ export interface FormApi<TSchema extends FormSchema> {
     Combobox: Combobox<TSchema>;
     /**
      * A component used to render a collection of inputs.
+     * @deprecated This is not fully built yet.
      */
     Collection: Collection<TSchema, any>;
     /**
      * A component used to group inputs in a collection together.
+     * @deprecated This is not fully built yet.
      */
     CollectionItem: CollectionItem;
     /**

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

@@ -17,7 +17,7 @@ import { Attribute, ObjectSlug } from "./object-slug";
  *         console.log("send invoice", recordId, object)
  *     },
  *     label: "Send Invoice",
- *     icon: "money-bag"
+ *     icon: "Sales"
  * }
  * ```
  * ----

package/lib/commands/{create.js → init.js}

@@ -1,25 +1,23 @@
 import { Argument, Command, Option } from "commander";
 import { createActor } from "xstate";
 import { z } from "zod";
-import { createMachine } from "../machines/create-machine.js";
-export const argsSchema = z.string().optional().default("");
+import { initMachine } from "../machines/init-machine.js";
+export const argsSchema = z.string();
 export const optionsSchema = z.object({
-    title: z.string().optional(),
     language: z.enum(["javascript", "typescript"]).optional(),
     dev: z.boolean().default(false),
 });
-export const create = new Command("create")
-    .description("Create a new Attio app")
-    .addArgument(new Argument("<title>", 'Title of the extension (in "Title Case")').argOptional())
-    .addOption(new Option("--title <title>", 'Title of the extension (in "Title Case")'))
+export const init = new Command("init")
+    .description("Initialize a new Attio app")
+    .addArgument(new Argument("<app-slug>", "The app slug, chosen in the developer dashboard"))
     .addOption(new Option("--language <language>", "Language").choices(["javascript", "typescript"]))
     .addOption(new Option("--dev", "Run in development mode (additional debugging info)"))
     .action((unparsedArgs, unparsedOptions) => {
-    const args = argsSchema.parse(unparsedArgs);
+    const appSlug = argsSchema.parse(unparsedArgs);
     const options = optionsSchema.parse(unparsedOptions);
-    const actor = createActor(createMachine, {
+    const actor = createActor(initMachine, {
         input: {
-            title: options.title || args,
+            appSlug,
             language: options.language,
         },
     });

package/lib/machines/init-machine.js

@@ -0,0 +1,262 @@
+import { existsSync } from "fs";
+import Spinner from "tiny-spinner";
+import path, { join } from "path";
+import { fileURLToPath } from "url";
+import { assign, setup, fromCallback, fromPromise } from "xstate";
+import { copyWithTransform } from "../util/copy-with-replace.js";
+import { createDirectory } from "../util/create-directory.js";
+import { loadDeveloperConfig } from "../util/load-developer-config.js";
+import { canWrite } from "../util/validate-slug.js";
+import { ask, askWithChoices } from "./actors.js";
+import { showError, printLogo } from "./actions.js";
+import chalk from "chalk";
+import boxen from "boxen";
+import { printInstallInstructions } from "../util/print-install-instructions.js";
+import { getAppInfo } from "../api/get-app-info.js";
+export const languages = [
+    { name: "TypeScript (recommended)", value: "typescript" },
+    { name: "JavaScript", value: "javascript" },
+];
+export const initMachine = setup({
+    types: {
+        context: {},
+        events: {},
+        input: {},
+    },
+    actors: {
+        ask,
+        askWithChoices,
+        createProject: fromCallback(({ sendBack, input }) => {
+            const { appSlug, appInfo, language } = input;
+            const create = async () => {
+                const spinner = new Spinner();
+                try {
+                    if (existsSync(join(process.cwd(), appSlug))) {
+                        sendBack({
+                            type: "Error",
+                            error: `Directory "${appSlug}" already exists`,
+                        });
+                        return;
+                    }
+                    if (!canWrite(process.cwd())) {
+                        sendBack({
+                            type: "Error",
+                            error: "Write access denied to current directory",
+                        });
+                        return;
+                    }
+                    const __dirname = path.dirname(fileURLToPath(import.meta.url));
+                    const projectDir = createDirectory(appSlug);
+                    const templatesDir = path.resolve(__dirname, "../templates", language);
+                    const commonDir = path.resolve(__dirname, "../templates", "common");
+                    const transform = (contents) => contents
+                        .replaceAll("title-to-be-replaced", appInfo.title)
+                        .replaceAll("id-to-be-replaced", appInfo.app_id)
+                        .replaceAll("slug-to-be-replaced", appSlug);
+                    spinner.start("Creating project...");
+                    await Promise.all([
+                        copyWithTransform(templatesDir, projectDir, transform),
+                        copyWithTransform(commonDir, projectDir, transform),
+                    ]);
+                    spinner.success("Project created");
+                    sendBack({ type: "Success" });
+                }
+                catch (error) {
+                    spinner.error("Error creating project");
+                    sendBack({ type: "Error", error: error.message });
+                }
+            };
+            create();
+        }),
+        loadConfig: fromCallback(({ sendBack }) => {
+            const load = async () => {
+                const config = await loadDeveloperConfig();
+                if (typeof config === "string") {
+                    sendBack({ type: "No Config", configError: config });
+                    return;
+                }
+                sendBack({
+                    type: "Config Loaded",
+                    token: config.token,
+                    developerSlug: config.developer_slug,
+                });
+            };
+            load();
+        }),
+        loadAppInfo: fromPromise(async ({ input: { token, developerSlug, appSlug } }) => {
+            const spinner = new Spinner();
+            spinner.start("Loading app information...");
+            const appInfo = await getAppInfo({ token, developerSlug, appSlug });
+            if (appInfo === null) {
+                spinner.error("App not found");
+                return null;
+            }
+            spinner.success(`App found: ${appInfo.title}`);
+            return appInfo;
+        }),
+    },
+    actions: {
+        printLogo,
+        clearError: assign({
+            error: () => undefined,
+        }),
+        showError,
+        showConfigInstructions: ({ context: { configError } }) => {
+            printInstallInstructions(configError);
+        },
+        showInstructions: (_, params) => {
+            process.stdout.write("\n" + chalk.green(`SUCCESS!! 🎉 Your app directory has been created.`) + "\n");
+            process.stdout.write("\nTo get started, run:\n");
+            process.stdout.write(boxen(`cd ${params.appSlug}\nnpm install\nnpm run dev`, {
+                padding: 1,
+                margin: 1,
+                borderStyle: "round",
+            }) + "\n");
+            process.stdout.write(`(${chalk.yellow("yarn")}, ${chalk.yellow("pnpm")}, and ${chalk.yellow("bun")} also work!)\n`);
+        },
+        setLanguage: assign({
+            language: (_, params) => params.output,
+        }),
+        setAppInfo: assign({
+            appInfo: (_, params) => params.appInfo,
+        }),
+        setConfig: assign({
+            token: (_, params) => params.token,
+            developerSlug: (_, params) => params.developerSlug,
+        }),
+        setConfigError: assign({
+            configError: (_, params) => params.configError,
+        }),
+    },
+    guards: {
+        "app exists": (_, params) => Boolean(params.output),
+        "have language": (_, params) => Boolean(params.language),
+    },
+}).createMachine({
+    context: ({ input }) => ({
+        availablePackageManagers: ["npm"],
+        developerSlug: "",
+        appId: "",
+        token: "",
+        ...input,
+    }),
+    id: "Init Machine",
+    states: {
+        "Ask for language": {
+            invoke: {
+                src: "askWithChoices",
+                input: {
+                    message: "What language would you like to use?",
+                    choices: languages,
+                },
+                onDone: {
+                    target: "Creating Project",
+                    actions: {
+                        type: "setLanguage",
+                        params: ({ event }) => event,
+                    },
+                    reenter: true,
+                },
+            },
+        },
+        "Creating Project": {
+            on: {
+                Error: {
+                    target: "Error",
+                    actions: { type: "showError", params: ({ event }) => event },
+                },
+                Success: {
+                    target: "Success",
+                    reenter: true,
+                },
+            },
+            invoke: {
+                src: "createProject",
+                input: ({ context }) => ({
+                    language: context.language,
+                    appInfo: context.appInfo,
+                    appSlug: context.appSlug,
+                }),
+            },
+        },
+        "Error": {
+            type: "final",
+        },
+        "Success": {
+            type: "final",
+            entry: {
+                type: "showInstructions",
+                params: ({ context }) => ({
+                    appSlug: context.appSlug,
+                    title: context.appInfo.title,
+                }),
+            },
+        },
+        "Do we need language?": {
+            always: [
+                {
+                    target: "Creating Project",
+                    guard: { type: "have language", params: ({ context }) => context },
+                    reenter: true,
+                    description: `language may have been provided by CLI option`,
+                },
+                "Ask for language",
+            ],
+        },
+        "Loading App Info": {
+            invoke: [
+                {
+                    src: "loadAppInfo",
+                    input: ({ context }) => context,
+                    onDone: [
+                        {
+                            target: "Do we need language?",
+                            guard: { type: "app exists", params: ({ event }) => event },
+                            actions: {
+                                type: "setAppInfo",
+                                params: ({ event }) => ({ appInfo: event.output }),
+                            },
+                        },
+                        {
+                            target: "Error",
+                            reenter: true,
+                        },
+                    ],
+                    onError: {
+                        target: "Error",
+                        actions: {
+                            type: "showError",
+                            params: ({ event }) => ({
+                                error: event.error instanceof Error
+                                    ? event.error.message
+                                    : String(event.error),
+                            }),
+                        },
+                    },
+                },
+            ],
+        },
+        "Load Config": {
+            on: {
+                "No Config": {
+                    target: "Show config instructions",
+                    actions: { type: "setConfigError", params: ({ event }) => event },
+                },
+                "Config Loaded": {
+                    target: "Loading App Info",
+                    actions: { type: "setConfig", params: ({ event }) => event },
+                    reenter: true,
+                },
+            },
+            invoke: {
+                src: "loadConfig",
+            },
+        },
+        "Show config instructions": {
+            type: "final",
+            entry: "showConfigInstructions",
+        },
+    },
+    initial: "Load Config",
+    entry: "printLogo",
+});

package/lib/server/connections.d.ts

@@ -1,33 +1,29 @@
-export interface Connection {
+interface BaseConnection {
     /** The unique identifier for the connection. */
     id: string;
     /** The access token or secret for the connection. */
     value: string;
-    ownedBy: {
-        type: "workspace" | "user";
-        /**
-         * Workspace ID or user ID
-         */
+    createdBy: {
+        type: "user";
+        /** User ID */
         id: string;
     };
-    createdBy: {
+}
+interface UserConnection extends BaseConnection {
+    ownedBy: {
         type: "user";
-        /**
-         * User ID
-         */
+        /** User ID */
+        id: string;
+    };
+}
+interface WorkspaceConnection extends BaseConnection {
+    ownedBy: {
+        type: "workspace";
+        /** Workspace ID */
         id: string;
     };
 }
-/**
- * Gets the access token or secret for a connection by id.
- *
- * @returns An object containing the connection's id, access token or secret,
- * and slug, or null if the connection is not found.
- */
-export declare function getConnectionById(
-/**
- * The unique identifier for the connection.
- */
-id: string): Connection | null;
-export declare function getUserConnection(): Connection | null;
-export declare function getWorkspaceConnection(): Connection | null;
+export type Connection = UserConnection | WorkspaceConnection;
+export declare function getUserConnection(): UserConnection;
+export declare function getWorkspaceConnection(): WorkspaceConnection;
+export {};

package/lib/shared/errors.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Reserved for internal errors that are thrown by the extension SDK.
+ */
+export declare abstract class AttioError extends Error {
+    static is(error: unknown): error is AttioError;
+    abstract get code(): "no-user-connection" | "no-workspace-connection" | "unexpected-transport-error";
+}
+/**
+ * Thrown when there is a missing user connection.
+ */
+export declare class AttioNoUserConnectionError extends AttioError {
+    constructor();
+    static is(error: unknown): error is AttioNoUserConnectionError;
+    get code(): "no-user-connection";
+}
+/**
+ * Thrown when there is a missing workspace connection.
+ */
+export declare class AttioNoWorkspaceConnectionError extends AttioError {
+    constructor();
+    static is(error: unknown): error is AttioNoWorkspaceConnectionError;
+    get code(): "no-workspace-connection";
+}
+/**
+ * Thrown when there is an unexpected transport error.
+ */
+export declare class AttioUnexpectedTransportError extends AttioError {
+    constructor();
+    static is(error: unknown): error is AttioUnexpectedTransportError;
+    get code(): "unexpected-transport-error";
+}

package/lib/shared/index.d.ts

@@ -0,0 +1 @@
+export * from "./errors.js";

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

@@ -1,5 +1,5 @@
 import React from "react"
-import {TextBlock, AttioSuspense} from "attio/client"
+import {TextBlock} from "attio/client"
 import {Advice} from "./advice"
 
 const Loading = () => <TextBlock>Loading advice...</TextBlock>
@@ -17,9 +17,9 @@ export function HelloWorldDialog ({recordId}) {
                 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. */}
-            <AttioSuspense fallback={<Loading />}>
+            <React.Suspense fallback={<Loading />}>
                 <Advice recordId={recordId} />
-            </AttioSuspense>
+            </React.Suspense>
         </>
     )
 }

package/lib/templates/typescript/src/hello-world-dialog.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import {TextBlock, AttioSuspense} from "attio/client"
+import {TextBlock} from "attio/client"
 import {Advice} from "./advice"
 
 const Loading = () => <TextBlock>Loading advice...</TextBlock>
@@ -17,9 +17,9 @@ export function HelloWorldDialog({recordId}: {recordId: string}) {
                 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. */}
-            <AttioSuspense fallback={<Loading />}>
+            <React.Suspense fallback={<Loading />}>
                 <Advice recordId={recordId} />
-            </AttioSuspense>
+            </React.Suspense>
         </>
     )
 }