@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.2

package/ui/FileUpload.tsx

@@ -1,154 +1,154 @@
-// Autobahn (auto.de redesign) — md3 file-upload dropzone SHELL.
-//
-// This is the md3 *chrome* around a preserved upload engine — it does NOT upload anything
-// itself. The legacy pages keep their existing engine and slot it into this shell:
-//   - ImageUploadPage     → Uppy `<DragDrop uppy>` + `<ProgressBar uppy>` (Uppy owns its own
-//                           input + drag/drop); pass those as `children`. The shell is then
-//                           pure presentation; Uppy still wires every file/upload event.
-//   - ImageUploader (EXPORT settings, react-dropzone v4) → legacy `onDrop(files: File[])`.
-//                           Pass that same handler as `onFiles` and forward `multiple`/`accept`;
-//                           render the loader / preview as `children`.
-//
-// Standalone (no engine slotted in) it is still usable: clicking the zone or dropping files on
-// it fires `onFiles(File[])` via a hidden native <input type=file> — the SAME `File[]` shape
-// react-dropzone's `onDrop` uses, so it is a drop-in for that signature. When you slot a child
-// engine that owns its own input (Uppy), simply omit `onFiles` and the shell stays inert.
-//
-// Pure/presentational: no store, no API, no window access. The only state is the local
-// drag-over highlight. Renders correctly only inside a `<div className="md3">` subtree (scoped
-// theme). Not observer-wrapped — it binds to no mobx field (unlike FormField/Dropdown consumers).
-
-import React from 'react';
-
-import Icon from './Icon';
-
-export interface FileUploadProps {
-  /**
-   * Fired with the selected/dropped files — matches react-dropzone v4's `onDrop(files: File[])`.
-   * Omit when the slotted engine (e.g. Uppy `<DragDrop>`) owns its own input/drop handling; the
-   * shell then becomes inert chrome (no hidden input, no drop handler) so it never double-fires.
-   */
-  onFiles?: (files: File[]) => void;
-  /** forwarded to the hidden native input's `accept` (e.g. 'image/*'). Ignored when `onFiles` is unset. */
-  accept?: string;
-  /** allow selecting/dropping more than one file (default true). Mirrors react-dropzone `multiple`. */
-  multiple?: boolean;
-  /** secondary hint line under the headline (e.g. allowed types / size). */
-  hint?: React.ReactNode;
-  /** non-interactive + dimmed (mirrors react-dropzone/Uppy `disabled` while uploading). */
-  disabled?: boolean;
-  /** extra class(es) appended after the `mfu` classes (layout hooks). */
-  className?: string;
-  /**
-   * Slot rendered BELOW the dropzone prompt: the file list / previews / progress bar, or the
-   * preserved engine element itself (Uppy `<DragDrop>` + `<ProgressBar>`).
-   */
-  children?: React.ReactNode;
-}
-
-const FileUpload: React.FunctionComponent<FileUploadProps> = ({
-  onFiles,
-  accept,
-  multiple = true,
-  hint,
-  disabled = false,
-  className,
-  children,
-}) => {
-  const [dragOver, setDragOver] = React.useState(false);
-  const inputRef = React.useRef<HTMLInputElement | null>(null);
-
-  // Only the shell drives input/drop when it is NOT just wrapping a self-contained engine.
-  const interactive = !disabled && typeof onFiles === 'function';
-
-  const emit = (list: FileList | null) => {
-    if (!interactive || !list || list.length === 0) return;
-    onFiles!(Array.prototype.slice.call(list) as File[]);
-  };
-
-  const openPicker = () => {
-    if (!interactive || !inputRef.current) return;
-    inputRef.current.click();
-  };
-
-  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    emit(e.target.files);
-    // reset so selecting the same file again still fires change.
-    e.target.value = '';
-  };
-
-  const onDragOver = (e: React.DragEvent) => {
-    if (!interactive) return;
-    e.preventDefault();
-    if (!dragOver) setDragOver(true);
-  };
-
-  const onDragLeave = (e: React.DragEvent) => {
-    if (!interactive) return;
-    // ignore leave events bubbling from children still inside the zone.
-    if (e.currentTarget.contains(e.relatedTarget as Node)) return;
-    setDragOver(false);
-  };
-
-  const onDrop = (e: React.DragEvent) => {
-    if (!interactive) return;
-    e.preventDefault();
-    setDragOver(false);
-    emit(e.dataTransfer ? e.dataTransfer.files : null);
-  };
-
-  const onKeyDown = (e: React.KeyboardEvent) => {
-    if (!interactive) return;
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      openPicker();
-    }
-  };
-
-  const cn = ['mfu', dragOver && 'mfu--over', disabled && 'mfu--disabled', className]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <div className={cn}>
-      <div
-        className="mfu-zone"
-        role={interactive ? 'button' : undefined}
-        tabIndex={interactive ? 0 : undefined}
-        aria-disabled={disabled || undefined}
-        onClick={openPicker}
-        onKeyDown={onKeyDown}
-        onDragOver={onDragOver}
-        onDragEnter={onDragOver}
-        onDragLeave={onDragLeave}
-        onDrop={onDrop}
-      >
-        <span className="mfu-icon">
-          <Icon name="upload-cloud" size={28} />
-        </span>
-        <span className="mfu-prompt">
-          <span className="mfu-link">Dateien auswählen</span>
-          <span className="mfu-or"> oder hierher ziehen</span>
-        </span>
-        {hint ? <span className="mfu-hint md-body-sm">{hint}</span> : null}
-        {interactive ? (
-          <input
-            ref={inputRef}
-            type="file"
-            className="mfu-input"
-            accept={accept}
-            multiple={multiple}
-            disabled={disabled}
-            onChange={onInputChange}
-            // hide visually but keep accessible; click is proxied from the zone.
-            tabIndex={-1}
-            aria-hidden="true"
-          />
-        ) : null}
-      </div>
-      {children ? <div className="mfu-slot">{children}</div> : null}
-    </div>
-  );
-};
-
-export default FileUpload;
+// Autobahn (auto.de redesign) — md3 file-upload dropzone SHELL.
+//
+// This is the md3 *chrome* around a preserved upload engine — it does NOT upload anything
+// itself. The legacy pages keep their existing engine and slot it into this shell:
+//   - ImageUploadPage     → Uppy `<DragDrop uppy>` + `<ProgressBar uppy>` (Uppy owns its own
+//                           input + drag/drop); pass those as `children`. The shell is then
+//                           pure presentation; Uppy still wires every file/upload event.
+//   - ImageUploader (EXPORT settings, react-dropzone v4) → legacy `onDrop(files: File[])`.
+//                           Pass that same handler as `onFiles` and forward `multiple`/`accept`;
+//                           render the loader / preview as `children`.
+//
+// Standalone (no engine slotted in) it is still usable: clicking the zone or dropping files on
+// it fires `onFiles(File[])` via a hidden native <input type=file> — the SAME `File[]` shape
+// react-dropzone's `onDrop` uses, so it is a drop-in for that signature. When you slot a child
+// engine that owns its own input (Uppy), simply omit `onFiles` and the shell stays inert.
+//
+// Pure/presentational: no store, no API, no window access. The only state is the local
+// drag-over highlight. Renders correctly only inside a `<div className="md3">` subtree (scoped
+// theme). Not observer-wrapped — it binds to no mobx field (unlike FormField/Dropdown consumers).
+
+import React from 'react';
+
+import Icon from './Icon';
+
+export interface FileUploadProps {
+  /**
+   * Fired with the selected/dropped files — matches react-dropzone v4's `onDrop(files: File[])`.
+   * Omit when the slotted engine (e.g. Uppy `<DragDrop>`) owns its own input/drop handling; the
+   * shell then becomes inert chrome (no hidden input, no drop handler) so it never double-fires.
+   */
+  onFiles?: (files: File[]) => void;
+  /** forwarded to the hidden native input's `accept` (e.g. 'image/*'). Ignored when `onFiles` is unset. */
+  accept?: string;
+  /** allow selecting/dropping more than one file (default true). Mirrors react-dropzone `multiple`. */
+  multiple?: boolean;
+  /** secondary hint line under the headline (e.g. allowed types / size). */
+  hint?: React.ReactNode;
+  /** non-interactive + dimmed (mirrors react-dropzone/Uppy `disabled` while uploading). */
+  disabled?: boolean;
+  /** extra class(es) appended after the `mfu` classes (layout hooks). */
+  className?: string;
+  /**
+   * Slot rendered BELOW the dropzone prompt: the file list / previews / progress bar, or the
+   * preserved engine element itself (Uppy `<DragDrop>` + `<ProgressBar>`).
+   */
+  children?: React.ReactNode;
+}
+
+const FileUpload: React.FunctionComponent<FileUploadProps> = ({
+  onFiles,
+  accept,
+  multiple = true,
+  hint,
+  disabled = false,
+  className,
+  children,
+}) => {
+  const [dragOver, setDragOver] = React.useState(false);
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+
+  // Only the shell drives input/drop when it is NOT just wrapping a self-contained engine.
+  const interactive = !disabled && typeof onFiles === 'function';
+
+  const emit = (list: FileList | null) => {
+    if (!interactive || !list || list.length === 0) return;
+    onFiles!(Array.prototype.slice.call(list) as File[]);
+  };
+
+  const openPicker = () => {
+    if (!interactive || !inputRef.current) return;
+    inputRef.current.click();
+  };
+
+  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    emit(e.target.files);
+    // reset so selecting the same file again still fires change.
+    e.target.value = '';
+  };
+
+  const onDragOver = (e: React.DragEvent) => {
+    if (!interactive) return;
+    e.preventDefault();
+    if (!dragOver) setDragOver(true);
+  };
+
+  const onDragLeave = (e: React.DragEvent) => {
+    if (!interactive) return;
+    // ignore leave events bubbling from children still inside the zone.
+    if (e.currentTarget.contains(e.relatedTarget as Node)) return;
+    setDragOver(false);
+  };
+
+  const onDrop = (e: React.DragEvent) => {
+    if (!interactive) return;
+    e.preventDefault();
+    setDragOver(false);
+    emit(e.dataTransfer ? e.dataTransfer.files : null);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (!interactive) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      openPicker();
+    }
+  };
+
+  const cn = ['mfu', dragOver && 'mfu--over', disabled && 'mfu--disabled', className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={cn}>
+      <div
+        className="mfu-zone"
+        role={interactive ? 'button' : undefined}
+        tabIndex={interactive ? 0 : undefined}
+        aria-disabled={disabled || undefined}
+        onClick={openPicker}
+        onKeyDown={onKeyDown}
+        onDragOver={onDragOver}
+        onDragEnter={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+      >
+        <span className="mfu-icon">
+          <Icon name="upload-cloud" size={28} />
+        </span>
+        <span className="mfu-prompt">
+          <span className="mfu-link">Dateien auswählen</span>
+          <span className="mfu-or"> oder hierher ziehen</span>
+        </span>
+        {hint ? <span className="mfu-hint md-body-sm">{hint}</span> : null}
+        {interactive ? (
+          <input
+            ref={inputRef}
+            type="file"
+            className="mfu-input"
+            accept={accept}
+            multiple={multiple}
+            disabled={disabled}
+            onChange={onInputChange}
+            // hide visually but keep accessible; click is proxied from the zone.
+            tabIndex={-1}
+            aria-hidden="true"
+          />
+        ) : null}
+      </div>
+      {children ? <div className="mfu-slot">{children}</div> : null}
+    </div>
+  );
+};
+
+export default FileUpload;

