@molecule/app-integration-card-react 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,155 @@
+<!--
+AUTO-GENERATED — DO NOT EDIT THIS FILE.
+Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
+Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
+To change this document, edit the module-level JSDoc in src/index.ts.
+Generated: 2026-08-04T01:51:08.029Z
+-->
+
+# @molecule/app-integration-card-react
+
+> **Auto-generated, AI-first package reference** for the [molecule.dev](https://molecule.dev) ecosystem.
+> It is written to be read by coding agents as much as by people, and is generated from this
+> package's source — edit `src/index.ts` JSDoc, not this file.
+
+React integration / connection card.
+
+Exports:
+
+- `<IntegrationCard>` — icon + title + description + status label + action button.
+  Props: `icon?`, `title`, `description?`, `status?` (default `'disconnected'`),
+  `action?` (`{ label, onClick?, href?, loading?, disabled? }`), `variant?`
+  (`'card'` default | `'cta'` gradient promo), `className?`, `dataMolId?`.
+- `IntegrationStatus` type (`'connected' | 'disconnected' | 'pending' | 'error'`).
+
+Use for OAuth/API integrations, bank-connect CTAs, webhook setup cards.
+
+## Quick Start
+
+```tsx
+import { IntegrationCard } from '@molecule/app-integration-card-react'
+
+;<IntegrationCard
+  title="Slack"
+  description="Send notifications to your team channels."
+  status="disconnected"
+  action={{
+    label: 'Connect',
+    onClick: () => {
+      window.location.href = '/oauth/slack'
+    },
+  }}
+  dataMolId="slack-integration-card"
+/>
+```
+
+## Type
+
+`feature`
+
+## Installation
+
+```bash
+npm install @molecule/app-integration-card-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
+npm install -D @types/react
+```
+
+## API
+
+### Interfaces
+
+#### `IntegrationCardProps`
+
+Props for {@link IntegrationCard}.
+
+```typescript
+interface IntegrationCardProps {
+  /** Leading icon / logo for the integration. */
+  icon?: ReactNode
+  /** Integration title. */
+  title: ReactNode
+  /** Supporting description. */
+  description?: ReactNode
+  /** Current connection status. */
+  status?: IntegrationStatus
+  /** Action button configuration. */
+  action?: {
+    label: ReactNode
+    onClick?: () => void
+    href?: string
+    loading?: boolean
+    disabled?: boolean
+  }
+  /** `'card'` default, `'cta'` for premium gradient-tinted promos. */
+  variant?: 'card' | 'cta'
+  /** Extra classes. */
+  className?: string
+  /** `data-mol-id` for AI-agent selectors. */
+  dataMolId?: string
+}
+```
+
+### Types
+
+#### `IntegrationStatus`
+
+Connection status for an integration.
+
+```typescript
+type IntegrationStatus = 'connected' | 'disconnected' | 'pending' | 'error'
+```
+
+### Functions
+
+#### `IntegrationCard(props)`
+
+Card for an integration / external connection (Slack, Stripe, Google
+Drive, bank-link CTAs, etc.). Shows icon + title + description +
+status + action.
+
+```typescript
+function IntegrationCard({
+  icon,
+  title,
+  description,
+  status = 'disconnected',
+  action,
+  variant = 'card',
+  className,
+  dataMolId,
+}: IntegrationCardProps): JSX.Element
+```
+
+- `props` — Component props (see {@link IntegrationCardProps}).
+
+## Injection Notes
+
+### Requirements
+
+Peer dependencies:
+
+- `@molecule/app-react` ^1.0.1
+- `@molecule/app-ui` ^1.0.1
+- `@molecule/app-ui-react` ^1.0.1
+- `react` ^18.0.0 || ^19.0.0
+
+### Runtime Dependencies
+
+- `@molecule/app-react`
+- `@molecule/app-ui`
+- `@molecule/app-ui-react`
+- `react`
+
+- The status label text ('Connected', 'Connecting…', 'Error', 'Not connected') is
+  hardcoded English — there is no i18n hook and no override prop. In a non-English
+  app, render your own translated status next to the card (or hide it via CSS)
+  until the package routes these through `t()`.
+- `variant="cta"` paints an inline `linear-gradient` background over the Card using
+  `var(--color-primary)` (falls back to a fixed blue when the theme token is
+  missing). Inline styles beat ClassMap classes, so this overrides the themed card
+  surface; check text contrast against your primary color before using it.
+- `action.href` renders an anchor wrapping the Button and ignores `action.loading`;
+  prefer `action.onClick` for anything that needs a loading state. While
+  `action.loading` is true the button label is replaced by an ellipsis glyph.
+- Styling resolves through `getClassMap()` — wire a ClassMap bond (e.g.
+  `@molecule/app-ui-tailwind`) before rendering.

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@molecule/app-integration-card-react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Integration / connection card with icon, status, connect/disconnect action",
+  "homepage": "https://www.molecule.dev/packages/app-integration-card-react",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,7 +18,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "keywords": [
     "molecule",
@@ -25,22 +27,27 @@
     "react"
   ],
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/molecule-dev/molecule.git",
+    "directory": "packages/app/features/integration-card-react"
+  },
   "peerDependencies": {
-    "@molecule/app-react": "^1.0.0",
-    "@molecule/app-ui": "^1.0.0",
-    "@molecule/app-ui-react": "^1.0.0",
+    "@molecule/app-react": "^1.0.1",
+    "@molecule/app-ui": "^1.0.1",
+    "@molecule/app-ui-react": "^1.0.1",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@molecule/app-react": "1.0.0",
-    "@molecule/app-ui": "1.0.0",
-    "@molecule/app-ui-react": "1.0.0",
+    "@molecule/app-react": "1.5.1",
+    "@molecule/app-ui": "1.1.1",
+    "@molecule/app-ui-react": "1.0.2",
     "@types/node": "26.1.2",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "typescript": "6.0.3",
-    "vitest": "4.1.10"
+    "vitest": "4.1.11"
   }
 }