@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/MagnifyGlass/MagnifyGlass.tsx

@@ -0,0 +1,213 @@
+import * as React from 'react';
+import _debounce from 'lodash/debounce';
+import classnames from 'classnames';
+import Image from '../Image/Image';
+
+import styles from './MagnifyGlass.styl';
+
+export interface IImageProps {
+  src?: string;
+  srcSmall?: string;
+  srcLarge?: string;
+
+  className?: string;
+  alt?: string;
+  title?: string;
+
+  width: number | string;
+  height?: number | string;
+
+  // Ratio is more important than height in current setup
+  // So if you pass height manually it will be ignored.
+  ratioH?: number;
+  ratioW?: number;
+
+  style?: { [key: string]: string | number };
+
+  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+  onClick?: (event: React.MouseEvent<HTMLImageElement>) => void;
+}
+
+export interface IMagnifyGlassProps extends IImageProps {
+  /* Zoom image */
+  zoomFactor?: number;
+
+  /* Magnifying glass */
+  mgWidth?: number;
+  mgHeight?: number;
+}
+
+export interface IMagnifyGlassState {
+  showZoom: boolean;
+
+  imageBounds: ClientRect;
+  imageLoaded: boolean;
+}
+
+const debounceTime = 200;
+
+function withMagnifyGlassImage(WrappedComponent: typeof Image) {
+  return class MagnifyGlass extends React.Component<IMagnifyGlassProps, IMagnifyGlassState> {
+    static readonly defaultProps = {
+      /* Zoom image */
+      zoomFactor: 1.5,
+
+      /* Magnifying glass */
+      mgWidth: 200,
+      mgHeight: 200,
+
+      onLoad: () => {}
+    };
+
+    private readonly wrappedComponent: React.RefObject<any> = null;
+    private readonly glass: React.RefObject<any> = null;
+
+    constructor(props: IMagnifyGlassProps) {
+      super(props);
+
+      this.state = {
+        showZoom: false,
+
+        imageBounds: null,
+        imageLoaded: false
+      };
+
+      this.wrappedComponent = React.createRef();
+      this.glass = React.createRef();
+    }
+
+    componentWillUnmount() {
+      const { imageBounds } = this.state;
+
+      if (!!imageBounds) {
+        const wrappedImage = this.wrappedComponent.current.image.current;
+
+        /* Remove all event listeners */
+        wrappedImage.removeEventListener('mousemove', this.onMouseMove);
+        wrappedImage.removeEventListener('mouseout', this.onMouseOut);
+        wrappedImage.removeEventListener('mouseenter', this.onMouseEnter);
+      }
+
+      this.calcImageBounds.cancel();
+      this.calcImageBounds = null;
+    }
+
+    componentDidUpdate(_: IMagnifyGlassProps, prevState: IMagnifyGlassState) {
+      const { imageLoaded } = this.state;
+      if (prevState.imageLoaded !== imageLoaded) {
+        if (imageLoaded) {
+          /* getting ref to original image from Image component */
+          const wrappedImage = this.wrappedComponent.current.image.current;
+
+          wrappedImage.addEventListener('mousemove', this.onMouseMove);
+          wrappedImage.addEventListener('mouseout', this.onMouseOut);
+          wrappedImage.addEventListener('mouseenter', this.onMouseEnter);
+        }
+      }
+    }
+
+    onMouseMove = (e: React.MouseEvent<HTMLElement>): void => {
+      const { imageBounds } = this.state;
+
+      if (!!imageBounds) {
+        window.requestAnimationFrame(() => {
+          const { imageLoaded, imageBounds } = this.state;
+          const { mgWidth, mgHeight, zoomFactor } = this.props;
+
+          const { left: leftBound, top: topBound, width, height } = imageBounds;
+
+          if (imageLoaded && imageBounds) {
+            const glass = this.glass.current;
+
+            const relX = e.clientX - leftBound;
+            const relY = e.clientY - topBound;
+
+            const bgX = -(relX * zoomFactor - mgWidth / 2);
+            const bgY = -(relY * zoomFactor - mgHeight / 2);
+
+            const left = relX - mgWidth / 2;
+            const top = relY - mgHeight / 2;
+
+            glass.style.left = `${left}px`;
+            glass.style.top = `${top}px`;
+            glass.style.backgroundPosition = `${bgX}px ${bgY}px`;
+            glass.style.backgroundSize = `${width * zoomFactor}px ${height * zoomFactor}px`;
+          }
+        });
+      }
+    };
+
+    onMouseOut = (): void => {
+      this.setState({ showZoom: false });
+    };
+
+    onMouseEnter = (): void => {
+      this.calcImageBounds();
+      this.setState({ showZoom: true });
+    };
+
+    calcImageBounds = _debounce(
+      (): void => {
+        const { imageLoaded } = this.state;
+
+        if (imageLoaded) {
+          const wrappedImage = this.wrappedComponent.current.image.current;
+
+          this.setState({ imageBounds: wrappedImage.getBoundingClientRect() });
+        }
+      },
+      debounceTime, { trailing: true }
+    );
+
+    handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {
+      this.setState({ imageLoaded: true });
+
+      if (this.calcImageBounds) {
+        this.calcImageBounds();
+      }
+
+      this.props.onLoad(event);
+    };
+
+    render(): JSX.Element {
+      const { src, srcSmall, srcLarge, zoomFactor, mgHeight, mgWidth, onLoad, ...rest } = this.props;
+      const { showZoom, imageBounds } = this.state;
+
+      const imageProps = {
+        src,
+        srcSmall,
+        srcLarge,
+        ref: this.wrappedComponent,
+        onLoad: this.handleImageLoad,
+        ...rest
+      };
+
+      const inlineStyles = !!imageBounds ? {
+        width: mgWidth,
+        height: mgHeight,
+        backgroundImage: src ? `url(${src})` : `url(${srcLarge})`,
+        backgroundSize: `${zoomFactor * imageBounds.width}% ${zoomFactor * imageBounds.height}%`
+      } : {};
+
+      return (
+        <div className={classnames(styles.magnifier, { [styles.withZoom]: showZoom })}>
+          <WrappedComponent {...imageProps} />
+
+          {!!imageBounds && (
+            <div className={styles.mgWrapper} style={{ width: imageBounds.width, height: imageBounds.height }}>
+              <div
+                className={classnames(styles.mgGlass, { [styles.visible]: showZoom })}
+                style={{ ...inlineStyles }}
+                ref={this.glass}
+              />
+            </div>
+          )}
+
+        </div>
+      );
+    }
+  };
+}
+
+export default withMagnifyGlassImage;

