# Connectors 01 - Connection list (`connectors-list-01`) - SignalOS page block

> Generic connector/connection list page composed from List View: status, resource count, inline error, and an overflow actions menu per row.

- **Version:** 0.3.3
- **Kind:** block (group: connectors) · **Category:** pages
- **Install:** `npx shadcn@latest add @signalos/connectors-list-01`
- **Registry dependencies (pulled automatically):** @signalos/tokens, @signalos/utils, @signalos/badge, @signalos/button, @signalos/checkbox, @signalos/dropdown-menu, @signalos/icon-button, @signalos/input, @signalos/list-view, @signalos/page-header, @signalos/select, @signalos/form-dialog
- **npm dependencies:** lucide-react@^1.7.0, class-variance-authority@^0.7.0
- **Files installed:** `src/components/blocks/connectors-list-01/ConnectorsList01.tsx`, `src/components/blocks/connectors-list-01/ConnectorsList01.types.ts`, `src/components/blocks/connectors-list-01/ConnectorsList01.constants.ts`, `src/components/blocks/connectors-list-01/ConnectorsList01.variants.ts`, `src/components/blocks/connectors-list-01/AddConnectionModal.tsx`, `src/components/blocks/connectors-list-01/AddConnectionModal.types.ts`, `src/components/blocks/connectors-list-01/Connectors.utils.ts`

## Access

This is a private registry: pulling source requires a `SIGNALOS_REGISTRY_TOKEN`
(GitHub fine-grained PAT with read access to the signal-widgets repo) and an
`@signalos` entry in components.json `"registries"`. Previews and this document are public.

## Usage

```tsx
// after: npx shadcn@latest add @signalos/connectors-list-01
// mount the pulled page in a route, e.g. src/app/connectors/page.tsx
import { ConnectorsList01 } from "@/components/blocks/connectors-list-01/ConnectorsList01"

export default function Page() {
  return <ConnectorsList01 />
}
```

## Props

### `ConnectorListItemStatus`

```ts
export type ConnectorListItemStatus =
  "active" | "inactive" | "error" | "discovering"
```

### `ConnectorListItemAction`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `label` | `string` | yes | - |  |
| `icon` | `ReactNode` | no | - |  |
| `destructive` | `boolean \| undefined` | no | - |  |
| `disabled` | `boolean \| undefined` | no | - |  |
| `onSelect` | `() => void` | yes | - |  |

### `ConnectorLike`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `id` | `string` | yes | - |  |
| `name` | `string` | yes | - |  |
| `subtitle` | `ReactNode` | no | - |  |
| `icon` | `ReactNode` | no | - |  |
| `status` | `ConnectorListItemStatus` | yes | - |  |
| `statusLabel` | `string \| undefined` | no | - |  |
| `resourceCount` | `number \| undefined` | no | - |  |
| `errorMessage` | `string \| undefined` | no | - |  |

### `ConnectorsList01Props`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `title` | `ReactNode` | no | `"Data Connector Hub"` |  |
| `description` | `ReactNode` | no | `"Unified interface for managing ingestion streams, cloud integrations, and Enterprise Resource Planning connections."` |  |
| `connectors` | `readonly TConnector[]` | yes | - |  |
| `loading` | `boolean \| undefined` | no | - |  |
| `error` | `boolean \| undefined` | no | - |  |
| `errorMessage` | `ReactNode` | no | - |  |
| `selectedId` | `string \| null \| undefined` | no | - |  |
| `onSelect` | `((connector: TConnector) => void) \| undefined` | no | - |  |
| `getActions` | `((connector: TConnector) => ConnectorListItemAction[]) \| undefined` | no | - |  |
| `disabledIds` | `readonly string[] \| undefined` | no | - |  |
| `emptyTitle` | `ReactNode` | no | - |  |
| `emptyDescription` | `ReactNode` | no | - |  |
| `className` | `string \| undefined` | no | - |  |
| `onConnectNew` | `(() => void) \| undefined` | no | - | Called when the "Connect New Source" header button is pressed. Use this when the caller owns the flow it opens (dialog, route, drawer). Fires in addition to opening the embedded dialog when `addConnection` is also set. The button renders disabled when neither this nor `addConnection` is provided. |
| `onRefresh` | `((connector: TConnector) => void) \| undefined` | no | - | Per-row refresh handler. When provided each row renders a refresh icon button that emits the connector; when omitted the button is not rendered. |
| `addConnection` | `(Omit<AddConnectionModalProps, "open" \| "onOpenChange"> & { onOpenChange?: ((open: boolean) => void) \| undefined; }) \| undefined` | no | - | When provided, enables the "Connect New Source" button and renders the embedded `AddConnectionModal`, forwarding these props verbatim. The block owns only the dialog's open/close state - all data fetching and submission logic stays with the caller. |
| `data-testid` | `string \| undefined` | no | - |  |

## Changelog

## 0.3.3

- Fix cross-item imports to use canonical @/components paths; add missing signalos.category to manifests.

# connectors-list-01

## 0.3.2

- Add optional `title` and `description` overrides so consumers can replace the
  hardcoded page copy, and a `data-testid` passthrough on the page header title.
  Defaults preserve the previous copy exactly, so this is additive.

## 0.3.1

- Update `data-testid` call sites for the renamed prop.

## 0.3.0

- Merge the two add-connection lineages into one coherent API: `onConnectNew`
  (event only - the caller owns the flow) and `addConnection` (renders the
  embedded `AddConnectionModal`) now work independently or together. The
  header button is enabled when either is provided.
- Fix the 0.1.2 release regression: restore the `onRefresh(connector)`
  signature (a duplicate `onRefresh(id)` declaration broke the build) and
  the conditional per-row refresh button with its testid and corrected
  "refresh" label.
- Title styling now comes from `page-header` defaults (local override
  removed).
- Source formatted with the repo prettier config.

## 0.1.2

- (Mis-versioned release - should have been 0.2.1.) Add an optional
  `addConnection` prop: when provided, renders the "Connect New Source"
  button and an `AddConnectionModal` built on the reusable
  `@signalos/form-dialog`. The block owns only the dialog's open/close
  state - all connector data fetching and submission logic stays with the
  caller.
- Fix `AddConnectionModal` to render from the `currentSpec` prop instead of a
  hardcoded FHIR connector spec, and remove leftover debug logging.

## 0.2.0

- Add `onConnectNew` - the "Connect New Source" button emits a click event
  and renders disabled when the callback is omitted. Button gains
  `data-testid="connect-new-source-button"`.
- Add `onRefresh(connector)` - each row renders a refresh icon button that
  emits the connector. When omitted the refresh button is not rendered.
- Fix refresh button accessible label typo ("refersh" → "refresh").

## 0.1.1

- Content sync fix to bring source in line with published registry payload.

## 0.1.0

- Initial release: connector list page composed from the shared `list-view`
  widget. Renders connector rows with status, resource count, inline error,
  and an overflow actions menu.