Integrations Directory

blockdevops

App marketplace surface: functional search, category chips with counts and an installed-only switch above a responsive grid of integration cards (logo tile, one-line blurb, author row, install/connected footer). Clicking a card opens a detail dialog with permissions; pass `featuredId` to render that dialog body as an always-visible panel. Stateful demo — swap the stub catalog for your source.

Installation

$pnpm dlx uipkge-ng@latest add integrations-directory

$npx uipkge-ng@latest add integrations-directory

$yarn dlx uipkge-ng@latest add integrations-directory

$bunx uipkge-ng@latest add integrations-directory

Manifest:https://uipkge.dev/r/angular/integrations-directory.jsonInstalls to:src/app/components/blocks/integrations-directory/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

Integration

interface Integration {
  id: string
  name: string
  description: string
  /** Longer paragraph shown in the detail view. */
  detail: string
  category: CategoryId
  author: string
  /** Lucide glyph standing in for the product logo. */
  icon: unknown
  connected?: boolean
  permissions: string[]
}

npm dependencies

lucide-angular

Includes

badge button chip dialog empty-state input switch

Files installed (2)

src/app/components/blocks/integrations-directory/integrations-directory.component.ts19.9 kB

// App marketplace surface: functional search, category chips with counts and an
// installed-only switch above a responsive grid of integration cards (logo tile,
// one-line blurb, author row, install/connected footer). Clicking a card opens a
// detail dialog with permissions; pass `featuredId` to render that dialog body as
// an always-visible panel. Stateful — swap the stub catalog for your source.
// Port of the React block 1:1.
import { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'
import {
  BarChart3,
  Check,
  Container,
  CreditCard,
  LineChart,
  LucideAngularModule,
  Mail,
  MessageSquare,
  Radar,
  Receipt,
  ScrollText,
  Search,
  SearchX,
} from 'lucide-angular'
import { cn } from '@/lib/utils'
import { UiBadgeComponent } from '@/ui/badge/badge.component'
import { UiButtonComponent } from '@/ui/button/button.component'
import { UiChipComponent } from '@/ui/chip/chip.component'
import {
  UiDialogComponent,
  UiDialogContentComponent,
  UiDialogDescriptionComponent,
  UiDialogHeaderComponent,
  UiDialogTitleComponent,
} from '@/ui/dialog/dialog.component'
import { UiEmptyStateComponent } from '@/ui/empty-state/empty-state.component'
import { UiInputComponent } from '@/ui/input/input.component'
import { UiSwitchComponent } from '@/ui/switch/switch.component'

export type CategoryId = 'analytics' | 'devops' | 'communication' | 'billing'
export type CategoryFilter = 'all' | CategoryId

export interface Integration {
  id: string
  name: string
  description: string
  /** Longer paragraph shown in the detail view. */
  detail: string
  category: CategoryId
  author: string
  /** Lucide glyph standing in for the product logo. */
  icon: unknown
  connected?: boolean
  permissions: string[]
}

const CATEGORIES: { id: CategoryFilter; label: string }[] = [
  { id: 'all', label: 'All' },
  { id: 'analytics', label: 'Analytics' },
  { id: 'devops', label: 'DevOps' },
  { id: 'communication', label: 'Communication' },
  { id: 'billing', label: 'Billing' },
]

const STUB_INTEGRATIONS: Integration[] = [
  {
    id: 'pulseboard',
    name: 'Pulseboard',
    description: 'Funnels, retention curves and cohort exploration for product teams.',
    detail:
      'Pulseboard plugs into your event stream and turns raw activity into funnels, retention curves and cohort views. Dashboards sync hourly, and annotations push back into your workspace so launches stay marked on every chart.',
    category: 'analytics',
    author: 'Pulseboard Labs',
    icon: BarChart3,
    connected: true,
    permissions: ['Read workspace profile', 'Read dashboards and events', 'Create annotations and highlights'],
  },
  {
    id: 'metrica',
    name: 'Metrica',
    description: 'Privacy-friendly web metrics with no cookie banner required.',
    detail:
      'Metrica collects pageviews and referrers without cookies or personal data, so sites stay compliant out of the box. Live visitor counts, entry pages and campaign attribution arrive as lightweight embeds or a full dashboard.',
    category: 'analytics',
    author: 'Metrica Inc.',
    icon: LineChart,
    permissions: ['Read site metadata', 'Record aggregate pageviews'],
  },
  {
    id: 'shipyard',
    name: 'Shipyard',
    description: 'Zero-config preview environments for every pull request.',
    detail:
      'Shipyard builds an isolated environment for each pull request, complete with seeded databases and shareable URLs. Deploys post status checks back to your repository, and idle previews sleep automatically to keep costs flat.',
    category: 'devops',
    author: 'Shipyard Systems',
    icon: Container,
    connected: true,
    permissions: ['Read pull requests and statuses', 'Create deployment check runs', 'Publish preview URLs'],
  },
  {
    id: 'watchtower',
    name: 'Watchtower',
    description: 'Uptime, SSL and domain monitoring with on-call escalations.',
    detail:
      'Watchtower probes your endpoints from twelve regions and escalates incidents through on-call schedules when thresholds break. SSL expiry, DNS drift and port changes are tracked alongside uptime so surprises surface early.',
    category: 'devops',
    author: 'Northwind Ops',
    icon: Radar,
    permissions: ['Read incident history', 'Register webhook endpoints', 'Send alert notifications'],
  },
  {
    id: 'loghound',
    name: 'Loghound',
    description: 'Structured log search across every service and region.',
    detail:
      'Loghound ingests structured logs from every service, indexes them in seconds and supports SQL-ish queries with saved views. Tail live streams during deploys and pipe matched events straight into your alerting rules.',
    category: 'devops',
    author: 'Houndworks',
    icon: ScrollText,
    permissions: ['Read log streams', 'Create saved queries', 'Forward events to webhooks'],
  },
  {
    id: 'chatterbox',
    name: 'Chatterbox',
    description: 'Team chat with threads, huddles and shared channels.',
    detail:
      'Chatterbox keeps conversations organized with threaded channels, quick huddles and shared external channels. Bots receive messages through webhooks and can post rich updates, keeping build and incident feeds where the team already works.',
    category: 'communication',
    author: 'Chatterbox Co.',
    icon: MessageSquare,
    permissions: ['Read channel names and topics', 'Post messages as the app', 'Upload notification files'],
  },
  {
    id: 'mailroom',
    name: 'Mailroom',
    description: 'Transactional email with templates and delivery insights.',
    detail:
      'Mailroom sends transactional email from versioned templates with per-recipient variables. Delivery webhooks report bounces, complaints and opens, and suppression lists keep problematic addresses out of future sends.',
    category: 'communication',
    author: 'Mailroom Ltd.',
    icon: Mail,
    permissions: ['Send email on your behalf', 'Read delivery and bounce events', 'Manage suppression list'],
  },
  {
    id: 'ledgerly',
    name: 'Ledgerly',
    description: 'Invoicing, tax handling and revenue recognition in one flow.',
    detail:
      'Ledgerly generates invoices from your billing events, applies regional tax rules automatically and reconciles payments against your ledger. Revenue schedules export to your accounting package month by month.',
    category: 'billing',
    author: 'Ledgerly Inc.',
    icon: Receipt,
    permissions: ['Read customer records', 'Create and send invoices', 'Read payment statuses'],
  },
  {
    id: 'billfold',
    name: 'Billfold',
    description: 'Subscription management and dunning recovery built in.',
    detail:
      'Billfold manages plans, proration and trial conversions with hosted checkout and self-serve portals. Smart retries and expiry reminders recover failed payments before customers ever notice.',
    category: 'billing',
    author: 'Billfold Labs',
    icon: CreditCard,
    permissions: ['Read subscription states', 'Start checkout sessions', 'Send payment reminders'],
  },
]

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-integrations-directory, [ui-integrations-directory]',
  standalone: true,
  // React renders the root <div> itself: the host stays out of layout and `class` goes to the root.
  host: { '[attr.class]': '"contents"' },
  imports: [
    LucideAngularModule,
    UiBadgeComponent,
    UiButtonComponent,
    UiChipComponent,
    UiDialogComponent,
    UiDialogContentComponent,
    UiDialogDescriptionComponent,
    UiDialogHeaderComponent,
    UiDialogTitleComponent,
    UiEmptyStateComponent,
    UiInputComponent,
    UiSwitchComponent,
  ],
  template: `
    <div data-slot="integrations-directory" [class]="rootClass">
      <!-- Toolbar -->
      <div class="space-y-3">
        <div class="flex flex-wrap items-center gap-3">
          <ui-input
            [value]="query()"
            (valueChange)="query.set($event)"
            class="min-w-56 flex-1"
            placeholder="Search integrations…"
            aria-label="Search integrations"
            [prefixIcon]="searchIcon"
          />
          <ng-template #searchIcon>
            <lucide-icon [img]="Search" class="size-4" />
          </ng-template>
          <div class="ml-auto flex items-center gap-2">
            <button
              ui-switch
              size="sm"
              aria-label="Show installed integrations only"
              [checked]="installedOnly()"
              (checkedChange)="installedOnly.set($event)"
            ></button>
            <span class="text-muted-foreground text-sm select-none">Installed</span>
          </div>
        </div>
        <div class="flex flex-wrap items-center gap-1.5">
          @for (c of allCategories; track c.id) {
            <button
              type="button"
              class="focus-visible:ring-ring rounded-full focus-visible:ring-2 focus-visible:outline-none"
              [attr.aria-pressed]="category() === c.id"
              (click)="category.set(c.id)"
            >
              <span ui-chip [variant]="category() === c.id ? 'filled' : 'outline'" size="sm">
                {{ c.label }}
                <span class="tabular-nums opacity-70">{{ counts()[c.id] ?? 0 }}</span>
              </span>
            </button>
          }
        </div>
      </div>

      <!-- Featured detail panel (always-visible variant of the dialog body) -->
      @if (featured(); as panel) {
        <section
          data-slot="integration-detail-panel"
          class="bg-card space-y-4 rounded-xl border p-6 shadow-sm"
          aria-label="Integration details"
        >
          <div class="flex items-start gap-4">
            <span
              class="bg-primary/10 text-primary flex size-14 shrink-0 items-center justify-center rounded-xl"
              aria-hidden="true"
            >
              <lucide-icon [img]="$any(panel.icon)" class="size-7" />
            </span>
            <div class="min-w-0">
              <h2 class="text-base font-semibold tracking-tight">{{ panel.name }}</h2>
              <div class="mt-1.5 flex flex-wrap items-center gap-1.5">
                <span ui-chip variant="outline" size="sm">{{ categoryLabel(panel.category) }}</span>
                <span class="text-muted-foreground text-xs">by {{ panel.author }}</span>
              </div>
            </div>
          </div>
          <p class="text-muted-foreground text-sm leading-relaxed">{{ panel.detail }}</p>
          <div>
            <p class="text-muted-foreground text-xs font-semibold tracking-widest uppercase">Permissions</p>
            <ul class="mt-2 space-y-1.5">
              @for (p of panel.permissions; track p) {
                <li class="flex items-start gap-2 text-sm">
                  <lucide-icon [img]="Check" class="text-success mt-0.5 size-4 shrink-0" aria-hidden="true" />
                  <span>{{ p }}</span>
                </li>
              }
            </ul>
          </div>
          <div class="border-border flex items-center gap-2 border-t pt-4">
            @if (panel.connected) {
              <span ui-badge variant="success"> <lucide-icon [img]="Check" aria-hidden="true" /> Connected </span>
              <button ui-button variant="ghost" size="sm" class="ml-auto" (click)="disconnect(panel.id)">
                Disconnect
              </button>
            } @else {
              <button ui-button class="w-full" (click)="install(panel.id)">Install</button>
            }
          </div>
        </section>
      }

      <!-- Results -->
      @if (visible().length > 0) {
        <p class="text-muted-foreground text-xs tabular-nums">
          Showing {{ visible().length }} of {{ items().length }} integrations
        </p>
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          @for (item of visible(); track item.id) {
            <article
              data-slot="integration-card"
              class="bg-card hover:border-ring/50 relative flex flex-col gap-3 rounded-xl border p-5 shadow-sm transition-colors hover:shadow-md"
            >
              <button
                type="button"
                class="focus-visible:ring-ring/50 absolute inset-0 rounded-xl focus-visible:ring-2 focus-visible:outline-none"
                [attr.aria-label]="'View ' + item.name + ' details'"
                (click)="openDetail(item.id)"
              ></button>
              <div class="flex items-start justify-between gap-2">
                <span
                  class="bg-primary/10 text-primary flex size-10 shrink-0 items-center justify-center rounded-lg"
                  aria-hidden="true"
                >
                  <lucide-icon [img]="$any(item.icon)" class="size-5" />
                </span>
                <span ui-chip variant="outline" size="sm">{{ categoryLabel(item.category) }}</span>
              </div>
              <div>
                <p class="text-sm font-semibold tracking-tight">{{ item.name }}</p>
                <p class="text-muted-foreground mt-0.5 truncate text-xs">{{ item.description }}</p>
              </div>
              <div class="flex items-center gap-2">
                <span
                  class="bg-muted text-muted-foreground flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-medium"
                  aria-hidden="true"
                >
                  {{ initials(item.author) }}
                </span>
                <span class="text-muted-foreground truncate text-xs">{{ item.author }}</span>
              </div>
              <div class="border-border relative mt-auto flex items-center gap-2 border-t pt-3">
                @if (item.connected) {
                  <span ui-badge variant="success"> <lucide-icon [img]="Check" aria-hidden="true" /> Connected </span>
                  <button
                    ui-button
                    variant="ghost"
                    size="xs"
                    class="ml-auto"
                    (click)="$event.stopPropagation(); disconnect(item.id)"
                  >
                    Disconnect
                  </button>
                } @else {
                  <button ui-button size="sm" class="w-full" (click)="$event.stopPropagation(); install(item.id)">
                    Install
                  </button>
                }
              </div>
            </article>
          }
        </div>
      } @else {
        <!-- Empty state -->
        <div class="rounded-xl border border-dashed">
          <ng-template #emptyIcon>
            <lucide-icon [img]="SearchX" />
          </ng-template>
          <ui-empty-state
            title="No integrations found"
            description="Nothing matches your current search and filters."
            [icon]="emptyIcon"
          >
            <button ui-button variant="outline" size="sm" class="mt-4" (click)="clearFilters()">Clear filters</button>
          </ui-empty-state>
        </div>
      }

      <!-- Detail dialog -->
      <ui-dialog [open]="detailOpen()" (openChange)="onDetailOpenChange($event)">
        @if (activeDetail(); as detail) {
          <ui-dialog-content class="sm:max-w-md">
            <div ui-dialog-header>
              <div class="flex items-start gap-4">
                <span
                  class="bg-primary/10 text-primary flex size-14 shrink-0 items-center justify-center rounded-xl"
                  aria-hidden="true"
                >
                  <lucide-icon [img]="$any(detail.icon)" class="size-7" />
                </span>
                <div class="min-w-0">
                  <h2 ui-dialog-title class="text-base tracking-tight">{{ detail.name }}</h2>
                  <div class="mt-1.5 flex flex-wrap items-center gap-1.5">
                    <span ui-chip variant="outline" size="sm">{{ categoryLabel(detail.category) }}</span>
                    <span class="text-muted-foreground text-xs">by {{ detail.author }}</span>
                  </div>
                </div>
              </div>
            </div>
            <p ui-dialog-description class="leading-relaxed">{{ detail.detail }}</p>
            <div>
              <p class="text-muted-foreground text-xs font-semibold tracking-widest uppercase">Permissions</p>
              <ul class="mt-2 space-y-1.5">
                @for (p of detail.permissions; track p) {
                  <li class="flex items-start gap-2 text-sm">
                    <lucide-icon [img]="Check" class="text-success mt-0.5 size-4 shrink-0" aria-hidden="true" />
                    <span>{{ p }}</span>
                  </li>
                }
              </ul>
            </div>
            <div class="border-border flex items-center gap-2 border-t pt-4">
              @if (detail.connected) {
                <span ui-badge variant="success"> <lucide-icon [img]="Check" aria-hidden="true" /> Connected </span>
                <button ui-button variant="ghost" size="sm" class="ml-auto" (click)="disconnect(detail.id)">
                  Disconnect
                </button>
              } @else {
                <button ui-button class="w-full" (click)="install(detail.id)">Install</button>
              }
            </div>
          </ui-dialog-content>
        }
      </ui-dialog>
    </div>
  `,
})
export class UiIntegrationsDirectoryComponent {
  protected readonly Check = Check
  protected readonly Search = Search
  protected readonly SearchX = SearchX

