@molecule/app-job-listing-row-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.
- package/README.md +138 -0
- package/package.json +16 -9
package/README.md
ADDED
|
@@ -0,0 +1,138 @@
|
|
|
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:08.393Z
|
|
7
|
+
-->
|
|
8
|
+
|
|
9
|
+
# @molecule/app-job-listing-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
|
+
Job-board listing row — title + company + location + employment type +
|
|
16
|
+
salary + posted date, with optional leading logo, tag chips, and
|
|
17
|
+
right-side actions.
|
|
18
|
+
|
|
19
|
+
Exports `<JobListingRow>`. Props: `title`, `company?`, `location?`, `type?`,
|
|
20
|
+
`salary?`, `postedAt?`, `leading?`, `tags?`, `actions?`, `onClick?`, `className?`.
|
|
21
|
+
All display props accept ReactNode, so formatting (dates, currency) is the
|
|
22
|
+
caller's job.
|
|
23
|
+
|
|
24
|
+
## Quick Start
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import { JobListingRow } from '@molecule/app-job-listing-row-react'
|
|
28
|
+
|
|
29
|
+
;<JobListingRow
|
|
30
|
+
title="Senior Frontend Engineer"
|
|
31
|
+
company="Acme Corp"
|
|
32
|
+
location="Remote · US"
|
|
33
|
+
type="Full-time"
|
|
34
|
+
salary="$130k–$160k"
|
|
35
|
+
postedAt="2 days ago"
|
|
36
|
+
onClick={() => {
|
|
37
|
+
window.location.href = '/jobs/123'
|
|
38
|
+
}}
|
|
39
|
+
/>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Type
|
|
43
|
+
|
|
44
|
+
`feature`
|
|
45
|
+
|
|
46
|
+
## Installation
|
|
47
|
+
|
|
48
|
+
```bash
|
|
49
|
+
npm install @molecule/app-job-listing-row-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
|
|
50
|
+
npm install -D @types/react
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## API
|
|
54
|
+
|
|
55
|
+
### Interfaces
|
|
56
|
+
|
|
57
|
+
#### `JobListingRowProps`
|
|
58
|
+
|
|
59
|
+
Props for {@link JobListingRow}.
|
|
60
|
+
|
|
61
|
+
```typescript
|
|
62
|
+
interface JobListingRowProps {
|
|
63
|
+
title: ReactNode
|
|
64
|
+
/** Company / employer display. */
|
|
65
|
+
company?: ReactNode
|
|
66
|
+
/** Location string ("Remote · US" / "London, UK"). */
|
|
67
|
+
location?: ReactNode
|
|
68
|
+
/** Employment type ("Full-time", "Contract", "Internship"). */
|
|
69
|
+
type?: ReactNode
|
|
70
|
+
/** Salary range display ("$80k–$120k"). */
|
|
71
|
+
salary?: ReactNode
|
|
72
|
+
/** Posted-at relative or absolute display. */
|
|
73
|
+
postedAt?: ReactNode
|
|
74
|
+
/** Optional company logo / icon. */
|
|
75
|
+
leading?: ReactNode
|
|
76
|
+
/** Optional right-side actions (Save, Apply). */
|
|
77
|
+
actions?: ReactNode
|
|
78
|
+
/** Tags / chips (Remote, React, Hybrid). */
|
|
79
|
+
tags?: ReactNode
|
|
80
|
+
/** Click handler on the row. */
|
|
81
|
+
onClick?: () => void
|
|
82
|
+
/** Extra classes. */
|
|
83
|
+
className?: string
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Functions
|
|
88
|
+
|
|
89
|
+
#### `JobListingRow(props)`
|
|
90
|
+
|
|
91
|
+
Job-board row — title + company + location + type + salary + posted
|
|
92
|
+
date with optional tags and right-side actions.
|
|
93
|
+
|
|
94
|
+
```typescript
|
|
95
|
+
function JobListingRow({
|
|
96
|
+
title,
|
|
97
|
+
company,
|
|
98
|
+
location,
|
|
99
|
+
type,
|
|
100
|
+
salary,
|
|
101
|
+
postedAt,
|
|
102
|
+
leading,
|
|
103
|
+
actions,
|
|
104
|
+
tags,
|
|
105
|
+
onClick,
|
|
106
|
+
className,
|
|
107
|
+
}: JobListingRowProps): JSX.Element
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
- `props` — Component props (see {@link JobListingRowProps}).
|
|
111
|
+
|
|
112
|
+
## Injection Notes
|
|
113
|
+
|
|
114
|
+
### Requirements
|
|
115
|
+
|
|
116
|
+
Peer dependencies:
|
|
117
|
+
|
|
118
|
+
- `@molecule/app-react` ^1.0.1
|
|
119
|
+
- `@molecule/app-ui` ^1.0.1
|
|
120
|
+
- `@molecule/app-ui-react` ^1.0.1
|
|
121
|
+
- `react` ^18.0.0 || ^19.0.0
|
|
122
|
+
|
|
123
|
+
### Runtime Dependencies
|
|
124
|
+
|
|
125
|
+
- `@molecule/app-react`
|
|
126
|
+
- `@molecule/app-ui`
|
|
127
|
+
- `@molecule/app-ui-react`
|
|
128
|
+
- `react`
|
|
129
|
+
|
|
130
|
+
- The location value is prefixed with a hardcoded 📍 glyph and the meta fields
|
|
131
|
+
are joined with literal middle-dot separators; there is no prop to change or
|
|
132
|
+
localise those separators.
|
|
133
|
+
- `onClick` makes the whole row clickable but the root is a plain `<div>` with no
|
|
134
|
+
`role`, `tabIndex`, or keyboard handler — keyboard users can only reach whatever
|
|
135
|
+
you pass in `actions`. Put a real link or button in `actions` when the row is
|
|
136
|
+
the primary navigation affordance.
|
|
137
|
+
- No `data-mol-id` prop is currently supported on this component.
|
|
138
|
+
- Styling resolves through `getClassMap()` — a ClassMap bond must be wired.
|
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@molecule/app-job-listing-row-react",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Job-board row with title, company, location, type, salary range, posted date",
|
|
5
|
+
"homepage": "https://www.molecule.dev/packages/app-job-listing-row-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/job-listing-row-react"
|
|
34
|
+
},
|
|
28
35
|
"peerDependencies": {
|
|
29
|
-
"@molecule/app-react": "^1.0.
|
|
30
|
-
"@molecule/app-ui": "^1.0.
|
|
31
|
-
"@molecule/app-ui-react": "^1.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.
|
|
36
|
-
"@molecule/app-ui": "1.
|
|
37
|
-
"@molecule/app-ui-react": "1.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.
|
|
51
|
+
"vitest": "4.1.11"
|
|
45
52
|
}
|
|
46
53
|
}
|