@stratametriq/id-card-designer 1.7.0 → 1.7.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/LICENSE +13 -16
- package/README.md +163 -171
- package/dist/index.es.js +1798 -1766
- package/dist/index.js +70 -70
- package/package.json +14 -20
package/LICENSE
CHANGED
|
@@ -1,21 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
STRATAMETRIQ DUAL LICENSE
|
|
2
2
|
|
|
3
3
|
Copyright (c) 2026 Stratametriq
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
5
|
+
This software is licensed under a dual-tier model:
|
|
11
6
|
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
1. COMMUNITY TIER (Non-Commercial Use)
|
|
8
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to use, copy, modify, merge, publish, and distribute the Software solely for personal, educational, open-source, or non-commercial purposes.
|
|
14
9
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
10
|
+
You may NOT use this Software in any commercial product, for-profit SaaS application, internal corporate tool, or revenue-generating service without purchasing a Commercial Enterprise License.
|
|
11
|
+
|
|
12
|
+
2. COMMERCIAL ENTERPRISE TIER (Commercial Use)
|
|
13
|
+
If you intend to use this Software in a commercial capacity (e.g., School ERP systems, HR suites, SaaS platforms, or production deployments within a for-profit organization), you MUST purchase a valid Commercial Enterprise License.
|
|
14
|
+
|
|
15
|
+
A Commercial Enterprise License can be purchased at:
|
|
16
|
+
https://waniabid.gumroad.com/l/id-card-designer-pro
|
|
17
|
+
|
|
18
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,254 +1,246 @@
|
|
|
1
1
|
# 📦 @stratametriq/id-card-designer
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
3
|
A universal, dynamic, and highly customizable **ID Card Designer & Batch Print Dashboard** for React, Vue, Angular, and Vanilla JS.
|
|
8
4
|
|
|
9
|
-
|
|
5
|
+
> **Current release:** 1.7.0
|
|
10
6
|
|
|
11
7
|
---
|
|
12
8
|
|
|
13
9
|
## 📑 Table of Contents
|
|
14
10
|
|
|
15
|
-
- [
|
|
16
|
-
- [
|
|
11
|
+
- [Overview](#overview)
|
|
12
|
+
- [Live Demo](#live-demo)
|
|
17
13
|
- [Features](#features)
|
|
18
|
-
- [
|
|
19
|
-
- [
|
|
20
|
-
- [
|
|
21
|
-
- [
|
|
22
|
-
- [
|
|
14
|
+
- [How It Works](#how-it-works)
|
|
15
|
+
- [Import Data](#import-data)
|
|
16
|
+
- [Design Cards](#design-cards)
|
|
17
|
+
- [Batch Printing](#batch-printing)
|
|
18
|
+
- [Offline Mode](#offline-mode)
|
|
19
|
+
- [Privacy](#privacy)
|
|
20
|
+
- [Developer Docs](#developer-docs)
|
|
21
|
+
- [NPM](#npm)
|
|
22
|
+
- [Pricing / License](#pricing--license)
|
|
23
23
|
- [FAQ](#faq)
|
|
24
|
-
- [License](#license)
|
|
25
24
|
|
|
26
25
|
---
|
|
27
26
|
|
|
28
|
-
##
|
|
27
|
+
## Overview
|
|
29
28
|
|
|
30
|
-
|
|
29
|
+
`@stratametriq/id-card-designer` is a developer-focused ID-card design and generation package.
|
|
31
30
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
31
|
+
It is designed for applications such as:
|
|
32
|
+
- Student Information Systems
|
|
33
|
+
- School and College ERP systems
|
|
34
|
+
- HR and Employee Management systems
|
|
35
|
+
- Event and Conference Badge systems
|
|
36
|
+
- Membership systems
|
|
37
|
+
- Internal identity-card workflows
|
|
37
38
|
|
|
38
|
-
|
|
39
|
+
The package combines **visual card design** with **structured data and batch generation** so developers do not need to build an ID-card production workflow from scratch.
|
|
39
40
|
|
|
40
|
-
|
|
41
|
+
---
|
|
41
42
|
|
|
42
|
-
|
|
43
|
+
## Live Demo
|
|
43
44
|
|
|
44
45
|
You can launch a complete ID card design studio and batch print dashboard with just **two lines of code**. It comes with pre-built dummy data so you can test it immediately!
|
|
45
46
|
|
|
46
|
-
|
|
47
|
-
import { IdCardManager } from '@stratametriq/id-card-designer';
|
|
48
|
-
import '@stratametriq/id-card-designer/dist/index.css';
|
|
49
|
-
|
|
50
|
-
export default function App() {
|
|
51
|
-
// This will render the complete turnkey dashboard with demo data!
|
|
52
|
-
return <IdCardManager />;
|
|
53
|
-
}
|
|
54
|
-
```
|
|
47
|
+
### 🚀 [Try the Live Interactive Demo on StackBlitz](https://stackblitz.com/edit/vitejs-vite-jtyvdj5g?file=src%2FApp.tsx)
|
|
55
48
|
|
|
56
49
|
---
|
|
57
50
|
|
|
58
|
-
##
|
|
51
|
+
## Features
|
|
59
52
|
|
|
60
|
-
- **🎨
|
|
61
|
-
-
|
|
62
|
-
-
|
|
63
|
-
- **🔳 QR & Barcodes:**
|
|
64
|
-
- **🏷️
|
|
65
|
-
-
|
|
66
|
-
-
|
|
53
|
+
- **🎨 Visual ID Card Designer:** A complete workspace for designing ID cards with a visual canvas, configurable elements, templates, and preview capabilities.
|
|
54
|
+
- **📥 CSV & Excel Import:** Import structured card data from `.csv`, `.xlsx`, and `.xls`. Imported columns can be used as dynamic fields inside templates.
|
|
55
|
+
- **🖼️ Bulk ZIP Photo Import:** Upload a ZIP archive containing your spreadsheet/CSV and images. The importer can fuzzy-match image filenames with records, making it possible to prepare large batches of cards without manually attaching every photo.
|
|
56
|
+
- **🔳 QR Codes & Barcodes:** Generate dynamic QR codes and 1D barcodes and bind them to record values such as admission numbers, employee IDs, URLs, or other unique identifiers.
|
|
57
|
+
- **🏷️ Dynamic Field Placeholders:** Bind template elements to imported data (e.g., `ID: {{admissionNo}}`).
|
|
58
|
+
- **🧠 Conditional Rendering:** Text elements can use JavaScript expressions for conditional output (e.g., `{{ department === 'HR' ? 'Red' : 'Blue' }}`).
|
|
59
|
+
- **📐 Printer Calibration:** X/Y offsets can be applied to compensate for mechanical print alignment differences when producing physical PVC cards.
|
|
67
60
|
|
|
68
61
|
---
|
|
69
62
|
|
|
70
|
-
##
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
63
|
+
## How It Works
|
|
64
|
+
|
|
65
|
+
The package is designed around a client-side card-generation workflow.
|
|
66
|
+
|
|
67
|
+
```text
|
|
68
|
+
CSV / Excel / JSON
|
|
69
|
+
↓
|
|
70
|
+
Import Records
|
|
71
|
+
↓
|
|
72
|
+
Match Photos
|
|
73
|
+
↓
|
|
74
|
+
Design Template
|
|
75
|
+
↓
|
|
76
|
+
Bind Dynamic Fields
|
|
77
|
+
↓
|
|
78
|
+
Add QR / Barcode
|
|
79
|
+
↓
|
|
80
|
+
Preview
|
|
81
|
+
↓
|
|
82
|
+
Batch Generate
|
|
83
|
+
↓
|
|
84
|
+
PDF / PNG
|
|
85
|
+
```
|
|
87
86
|
|
|
88
|
-
|
|
89
|
-
Once your template is perfect, click **"Batch Export A4 PDF"**:
|
|
90
|
-
- The engine will loop through every row in your spreadsheet.
|
|
91
|
-
- It calculates exact millimeter dimensions (CR80 format) and automatically aligns them into an A4 grid with hardware cutting marks.
|
|
92
|
-
- You can apply X/Y offset calibrations to fix mechanical drift in physical PVC card printers (like Zebra or Fargo).
|
|
87
|
+
The package can be embedded into an existing web application. Your application remains responsible for its own backend, authentication, database, and business logic.
|
|
93
88
|
|
|
94
89
|
---
|
|
95
90
|
|
|
96
|
-
##
|
|
91
|
+
## Import Data
|
|
97
92
|
|
|
98
|
-
|
|
93
|
+
### CSV / Excel
|
|
94
|
+
Select **Import Data** and upload `.csv`, `.xlsx`, or `.xls` files. The importer automatically maps spreadsheet columns into dynamic fields.
|
|
99
95
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
If you are using the standalone designer component directly, you can pass these props to configure the editor:
|
|
109
|
-
|
|
110
|
-
```jsx
|
|
111
|
-
<IdCardDesigner
|
|
112
|
-
width={350}
|
|
113
|
-
height={200}
|
|
114
|
-
template={template}
|
|
115
|
-
onSave={handleSave}
|
|
116
|
-
onExport={handleExport}
|
|
117
|
-
/>
|
|
96
|
+
### ZIP + Photos
|
|
97
|
+
Prepare a ZIP containing the spreadsheet/CSV and image files.
|
|
98
|
+
```text
|
|
99
|
+
id-cards.zip
|
|
100
|
+
├── students.xlsx
|
|
101
|
+
└── photos/
|
|
102
|
+
├── aarav_sharma.jpg
|
|
103
|
+
└── diya_patel.jpg
|
|
118
104
|
```
|
|
105
|
+
The importer attempts to fuzzy-match image filenames to the corresponding records.
|
|
119
106
|
|
|
120
107
|
---
|
|
121
108
|
|
|
122
|
-
##
|
|
109
|
+
## Design Cards
|
|
123
110
|
|
|
124
|
-
|
|
111
|
+
Open **Launch Studio Canvas**.
|
|
125
112
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
"width": 54,
|
|
131
|
-
"height": 86,
|
|
132
|
-
"elements": [
|
|
133
|
-
{
|
|
134
|
-
"id": "el_student_name",
|
|
135
|
-
"type": "field",
|
|
136
|
-
"fieldKey": "studentName",
|
|
137
|
-
"label": "Student Name",
|
|
138
|
-
"x": 2, "y": 48, "width": 50, "height": 7
|
|
139
|
-
}
|
|
140
|
-
]
|
|
141
|
-
}
|
|
113
|
+
### Dynamic Text
|
|
114
|
+
Use a field placeholder:
|
|
115
|
+
```text
|
|
116
|
+
{{studentName}}
|
|
142
117
|
```
|
|
143
118
|
|
|
119
|
+
### Conditional Text
|
|
120
|
+
Use Javascript expressions:
|
|
121
|
+
```text
|
|
122
|
+
{{ department === 'HR' ? 'Red' : 'Blue' }}
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### QR / Barcode
|
|
126
|
+
Add a QR or barcode element and bind it to a unique field.
|
|
127
|
+
|
|
128
|
+
### Background
|
|
129
|
+
Upload a high-resolution card background from your computer or URL, and position other elements above it.
|
|
130
|
+
|
|
144
131
|
---
|
|
145
132
|
|
|
146
|
-
##
|
|
133
|
+
## Batch Printing
|
|
147
134
|
|
|
148
|
-
|
|
135
|
+
Select **Batch Export A4 PDF** or the applicable export workflow.
|
|
149
136
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
{ key: "studentName", label: "Student Full Name" },
|
|
157
|
-
{ key: "enrollmentNo", label: "Enrollment Number" }
|
|
158
|
-
]
|
|
159
|
-
}
|
|
160
|
-
};
|
|
137
|
+
The engine processes the records and places cards into printable sheets. The documented workflow includes:
|
|
138
|
+
- CR80 card dimensions
|
|
139
|
+
- A3, A4, A5, and Letter sheet sizes
|
|
140
|
+
- Multiple cards per sheet
|
|
141
|
+
- Hardware cutting marks
|
|
142
|
+
- X/Y print calibration offsets
|
|
161
143
|
|
|
162
|
-
|
|
163
|
-
```
|
|
144
|
+
---
|
|
164
145
|
|
|
165
|
-
|
|
146
|
+
## Offline Mode
|
|
166
147
|
|
|
167
|
-
|
|
148
|
+
The package is designed to support workflows where ID-card data should remain on the user's machine.
|
|
168
149
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
150
|
+
### Offline Workspace Persistence
|
|
151
|
+
The dashboard stores workspace state in the browser's IndexedDB, including imported data, templates, and active workspace information. Refreshing or reopening the browser does not automatically discard the saved workspace.
|
|
152
|
+
|
|
153
|
+
### `.stmq` Project Backup
|
|
154
|
+
Export a complete project workspace as a `.stmq` JSON project file. This provides a portable way to move a workspace between machines, including offline/air-gapped workflows.
|
|
172
155
|
|
|
173
156
|
---
|
|
174
157
|
|
|
175
|
-
##
|
|
158
|
+
## Privacy
|
|
176
159
|
|
|
177
|
-
|
|
160
|
+
ID-card applications commonly process personal information such as Names, Student IDs, Employee IDs, Photos, and Admission numbers.
|
|
178
161
|
|
|
179
|
-
|
|
180
|
-
-
|
|
162
|
+
The documented generation workflow is entirely **client-side**.
|
|
163
|
+
- Local browser processing
|
|
164
|
+
- IndexedDB workspace persistence
|
|
165
|
+
- Local `.stmq` project backup
|
|
166
|
+
- Local PDF/image generation
|
|
167
|
+
- No backend server required for the core generation workflow
|
|
181
168
|
|
|
182
|
-
|
|
183
|
-
- **`onSave(templateData)`**: Fired when the user clicks the save button. Returns the full JSON schema of the current design.
|
|
184
|
-
- **`onExport(format, data)`**: Fired when an export action is triggered (e.g., exporting a single card to PNG or PDF).
|
|
185
|
-
- **`onChange(elementData)`**: Fired continuously as the user drags, resizes, or modifies elements on the canvas.
|
|
186
|
-
- **`onDelete(elementId)`**: Fired when a specific element is deleted from the canvas.
|
|
187
|
-
- **`onTemplateChange(templateId)`**: Fired when the user switches to a different template.
|
|
169
|
+
Your application remains responsible for compliance with applicable privacy and data-protection requirements.
|
|
188
170
|
|
|
189
171
|
---
|
|
190
172
|
|
|
191
|
-
##
|
|
192
|
-
|
|
193
|
-
### Connect Your Own Data (React)
|
|
173
|
+
## Developer Docs
|
|
194
174
|
|
|
195
|
-
|
|
196
|
-
import
|
|
197
|
-
|
|
175
|
+
### Components
|
|
176
|
+
- `<IdCardManager />`: Complete dashboard experience. Use this when you want the complete import → design → preview → batch-export workflow.
|
|
177
|
+
- `<IdCardDesigner />`: Standalone visual designer.
|
|
178
|
+
- `<IdCardPreview />`: Embed a live ID-card preview inside another application screen.
|
|
179
|
+
- `<IdCardDesignerModal />`: Open the designer inside your application's modal/dialog workflow.
|
|
198
180
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
181
|
+
### Props (IdCardManager)
|
|
182
|
+
| Prop | Type | Default | Description |
|
|
183
|
+
|---|---|---|---|
|
|
184
|
+
| `sampleRecords` | `object` | Default data | Records used to populate the dashboard |
|
|
185
|
+
| `categories` | `object` | Default config | Custom ID-card categories |
|
|
186
|
+
| `onBatchExportComplete` | `function` | `undefined` | Callback after batch PDF generation |
|
|
204
187
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
188
|
+
### Templates
|
|
189
|
+
Designs are represented as JSON-compatible template structures.
|
|
190
|
+
```json
|
|
191
|
+
{
|
|
192
|
+
"id": "tpl_school_vertical",
|
|
193
|
+
"orientation": "vertical",
|
|
194
|
+
"width": 54,
|
|
195
|
+
"height": 86,
|
|
196
|
+
"elements": []
|
|
208
197
|
}
|
|
209
198
|
```
|
|
210
199
|
|
|
211
|
-
|
|
200
|
+
---
|
|
212
201
|
|
|
213
|
-
|
|
214
|
-
<div id="id-card-manager-root"></div>
|
|
215
|
-
<script type="module">
|
|
216
|
-
import React from 'react';
|
|
217
|
-
import { createRoot } from 'react-dom/client';
|
|
218
|
-
import { IdCardManager } from '@stratametriq/id-card-designer';
|
|
219
|
-
import '@stratametriq/id-card-designer/dist/index.css';
|
|
202
|
+
## NPM
|
|
220
203
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
204
|
+
Install using NPM:
|
|
205
|
+
```bash
|
|
206
|
+
npm install @stratametriq/id-card-designer
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
Or Yarn:
|
|
210
|
+
```bash
|
|
211
|
+
yarn add @stratametriq/id-card-designer
|
|
224
212
|
```
|
|
225
213
|
|
|
226
214
|
---
|
|
227
215
|
|
|
228
|
-
##
|
|
216
|
+
## Pricing / License
|
|
229
217
|
|
|
230
|
-
**
|
|
231
|
-
**A:** Canva is fantastic for creating manual, one-off designs. However, if you need to generate 500 student ID cards with unique photos, barcodes, and names, Canva becomes tedious. This package is an **automation pipeline**—you design the template once, feed it an array of JSON data, and instantly generate thousands of unique cards.
|
|
218
|
+
`@stratametriq/id-card-designer` operates under a **Dual Licensing Model** to support both the open-source community and enterprise development.
|
|
232
219
|
|
|
233
|
-
|
|
234
|
-
|
|
220
|
+
### 1. Community Tier (Free)
|
|
221
|
+
Free for personal projects, students, open-source initiatives, and non-profit organizations. Under this tier, you may not use the software in any commercial product or revenue-generating service.
|
|
235
222
|
|
|
236
|
-
|
|
237
|
-
|
|
223
|
+
### 2. Commercial / Enterprise Tier (Paid)
|
|
224
|
+
Required for any commercial use, including:
|
|
225
|
+
- Commercial SaaS applications
|
|
226
|
+
- School & College ERP systems
|
|
227
|
+
- HR & Employee Management suites
|
|
228
|
+
- Internal corporate production deployments
|
|
229
|
+
- White-label applications
|
|
238
230
|
|
|
239
|
-
**
|
|
240
|
-
**A:** **Absolutely not.** Employee and student data (PII) is a massive security concern. That is why this engine runs **100% Client-Side** in the browser. Zero network requests are made to external servers. The PDFs and images are generated purely on the user's local machine, and all workspace data is saved offline via IndexedDB. Your users can even export `.stmq` project backups and move them via USB to air-gapped computers!
|
|
231
|
+
👉 **[Purchase a Commercial Enterprise License Here](https://waniabid.gumroad.com/l/id-card-designer-pro)**
|
|
241
232
|
|
|
242
|
-
|
|
243
|
-
**A:** Yes! The enterprise license is 100% white-label, allowing you to seamlessly integrate the designer into your own SaaS product without your users ever knowing you are using our software.
|
|
233
|
+
*For full legal terms, please review the `LICENSE` file included in this repository.*
|
|
244
234
|
|
|
245
235
|
---
|
|
246
236
|
|
|
247
|
-
##
|
|
237
|
+
## FAQ
|
|
248
238
|
|
|
249
|
-
|
|
239
|
+
**How is this different from Canva?**
|
|
240
|
+
Canva is designed primarily for visual design. `@stratametriq/id-card-designer` focuses on an automated data-driven ID-card workflow: One Template + Many Records = Batch Printable ID Cards.
|
|
250
241
|
|
|
251
|
-
|
|
252
|
-
|
|
242
|
+
**Does the core workflow require a StrataMetriq server?**
|
|
243
|
+
No backend server from StrataMetriq is required for the documented client-side card-generation workflow.
|
|
253
244
|
|
|
254
|
-
|
|
245
|
+
**Can it be used for offline workflows?**
|
|
246
|
+
Yes. The package includes IndexedDB workspace persistence and `.stmq` project backup capabilities intended to support local and offline-capable workflows.
|