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

package/compat/Radio/RadioGroup.tsx

@@ -1,65 +1,65 @@
-import * as React from 'react';
-import classnames from 'classnames';
-
-import styles from './RadioGroup.styl';
-
-interface IRadioGroupProps {
-  name: string;
-  value: any;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>, value: any, radioName?: string) => void;
-
-  children: any;
-  error?: boolean;
-
-  containerClassName?: string;
-  childClassName?: string;
-  wrapperClassname?: string;
-  radioName?: string;
-  onBlur?: () => void;
-}
-
-class RadioGroup extends React.Component<IRadioGroupProps> {
-  onChange = (event: React.ChangeEvent<HTMLInputElement>, _checked: boolean, value: any) => {
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    if (this.props.onBlur) this.props.onBlur();
-    this.props.onChange(event, value, this.props.radioName);
-  };
-
-  renderChildren = () => {
-    const { children, value, name, error, childClassName } = this.props;
-
-    return React.Children.map(children, (element: any) => {
-      const { type, props: _props } = element;
-
-      if (typeof type !== 'function') {
-        return;
-      }
-
-      const childClassNames = classnames(styles.child, childClassName);
-      const isChecked = (value === _props.value);
-
-      const newProps = {
-        ..._props, name, error,
-        containerClassName: childClassNames,
-        checked: isChecked,
-        onChange: this.onChange
-      };
-
-      return React.cloneElement(element, newProps);
-    });
-  };
-
-  render() {
-    const { containerClassName, wrapperClassname } = this.props;
-    const containerClassNames = classnames(styles.container, containerClassName, wrapperClassname);
-
-    return (
-      <div className={containerClassNames}>
-        {this.renderChildren()}
-      </div>
-    );
-  }
-}
-
-export default RadioGroup;
+import * as React from 'react';
+import classnames from 'classnames';
+
+import styles from './RadioGroup.styl';
+
+interface IRadioGroupProps {
+  name: string;
+  value: any;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>, value: any, radioName?: string) => void;
+
+  children: any;
+  error?: boolean;
+
+  containerClassName?: string;
+  childClassName?: string;
+  wrapperClassname?: string;
+  radioName?: string;
+  onBlur?: () => void;
+}
+
+class RadioGroup extends React.Component<IRadioGroupProps> {
+  onChange = (event: React.ChangeEvent<HTMLInputElement>, _checked: boolean, value: any) => {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    if (this.props.onBlur) this.props.onBlur();
+    this.props.onChange(event, value, this.props.radioName);
+  };
+
+  renderChildren = () => {
+    const { children, value, name, error, childClassName } = this.props;
+
+    return React.Children.map(children, (element: any) => {
+      const { type, props: _props } = element;
+
+      if (typeof type !== 'function') {
+        return;
+      }
+
+      const childClassNames = classnames(styles.child, childClassName);
+      const isChecked = (value === _props.value);
+
+      const newProps = {
+        ..._props, name, error,
+        containerClassName: childClassNames,
+        checked: isChecked,
+        onChange: this.onChange
+      };
+
+      return React.cloneElement(element, newProps);
+    });
+  };
+
+  render() {
+    const { containerClassName, wrapperClassname } = this.props;
+    const containerClassNames = classnames(styles.container, containerClassName, wrapperClassname);
+
+    return (
+      <div className={containerClassNames}>
+        {this.renderChildren()}
+      </div>
+    );
+  }
+}
+
+export default RadioGroup;

package/compat/Range/Range.tsx