  protected readonly allCategories = CATEGORIES

  /** Replace the built-in stub catalog. */
  @Input() set integrations(v: Integration[] | undefined) {
    this.items.set((v ?? STUB_INTEGRATIONS).map((i) => ({ ...i, permissions: [...i.permissions] })))
  }
  @Input() set initialQuery(v: string) {
    this.query.set(v ?? '')
  }
  @Input() set initialCategory(v: CategoryFilter) {
    this.category.set(v ?? 'all')
  }
  @Input() set initialInstalledOnly(v: boolean) {
    this.installedOnly.set(!!v)
  }
  /** Render this integration's detail body as an always-visible panel (docs/story aid). */
  @Input() featuredId?: string
  @Input('class') className?: string

  readonly items = signal<Integration[]>(STUB_INTEGRATIONS.map((i) => ({ ...i, permissions: [...i.permissions] })))
  readonly query = signal('')
  readonly category = signal<CategoryFilter>('all')
  readonly installedOnly = signal(false)
  readonly detailId = signal<string | null>(null)
  readonly detailOpen = signal(false)

  readonly counts = computed(() => {
    const acc: Record<string, number> = {}
    for (const c of CATEGORIES) acc[c.id] = 0
    for (const i of this.items()) acc[i.category] = (acc[i.category] ?? 0) + 1
    return acc
  })

