module.integration-hub

bun add @lssm-tech/module.integration-hub

'use client';
import { useIntegrationData, type IntegrationDataPort } from '@lssm-tech/module.integration-hub/hooks';

const port: IntegrationDataPort = {
  listIntegrations: (input) => fetch(`/api/integrations?projectId=${input.projectId}`).then(r => r.json()),
  listConnections:  () => fetch('/api/connections').then(r => r.json()),
  listSyncConfigs:  () => fetch('/api/syncs').then(r => r.json()),
};

export function IntegrationCatalog({ projectId }: { projectId: string }) {
  const { integrations, loading, error, stats } = useIntegrationData({ projectId, port });

  if (loading) return <p>Loading…</p>;
  if (error)   return <p>Error: {error.message}</p>;

  return (
    <ul>
      {integrations.map(i => <li key={i.id}>{i.name} — {i.status}</li>)}
    </ul>
  );
}

'use client';
import { useCredentialSetup } from '@lssm-tech/module.integration-hub/hooks';
import { buildCredentialSetupModel, type CredentialManifest } from '@lssm-tech/module.integration-hub/model';

const manifest: CredentialManifest = {
  modes: {
    managed: { secretFields: [{ key: 'API_KEY', required: true }] },
    byok:    { configFields: [{ key: 'ENDPOINT', required: true }] },
  },
};

export function CredentialWizard() {
  const { state, advance, reset, setMode } = useCredentialSetup();

  const model = buildCredentialSetupModel({
    mode: state.mode,
    manifest,
    environment: { variables: {}, targets: {} },
    runtime: { configValues: {}, secretRefs: {}, targetIds: [] },
  });

  return (
    <div>
      <p>Step {state.step} / 3 — mode: {state.mode}</p>
      <p>Missing secrets: {model.missingSecrets.length}</p>
      <button onClick={advance}>Next</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

// Works in React Server Components — no 'use client' needed
import { renderIntegrationMarkdown } from '@lssm-tech/module.integration-hub/renderers';

export async function IntegrationCard({ id }: { id: string }) {
  const integration = await fetchIntegration(id);
  const markdown = renderIntegrationMarkdown({
    id: integration.id,
    name: integration.name,
    description: integration.description,
    category: integration.category,
    status: integration.status,
    connectionCount: integration.connections.length,
  });
  return <MarkdownRenderer content={markdown} />;
}

bun test --cwd packages/platform/delivery/integration-hub
bun run --cwd packages/platform/delivery/integration-hub typecheck