package/compat/MdAccordionGroup/MdAccordionGroup.tsx

@@ -0,0 +1,53 @@
+// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
+// fe-ui-core MUI `MaterialAccordionGroup` (cookie-settings accordion with an
+// optional switch in the header). Renders the md3 `.macc` chrome manually —
+// the kit Accordion's header is a <button>, and nesting the switch inside a
+// button would be invalid/unclickable, so the header here is a div with its
+// own keyboard handling and the switch stops propagation.
+
+import React, { useState } from 'react';
+
+import Icon from '../../ui/Icon';
+import MdSwitch from '../MdSwitch/MdSwitch';
+import MdTooltip from '../MdTooltip/MdTooltip';
+
+interface IMdAccordionGroupProps {
+  title?: string;
+  tooltipText?: string;
+  children?: any;
+  switchProps?: any;
+  withSwitch?: boolean;
+}
+
+const MdAccordionGroup: React.FC<IMdAccordionGroupProps> = ({ title, tooltipText, children, switchProps, withSwitch }) => {
+  const [open, setOpen] = useState(false);
+  const toggle = () => setOpen(!open);
+
+  return (
+    <section className={'macc ' + (open ? 'macc--open' : 'macc--closed')}>
+      <div
+        className='macc-hd'
+        role='button'
+        tabIndex={0}
+        aria-expanded={open}
+        onClick={toggle}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } }}
+        style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', width: '100%' }}
+      >
+        <span className='macc-hd-text' style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+          <span className='macc-title md-title'>{title}</span>
+          {!!tooltipText && <MdTooltip icon='infoIcon' text={tooltipText} />}
+        </span>
+        {withSwitch ? (
+          <span style={{ marginLeft: 'auto' }} onClick={(e) => e.stopPropagation()}>
+            <MdSwitch {...switchProps} />
+          </span>
+        ) : null}
+        <Icon name='chevron-down' cls='macc-chev' />
+      </div>
+      {open ? <div style={{ padding: '4px 0 12px' }}>{children}</div> : null}
+    </section>
+  );
+};
+
+export default MdAccordionGroup;

package/compat/MdCheckbox/MdCheckbox.tsx

