@molecule/app-inbox-row-react 1.0.0 → 1.0.1
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.
- package/README.md +143 -0
- package/package.json +14 -8
package/README.md
ADDED
|
@@ -0,0 +1,143 @@
|
|
|
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:06.853Z
|
|
7
|
+
-->
|
|
8
|
+
|
|
9
|
+
# @molecule/app-inbox-row-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
|
+
Inbox / email message list row.
|
|
16
|
+
|
|
17
|
+
Exports `<InboxRow>`.
|
|
18
|
+
|
|
19
|
+
## Quick Start
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { InboxRow } from '@molecule/app-inbox-row-react'
|
|
23
|
+
|
|
24
|
+
;<InboxRow
|
|
25
|
+
sender="Alice Johnson"
|
|
26
|
+
senderAvatarSrc="https://example.com/alice.jpg"
|
|
27
|
+
subject="Q3 report is ready"
|
|
28
|
+
preview="Hi, I've attached the final numbers for review..."
|
|
29
|
+
timestamp="10:42 AM"
|
|
30
|
+
unread={true}
|
|
31
|
+
starred={false}
|
|
32
|
+
hasAttachment={true}
|
|
33
|
+
onClick={() => openMessage(msg.id)}
|
|
34
|
+
onToggleStar={() => toggleStar(msg.id)}
|
|
35
|
+
/>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Type
|
|
39
|
+
|
|
40
|
+
`feature`
|
|
41
|
+
|
|
42
|
+
## Installation
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
npm install @molecule/app-inbox-row-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
|
|
46
|
+
npm install -D @types/react
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## API
|
|
50
|
+
|
|
51
|
+
### Interfaces
|
|
52
|
+
|
|
53
|
+
#### `InboxRowProps`
|
|
54
|
+
|
|
55
|
+
Props for {@link InboxRow}.
|
|
56
|
+
|
|
57
|
+
```typescript
|
|
58
|
+
interface InboxRowProps {
|
|
59
|
+
/** Sender display. */
|
|
60
|
+
sender: ReactNode
|
|
61
|
+
/** Avatar URL fallback for sender. */
|
|
62
|
+
senderAvatarSrc?: string
|
|
63
|
+
/** Subject / headline. */
|
|
64
|
+
subject: ReactNode
|
|
65
|
+
/** Preview / first line of body. */
|
|
66
|
+
preview?: ReactNode
|
|
67
|
+
/** Display timestamp. */
|
|
68
|
+
timestamp?: ReactNode
|
|
69
|
+
/** Whether the message is unread (drives bold + dot). */
|
|
70
|
+
unread?: boolean
|
|
71
|
+
/** Whether the message is starred / flagged. */
|
|
72
|
+
starred?: boolean
|
|
73
|
+
/** Optional attachment indicator. */
|
|
74
|
+
hasAttachment?: boolean
|
|
75
|
+
/** Optional labels / tags chip row. */
|
|
76
|
+
labels?: ReactNode
|
|
77
|
+
/** Right-side selection slot (checkbox). */
|
|
78
|
+
selectionSlot?: ReactNode
|
|
79
|
+
/** Click handler — typically opens the message. */
|
|
80
|
+
onClick?: () => void
|
|
81
|
+
/** Star toggle. */
|
|
82
|
+
onToggleStar?: () => void
|
|
83
|
+
/** Extra classes. */
|
|
84
|
+
className?: string
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Functions
|
|
89
|
+
|
|
90
|
+
#### `InboxRow(props)`
|
|
91
|
+
|
|
92
|
+
Inbox / email message list row — sender + subject + preview +
|
|
93
|
+
timestamp + unread/star indicators. Generalizes beyond email to any
|
|
94
|
+
"message list" UI (chat lists, notification archives, ticket queues).
|
|
95
|
+
|
|
96
|
+
```typescript
|
|
97
|
+
function InboxRow({
|
|
98
|
+
sender,
|
|
99
|
+
senderAvatarSrc,
|
|
100
|
+
subject,
|
|
101
|
+
preview,
|
|
102
|
+
timestamp,
|
|
103
|
+
unread,
|
|
104
|
+
starred,
|
|
105
|
+
hasAttachment,
|
|
106
|
+
labels,
|
|
107
|
+
selectionSlot,
|
|
108
|
+
onClick,
|
|
109
|
+
onToggleStar,
|
|
110
|
+
className,
|
|
111
|
+
}: InboxRowProps): React.JSX.Element
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
- `props` — Component props (see {@link InboxRowProps}).
|
|
115
|
+
|
|
116
|
+
## Injection Notes
|
|
117
|
+
|
|
118
|
+
### Requirements
|
|
119
|
+
|
|
120
|
+
Peer dependencies:
|
|
121
|
+
|
|
122
|
+
- `@molecule/app-react` ^1.0.1
|
|
123
|
+
- `@molecule/app-ui` ^1.0.1
|
|
124
|
+
- `@molecule/app-ui-react` ^1.0.1
|
|
125
|
+
- `react` ^18.0.0 || ^19.0.0
|
|
126
|
+
|
|
127
|
+
### Runtime Dependencies
|
|
128
|
+
|
|
129
|
+
- `@molecule/app-react`
|
|
130
|
+
- `@molecule/app-ui`
|
|
131
|
+
- `@molecule/app-ui-react`
|
|
132
|
+
- `react`
|
|
133
|
+
|
|
134
|
+
- Star/attachment indicators use fixed colors and emoji with hardcoded
|
|
135
|
+
English aria-labels ("Star"/"Unstar"/"Has attachment") — there is no
|
|
136
|
+
companion locale bond yet; wrap or fork for fully localized apps.
|
|
137
|
+
- When `sender` is not a plain string, the avatar's accessible name falls
|
|
138
|
+
back to the literal "Sender" — pass a string `sender` (or your own
|
|
139
|
+
`selectionSlot`) when screen-reader naming matters.
|
|
140
|
+
- `unread` bolds the row via an inline `fontWeight: 600` and renders a
|
|
141
|
+
fixed blue dot — the dot color does not follow the theme.
|
|
142
|
+
- `getClassMap()` requires a bonded ClassMap; `<Avatar>` comes from
|
|
143
|
+
`@molecule/app-ui-react`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@molecule/app-inbox-row-react",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Email / notification inbox row — sender + subject + preview + time + unread dot",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
"files": [
|
|
20
|
-
"dist"
|
|
20
|
+
"dist",
|
|
21
|
+
"README.md"
|
|
21
22
|
],
|
|
22
23
|
"keywords": [
|
|
23
24
|
"molecule",
|
|
@@ -25,16 +26,21 @@
|
|
|
25
26
|
"react"
|
|
26
27
|
],
|
|
27
28
|
"license": "Apache-2.0",
|
|
29
|
+
"repository": {
|
|
30
|
+
"type": "git",
|
|
31
|
+
"url": "https://github.com/molecule-dev/molecule.git",
|
|
32
|
+
"directory": "packages/app/features/inbox-row-react"
|
|
33
|
+
},
|
|
28
34
|
"peerDependencies": {
|
|
29
|
-
"@molecule/app-react": "^1.0.
|
|
30
|
-
"@molecule/app-ui": "^1.0.
|
|
31
|
-
"@molecule/app-ui-react": "^1.0.
|
|
35
|
+
"@molecule/app-react": "^1.0.1",
|
|
36
|
+
"@molecule/app-ui": "^1.0.1",
|
|
37
|
+
"@molecule/app-ui-react": "^1.0.1",
|
|
32
38
|
"react": "^18.0.0 || ^19.0.0"
|
|
33
39
|
},
|
|
34
40
|
"devDependencies": {
|
|
35
|
-
"@molecule/app-react": "1.0.
|
|
36
|
-
"@molecule/app-ui": "1.0.
|
|
37
|
-
"@molecule/app-ui-react": "1.0.
|
|
41
|
+
"@molecule/app-react": "1.0.1",
|
|
42
|
+
"@molecule/app-ui": "1.0.1",
|
|
43
|
+
"@molecule/app-ui-react": "1.0.1",
|
|
38
44
|
"@types/node": "26.1.2",
|
|
39
45
|
"@types/react": "19.2.17",
|
|
40
46
|
"@types/react-dom": "19.2.3",
|