@molecule/app-info-display-react 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,165 @@
+<!--
+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:07.231Z
+-->
+
+# @molecule/app-info-display-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 InfoCard and DefinitionList for structured label/value metadata.
+
+Exports:
+
+- `<InfoCard>` — Card-wrapped DefinitionList with title, icon, actions.
+- `<DefinitionList>` — standalone label/value grid.
+- `DefinitionField` type.
+
+## Quick Start
+
+```tsx
+import { InfoCard, DefinitionList } from '@molecule/app-info-display-react'
+
+;<InfoCard
+  title="Company Details"
+  fields={[
+    { label: 'Industry', value: 'Technology' },
+    { label: 'Founded', value: '2018' },
+    { label: 'Employees', value: '120–150' },
+  ]}
+  columns={2}
+  dataMolId="company-info-card"
+/>
+```
+
+## Type
+
+`feature`
+
+## Installation
+
+```bash
+npm install @molecule/app-info-display-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
+npm install -D @types/react
+```
+
+## API
+
+### Interfaces
+
+#### `DefinitionField`
+
+A single label/value pair rendered inside a DefinitionList.
+
+```typescript
+interface DefinitionField {
+  /** Label text (usually `t('...')`). */
+  label: ReactNode
+  /** Rendered value. */
+  value: ReactNode
+  /** Optional icon rendered to the left of the label. */
+  icon?: ReactNode
+}
+```
+
+#### `DefinitionListProps`
+
+Props for {@link DefinitionList}.
+
+```typescript
+interface DefinitionListProps {
+  /** Fields to render. */
+  fields: DefinitionField[]
+  /** Grid column count. */
+  columns?: 1 | 2 | 3
+  /** Extra classes. */
+  className?: string
+}
+```
+
+#### `InfoCardProps`
+
+Props for {@link InfoCard}.
+
+```typescript
+interface InfoCardProps {
+  /** Card heading. */
+  title: ReactNode
+  /** Optional leading icon. */
+  icon?: ReactNode
+  /** Optional right-side header actions (edit button, overflow menu). */
+  actions?: ReactNode
+  /** Structured fields to display. */
+  fields: DefinitionField[]
+  /** Grid column count — `1` stacks labels above values, `2+` puts labels beside values. */
+  columns?: 1 | 2 | 3
+  /** Extra classes on the outer Card. */
+  className?: string
+  /** `data-mol-id` for AI-agent selectors. */
+  dataMolId?: string
+}
+```
+
+### Functions
+
+#### `DefinitionList(props)`
+
+Structured label/value pair list. Use standalone or inside
+`<InfoCard>`. Apps pass already-formatted values (dates, currency,
+status pills, etc.) as ReactNodes.
+
+```typescript
+function DefinitionList({ fields, columns = 1, className }: DefinitionListProps): JSX.Element
+```
+
+- `props` — Component props (see {@link DefinitionListProps}).
+
+#### `InfoCard(props)`
+
+Card wrapping a `<DefinitionList>` of metadata fields.
+
+Used all over CRM/helpdesk/finance detail pages (CompanyInfoCard,
+DealInfoCard, TicketDetailsCard, TransactionDetailsCard) — same shape
+everywhere, only the fields differ.
+
+```typescript
+function InfoCard({
+  title,
+  icon,
+  actions,
+  fields,
+  columns = 1,
+  className,
+  dataMolId,
+}: InfoCardProps): JSX.Element
+```
+
+- `props` — Component props (see {@link InfoCardProps}).
+
+## 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`
+
+Purely presentational: pass already-formatted / already-translated
+ReactNodes as labels and values. `getClassMap()` requires a bonded
+ClassMap (e.g. `@molecule/app-ui-tailwind`) — there is no other wiring.
+`columns={1}` stacks label above value; `2`/`3` arrange fields in a grid.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molecule/app-info-display-react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "InfoCard and DefinitionList for structured label/value metadata display",
   "type": "module",
   "main": "dist/index.js",
@@ -17,7 +17,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "keywords": [
     "molecule",
@@ -25,16 +26,21 @@
     "react"
   ],
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/molecule-dev/molecule.git",
+    "directory": "packages/app/features/info-display-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.0.1",
+    "@molecule/app-ui": "1.0.1",
+    "@molecule/app-ui-react": "1.0.1",
     "@types/node": "26.1.2",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",