@@ -0,0 +1,69 @@
+// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
+// fe-ui-core MUI `CheckboxMaterial` / `FormCheckboxMaterial` plain-props usage
+// (checked/onChange/label — NOT the mobx-field binding, which the md3 kit
+// `FormCheckbox` owns). Renders the same `.mcheck` markup as the kit. Extra
+// legacy props (labelPlacement, icon, …) are accepted and ignored so call
+// sites only swap the import. Renders correctly only inside `.md3`.
+
+import * as React from 'react';
+import classnames from 'classnames';
+
+import Icon from '../../ui/Icon';
+
+export interface MdCheckboxProps {
+  name?: string;
+  value?: any;
+  checked?: boolean;
+  disabled?: boolean;
+  label?: React.ReactNode;
+  error?: boolean;
+  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string, value?: any) => void;
+  className?: string;
+  // legacy CheckboxMaterial props, accepted for call-site compatibility and ignored:
+  containerClassName?: string;
+  checkboxClassName?: string;
+  labelClassName?: string;
+  tooltipDescription?: string;
+  tooltipPosX?: string;
+  aggregation?: number;
+  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
+  icon?: any;
+  checkedIcon?: any;
+  type?: string;
+  content?: React.ReactNode;
+  radio?: boolean;
+  formControlClassName?: string;
+  contentType?: string;
+}
+
+const MdCheckbox: React.FunctionComponent<MdCheckboxProps> = ({
+  name, value, checked, disabled, label, error, onChange, className, content
+}) => {
+  const isChecked = !!checked;
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) onChange(event, event.target.checked, value);
+  };
+
+  return (
+    <div className={classnames('mcheck-group', className, { 'mcheck-group--error': !!error })}>
+      <label className={'mcheck' + (disabled ? ' mcheck--disabled' : '')}>
+        <input
+          type='checkbox'
+          className='mcheck-input'
+          name={name}
+          checked={isChecked}
+          disabled={disabled}
+          aria-checked={isChecked}
+          aria-invalid={!!error || undefined}
+          onChange={handleChange}
+        />
+        <span className='mcheck-box' aria-hidden='true'>
+          {isChecked ? <Icon name='check' size={16} stroke={3} cls='mcheck-tick' /> : null}
+        </span>
+        {label != null || content != null ? <span className='mcheck-label'>{label != null ? label : content}</span> : null}
+      </label>
+    </div>
+  );
+};
+
+export default MdCheckbox;

package/compat/MdField/MdField.tsx

@@ -0,0 +1,100 @@
+// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
+// fe-ui-core MUI `MaterialField`. Same plain value/onChange contract (label,
+// error text, password reveal, multiline, maxLength, …) but renders the md3
+// `.mfield` markup — the same markup fe-main's FormMaterialField wrapper uses —
+// so call sites only swap the import. Renders correctly only inside `.md3`.
+
+import * as React from 'react';
+import classnames from 'classnames';
+
+import Icon from '../../ui/Icon';
+
+export interface MdFieldProps {
+  className?: string;
+  /** legacy contract: `field.hasError && field.error` → string | false */
+  error?: any;
+  sx?: object;
+  required?: boolean;
+  disabled?: boolean;
+  multiline?: boolean;
+  autoComplete?: string;
+  value: string;
+  type?: string;
+  name?: string;
+  rows?: number;
+  /** accepted for call-site compatibility; md3 has one field size. */
+  size?: any;
+  variant?: 'filled' | 'outlined' | 'standard';
+  label?: string;
+  placeholder?: string;
+  maxLength?: number;
+  onChange: (value: string, name?: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+}
+
+const MdField: React.FunctionComponent<MdFieldProps> = ({
+  className, error, sx, required, disabled, multiline, autoComplete,
+  value, type, name, rows, label, placeholder, maxLength, onChange
+}) => {
+  const [reveal, setReveal] = React.useState(false);
+  const isPassword = type === 'password';
+  const inputType = isPassword && reveal ? 'text' : (type || 'text');
+  const hasError = !!error;
+  const generatedId = React.useId();
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    onChange(event.currentTarget.value, event.currentTarget.name || name, event);
+  };
+
+  return (
+    <div className={classnames('mfield-group', className)} style={sx as React.CSSProperties}>
+      {label ? (
+        <label className='md-label-sm mfield-label' htmlFor={generatedId}>
+          {label}{required ? ' *' : ''}
+        </label>
+      ) : null}
+      <div className={'mfield' + (hasError ? ' mfield--error' : '') + (disabled ? ' mfield--disabled' : '')}>
+        {multiline ? (
+          <textarea
+            id={generatedId}
+            name={name}
+            value={value == null ? '' : value}
+            onChange={handleChange}
+            disabled={disabled}
+            rows={rows || 3}
+            maxLength={maxLength}
+            placeholder={placeholder || ''}
+            autoComplete={autoComplete}
+            style={{ width: '100%', resize: 'vertical' }}
+          />
+        ) : (
+          <input
+            id={generatedId}
+            name={name}
+            type={inputType}
+            value={value == null ? '' : value}
+            onChange={handleChange}
+            disabled={disabled}
+            maxLength={maxLength}
+            placeholder={placeholder || ''}
+            autoComplete={autoComplete}
+            style={{ width: '100%' }}
+          />
+        )}
+        {isPassword ? (
+          <button
+            type='button'
+            className='mfield-reveal'
+            aria-label={reveal ? 'Passwort verbergen' : 'Passwort anzeigen'}
+            onClick={() => setReveal(!reveal)}
+            style={{ background: 'none', border: 0, cursor: 'pointer', display: 'inline-flex', alignItems: 'center' }}
+          >
+            <Icon name={reveal ? 'eye-off' : 'eye'} size={18} />
+          </button>
+        ) : null}
+      </div>
+      {hasError ? <span className='mfield-error-text'>{error}</span> : null}
+    </div>
+  );
+};
+
+export default MdField;

