@nice2dev/ui-printing 1.0.28

package/src/template-browser/NiceTemplateBrowser.tsx

@@ -0,0 +1,221 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events -- modal overlay backdrops (Esc-on-parent provides keyboard close), selection rows in .map() accompanied by visible cursor:pointer styling and sibling buttons; full keyboard migration via useAccessibleClick + extracted subcomponents tracked in TODO_1.0.10 A2.3 */
+import React, { useState } from 'react';
+
+import type { PrintTemplate, TemplateId as _TemplateId, NiceTemplateBrowserProps } from '../types/printingTypes';
+
+import styles from './TemplateBrowser.module.css';
+
+const CATEGORIES = ['Faktury', 'Raporty', 'Etykiety', 'Listy', 'Umowy', 'Inne'];
+
+function importTemplateFromJson(file: File): Promise<PrintTemplate> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        resolve(JSON.parse(e.target?.result as string));
+      } catch (err) {
+        reject(err);
+      }
+    };
+    reader.readAsText(file);
+  });
+}
+
+function exportTemplate(template: PrintTemplate) {
+  const blob = new Blob([JSON.stringify(template, null, 2)], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${template.name.replace(/\s+/g, '_')}.json`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+export const NiceTemplateBrowser: React.FC<NiceTemplateBrowserProps> = ({
+  templates,
+  selectedId,
+  onSelect,
+  onImport,
+  onExport,
+  onDelete,
+  onNew,
+  className,
+  style,
+  theme = 'light',
+}) => {
+  const [search, setSearch] = useState('');
+  const [categoryFilter, setCategoryFilter] = useState<string | null>(null);
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleFileImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) {
+      return;
+    }
+    try {
+      const tpl = await importTemplateFromJson(file);
+      onImport?.(tpl);
+    } catch {
+      // invalid file — silently ignore upload errors from untrusted sources
+    }
+    e.target.value = '';
+  };
+
+  const filtered = templates.filter((t) => {
+    const matchSearch =
+      !search ||
+      t.name.toLowerCase().includes(search.toLowerCase()) ||
+      (t.description ?? '').toLowerCase().includes(search.toLowerCase()) ||
+      (t.tags ?? []).some((tag) => tag.toLowerCase().includes(search.toLowerCase()));
+    const matchCat = !categoryFilter || t.category === categoryFilter;
+    return matchSearch && matchCat;
+  });
+
+  return (
+    <div
+      className={`${styles.root} ${theme === 'dark' ? styles.dark : ''} ${className ?? ''}`}
+      style={style}
+    >
+      {/* Search + actions bar */}
+      <div className={styles.topBar}>
+        <input
+          type="search"
+          className={styles.searchInput}
+          placeholder="Szukaj szablonów…"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+        <button className={styles.actionBtn} onClick={onNew} title="Nowy szablon">
+          + Nowy
+        </button>
+        <button
+          className={styles.actionBtn}
+          onClick={() => fileInputRef.current?.click()}
+          title="Importuj JSON"
+        >
+          ⬆ Import
+        </button>
+        <input ref={fileInputRef} type="file" accept=".json" hidden onChange={handleFileImport} />
+      </div>
+
+      {/* Category chips */}
+      <div className={styles.categoryRow}>
+        <button
+          className={`${styles.catChip} ${!categoryFilter ? styles.catChipActive : ''}`}
+          onClick={() => setCategoryFilter(null)}
+        >
+          Wszystkie
+        </button>
+        {CATEGORIES.map((cat) => (
+          <button
+            key={cat}
+            className={`${styles.catChip} ${categoryFilter === cat ? styles.catChipActive : ''}`}
+            onClick={() => setCategoryFilter((c) => (c === cat ? null : cat))}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
+
+      {/* Template grid */}
+      <div className={styles.grid}>
+        {filtered.map((tpl) => (
+          <div
+            key={tpl.id}
+            className={`${styles.card} ${selectedId === tpl.id ? styles.cardSelected : ''}`}
+            onClick={() => onSelect?.(tpl)}
+            onMouseEnter={() => setHoveredId(tpl.id)}
+            onMouseLeave={() => setHoveredId(null)}
+          >
+            {/* Thumbnail */}
+            <div className={styles.thumbnail}>
+              {tpl.previewImageUrl ? (
+                <img src={tpl.previewImageUrl} alt={tpl.name} className={styles.thumbnailImg} />
+              ) : (
+                <div className={styles.thumbnailPlaceholder}>
+                  <div className={styles.paperMini}>
+                    <div
+                      className={styles.paperLine}
+                      style={{ width: '80%' } as React.CSSProperties}
+                    />
+                    <div
+                      className={styles.paperLine}
+                      style={{ width: '60%' } as React.CSSProperties}
+                    />
+                    <div
+                      className={styles.paperLine}
+                      style={{ width: '90%' } as React.CSSProperties}
+                    />
+                    <div
+                      className={styles.paperLine}
+                      style={{ width: '50%' } as React.CSSProperties}
+                    />
+                  </div>
+                </div>
+              )}
+              {/* Hover actions */}
+              {hoveredId === tpl.id && (
+                <div className={styles.cardOverlay}>
+                  <button
+                    className={styles.overlayBtn}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onExport?.(tpl);
+                      exportTemplate(tpl);
+                    }}
+                    title="Eksportuj"
+                  >
+                    ⬇
+                  </button>
+                  {onDelete && (
+                    <button
+                      className={styles.overlayBtnDanger}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDelete(tpl.id);
+                      }}
+                      title="Usuń"
+                    >
+                      ✕
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* Card info */}
+            <div className={styles.cardBody}>
+              <div className={styles.cardName}>{tpl.name}</div>
+              {tpl.description && <div className={styles.cardDesc}>{tpl.description}</div>}
+              <div className={styles.cardMeta}>
+                <span className={styles.cardSize}>
+                  {tpl.paperSize} {tpl.orientation === 'landscape' ? '↔' : '↕'}
+                </span>
+                {tpl.category && <span className={styles.cardCat}>{tpl.category}</span>}
+              </div>
+              {tpl.tags && tpl.tags.length > 0 && (
+                <div className={styles.cardTags}>
+                  {tpl.tags.slice(0, 3).map((tag) => (
+                    <span key={tag} className={styles.cardTag}>
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+
+        {filtered.length === 0 && (
+          <div className={styles.emptyState}>
+            <span className={styles.emptyIcon}>📄</span>
+            <span>
+              {search ? `Brak wyników dla "${search}"` : 'Brak szablonów. Utwórz pierwszy!'}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/template-browser/TemplateBrowser.module.css

@@ -0,0 +1,277 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-family: inherit;
+  font-size: 13px;
+  background: var(--nice-bg-secondary, #f8fafc);
+  border: 1px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-lg, 8px);
+  overflow: hidden;
+}
+
+.dark { background: var(--nice-text, #0f172a); color: var(--nice-border, #e2e8f0); border-color: var(--nice-text, #1e293b); }
+
+/* ── Top bar ── */
+.topBar {
+  display: flex;
+  align-items: center;
+  gap: var(--nice-space-2, 8px);
+  padding: var(--nice-space-2-5, 10px) var(--nice-space-3, 12px);
+  background: var(--nice-bg, #FFF);
+  border-bottom: 1px solid var(--nice-border, #e2e8f0);
+  flex-shrink: 0;
+}
+
+.dark .topBar { background: var(--nice-text, #1e293b); border-bottom-color: var(--nice-text, #334155); }
+
+.searchInput {
+  flex: 1;
+  padding: var(--nice-space-1-5, 6px) var(--nice-space-2-5, 10px);
+  border: 1px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-md, 6px);
+  font-size: 13px;
+  background: var(--nice-bg-secondary, #f8fafc);
+  color: var(--nice-text, #1e293b);
+  outline: none;
+}
+
+.searchInput:focus { border-color: var(--nice-primary-light, #93c5fd); background: var(--nice-bg, #FFF); }
+.dark .searchInput { background: var(--nice-text, #334155); border-color: var(--nice-text-secondary, #475569); color: var(--nice-border, #e2e8f0); }
+
+.actionBtn {
+  padding: var(--nice-space-1-5, 6px) var(--nice-space-3, 12px);
+  border: 1px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-md, 6px);
+  background: var(--nice-bg, #FFF);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--nice-text-secondary, #475569);
+  white-space: nowrap;
+  transition: all 0.1s;
+}
+
+.actionBtn:hover { background: var(--nice-bg-secondary, #f1f5f9); }
+.dark .actionBtn { background: var(--nice-text, #334155); border-color: var(--nice-text-secondary, #475569); color: var(--nice-border, #e2e8f0); }
+
+/* ── Categories ── */
+.categoryRow {
+  display: flex;
+  gap: var(--nice-space-1-5, 6px);
+  padding: var(--nice-space-2, 8px) var(--nice-space-3, 12px);
+  border-bottom: 1px solid var(--nice-bg-secondary, #f1f5f9);
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  background: var(--nice-bg, #FFF);
+}
+
+.dark .categoryRow { background: var(--nice-text, #1e293b); border-bottom-color: var(--nice-text, #334155); }
+
+.catChip {
+  padding: var(--nice-space-0-75, 3px) var(--nice-space-2-5, 10px);
+  border: 1px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-xl, 14px);
+  background: var(--nice-bg, #FFF);
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--nice-text-secondary, #64748b);
+  transition: all 0.1s;
+}
+
+.catChip:hover { background: var(--nice-bg-secondary, #f1f5f9); }
+
+.catChipActive {
+  background: var(--nice-primary-hover, #2563eb);
+  border-color: var(--nice-primary-hover, #2563eb);
+  color: var(--nice-bg, #FFF);
+}
+
+/* ── Template grid ── */
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--nice-space-3, 12px);
+  padding: var(--nice-space-3, 12px);
+  overflow-y: auto;
+  flex: 1;
+  align-content: flex-start;
+}
+
+/* ── Template card ── */
+.card {
+  flex: 0 0 auto;
+  width: 180px;
+  background: var(--nice-bg, #FFF);
+  border: 2px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-lg, 8px);
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.card:hover {
+  border-color: var(--nice-primary-light, #93c5fd);
+  box-shadow: 0 2px 8px var(--nice-overlay-8, rgba(0, 0, 0, 0.08));
+}
+
+.cardSelected {
+  border-color: var(--nice-primary-hover, #2563eb) !important;
+  box-shadow: 0 0 0 3px var(--nice-primary-tint-15, rgba(37, 99, 235, 0.15));
+}
+
+.dark .card { background: var(--nice-text, #1e293b); border-color: var(--nice-text, #334155); }
+
+/* Thumbnail */
+.thumbnail {
+  position: relative;
+  height: 120px;
+  background: var(--nice-bg-secondary, #f1f5f9);
+  overflow: hidden;
+}
+
+.thumbnailImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumbnailPlaceholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.paperMini {
+  width: 70px;
+  background: var(--nice-bg, #FFF);
+  border: 1px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-sm, 2px);
+  padding: var(--nice-space-2, 8px) var(--nice-space-1-5, 6px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--nice-space-1, 4px);
+  box-shadow: 0 1px 4px var(--nice-overlay-8, rgba(0, 0, 0, 0.08));
+}
+
+.paperLine {
+  height: 4px;
+  background: var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-sm, 2px);
+}
+
+/* Hover overlay */
+.cardOverlay {
+  position: absolute;
+  inset: 0;
+  background: var(--nice-overlay-35, rgba(0, 0, 0, 0.35));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--nice-space-2, 8px);
+}
+
+.overlayBtn {
+  width: 32px;
+  height: 32px;
+  background: var(--nice-bg, #FFF);
+  border: none;
+  border-radius: var(--nice-radius-full, 50%);
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.1s;
+}
+
+.overlayBtn:hover { background: var(--nice-primary-bg, #e0f2fe); }
+
+.overlayBtnDanger {
+  width: 28px; height: 28px;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--nice-overlay-light-90, rgba(255, 255, 255, 0.9));
+  border: 1px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-md, 6px);
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--nice-danger, #ef4444);
+  transition: all 0.1s;
+}
+
+.overlayBtnDanger:hover { background: var(--nice-danger-bg, #fee2e2) !important; }
+
+/* Card body */
+.cardBody { padding: var(--nice-space-2, 8px) var(--nice-space-2-5, 10px); }
+
+.cardName {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--nice-text, #0f172a);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: var(--nice-space-0-5, 2px);
+}
+
+.dark .cardName { color: var(--nice-bg-secondary, #f1f5f9); }
+
+.cardDesc {
+  font-size: 11px;
+  color: var(--nice-text-secondary, #64748b);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin-bottom: var(--nice-space-1, 4px);
+}
+
+.cardMeta {
+  display: flex;
+  align-items: center;
+  gap: var(--nice-space-1-5, 6px);
+  margin-bottom: var(--nice-space-1, 4px);
+}
+
+.cardSize {
+  font-size: 10px;
+  color: var(--nice-text-muted, #94a3b8);
+  padding: var(--nice-space-px, 1px) var(--nice-space-1-25, 5px);
+  background: var(--nice-bg-secondary, #f1f5f9);
+  border-radius: var(--nice-radius-sm, 4px);
+}
+
+.cardCat {
+  font-size: 10px;
+  color: var(--nice-primary-hover, #2563eb);
+  background: var(--nice-primary-bg, #eff6ff);
+  padding: var(--nice-space-px, 1px) var(--nice-space-1-25, 5px);
+  border-radius: var(--nice-radius-sm, 4px);
+}
+
+.cardTags { display: flex; gap: var(--nice-space-0-75, 3px); flex-wrap: wrap; }
+
+.cardTag {
+  font-size: 9px;
+  color: var(--nice-text-muted, #94a3b8);
+  background: var(--nice-bg-secondary, #f8fafc);
+  border: 1px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-sm, 4px);
+  padding: var(--nice-space-px, 1px) var(--nice-space-1, 4px);
+}
+
+/* Empty state */
+.emptyState {
+  width: 100%;
+  padding: var(--nice-space-12, 48px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--nice-space-2, 8px);
+  color: var(--nice-text-muted, #94a3b8);
+  font-size: 14px;
+}
+
+.emptyIcon { font-size: 40px; }

package/src/template-browser/index.ts

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