@asteby/metacore-runtime-react 29.1.0 → 29.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @asteby/metacore-runtime-react
 
+## 29.2.0
+
+### Minor Changes
+
+- fd10c7d: Los inputs de texto/número de formularios declarativos aceptan el opt-in `scan`: cuando el campo lo declara y el navegador soporta cámara, aparece un botón que escanea un código de barras y **llena el input** (ej. el SKU al crear producto). El escáner queda abierto (continuo) para corregir/reintentar; se cierra con la X. Complementa el `scan` ya soportado en `dynamic_select`.
+
 ## 29.1.0
 
 ### Minor Changes

package/dist/dynamic-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-form.d.ts","sourceRoot":"","sources":["../src/dynamic-form.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAwB,KAAK,UAAU,EAAE,MAAM,eAAe,CAAA;AAcrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EACH,cAAc,EACd,aAAa,EAOhB,MAAM,uBAAuB,CAAA;AAQ9B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAErD,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,CAAA;CAC1B;AAED,wBAAgB,WAAW,CAAC,EACxB,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,WAAuB,EACvB,WAAwB,EACxB,QAAgB,EAChB,UAAU,GACb,EAAE,gBAAgB,+BA8LlB"}
+{"version":3,"file":"dynamic-form.d.ts","sourceRoot":"","sources":["../src/dynamic-form.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAwB,KAAK,UAAU,EAAE,MAAM,eAAe,CAAA;AAcrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EACH,cAAc,EACd,aAAa,EAOhB,MAAM,uBAAuB,CAAA;AAU9B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAErD,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,CAAA;CAC1B;AAED,wBAAgB,WAAW,CAAC,EACxB,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,WAAuB,EACvB,WAAwB,EACxB,QAAgB,EAChB,UAAU,GACb,EAAE,gBAAgB,+BA8LlB"}

package/dist/dynamic-form.js

@@ -7,6 +7,8 @@ import { groupFieldsBySection } from './form-layout';
 import { FieldSection, WizardProgress } from './form-layout-ui';
 import { Input, Textarea, Label, Switch, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@asteby/metacore-ui/primitives';
 import { buildZodSchema, resolveWidget, isLineItemsField, evaluateBalance, applyOptionWhen, getDependsOn, getVisibleWhen, evaluateVisibleWhen, } from './dynamic-form-schema';
+import { ScanLine } from 'lucide-react';
+import { BarcodeScanner, isCameraScanSupported } from './barcode-scanner';
 import { useOptionsResolver } from './use-options-resolver';
 import { DynamicLineItems } from './dynamic-line-items';
 import { DynamicSelectField } from './dynamic-select-field';
@@ -238,9 +240,25 @@ function FieldRenderer({ field, value, onChange, initialValues, effectiveOptions
         case 'date':
             return _jsx(DynamicDateField, { field: field, value: value, onChange: onChange });
         default:
-            return _jsx(Input, { id: field.key, type: field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text', value: value || '', onChange: (e) => onChange(e.target.value), placeholder: field.placeholder });
+            return (_jsx(ScannableInput, { field: field, value: value, onChange: onChange, type: field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text' }));
     }
 }
+/**
+ * Input de texto/número con opción de ESCANEO por cámara para "llenar rápido".
+ * Cuando el campo declara `scan` (alias `scannable`) y el navegador soporta
+ * `BarcodeDetector`, agrega un botón de cámara: el código escaneado se escribe
+ * en el input y el escáner SE QUEDA ABIERTO (continuo) por si querés corregir o
+ * escanear otro — lo cerrás con la X. Sin el flag o sin soporte, es un Input
+ * normal (retrocompat total).
+ */
+function ScannableInput({ field, value, onChange, type, }) {
+    const [scanOpen, setScanOpen] = useState(false);
+    const scanEnabled = !!(field.scan ?? field.scannable) && isCameraScanSupported();
+    const input = (_jsx(Input, { id: field.key, type: type, value: value ?? '', onChange: (e) => onChange(type === 'number' ? e.target.valueAsNumber || '' : e.target.value), placeholder: field.placeholder }));
+    if (!scanEnabled)
+        return input;
+    return (_jsxs("div", { className: "flex w-full min-w-0 items-center gap-1.5", children: [_jsx("div", { className: "min-w-0 flex-1", children: input }), _jsx(Button, { type: "button", variant: "outline", size: "icon", className: "size-9 shrink-0", onClick: () => setScanOpen(true), title: "Escanear con la c\u00E1mara", "aria-label": "Escanear c\u00F3digo de barras con la c\u00E1mara", children: _jsx(ScanLine, { className: "size-4" }) }), _jsx(BarcodeScanner, { open: scanOpen, onClose: () => setScanOpen(false), onDetected: (code) => onChange(code), continuous: true, position: "fixed", title: `Escanear ${field.label ?? ''}`.trim() })] }));
+}
 function RefSelect({ field, value, onChange }) {
     const { options, loading } = useOptionsResolver({
         modelKey: '', // unused — `ref` drives the URL

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "29.1.0",
+  "version": "29.2.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/dynamic-form.tsx

@@ -27,6 +27,8 @@ import {
     getVisibleWhen,
     evaluateVisibleWhen,
 } from './dynamic-form-schema'
+import { ScanLine } from 'lucide-react'
+import { BarcodeScanner, isCameraScanSupported } from './barcode-scanner'
 import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
 import { DynamicLineItems } from './dynamic-line-items'
 import { DynamicSelectField } from './dynamic-select-field'
@@ -414,10 +416,71 @@ function FieldRenderer({
         case 'date':
             return <DynamicDateField field={field} value={value} onChange={onChange} />
         default:
-            return <Input id={field.key} type={field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text'} value={value || ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)} placeholder={field.placeholder} />
+            return (
+                <ScannableInput
+                    field={field}
+                    value={value}
+                    onChange={onChange}
+                    type={field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text'}
+                />
+            )
     }
 }
 
+/**
+ * Input de texto/número con opción de ESCANEO por cámara para "llenar rápido".
+ * Cuando el campo declara `scan` (alias `scannable`) y el navegador soporta
+ * `BarcodeDetector`, agrega un botón de cámara: el código escaneado se escribe
+ * en el input y el escáner SE QUEDA ABIERTO (continuo) por si querés corregir o
+ * escanear otro — lo cerrás con la X. Sin el flag o sin soporte, es un Input
+ * normal (retrocompat total).
+ */
+function ScannableInput({
+    field,
+    value,
+    onChange,
+    type,
+}: FieldRendererProps & { type: string }) {
+    const [scanOpen, setScanOpen] = useState(false)
+    const scanEnabled = !!(field.scan ?? field.scannable) && isCameraScanSupported()
+    const input = (
+        <Input
+            id={field.key}
+            type={type}
+            value={value ?? ''}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                onChange(type === 'number' ? e.target.valueAsNumber || '' : e.target.value)
+            }
+            placeholder={field.placeholder}
+        />
+    )
+    if (!scanEnabled) return input
+    return (
+        <div className="flex w-full min-w-0 items-center gap-1.5">
+            <div className="min-w-0 flex-1">{input}</div>
+            <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                className="size-9 shrink-0"
+                onClick={() => setScanOpen(true)}
+                title="Escanear con la cámara"
+                aria-label="Escanear código de barras con la cámara"
+            >
+                <ScanLine className="size-4" />
+            </Button>
+            <BarcodeScanner
+                open={scanOpen}
+                onClose={() => setScanOpen(false)}
+                onDetected={(code) => onChange(code)}
+                continuous
+                position="fixed"
+                title={`Escanear ${field.label ?? ''}`.trim()}
+            />
+        </div>
+    )
+}
+
 function RefSelect({ field, value, onChange }: FieldRendererProps) {
     const { options, loading } = useOptionsResolver({
         modelKey: '',          // unused — `ref` drives the URL