@dazl/addons 1.7.2 → 1.9.0
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/dist/addons.json +47 -6
- package/package.json +10 -11
- package/src/globals.d.ts +5 -0
package/dist/addons.json
CHANGED
|
@@ -1,4 +1,19 @@
|
|
|
1
1
|
{
|
|
2
|
+
"ag-grid": {
|
|
3
|
+
"id": "ag-grid",
|
|
4
|
+
"displayName": "AG Grid",
|
|
5
|
+
"description": "A feature-rich data grid",
|
|
6
|
+
"dependencies": [
|
|
7
|
+
"ag-grid-community",
|
|
8
|
+
"ag-grid-react"
|
|
9
|
+
],
|
|
10
|
+
"tags": [
|
|
11
|
+
"data grid",
|
|
12
|
+
"table"
|
|
13
|
+
],
|
|
14
|
+
"homepage": "https://www.ag-grid.com/",
|
|
15
|
+
"exampleUsagePrompt": "Implement a data grid using AG Grid to display and manage tabular data with sorting, filtering, and pagination features."
|
|
16
|
+
},
|
|
2
17
|
"deck-gl": {
|
|
3
18
|
"id": "deck-gl",
|
|
4
19
|
"displayName": "Deck.gl",
|
|
@@ -64,14 +79,11 @@
|
|
|
64
79
|
"displayName": "Image Gallery (Carousel)",
|
|
65
80
|
"description": "Show a collection of images using a carousel gallery",
|
|
66
81
|
"dependencies": [
|
|
67
|
-
"react-image-gallery
|
|
68
|
-
],
|
|
69
|
-
"devDependencies": [
|
|
70
|
-
"@types/react-image-gallery"
|
|
82
|
+
"react-image-gallery"
|
|
71
83
|
],
|
|
72
84
|
"files": {
|
|
73
|
-
"app/components/ui/image-gallery/image-gallery.tsx": "import ImageGallery from \"react-image-gallery\";\nimport \"react-image-gallery/styles/
|
|
74
|
-
"app/components/ui/image-gallery/image-gallery.usage.md": "# Image Gallery\n\
|
|
85
|
+
"app/components/ui/image-gallery/image-gallery.tsx": "import ImageGallery from \"react-image-gallery\";\nimport \"react-image-gallery/styles/image-gallery.css\";\n\nexport type * from \"react-image-gallery\";\nexport { ImageGallery };\n",
|
|
86
|
+
"app/components/ui/image-gallery/image-gallery.usage.md": "# Image Gallery\n\nA responsive, customizable image gallery component for React.\n\n## Features\n\n| Feature | Description |\n| ----------------- | --------------------------------------------------------- |\n| **Mobile Swipe** | Native touch gestures for smooth mobile navigation |\n| **Thumbnails** | Customizable thumbnail navigation with multiple positions |\n| **Fullscreen** | Browser fullscreen or CSS-based fullscreen modes |\n| **Theming** | CSS custom properties for easy styling |\n| **Keyboard Nav** | Arrow keys, escape, and custom key bindings |\n| **RTL Support** | Right-to-left language support |\n| **Vertical Mode** | Slide vertically instead of horizontally |\n| **Custom Slides** | Render videos, iframes, or any custom content |\n\n### Usage\n\n```tsx\nimport { ImageGallery, type GalleryItem } from \"~/components/ui/image-gallery/image-gallery\";\nimport { useRef } from \"react\";\n\nconst images: GalleryItem[] = [\n {\n original: \"https://picsum.photos/id/1018/1000/600/\",\n thumbnail: \"https://picsum.photos/id/1018/250/150/\",\n },\n {\n original: \"https://picsum.photos/id/1015/1000/600/\",\n thumbnail: \"https://picsum.photos/id/1015/250/150/\",\n },\n {\n original: \"https://picsum.photos/id/1019/1000/600/\",\n thumbnail: \"https://picsum.photos/id/1019/250/150/\",\n },\n];\n\nexport default function Home() {\n return (\n <ImageGallery items={images} />;\n );\n}\n```\n\n## Props\n\n- `items`: (required) Array of objects. Available properties:\n - `original` - image source URL\n - `thumbnail` - thumbnail source URL\n - `fullscreen` - fullscreen image URL (defaults to original)\n - `originalHeight` - image height (html5 attribute)\n - `originalWidth` - image width (html5 attribute)\n - `loading` - \"lazy\" or \"eager\" (HTML5 attribute)\n - `thumbnailHeight` - image height (html5 attribute)\n - `thumbnailWidth` - image width (html5 attribute)\n - `thumbnailLoading` - \"lazy\" or \"eager\" (HTML5 attribute)\n - `originalClass` - custom image class\n - `thumbnailClass` - custom thumbnail class\n - `renderItem` - Function for custom rendering a specific slide (see renderItem below)\n - `renderThumbInner` - Function for custom thumbnail renderer (see renderThumbInner below)\n - `originalAlt` - image alt\n - `thumbnailAlt` - thumbnail image alt\n - `originalTitle` - image title\n - `thumbnailTitle` - thumbnail image title\n - `thumbnailLabel` - label for thumbnail\n - `description` - description for image\n - `srcSet` - image srcset (html5 attribute)\n - `sizes` - image sizes (html5 attribute)\n - `bulletClass` - extra class for the bullet of the item\n- `infinite`: Boolean, default `true` - loop infinitely\n- `lazyLoad`: Boolean, default `false`\n- `showNav`: Boolean, default `true`\n- `showThumbnails`: Boolean, default `true`\n- `thumbnailPosition`: String, default `bottom` - options: `top`, `right`, `bottom`, `left`\n- `showFullscreenButton`: Boolean, default `true`\n- `useBrowserFullscreen`: Boolean, default `true` - if false, uses CSS-based fullscreen\n- `useTranslate3D`: Boolean, default `true` - if false, uses `translate` instead of `translate3d`\n- `showPlayButton`: Boolean, default `true`\n- `isRTL`: Boolean, default `false` - right-to-left mode\n- `showBullets`: Boolean, default `false`\n- `maxBullets`: Number, default `undefined` - max bullets shown (minimum 3, active bullet stays centered)\n- `showIndex`: Boolean, default `false`\n- `autoPlay`: Boolean, default `false`\n- `disableThumbnailScroll`: Boolean, default `false` - disable thumbnail auto-scroll\n- `disableKeyDown`: Boolean, default `false` - disable keyboard navigation\n- `disableSwipe`: Boolean, default `false`\n- `disableThumbnailSwipe`: Boolean, default `false`\n- `onErrorImageURL`: String, default `undefined` - fallback image URL for failed loads\n- `indexSeparator`: String, default `' / '`, ignored if `showIndex` is false\n- `slideDuration`: Number, default `550` - slide transition duration (ms)\n- `swipingTransitionDuration`: Number, default `0` - transition duration while swiping (ms)\n- `slideInterval`: Number, default `3000`\n- `slideOnThumbnailOver`: Boolean, default `false`\n- `slideVertically`: Boolean, default `false` - slide vertically instead of horizontally\n- `flickThreshold`: Number, default `0.4` - swipe velocity threshold (lower = more sensitive)\n- `swipeThreshold`: Number, default `30` - percentage of slide width needed to trigger navigation\n- `stopPropagation`: Boolean, default `false` - call stopPropagation on swipe events\n- `startIndex`: Number, default `0`\n- `onImageError`: Function, `callback(event)` - overrides `onErrorImageURL`\n- `onThumbnailError`: Function, `callback(event)` - overrides `onErrorImageURL`\n- `onThumbnailClick`: Function, `callback(event, index)`\n- `onBulletClick`: Function, `callback(event, index)`\n- `onImageLoad`: Function, `callback(event)`\n- `onSlide`: Function, `callback(currentIndex)`\n- `onBeforeSlide`: Function, `callback(nextIndex)`\n- `onScreenChange`: Function, `callback(isFullscreen)`\n- `onPause`: Function, `callback(currentIndex)`\n- `onPlay`: Function, `callback(currentIndex)`\n- `onClick`: Function, `callback(event)`\n- `onTouchMove`: Function, `callback(event) on gallery slide`\n- `onTouchEnd`: Function, `callback(event) on gallery slide`\n- `onTouchStart`: Function, `callback(event) on gallery slide`\n- `onMouseOver`: Function, `callback(event) on gallery slide`\n- `onMouseLeave`: Function, `callback(event) on gallery slide`\n- `additionalClass`: String, additional class for the root node\n- `renderCustomControls`: Function, render custom controls on the current slide\n- `renderItem`: Function, custom slide rendering\n- `renderThumbInner`: Function, custom thumbnail rendering\n- `renderLeftNav`: Function, custom left nav component\n- `renderRightNav`: Function, custom right nav component\n- `renderTopNav`: Function, custom top nav component (vertical mode)\n- `renderBottomNav`: Function, custom bottom nav component (vertical mode)\n- `renderPlayPauseButton`: Function, custom play/pause button\n- `renderFullscreenButton`: Function, custom fullscreen button\n- `useWindowKeyDown`: Boolean, default `true` - use window or element for key events\n\n## Functions\n\nThe following functions can be accessed using [refs](https://reactjs.org/docs/refs-and-the-dom.html)\n\n- `play()`: starts the slideshow\n- `pause()`: pauses the slideshow\n- `togglePlay()`: toggles between play and pause\n- `fullScreen()`: enters fullscreen mode\n- `exitFullScreen()`: exits fullscreen mode\n- `toggleFullScreen()`: toggles fullscreen mode\n- `slideToIndex(index)`: slides to a specific index\n- `getCurrentIndex()`: returns the current index\n"
|
|
75
87
|
},
|
|
76
88
|
"tags": [
|
|
77
89
|
"images",
|
|
@@ -83,6 +95,20 @@
|
|
|
83
95
|
"homepage": "https://linxtion.com/demo/react-image-gallery/",
|
|
84
96
|
"exampleUsagePrompt": "Create an image gallery carousel that displays a series of images with thumbnails and navigation controls."
|
|
85
97
|
},
|
|
98
|
+
"lexical": {
|
|
99
|
+
"id": "lexical",
|
|
100
|
+
"displayName": "Lexical",
|
|
101
|
+
"description": "A powerful and extensible text editor framework for React",
|
|
102
|
+
"dependencies": [
|
|
103
|
+
"lexical"
|
|
104
|
+
],
|
|
105
|
+
"tags": [
|
|
106
|
+
"editor",
|
|
107
|
+
"rich text"
|
|
108
|
+
],
|
|
109
|
+
"homepage": "https://lexical.dev/",
|
|
110
|
+
"exampleUsagePrompt": "Set up a basic text editor using Lexical to provide rich text editing capabilities."
|
|
111
|
+
},
|
|
86
112
|
"mermaid": {
|
|
87
113
|
"id": "mermaid",
|
|
88
114
|
"displayName": "Mermaid",
|
|
@@ -100,6 +126,21 @@
|
|
|
100
126
|
"homepage": "https://mermaid.js.org/",
|
|
101
127
|
"exampleUsagePrompt": "Create a flowchart diagram using Mermaid syntax to illustrate the process of user authentication in a web application."
|
|
102
128
|
},
|
|
129
|
+
"monaco-editor": {
|
|
130
|
+
"id": "monaco-editor",
|
|
131
|
+
"displayName": "Monaco Editor",
|
|
132
|
+
"description": "A powerful code editor for the web, used in VS Code",
|
|
133
|
+
"dependencies": [
|
|
134
|
+
"monaco-editor"
|
|
135
|
+
],
|
|
136
|
+
"tags": [
|
|
137
|
+
"editor",
|
|
138
|
+
"code",
|
|
139
|
+
"IDE"
|
|
140
|
+
],
|
|
141
|
+
"homepage": "https://microsoft.github.io/monaco-editor/",
|
|
142
|
+
"exampleUsagePrompt": "Create a code editor instance using Monaco Editor to provide syntax highlighting and autocompletion for selected languages."
|
|
143
|
+
},
|
|
103
144
|
"motion": {
|
|
104
145
|
"id": "motion",
|
|
105
146
|
"displayName": "Motion",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dazl/addons",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.9.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Add-ons for Dazl",
|
|
6
6
|
"exports": {
|
|
@@ -23,16 +23,15 @@
|
|
|
23
23
|
"@types/node": "24",
|
|
24
24
|
"@types/react": "^19.2.14",
|
|
25
25
|
"@types/react-dom": "^19.2.3",
|
|
26
|
-
"@types/react-image-gallery": "^1.2.4",
|
|
27
26
|
"classnames": "^2.5.1",
|
|
28
|
-
"mocha": "12.0.0-beta-
|
|
29
|
-
"motion": "^12.
|
|
30
|
-
"prettier": "^3.8.
|
|
31
|
-
"react": "^19.2.
|
|
32
|
-
"react-dom": "^19.2.
|
|
33
|
-
"react-image-gallery": "^1.
|
|
34
|
-
"typescript": "~
|
|
35
|
-
"zod": "^4.3
|
|
27
|
+
"mocha": "12.0.0-beta-9.2",
|
|
28
|
+
"motion": "^12.38.0",
|
|
29
|
+
"prettier": "^3.8.3",
|
|
30
|
+
"react": "^19.2.6",
|
|
31
|
+
"react-dom": "^19.2.6",
|
|
32
|
+
"react-image-gallery": "^2.1.2",
|
|
33
|
+
"typescript": "~6.0.3",
|
|
34
|
+
"zod": "^4.4.3"
|
|
36
35
|
},
|
|
37
36
|
"repository": {
|
|
38
37
|
"type": "git",
|
|
@@ -45,7 +44,7 @@
|
|
|
45
44
|
"url": "https://github.com/dazl-dev/dazl-addons/issues"
|
|
46
45
|
},
|
|
47
46
|
"publishConfig": {
|
|
48
|
-
"access": "
|
|
47
|
+
"access": "public"
|
|
49
48
|
},
|
|
50
49
|
"files": [
|
|
51
50
|
"dist",
|