@nice2dev/ui-printing 1.1.7 → 1.1.10

package/src/print-queue/NicePrintQueue.tsx

@@ -1,3 +1,5 @@
+import { NiceIcon, useNiceTranslation } from '@nice2dev/ui';
+import type { NiceTranslateFn } from '@nice2dev/ui';
 import React, { useState, useCallback } from 'react';
 
 import type { PrintJob, PrinterInfo, NicePrintQueueProps } from '../types/printingTypes';
@@ -5,32 +7,46 @@ import type { PrintJob, PrinterInfo, NicePrintQueueProps } from '../types/printi
 import styles from './PrintQueue.module.css';
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
-const STATUS_LABELS: Record<string, string> = {
-  queued: 'Kolejka',
-  printing: 'Drukowanie',
-  done: 'Wydrukowano',
-  error: 'Błąd',
-  paused: 'Wstrzymano',
-  cancelled: 'Anulowano',
+const STATUS_DEFAULTS: Record<string, string> = {
+  queued: 'Queued',
+  printing: 'Printing',
+  done: 'Printed',
+  error: 'Error',
+  paused: 'Paused',
+  cancelled: 'Cancelled',
 };
 
-function formatTime(iso: string): string {
+const statusLabel = (t: NiceTranslateFn, status: string): string =>
+  STATUS_DEFAULTS[status] ? t(`printing.status.${status}`, STATUS_DEFAULTS[status]) : status;
+
+function formatTime(lang: string, iso: string): string {
   try {
     const d = new Date(iso);
-    return d.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' });
+    return d.toLocaleTimeString(lang, { hour: '2-digit', minute: '2-digit' });
   } catch {
     return iso;
   }
 }
 
+/**
+ * How long a job has been running. Rolls over into hours and days — without
+ * that, a job stuck since yesterday rendered as `1680m 12s`, which reads as a
+ * bug rather than as a stuck job.
+ */
 function formatDuration(startIso: string): string {
-  const diff = Date.now() - new Date(startIso).getTime();
-  const s = Math.floor(diff / 1000);
+  const s = Math.floor((Date.now() - new Date(startIso).getTime()) / 1000);
   if (s < 60) {
     return `${s}s`;
   }
   const m = Math.floor(s / 60);
-  return `${m}m ${s % 60}s`;
+  if (m < 60) {
+    return `${m}m ${s % 60}s`;
+  }
+  const h = Math.floor(m / 60);
+  if (h < 24) {
+    return `${h}h ${m % 60}m`;
+  }
+  return `${Math.floor(h / 24)}d ${h % 24}h`;
 }
 
 // ── Stats bar ─────────────────────────────────────────────────────────────────
@@ -38,6 +54,7 @@ interface StatsBarProps {
   jobs: PrintJob[];
 }
 const StatsBar: React.FC<StatsBarProps> = ({ jobs }) => {
+  const { t } = useNiceTranslation();
   const printing = jobs.filter((j) => j.status === 'printing').length;
   const queued = jobs.filter((j) => j.status === 'queued').length;
   const done = jobs.filter((j) => j.status === 'done').length;
@@ -46,19 +63,20 @@ const StatsBar: React.FC<StatsBarProps> = ({ jobs }) => {
     <div className={styles.statsBar}>
       <span className={`${styles.stat} ${styles.statPrinting}`}>
         <span className={styles.dot} />
-        Drukuje: <strong>{printing}</strong>
+        {t('printing.stats.active', 'Printing')}: <strong>{printing}</strong>
       </span>
       <span className={`${styles.stat} ${styles.statQueued}`}>
-        <span className={styles.dot} />W kolejce: <strong>{queued}</strong>
+        <span className={styles.dot} />
+        {t('printing.stats.queued', 'In queue')}: <strong>{queued}</strong>
       </span>
       <span className={`${styles.stat} ${styles.statDone}`}>
         <span className={styles.dot} />
-        Gotowe: <strong>{done}</strong>
+        {t('printing.stats.done', 'Done')}: <strong>{done}</strong>
       </span>
       {errored > 0 && (
         <span className={`${styles.stat} ${styles.statError}`}>
           <span className={styles.dot} />
-          Błędy: <strong>{errored}</strong>
+          {t('printing.stats.errors', 'Errors')}: <strong>{errored}</strong>
         </span>
       )}
     </div>
@@ -90,6 +108,7 @@ const JobRow: React.FC<JobRowProps> = ({
   onPrint,
   onReorder,
 }) => {
+  const { t, lang } = useNiceTranslation();
   const printer = printers.find((p) => p.id === job.options.printerId);
   const canMoveUp = index > 0 && job.status === 'queued';
   const canMoveDown = index < total - 1 && job.status === 'queued';
@@ -108,7 +127,7 @@ const JobRow: React.FC<JobRowProps> = ({
 
       {/* Status badge */}
       <span className={`${styles.statusBadge} ${styles[`badge-${job.status}`]}`}>
-        {STATUS_LABELS[job.status] ?? job.status}
+        {statusLabel(t, job.status)}
       </span>
 
       {/* Job info */}
@@ -116,9 +135,15 @@ const JobRow: React.FC<JobRowProps> = ({
         <div className={styles.jobName}>{job.templateName ?? job.templateId}</div>
         <div className={styles.jobMeta}>
           {job.entityLabel && <span>{job.entityLabel}</span>}
-          {printer && <span>🖨 {printer.name}</span>}
+          {printer && (
+            <span>
+              <NiceIcon name="printer" size={12} /> {printer.name}
+            </span>
+          )}
           <span>×{job.options.copies}</span>
-          {job.createdAt && <span className={styles.jobTime}>{formatTime(job.createdAt)}</span>}
+          {job.createdAt && (
+            <span className={styles.jobTime}>{formatTime(lang, job.createdAt)}</span>
+          )}
           {job.startedAt && job.status !== 'done' && (
             <span className={styles.jobDuration}>{formatDuration(job.startedAt)}</span>
           )}
@@ -140,20 +165,22 @@ const JobRow: React.FC<JobRowProps> = ({
         <button
           className={styles.copiesBtn}
           disabled={job.options.copies <= 1}
+          aria-label={t('printing.copies.decrease', 'One copy fewer')}
           onClick={() =>
             onUpdate(job.id, { options: { ...job.options, copies: job.options.copies - 1 } })
           }
         >
-          −
+          <NiceIcon name="minus" size={12} />
         </button>
         <span className={styles.copiesValue}>{job.options.copies}</span>
         <button
           className={styles.copiesBtn}
+          aria-label={t('printing.copies.increase', 'One copy more')}
           onClick={() =>
             onUpdate(job.id, { options: { ...job.options, copies: job.options.copies + 1 } })
           }
         >
-          +
+          <NiceIcon name="plus" size={12} />
         </button>
       </div>
 
@@ -162,50 +189,54 @@ const JobRow: React.FC<JobRowProps> = ({
         {canMoveUp && (
           <button
             className={styles.actionBtn}
-            title="Przesuń wyżej"
+            title={t('printing.action.moveUp', 'Move up')}
             onClick={() => onReorder(index, index - 1)}
           >
-            ↑
+            <NiceIcon name="arrow-up" size={14} />
           </button>
         )}
         {canMoveDown && (
           <button
             className={styles.actionBtn}
-            title="Przesuń niżej"
+            title={t('printing.action.moveDown', 'Move down')}
             onClick={() => onReorder(index, index + 1)}
           >
-            ↓
+            <NiceIcon name="arrow-down" size={14} />
           </button>
         )}
         {job.status === 'queued' && (
-          <button className={styles.actionBtn} title="Drukuj teraz" onClick={() => onPrint(job.id)}>
-            ▶
+          <button
+            className={styles.actionBtn}
+            title={t('printing.action.printNow', 'Print now')}
+            onClick={() => onPrint(job.id)}
+          >
+            <NiceIcon name="play" size={14} />
           </button>
         )}
         {job.status === 'printing' && (
           <button
             className={styles.actionBtn}
-            title="Wstrzymaj"
+            title={t('printing.action.pause', 'Pause')}
             onClick={() => onUpdate(job.id, { status: 'paused' })}
           >
-            ⏸
+            <NiceIcon name="pause" size={14} />
           </button>
         )}
         {job.status === 'paused' && (
           <button
             className={styles.actionBtn}
-            title="Wznów"
+            title={t('printing.action.resume', 'Resume')}
             onClick={() => onUpdate(job.id, { status: 'queued' })}
           >
-            ▶
+            <NiceIcon name="play" size={14} />
           </button>
         )}
         <button
           className={`${styles.actionBtn} ${styles.removeBtn}`}
-          title="Usuń"
+          title={t('printing.action.remove', 'Remove')}
           onClick={() => onRemove(job.id)}
         >
-          ✕
+          <NiceIcon name="close" size={14} />
         </button>
       </div>
     </div>
@@ -227,6 +258,7 @@ export const NicePrintQueue: React.FC<NicePrintQueueProps> = ({
   style,
   theme = 'light',
 }) => {
+  const { t } = useNiceTranslation();
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
   const [filter, setFilter] = useState<'all' | 'queued' | 'printing' | 'done' | 'error'>('all');
 
@@ -280,7 +312,7 @@ export const NicePrintQueue: React.FC<NicePrintQueueProps> = ({
               className={`${styles.filterTab} ${filter === f ? styles.filterTabActive : ''}`}
               onClick={() => setFilter(f)}
             >
-              {f === 'all' ? 'Wszystkie' : STATUS_LABELS[f]}
+              {f === 'all' ? t('printing.filter.all', 'All') : statusLabel(t, f)}
               <span className={styles.filterCount}>
                 {f === 'all' ? jobs.length : jobs.filter((j) => j.status === f).length}
               </span>
@@ -291,15 +323,17 @@ export const NicePrintQueue: React.FC<NicePrintQueueProps> = ({
         {/* Bulk actions */}
         {selectedIds.size > 0 && (
           <div className={styles.bulkActions}>
-            <span className={styles.bulkCount}>{selectedIds.size} zaznaczonych</span>
+            <span className={styles.bulkCount}>
+              {selectedIds.size} {t('printing.bulk.selected', 'selected')}
+            </span>
             {onBulkPrint && (
               <button className={styles.bulkBtn} onClick={bulkPrint}>
-                ▶ Drukuj wybrane
+                <NiceIcon name="printer" size={14} /> {t('printing.bulk.print', 'Print selected')}
               </button>
             )}
             {onBulkRemove && (
               <button className={`${styles.bulkBtn} ${styles.bulkBtnRemove}`} onClick={bulkRemove}>
-                ✕ Usuń wybrane
+                <NiceIcon name="trash" size={14} /> {t('printing.bulk.remove', 'Remove selected')}
               </button>
             )}
           </div>
@@ -311,8 +345,8 @@ export const NicePrintQueue: React.FC<NicePrintQueueProps> = ({
         {filteredJobs.length === 0 ? (
           <div className={styles.emptyState}>
             {filter === 'all'
-              ? 'Brak zadań w kolejce'
-              : `Brak zadań ze statusem "${STATUS_LABELS[filter]}"`}
+              ? t('printing.empty.queue', 'No jobs in the queue')
+              : `${t('printing.empty.filtered', 'No jobs with status')} "${statusLabel(t, filter)}"`}
           </div>
         ) : (
           <>
@@ -323,9 +357,9 @@ export const NicePrintQueue: React.FC<NicePrintQueueProps> = ({
                 onChange={selectAll}
                 checked={selectedIds.size === filteredJobs.length && filteredJobs.length > 0}
               />
-              <span className={styles.headerLabel}>Zadanie</span>
-              <span className={styles.headerLabel}>Kopie</span>
-              <span className={styles.headerLabel}>Akcje</span>
+              <span className={styles.headerLabel}>{t('printing.col.job', 'Job')}</span>
+              <span className={styles.headerLabel}>{t('printing.col.copies', 'Copies')}</span>
+              <span className={styles.headerLabel}>{t('printing.col.actions', 'Actions')}</span>
             </div>
             {filteredJobs.map((job, _index) => (
               <JobRow

package/src/print-queue/PrintQueue.module.css

@@ -10,9 +10,9 @@
   color: var(--nice-text, #1e293b);
 }
 .dark {
-  background: var(--nice-text, #1e293b);
-  border-color: var(--nice-text, #334155);
-  color: var(--nice-bg-secondary, #f1f5f9);
+  background: var(--nice-bg-secondary, #1e293b);
+  border-color: var(--nice-border-color, #334155);
+  color: var(--nice-text-primary, #f1f5f9);
 }
 
 /* Stats bar */
@@ -25,8 +25,8 @@
   border-bottom: 1px solid var(--nice-border, #e2e8f0);
 }
 .dark .statsBar {
-  background: var(--nice-text, #0f172a);
-  border-color: var(--nice-text, #334155);
+  background: var(--nice-bg-primary, #0f172a);
+  border-color: var(--nice-border-color, #334155);
 }
 
 .stat {
@@ -64,7 +64,7 @@
   flex-wrap: wrap;
 }
 .dark .toolbar {
-  border-color: var(--nice-text, #334155);
+  border-color: var(--nice-border-color, #334155);
 }
 
 .filterTabs {
@@ -152,7 +152,7 @@
   border-bottom: 1px solid var(--nice-bg-secondary, #f1f5f9);
 }
 .dark .listHeader {
-  border-color: var(--nice-text, #1e293b);
+  border-color: var(--nice-border-color, #1e293b);
 }
 .headerLabel {
   white-space: nowrap;
@@ -169,13 +169,13 @@
   transition: background 0.1s;
 }
 .dark .jobRow {
-  border-color: var(--nice-text, #334155);
+  border-color: var(--nice-border-color, #334155);
 }
 .jobRow:hover {
   background: var(--nice-bg-secondary, #f8fafc);
 }
 .dark .jobRow:hover {
-  background: var(--nice-text, #0f172a);
+  background: var(--nice-bg-primary, #0f172a);
 }
 .jobRowSelected {
   background: var(--nice-primary-bg, #eff6ff) !important;

package/src/template-browser/NiceTemplateBrowser.tsx

@@ -1,4 +1,5 @@
 /* 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 { NiceIcon, useNiceTranslation } from '@nice2dev/ui';
 import React, { useState } from 'react';
 
 import type {
@@ -9,7 +10,15 @@ import type {
 
 import styles from './TemplateBrowser.module.css';
 
-const CATEGORIES = ['Faktury', 'Raporty', 'Etykiety', 'Listy', 'Umowy', 'Inne'];
+/** Built-in category chips; `key` is what a template's `category` field holds. */
+const CATEGORIES: { key: string; fallback: string }[] = [
+  { key: 'printing.category.invoices', fallback: 'Invoices' },
+  { key: 'printing.category.reports', fallback: 'Reports' },
+  { key: 'printing.category.labels', fallback: 'Labels' },
+  { key: 'printing.category.letters', fallback: 'Letters' },
+  { key: 'printing.category.contracts', fallback: 'Contracts' },
+  { key: 'printing.category.other', fallback: 'Other' },
+];
 
 function importTemplateFromJson(file: File): Promise<PrintTemplate> {
   return new Promise((resolve, reject) => {
@@ -47,6 +56,7 @@ export const NiceTemplateBrowser: React.FC<NiceTemplateBrowserProps> = ({
   style,
   theme = 'light',
 }) => {
+  const { t } = useNiceTranslation();
   const [search, setSearch] = useState('');
   const [categoryFilter, setCategoryFilter] = useState<string | null>(null);
   const [hoveredId, setHoveredId] = useState<string | null>(null);
@@ -86,19 +96,23 @@ export const NiceTemplateBrowser: React.FC<NiceTemplateBrowserProps> = ({
         <input
           type="search"
           className={styles.searchInput}
-          placeholder="Szukaj szablonów…"
+          placeholder={t('printing.searchTemplates', 'Search templates…')}
           value={search}
           onChange={(e) => setSearch(e.target.value)}
         />
-        <button className={styles.actionBtn} onClick={onNew} title="Nowy szablon">
-          + Nowy
+        <button
+          className={styles.actionBtn}
+          onClick={onNew}
+          title={t('printing.newTemplate', 'New template')}
+        >
+          <NiceIcon name="plus" size={14} /> {t('printing.new', 'New')}
         </button>
         <button
           className={styles.actionBtn}
           onClick={() => fileInputRef.current?.click()}
-          title="Importuj JSON"
+          title={t('printing.importJson', 'Import JSON')}
         >
-          ⬆ Import
+          <NiceIcon name="upload" size={14} /> {t('printing.import', 'Import')}
         </button>
         <input ref={fileInputRef} type="file" accept=".json" hidden onChange={handleFileImport} />
       </div>
@@ -109,15 +123,15 @@ export const NiceTemplateBrowser: React.FC<NiceTemplateBrowserProps> = ({
           className={`${styles.catChip} ${!categoryFilter ? styles.catChipActive : ''}`}
           onClick={() => setCategoryFilter(null)}
         >
-          Wszystkie
+          {t('printing.filter.all', 'All')}
         </button>
         {CATEGORIES.map((cat) => (
           <button
-            key={cat}
-            className={`${styles.catChip} ${categoryFilter === cat ? styles.catChipActive : ''}`}
-            onClick={() => setCategoryFilter((c) => (c === cat ? null : cat))}
+            key={cat.key}
+            className={`${styles.catChip} ${categoryFilter === cat.fallback ? styles.catChipActive : ''}`}
+            onClick={() => setCategoryFilter((c) => (c === cat.fallback ? null : cat.fallback))}
           >
-            {cat}
+            {t(cat.key, cat.fallback)}
           </button>
         ))}
       </div>
@@ -168,9 +182,9 @@ export const NiceTemplateBrowser: React.FC<NiceTemplateBrowserProps> = ({
                       onExport?.(tpl);
                       exportTemplate(tpl);
                     }}
-                    title="Eksportuj"
+                    title={t('printing.export', 'Export')}
                   >
-                    ⬇
+                    <NiceIcon name="download" size={14} />
                   </button>
                   {onDelete && (
                     <button
@@ -179,9 +193,9 @@ export const NiceTemplateBrowser: React.FC<NiceTemplateBrowserProps> = ({
                         e.stopPropagation();
                         onDelete(tpl.id);
                       }}
-                      title="Usuń"
+                      title={t('printing.action.remove', 'Remove')}
                     >
-                      ✕
+                      <NiceIcon name="trash" size={14} />
                     </button>
                   )}
                 </div>
@@ -194,7 +208,10 @@ export const NiceTemplateBrowser: React.FC<NiceTemplateBrowserProps> = ({
               {tpl.description && <div className={styles.cardDesc}>{tpl.description}</div>}
               <div className={styles.cardMeta}>
                 <span className={styles.cardSize}>
-                  {tpl.paperSize} {tpl.orientation === 'landscape' ? '↔' : '↕'}
+                  {tpl.paperSize}{' '}
+                  {tpl.orientation === 'landscape'
+                    ? t('printing.orientation.landscape', 'landscape')
+                    : t('printing.orientation.portrait', 'portrait')}
                 </span>
                 {tpl.category && <span className={styles.cardCat}>{tpl.category}</span>}
               </div>
@@ -213,9 +230,13 @@ export const NiceTemplateBrowser: React.FC<NiceTemplateBrowserProps> = ({
 
         {filtered.length === 0 && (
           <div className={styles.emptyState}>
-            <span className={styles.emptyIcon}>📄</span>
+            <span className={styles.emptyIcon}>
+              <NiceIcon name="file" size={32} />
+            </span>
             <span>
-              {search ? `Brak wyników dla "${search}"` : 'Brak szablonów. Utwórz pierwszy!'}
+              {search
+                ? `${t('printing.noMatches', 'No matches for')} "${search}"`
+                : t('printing.noTemplates', 'No templates yet.')}
             </span>
           </div>
         )}

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

@@ -11,9 +11,9 @@
 }
 
 .dark {
-  background: var(--nice-text, #0f172a);
-  color: var(--nice-border, #e2e8f0);
-  border-color: var(--nice-text, #1e293b);
+  background: var(--nice-bg-primary, #0f172a);
+  color: var(--nice-text-secondary, #e2e8f0);
+  border-color: var(--nice-border-color, #1e293b);
 }
 
 /* ── Top bar ── */
@@ -28,8 +28,8 @@
 }
 
 .dark .topBar {
-  background: var(--nice-text, #1e293b);
-  border-bottom-color: var(--nice-text, #334155);
+  background: var(--nice-bg-secondary, #1e293b);
+  border-bottom-color: var(--nice-border-color, #334155);
 }
 
 .searchInput {
@@ -48,9 +48,9 @@
   background: var(--nice-bg, #fff);
 }
 .dark .searchInput {
-  background: var(--nice-text, #334155);
-  border-color: var(--nice-text-secondary, #475569);
-  color: var(--nice-border, #e2e8f0);
+  background: var(--nice-bg-tertiary, #334155);
+  border-color: var(--nice-border-color, #475569);
+  color: var(--nice-text-secondary, #e2e8f0);
 }
 
 .actionBtn {
@@ -70,9 +70,9 @@
   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);
+  background: var(--nice-bg-tertiary, #334155);
+  border-color: var(--nice-border-color, #475569);
+  color: var(--nice-text-secondary, #e2e8f0);
 }
 
 /* ── Categories ── */
@@ -87,8 +87,8 @@
 }
 
 .dark .categoryRow {
-  background: var(--nice-text, #1e293b);
-  border-bottom-color: var(--nice-text, #334155);
+  background: var(--nice-bg-secondary, #1e293b);
+  border-bottom-color: var(--nice-border-color, #334155);
 }
 
 .catChip {
@@ -109,7 +109,7 @@
 .catChipActive {
   background: var(--nice-primary-hover, #2563eb);
   border-color: var(--nice-primary-hover, #2563eb);
-  color: var(--nice-bg, #fff);
+  color: var(--nice-text-on-primary, #fff);
 }
 
 /* ── Template grid ── */
@@ -146,8 +146,8 @@
 }
 
 .dark .card {
-  background: var(--nice-text, #1e293b);
-  border-color: var(--nice-text, #334155);
+  background: var(--nice-bg-secondary, #1e293b);
+  border-color: var(--nice-border-color, #334155);
 }
 
 /* Thumbnail */
@@ -253,7 +253,7 @@
 }
 
 .dark .cardName {
-  color: var(--nice-bg-secondary, #f1f5f9);
+  color: var(--nice-text-primary, #f1f5f9);
 }
 
 .cardDesc {