@nice2dev/ui-printing 1.2.0 → 1.2.1

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() {
@@ -395,6 +396,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 +558,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 +581,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 +644,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 +668,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 +759,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 +853,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 +992,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 +1032,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}
@@ -1131,12 +1141,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 +1160,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 +1264,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 ?? ''}
@@ -1315,6 +1327,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
   paperWidthMm,
   paperHeightMm: _paperHeightMm,
 }) => {
+  const { t } = useNiceTranslation();
   const { t: tr } = useNiceTranslation();
   const p = useCallback(
     (patch: Partial<FieldPosition>) =>
@@ -1425,7 +1438,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 +1486,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 +1589,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 +1641,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 +1668,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 +1681,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}
@@ -1677,7 +1696,9 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                 <span className={styles.styleUnit}>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 +1728,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 +1737,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 +1814,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'}
@@ -1834,7 +1857,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                     },
                   })
                 }
-                placeholder='np. true / "PAID"'
+                placeholder={t('templateEditor.egTruePaid', 'e.g. true / "PAID"')}
               />
             </div>
             {field.conditional?.field && (
@@ -2031,7 +2054,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;