@nice2dev/ui-printing 1.2.0 → 1.2.2

package/src/template-editor/NiceTemplateEditor.tsx

@@ -149,6 +149,7 @@ function historyReducer(state: HistoryState, action: HistoryAction): HistoryStat
  */
 const INK = '#000000';
 /** Same, for the faint grey a watermark is drawn in. */
+// audit-allow: literal-color — ink on the white page - a print colour
 const INK_FAINT = '#94a3b8';
 
 function uid() {
@@ -285,6 +286,7 @@ const FieldElement: React.FC<FieldElementProps> = ({
   onResizeStart,
   readOnly,
 }) => {
+  const { t } = useNiceTranslation();
   const pos = field.position;
   const st = field.style;
   const mm = (v: number) => v * zoom * MM_TO_PX;
@@ -344,7 +346,7 @@ const FieldElement: React.FC<FieldElementProps> = ({
       ) : isBarcode ? (
         <div className={styles.fieldBarcodePlaceholder}>
           <NiceIcon name={field.type === 'qr' ? 'qr-code' : 'barcode'} size={14} />{' '}
-          {field.type === 'qr' ? 'QR' : 'Barcode'}
+          {field.type === 'qr' ? 'QR' : t('templateEditor.barcode', 'Barcode')}
         </div>
       ) : field.type === 'signature' ? (
         <div className={styles.fieldSignaturePlaceholder}>
@@ -395,6 +397,7 @@ const SectionCanvas: React.FC<SectionCanvasProps> = ({
   const [draggingOver, setDraggingOver] = useState(false);
 
   const sectionTypeColors: Record<string, string> = {
+    // audit-allow: literal-color +3 — band tints on the white page - print colours
     header: 'rgba(219,234,254,0.35)',
     footer: 'rgba(220,252,231,0.35)',
     background: 'rgba(254,249,195,0.35)',
@@ -556,6 +559,7 @@ const Toolbar: React.FC<ToolbarProps> = ({
   onSendBackward,
   onSave,
 }) => {
+  const { t } = useNiceTranslation();
   const { t: tr } = useNiceTranslation();
   const [insertOpen, setInsertOpen] = useState(false);
   const ZOOM_PRESETS = [0.5, 0.75, 1, 1.25, 1.5, 2];
@@ -578,14 +582,14 @@ const Toolbar: React.FC<ToolbarProps> = ({
         <button
           className={`${styles.toolbarBtn} ${tpl.orientation === 'portrait' ? styles.toolbarBtnActive : ''}`}
           onClick={() => onPaperChange(tpl.paperSize, 'portrait')}
-          title="Pion"
+          title={t('templateEditor.portrait', 'Portrait')}
         >
           <NiceIcon name="file" size={14} />
         </button>
         <button
           className={`${styles.toolbarBtn} ${tpl.orientation === 'landscape' ? styles.toolbarBtnActive : ''}`}
           onClick={() => onPaperChange(tpl.paperSize, 'landscape')}
-          title="Poziom"
+          title={t('templateEditor.landscape', 'Landscape')}
         >
           <NiceIcon name="file" size={14} style={{ transform: 'rotate(90deg)' }} />
         </button>
@@ -641,7 +645,9 @@ const Toolbar: React.FC<ToolbarProps> = ({
                   {fieldTypeLabel(tr, t)}
                 </button>
               ))}
-              <div className={styles.insertCategory}>Elementy statyczne</div>
+              <div className={styles.insertCategory}>
+                {t('templateEditor.staticElements', 'Static elements')}
+              </div>
               {[
                 'static_text',
                 'static_image',
@@ -663,7 +669,7 @@ const Toolbar: React.FC<ToolbarProps> = ({
                   {fieldTypeLabel(tr, t)}
                 </button>
               ))}
-              <div className={styles.insertCategory}>Specjalne</div>
+              <div className={styles.insertCategory}>{t('templateEditor.special', 'Special')}</div>
               <button
                 className={styles.insertItem}
                 onClick={() => {
@@ -754,7 +760,11 @@ const Toolbar: React.FC<ToolbarProps> = ({
             ⊥
           </button>
           <span className={styles.toolbarSep} />
-          <button className={styles.toolbarBtn} onClick={onBringForward} title="Do przodu">
+          <button
+            className={styles.toolbarBtn}
+            onClick={onBringForward}
+            title={t('templateEditor.bringForward', 'Bring forward')}
+          >
             <NiceIcon name="arrow-up" size={14} />
           </button>
           <button
@@ -844,6 +854,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   onUpdateTpl,
   onReorderField,
 }) => {
+  const { t } = useNiceTranslation();
   const { t: tr } = useNiceTranslation();
   const [search, setSearch] = useState('');
   const filteredFields = schema?.fields.filter(
@@ -982,7 +993,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         {/* ── Watermarks tab ── */}
         {activeTab === 'watermarks' && (
           <>
-            <div className={styles.panelHeader}>Znaki wodne</div>
+            <div className={styles.panelHeader}>{t('templateEditor.watermarks', 'Watermarks')}</div>
             <div className={styles.wmList}>
               {(tpl.watermarks ?? []).map((wm) => (
                 <div key={wm.id} className={styles.wmItem}>
@@ -1022,7 +1033,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                     </div>
                   )}
                   <div className={styles.wmRow}>
-                    <span className={styles.wmLabel}>Krycie</span>
+                    <span className={styles.wmLabel}>{t('templateEditor.opacity', 'Opacity')}</span>
                     <input
                       type="range"
                       min={0.02}
@@ -1111,7 +1122,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                       {
                         id: uid(),
                         type: 'text',
-                        text: 'COPY',
+                        text: t('templateEditor.copy', 'COPY'),
                         opacity: 0.12,
                         angle: -45,
                         fontSize: 60,
@@ -1131,12 +1142,12 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         {/* ── Signatures tab ── */}
         {activeTab === 'signatures' && (
           <>
-            <div className={styles.panelHeader}>Podpisy</div>
+            <div className={styles.panelHeader}>{t('templateEditor.signatures', 'Signatures')}</div>
             <div className={styles.wmList}>
               {(tpl.signatures ?? []).map((sig) => (
                 <div key={sig.id} className={styles.wmItem}>
                   <div className={styles.wmRow}>
-                    <span className={styles.wmLabel}>Etykieta</span>
+                    <span className={styles.wmLabel}>{t('templateEditor.label', 'Label')}</span>
                     <input
                       className={styles.wmInput}
                       value={sig.label}
@@ -1150,7 +1161,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                     />
                   </div>
                   <div className={styles.wmRow}>
-                    <span className={styles.wmLabel}>Nazwisko</span>
+                    <span className={styles.wmLabel}>{t('templateEditor.signerName', 'Name')}</span>
                     <input
                       className={styles.wmInput}
                       value={sig.signerName ?? ''}
@@ -1254,7 +1265,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                 />
               </div>
               <div className={styles.settingsRow}>
-                <label className={styles.settingsLabel}>Kategoria</label>
+                <label className={styles.settingsLabel}>
+                  {t('templateEditor.category', 'Category')}
+                </label>
                 <input
                   className={styles.settingsInput}
                   value={tpl.category ?? ''}
@@ -1286,7 +1299,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                       onUpdateTpl({ margins: { ...tpl.margins, [side]: +e.target.value } })
                     }
                   />
-                  <span className={styles.settingsUnit}>mm</span>
+                  <span className={styles.settingsUnit}>{t('templateEditor.mm', 'mm')}</span>
                 </div>
               ))}
             </div>
@@ -1315,6 +1328,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
   paperWidthMm,
   paperHeightMm: _paperHeightMm,
 }) => {
+  const { t } = useNiceTranslation();
   const { t: tr } = useNiceTranslation();
   const p = useCallback(
     (patch: Partial<FieldPosition>) =>
@@ -1396,8 +1410,8 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
               {[
                 { key: 'x' as const, label: 'X', unit: 'mm' },
                 { key: 'y' as const, label: 'Y', unit: 'mm' },
-                { key: 'width' as const, label: 'Szer.', unit: 'mm' },
-                { key: 'height' as const, label: 'Wys.', unit: 'mm' },
+                { key: 'width' as const, label: t('templateEditor.widthShort', 'W'), unit: 'mm' },
+                { key: 'height' as const, label: t('templateEditor.heightShort', 'H'), unit: 'mm' },
               ].map(({ key, label, unit }) => (
                 <div key={key} className={styles.posCell}>
                   <label className={styles.posLabel}>{label}</label>
@@ -1425,7 +1439,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                 <span className={styles.posUnit}>°</span>
               </div>
               <div className={styles.posCell}>
-                <label className={styles.posLabel}>Z-idx</label>
+                <label className={styles.posLabel}>{t('templateEditor.zIdx', 'Z-idx')}</label>
                 <input
                   type="number"
                   step={1}
@@ -1473,9 +1487,11 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           <>
             {hasText && (
               <div className={styles.styleGroup}>
-                <div className={styles.styleGroupTitle}>Czcionka</div>
+                <div className={styles.styleGroupTitle}>{t('templateEditor.font', 'Font')}</div>
                 <div className={styles.styleRow}>
-                  <label className={styles.styleLabel}>Rodzina</label>
+                  <label className={styles.styleLabel}>
+                    {t('templateEditor.fontFamily', 'Family')}
+                  </label>
                   <select
                     className={styles.styleSelectFull}
                     value={field.style.fontFamily ?? 'sans-serif'}
@@ -1574,7 +1590,9 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                   </div>
                 </div>
                 <div className={styles.styleRow}>
-                  <label className={styles.styleLabel}>W. linii</label>
+                  <label className={styles.styleLabel}>
+                    {t('templateEditor.lineHeight', 'Line h.')}
+                  </label>
                   <input
                     type="number"
                     step={0.1}
@@ -1624,7 +1642,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                 </button>
               </div>
               <div className={styles.styleRow}>
-                <label className={styles.styleLabel}>Ramka</label>
+                <label className={styles.styleLabel}>{t('templateEditor.border', 'Border')}</label>
                 <input
                   type="number"
                   step={0.5}
@@ -1651,7 +1669,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                 </select>
               </div>
               <div className={styles.styleRow}>
-                <label className={styles.styleLabel}>Zaokr.</label>
+                <label className={styles.styleLabel}>{t('templateEditor.radius', 'Radius')}</label>
                 <input
                   type="number"
                   step={1}
@@ -1664,7 +1682,9 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                 <span className={styles.styleUnit}>px</span>
               </div>
               <div className={styles.styleRow}>
-                <label className={styles.styleLabel}>Padding</label>
+                <label className={styles.styleLabel}>
+                  {t('templateEditor.padding', 'Padding')}
+                </label>
                 <input
                   type="number"
                   step={0.5}
@@ -1674,10 +1694,12 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                   value={field.style.padding ?? 0}
                   onChange={(e) => s({ padding: +e.target.value })}
                 />
-                <span className={styles.styleUnit}>mm</span>
+                <span className={styles.styleUnit}>{t('templateEditor.mm', 'mm')}</span>
               </div>
               <div className={styles.styleRow}>
-                <label className={styles.styleLabel}>Krycie</label>
+                <label className={styles.styleLabel}>
+                  {t('templateEditor.opacity', 'Opacity')}
+                </label>
                 <input
                   type="range"
                   min={0.1}
@@ -1707,7 +1729,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                 className={styles.styleInputFull}
                 value={field.dataPath}
                 onChange={(e) => onChange({ dataPath: e.target.value })}
-                placeholder="np. invoice.number"
+                placeholder={t('templateEditor.egInvoiceNumber', 'e.g. invoice.number')}
               />
             </div>
             <div className={styles.styleRow}>
@@ -1716,7 +1738,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                 className={styles.styleInputFull}
                 value={field.format ?? ''}
                 onChange={(e) => onChange({ format: e.target.value })}
-                placeholder="DD.MM.YYYY / #,##0.00"
+                placeholder={t('templateEditor.ddMmYyyy000', 'DD.MM.YYYY / #,##0.00')}
               />
             </div>
             <div className={styles.styleRow}>
@@ -1793,11 +1815,13 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                     },
                   })
                 }
-                placeholder="np. invoice.isPaid"
+                placeholder={t('templateEditor.egInvoiceIsPaid', 'e.g. invoice.isPaid')}
               />
             </div>
             <div className={styles.styleRow}>
-              <label className={styles.styleLabel}>Operator</label>
+              <label className={styles.styleLabel}>
+                {t('templateEditor.operator', 'Operator')}
+              </label>
               <select
                 className={styles.styleSelectFull}
                 value={field.conditional?.operator ?? 'eq'}
@@ -1815,9 +1839,9 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
               >
                 <option value="eq">= {tr('printing.editor.opEqual', 'equal')}</option>
                 <option value="neq">≠ {tr('printing.editor.opNotEqual', 'not equal')}</option>
-                <option value="gt">&gt; wieksze</option>
-                <option value="lt">&lt; mniejsze</option>
-                <option value="contains">zawiera</option>
+                <option value="gt">{t('templateEditor.greaterThan', '> greater than')}</option>
+                <option value="lt">{t('templateEditor.lessThan', '< less than')}</option>
+                <option value="contains">{t('templateEditor.contains', 'contains')}</option>
               </select>
             </div>
             <div className={styles.styleRow}>
@@ -1834,7 +1858,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                     },
                   })
                 }
-                placeholder='np. true / "PAID"'
+                placeholder={t('templateEditor.egTruePaid', 'e.g. true / "PAID"')}
               />
             </div>
             {field.conditional?.field && (
@@ -1883,6 +1907,7 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
   style,
   theme = 'light',
 }) => {
+  const { t } = useNiceTranslation();
   const [{ past, present: tpl, future }, dispatch] = useReducer(historyReducer, {
     past: [],
     present: initialTemplate ?? defaultTemplate(),
@@ -1961,7 +1986,7 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
             {
               id: uid(),
               type: 'text',
-              text: 'COPY',
+              text: t('templateEditor.copy', 'COPY'),
               opacity: 0.12,
               angle: -45,
               fontSize: 60,
@@ -2004,7 +2029,7 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
       onChange?.({ ...tpl, ...updated });
       setSelectedIds(new Set([field.id]));
     },
-    [tpl, activeSection, onChange],
+    [tpl, activeSection, onChange, t, tr, update],
   );
 
   // -- Drop from left panel --
@@ -2031,7 +2056,11 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
     if (e.ctrlKey || e.metaKey) {
       setSelectedIds((prev) => {
         const n = new Set(prev);
-        n.has(id) ? n.delete(id) : n.add(id);
+        if (n.has(id)) {
+          n.delete(id);
+        } else {
+          n.add(id);
+        }
         return n;
       });
     } else if (e.shiftKey) {

package/src/template-editor/TemplateEditor.module.css

@@ -752,7 +752,7 @@
 }
 
 .dark .testDataBar {
-  background: #1c1709;
+  background: var(--nice-warning-bg, #1c1709);
   border-bottom-color: var(--nice-warning-dark, #78350f);
 }
 
@@ -902,7 +902,7 @@
 .marginGuide {
   position: absolute;
   pointer-events: none;
-  border: 1px dashed rgba(59, 130, 246, 0.35);
+  border: 1px dashed color-mix(in srgb, var(--nice-color-primary, #3b82f6) 35%, transparent);
   z-index: 0;
 }
 
@@ -941,7 +941,7 @@
   letter-spacing: 0.06em;
   padding: var(--nice-space-px, 1px) var(--nice-space-1-25, 5px);
   border-radius: var(--nice-radius-sm, 3px);
-  background: rgba(148, 163, 184, 0.25);
+  background: color-mix(in srgb, var(--nice-text-muted, #94a3b8) 25%, transparent);
   color: var(--nice-text-secondary, #64748b);
   pointer-events: none;
   z-index: 50;

package/src/types/printingTypes.ts

@@ -238,7 +238,7 @@ export interface NiceTemplateEditorProps {
 }
 
 export interface NiceTemplateBrowserProps {
-  templates: PrintTemplate[];
+  templates?: PrintTemplate[];
   selectedId?: TemplateId;
   onSelect?: (template: PrintTemplate) => void;
   onImport?: (template: PrintTemplate) => void;
@@ -271,7 +271,7 @@ export interface NicePrintPreviewProps {
 }
 
 export interface NicePrintQueueProps {
-  jobs: PrintJob[];
+  jobs?: PrintJob[];
   printers?: PrinterInfo[];
   onJobUpdate: (id: PrintJobId, patch: Partial<PrintJob>) => void;
   onJobRemove: (id: PrintJobId) => void;