@nice2dev/ui-printing 1.0.28

package/src/print-preview/NicePrintPreview.tsx

@@ -0,0 +1,417 @@
+import { useNiceTranslation } from '@nice2dev/ui';
+import React, { useState, useMemo, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+import type {
+  PrintTemplate,
+  PrintDataField,
+  TemplateSampleData as _TemplateSampleData,
+  PrintJobOptions as _PrintJobOptions,
+  NicePrintPreviewProps,
+} from '../types/printingTypes';
+
+import styles from './PrintPreview.module.css';
+
+// ── Paper dimensions (mm → px at 96dpi, 1mm ≈ 3.78px) ───────────────────────
+const MM_TO_PX = 3.78;
+
+const PAPER_DIM: Record<string, [number, number]> = {
+  A3: [297, 420],
+  A4: [210, 297],
+  A5: [148, 210],
+  A6: [105, 148],
+  Letter: [216, 279],
+  Legal: [216, 356],
+  Tabloid: [279, 432],
+};
+
+function resolveValue(path: string, data: Record<string, unknown>): unknown {
+  try {
+    return path.split('.').reduce<unknown>((obj, key) => {
+      if (obj && typeof obj === 'object') {
+        return (obj as Record<string, unknown>)[key];
+      }
+      return null;
+    }, data);
+  } catch {
+    return null;
+  }
+}
+
+function formatValue(val: unknown, type: string, format?: string): string {
+  if (val == null) {
+    return '';
+  }
+  if (type === 'date' && format) {
+    try {
+      const d = new Date(val as string);
+      // Simple manual format for DD.MM.YYYY
+      if (format === 'DD.MM.YYYY') {
+        const dd = String(d.getDate()).padStart(2, '0');
+        const mm = String(d.getMonth() + 1).padStart(2, '0');
+        return `${dd}.${mm}.${d.getFullYear()}`;
+      }
+      return d.toLocaleDateString();
+    } catch {
+      return String(val);
+    }
+  }
+  if (type === 'currency' && format) {
+    const num = Number(val);
+    if (!isNaN(num)) {
+      return `${num.toFixed(2)} ${format}`;
+    }
+  }
+  if (type === 'number' && typeof val === 'number') {
+    return val.toLocaleString('pl-PL');
+  }
+  return String(val);
+}
+
+// ── Rendered field ────────────────────────────────────────────────────────────
+interface RenderedFieldProps {
+  field: PrintDataField;
+  data: Record<string, unknown>;
+  zoom: number;
+}
+const RenderedField: React.FC<RenderedFieldProps> = ({ field, data, zoom }) => {
+  const raw = field.dataPath ? resolveValue(field.dataPath, data) : null;
+  const value = raw != null ? formatValue(raw, field.type, field.format) : (field.fallback ?? '');
+
+  const px = (mm: number) => mm * zoom * MM_TO_PX;
+
+  const baseStyle: React.CSSProperties = {
+    position: 'absolute',
+    left: px(field.position.x),
+    top: px(field.position.y),
+    width: px(field.position.width),
+    height: px(field.position.height),
+    fontSize: (field.style.fontSize ?? 10) * zoom,
+    fontWeight: field.style.fontWeight ?? 'normal',
+    fontStyle: field.style.fontStyle ?? 'normal',
+    color: field.style.color ?? 'var(--text-primary, #0f172a)',
+    textAlign: field.style.textAlign ?? 'left',
+    backgroundColor: field.style.backgroundColor,
+    transform: field.style.rotation ? `rotate(${field.style.rotation}deg)` : undefined,
+    overflow: 'hidden',
+    display: 'flex',
+    alignItems:
+      field.style.verticalAlign === 'middle'
+        ? 'center'
+        : field.style.verticalAlign === 'bottom'
+          ? 'flex-end'
+          : 'flex-start',
+    lineHeight: field.style.lineHeight ?? 1.4,
+    padding: field.style.padding ? px(field.style.padding) : 0,
+    boxSizing: 'border-box',
+    borderWidth: field.style.borderWidth,
+    borderColor: field.style.borderColor,
+    borderStyle: field.style.borderStyle,
+    borderRadius: field.style.borderRadius,
+    zIndex: field.position.zIndex ?? 1,
+  };
+
+  if (field.type === 'image' && raw) {
+    return (
+      <div style={baseStyle}>
+        <img
+          src={String(raw)}
+          alt=""
+          style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+        />
+      </div>
+    );
+  }
+  if (field.type === 'barcode' || field.type === 'qr') {
+    return (
+      <div
+        style={{
+          ...baseStyle,
+          background: 'var(--bg-secondary, #f8fafc)',
+          border: '1px dashed var(--border-color, #e2e8f0)',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 10 * zoom,
+        }}
+      >
+        {field.type === 'qr' ? '⬛' : '▮▌▮'} {value}
+      </div>
+    );
+  }
+  if (field.type === 'signature') {
+    return (
+      <div
+        style={{
+          ...baseStyle,
+          borderBottom: '1px solid var(--text-primary, #0f172a)',
+          alignItems: 'flex-end',
+        }}
+      >
+        <span style={{ fontSize: 8 * zoom, color: 'var(--text-muted, #94a3b8)' }}>
+          {field.label}
+        </span>
+      </div>
+    );
+  }
+  if (field.type === 'line') {
+    return (
+      <div
+        style={{
+          ...baseStyle,
+          borderBottom: `${field.style.borderWidth ?? 1}px ${field.style.borderStyle ?? 'solid'} ${field.style.borderColor ?? 'var(--text-primary, #0f172a)'}`,
+        }}
+      />
+    );
+  }
+  return <div style={baseStyle}>{value}</div>;
+};
+
+// ── Page renderer ─────────────────────────────────────────────────────────────
+interface PageProps {
+  template: PrintTemplate;
+  data: Record<string, unknown>;
+  zoom: number;
+}
+const RenderedPage: React.FC<PageProps> = ({ template, data, zoom }) => {
+  const [pw, ph] = (() => {
+    const [w, h] = PAPER_DIM[template.paperSize] ?? PAPER_DIM.A4;
+    return template.orientation === 'landscape'
+      ? [h * MM_TO_PX * zoom, w * MM_TO_PX * zoom]
+      : [w * MM_TO_PX * zoom, h * MM_TO_PX * zoom];
+  })();
+  const m = template.margins;
+  const allFields = template.sections.flatMap((s) => s.fields);
+
+  return (
+    <div className={styles.page} style={{ width: pw, minHeight: ph } as React.CSSProperties}>
+      <div
+        style={
+          {
+            position: 'absolute',
+            top: m.top * zoom * MM_TO_PX,
+            left: m.left * zoom * MM_TO_PX,
+            right: m.right * zoom * MM_TO_PX,
+            bottom: m.bottom * zoom * MM_TO_PX,
+          } as React.CSSProperties
+        }
+      >
+        {allFields.map((field) => (
+          <RenderedField key={field.id} field={field} data={data} zoom={zoom} />
+        ))}
+      </div>
+
+      {/* Watermarks */}
+      {template.watermarks?.map((wm) => (
+        <div
+          key={wm.id}
+          className={styles.watermark}
+          style={
+            {
+              opacity: wm.opacity,
+              transform: `rotate(${wm.angle}deg)`,
+              fontSize: (wm.fontSize ?? 48) * zoom,
+            } as React.CSSProperties
+          }
+        >
+          {wm.type === 'text' ? (
+            wm.text
+          ) : (
+            <img
+              src={wm.imageUrl}
+              alt="wm"
+              style={{ maxWidth: 200 * zoom } as React.CSSProperties}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+// ── Main component ────────────────────────────────────────────────────────────
+export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
+  template,
+  entities = [],
+  sampleData,
+  onPrint,
+  className,
+  style,
+  theme = 'light',
+  asPopup = true,
+  open: openProp,
+  onClose,
+}) => {
+  const { t } = useNiceTranslation();
+  const [entityIdx, setEntityIdx] = useState(0);
+  const [zoom, setZoom] = useState(0.8);
+  const [internalOpen, setInternalOpen] = useState(true);
+
+  const isControlled = openProp !== undefined;
+  const isOpen = isControlled ? openProp : internalOpen;
+  const handleClose = () => {
+    if (!isControlled) {
+      setInternalOpen(false);
+    }
+    onClose?.();
+  };
+
+  useEffect(() => {
+    if (!asPopup || !isOpen) {
+      return;
+    }
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        handleClose();
+      }
+    };
+    document.addEventListener('keydown', handler);
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.removeEventListener('keydown', handler);
+      document.body.style.overflow = '';
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [asPopup, isOpen]);
+
+  const dataList = useMemo(() => {
+    if (entities.length > 0) {
+      return entities;
+    }
+    if (sampleData) {
+      return [sampleData.data];
+    }
+    return [{}];
+  }, [entities, sampleData]);
+
+  const currentData = dataList[entityIdx] ?? {};
+
+  if (asPopup && !isOpen) {
+    return null;
+  }
+
+  const body = (
+    <div
+      className={`${styles.root} ${theme === 'dark' ? styles.dark : ''} ${className ?? ''}`}
+      style={style}
+    >
+      {/* Header bar */}
+      <div className={styles.headerBar}>
+        <div className={styles.entityNav}>
+          {dataList.length > 1 && (
+            <>
+              <button
+                className={styles.navBtn}
+                disabled={entityIdx === 0}
+                onClick={() => setEntityIdx((i) => i - 1)}
+              >
+                ‹
+              </button>
+              <span className={styles.navLabel}>
+                {entityIdx + 1} / {dataList.length}
+              </span>
+              <button
+                className={styles.navBtn}
+                disabled={entityIdx >= dataList.length - 1}
+                onClick={() => setEntityIdx((i) => i + 1)}
+              >
+                ›
+              </button>
+            </>
+          )}
+          {entities.length === 0 && sampleData && (
+            <span className={styles.sampleBadge}>Przykładowe dane</span>
+          )}
+        </div>
+
+        <div className={styles.zoomBar}>
+          <button className={styles.zoomBtn} onClick={() => setZoom((z) => Math.max(0.3, z - 0.1))}>
+            −
+          </button>
+          <span className={styles.zoomLabel}>{Math.round(zoom * 100)}%</span>
+          <button className={styles.zoomBtn} onClick={() => setZoom((z) => Math.min(2.5, z + 0.1))}>
+            +
+          </button>
+          <button className={styles.zoomBtn} onClick={() => setZoom(0.8)} title="Dopasuj">
+            ⊡
+          </button>
+        </div>
+
+        <div style={{ display: 'flex', gap: 8 }}>
+          <button
+            className={styles.printBtn}
+            onClick={() => onPrint?.({ copies: 1, printerId: '' })}
+          >
+            {t('printPreview.print', 'Drukuj')}
+          </button>
+          {asPopup && (
+            <button
+              type="button"
+              className={styles.zoomBtn}
+              onClick={handleClose}
+              aria-label={t('common.close', 'Zamknij')}
+              title={t('common.close', 'Zamknij')}
+            >
+              ✕
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Preview canvas */}
+      <div className={styles.canvas}>
+        <RenderedPage template={template} data={currentData} zoom={zoom} />
+      </div>
+
+      {/* Footer metadata */}
+      <div className={styles.footerBar}>
+        <span>{template.name}</span>
+        <span>
+          {template.paperSize} · {template.orientation === 'portrait' ? 'Pion' : 'Poziom'}
+        </span>
+        {template.sections.reduce((acc, s) => acc + s.fields.length, 0)} pól
+      </div>
+    </div>
+  );
+
+  if (!asPopup) {
+    return body;
+  }
+
+  const overlay = (
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        background: 'color-mix(in srgb, var(--text-primary, #000) 50%, transparent)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1000,
+        padding: 24,
+      }}
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) {
+          handleClose();
+        }
+      }}
+      role="presentation"
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        style={{
+          background: 'var(--bg-elevated, var(--bg-primary, #ffffff))',
+          borderRadius: 12,
+          boxShadow: '0 20px 60px color-mix(in srgb, var(--text-primary, #000) 30%, transparent)',
+          maxWidth: '90vw',
+          maxHeight: '90vh',
+          overflow: 'auto',
+        }}
+      >
+        {body}
+      </div>
+    </div>
+  );
+
+  return createPortal(overlay, document.body);
+};

package/src/print-preview/PrintPreview.module.css

@@ -0,0 +1,122 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--nice-bg-secondary, #f1f5f9);
+  font-family: system-ui, sans-serif;
+  font-size: 14px;
+  color: var(--nice-text, #1e293b);
+}
+.dark { background: var(--nice-text, #1e293b); color: var(--nice-bg-secondary, #f1f5f9); }
+
+/* Header bar */
+.headerBar {
+  display: flex;
+  align-items: center;
+  gap: var(--nice-space-3, 12px);
+  padding: var(--nice-space-2, 8px) var(--nice-space-4, 16px);
+  background: var(--nice-bg, #FFF);
+  border-bottom: 1px solid var(--nice-border, #e2e8f0);
+  flex-shrink: 0;
+}
+.dark .headerBar { background: var(--nice-text, #0f172a); border-color: var(--nice-text, #334155); }
+
+.entityNav { display: flex; align-items: center; gap: var(--nice-space-1-5, 6px); }
+.navBtn {
+  padding: var(--nice-space-1, 4px) var(--nice-space-2, 8px);
+  background: var(--nice-bg-secondary, #f8fafc);
+  border: 1px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-sm, 4px);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  color: var(--nice-text-secondary, #475569);
+}
+.navBtn:disabled { opacity: 0.4; cursor: default; }
+.navBtn:not(:disabled):hover { background: var(--nice-border, #e2e8f0); }
+.navLabel { color: var(--nice-text-secondary, #64748b); font-size: 13px; min-width: 48px; text-align: center; }
+
+.sampleBadge {
+  padding: var(--nice-space-0-75, 3px) var(--nice-space-2-5, 10px);
+  background: var(--nice-warning-bg, #fef9c3);
+  border: 1px solid #fde047;
+  border-radius: var(--nice-radius-xl, 12px);
+  font-size: 12px;
+  color: var(--nice-warning-dark, #854d0e);
+}
+
+.zoomBar { display: flex; align-items: center; gap: var(--nice-space-1-5, 6px); margin-left: auto; }
+.zoomBtn {
+  width: 28px; height: 28px;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--nice-bg-secondary, #f8fafc);
+  border: 1px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-sm, 4px);
+  cursor: pointer;
+  font-size: 15px;
+  color: var(--nice-text-secondary, #475569);
+}
+.zoomBtn:hover { background: var(--nice-border, #e2e8f0); }
+.zoomLabel { font-size: 13px; min-width: 42px; text-align: center; color: var(--nice-text-secondary, #64748b); }
+
+.printBtn {
+  padding: var(--nice-space-1-5, 6px) var(--nice-space-4, 16px);
+  background: var(--nice-primary-hover, #2563eb);
+  color: var(--nice-bg, #FFF);
+  border: none;
+  border-radius: var(--nice-radius-md, 6px);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+}
+.printBtn:hover { background: var(--nice-primary-dark, #1d4ed8); }
+
+/* Canvas area */
+.canvas {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: var(--nice-space-8, 32px);
+}
+
+/* Page paper */
+.page {
+  position: relative;
+  background: var(--nice-bg, #FFF);
+  box-shadow: 0 4px 32px var(--nice-overlay-20, rgba(0, 0, 0, 0.18));
+  border-radius: var(--nice-radius-sm, 2px);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.dark .page { box-shadow: 0 4px 32px var(--nice-overlay-60, rgba(0, 0, 0, 0.6)); }
+
+/* Watermark */
+.watermark {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  color: var(--nice-text-muted, #94a3b8);
+  font-weight: bold;
+  letter-spacing: 0.05em;
+  z-index: 100;
+  white-space: nowrap;
+}
+
+/* Footer bar */
+.footerBar {
+  display: flex;
+  align-items: center;
+  gap: var(--nice-space-4, 16px);
+  padding: var(--nice-space-1-5, 6px) var(--nice-space-4, 16px);
+  background: var(--nice-bg, #FFF);
+  border-top: 1px solid var(--nice-border, #e2e8f0);
+  font-size: 12px;
+  color: var(--nice-text-muted, #94a3b8);
+  flex-shrink: 0;
+}
+.dark .footerBar { background: var(--nice-text, #0f172a); border-color: var(--nice-text, #334155); }

package/src/print-preview/index.ts

@@ -0,0 +1 @@
+export { NicePrintPreview } from './NicePrintPreview';