@bytebrand/fe-ui-core-autobahn 1.0.0

package/ui/FormRadioGroup.tsx

@@ -0,0 +1,106 @@
+// Autobahn (auto.de redesign) — md3 radio group bound to a mobx-react-form field.
+//
+// Drop-in re-skin of the legacy radio group (`components/ui/FormMaterialRadioGroup`, which wraps the
+// fe-ui-core MUI `RadioGroup`) used on 5 pages: DealerEmployeeSetPage, Checkout (Zahlart / services),
+// and the rich VehicleEdit/VehicleAdd sections (ColorPad colors, Environment emission stickers +
+// EnVKV type, FormCarEngine DAT models). It binds to the SAME mobx-react-form field objects the
+// legacy group used (VehicleEditForm.$('colorPadForm.exterior_exteriorColor'),
+// form.$('environmentForm.environmentEmissions_emissionSticker'), …) so every existing validation
+// rule / submit hook / error keeps working — only the markup is re-skinned.
+//
+// LEGACY SIGNATURE (replicated exactly — the contract a structure-preserving re-skin must keep):
+//   The legacy group owns the selected value from `field.value`, and CLONES each child injecting
+//   `checked` (computed from `child.value === field.value`) plus an `onChange`. The fe-ui-core
+//   RadioGroup's own change handler has the shape `onChange(event, value, radioName)`; bound to a
+//   mobx field via FormMaterialRadioGroup it forwards the selected value into the field. Here the
+//   same flow is preserved: this group reads `field.value`, clones each FormRadio child with
+//   `checked={child.value === field.value}` + an `onSelect(value)` + the shared `name`/`disabled`/
+//   `error`, and on select pushes the value into the field via the kit's standard call
+//   `field.onChange(value, field.name)` (the exact form DatePicker/Switch use — mobx-react-form
+//   reads the raw value as the change argument). The inline error mirrors the legacy `field.hasError
+//   && field.error`.
+//
+// observer-wrapped so it re-renders when field.value / field.error change. Children are cloned
+// (FormRadio leaves) so the group is the single owner of selection + field talk. Renders correctly
+// only inside a `<div className="md3">` subtree (scoped theme).
+
+import * as React from 'react';
+import { observer } from 'mobx-react';
+
+import FormRadio from './FormRadio';
+
+export interface FormRadioGroupProps {
+  /** mobx-react-form field (VehicleEditForm.$('colorPadForm.exterior_exteriorColor') etc.). Typed any — the lib ships no TS types. */
+  field: any;
+  /** radio-group name for the native inputs; defaults to field.name so each field is its own exclusive group. */
+  name?: string;
+  /** FormRadio children (each carries a `value` + arbitrary visual). */
+  children: React.ReactNode;
+  /** disables every radio in the group. */
+  disabled?: boolean;
+  /** accessible label for the group when there is no adjacent visible heading. */
+  ariaLabel?: string;
+  /** extra class(es) on the group container (layout hooks: wrap, swatch grid, sticker row…). */
+  className?: string;
+  /**
+   * extra class(es) on the inner radio row (`.mradio-set`, the element that is the direct
+   * flex/grid parent of the radios). Use this when a caller's layout class must lay the radios
+   * out (e.g. the legacy `FormMaterialRadioGroup` call sites whose section classes — `styles.colors`,
+   * `styles.usageTypesField`, the DAT `styles.radioGroup` … — were applied to the radio container,
+   * not an outer wrapper). Optional + defaulted, so existing callers are unaffected.
+   */
+  setClassName?: string;
+}
+
+const FormRadioGroup: React.FunctionComponent<FormRadioGroupProps> = observer(
+  ({ field, name, children, disabled = false, ariaLabel, className, setClassName }) => {
+    const groupName: string = name || (field && field.name) || 'mradio-group';
+    const selected = field ? field.value : undefined;
+    const hasError = !!(field && field.hasError && field.error);
+
+    // Push the chosen option key into the mobx field. Matches the kit's bound-control convention
+    // (DatePicker/Switch): mobx-react-form's onChange takes the raw value as its change argument,
+    // and we pass field.name as the second arg exactly as the other bound primitives do.
+    const handleSelect = React.useCallback(
+      (value: any) => {
+        if (disabled || !field) return;
+        field.onChange(value, field.name);
+      },
+      [disabled, field],
+    );
+
+    // Clone each FormRadio leaf, injecting the legacy-style derived props: checked, onSelect, the
+    // shared name, the merged disabled, and the error flag. Non-element children pass through.
+    const radios = React.Children.map(children, (child) => {
+      if (!React.isValidElement(child)) return child;
+      const childProps = child.props as { value?: any; disabled?: boolean };
+      return React.cloneElement(child as React.ReactElement<any>, {
+        checked: childProps.value === selected,
+        onSelect: handleSelect,
+        name: groupName,
+        disabled: disabled || childProps.disabled,
+        error: hasError,
+      });
+    });
+
+    return (
+      <div className={'mradio-group' + (className ? ` ${className}` : '')}>
+        <div
+          className={
+            'mradio-set' +
+            (hasError ? ' mradio-set--error' : '') +
+            (setClassName ? ` ${setClassName}` : '')
+          }
+          role="radiogroup"
+          aria-label={ariaLabel}
+          aria-invalid={hasError || undefined}
+        >
+          {radios}
+        </div>
+        {hasError ? <span className="mfield-error-text">{field.error}</span> : null}
+      </div>
+    );
+  },
+);
+
+export default FormRadioGroup;

