Custom connectors

type ComponentDefinition<TPublic extends boolean, TKey extends string> = {
  /** Unique programmatic key for this component. */
  key: TKey;
  /** Whether this component is available to all orgs (only Prismatic-managed public components use true). */
  public?: TPublic;
  /** How this component appears in the Prismatic UI. */
  display: ComponentDisplayDefinition<TPublic>;
  /** Named actions this component exposes. */
  actions?: Record<string, ActionDefinition<any, any, boolean, any>>;
  /** Named triggers this component exposes. */
  triggers?: Record<string, TriggerDefinition<any, any, boolean, any> | PollingTriggerDefinition<any, any, any, any, any, any>>;
  /** Named data sources this component exposes. */
  dataSources?: Record<string, DataSourceDefinition<any, any, any>>;
  /** Connection definitions used by this component's actions. */
  connections?: ConnectionDefinition[];
  /** Optional global hooks (e.g., a component-wide error handler). */
  hooks?: ComponentHooks;
  /** Documentation URL. Required for public Prismatic components; optional for custom. */
  documentationUrl?: string;
};

type ComponentDisplayDefinition<TPublic extends boolean> = {
  label: string;      // Human-readable name shown in the UI
  description: string; // Short description of what this connector does
  iconPath: string;   // Path to icon file relative to built source
  category?: string;  // Optional grouping category
};

import {
  component,
  action,
  input,
  connection,
} from "@prismatic-io/spectral";

const myConnection = connection({
  key: "myConnection",
  display: {
    label: "My API Connection",
    description: "Authenticate with My API using an API key",
  },
  inputs: {
    apiKey: {
      label: "API Key",
      type: "password",
      required: true,
      comments: "Your My API secret key",
    },
  },
});

const listItems = action({
  display: {
    label: "List Items",
    description: "Retrieve all items from My API",
  },
  inputs: {
    connection: input({
      label: "Connection",
      type: "connection",
      required: true,
    }),
    pageSize: input({
      label: "Page Size",
      type: "string",
      default: "50",
      comments: "Number of items to return per page",
    }),
  },
  perform: async (context, params) => {
    const apiKey = params.connection.fields.apiKey as string;
    const response = await fetch(
      `https://api.example.com/items?limit=${params.pageSize}`,
      { headers: { Authorization: `Bearer ${apiKey}` } }
    );
    const data = await response.json();
    return { data };
  },
});

export default component({
  key: "myComponent",
  display: {
    label: "My Component",
    description: "Connect to My API",
    iconPath: "icon.png",
  },
  actions: { listItems },
  connections: [myConnection],
});

my-component/
├── src/
│   ├── index.ts        # component() call — the entry point
│   ├── actions.ts      # action() definitions
│   ├── triggers.ts     # trigger() definitions
│   ├── dataSources.ts  # dataSource() definitions
│   ├── connections.ts  # connection() definitions
│   └── inputs.ts       # shared input() definitions
├── assets/
│   └── icon.png
├── package.json
└── tsconfig.json