react-id-card-generator 1.0.0

package/README.md

@@ -0,0 +1,214 @@
+# React ID Card Generator
+
+A React library for creating customizable ID cards with a visual drag-and-drop designer. Design card templates once, then generate ID cards for multiple users with their data.
+
+## What Does It Do?
+
+This library helps you build ID card systems for schools, companies, events, or any organization. It provides:
+
+1. **Designer Component** - A visual editor to create ID card templates by dragging fields (name, photo, QR code, etc.) and positioning them
+2. **Generator Component** - Renders actual ID cards by filling your template with user data
+3. **Export Tools** - Download ID cards as PDF or PNG images
+
+## Installation
+
+```bash
+npm install react-id-card-generator
+```
+
+## Quick Start
+
+### Step 1: Design Your Template
+
+Use the designer to create your ID card layout. Add fields, upload a background, and style everything.
+
+```tsx
+import { IDCardDesigner } from 'react-id-card-generator';
+import 'react-id-card-generator/dist/styles.css';
+
+function TemplateDesigner() {
+  const handleSave = (template) => {
+    // Save your template (to database, localStorage, etc.)
+    localStorage.setItem('id-template', JSON.stringify(template));
+  };
+
+  return <IDCardDesigner onSave={handleSave} />;
+}
+```
+
+### Step 2: Generate ID Cards
+
+Use your template to create ID cards for individual users.
+
+```tsx
+import { IDCardGenerator } from 'react-id-card-generator';
+
+function UserIDCard() {
+  const template = JSON.parse(localStorage.getItem('id-template'));
+  
+  const userData = {
+    name: 'John Doe',
+    idno: 'EMP-001',
+    department: 'Engineering',
+    photo: 'https://example.com/photo.jpg'
+  };
+
+  return <IDCardGenerator template={template} data={userData} side="front" />;
+}
+```
+
+### Step 3: Export as PDF
+
+```tsx
+import { useIDCardExport } from 'react-id-card-generator';
+
+function ExportCard() {
+  const { exportAsPDF, isExporting } = useIDCardExport();
+
+  return (
+    <button onClick={() => exportAsPDF({ filename: 'john-doe-id.pdf' })}>
+      {isExporting ? 'Generating...' : 'Download PDF'}
+    </button>
+  );
+}
+```
+
+## Features
+
+- **Visual Designer** - Drag fields to position them, resize with handles
+- **Field Types** - Text, labels, images/photos, and QR codes
+- **QR Codes** - Select which card fields to encode in the QR code
+- **Double-Sided** - Create cards with front and back sides
+- **Backgrounds** - Upload custom background images
+- **Styling** - Customize fonts, colors, alignment, border radius, and more
+- **Export** - Generate PDFs or PNG images of completed cards
+
+## Components
+
+### IDCardDesigner
+
+The visual template builder. Users drag fields onto the card, position them, and configure styles.
+
+```tsx
+<IDCardDesigner 
+  onSave={(template) => console.log(template)}
+  onCancel={() => console.log('cancelled')}
+/>
+```
+
+**Props:**
+- `onSave(template)` - Called when user saves the template
+- `onCancel()` - Optional callback when user cancels
+- `initialTemplate` - Optional existing template to edit
+- `className`, `style` - Optional styling props
+
+### IDCardGenerator
+
+Renders a filled ID card using a template and user data.
+
+```tsx
+<IDCardGenerator 
+  template={myTemplate}
+  data={userData}
+  side="front"
+  scale={1.5}
+/>
+```
+
+**Props:**
+- `template` - The ID card template (from designer)
+- `data` - Object with user data matching field keys
+- `side` - Which side to show: `'front'` or `'back'`
+- `scale` - Optional size multiplier (default: 1)
+
+## Hooks
+
+### useIDCardTemplate
+
+Manages template state with helper methods.
+
+```tsx
+const {
+  template,
+  updateField,
+  addField,
+  removeField,
+  setBackground,
+  isValid,
+  validationErrors
+} = useIDCardTemplate();
+```
+
+### useIDCardExport
+
+Handles exporting cards to PDF or images.
+
+```tsx
+const { exportAsPDF, exportAsImage, isExporting } = useIDCardExport();
+
+// Export as PDF
+await exportAsPDF({ 
+  filename: 'id-card.pdf',
+  pages: ['front', 'back']
+});
+
+// Export as PNG
+await exportAsImage({ 
+  format: 'png',
+  filename: 'id-card.png'
+});
+```
+
+## Field Types
+
+1. **Text Field** - Displays text data (name, ID number, etc.)
+2. **Label** - Static text that doesn't change (e.g., "EMPLOYEE ID")
+3. **Image** - Shows photos or logos (supports border radius for circular photos)
+4. **QR Code** - Generates scannable QR codes from selected card fields
+
+## Template Storage
+
+Save and load templates:
+
+```tsx
+import { 
+  saveTemplateToLocal, 
+  loadTemplateFromLocal,
+  exportTemplateAsJSON
+} from 'react-id-card-generator';
+
+// Save to localStorage
+saveTemplateToLocal('my-template', template);
+
+// Load from localStorage
+const template = loadTemplateFromLocal('my-template');
+
+// Export as JSON file
+exportTemplateAsJSON(template, 'template.json');
+```
+
+## TypeScript Support
+
+Full TypeScript definitions included. Key types:
+
+```typescript
+// Your template structure
+interface IDCardTemplate {
+  id: string;
+  name: string;
+  orientation: 'portrait' | 'landscape';
+  sides: 'single' | 'double';
+  cardSize: { width: number; height: number; unit: 'px' | 'mm' | 'in' };
+  backgrounds: { front?: string; back?: string };
+  fields: FieldMapping[];
+}
+
+// User data for generating cards
+interface IDCardData {
+  [key: string]: string | number | boolean | undefined;
+}
+```
+
+## License
+
+MIT