package/compat/MdSelect/MdSelect.tsx

@@ -0,0 +1,103 @@
+// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
+// fe-ui-core MUI `MaterialSelect` / `MaterialAutocomplete` single-select usage
+// (every fe-main call site is single-select; freeSolo/multiple were never used
+// with `true`). Keeps the legacy `items` + `value` + `onChange(value)` contract
+// and delegates the control to the md3 kit `Dropdown`; extra legacy props
+// (icon, size, cbd, …) are accepted and ignored so call sites only swap the
+// import. Renders correctly only inside `.md3`.
+
+import * as React from 'react';
+import classnames from 'classnames';
+
+import Dropdown from '../../ui/Dropdown';
+
+export interface MdSelectItem {
+  value: string | number;
+  label: any;
+  isDisabled?: boolean;
+  isSeries?: boolean;
+  [extra: string]: any;
+}
+
+export interface MdSelectProps {
+  label?: string;
+  value?: any;
+  onChange: (value: any) => void;
+  items?: MdSelectItem[];
+  error?: any;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+  placeholder?: string;
+  sx?: object;
+  // legacy MaterialSelect/MaterialAutocomplete props, accepted for
+  // call-site compatibility and ignored (md3 Dropdown owns the look):
+  t?: (key: string, options?: object) => string;
+  namespace?: string;
+  cbd?: boolean;
+  size?: any;
+  icon?: string;
+  classNameIcon?: string;
+  selectClassName?: string;
+  amountOfItems?: number;
+  customDimensionsIcon?: boolean;
+  dense?: boolean;
+  disableClearable?: boolean;
+  disableIcon?: boolean;
+  freeSolo?: boolean;
+  multiple?: boolean;
+  isClearable?: boolean;
+  readOnly?: boolean;
+  listWithImage?: string;
+  unit?: string;
+  type?: string;
+  name?: string;
+  children?: React.ReactNode;
+}
+
+/** legacy call sites sometimes pass `{value,label}` objects as `value`. */
+const normalize = (value: any): string => {
+  if (value == null) return '';
+  if (typeof value === 'object') return normalize(value.value != null ? value.value : value.label);
+  return String(value);
+};
+
+const MdSelect: React.FunctionComponent<MdSelectProps> = ({
+  label, value, onChange, items, error, required, disabled, className, placeholder, sx
+}) => {
+  const options = (items || []).map(item => ({
+    value: normalize(item.value),
+    label: typeof item.label === 'string' || typeof item.label === 'number' ? String(item.label) : normalize(item.value),
+    disabled: !!item.isDisabled
+  }));
+  const hasError = !!error;
+
+  const handleChange = (picked: string) => {
+    const match = (items || []).find(item => normalize(item.value) === picked);
+    onChange(match ? match.value : picked);
+  };
+
+  return (
+    <div
+      className={classnames('mfield-group', className, { 'mfield-group--error': hasError })}
+      style={sx as React.CSSProperties}
+    >
+      {label ? (
+        <label className='md-label-sm mfield-label'>
+          {label}{required ? ' *' : ''}
+        </label>
+      ) : null}
+      <Dropdown
+        value={normalize(value)}
+        options={options}
+        onChange={handleChange}
+        placeholder={placeholder || (label ? label : undefined)}
+        disabled={disabled}
+        ariaLabel={label}
+      />
+      {hasError && typeof error === 'string' ? <span className='mfield-error-text'>{error}</span> : null}
+    </div>
+  );
+};
+
+export default MdSelect;

package/compat/MdSwitch/MdSwitch.tsx