@@ -1,79 +1,79 @@
-// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
-// fe-ui-core MUI Slider `Range`. Same contract — min/max/step/value/units,
-// onChange(event, value), withRangeLimit/maxFinancingFirstInstallment — but
-// renders a native <input type="range"> tinted with the md3 primary token plus
-// a value bubble while dragging (the MUI slider showed the value label on drag).
-// Both call sites (fe-main FormSlider, OfferPanel RangeGroup) display the
-// current value themselves next to the slider header, exactly as before.
-
-import React, { useState, useEffect } from 'react';
-
-import FormattedNumber from '../FormattedNumber/FormattedNumber';
-
-interface IRangeProps {
-  children?: JSX.Element;
-  min: number;
-  max: number;
-  step: number;
-  units: string;
-  value: number;
-  withRangeLimit?: boolean;
-  onChange: (event: Event, value: number | number[], activeThumb?: number) => void;
-  maxFinancingFirstInstallment?: number;
-  // legacy RangeGroup passthroughs, accepted and ignored
-  isAlternative?: boolean;
-  onAfterChange?: () => void;
-  name?: string;
-}
-
-const Range: React.FC<IRangeProps> = ({
-  min, max, step, value = 0, units, withRangeLimit, onChange, maxFinancingFirstInstallment
-}) => {
-  const [rangeValue, setRangeValue] = useState<number>(0);
-  const [dragging, setDragging] = useState(false);
-
-  useEffect(() => { setRangeValue(value); }, [value]);
-
-  const effectiveMax = withRangeLimit && maxFinancingFirstInstallment != null ? maxFinancingFirstInstallment : max;
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const next = Number(event.target.value);
-    setRangeValue(next);
-    // legacy signature says DOM Event; hand over the native event under the hood.
-    onChange(event.nativeEvent, next);
-  };
-
-  const span = effectiveMax - min || 1;
-  const percent = Math.min(100, Math.max(0, ((rangeValue - min) / span) * 100));
-
-  return (
-    <span style={{ position: 'relative', display: 'block', padding: '10px 0' }}>
-      {dragging ? (
-        <span
-          style={{
-            position: 'absolute', top: -18, left: `${percent}%`, transform: 'translateX(-50%)',
-            fontSize: 12, padding: '2px 6px', borderRadius: 6, whiteSpace: 'nowrap',
-            background: 'var(--md-inverse-surface, #322F35)', color: 'var(--md-inverse-on-surface, #fff)'
-          }}
-        >
-          <FormattedNumber value={rangeValue} numbersAfterDot={0} />{` ${units}`}
-        </span>
-      ) : null}
-      <input
-        type='range'
-        min={min}
-        max={effectiveMax}
-        step={step}
-        value={rangeValue}
-        onChange={handleChange}
-        onPointerDown={() => setDragging(true)}
-        onPointerUp={() => setDragging(false)}
-        onBlur={() => setDragging(false)}
-        style={{ width: '100%', accentColor: 'var(--md-primary)', cursor: 'pointer' }}
-        aria-valuetext={`${rangeValue} ${units}`}
-      />
-    </span>
-  );
-};
-
-export default Range;
+// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
+// fe-ui-core MUI Slider `Range`. Same contract — min/max/step/value/units,
+// onChange(event, value), withRangeLimit/maxFinancingFirstInstallment — but
+// renders a native <input type="range"> tinted with the md3 primary token plus
+// a value bubble while dragging (the MUI slider showed the value label on drag).
+// Both call sites (fe-main FormSlider, OfferPanel RangeGroup) display the
+// current value themselves next to the slider header, exactly as before.
+
+import React, { useState, useEffect } from 'react';
+
+import FormattedNumber from '../FormattedNumber/FormattedNumber';
+
+interface IRangeProps {
+  children?: JSX.Element;
+  min: number;
+  max: number;
+  step: number;
+  units: string;
+  value: number;
+  withRangeLimit?: boolean;
+  onChange: (event: Event, value: number | number[], activeThumb?: number) => void;
+  maxFinancingFirstInstallment?: number;
+  // legacy RangeGroup passthroughs, accepted and ignored
+  isAlternative?: boolean;
+  onAfterChange?: () => void;
+  name?: string;
+}
+
+const Range: React.FC<IRangeProps> = ({
+  min, max, step, value = 0, units, withRangeLimit, onChange, maxFinancingFirstInstallment
+}) => {
+  const [rangeValue, setRangeValue] = useState<number>(0);
+  const [dragging, setDragging] = useState(false);
+
+  useEffect(() => { setRangeValue(value); }, [value]);
+
+  const effectiveMax = withRangeLimit && maxFinancingFirstInstallment != null ? maxFinancingFirstInstallment : max;
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const next = Number(event.target.value);
+    setRangeValue(next);
+    // legacy signature says DOM Event; hand over the native event under the hood.
+    onChange(event.nativeEvent, next);
+  };
+
+  const span = effectiveMax - min || 1;
+  const percent = Math.min(100, Math.max(0, ((rangeValue - min) / span) * 100));
+
+  return (
+    <span style={{ position: 'relative', display: 'block', padding: '10px 0' }}>
+      {dragging ? (
+        <span
+          style={{
+            position: 'absolute', top: -18, left: `${percent}%`, transform: 'translateX(-50%)',
+            fontSize: 12, padding: '2px 6px', borderRadius: 6, whiteSpace: 'nowrap',
+            background: 'var(--md-inverse-surface, #322F35)', color: 'var(--md-inverse-on-surface, #fff)'
+          }}
+        >
+          <FormattedNumber value={rangeValue} numbersAfterDot={0} />{` ${units}`}
+        </span>
+      ) : null}
+      <input
+        type='range'
+        min={min}
+        max={effectiveMax}
+        step={step}
+        value={rangeValue}
+        onChange={handleChange}
+        onPointerDown={() => setDragging(true)}
+        onPointerUp={() => setDragging(false)}
+        onBlur={() => setDragging(false)}
+        style={{ width: '100%', accentColor: 'var(--md-primary)', cursor: 'pointer' }}
+        aria-valuetext={`${rangeValue} ${units}`}
+      />
+    </span>
+  );
+};
+
+export default Range;