  readonly visible = computed(() => {
    const q = this.query().trim().toLowerCase()
    const cat = this.category()
    const installed = this.installedOnly()
    return this.items().filter((i) => {
      if (cat !== 'all' && i.category !== cat) return false
      if (installed && !i.connected) return false
      if (!q) return true
      const hay = `${i.name} ${i.description} ${i.author} ${this.categoryLabel(i.category)}`.toLowerCase()
      return hay.includes(q)
    })
  })

  readonly featured = computed(() => {
    const id = this.featuredId
    if (!id) return null
    return this.items().find((i) => i.id === id) ?? null
  })

  readonly activeDetail = computed(() => {
    const id = this.detailId()
    if (!id) return null
    return this.items().find((i) => i.id === id) ?? null
  })

  get rootClass(): string {
    return cn('space-y-4', this.className)
  }

  categoryLabel(id: CategoryId): string {
    return CATEGORIES.find((c) => c.id === id)?.label ?? id
  }

  initials(author: string): string {
    return author
      .split(/\s+/)
      .slice(0, 2)
      .map((w) => w[0]?.toUpperCase() ?? '')
      .join('')
  }

  openDetail(id: string): void {
    this.detailId.set(id)
    this.detailOpen.set(true)
  }

  onDetailOpenChange(open: boolean): void {
    this.detailOpen.set(open)
  }

  setConnected(id: string, connected: boolean): void {
    this.items.update((prev) => prev.map((i) => (i.id === id ? { ...i, connected } : i)))
  }

  install(id: string): void {
    this.setConnected(id, true)
  }

  disconnect(id: string): void {
    this.setConnected(id, false)
  }

  clearFilters(): void {
    this.query.set('')
    this.category.set('all')
    this.installedOnly.set(false)
  }
}

src/app/components/blocks/integrations-directory/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/angular/integrations-directory.json

Change language