package/ui/FormCheckbox.tsx

@@ -1,79 +1,79 @@
-// Autobahn (auto.de redesign) — md3 checkbox bound to a mobx-react-form field.
-//
-// Drop-in visual replacement for the legacy fe-ui-core `FormCheckbox` / `CheckboxMaterial`
-// (DealerEmployeeSetPage AccessRights role flags, EmailPermissionBlock T&C/permission box with
-// the 'boolean'/'accepted' rule, SettingsPage data-usage, etc.). Same data contract — only the
-// markup is re-skinned to the `.mcheck` md3 box + check icon. Renders correctly only inside a
-// `<div className="md3">` subtree (scoped theme).
-//
-// BINDING (must match the legacy signature EXACTLY or validation/submit breaks):
-//   mobx-react-form fields expose `field.checked` (boolean) and `field.onChange`, which is a
-//   NATIVE change-event handler — it reads `event.target.checked` itself and updates field.checked.
-//   So we bind `checked={!!field.checked}` and forward the raw native event straight to
-//   `field.onChange` — no wrapping, no boolean coercion, no `(event, checked, value)` re-call.
-//   This is the same contract the sibling Switch primitive uses, and the same one the legacy
-//   fe-ui-core Checkbox got via `field.bind()` (it forwarded the event onward and the field
-//   handler ignored the extra args). Validation rules ('required' / 'boolean' / 'accepted') then
-//   surface through field.hasError + field.error, shown inline — identical to the legacy FormCheckbox.
-//
-// observer-wrapped so it re-renders when field.checked / field.error change. Beyond the injected
-// field it is pure/presentational.
-
-import * as React from 'react';
-import { observer } from 'mobx-react';
-
-import Icon from './Icon';
-
-export interface FormCheckboxProps {
-  /** mobx-react-form field (DealerProfileForm.$('emailPermission'), EmplDataForm.$('isDadmin'), …). Typed any — the lib ships no TS types. */
-  field: any;
-  /** i18n translate — used ONLY to resolve field.label when no `label`/`children` is supplied (mirrors the legacy CheckboxMaterial). Callers that already translate pass the result as `label`. */
-  t?: (key: string, options?: object) => string;
-  /** label as plain text OR pre-built JSX (e.g. a translated string, or a <Trans> with links). */
-  label?: React.ReactNode;
-  /** rich label content (T&C/permission text with links). Takes precedence over `label`. */
-  children?: React.ReactNode;
-  /** override the field's own disabled flag. */
-  disabled?: boolean;
-  id?: string;
-}
-
-const FormCheckbox: React.FunctionComponent<FormCheckboxProps> = observer(
-  ({ field, t, label, children, disabled, id }) => {
-    const isChecked = !!field.checked;
-    const isDisabled = disabled != null ? disabled : !!field.disabled;
-    const hasError = !!field.hasError && !!field.error;
-
-    // children (rich) > explicit label > translated field.label (legacy CheckboxMaterial behaviour).
-    // We do NOT re-translate a passed `label`: callers (AccessRights, EmailPermissionBlock) already
-    // pass an already-translated string or a <Trans> element, so re-running t() would risk a miss.
-    let content: React.ReactNode = null;
-    if (children != null) content = children;
-    else if (label != null) content = label;
-    else if (field.label) content = t ? t(field.label) : field.label;
-
-    return (
-      <div className={'mcheck-group' + (hasError ? ' mcheck-group--error' : '')}>
-        <label className={'mcheck' + (isDisabled ? ' mcheck--disabled' : '')}>
-          <input
-            id={id}
-            type="checkbox"
-            className="mcheck-input"
-            checked={isChecked}
-            disabled={isDisabled}
-            aria-checked={isChecked}
-            aria-invalid={hasError || undefined}
-            onChange={field.onChange}
-          />
-          <span className="mcheck-box" aria-hidden="true">
-            {isChecked ? <Icon name="check" size={16} stroke={3} cls="mcheck-tick" /> : null}
-          </span>
-          {content != null ? <span className="mcheck-label">{content}</span> : null}
-        </label>
-        {hasError ? <span className="mcheck-error-text">{field.error}</span> : null}
-      </div>
-    );
-  },
-);
-
-export default FormCheckbox;
+// Autobahn (auto.de redesign) — md3 checkbox bound to a mobx-react-form field.
+//
+// Drop-in visual replacement for the legacy fe-ui-core `FormCheckbox` / `CheckboxMaterial`
+// (DealerEmployeeSetPage AccessRights role flags, EmailPermissionBlock T&C/permission box with
+// the 'boolean'/'accepted' rule, SettingsPage data-usage, etc.). Same data contract — only the
+// markup is re-skinned to the `.mcheck` md3 box + check icon. Renders correctly only inside a
+// `<div className="md3">` subtree (scoped theme).
+//
+// BINDING (must match the legacy signature EXACTLY or validation/submit breaks):
+//   mobx-react-form fields expose `field.checked` (boolean) and `field.onChange`, which is a
+//   NATIVE change-event handler — it reads `event.target.checked` itself and updates field.checked.
+//   So we bind `checked={!!field.checked}` and forward the raw native event straight to
+//   `field.onChange` — no wrapping, no boolean coercion, no `(event, checked, value)` re-call.
+//   This is the same contract the sibling Switch primitive uses, and the same one the legacy
+//   fe-ui-core Checkbox got via `field.bind()` (it forwarded the event onward and the field
+//   handler ignored the extra args). Validation rules ('required' / 'boolean' / 'accepted') then
+//   surface through field.hasError + field.error, shown inline — identical to the legacy FormCheckbox.
+//
+// observer-wrapped so it re-renders when field.checked / field.error change. Beyond the injected
+// field it is pure/presentational.
+
+import * as React from 'react';
+import { observer } from 'mobx-react';
+
+import Icon from './Icon';
+
+export interface FormCheckboxProps {
+  /** mobx-react-form field (DealerProfileForm.$('emailPermission'), EmplDataForm.$('isDadmin'), …). Typed any — the lib ships no TS types. */
+  field: any;
+  /** i18n translate — used ONLY to resolve field.label when no `label`/`children` is supplied (mirrors the legacy CheckboxMaterial). Callers that already translate pass the result as `label`. */
+  t?: (key: string, options?: object) => string;
+  /** label as plain text OR pre-built JSX (e.g. a translated string, or a <Trans> with links). */
+  label?: React.ReactNode;
+  /** rich label content (T&C/permission text with links). Takes precedence over `label`. */
+  children?: React.ReactNode;
+  /** override the field's own disabled flag. */
+  disabled?: boolean;
+  id?: string;
+}
+
+const FormCheckbox: React.FunctionComponent<FormCheckboxProps> = observer(
+  ({ field, t, label, children, disabled, id }) => {
+    const isChecked = !!field.checked;
+    const isDisabled = disabled != null ? disabled : !!field.disabled;
+    const hasError = !!field.hasError && !!field.error;
+
+    // children (rich) > explicit label > translated field.label (legacy CheckboxMaterial behaviour).
+    // We do NOT re-translate a passed `label`: callers (AccessRights, EmailPermissionBlock) already
+    // pass an already-translated string or a <Trans> element, so re-running t() would risk a miss.
+    let content: React.ReactNode = null;
+    if (children != null) content = children;
+    else if (label != null) content = label;
+    else if (field.label) content = t ? t(field.label) : field.label;
+
+    return (
+      <div className={'mcheck-group' + (hasError ? ' mcheck-group--error' : '')}>
+        <label className={'mcheck' + (isDisabled ? ' mcheck--disabled' : '')}>
+          <input
+            id={id}
+            type="checkbox"
+            className="mcheck-input"
+            checked={isChecked}
+            disabled={isDisabled}
+            aria-checked={isChecked}
+            aria-invalid={hasError || undefined}
+            onChange={field.onChange}
+          />
+          <span className="mcheck-box" aria-hidden="true">
+            {isChecked ? <Icon name="check" size={16} stroke={3} cls="mcheck-tick" /> : null}
+          </span>
+          {content != null ? <span className="mcheck-label">{content}</span> : null}
+        </label>
+        {hasError ? <span className="mcheck-error-text">{field.error}</span> : null}
+      </div>
+    );
+  },
+);
+
+export default FormCheckbox;