@nice2dev/ui-printing 1.0.28

package/src/print-button/NicePrintButton.tsx

@@ -0,0 +1,182 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+
+import type { PrinterInfo as _PrinterInfo, PrintJobOptions, NicePrintButtonProps } from '../types/printingTypes';
+
+import styles from './PrintButton.module.css';
+
+export const NicePrintButton: React.FC<NicePrintButtonProps> = ({
+  onPrint,
+  printers = [],
+  defaultPrinterId,
+  defaultCopies = 1,
+  disabled = false,
+  loading = false,
+  variant = 'primary',
+  size = 'md',
+  label = 'Drukuj',
+  className,
+  style,
+  theme = 'light',
+}) => {
+  const [open, setOpen] = useState(false);
+  const [copies, setCopies] = useState(defaultCopies);
+  const [printerId, setPrinterId] = useState(defaultPrinterId ?? printers[0]?.id ?? '');
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  const handlePrint = useCallback(() => {
+    const options: PrintJobOptions = { copies, printerId };
+    onPrint(options);
+    setOpen(false);
+  }, [copies, printerId, onPrint]);
+
+  const increment = useCallback(() => setCopies((c) => Math.min(99, c + 1)), []);
+  const decrement = useCallback(() => setCopies((c) => Math.max(1, c - 1)), []);
+
+  const rootClass = [styles.container, theme === 'dark' ? styles.dark : '', className ?? '']
+    .filter(Boolean)
+    .join(' ');
+
+  const triggerClass = [
+    styles.trigger,
+    styles[`variant-${variant}`],
+    styles[`size-${size}`],
+    disabled || loading ? styles.triggerDisabled : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div ref={containerRef} className={rootClass} style={style}>
+      {/* Trigger button */}
+      <div className={styles.buttonGroup}>
+        <button
+          className={`${triggerClass} ${styles.mainAction}`}
+          disabled={disabled || loading}
+          onClick={handlePrint}
+          aria-label={label}
+        >
+          {loading ? <span className={styles.spinner} /> : <span>🖨</span>}
+          <span>{label}</span>
+        </button>
+        <button
+          className={`${triggerClass} ${styles.dropdownToggle}`}
+          disabled={disabled || loading}
+          onClick={() => setOpen((o) => !o)}
+          aria-label="Opcje druku"
+          aria-expanded={open}
+        >
+          <span className={`${styles.chevron} ${open ? styles.chevronUp : ''}`}>▾</span>
+        </button>
+      </div>
+
+      {/* Dropdown panel */}
+      {open && (
+        <div className={styles.dropdown}>
+          {/* Copies */}
+          <div className={styles.section}>
+            <label className={styles.sectionLabel}>Liczba kopii</label>
+            <div className={styles.copiesRow}>
+              <button className={styles.copiesBtn} onClick={decrement} disabled={copies <= 1}>
+                −
+              </button>
+              <span className={styles.copiesValue}>{copies}</span>
+              <button className={styles.copiesBtn} onClick={increment} disabled={copies >= 99}>
+                +
+              </button>
+            </div>
+          </div>
+
+          <div className={styles.divider} />
+
+          {/* Printer selection */}
+          {printers.length > 0 && (
+            <>
+              <div className={styles.section}>
+                <label className={styles.sectionLabel}>Drukarka</label>
+                <select
+                  className={styles.printerSelect}
+                  value={printerId}
+                  onChange={(e) => setPrinterId(e.target.value)}
+                >
+                  {printers.map((p) => (
+                    <option
+                      key={p.id}
+                      value={p.id}
+                      disabled={p.status === 'offline' || (!p.isOnline && p.status == null)}
+                    >
+                      {p.name}{' '}
+                      {p.status === 'offline' || (!p.isOnline && p.status == null)
+                        ? '(Offline)'
+                        : p.status === 'busy'
+                          ? '(Zajęta)'
+                          : ''}
+                    </option>
+                  ))}
+                </select>
+                {/* Printer status indicator */}
+                {printers.find((p) => p.id === printerId) && (
+                  <div className={styles.printerStatus}>
+                    {(() => {
+                      const p = printers.find((pr) => pr.id === printerId)!;
+                      const s = p.status ?? (p.isOnline ? 'ready' : 'offline');
+                      return (
+                        <>
+                          <span className={`${styles.printerDot} ${styles[`dot-${s}`]}`} />
+                          <span className={styles.printerStatusLabel}>
+                            {s === 'ready'
+                              ? 'Gotowa'
+                              : s === 'busy'
+                                ? 'Zajęta'
+                                : s === 'offline'
+                                  ? 'Offline'
+                                  : 'Błąd'}
+                          </span>
+                        </>
+                      );
+                    })()}
+                  </div>
+                )}
+              </div>
+              <div className={styles.divider} />
+            </>
+          )}
+
+          {/* Submit */}
+          <div className={styles.section}>
+            <button
+              className={styles.submitBtn}
+              onClick={handlePrint}
+              disabled={
+                disabled ||
+                loading ||
+                (printers.length > 0 &&
+                  (() => {
+                    const p = printers.find((pr) => pr.id === printerId);
+                    return (
+                      p != null && (p.status === 'offline' || (!p.isOnline && p.status == null))
+                    );
+                  })())
+              }
+            >
+              {loading ? 'Drukowanie...' : `🖨 Drukuj${copies > 1 ? ` (${copies} kopie)` : ''}`}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/print-button/PrintButton.module.css

@@ -0,0 +1,167 @@
+.container {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  font-family: system-ui, sans-serif;
+  font-size: 14px;
+}
+
+/* Button group */
+.buttonGroup {
+  display: flex;
+  align-items: stretch;
+}
+
+/* Base trigger */
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--nice-space-1-5, 6px);
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background 0.15s, opacity 0.15s;
+  white-space: nowrap;
+}
+.triggerDisabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Variants */
+.variant-primary { background: var(--nice-primary-hover, #2563eb); color: var(--nice-bg, #FFF); }
+.variant-primary:not(.triggerDisabled):hover { background: var(--nice-primary-dark, #1d4ed8); }
+.variant-secondary { background: var(--nice-bg-secondary, #f8fafc); color: var(--nice-text, #1e293b); border: 1px solid var(--nice-border, #e2e8f0); }
+.variant-secondary:not(.triggerDisabled):hover { background: var(--nice-border, #e2e8f0); }
+.variant-ghost { background: transparent; color: var(--nice-primary-hover, #2563eb); }
+.variant-ghost:not(.triggerDisabled):hover { background: var(--nice-primary-bg, #eff6ff); }
+
+/* Sizes */
+.size-sm { padding: var(--nice-space-1-25, 5px) var(--nice-space-2-5, 10px); font-size: 12px; border-radius: var(--nice-radius-md, 6px) 0 0 var(--nice-radius-md, 6px); }
+.size-md { padding: var(--nice-space-2, 8px) var(--nice-space-3-5, 14px); font-size: 14px; border-radius: var(--nice-radius-lg, 8px) 0 0 var(--nice-radius-lg, 8px); }
+.size-lg { padding: var(--nice-space-2-5, 10px) 18px; font-size: 15px; border-radius: var(--nice-radius-lg, 10px) 0 0 var(--nice-radius-lg, 10px); }
+
+/* Main action part */
+.mainAction { flex: 1; border-right: 1px solid var(--nice-overlay-light-20, rgba(255, 255, 255, 0.2)); }
+.variant-secondary .mainAction { border-right-color: var(--nice-border, #e2e8f0); }
+.variant-ghost .mainAction { border-right-color: var(--nice-primary-bg, #dbeafe); }
+
+/* Dropdown toggle */
+.dropdownToggle {
+  padding: 0 var(--nice-space-2, 8px) !important;
+}
+.size-sm.dropdownToggle { border-radius: 0 var(--nice-radius-md, 6px) var(--nice-radius-md, 6px) 0; }
+.size-md.dropdownToggle { border-radius: 0 var(--nice-radius-lg, 8px) var(--nice-radius-lg, 8px) 0; }
+.size-lg.dropdownToggle { border-radius: 0 var(--nice-radius-lg, 10px) var(--nice-radius-lg, 10px) 0; }
+
+.chevron { display: inline-block; transition: transform 0.2s; font-size: 12px; }
+.chevronUp { transform: scaleY(-1); }
+
+/* Dropdown panel */
+.dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 220px;
+  background: var(--nice-bg, #FFF);
+  border: 1px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-lg, 10px);
+  box-shadow: 0 8px 32px var(--nice-overlay-12, rgba(0, 0, 0, 0.12));
+  z-index: 1000;
+  overflow: hidden;
+}
+.dark .dropdown { background: var(--nice-text, #1e293b); border-color: var(--nice-text, #334155); box-shadow: 0 8px 32px var(--nice-overlay-50, rgba(0, 0, 0, 0.5)); }
+
+.section { padding: var(--nice-space-3, 12px) var(--nice-space-3-5, 14px); }
+.sectionLabel {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--nice-text-muted, #94a3b8);
+  margin-bottom: var(--nice-space-2, 8px);
+}
+
+.divider { height: 1px; background: var(--nice-bg-secondary, #f1f5f9); }
+.dark .divider { background: var(--nice-text, #334155); }
+
+/* Copies row */
+.copiesRow {
+  display: flex;
+  align-items: center;
+  gap: var(--nice-space-2-5, 10px);
+}
+.copiesBtn {
+  width: 30px; height: 30px;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--nice-bg-secondary, #f8fafc);
+  border: 1px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-md, 6px);
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--nice-text-secondary, #475569);
+}
+.copiesBtn:disabled { opacity: 0.4; cursor: default; }
+.copiesBtn:not(:disabled):hover { background: var(--nice-border, #e2e8f0); }
+.copiesValue {
+  flex: 1;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--nice-text, #1e293b);
+}
+.dark .copiesValue { color: var(--nice-bg-secondary, #f1f5f9); }
+
+/* Printer select */
+.printerSelect {
+  width: 100%;
+  padding: var(--nice-space-1-75, 7px) var(--nice-space-2-5, 10px);
+  background: var(--nice-bg-secondary, #f8fafc);
+  border: 1px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-md, 6px);
+  font-size: 13px;
+  color: var(--nice-text, #1e293b);
+  cursor: pointer;
+}
+.dark .printerSelect { background: var(--nice-text, #0f172a); border-color: var(--nice-text, #334155); color: var(--nice-bg-secondary, #f1f5f9); }
+.printerSelect:focus { outline: none; border-color: var(--nice-primary-hover, #2563eb); }
+
+.printerStatus {
+  display: flex;
+  align-items: center;
+  gap: var(--nice-space-1-25, 5px);
+  margin-top: var(--nice-space-1-5, 6px);
+  font-size: 12px;
+}
+.printerDot { width: 7px; height: 7px; border-radius: var(--nice-radius-full, 50%); }
+.dot-ready { background: var(--nice-success-dark, #16a34a); }
+.dot-busy { background: var(--nice-warning, #f59e0b); }
+.dot-offline { background: var(--nice-text-muted, #94a3b8); }
+.dot-error { background: var(--nice-danger-dark, #dc2626); }
+.printerStatusLabel { color: var(--nice-text-secondary, #64748b); }
+
+/* Submit button */
+.submitBtn {
+  width: 100%;
+  padding: 9px var(--nice-space-3-5, 14px);
+  background: var(--nice-primary-hover, #2563eb);
+  color: var(--nice-bg, #FFF);
+  border: none;
+  border-radius: var(--nice-radius-lg, 8px);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  text-align: center;
+}
+.submitBtn:hover:not(:disabled) { background: var(--nice-primary-dark, #1d4ed8); }
+.submitBtn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Spinner */
+.spinner {
+  display: inline-block;
+  width: 14px; height: 14px;
+  border: 2px solid var(--nice-overlay-light-30, rgba(255, 255, 255, 0.3));
+  border-top-color: var(--nice-bg, #FFF);
+  border-radius: var(--nice-radius-full, 50%);
+  animation: spin 0.7s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }

package/src/print-button/index.ts

@@ -0,0 +1 @@
+export { NicePrintButton } from './NicePrintButton';