@@ -0,0 +1,29 @@
+// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
+// fe-ui-core `MaterialSwitch` ({value, onChange(value)} contract). Delegates to
+// the md3 kit Switch in controlled mode (checked + native event onChange).
+
+import * as React from 'react';
+
+import Switch from '../../ui/Switch';
+
+export interface IMdSwitchProps {
+  value: boolean;
+  disabled?: boolean;
+  onChange: (value: boolean) => void;
+  label?: string;
+  sx?: object;
+  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
+}
+
+const MdSwitch: React.FC<IMdSwitchProps> = ({ value = false, disabled, onChange, label, sx }) => (
+  <span style={sx as React.CSSProperties}>
+    <Switch
+      checked={!!value}
+      disabled={disabled}
+      label={label}
+      onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange(event.target.checked)}
+    />
+  </span>
+);
+
+export default MdSwitch;

package/compat/MdTabs/MdTabs.tsx

@@ -0,0 +1,47 @@
+// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
+// fe-ui-core MUI `TabsComponent` (ITabsProps contract: priceTabActiveIndex +
+// tabsTitles[{title,isDisable,children}]). Renders the md3.css `.st-tabs` /
+// `.st-tab` underline tab bar (plain buttons) + the design-neutral TabPanel.
+// Renders correctly only inside `.md3`.
+
+import * as React from 'react';
+import classnames from 'classnames';
+
+import { ITabsProps } from '../../types/types';
+import TabPanel from '../TabPanel/TabPanel';
+
+const MdTabs: React.FunctionComponent<ITabsProps> = ({
+  priceTabActiveIndex = 0,
+  onTabPriceSelect = () => undefined,
+  tabsTitles,
+  tabContentClassName = ''
+}) => {
+  return (
+    <>
+      <div role='tablist' className='st-tabs'>
+        {tabsTitles.map(({ title, isDisable }, index: number) => (
+          <button
+            type='button'
+            role='tab'
+            aria-controls={`simple-tabpanel-${index}`}
+            aria-selected={priceTabActiveIndex === index}
+            className={classnames('st-tab', { 'is-active': priceTabActiveIndex === index })}
+            id={title}
+            key={title}
+            disabled={isDisable}
+            onClick={(event) => onTabPriceSelect && onTabPriceSelect(event as any, index)}
+          >
+            {title}
+          </button>
+        ))}
+      </div>
+      {tabsTitles.map(({ children, title }, index: number) => (
+        <TabPanel value={priceTabActiveIndex} index={index} className={tabContentClassName} key={title}>
+          {children}
+        </TabPanel>
+      ))}
+    </>
+  );
+};
+
+export default MdTabs;

package/compat/MdTooltip/MdTooltip.tsx

@@ -0,0 +1,31 @@
+// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
+// fe-ui-core MUI `MaterialTooltip` (info icon + hover/click tooltip). Delegates
+// to the design-neutral compat Tooltip which owns the same UX; the MUI-only
+// props (zindex, disablePortal, placement) are accepted and ignored.
+
+import * as React from 'react';
+
+import Tooltip from '../Tooltip/Tooltip';
+
+export interface IMdTooltipProps {
+  text: React.ReactNode;
+  icon?: string;
+  className?: string;
+  placement?: string;
+  disabled?: Boolean;
+  zindex?: number;
+  disablePortal?: boolean;
+}
+
+const MdTooltip: React.FC<IMdTooltipProps> = ({ text, icon, className, disabled }) => {
+  if (disabled) return null;
+  return (
+    <Tooltip
+      description={text}
+      tooltipClassName={className}
+      iconName={icon === 'infoIcon' || icon === 'InfoTransparent' ? 'info' : icon}
+    />
+  );
+};
+
+export default MdTooltip;

package/compat/OfferDetailedSection/OfferDetailedSection.styl

@@ -0,0 +1,31 @@
+@import '../legacy-theme/mixins.styl'
+
+.offerDetailedBlock
+  width: 100%
+  padding-top: 5px;
+  box-sizing: border-box
+  background-color: white
+  grid-area: offerDetailedBlock;
+  borderRadius()
+
+  [class*='MuiTabs-flexContainer']
+    justify-content: space-around !important;
+
+  [role*='tabpanel']
+    min-height: auto;
+    padding: 15px 15px 0px
+
+  [class*="MuiTabs-indicator"]
+    border-radius: 3px 3px 0px 0px;
+    background-color: $primary;
+    height: 3px
+
+  // [class*="MuiButtonBase-root"]
+  //   font-weight: 400 !important;
+  //   font-size: 16px !important;
+  //   text-transform: none;
+
+  [class*="FinancingPanel__FinancingPanel"],
+  [class*="LeasingPanel__LeasingPanel"]
+    padding-left 0
+    padding-right 0