@nice2dev/ui-printing 1.1.6 → 1.1.9

package/src/template-browser/NiceTemplateBrowser.tsx

@@ -1,11 +1,24 @@
 /* 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 { PrintTemplate, TemplateId as _TemplateId, NiceTemplateBrowserProps } from '../types/printingTypes';
+import type {
+  PrintTemplate,
+  TemplateId as _TemplateId,
+  NiceTemplateBrowserProps,
+} from '../types/printingTypes';
 
 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) => {
@@ -43,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);
@@ -82,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>
@@ -105,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>
@@ -164,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
@@ -175,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>
@@ -190,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>
@@ -209,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

@@ -10,7 +10,11 @@
   overflow: hidden;
 }
 
-.dark { background: var(--nice-text, #0f172a); color: var(--nice-border, #e2e8f0); border-color: var(--nice-text, #1e293b); }
+.dark {
+  background: var(--nice-bg-primary, #0f172a);
+  color: var(--nice-text-secondary, #e2e8f0);
+  border-color: var(--nice-border-color, #1e293b);
+}
 
 /* ── Top bar ── */
 .topBar {
@@ -18,12 +22,15 @@
   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);
+  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); }
+.dark .topBar {
+  background: var(--nice-bg-secondary, #1e293b);
+  border-bottom-color: var(--nice-border-color, #334155);
+}
 
 .searchInput {
   flex: 1;
@@ -36,14 +43,21 @@
   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); }
+.searchInput:focus {
+  border-color: var(--nice-primary-light, #93c5fd);
+  background: var(--nice-bg, #fff);
+}
+.dark .searchInput {
+  background: var(--nice-bg-tertiary, #334155);
+  border-color: var(--nice-border-color, #475569);
+  color: var(--nice-text-secondary, #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);
+  background: var(--nice-bg, #fff);
   cursor: pointer;
   font-size: 12px;
   font-weight: 500;
@@ -52,8 +66,14 @@
   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); }
+.actionBtn:hover {
+  background: var(--nice-bg-secondary, #f1f5f9);
+}
+.dark .actionBtn {
+  background: var(--nice-bg-tertiary, #334155);
+  border-color: var(--nice-border-color, #475569);
+  color: var(--nice-text-secondary, #e2e8f0);
+}
 
 /* ── Categories ── */
 .categoryRow {
@@ -63,28 +83,33 @@
   border-bottom: 1px solid var(--nice-bg-secondary, #f1f5f9);
   flex-wrap: wrap;
   flex-shrink: 0;
-  background: var(--nice-bg, #FFF);
+  background: var(--nice-bg, #fff);
 }
 
-.dark .categoryRow { background: var(--nice-text, #1e293b); border-bottom-color: var(--nice-text, #334155); }
+.dark .categoryRow {
+  background: var(--nice-bg-secondary, #1e293b);
+  border-bottom-color: var(--nice-border-color, #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);
+  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); }
+.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);
+  color: var(--nice-text-on-primary, #fff);
 }
 
 /* ── Template grid ── */
@@ -102,7 +127,7 @@
 .card {
   flex: 0 0 auto;
   width: 180px;
-  background: var(--nice-bg, #FFF);
+  background: var(--nice-bg, #fff);
   border: 2px solid var(--nice-border, #e2e8f0);
   border-radius: var(--nice-radius-lg, 8px);
   overflow: hidden;
@@ -120,7 +145,10 @@
   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); }
+.dark .card {
+  background: var(--nice-bg-secondary, #1e293b);
+  border-color: var(--nice-border-color, #334155);
+}
 
 /* Thumbnail */
 .thumbnail {
@@ -145,7 +173,7 @@
 
 .paperMini {
   width: 70px;
-  background: var(--nice-bg, #FFF);
+  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);
@@ -175,7 +203,7 @@
 .overlayBtn {
   width: 32px;
   height: 32px;
-  background: var(--nice-bg, #FFF);
+  background: var(--nice-bg, #fff);
   border: none;
   border-radius: var(--nice-radius-full, 50%);
   cursor: pointer;
@@ -186,11 +214,16 @@
   transition: all 0.1s;
 }
 
-.overlayBtn:hover { background: var(--nice-primary-bg, #e0f2fe); }
+.overlayBtn:hover {
+  background: var(--nice-primary-bg, #e0f2fe);
+}
 
 .overlayBtnDanger {
-  width: 28px; height: 28px;
-  display: flex; align-items: center; justify-content: center;
+  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);
@@ -200,10 +233,14 @@
   transition: all 0.1s;
 }
 
-.overlayBtnDanger:hover { background: var(--nice-danger-bg, #fee2e2) !important; }
+.overlayBtnDanger:hover {
+  background: var(--nice-danger-bg, #fee2e2) !important;
+}
 
 /* Card body */
-.cardBody { padding: var(--nice-space-2, 8px) var(--nice-space-2-5, 10px); }
+.cardBody {
+  padding: var(--nice-space-2, 8px) var(--nice-space-2-5, 10px);
+}
 
 .cardName {
   font-weight: 600;
@@ -215,7 +252,9 @@
   margin-bottom: var(--nice-space-0-5, 2px);
 }
 
-.dark .cardName { color: var(--nice-bg-secondary, #f1f5f9); }
+.dark .cardName {
+  color: var(--nice-text-primary, #f1f5f9);
+}
 
 .cardDesc {
   font-size: 11px;
@@ -251,7 +290,11 @@
   border-radius: var(--nice-radius-sm, 4px);
 }
 
-.cardTags { display: flex; gap: var(--nice-space-0-75, 3px); flex-wrap: wrap; }
+.cardTags {
+  display: flex;
+  gap: var(--nice-space-0-75, 3px);
+  flex-wrap: wrap;
+}
 
 .cardTag {
   font-size: 9px;
@@ -274,4 +317,6 @@
   font-size: 14px;
 }
 
-.emptyIcon { font-size: 40px; }
+.emptyIcon {
+  font-size: 40px;
+}