@molecule/app-image-gallery-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.
Files changed (2) hide show
  1. package/README.md +122 -0
  2. package/package.json +14 -8
package/README.md ADDED
@@ -0,0 +1,122 @@
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.498Z
7
+ -->
8
+
9
+ # @molecule/app-image-gallery-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 image gallery.
16
+
17
+ Exports `<ImageGallery>` — main image + thumbnail grid with controlled-optional
18
+ selection and "+N" overflow summarisation.
19
+
20
+ ## Quick Start
21
+
22
+ ```tsx
23
+ import { ImageGallery } from '@molecule/app-image-gallery-react'
24
+
25
+ const images = [
26
+ 'https://example.com/photo-1.jpg',
27
+ 'https://example.com/photo-2.jpg',
28
+ 'https://example.com/photo-3.jpg',
29
+ ]
30
+
31
+ // Uncontrolled — manages its own selected index
32
+ <ImageGallery images={images} maxThumbnails={4} />
33
+
34
+ // Controlled — caller drives selected index
35
+ <ImageGallery images={images} selectedIndex={activeIdx} onSelect={setActiveIdx} />
36
+ ```
37
+
38
+ ## Type
39
+
40
+ `feature`
41
+
42
+ ## Installation
43
+
44
+ ```bash
45
+ npm install @molecule/app-image-gallery-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
+ #### `ImageGalleryProps`
54
+
55
+ Props for {@link ImageGallery}.
56
+
57
+ ```typescript
58
+ interface ImageGalleryProps {
59
+ /** Image URLs in display order. */
60
+ images: string[]
61
+ /** Controlled selected index — caller owns state. */
62
+ selectedIndex?: number
63
+ /** Called when a thumbnail is clicked. */
64
+ onSelect?: (index: number) => void
65
+ /** Max thumbnails shown. Extra are summarised as "+N". */
66
+ maxThumbnails?: number
67
+ /** Alt-text for screen readers. Applied per-image; falls back to `'Image N'`. */
68
+ alts?: string[]
69
+ /** Extra classes on the outer wrapper. */
70
+ className?: string
71
+ }
72
+ ```
73
+
74
+ ### Functions
75
+
76
+ #### `ImageGallery(props)`
77
+
78
+ Main image + thumbnail grid gallery. Controlled-optional: when
79
+ `selectedIndex` is omitted the component tracks its own selection.
80
+
81
+ Used for product images, property listings, portfolio galleries.
82
+
83
+ ```typescript
84
+ function ImageGallery({
85
+ images,
86
+ selectedIndex,
87
+ onSelect,
88
+ maxThumbnails = 4,
89
+ alts,
90
+ className,
91
+ }: ImageGalleryProps): JSX.Element | null
92
+ ```
93
+
94
+ - `props` — Component props (see {@link ImageGalleryProps}).
95
+
96
+ ## Injection Notes
97
+
98
+ ### Requirements
99
+
100
+ Peer dependencies:
101
+
102
+ - `@molecule/app-react` ^1.0.1
103
+ - `@molecule/app-ui` ^1.0.1
104
+ - `@molecule/app-ui-react` ^1.0.1
105
+ - `react` ^18.0.0 || ^19.0.0
106
+
107
+ ### Runtime Dependencies
108
+
109
+ - `@molecule/app-react`
110
+ - `@molecule/app-ui`
111
+ - `@molecule/app-ui-react`
112
+ - `react`
113
+
114
+ - Renders `null` when `images` is empty — no empty-state UI.
115
+ - `maxThumbnails` doubles as the thumbnail grid's column count. Any value is
116
+ safe: it is snapped to the nearest column count the ClassMap grid actually
117
+ supports (1-6 or 12), so a real `grid-cols-*` class is always emitted and
118
+ extra thumbnails wrap onto additional rows instead of collapsing.
119
+ - Default alt text is the English "Image N" — pass `alts` with translated
120
+ strings in localized apps.
121
+ - `getClassMap()` requires a bonded ClassMap (e.g.
122
+ `@molecule/app-ui-tailwind`).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@molecule/app-image-gallery-react",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Main image + thumbnail grid gallery with selection + optional upload",
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/image-gallery-react"
33
+ },
28
34
  "peerDependencies": {
29
- "@molecule/app-react": "^1.0.0",
30
- "@molecule/app-ui": "^1.0.0",
31
- "@molecule/app-ui-react": "^1.0.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.0",
36
- "@molecule/app-ui": "1.0.0",
37
- "@molecule/app-ui-react": "1.0.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",