package/ui/Icon.tsx

@@ -0,0 +1,391 @@
+import React from 'react';
+import {
+  Activity,
+  Apple,
+  Armchair,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUpDown,
+  Atom,
+  Award,
+  Badge,
+  BadgeCheck,
+  Banknote,
+  BarChart3,
+  Baseline,
+  Battery,
+  BatteryCharging,
+  Bell,
+  BellPlus,
+  BellRing,
+  Bluetooth,
+  BookOpenCheck,
+  Bookmark,
+  Box,
+  Bus,
+  Calendar,
+  Car,
+  CarFront,
+  Caravan,
+  Check,
+  CheckCircle,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  CigaretteOff,
+  ClipboardCheck,
+  Clock,
+  Code,
+  Cog,
+  Coins,
+  Contact,
+  Container,
+  Copy,
+  CopyPlus,
+  CreditCard,
+  Cross,
+  Cylinder,
+  Delete,
+  Divide,
+  DoorOpen,
+  Droplet,
+  Euro,
+  Eye,
+  EyeOff,
+  Facebook,
+  File,
+  FileText,
+  Flame,
+  Fuel,
+  Gauge,
+  GaugeCircle,
+  GitCompare,
+  GitFork,
+  Globe,
+  Grab,
+  Group,
+  Hash,
+  Headphones,
+  Heart,
+  HelpCircle,
+  History,
+  Home,
+  Image,
+  Info,
+  Instagram,
+  Italic,
+  Key,
+  LayoutGrid,
+  Leaf,
+  LifeBuoy,
+  List,
+  Lock,
+  LogOut,
+  Mail,
+  MailCheck,
+  MapPin,
+  Maximize,
+  Menu,
+  MessageCircle,
+  Minus,
+  Mountain,
+  Move,
+  Navigation,
+  Option,
+  Package,
+  Palette,
+  Pencil,
+  PencilLine,
+  Percent,
+  Phone,
+  Plus,
+  Pointer,
+  Power,
+  Presentation,
+  Radio,
+  Rainbow,
+  Receipt,
+  Repeat,
+  RotateCcw,
+  Route,
+  Rows,
+  Ruler,
+  Save,
+  Scroll,
+  Search,
+  SearchX,
+  Send,
+  Settings,
+  Settings2,
+  Share2,
+  Sheet,
+  ShieldCheck,
+  ShoppingCart,
+  SlidersHorizontal,
+  Sparkles,
+  Square,
+  Star,
+  Sticker,
+  Store,
+  Sun,
+  Tablet,
+  Tag,
+  Text,
+  Timer,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  Truck,
+  Twitter,
+  Type,
+  Umbrella,
+  Undo2,
+  Upload,
+  UploadCloud,
+  User,
+  UserPlus,
+  Users,
+  Wallet,
+  Weight,
+  Wind,
+  Wrench,
+  X,
+  Youtube,
+  Zap,
+  LucideProps,
+} from 'lucide-react';
+
+export interface IconProps {
+  /** kebab-case lucide icon name, e.g. 'chevron-down'. */
+  name: string;
+  size?: number;
+  /** strokeWidth on the rendered svg. */
+  stroke?: number;
+  color?: string;
+  style?: React.CSSProperties;
+  /** extra class(es) appended after the always-present `lucide` class. */
+  cls?: string;
+}
+
+/** kebab-case → PascalCase: 'chevron-down' → 'ChevronDown'. */
+function toPascalCase(name: string): string {
+  return name
+    .split('-')
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
+}
+
+/**
+ * Explicit icon registry — PascalCase name → lucide component.
+ *
+ * REGENERATION: this registry was generated deterministically by scanning
+ * every `name="..."` / `icon="..."` / `iconRight="..."` prop, ternary string
+ * literal, and data-config `icon: '...'` field across `source/`, converting
+ * each kebab-case candidate to PascalCase, and keeping only the ones that
+ * exist in lucide-react's `icons` map (the exact lookup the old
+ * `icons[toPascalCase(name)]` implementation used) — see git history for the
+ * one-off script. Importing named icons instead of the whole `icons` barrel
+ * lets webpack tree-shake the ~1150 unused lucide icons out of the bundle.
+ *
+ * If you introduce a NEW icon name anywhere in the app, you MUST add it here
+ * (import it above + add it to this map) or it will silently render nothing
+ * in production. The dev-only console.warn below catches misses locally/in
+ * CI (any name that resolves to null logs once), so a missing icon should
+ * surface immediately rather than shipping silently broken.
+ */
+const REGISTRY: Record<string, React.ComponentType<LucideProps>> = {
+  Activity,
+  Apple,
+  Armchair,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUpDown,
+  Atom,
+  Award,
+  Badge,
+  BadgeCheck,
+  Banknote,
+  BarChart3,
+  Baseline,
+  Battery,
+  BatteryCharging,
+  Bell,
+  BellPlus,
+  BellRing,
+  Bluetooth,
+  BookOpenCheck,
+  Bookmark,
+  Box,
+  Bus,
+  Calendar,
+  Car,
+  CarFront,
+  Caravan,
+  Check,
+  CheckCircle,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  CigaretteOff,
+  // Aliases: lucide 0.288 has no CircleCheck/HandCoins/Headset (newer-lucide names used in markup)
+  CircleCheck: CheckCircle,
+  ClipboardCheck,
+  Clock,
+  Code,
+  Cog,
+  Contact,
+  Container,
+  Copy,
+  CopyPlus,
+  CreditCard,
+  Cross,
+  Cylinder,
+  Delete,
+  Divide,
+  DoorOpen,
+  Droplet,
+  Euro,
+  Eye,
+  EyeOff,
+  Facebook,
+  File,
+  FileText,
+  Flame,
+  Fuel,
+  Gauge,
+  GaugeCircle,
+  GitCompare,
+  GitFork,
+  Globe,
+  Grab,
+  Group,
+  HandCoins: Coins,
+  Hash,
+  Headphones,
+  Headset: Headphones,
+  Heart,
+  HelpCircle,
+  History,
+  Home,
+  Image,
+  Info,
+  Instagram,
+  Italic,
+  Key,
+  LayoutGrid,
+  Leaf,
+  LifeBuoy,
+  List,
+  Lock,
+  LogOut,
+  Mail,
+  MailCheck,
+  MapPin,
+  Maximize,
+  Menu,
+  MessageCircle,
+  Minus,
+  Mountain,
+  Move,
+  Navigation,
+  Option,
+  Package,
+  Palette,
+  Pencil,
+  PencilLine,
+  Percent,
+  Phone,
+  Plus,
+  Pointer,
+  Power,
+  Presentation,
+  Radio,
+  Rainbow,
+  Receipt,
+  Repeat,
+  RotateCcw,
+  Route,
+  Rows,
+  Ruler,
+  Save,
+  Scroll,
+  Search,
+  SearchX,
+  Send,
+  Settings,
+  Settings2,
+  Share2,
+  Sheet,
+  ShieldCheck,
+  ShoppingCart,
+  SlidersHorizontal,
+  Sparkles,
+  Square,
+  Star,
+  Sticker,
+  Store,
+  Sun,
+  Tablet,
+  Tag,
+  Text,
+  Timer,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  Truck,
+  Twitter,
+  Type,
+  Umbrella,
+  Undo2,
+  Upload,
+  UploadCloud,
+  User,
+  UserPlus,
+  Users,
+  Wallet,
+  Weight,
+  Wind,
+  Wrench,
+  X,
+  Youtube,
+  Zap,
+};
+
+/** dev-only guard so an unregistered name surfaces immediately instead of silently rendering nothing. */
+const warned = new Set<string>();
+
+/**
+ * lucide-react backed icon. Maps a kebab-case `name` to the matching lucide
+ * component (looked up in the explicit `REGISTRY` above) and renders it with
+ * the `lucide` className so md3.css sizing rules still apply.
+ * Renders nothing if the name is unknown (same as before — some names in the
+ * app are intentionally non-lucide, e.g. country codes, or reference icons
+ * that don't exist in the installed lucide-react version).
+ */
+const Icon: React.FunctionComponent<IconProps> = ({ name, size = 20, stroke = 1.9, color, style, cls }) => {
+  const pascalName = toPascalCase(name);
+  const LucideIcon = REGISTRY[pascalName];
+  if (!LucideIcon) {
+    if (process.env.NODE_ENV !== 'production' && !warned.has(name)) {
+      warned.add(name);
+      // eslint-disable-next-line no-console
+      console.warn(`[autobahn/Icon] unknown icon name "${name}" (looked up as "${pascalName}") — either it's ` +
+        'intentionally non-lucide, or the registry in Icon.tsx needs regenerating.');
+    }
+    return null;
+  }
+  return (
+    <LucideIcon
+      className={cls ? `lucide ${cls}` : 'lucide'}
+      size={size}
+      strokeWidth={stroke}
+      color={color}
+      style={style}
+    />
+  );
+};
+
+export default Icon;

package/ui/IconButton.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import Icon from './Icon';
+
+export interface IconButtonProps {
+  /** kebab-case lucide icon name. */
+  name: string;
+  filled?: boolean;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  /** accessible label (aria-label). */
+  label?: string;
+  color?: string;
+  /** when active, tints + fills the icon with the primary color. */
+  active?: boolean;
+  size?: number;
+  style?: React.CSSProperties;
+}
+
+const IconButton: React.FunctionComponent<IconButtonProps> = ({
+  name,
+  filled,
+  onClick,
+  label,
+  color,
+  active,
+  size = 20,
+  style,
+}) => (
+  <button
+    className={'icon-btn' + (filled ? ' icon-btn--filled' : '')}
+    onClick={onClick}
+    aria-label={label}
+    style={style}
+  >
+    <Icon
+      name={name}
+      size={size}
+      color={active ? 'var(--md-primary)' : color}
+      style={{ fill: active ? 'var(--md-primary)' : 'none' }}
+    />
+  </button>
+);
+
+export default IconButton;