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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +165 -0
  2. package/package.json +16 -9
package/README.md ADDED
@@ -0,0 +1,165 @@
1
+ <!--
2
+ AUTO-GENERATED — DO NOT EDIT THIS FILE.
3
+ Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
4
+ Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
5
+ To change this document, edit the module-level JSDoc in src/index.ts.
6
+ Generated: 2026-08-04T01:51:07.231Z
7
+ -->
8
+
9
+ # @molecule/app-info-display-react
10
+
11
+ > **Auto-generated, AI-first package reference** for the [molecule.dev](https://molecule.dev) ecosystem.
12
+ > It is written to be read by coding agents as much as by people, and is generated from this
13
+ > package's source — edit `src/index.ts` JSDoc, not this file.
14
+
15
+ React InfoCard and DefinitionList for structured label/value metadata.
16
+
17
+ Exports:
18
+
19
+ - `<InfoCard>` — Card-wrapped DefinitionList with title, icon, actions.
20
+ - `<DefinitionList>` — standalone label/value grid.
21
+ - `DefinitionField` type.
22
+
23
+ ## Quick Start
24
+
25
+ ```tsx
26
+ import { InfoCard, DefinitionList } from '@molecule/app-info-display-react'
27
+
28
+ ;<InfoCard
29
+ title="Company Details"
30
+ fields={[
31
+ { label: 'Industry', value: 'Technology' },
32
+ { label: 'Founded', value: '2018' },
33
+ { label: 'Employees', value: '120–150' },
34
+ ]}
35
+ columns={2}
36
+ dataMolId="company-info-card"
37
+ />
38
+ ```
39
+
40
+ ## Type
41
+
42
+ `feature`
43
+
44
+ ## Installation
45
+
46
+ ```bash
47
+ npm install @molecule/app-info-display-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
48
+ npm install -D @types/react
49
+ ```
50
+
51
+ ## API
52
+
53
+ ### Interfaces
54
+
55
+ #### `DefinitionField`
56
+
57
+ A single label/value pair rendered inside a DefinitionList.
58
+
59
+ ```typescript
60
+ interface DefinitionField {
61
+ /** Label text (usually `t('...')`). */
62
+ label: ReactNode
63
+ /** Rendered value. */
64
+ value: ReactNode
65
+ /** Optional icon rendered to the left of the label. */
66
+ icon?: ReactNode
67
+ }
68
+ ```
69
+
70
+ #### `DefinitionListProps`
71
+
72
+ Props for {@link DefinitionList}.
73
+
74
+ ```typescript
75
+ interface DefinitionListProps {
76
+ /** Fields to render. */
77
+ fields: DefinitionField[]
78
+ /** Grid column count. */
79
+ columns?: 1 | 2 | 3
80
+ /** Extra classes. */
81
+ className?: string
82
+ }
83
+ ```
84
+
85
+ #### `InfoCardProps`
86
+
87
+ Props for {@link InfoCard}.
88
+
89
+ ```typescript
90
+ interface InfoCardProps {
91
+ /** Card heading. */
92
+ title: ReactNode
93
+ /** Optional leading icon. */
94
+ icon?: ReactNode
95
+ /** Optional right-side header actions (edit button, overflow menu). */
96
+ actions?: ReactNode
97
+ /** Structured fields to display. */
98
+ fields: DefinitionField[]
99
+ /** Grid column count — `1` stacks labels above values, `2+` puts labels beside values. */
100
+ columns?: 1 | 2 | 3
101
+ /** Extra classes on the outer Card. */
102
+ className?: string
103
+ /** `data-mol-id` for AI-agent selectors. */
104
+ dataMolId?: string
105
+ }
106
+ ```
107
+
108
+ ### Functions
109
+
110
+ #### `DefinitionList(props)`
111
+
112
+ Structured label/value pair list. Use standalone or inside
113
+ `<InfoCard>`. Apps pass already-formatted values (dates, currency,
114
+ status pills, etc.) as ReactNodes.
115
+
116
+ ```typescript
117
+ function DefinitionList({ fields, columns = 1, className }: DefinitionListProps): JSX.Element
118
+ ```
119
+
120
+ - `props` — Component props (see {@link DefinitionListProps}).
121
+
122
+ #### `InfoCard(props)`
123
+
124
+ Card wrapping a `<DefinitionList>` of metadata fields.
125
+
126
+ Used all over CRM/helpdesk/finance detail pages (CompanyInfoCard,
127
+ DealInfoCard, TicketDetailsCard, TransactionDetailsCard) — same shape
128
+ everywhere, only the fields differ.
129
+
130
+ ```typescript
131
+ function InfoCard({
132
+ title,
133
+ icon,
134
+ actions,
135
+ fields,
136
+ columns = 1,
137
+ className,
138
+ dataMolId,
139
+ }: InfoCardProps): JSX.Element
140
+ ```
141
+
142
+ - `props` — Component props (see {@link InfoCardProps}).
143
+
144
+ ## Injection Notes
145
+
146
+ ### Requirements
147
+
148
+ Peer dependencies:
149
+
150
+ - `@molecule/app-react` ^1.0.1
151
+ - `@molecule/app-ui` ^1.0.1
152
+ - `@molecule/app-ui-react` ^1.0.1
153
+ - `react` ^18.0.0 || ^19.0.0
154
+
155
+ ### Runtime Dependencies
156
+
157
+ - `@molecule/app-react`
158
+ - `@molecule/app-ui`
159
+ - `@molecule/app-ui-react`
160
+ - `react`
161
+
162
+ Purely presentational: pass already-formatted / already-translated
163
+ ReactNodes as labels and values. `getClassMap()` requires a bonded
164
+ ClassMap (e.g. `@molecule/app-ui-tailwind`) — there is no other wiring.
165
+ `columns={1}` stacks label above value; `2`/`3` arrange fields in a grid.
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@molecule/app-info-display-react",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "InfoCard and DefinitionList for structured label/value metadata display",
5
+ "homepage": "https://www.molecule.dev/packages/app-info-display-react",
5
6
  "type": "module",
6
7
  "main": "dist/index.js",
7
8
  "types": "dist/index.d.ts",
@@ -17,7 +18,8 @@
17
18
  }
