@nice2dev/ui-printing 1.0.28 → 1.0.29

package/dist/template-editor/NiceTemplateEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NiceTemplateEditor.d.ts","sourceRoot":"","sources":["../../src/template-editor/NiceTemplateEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmF,MAAM,OAAO,CAAC;AAExG,OAAO,KAAK,EAUV,uBAAuB,EAKxB,MAAM,wBAAwB,CAAC;AA6rDhC,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAgoBhE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"NiceTemplateEditor.d.ts","sourceRoot":"","sources":["../../src/template-editor/NiceTemplateEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAUV,uBAAuB,EAKxB,MAAM,wBAAwB,CAAC;AAksDhC,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA+nBhE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/ui-printing",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "React components for print management: template editor, template browser, print preview, print queue and print button",
   "keywords": [
     "printing",
@@ -54,7 +54,7 @@
     }
   },
   "devDependencies": {
-    "@nice2dev/ui": "^1.0.20",
+    "@nice2dev/ui": "^1.0.30",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^4.2.0",

package/src/template-editor/NiceTemplateEditor.tsx

@@ -1,5 +1,13 @@
 /* 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, useCallback, useRef as _useRef, useReducer, useEffect, useMemo } from 'react';
+import { NiceAppShell } from '@nice2dev/ui';
+import React, {
+  useState,
+  useCallback,
+  useRef as _useRef,
+  useReducer,
+  useEffect,
+  useMemo,
+} from 'react';
 
 import type {
   PrintTemplate,
@@ -153,7 +161,12 @@ function makeField(type: string, schemaField?: DataSourceField): PrintDataField
     base.style.backgroundColor = 'var(--nice-bg-secondary, #f1f5f9)';
   }
   if (type === 'line') {
-    base.style = { ...base.style, borderWidth: 0.5, borderColor: 'var(--nice-text, #000000)', borderStyle: 'solid' };
+    base.style = {
+      ...base.style,
+      borderWidth: 0.5,
+      borderColor: 'var(--nice-text, #000000)',
+      borderStyle: 'solid',
+    };
   }
   return base;
 }
@@ -2242,38 +2255,37 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
   const paperHPx = paperH * zoom * MM_TO_PX;
 
   return (
-    <div
+    <NiceAppShell
+      flush
       className={`${styles.root} ${theme === 'dark' ? styles.dark : ''} ${className ?? ''}`}
       style={style}
-      onClick={() => setSelectedIds(new Set())}
-    >
-      <Toolbar
-        tpl={tpl}
-        zoom={zoom}
-        canUndo={past.length > 0}
-        canRedo={future.length > 0}
-        showGrid={showGrid}
-        showRulers={showRulers}
-        readOnly={readOnly}
-        selectedCount={selectedIds.size}
-        onPaperChange={(size, orient) => update({ paperSize: size, orientation: orient })}
-        onZoom={setZoom}
-        onUndo={() => dispatch({ type: 'UNDO' })}
-        onRedo={() => dispatch({ type: 'REDO' })}
-        onToggleGrid={() => setShowGrid((g) => !g)}
-        onToggleRulers={() => setShowRulers((r) => !r)}
-        onInsert={insertField}
-        onDelete={deleteSelected}
-        onDuplicate={duplicateSelected}
-        onAlignH={alignH}
-        onAlignV={alignV}
-        onBringForward={bringForward}
-        onSendBackward={sendBackward}
-        onSave={onSave ? () => onSave(tpl) : undefined}
-      />
-
-      <div className={styles.editorBody}>
-        {/* Left panel */}
+      toolbar={
+        <Toolbar
+          tpl={tpl}
+          zoom={zoom}
+          canUndo={past.length > 0}
+          canRedo={future.length > 0}
+          showGrid={showGrid}
+          showRulers={showRulers}
+          readOnly={readOnly}
+          selectedCount={selectedIds.size}
+          onPaperChange={(size, orient) => update({ paperSize: size, orientation: orient })}
+          onZoom={setZoom}
+          onUndo={() => dispatch({ type: 'UNDO' })}
+          onRedo={() => dispatch({ type: 'REDO' })}
+          onToggleGrid={() => setShowGrid((g) => !g)}
+          onToggleRulers={() => setShowRulers((r) => !r)}
+          onInsert={insertField}
+          onDelete={deleteSelected}
+          onDuplicate={duplicateSelected}
+          onAlignH={alignH}
+          onAlignV={alignV}
+          onBringForward={bringForward}
+          onSendBackward={sendBackward}
+          onSave={onSave ? () => onSave(tpl) : undefined}
+        />
+      }
+      sidebar={
         <LeftPanel
           activeTab={leftTab}
           onTabChange={setLeftTab}
@@ -2286,90 +2298,8 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
           onUpdateTpl={(patch) => update(patch)}
           onReorderField={reorderFieldInLayers}
         />
-
-        {/* Canvas area */}
-        <div className={styles.canvasArea}>
-          {/* Test data bar */}
-          {Array.isArray(sampleData) && sampleData.length > 0 && (
-            <div className={styles.testDataBar}>
-              <span className={styles.testDataLabel}>Dane testowe:</span>
-              <select
-                className={styles.testDataSelect}
-                value={testDataIdx}
-                onChange={(e) => setTestDataIdx(+e.target.value)}
-              >
-                {sampleData.map((_, i) => (
-                  <option key={i} value={i}>
-                    Rekord {i + 1}
-                  </option>
-                ))}
-              </select>
-            </div>
-          )}
-
-          {/* Ruler corner + rulers */}
-          {showRulers && (
-            <div className={styles.rulerWrapper}>
-              <div className={styles.rulerCorner} />
-              <Ruler lengthMm={paperW} zoom={zoom} orientation="h" />
-              <Ruler lengthMm={paperH} zoom={zoom} orientation="v" />
-            </div>
-          )}
-
-          {/* Scrollable paper area */}
-          <div className={styles.paperScroll} onClick={(e) => e.stopPropagation()}>
-            <div className={styles.paperShadow} style={{ width: paperWPx, minHeight: paperHPx }}>
-              {/* Margin guides */}
-              <div
-                className={styles.marginGuide}
-                style={{
-                  top: tpl.margins.top * zoom * MM_TO_PX,
-                  right: tpl.margins.right * zoom * MM_TO_PX,
-                  bottom: tpl.margins.bottom * zoom * MM_TO_PX,
-                  left: tpl.margins.left * zoom * MM_TO_PX,
-                }}
-              />
-
-              {/* Watermarks */}
-              {(tpl.watermarks ?? []).map((wm) => (
-                <div
-                  key={wm.id}
-                  className={styles.watermark}
-                  style={{
-                    fontSize: (wm.fontSize ?? 60) * zoom,
-                    color: wm.color ?? 'var(--nice-text-muted, #94a3b8)',
-                    opacity: wm.opacity,
-                    transform: `translate(-50%, -50%) rotate(${wm.angle}deg)`,
-                  }}
-                >
-                  {wm.type === 'text' ? wm.text : '??'}
-                </div>
-              ))}
-
-              {/* Sections */}
-              {tpl.sections.map((section) => (
-                <div key={section.id}>
-                  <SectionCanvas
-                    section={section}
-                    zoom={zoom}
-                    paperWidthMm={paperW}
-                    selectedIds={selectedIds}
-                    sampleData={sampleDataRecord}
-                    readOnly={readOnly}
-                    showGrid={showGrid}
-                    onFieldClick={handleFieldClick}
-                    onFieldDragStart={handleFieldDragStart}
-                    onResizeStart={handleResizeStart}
-                    onSectionHeightChange={handleSectionHeightChange}
-                    onDropField={handleDropField}
-                  />
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* Right properties panel */}
+      }
+      rightSidebar={
         <PropertiesPanel
           field={firstSelected}
           activeTab={rightTab}
@@ -2378,8 +2308,90 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
           paperWidthMm={paperW}
           paperHeightMm={paperH}
         />
+      }
+    >
+      {/* Canvas area */}
+      <div className={styles.canvasArea} onClick={() => setSelectedIds(new Set())}>
+        {/* Test data bar */}
+        {Array.isArray(sampleData) && sampleData.length > 0 && (
+          <div className={styles.testDataBar}>
+            <span className={styles.testDataLabel}>Dane testowe:</span>
+            <select
+              className={styles.testDataSelect}
+              value={testDataIdx}
+              onChange={(e) => setTestDataIdx(+e.target.value)}
+            >
+              {sampleData.map((_, i) => (
+                <option key={i} value={i}>
+                  Rekord {i + 1}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {/* Ruler corner + rulers */}
+        {showRulers && (
+          <div className={styles.rulerWrapper}>
+            <div className={styles.rulerCorner} />
+            <Ruler lengthMm={paperW} zoom={zoom} orientation="h" />
+            <Ruler lengthMm={paperH} zoom={zoom} orientation="v" />
+          </div>
+        )}
+
+        {/* Scrollable paper area */}
+        <div className={styles.paperScroll} onClick={(e) => e.stopPropagation()}>
+          <div className={styles.paperShadow} style={{ width: paperWPx, minHeight: paperHPx }}>
+            {/* Margin guides */}
+            <div
+              className={styles.marginGuide}
+              style={{
+                top: tpl.margins.top * zoom * MM_TO_PX,
+                right: tpl.margins.right * zoom * MM_TO_PX,
+                bottom: tpl.margins.bottom * zoom * MM_TO_PX,
+                left: tpl.margins.left * zoom * MM_TO_PX,
+              }}
+            />
+
+            {/* Watermarks */}
+            {(tpl.watermarks ?? []).map((wm) => (
+              <div
+                key={wm.id}
+                className={styles.watermark}
+                style={{
+                  fontSize: (wm.fontSize ?? 60) * zoom,
+                  color: wm.color ?? 'var(--nice-text-muted, #94a3b8)',
+                  opacity: wm.opacity,
+                  transform: `translate(-50%, -50%) rotate(${wm.angle}deg)`,
+                }}
+              >
+                {wm.type === 'text' ? wm.text : '??'}
+              </div>
+            ))}
+
+            {/* Sections */}
+            {tpl.sections.map((section) => (
+              <div key={section.id}>
+                <SectionCanvas
+                  section={section}
+                  zoom={zoom}
+                  paperWidthMm={paperW}
+                  selectedIds={selectedIds}
+                  sampleData={sampleDataRecord}
+                  readOnly={readOnly}
+                  showGrid={showGrid}
+                  onFieldClick={handleFieldClick}
+                  onFieldDragStart={handleFieldDragStart}
+                  onResizeStart={handleResizeStart}
+                  onSectionHeightChange={handleSectionHeightChange}
+                  onDropField={handleDropField}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
       </div>
-    </div>
+    </NiceAppShell>
   );
 };