{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "integrations-directory", "title": "Integrations Directory", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/integrations-directory/IntegrationsDirectory.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport {\n BarChart3,\n Check,\n Container,\n CreditCard,\n LineChart,\n Mail,\n MessageSquare,\n Radar,\n Receipt,\n ScrollText,\n Search,\n SearchX,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Chip } from '@/components/ui/chip'\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'\nimport { EmptyState } from '@/components/ui/empty-state'\nimport { Input } from '@/components/ui/input'\nimport { Switch } from '@/components/ui/switch'\n\nexport type CategoryId = 'analytics' | 'devops' | 'communication' | 'billing'\nexport type CategoryFilter = 'all' | CategoryId\n\nexport interface Integration {\n id: string\n name: string\n description: string\n /** Longer paragraph shown in the detail view. */\n detail: string\n category: CategoryId\n author: string\n /** Lucide glyph standing in for the product logo. */\n icon: LucideIcon\n connected?: boolean\n permissions: string[]\n}\n\nexport interface IntegrationsDirectoryProps {\n /** Replace the built-in stub catalog. */\n integrations?: Integration[]\n initialQuery?: string\n initialCategory?: CategoryFilter\n initialInstalledOnly?: boolean\n /** Render this integration's detail body as an always-visible panel (docs/story aid). */\n featuredId?: string\n className?: string\n}\n\nconst CATEGORIES: { id: CategoryFilter; label: string }[] = [\n { id: 'all', label: 'All' },\n { id: 'analytics', label: 'Analytics' },\n { id: 'devops', label: 'DevOps' },\n { id: 'communication', label: 'Communication' },\n { id: 'billing', label: 'Billing' },\n]\n\nconst STUB_INTEGRATIONS: Integration[] = [\n {\n id: 'pulseboard',\n name: 'Pulseboard',\n description: 'Funnels, retention curves and cohort exploration for product teams.',\n detail:\n '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.',\n category: 'analytics',\n author: 'Pulseboard Labs',\n icon: BarChart3,\n connected: true,\n permissions: ['Read workspace profile', 'Read dashboards and events', 'Create annotations and highlights'],\n },\n {\n id: 'metrica',\n name: 'Metrica',\n description: 'Privacy-friendly web metrics with no cookie banner required.',\n detail:\n '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.',\n category: 'analytics',\n author: 'Metrica Inc.',\n icon: LineChart,\n permissions: ['Read site metadata', 'Record aggregate pageviews'],\n },\n {\n id: 'shipyard',\n name: 'Shipyard',\n description: 'Zero-config preview environments for every pull request.',\n detail:\n '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.',\n category: 'devops',\n author: 'Shipyard Systems',\n icon: Container,\n connected: true,\n permissions: ['Read pull requests and statuses', 'Create deployment check runs', 'Publish preview URLs'],\n },\n {\n id: 'watchtower',\n name: 'Watchtower',\n description: 'Uptime, SSL and domain monitoring with on-call escalations.',\n detail:\n '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.',\n category: 'devops',\n author: 'Northwind Ops',\n icon: Radar,\n permissions: ['Read incident history', 'Register webhook endpoints', 'Send alert notifications'],\n },\n {\n id: 'loghound',\n name: 'Loghound',\n description: 'Structured log search across every service and region.',\n detail:\n '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.',\n category: 'devops',\n author: 'Houndworks',\n icon: ScrollText,\n permissions: ['Read log streams', 'Create saved queries', 'Forward events to webhooks'],\n },\n {\n id: 'chatterbox',\n name: 'Chatterbox',\n description: 'Team chat with threads, huddles and shared channels.',\n detail:\n '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.',\n category: 'communication',\n author: 'Chatterbox Co.',\n icon: MessageSquare,\n permissions: ['Read channel names and topics', 'Post messages as the app', 'Upload notification files'],\n },\n {\n id: 'mailroom',\n name: 'Mailroom',\n description: 'Transactional email with templates and delivery insights.',\n detail:\n '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.',\n category: 'communication',\n author: 'Mailroom Ltd.',\n icon: Mail,\n permissions: ['Send email on your behalf', 'Read delivery and bounce events', 'Manage suppression list'],\n },\n {\n id: 'ledgerly',\n name: 'Ledgerly',\n description: 'Invoicing, tax handling and revenue recognition in one flow.',\n detail:\n '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.',\n category: 'billing',\n author: 'Ledgerly Inc.',\n icon: Receipt,\n permissions: ['Read customer records', 'Create and send invoices', 'Read payment statuses'],\n },\n {\n id: 'billfold',\n name: 'Billfold',\n description: 'Subscription management and dunning recovery built in.',\n detail:\n '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.',\n category: 'billing',\n author: 'Billfold Labs',\n icon: CreditCard,\n permissions: ['Read subscription states', 'Start checkout sessions', 'Send payment reminders'],\n },\n]\n\nfunction categoryLabel(id: CategoryId): string {\n return CATEGORIES.find((c) => c.id === id)?.label ?? id\n}\n\nfunction initials(author: string): string {\n return author\n .split(/\\s+/)\n .slice(0, 2)\n .map((w) => w[0]?.toUpperCase() ?? '')\n .join('')\n}\n\nexport function IntegrationsDirectory({\n integrations,\n initialQuery = '',\n initialCategory = 'all',\n initialInstalledOnly = false,\n featuredId,\n className,\n}: IntegrationsDirectoryProps) {\n const [items, setItems] = React.useState(integrations ?? STUB_INTEGRATIONS)\n const [query, setQuery] = React.useState(initialQuery)\n const [category, setCategory] = React.useState(initialCategory)\n const [installedOnly, setInstalledOnly] = React.useState(initialInstalledOnly)\n const [detailId, setDetailId] = React.useState(null)\n const [detailOpen, setDetailOpen] = React.useState(false)\n\n const counts = React.useMemo(() => {\n const acc: Record = {}\n for (const c of CATEGORIES) acc[c.id] = 0\n for (const i of items) acc[i.category] = (acc[i.category] ?? 0) + 1\n return acc\n }, [items])\n\n const visible = React.useMemo(() => {\n const q = query.trim().toLowerCase()\n return items.filter((i) => {\n if (category !== 'all' && i.category !== category) return false\n if (installedOnly && !i.connected) return false\n if (!q) return true\n const hay = `${i.name} ${i.description} ${i.author} ${categoryLabel(i.category)}`.toLowerCase()\n return hay.includes(q)\n })\n }, [items, query, category, installedOnly])\n\n const featured = featuredId ? (items.find((i) => i.id === featuredId) ?? null) : null\n const activeDetail = detailId ? (items.find((i) => i.id === detailId) ?? null) : null\n\n function openDetail(id: string) {\n setDetailId(id)\n setDetailOpen(true)\n }\n\n function setConnected(id: string, connected: boolean) {\n setItems((prev) => prev.map((i) => (i.id === id ? { ...i, connected } : i)))\n }\n\n function install(id: string) {\n setConnected(id, true)\n }\n\n function disconnect(id: string) {\n setConnected(id, false)\n }\n\n function clearFilters() {\n setQuery('')\n setCategory('all')\n setInstalledOnly(false)\n }\n\n return (\n
\n {/* Toolbar */}\n
\n
\n setQuery(e.target.value)}\n prefixIcon={}\n placeholder=\"Search integrations…\"\n aria-label=\"Search integrations\"\n className=\"min-w-56 flex-1\"\n />\n
\n \n Installed\n
\n
\n
\n {CATEGORIES.map((c) => (\n setCategory(c.id)}\n >\n \n {c.label}\n {counts[c.id] ?? 0}\n \n \n ))}\n
\n
\n\n {/* Featured detail panel (always-visible variant of the dialog body) */}\n {featured && (\n \n
\n \n \n \n
\n

{featured.name}

\n
\n \n {categoryLabel(featured.category)}\n \n by {featured.author}\n
\n
\n
\n

{featured.detail}

\n
\n

Permissions

\n
    \n {featured.permissions.map((p) => (\n
  • \n \n {p}\n
    • \n ))}\n
\n
\n
\n {featured.connected ? (\n <>\n \n Connected\n \n \n \n ) : (\n \n )}\n
\n \n )}\n\n {/* Results */}\n {visible.length > 0 ? (\n <>\n

\n Showing {visible.length} of {items.length} integrations\n

\n
\n {visible.map((i) => (\n \n openDetail(i.id)}\n />\n
\n \n \n \n \n {categoryLabel(i.category)}\n \n
\n
\n

{i.name}

\n

{i.description}

\n
\n
\n \n {initials(i.author)}\n \n {i.author}\n
\n
\n {i.connected ? (\n <>\n \n Connected\n \n {\n e.stopPropagation()\n disconnect(i.id)\n }}\n >\n Disconnect\n \n \n ) : (\n {\n e.stopPropagation()\n install(i.id)\n }}\n >\n Install\n \n )}\n
\n \n ))}\n
\n \n ) : (\n /* Empty state */\n
\n \n \n \n
\n )}\n\n {/* Detail dialog */}\n \n {activeDetail && (\n \n \n
\n \n \n \n
\n {activeDetail.name}\n
\n \n {categoryLabel(activeDetail.category)}\n \n by {activeDetail.author}\n
\n
\n
\n \n {activeDetail.detail}\n
\n

Permissions

\n
    \n {activeDetail.permissions.map((p) => (\n
  • \n \n {p}\n
    • \n ))}\n
\n
\n
\n {activeDetail.connected ? (\n <>\n \n Connected\n \n \n \n ) : (\n \n )}\n
\n \n )}\n \n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/integrations-directory/IntegrationsDirectory.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/chip.json", "https://uipkge.dev/r/react/dialog.json", "https://uipkge.dev/r/react/empty-state.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/switch.json" ], "description": "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.", "categories": [ "devops", "marketing", "dashboard" ] }