18
19
  },
19
20
  "files": [
20
- "dist"
21
+ "dist",
22
+ "README.md"
21
23
  ],
22
24
  "keywords": [
23
25
  "molecule",
@@ -25,22 +27,27 @@
25
27
  "react"
26
28
  ],
27
29
  "license": "Apache-2.0",
30
+ "repository": {
31
+ "type": "git",
32
+ "url": "https://github.com/molecule-dev/molecule.git",
33
+ "directory": "packages/app/features/info-display-react"
34
+ },
28
35
  "peerDependencies": {
29
- "@molecule/app-react": "^1.0.0",
30
- "@molecule/app-ui": "^1.0.0",
31
- "@molecule/app-ui-react": "^1.0.0",
36
+ "@molecule/app-react": "^1.0.1",
37
+ "@molecule/app-ui": "^1.0.1",
38
+ "@molecule/app-ui-react": "^1.0.1",
32
39
  "react": "^18.0.0 || ^19.0.0"
33
40
  },
34
41
  "devDependencies": {
35
- "@molecule/app-react": "1.0.0",
36
- "@molecule/app-ui": "1.0.0",
37
- "@molecule/app-ui-react": "1.0.0",
42
+ "@molecule/app-react": "1.5.1",
43
+ "@molecule/app-ui": "1.1.1",
44
+ "@molecule/app-ui-react": "1.0.2",
38
45
  "@types/node": "26.1.2",
39
46
  "@types/react": "19.2.17",
40
47
  "@types/react-dom": "19.2.3",
41
48
  "react": "19.2.8",
42
49
  "react-dom": "19.2.8",
43
50
  "typescript": "6.0.3",
44
- "vitest": "4.1.10"
51
+ "vitest": "4.1.11"
45
52
  }
46
53
  }