package/compat/RateSearchValue/RateSearchValue.styl

@@ -1,22 +1,22 @@
-@import '../legacy-theme/theme.styl'
-
-.RateSearchValue
-  box-sizing: border-box
-  font-size: 16px
-  line-height: 48px
-  height: 38px
-  width: 100%
-  padding: 0 5px
-  border: 1px solid $grey-d
-  cursor: pointer
-  text-align: left
-  white-space: nowrap
-  overflow: hidden
-  text-overflow: ellipsis
-  color: rgba(#333, .8);
-  &:hover
-    border-color: $grey-b
-
-.label
-  display: inline-block
-  margin-right: 5px
+@import '../legacy-theme/theme.styl'
+
+.RateSearchValue
+  box-sizing: border-box
+  font-size: 16px
+  line-height: 48px
+  height: 38px
+  width: 100%
+  padding: 0 5px
+  border: 1px solid $grey-d
+  cursor: pointer
+  text-align: left
+  white-space: nowrap
+  overflow: hidden
+  text-overflow: ellipsis
+  color: rgba(#333, .8);
+  &:hover
+    border-color: $grey-b
+
+.label
+  display: inline-block
+  margin-right: 5px

package/compat/RateSearchValue/RateSearchValue.tsx

@@ -1,55 +1,55 @@
-import React from 'react';
-import classnames from 'classnames';
-
-import { getFormattedPrice } from '../../utils/CommonUtils';
-
-import styles from './RateSearchValue.styl';
-
-interface IRateSearchValueProps {
-  t?: (phrase: string, options?: any) => string;
-  i18nPrefix?: string;
-  className?: string;
-  showLabel?: boolean;
-
-  monthlyInstallmentFrom?: any;
-  monthlyInstallmentTo?: any;
-  firstInstallment?: number;
-  paybackPeriod?: number;
-
-  onClick: () => void;
-
-}
-
-const RateSearchValue: React.FC<IRateSearchValueProps> = (props) => {
-  const { t, i18nPrefix, className, showLabel, onClick, monthlyInstallmentFrom, monthlyInstallmentTo, firstInstallment, paybackPeriod } = props;
-  const rowValues: any = { monthlyInstallmentFrom, monthlyInstallmentTo, firstInstallment, paybackPeriod };
-  const wrapperClassName = classnames(styles.RateSearchValue, className);
-
-  const transformValue = (name: string, value: any) => {
-    return Number(value) ? t(`${i18nPrefix}${name}Value`, { value: getFormattedPrice(Number(value), '$,.0f') }) : null;
-  };
-
-  const monthlyInstallmentValues = Number(monthlyInstallmentFrom) || Number(monthlyInstallmentTo)
-    ? ['monthlyInstallmentFrom', 'monthlyInstallmentTo'].map((item: string) => transformValue(item, rowValues[item]))
-    : [t(`${i18nPrefix}any`)];
-  const otherValues = ['firstInstallment', 'paybackPeriod'].map((item: string) => transformValue(item, rowValues[item]));
-  const values = [...monthlyInstallmentValues, ...otherValues].filter((item: any) => !!item);
-
-  return (
-    <div onClick={onClick} className={wrapperClassName}>
-      {showLabel
-        ? <strong className={styles.label}>{t(`${i18nPrefix}monthlyInstallmentLabel`)}</strong>
-        : null
-      }
-      <span>{values.length > 1 ? values.join(', ') : t(`${i18nPrefix}defaultValue`)}</span>
-    </div>
-  );
-};
-
-RateSearchValue.defaultProps = {
-  t: (phrase: string) => phrase,
-  i18nPrefix: '',
-  showLabel: true
-};
-
-export default RateSearchValue;
+import React from 'react';
+import classnames from 'classnames';
+
+import { getFormattedPrice } from '../../utils/CommonUtils';
+
+import styles from './RateSearchValue.styl';
+
+interface IRateSearchValueProps {
+  t?: (phrase: string, options?: any) => string;
+  i18nPrefix?: string;
+  className?: string;
+  showLabel?: boolean;
+
+  monthlyInstallmentFrom?: any;
+  monthlyInstallmentTo?: any;
+  firstInstallment?: number;
+  paybackPeriod?: number;
+
+  onClick: () => void;
+
+}
+
+const RateSearchValue: React.FC<IRateSearchValueProps> = (props) => {
+  const { t, i18nPrefix, className, showLabel, onClick, monthlyInstallmentFrom, monthlyInstallmentTo, firstInstallment, paybackPeriod } = props;
+  const rowValues: any = { monthlyInstallmentFrom, monthlyInstallmentTo, firstInstallment, paybackPeriod };
+  const wrapperClassName = classnames(styles.RateSearchValue, className);
+
+  const transformValue = (name: string, value: any) => {
+    return Number(value) ? t(`${i18nPrefix}${name}Value`, { value: getFormattedPrice(Number(value), '$,.0f') }) : null;
+  };
+
+  const monthlyInstallmentValues = Number(monthlyInstallmentFrom) || Number(monthlyInstallmentTo)
+    ? ['monthlyInstallmentFrom', 'monthlyInstallmentTo'].map((item: string) => transformValue(item, rowValues[item]))
+    : [t(`${i18nPrefix}any`)];
+  const otherValues = ['firstInstallment', 'paybackPeriod'].map((item: string) => transformValue(item, rowValues[item]));
+  const values = [...monthlyInstallmentValues, ...otherValues].filter((item: any) => !!item);
+
+  return (
+    <div onClick={onClick} className={wrapperClassName}>
+      {showLabel
+        ? <strong className={styles.label}>{t(`${i18nPrefix}monthlyInstallmentLabel`)}</strong>
+        : null
+      }
+      <span>{values.length > 1 ? values.join(', ') : t(`${i18nPrefix}defaultValue`)}</span>
+    </div>
+  );
+};
+
+RateSearchValue.defaultProps = {
+  t: (phrase: string) => phrase,
+  i18nPrefix: '',
+  showLabel: true
+};
+
+export default RateSearchValue;

package/compat/RateSearchWidget/RateSearchWidget.styl

@@ -1,107 +1,107 @@
-@import '../legacy-theme/theme.styl'
-
-.wrapper
-  position: relative
-  box-sizing: border-box
-  padding: 12px 18px
-  background-color: white
-  font-family: 'Arial Fett', 'Arial Standard', 'Arial'
-  border-radius: 10px
-  border: 1px solid $grey-e
-  width: 100%
-  box-shadow: 0px 2px 10px rgba(76, 78, 100, 0.22);
-  &:before
-    display: none
-    position: absolute
-    content: ''
-    background-color: white
-    width: 16px
-    height: 16px
-    transform: rotate(45deg)
-
-  :global
-    .react-select__control
-      height: auto !important
-      min-height: 36px !important
-      border-radius: 0 !important
-
-    .react-select__menu
-      .react-select__option.react-select__option--is-focused:not(.react-select__option--is-disabled)
-        background-color: $primary8
-        color: $grey-3
-        box-shadow: none
-        
-      .react-select__option.react-select__option--is-selected:not(.react-select__option--is-disabled)
-        background-color: $skyBlue
-        color: white
-
-    .react-select__value-container
-      padding: 0 5px
-
-      .react-select__placeholder
-        color: $grey-ae
-
-.header
-  display: flex
-  justify-content: space-between
-  align-items: center
-  // margin-bottom: 18px
-  font-size: 20px
-  & svg
-    cursor: pointer
-
-.title
-  margin: 0
-  font-size: 14px
-  color: #4C4E64DE
-  line-height: 32px
-
-.dropDownLabel
-  display: block;
-  width: 100%
-  margin-top: 16px
-
-.caption
-  display: block
-  margin-bottom: 9px
-  font-size: 14px
-  font-weight: bold
-
-.dropdown
-  margin-bottom: 20px
-
-.actionsWrapper
-  margin-top: 16px;
-  display: flex
-  gap: 10px;
-  justify-content: space-evenly
-  align-items: center
-
-.dropdownsWrap
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-.applyButton
-  width: 96px
-  min-width: 96px
-  height: 30px
-  cursor: pointer
-  border-radius: 8px
-  box-sizing: border-box
-
-.abortButton
-  display inline-block
-  margin-left: 15px
-  cursor: pointer
-  font-size: 13px;
-  line-height: 22px;
-  letter-spacing: 0.46px;
-  text-transform: capitalize;
-  color: #9E9E9E;
-
-.twoColumnWrapper
-  display: flex
-  justify-content: space-between
-  align-items: flex-end
+@import '../legacy-theme/theme.styl'
+
+.wrapper
+  position: relative
+  box-sizing: border-box
+  padding: 12px 18px
+  background-color: white
+  font-family: 'Arial Fett', 'Arial Standard', 'Arial'
+  border-radius: 10px
+  border: 1px solid $grey-e
+  width: 100%
+  box-shadow: 0px 2px 10px rgba(76, 78, 100, 0.22);
+  &:before
+    display: none
+    position: absolute
+    content: ''
+    background-color: white
+    width: 16px
+    height: 16px
+    transform: rotate(45deg)
+
+  :global
+    .react-select__control
+      height: auto !important
+      min-height: 36px !important
+      border-radius: 0 !important
+
+    .react-select__menu
+      .react-select__option.react-select__option--is-focused:not(.react-select__option--is-disabled)
+        background-color: $primary8
+        color: $grey-3
+        box-shadow: none
+        
+      .react-select__option.react-select__option--is-selected:not(.react-select__option--is-disabled)
+        background-color: $skyBlue
+        color: white
+
+    .react-select__value-container
+      padding: 0 5px
+
+      .react-select__placeholder
+        color: $grey-ae
+
+.header
+  display: flex
+  justify-content: space-between
+  align-items: center
+  // margin-bottom: 18px
+  font-size: 20px
+  & svg
+    cursor: pointer
+
+.title
+  margin: 0
+  font-size: 14px
+  color: #4C4E64DE
+  line-height: 32px
+
+.dropDownLabel
+  display: block;
+  width: 100%
+  margin-top: 16px
+
+.caption
+  display: block
+  margin-bottom: 9px
+  font-size: 14px
+  font-weight: bold
+
+.dropdown
+  margin-bottom: 20px
+
+.actionsWrapper
+  margin-top: 16px;
+  display: flex
+  gap: 10px;
+  justify-content: space-evenly
+  align-items: center
+
+.dropdownsWrap
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+.applyButton
+  width: 96px
+  min-width: 96px
+  height: 30px
+  cursor: pointer
+  border-radius: 8px
+  box-sizing: border-box
+
+.abortButton
+  display inline-block
+  margin-left: 15px
+  cursor: pointer
+  font-size: 13px;
+  line-height: 22px;
+  letter-spacing: 0.46px;
+  text-transform: capitalize;
+  color: #9E9E9E;
+
+.twoColumnWrapper
+  display: flex
+  justify-content: space-between
+  align-items: flex-end
   flex-wrap: wrap