@veztraa/report-designer 0.1.0 → 0.1.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 +110 -0
- package/package.json +15 -11
package/README.md
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
# @veztraa/report-designer
|
|
2
|
+
|
|
3
|
+
Embeddable React PDF report designer component for ReportForge. Drop `<ReportDesigner />` into any React app and give your users a full visual report builder — drag-and-drop canvas, live PDF preview, undo/redo, dark mode, and more.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @veztraa/report-designer @veztraa/report-renderer
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { ReportDesigner } from "@veztraa/report-designer";
|
|
15
|
+
import "@veztraa/report-designer/dist/style.css";
|
|
16
|
+
|
|
17
|
+
export default function App() {
|
|
18
|
+
return (
|
|
19
|
+
<div style={{ height: "100vh" }}>
|
|
20
|
+
<ReportDesigner
|
|
21
|
+
theme="light"
|
|
22
|
+
accentColor="#6c63ff"
|
|
23
|
+
onChange={(template) => console.log(template)}
|
|
24
|
+
/>
|
|
25
|
+
</div>
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
> The designer fills its parent container — set a `height` on the parent (e.g. `100vh` or a fixed px value).
|
|
31
|
+
|
|
32
|
+
## Props
|
|
33
|
+
|
|
34
|
+
| Prop | Type | Description |
|
|
35
|
+
|---|---|---|
|
|
36
|
+
| `report` | `Template` | Load a template into the designer. Updates when the prop changes. |
|
|
37
|
+
| `data` | `string \| object` | Sample data for `{{field}}` preview bindings. |
|
|
38
|
+
| `onDataChange` | `(data: string) => void` | Called when the user edits data inside the designer. |
|
|
39
|
+
| `theme` | `"light" \| "dark"` | Controlled color theme. |
|
|
40
|
+
| `onThemeChange` | `(theme: string) => void` | Called when the user clicks the theme toggle. |
|
|
41
|
+
| `accentColor` | `string` | Primary accent color (6-digit hex, e.g. `"#6c63ff"`). |
|
|
42
|
+
| `defaultZoom` | `number` | Initial zoom level (0.25–2.0). Default: `1`. |
|
|
43
|
+
| `toolbar` | `ToolbarConfig` | Show/hide or override toolbar actions. |
|
|
44
|
+
| `elements` | `ElementsConfig` | Whitelist or blacklist element types in the palette. |
|
|
45
|
+
| `style` | `CSSProperties` | Inline styles on the root container. |
|
|
46
|
+
| `className` | `string` | Extra CSS classes on the root container. |
|
|
47
|
+
|
|
48
|
+
## Controlled Template
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
const [template, setTemplate] = useState(initialTemplate);
|
|
52
|
+
|
|
53
|
+
<ReportDesigner
|
|
54
|
+
report={template}
|
|
55
|
+
onChange={setTemplate}
|
|
56
|
+
/>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## Toolbar Customization
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
<ReportDesigner
|
|
63
|
+
toolbar={{
|
|
64
|
+
actions: {
|
|
65
|
+
save: {
|
|
66
|
+
label: "Save",
|
|
67
|
+
onClick: () => saveToServer(template),
|
|
68
|
+
},
|
|
69
|
+
load: false, // hide the Load button
|
|
70
|
+
},
|
|
71
|
+
}}
|
|
72
|
+
/>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Element Palette Control
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
// Only show specific elements
|
|
79
|
+
<ReportDesigner elements={{ allow: ["text", "table", "image"] }} />
|
|
80
|
+
|
|
81
|
+
// Hide specific elements
|
|
82
|
+
<ReportDesigner elements={{ deny: ["chart", "barcode", "qrcode"] }} />
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## Generating the PDF
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
import { render } from "@veztraa/report-renderer";
|
|
89
|
+
|
|
90
|
+
const pdf = await render(template, data);
|
|
91
|
+
const blob = new Blob([pdf], { type: "application/pdf" });
|
|
92
|
+
window.open(URL.createObjectURL(blob));
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## Features
|
|
96
|
+
|
|
97
|
+
- Drag-and-drop canvas (div-based, no Fabric.js)
|
|
98
|
+
- Snap-to-grid with alignment guides
|
|
99
|
+
- Resize handles on all 8 corners/edges
|
|
100
|
+
- 50-step undo/redo
|
|
101
|
+
- Live PDF preview panel
|
|
102
|
+
- Dark / light theme
|
|
103
|
+
- Header, body, footer sections
|
|
104
|
+
- Layers panel with lock/hide/reorder
|
|
105
|
+
- Data panel for `{{field}}` preview bindings
|
|
106
|
+
- Keyboard shortcuts: `Del` delete, `Ctrl+Z` undo, `Ctrl+D` duplicate, arrow nudge
|
|
107
|
+
|
|
108
|
+
## License
|
|
109
|
+
|
|
110
|
+
MIT © [Veztraa Innovations](https://veztraa.com)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veztraa/report-designer",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Embeddable React PDF report designer component",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -14,21 +14,20 @@
|
|
|
14
14
|
},
|
|
15
15
|
"./style.css": "./dist/style.css"
|
|
16
16
|
},
|
|
17
|
-
"files": [
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
"clean": "rm -rf dist"
|
|
17
|
+
"files": [
|
|
18
|
+
"dist"
|
|
19
|
+
],
|
|
20
|
+
"publishConfig": {
|
|
21
|
+
"access": "public"
|
|
23
22
|
},
|
|
24
23
|
"peerDependencies": {
|
|
25
24
|
"react": "^18.0.0 || ^19.0.0",
|
|
26
25
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
27
26
|
},
|
|
28
27
|
"dependencies": {
|
|
29
|
-
"
|
|
30
|
-
"@veztraa/report-
|
|
31
|
-
"
|
|
28
|
+
"zustand": "^5.0.2",
|
|
29
|
+
"@veztraa/report-core": "0.1.2",
|
|
30
|
+
"@veztraa/report-renderer": "0.1.2"
|
|
32
31
|
},
|
|
33
32
|
"devDependencies": {
|
|
34
33
|
"@react-pdf/renderer": "^4.1.6",
|
|
@@ -46,5 +45,10 @@
|
|
|
46
45
|
"typescript": "^5.7.2",
|
|
47
46
|
"vite": "^6.0.5",
|
|
48
47
|
"vite-plugin-dts": "^4.3.0"
|
|
48
|
+
},
|
|
49
|
+
"scripts": {
|
|
50
|
+
"build": "vite build",
|
|
51
|
+
"dev": "vite build --watch",
|
|
52
|
+
"clean": "rm -rf dist"
|
|
49
53
|
}
|
|
50
|
-
}
|
|
54
|
+
}
|