package/dist/cjs/_virtual/_commonjsHelpers.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+exports.commonjsGlobal = commonjsGlobal;
+exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
+//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/cjs/_virtual/_commonjsHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/cjs/_virtual/index.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var raf = {exports: {}};
+
+exports.__module = raf;
+//# sourceMappingURL=index.js.map

package/dist/cjs/_virtual/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/_virtual/make-built-in.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var makeBuiltIn = {exports: {}};
+
+exports.__module = makeBuiltIn;
+//# sourceMappingURL=make-built-in.js.map

package/dist/cjs/_virtual/make-built-in.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"make-built-in.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/_virtual/new-promise-capability.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var newPromiseCapability = {};
+
+exports.__exports = newPromiseCapability;
+//# sourceMappingURL=new-promise-capability.js.map

package/dist/cjs/_virtual/new-promise-capability.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"new-promise-capability.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/_virtual/object-define-properties.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var objectDefineProperties = {};
+
+exports.__exports = objectDefineProperties;
+//# sourceMappingURL=object-define-properties.js.map

package/dist/cjs/_virtual/object-define-properties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"object-define-properties.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/_virtual/object-define-property.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var objectDefineProperty = {};
+
+exports.__exports = objectDefineProperty;
+//# sourceMappingURL=object-define-property.js.map

package/dist/cjs/_virtual/object-define-property.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"object-define-property.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/_virtual/object-get-own-property-descriptor.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var objectGetOwnPropertyDescriptor = {};
+
+exports.__exports = objectGetOwnPropertyDescriptor;
+//# sourceMappingURL=object-get-own-property-descriptor.js.map

package/dist/cjs/_virtual/object-get-own-property-descriptor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"object-get-own-property-descriptor.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/_virtual/object-get-own-property-names.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var objectGetOwnPropertyNames = {};
+
+exports.__exports = objectGetOwnPropertyNames;
+//# sourceMappingURL=object-get-own-property-names.js.map

package/dist/cjs/_virtual/object-get-own-property-names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"object-get-own-property-names.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/_virtual/object-get-own-property-symbols.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var objectGetOwnPropertySymbols = {};
+
+exports.__exports = objectGetOwnPropertySymbols;
+//# sourceMappingURL=object-get-own-property-symbols.js.map

package/dist/cjs/_virtual/object-get-own-property-symbols.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"object-get-own-property-symbols.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/_virtual/object-property-is-enumerable.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var objectPropertyIsEnumerable = {};
+
+exports.__exports = objectPropertyIsEnumerable;
+//# sourceMappingURL=object-property-is-enumerable.js.map

package/dist/cjs/_virtual/object-property-is-enumerable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"object-property-is-enumerable.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/_virtual/performance-now.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var performanceNow = {exports: {}};
+
+exports.__module = performanceNow;
+//# sourceMappingURL=performance-now.js.map

package/dist/cjs/_virtual/performance-now.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"performance-now.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/_virtual/qrious.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var qrious = {exports: {}};
+
+exports.__module = qrious;
+//# sourceMappingURL=qrious.js.map

package/dist/cjs/_virtual/qrious.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qrious.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/_virtual/shared-store.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var sharedStore = {exports: {}};
+
+exports.__module = sharedStore;
+//# sourceMappingURL=shared-store.js.map

package/dist/cjs/_virtual/shared-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-store.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}