@geenius/adapters 0.1.0

package/packages/react-css/src/components/AdapterCard.tsx

@@ -0,0 +1,34 @@
+// @geenius-adapters/react-css — AdapterCard
+
+import type { AdapterDomain, AdapterStatusInfo } from '@geenius-adapters/shared'
+import { DOMAIN_LABELS, DOMAIN_ICONS, DOMAIN_DESCRIPTIONS } from '@geenius-adapters/shared'
+import { AdapterStatusBadge } from './AdapterStatusBadge'
+
+export interface AdapterCardProps {
+  domain: AdapterDomain
+  status: AdapterStatusInfo
+  onClick?: () => void
+  className?: string
+}
+
+export function AdapterCard({ domain, status, onClick, className = '' }: AdapterCardProps) {
+  return (
+    <button type="button" onClick={onClick} className={`adapter-card ${className}`} aria-label={`${DOMAIN_LABELS[domain]} adapter`}>
+      <div className="adapter-card__icon">{DOMAIN_ICONS[domain]}</div>
+      <div className="adapter-card__body">
+        <div className="adapter-card__header">
+          <h3 className="adapter-card__name">{DOMAIN_LABELS[domain]}</h3>
+          <AdapterStatusBadge status={status.status} />
+        </div>
+        <p className="adapter-card__desc">{DOMAIN_DESCRIPTIONS[domain]}</p>
+        {status.provider && status.provider !== 'none' && (
+          <div className="adapter-card__meta">
+            <span className="adapter-card__provider">{status.provider}</span>
+            {status.latency && <span className="adapter-card__latency">{status.latency}ms</span>}
+          </div>
+        )}
+        {status.error && <p className="adapter-card__error">{status.error}</p>}
+      </div>
+    </button>
+  )
+}

package/packages/react-css/src/components/AdapterConfigForm.tsx

@@ -0,0 +1,63 @@
+// @geenius-adapters/react-css — AdapterConfigForm
+
+import { useState } from 'react'
+import type { AdapterDomain, DomainAdapterConfig } from '@geenius-adapters/shared'
+import { DOMAIN_LABELS, getProvidersForDomain } from '@geenius-adapters/shared'
+
+export interface AdapterConfigFormProps {
+  domain: AdapterDomain
+  initialConfig?: DomainAdapterConfig
+  onSave: (config: DomainAdapterConfig) => Promise<void> | void
+  onCancel?: () => void
+  className?: string
+}
+
+export function AdapterConfigForm({ domain, initialConfig, onSave, onCancel, className = '' }: AdapterConfigFormProps) {
+  const providers = getProvidersForDomain(domain)
+  const [provider, setProvider] = useState(initialConfig?.provider ?? providers[0]?.id ?? '')
+  const [apiKey, setApiKey] = useState(initialConfig?.apiKey ?? '')
+  const [baseUrl, setBaseUrl] = useState(initialConfig?.baseUrl ?? '')
+  const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const needsApiKey = !['localStorage', 'noop'].includes(provider)
+  const needsBaseUrl = ['ollama', 'minio', 'neon', 'supabase'].includes(provider)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault(); setError(null)
+    if (!provider) { setError('Select a provider'); return }
+    setIsSaving(true)
+    try { await onSave({ provider, apiKey: apiKey || undefined, baseUrl: baseUrl || undefined }) }
+    catch (e) { setError(e instanceof Error ? e.message : 'Failed') }
+    finally { setIsSaving(false) }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className={`adapter-form ${className}`} noValidate>
+      <h3 className="adapter-form__title">Configure {DOMAIN_LABELS[domain]}</h3>
+      <p className="adapter-form__subtitle">Select your preferred provider.</p>
+      {error && <div className="adapter-alert adapter-alert--error" role="alert" style={{marginTop: '1rem'}}>{error}</div>}
+      <div className="adapter-field">
+        <span className="adapter-field__label">Provider</span>
+        <div className="adapter-provider-grid">
+          {providers.map(p => (
+            <button key={p.id} type="button" onClick={() => setProvider(p.id)} className={`adapter-provider-option ${provider === p.id ? 'adapter-provider-option--selected' : ''}`}>
+              <span className="adapter-provider-option__name">{p.name}</span>
+              <span className="adapter-provider-option__desc">{p.description}</span>
+              <span className={`adapter-tier-badge adapter-tier-badge--${p.tier}`}>{p.tier}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+      {needsApiKey && (
+        <div className="adapter-field"><label className="adapter-field__label">API Key</label><input type="password" value={apiKey} onChange={e => setApiKey(e.target.value)} className="adapter-field__input" placeholder="Enter API key" /></div>
+      )}
+      {needsBaseUrl && (
+        <div className="adapter-field"><label className="adapter-field__label">Base URL</label><input type="url" value={baseUrl} onChange={e => setBaseUrl(e.target.value)} className="adapter-field__input" placeholder="https://..." /></div>
+      )}
+      <div style={{display: 'flex', justifyContent: 'flex-end', gap: '0.75rem', marginTop: '1.5rem'}}>
+        {onCancel && <button type="button" onClick={onCancel} className="adapter-btn adapter-btn--ghost">Cancel</button>}
+        <button type="submit" disabled={isSaving || !provider} className="adapter-btn adapter-btn--primary">{isSaving ? 'Saving…' : 'Save'}</button>
+      </div>
+    </form>
+  )
+}

package/packages/react-css/src/components/AdapterList.tsx

@@ -0,0 +1,40 @@
+// @geenius-adapters/react-css — AdapterList
+
+import { useState, useMemo } from 'react'
+import { useAdapters } from '../hooks'
+import { AdapterCard } from './AdapterCard'
+import { ADAPTER_DOMAINS, DOMAIN_LABELS } from '@geenius-adapters/shared'
+import type { AdapterDomain, AdapterStatusType } from '@geenius-adapters/shared'
+
+export interface AdapterListProps {
+  onSelect?: (domain: AdapterDomain) => void
+  filterStatus?: AdapterStatusType
+  className?: string
+}
+
+export function AdapterList({ onSelect, filterStatus, className = '' }: AdapterListProps) {
+  const { statuses, isLoading } = useAdapters()
+  const [search, setSearch] = useState('')
+
+  const filtered = useMemo(() => {
+    let domains = [...ADAPTER_DOMAINS]
+    if (search) { const q = search.toLowerCase(); domains = domains.filter(d => DOMAIN_LABELS[d].toLowerCase().includes(q) || d.includes(q)) }
+    if (filterStatus) { domains = domains.filter(d => statuses[d]?.status === filterStatus) }
+    return domains
+  }, [search, filterStatus, statuses])
+
+  if (isLoading) return (
+    <div className={className} role="status">{[1,2,3,4].map(i => <div key={i} className="adapter-skeleton" style={{height: '6rem', marginBottom: '0.75rem'}} />)}</div>
+  )
+
+  return (
+    <div className={className}>
+      <input type="text" value={search} onChange={e => setSearch(e.target.value)} placeholder="Search adapters..." className="adapter-search" aria-label="Search adapters" />
+      {filtered.length === 0 ? (
+        <div className="adapter-empty"><p className="adapter-empty__text">{search ? 'No match' : 'No adapters configured'}</p></div>
+      ) : (
+        <div className="adapter-grid" role="list">{filtered.map(d => <AdapterCard key={d} domain={d} status={statuses[d]} onClick={() => onSelect?.(d)} />)}</div>
+      )}
+    </div>
+  )
+}

package/packages/react-css/src/components/AdapterStatusBadge.tsx

@@ -0,0 +1,21 @@
+// @geenius-adapters/react-css — AdapterStatusBadge
+
+import type { AdapterStatusType } from '@geenius-adapters/shared'
+
+export interface AdapterStatusBadgeProps {
+  status: AdapterStatusType
+  showLabel?: boolean
+  className?: string
+}
+
+export function AdapterStatusBadge({ status, showLabel = true, className = '' }: AdapterStatusBadgeProps) {
+  const labels: Record<AdapterStatusType, string> = {
+    connected: 'Connected', disconnected: 'Disconnected', error: 'Error', initializing: 'Initializing',
+  }
+  return (
+    <span className={`adapter-badge adapter-badge--${status} ${className}`}>
+      <span className="adapter-badge__dot" />
+      {showLabel && <span>{labels[status]}</span>}
+    </span>
+  )
+}

package/packages/react-css/src/components/index.ts

@@ -0,0 +1,4 @@
+export { AdapterStatusBadge, type AdapterStatusBadgeProps } from './AdapterStatusBadge'
+export { AdapterCard, type AdapterCardProps } from './AdapterCard'
+export { AdapterList, type AdapterListProps } from './AdapterList'
+export { AdapterConfigForm, type AdapterConfigFormProps } from './AdapterConfigForm'

package/packages/react-css/src/hooks/index.ts

@@ -0,0 +1,75 @@
+// @geenius-adapters/react — Hooks
+
+import { useMemo } from 'react'
+import { useAdapterContext } from '../provider/AdapterProvider'
+import type {
+  AuthAdapter, DbAdapter, PaymentsAdapter, AiAdapter, FileStorageAdapter, AdminAdapter,
+  AdapterDomain, AdapterStatusInfo,
+} from '@geenius-adapters/shared'
+
+// ─── Domain-specific hooks ───────────────────────────────────────────────────
+
+/** Access the database adapter */
+export function useDb(): DbAdapter {
+  return useAdapterContext().getAdapter('db')
+}
+
+/** Access the auth adapter */
+export function useAuth(): AuthAdapter {
+  return useAdapterContext().getAdapter('auth')
+}
+
+/** Access the payments adapter */
+export function usePayments(): PaymentsAdapter {
+  return useAdapterContext().getAdapter('payments')
+}
+
+/** Access the AI adapter */
+export function useAi(): AiAdapter {
+  return useAdapterContext().getAdapter('ai')
+}
+
+/** Access the file storage adapter */
+export function useStorage(): FileStorageAdapter {
+  return useAdapterContext().getAdapter('storage')
+}
+
+/** Access the admin adapter */
+export function useAdmin(): AdminAdapter {
+  return useAdapterContext().getAdapter('admin')
+}
+
+// ─── Status hooks ────────────────────────────────────────────────────────────
+
+/** Get all adapter statuses */
+export function useAdapterStatuses(): Record<AdapterDomain, AdapterStatusInfo> {
+  return useAdapterContext().statuses
+}
+
+/** Get status for a specific adapter domain */
+export function useAdapterStatus(domain: AdapterDomain): AdapterStatusInfo {
+  return useAdapterContext().statuses[domain]
+}
+
+/** Check if adapter is ready */
+export function useIsAdapterReady(domain: AdapterDomain): boolean {
+  return useAdapterContext().isReady(domain)
+}
+
+// ─── Full adapters hook ──────────────────────────────────────────────────────
+
+/** Access all adapters at once */
+export function useAdapters() {
+  const ctx = useAdapterContext()
+  return useMemo(() => ({
+    db: ctx.adapters.db,
+    auth: ctx.adapters.auth,
+    payments: ctx.adapters.payments,
+    ai: ctx.adapters.ai,
+    storage: ctx.adapters.storage,
+    admin: ctx.adapters.admin,
+    statuses: ctx.statuses,
+    isLoading: ctx.isLoading,
+    isReady: ctx.isReady,
+  }), [ctx])
+}

package/packages/react-css/src/index.tsx

@@ -0,0 +1,25 @@
+// @geenius-adapters/react-css — Barrel export
+
+/**
+ * @geenius-adapters/react-css
+ * React components using vanilla CSS (no Tailwind).
+ * Import: `import '@geenius-adapters/react-css/styles.css'`
+ */
+
+export type {
+  AuthAdapter, DbAdapter, PaymentsAdapter, AiAdapter, FileStorageAdapter,
+  AdminAdapter, AdapterDomain, AdapterConfig, AdapterStatusType, AdapterStatusInfo,
+} from '@geenius-adapters/shared'
+
+export { ADAPTER_DOMAINS, DOMAIN_LABELS, DOMAIN_ICONS, DOMAIN_DESCRIPTIONS, configureAdapters, getAdapterConfig } from '@geenius-adapters/shared'
+
+export { AdapterProvider, useAdapterContext } from './provider'
+export type { AdapterProviderProps, AdapterSet, AdapterContextValue } from './provider'
+
+export { useDb, useAuth, usePayments, useAi, useStorage, useAdmin, useAdapters, useAdapterStatuses, useAdapterStatus, useIsAdapterReady } from './hooks'
+
+export { AdapterStatusBadge, AdapterCard, AdapterList, AdapterConfigForm } from './components'
+export type { AdapterStatusBadgeProps, AdapterCardProps, AdapterListProps, AdapterConfigFormProps } from './components'
+
+export { AdaptersPage, AdapterDetailPage } from './pages'
+export type { AdaptersPageProps, AdapterDetailPageProps } from './pages'

package/packages/react-css/src/pages/AdapterDetailPage.tsx

@@ -0,0 +1,133 @@
+// @geenius-adapters/react — AdapterDetailPage
+
+import { useState } from 'react'
+import { useAdapters, useAdapterStatus } from '../hooks'
+import { AdapterStatusBadge } from '../components/AdapterStatusBadge'
+import { AdapterConfigForm } from '../components/AdapterConfigForm'
+import type { AdapterDomain } from '@geenius-adapters/shared'
+import { DOMAIN_LABELS, DOMAIN_ICONS, DOMAIN_DESCRIPTIONS, getProvidersForDomain } from '@geenius-adapters/shared'
+
+export interface AdapterDetailPageProps {
+  domain: AdapterDomain
+  onBack?: () => void
+  className?: string
+}
+
+export function AdapterDetailPage({ domain, onBack, className = '' }: AdapterDetailPageProps) {
+  const { isLoading } = useAdapters()
+  const status = useAdapterStatus(domain)
+  const [isEditing, setIsEditing] = useState(false)
+  const providers = getProvidersForDomain(domain)
+
+  const label = DOMAIN_LABELS[domain]
+  const icon = DOMAIN_ICONS[domain]
+  const desc = DOMAIN_DESCRIPTIONS[domain]
+
+  if (isLoading) {
+    return (
+      <div className={`max-w-3xl mx-auto space-y-6 ${className}`}>
+        <div className="animate-pulse space-y-4">
+          <div className="h-6 w-32 rounded bg-white/10" />
+          <div className="h-40 rounded-2xl bg-white/[0.03]" />
+          <div className="h-60 rounded-2xl bg-white/[0.03]" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`max-w-3xl mx-auto space-y-8 ${className}`}>
+      {/* Back navigation */}
+      {onBack && (
+        <button onClick={onBack} className="flex items-center gap-1.5 text-sm text-white/30 hover:text-white/60 transition-colors">
+          <span>←</span> Back to Adapters
+        </button>
+      )}
+
+      {/* Header */}
+      <div className="flex items-start gap-5">
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-white/5 text-3xl">{icon}</div>
+        <div className="flex-1">
+          <div className="flex items-center gap-3">
+            <h1 className="text-2xl font-extrabold text-white/95 tracking-tight">{label}</h1>
+            <AdapterStatusBadge status={status.status} size="md" />
+          </div>
+          <p className="mt-1 text-sm text-white/40">{desc}</p>
+        </div>
+      </div>
+
+      {/* Status Card */}
+      <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6 backdrop-blur-sm">
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-white/30 mb-4">Current Status</h2>
+        <div className="grid gap-4 sm:grid-cols-3">
+          <div>
+            <p className="text-[0.625rem] text-white/30 uppercase">Provider</p>
+            <p className="mt-0.5 text-sm font-semibold text-white/80">{status.provider !== 'none' ? status.provider : '—'}</p>
+          </div>
+          <div>
+            <p className="text-[0.625rem] text-white/30 uppercase">Status</p>
+            <p className="mt-0.5"><AdapterStatusBadge status={status.status} /></p>
+          </div>
+          <div>
+            <p className="text-[0.625rem] text-white/30 uppercase">Last Checked</p>
+            <p className="mt-0.5 text-sm text-white/60">{status.lastCheckedAt ? new Date(status.lastCheckedAt).toLocaleTimeString() : '—'}</p>
+          </div>
+        </div>
+        {status.error && (
+          <div className="mt-4 rounded-lg border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-400">
+            <span className="font-semibold">Error:</span> {status.error}
+          </div>
+        )}
+        {status.latency && (
+          <div className="mt-4">
+            <p className="text-[0.625rem] text-white/30 uppercase mb-1">Latency</p>
+            <div className="h-2 w-full rounded-full bg-white/5 overflow-hidden">
+              <div className={`h-full rounded-full transition-all ${status.latency < 100 ? 'bg-emerald-400' : status.latency < 500 ? 'bg-amber-400' : 'bg-red-400'}`}
+                style={{ width: `${Math.min(100, (status.latency / 1000) * 100)}%` }} />
+            </div>
+            <p className="mt-1 text-xs text-white/40">{status.latency}ms</p>
+          </div>
+        )}
+      </div>
+
+      {/* Available Providers */}
+      <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6 backdrop-blur-sm">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xs font-semibold uppercase tracking-wider text-white/30">Available Providers</h2>
+          <span className="text-xs text-white/20">{providers.length} providers</span>
+        </div>
+        <div className="divide-y divide-white/5">
+          {providers.map(p => (
+            <div key={p.id} className="flex items-center justify-between py-3 first:pt-0 last:pb-0">
+              <div>
+                <p className="text-sm font-semibold text-white/80">{p.name}</p>
+                <p className="text-xs text-white/30">{p.description}</p>
+              </div>
+              <span className={`self-start rounded px-2 py-0.5 text-[0.625rem] font-bold uppercase ${
+                p.tier === 'pronto' ? 'bg-emerald-500/10 text-emerald-400' : p.tier === 'mvp' ? 'bg-blue-500/10 text-blue-400' : 'bg-purple-500/10 text-purple-400'
+              }`}>{p.tier}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Configuration */}
+      <div>
+        {isEditing ? (
+          <AdapterConfigForm
+            domain={domain}
+            onSave={async () => setIsEditing(false)}
+            onCancel={() => setIsEditing(false)}
+          />
+        ) : (
+          <button
+            onClick={() => setIsEditing(true)}
+            className="w-full rounded-2xl border border-dashed border-white/10 bg-white/[0.01] p-6 text-center text-sm text-white/30 hover:border-white/20 hover:text-white/50 transition-all"
+          >
+            ⚙️ Configure {label} Adapter
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

package/packages/react-css/src/pages/AdaptersPage.tsx

@@ -0,0 +1,111 @@
+// @geenius-adapters/react — AdaptersPage
+
+import { useState } from 'react'
+import { useAdapters } from '../hooks'
+import { AdapterList } from '../components/AdapterList'
+import { AdapterConfigForm } from '../components/AdapterConfigForm'
+import { AdapterStatusBadge } from '../components/AdapterStatusBadge'
+import { ADAPTER_DOMAINS, ADAPTER_STATUSES, DOMAIN_LABELS } from '@geenius-adapters/shared'
+import type { AdapterDomain, AdapterStatusType } from '@geenius-adapters/shared'
+
+export interface AdaptersPageProps {
+  onNavigateDetail?: (domain: AdapterDomain) => void
+  className?: string
+}
+
+export function AdaptersPage({ onNavigateDetail, className = '' }: AdaptersPageProps) {
+  const { statuses, isLoading } = useAdapters()
+  const [selectedDomain, setSelectedDomain] = useState<AdapterDomain | null>(null)
+  const [filterStatus, setFilterStatus] = useState<AdapterStatusType | undefined>()
+
+  // Status summary counts
+  const counts = {
+    connected: ADAPTER_DOMAINS.filter(d => statuses[d]?.status === 'connected').length,
+    error: ADAPTER_DOMAINS.filter(d => statuses[d]?.status === 'error').length,
+    total: ADAPTER_DOMAINS.length,
+  }
+
+  if (isLoading) {
+    return (
+      <div className={`max-w-4xl mx-auto space-y-6 ${className}`}>
+        <div className="animate-pulse space-y-4">
+          <div className="h-8 w-48 rounded bg-white/10" />
+          <div className="h-4 w-72 rounded bg-white/5" />
+          <div className="grid gap-3 sm:grid-cols-3">{[1,2,3].map(i => <div key={i} className="h-20 rounded-2xl bg-white/[0.03]" />)}</div>
+          <div className="grid gap-3 sm:grid-cols-2">{[1,2,3,4].map(i => <div key={i} className="h-28 rounded-2xl bg-white/[0.03]" />)}</div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`max-w-4xl mx-auto space-y-8 ${className}`}>
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-extrabold text-white/95 tracking-tight">Adapters</h1>
+        <p className="mt-1 text-sm text-white/40">Manage your infrastructure adapters — database, auth, AI, storage, payments, and admin.</p>
+      </div>
+
+      {/* Status Summary */}
+      <div className="grid gap-3 sm:grid-cols-3">
+        <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4 backdrop-blur-sm">
+          <p className="text-xs font-semibold uppercase tracking-wider text-white/30">Total</p>
+          <p className="mt-1 text-2xl font-extrabold text-white/90">{counts.total}</p>
+          <p className="text-[0.625rem] text-white/30">adapter domains</p>
+        </div>
+        <div className="rounded-2xl border border-emerald-500/10 bg-emerald-500/[0.03] p-4 backdrop-blur-sm">
+          <p className="text-xs font-semibold uppercase tracking-wider text-emerald-400/60">Connected</p>
+          <p className="mt-1 text-2xl font-extrabold text-emerald-400">{counts.connected}</p>
+          <p className="text-[0.625rem] text-emerald-400/40">active adapters</p>
+        </div>
+        {counts.error > 0 && (
+          <div className="rounded-2xl border border-red-500/10 bg-red-500/[0.03] p-4 backdrop-blur-sm">
+            <p className="text-xs font-semibold uppercase tracking-wider text-red-400/60">Errors</p>
+            <p className="mt-1 text-2xl font-extrabold text-red-400">{counts.error}</p>
+            <p className="text-[0.625rem] text-red-400/40">need attention</p>
+          </div>
+        )}
+      </div>
+
+      {/* Filters */}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => setFilterStatus(undefined)}
+          className={`rounded-lg px-3 py-1.5 text-xs font-semibold transition-all ${!filterStatus ? 'bg-white/10 text-white/80' : 'text-white/30 hover:text-white/50'}`}
+        >All</button>
+        {ADAPTER_STATUSES.map(s => (
+          <button
+            key={s}
+            onClick={() => setFilterStatus(s)}
+            className={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold transition-all ${filterStatus === s ? 'bg-white/10 text-white/80' : 'text-white/30 hover:text-white/50'}`}
+          >
+            <AdapterStatusBadge status={s} showLabel={false} size="sm" />
+            {s}
+          </button>
+        ))}
+      </div>
+
+      {/* Adapter Grid */}
+      <AdapterList
+        onSelect={(domain) => {
+          if (onNavigateDetail) { onNavigateDetail(domain) }
+          else { setSelectedDomain(domain) }
+        }}
+        filterStatus={filterStatus}
+      />
+
+      {/* Inline Config Modal */}
+      {selectedDomain && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => setSelectedDomain(null)}>
+          <div className="max-w-lg w-full mx-4" onClick={e => e.stopPropagation()}>
+            <AdapterConfigForm
+              domain={selectedDomain}
+              onSave={async () => { setSelectedDomain(null) }}
+              onCancel={() => setSelectedDomain(null)}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/packages/react-css/src/pages/index.ts

@@ -0,0 +1,2 @@
+export { AdaptersPage, type AdaptersPageProps } from './AdaptersPage'
+export { AdapterDetailPage, type AdapterDetailPageProps } from './AdapterDetailPage'

package/packages/react-css/src/provider/AdapterProvider.tsx

@@ -0,0 +1,115 @@
+// @geenius-adapters/react — Provider
+
+'use client'
+
+import { createContext, useContext, useState, useCallback, useEffect, useMemo, type ReactNode } from 'react'
+import type {
+  AuthAdapter, DbAdapter, PaymentsAdapter, AiAdapter, FileStorageAdapter, AdminAdapter,
+  AdapterDomain, AdapterStatusType, AdapterStatusInfo,
+} from '@geenius-adapters/shared'
+import { ADAPTER_DOMAINS, DOMAIN_LABELS } from '@geenius-adapters/shared'
+
+// ─── Adapter Set ─────────────────────────────────────────────────────────────
+
+export interface AdapterSet {
+  db?: DbAdapter
+  auth?: AuthAdapter
+  payments?: PaymentsAdapter
+  ai?: AiAdapter
+  storage?: FileStorageAdapter
+  admin?: AdminAdapter
+}
+
+// ─── Context ─────────────────────────────────────────────────────────────────
+
+export interface AdapterContextValue {
+  adapters: AdapterSet
+  statuses: Record<AdapterDomain, AdapterStatusInfo>
+  getAdapter: <K extends keyof AdapterSet>(domain: K) => NonNullable<AdapterSet[K]>
+  isReady: (domain: AdapterDomain) => boolean
+  isLoading: boolean
+}
+
+const AdapterContext = createContext<AdapterContextValue | null>(null)
+
+// ─── Provider ────────────────────────────────────────────────────────────────
+
+export interface AdapterProviderProps {
+  adapters: AdapterSet
+  children: ReactNode
+  /** Check adapter health on mount */
+  healthCheck?: boolean
+}
+
+export function AdapterProvider({ adapters, children, healthCheck = false }: AdapterProviderProps) {
+  const [isLoading, setIsLoading] = useState(healthCheck)
+  const [statuses, setStatuses] = useState<Record<AdapterDomain, AdapterStatusInfo>>(() => {
+    const initial = {} as Record<AdapterDomain, AdapterStatusInfo>
+    for (const domain of ADAPTER_DOMAINS) {
+      const adapter = adapters[domain as keyof AdapterSet]
+      initial[domain] = {
+        domain,
+        provider: adapter ? 'configured' : 'none',
+        status: adapter ? 'connected' : 'disconnected',
+        lastCheckedAt: Date.now(),
+      }
+    }
+    return initial
+  })
+
+  useEffect(() => {
+    if (!healthCheck) return
+    setIsLoading(true)
+    // Simple health check — verify adapters are callable
+    const checks = ADAPTER_DOMAINS.map(async (domain) => {
+      const adapter = adapters[domain as keyof AdapterSet]
+      if (!adapter) return
+      try {
+        setStatuses(prev => ({ ...prev, [domain]: { ...prev[domain], status: 'initializing' } }))
+        // Basic connectivity test for each domain
+        if (domain === 'auth' && (adapter as AuthAdapter).getSession) {
+          await (adapter as AuthAdapter).getSession()
+        }
+        setStatuses(prev => ({
+          ...prev,
+          [domain]: { ...prev[domain], status: 'connected' as AdapterStatusType, lastCheckedAt: Date.now() },
+        }))
+      } catch (e) {
+        setStatuses(prev => ({
+          ...prev,
+          [domain]: {
+            ...prev[domain],
+            status: 'error' as AdapterStatusType,
+            error: e instanceof Error ? e.message : 'Health check failed',
+            lastCheckedAt: Date.now(),
+          },
+        }))
+      }
+    })
+    Promise.allSettled(checks).finally(() => setIsLoading(false))
+  }, [adapters, healthCheck])
+
+  const getAdapter = useCallback(<K extends keyof AdapterSet>(domain: K): NonNullable<AdapterSet[K]> => {
+    const adapter = adapters[domain]
+    if (!adapter) throw new Error(`${DOMAIN_LABELS[domain as AdapterDomain] ?? domain} adapter not configured in <AdapterProvider>`)
+    return adapter as NonNullable<AdapterSet[K]>
+  }, [adapters])
+
+  const isReady = useCallback((domain: AdapterDomain) => {
+    return !!adapters[domain as keyof AdapterSet] && statuses[domain]?.status === 'connected'
+  }, [adapters, statuses])
+
+  const value = useMemo<AdapterContextValue>(() => ({
+    adapters, statuses, getAdapter, isReady, isLoading,
+  }), [adapters, statuses, getAdapter, isReady, isLoading])
+
+  return <AdapterContext.Provider value={value}>{children}</AdapterContext.Provider>
+}
+
+// ─── Context Hook ────────────────────────────────────────────────────────────
+
+export function useAdapterContext(): AdapterContextValue {
+  const ctx = useContext(AdapterContext)
+  if (!ctx) throw new Error('useAdapterContext must be used within <AdapterProvider>')
+  return ctx
+}

package/packages/react-css/src/provider/index.ts

@@ -0,0 +1,2 @@
+export { AdapterProvider, useAdapterContext } from './AdapterProvider'
+export type { AdapterProviderProps, AdapterSet, AdapterContextValue } from './AdapterProvider'